Fix #1330

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

CHANGELOG.md

@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Chats: don't display "copy" button for messages without text.
 - Posts: don't have to click the play button twice for embedded videos.
 - index.html: remove `referrer` meta tag so it doesn't conflict with backend's `Referrer-Policy` header.
+- Modals: fix media modal automatically switching to video.
 
 ### Removed
 - Admin: single user mode. Now the homepage can be redirected to any URL.

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

@@ -85,9 +85,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
     };
   }, [index]);
 
-  const getIndex = () => {
+  const getIndex = () => index !== null ? index : props.index;
-    return index !== null ? index : props.index;
-  };
 
   const toggleNavigation = () => {
     setNavigationHidden(!navigationHidden);
@@ -164,15 +162,9 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
     });
   }
 
-  const isMultiMedia = media.map((image) => {
+  const isMultiMedia = media.map((image) => image.type !== 'image').toArray();
-    if (image.type !== 'image') {
-      return true;
-    }
-
-    return false;
-  }).toArray();
 
-  const content = media.map(attachment => {
+  const content = media.map((attachment, i) => {
     const width  = (attachment.meta.getIn(['original', 'width']) || undefined) as number | undefined;
     const height = (attachment.meta.getIn(['original', 'height']) || undefined) as number | undefined;
 
@@ -204,6 +196,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
           height={height}
           startTime={time}
           detailed
+          autoFocus={i === getIndex()}
           link={link}
           alt={attachment.description}
           key={attachment.url}

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

@@ -39,6 +39,7 @@ const VideoModal: React.FC<IVideoModal> = ({ status, account, media, time, onClo
         startTime={time}
         link={link}
         detailed
+        autoFocus
         alt={media.description}
         visible
       />

app/soapbox/features/video/index.tsx

@@ -106,6 +106,7 @@ interface IVideo {
   height?: number,
   startTime?: number,
   detailed?: boolean,
+  autoFocus?: boolean,
   inline?: boolean,
   cacheWidth?: (width: number) => void,
   visible?: boolean,
@@ -119,6 +120,7 @@ const Video: React.FC<IVideo> = ({
   width,
   visible = false,
   detailed = false,
+  autoFocus = false,
   cacheWidth,
   startTime,
   src,
@@ -518,7 +520,7 @@ const Video: React.FC<IVideo> = ({
               aria-label={intl.formatMessage(paused ? messages.play : messages.pause)}
               className='player-button'
               onClick={togglePlay}
-              autoFocus={detailed}
+              autoFocus={autoFocus}
             >
               <Icon src={paused ? require('@tabler/icons/player-play.svg') : require('@tabler/icons/player-pause.svg')} />
             </button>