From 06fe3a264011518cd3d78b35ed39af3209d177fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9D=D0=B8=D0=BA=D0=B8=D1=82=D0=B0=20=D0=92=D0=B5=D0=BB?=
 =?UTF-8?q?=D0=B8=D0=BA=D0=B8=D0=B9?= <mtyoungstz@outlook.com>
Date: Fri, 5 Aug 2022 22:29:21 +0500
Subject: [PATCH] Media Viewer: Fix video controls on single column layout
 (#149)

---
 src/components/mediaViewer/MediaViewerContent.tsx | 12 +++++++++++-
 src/components/mediaViewer/VideoPlayer.tsx        | 12 ------------
 2 files changed, 11 insertions(+), 13 deletions(-)

diff --git a/src/components/mediaViewer/MediaViewerContent.tsx b/src/components/mediaViewer/MediaViewerContent.tsx
index f6d33f0de..aaee11749 100644
--- a/src/components/mediaViewer/MediaViewerContent.tsx
+++ b/src/components/mediaViewer/MediaViewerContent.tsx
@@ -8,7 +8,7 @@ import type {
 import { ApiMediaFormat } 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';
@@ -156,6 +156,14 @@ const MediaViewerContent: FC<OwnProps & StateProps> = (props) => {
     setIsFooterHidden?.(!isVisible);
   }, [setIsFooterHidden]);
 
+  const handleMouseMove = useCallback(() => {
+    toggleControls(true);
+  }, [toggleControls]);
+
+  const handleMouseOut = useCallback(() => {
+    toggleControls(false);
+  }, [toggleControls]);
+
   const localBlobUrl = (photo || video) ? (photo || video)!.blobUrl : undefined;
   let bestImageData = (!isVideo && (localBlobUrl || fullMediaBlobUrl)) || previewBlobUrl || pictogramBlobUrl;
   const thumbDataUri = useBlurSync(!bestImageData && message && getMessageMediaThumbDataUri(message));
@@ -221,6 +229,8 @@ const MediaViewerContent: FC<OwnProps & StateProps> = (props) => {
   return (
     <div
       className={`MediaViewerContent ${hasFooter ? 'has-footer' : ''}`}
+      onMouseMove={!isGif && !IS_TOUCH_ENV ? handleMouseMove : undefined}
+      onMouseOut={!isGif && !IS_TOUCH_ENV ? handleMouseOut : undefined}
     >
       {isProtected && <div onContextMenu={stopEvent} className="protector" />}
       {isPhoto && renderPhoto(
diff --git a/src/components/mediaViewer/VideoPlayer.tsx b/src/components/mediaViewer/VideoPlayer.tsx
index 04ed93453..3d1695a44 100644
--- a/src/components/mediaViewer/VideoPlayer.tsx
+++ b/src/components/mediaViewer/VideoPlayer.tsx
@@ -120,16 +120,6 @@ const VideoPlayer: FC<OwnProps> = ({
 
   useVideoCleanup(videoRef, []);
 
-  const handleMouseMove = useCallback(() => {
-    toggleControls(true);
-  }, [toggleControls]);
-
-  const handleMouseOut = useCallback((e: React.MouseEvent<HTMLElement, MouseEvent>) => {
-    if (e.target === videoRef.current) {
-      toggleControls(false);
-    }
-  }, [toggleControls]);
-
   const handleTimeUpdate = useCallback((e: React.SyntheticEvent<HTMLVideoElement>) => {
     setCurrentTime(e.currentTarget.currentTime);
   }, []);
@@ -186,8 +176,6 @@ const VideoPlayer: FC<OwnProps> = ({
   return (
     <div
       className="VideoPlayer"
-      onMouseMove={!isGif && !IS_TOUCH_ENV ? handleMouseMove : undefined}
-      onMouseOut={!isGif && !IS_TOUCH_ENV ? handleMouseOut : undefined}
     >
       <div
         style={wrapperStyle}