From fa755aad9c9704293b6e8984cffbc60849aebad7 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Wed, 2 Feb 2022 22:49:25 +0100
Subject: [PATCH] Media Viewer: Fix muting hidden slides (#1690)

---
 src/components/mediaViewer/MediaViewerContent.tsx | 12 ++++++------
 src/components/mediaViewer/MediaViewerSlides.tsx  |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/mediaViewer/MediaViewerContent.tsx b/src/components/mediaViewer/MediaViewerContent.tsx
index 8241ce6fc..747e89959 100644
--- a/src/components/mediaViewer/MediaViewerContent.tsx
+++ b/src/components/mediaViewer/MediaViewerContent.tsx
@@ -6,7 +6,7 @@ import {
 } from '../../api/types';
 import { MediaViewerOrigin } from '../../types';
 
-import { IS_SINGLE_COLUMN_LAYOUT } from '../../util/environment';
+import { IS_SINGLE_COLUMN_LAYOUT, IS_TOUCH_ENV } from '../../util/environment';
 import useBlurSync from '../../hooks/useBlurSync';
 import useMedia from '../../hooks/useMedia';
 import useMediaWithLoadProgress from '../../hooks/useMediaWithLoadProgress';
@@ -187,7 +187,11 @@ const MediaViewerContent: FC<OwnProps & StateProps> = (props) => {
         message && calculateMediaViewerDimensions(dimensions!, hasFooter),
         !IS_SINGLE_COLUMN_LAYOUT && !isProtected,
       )}
-      {isVideo && (isActive ? (
+      {isVideo && ((!isActive && IS_TOUCH_ENV) ? renderVideoPreview(
+        bestImageData,
+        message && calculateMediaViewerDimensions(dimensions!, hasFooter, false),
+        !IS_SINGLE_COLUMN_LAYOUT && !isProtected,
+      ) : (
         <VideoPlayer
           key={messageId}
           url={localBlobUrl || fullMediaBlobUrl}
@@ -200,10 +204,6 @@ const MediaViewerContent: FC<OwnProps & StateProps> = (props) => {
           noPlay={!isActive}
           onClose={onClose}
         />
-      ) : renderVideoPreview(
-        bestImageData,
-        message && calculateMediaViewerDimensions(dimensions!, hasFooter, false),
-        !IS_SINGLE_COLUMN_LAYOUT && !isProtected,
       ))}
       {textParts && (
         <MediaViewerFooter
diff --git a/src/components/mediaViewer/MediaViewerSlides.tsx b/src/components/mediaViewer/MediaViewerSlides.tsx
index f7795c799..ba2281acf 100644
--- a/src/components/mediaViewer/MediaViewerSlides.tsx
+++ b/src/components/mediaViewer/MediaViewerSlides.tsx
@@ -524,7 +524,7 @@ const MediaViewerSlides: FC<OwnProps> = ({
             /* eslint-disable-next-line react/jsx-props-no-spreading */
             {...rest}
             messageId={activeMessageId}
-            isActive={isActiveRef.current}
+            isActive={isActive && isActiveRef.current}
             isFooterHidden={isFooterHidden || isZoomed || scale !== 1}
           />
         </div>