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 = (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, + ) : ( = (props) => { noPlay={!isActive} onClose={onClose} /> - ) : renderVideoPreview( - bestImageData, - message && calculateMediaViewerDimensions(dimensions!, hasFooter, false), - !IS_SINGLE_COLUMN_LAYOUT && !isProtected, ))} {textParts && ( = ({ /* eslint-disable-next-line react/jsx-props-no-spreading */ {...rest} messageId={activeMessageId} - isActive={isActiveRef.current} + isActive={isActive && isActiveRef.current} isFooterHidden={isFooterHidden || isZoomed || scale !== 1} />