From 901861d5b8e154ca9e9c2253f81f70267ef25fd3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sun, 22 Jan 2023 23:29:44 +0100
Subject: [PATCH] Fix #1330
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 CHANGELOG.md                                      |  1 +
 .../features/ui/components/modals/media-modal.tsx | 15 ++++-----------
 .../features/ui/components/modals/video-modal.tsx |  1 +
 app/soapbox/features/video/index.tsx              |  4 +++-
 4 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1255b07f2..12038a0b6 100644
--- a/CHANGELOG.md
+++ b/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.
diff --git a/app/soapbox/features/ui/components/modals/media-modal.tsx b/app/soapbox/features/ui/components/modals/media-modal.tsx
index 5b5ff0dc9..94bb3f70f 100644
--- a/app/soapbox/features/ui/components/modals/media-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/media-modal.tsx
@@ -85,9 +85,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
     };
   }, [index]);
 
-  const getIndex = () => {
-    return index !== null ? index : props.index;
-  };
+  const getIndex = () => index !== null ? index : props.index;
 
   const toggleNavigation = () => {
     setNavigationHidden(!navigationHidden);
@@ -164,15 +162,9 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
     });
   }
 
-  const isMultiMedia = media.map((image) => {
-    if (image.type !== 'image') {
-      return true;
-    }
+  const isMultiMedia = media.map((image) => image.type !== 'image').toArray();
 
-    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}
diff --git a/app/soapbox/features/ui/components/modals/video-modal.tsx b/app/soapbox/features/ui/components/modals/video-modal.tsx
index f323a397e..13bef9638 100644
--- a/app/soapbox/features/ui/components/modals/video-modal.tsx
+++ b/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
       />
diff --git a/app/soapbox/features/video/index.tsx b/app/soapbox/features/video/index.tsx
index bd63528e4..c06c73eca 100644
--- a/app/soapbox/features/video/index.tsx
+++ b/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>