Media Viewer: Close Right Column when focusing to a message

src/components/mediaViewer/MediaViewer.tsx

@@ -9,7 +9,7 @@ import {
 import { MediaViewerOrigin } from '../../types';
 
 import { ANIMATION_END_DELAY } from '../../config';
-
+import { IS_IOS, IS_SINGLE_COLUMN_LAYOUT, IS_TOUCH_ENV } from '../../util/environment';
 import useBlurSync from '../../hooks/useBlurSync';
 import useForceUpdate from '../../hooks/useForceUpdate';
 import { dispatchHeavyAnimationEvent } from '../../hooks/useHeavyAnimationCheck';
@@ -49,7 +49,6 @@ import {
 import { stopCurrentAudio } from '../../util/audioPlayer';
 import captureEscKeyListener from '../../util/captureEscKeyListener';
 import { captureEvents } from '../../util/captureEvents';
-import { IS_IOS, IS_SINGLE_COLUMN_LAYOUT, IS_TOUCH_ENV } from '../../util/environment';
 import windowSize from '../../util/windowSize';
 import { AVATAR_FULL_DIMENSIONS, MEDIA_VIEWER_MEDIA_QUERY } from '../common/helpers/mediaDimensions';
 import { renderMessageText } from '../common/helpers/renderMessageText';
@@ -101,6 +100,7 @@ const MediaViewer: FC<StateProps> = ({
     closeMediaViewer,
     openForwardMenu,
     focusMessage,
+    toggleChatInfo,
   } = getDispatch();
 
   const isOpen = Boolean(avatarOwner || messageId);
@@ -313,12 +313,16 @@ const MediaViewer: FC<StateProps> = ({
 
   const handleFooterClick = useCallback(() => {
     close();
-    focusMessage({
+
-      chatId,
+    if (IS_SINGLE_COLUMN_LAYOUT) {
-      threadId,
+      setTimeout(() => {
-      messageId,
+        toggleChatInfo(false, { forceSyncOnIOs: true });
-    });
+        focusMessage({ chatId, threadId, messageId });
-  }, [close, chatId, threadId, focusMessage, messageId]);
+      }, ANIMATION_DURATION);
+    } else {
+      focusMessage({ chatId, threadId, messageId });
+    }
+  }, [close, chatId, threadId, focusMessage, toggleChatInfo, messageId]);
 
   const handleForward = useCallback(() => {
     openForwardMenu({

src/components/mediaViewer/SenderInfo.tsx

@@ -3,6 +3,7 @@ import { getDispatch, withGlobal } from '../../lib/teact/teactn';
 
 import { ApiChat, ApiMessage, ApiUser } from '../../api/types';
 
+import { IS_SINGLE_COLUMN_LAYOUT } from '../../util/environment';
 import { getSenderTitle, isUserId } from '../../modules/helpers';
 import { formatMediaDateTime } from '../../util/dateFormat';
 import renderText from '../common/helpers/renderText';
@@ -29,6 +30,8 @@ type StateProps = {
   message?: ApiMessage;
 };
 
+const ANIMATION_DURATION = 350;
+
 const SenderInfo: FC<OwnProps & StateProps> = ({
   chatId,
   messageId,
@@ -39,12 +42,21 @@ const SenderInfo: FC<OwnProps & StateProps> = ({
   const {
     closeMediaViewer,
     focusMessage,
+    toggleChatInfo,
   } = getDispatch();
 
   const handleFocusMessage = useCallback(() => {
     closeMediaViewer();
-    focusMessage({ chatId, messageId });
+
-  }, [chatId, focusMessage, messageId, closeMediaViewer]);
+    if (IS_SINGLE_COLUMN_LAYOUT) {
+      setTimeout(() => {
+        toggleChatInfo(false, { forceSyncOnIOs: true });
+        focusMessage({ chatId, messageId });
+      }, ANIMATION_DURATION);
+    } else {
+      focusMessage({ chatId, messageId });
+    }
+  }, [chatId, focusMessage, toggleChatInfo, messageId, closeMediaViewer]);
 
   const lang = useLang();
 

src/modules/actions/ui/misc.ts

@@ -10,10 +10,10 @@ import generateIdFor from '../../../util/generateIdFor';
 
 const MAX_STORED_EMOJIS = 18; // Represents two rows of recent emojis
 
-addReducer('toggleChatInfo', (global) => {
+addReducer('toggleChatInfo', (global, action, payload) => {
   return {
     ...global,
-    isChatInfoShown: !global.isChatInfoShown,
+    isChatInfoShown: payload !== undefined ? payload : !global.isChatInfoShown,
   };
 });