MediaModal: support not having a status

app/soapbox/features/ui/components/modals/media-modal.tsx

@@ -70,7 +70,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
   const [next, setNext] = useState<string>();
   const [index, setIndex] = useState<number | null>(null);
   const [navigationHidden, setNavigationHidden] = useState(false);
-  const [isFullScreen, setIsFullScreen] = useState(false);
+  const [isFullScreen, setIsFullScreen] = useState(!status);
 
   const hasMultipleImages = media.size > 1;
 
@@ -219,6 +219,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
     };
   }, [index]);
 
+  if (status) {
     if (!actualStatus && isLoaded) {
       return (
         <MissingIndicator />
@@ -226,6 +227,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
     } else if (!actualStatus) {
       return <PlaceholderStatus />;
     }
+  }
 
   return (
     <div className='media-modal pointer-events-auto fixed inset-0 z-[9999] h-full bg-gray-900/90'>
@@ -255,13 +257,13 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
             <HStack alignItems='center' space={2}>
               <IconButton
                 src={require('@tabler/icons/download.svg')}
-                // title={intl.formatMessage(isFullScreen ? messages.minimize : messages.expand)}
                 theme='dark'
                 className='!p-1.5 hover:scale-105 hover:bg-gray-900'
                 iconClassName='h-5 w-5'
                 onClick={handleDownload}
               />
 
+              {status && (
                 <IconButton
                   src={isFullScreen ? require('@tabler/icons/arrows-minimize.svg') : require('@tabler/icons/arrows-maximize.svg')}
                   title={intl.formatMessage(isFullScreen ? messages.minimize : messages.expand)}
@@ -270,6 +272,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
                   iconClassName='h-5 w-5'
                   onClick={() => setIsFullScreen(!isFullScreen)}
                 />
+              )}
             </HStack>
           </HStack>
 
@@ -311,6 +314,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
             )}
           </div>
 
+          {actualStatus && (
             <HStack justifyContent='center' className='flex-[0_0_60px]'>
               <StatusActionBar
                 status={actualStatus}
@@ -318,8 +322,10 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
                 statusActionButtonTheme='inverse'
               />
             </HStack>
+          )}
         </Stack>
 
+        {actualStatus && (
           <div
             className={
               clsx('-right-96 hidden bg-white transition-all xl:fixed xl:inset-y-0 xl:right-0 xl:flex xl:w-96 xl:flex-col', {
@@ -336,6 +342,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
               handleLoadMore={handleLoadMore}
             />
           </div>
+        )}
       </div>
     </div>
   );