From 4cf8849bfd7b9b9e69b1c90db93aca7407cb8d9a Mon Sep 17 00:00:00 2001
From: R-J Lim <kgerbil@gmail.com>
Date: Sun, 1 Sep 2024 12:37:04 +0900
Subject: [PATCH] VideoPlayer controls hide when mouse leaves player

---
 common/app/components/Controls.tsx    | 24 +++++++++++++-----------
 common/app/components/VideoPlayer.tsx | 15 +++++++++------
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/common/app/components/Controls.tsx b/common/app/components/Controls.tsx
index 8ff1eba4..d6795643 100755
--- a/common/app/components/Controls.tsx
+++ b/common/app/components/Controls.tsx
@@ -565,7 +565,7 @@ interface ControlsProps {
     playbackRateEnabled?: boolean;
     onAudioTrackSelected: (id: string) => void;
     onSeek: (progress: number) => void;
-    mousePositionRef: MutableRefObject<Point>;
+    mousePositionRef: MutableRefObject<Point | undefined>;
     onShow?: (show: boolean) => void;
     onPause: () => void;
     onPlay: () => void;
@@ -676,7 +676,7 @@ export default function Controls({
     const [lastCommittedVolume, setLastCommittedVolume] = useState<number>(100);
     const theme = useTheme();
     const isReallySmallScreen = useMediaQuery(theme.breakpoints.down(380));
-    const lastMousePositionRef = useRef<Point>({ x: 0, y: 0 });
+    const lastMousePositionRef = useRef<Point | undefined>(undefined);
     const lastShowTimestampRef = useRef<number>(Date.now());
     const lastNumberInputChangeTimestampRef = useRef<number>(Date.now());
     const lastShowRef = useRef<boolean>(true);
@@ -731,15 +731,18 @@ export default function Controls({
             if (showOnMouseMovement) {
                 currentShow =
                     Date.now() - lastShowTimestampRef.current < 2000 ||
-                    Math.pow(mousePositionRef.current.x - lastMousePositionRef.current.x, 2) +
-                        Math.pow(mousePositionRef.current.y - lastMousePositionRef.current.y, 2) >
-                        100;
+                    (mousePositionRef.current !== undefined &&
+                        lastMousePositionRef.current !== undefined &&
+                        Math.pow(mousePositionRef.current.x - lastMousePositionRef.current.x, 2) +
+                            Math.pow(mousePositionRef.current.y - lastMousePositionRef.current.y, 2) >
+                            100);
             } else {
                 currentShow =
-                    ((containerRef.current && mousePositionRef.current.y > containerRef.current.offsetTop - 20) ||
-                        (closeButtonRef.current &&
-                            mousePositionRef.current.y < closeButtonRef.current.offsetHeight + 20)) ??
-                    false;
+                    mousePositionRef.current !== undefined &&
+                    ((containerRef.current !== null &&
+                        mousePositionRef.current.y > containerRef.current.offsetTop - 20) ||
+                        (closeButtonRef.current !== null &&
+                            mousePositionRef.current.y < closeButtonRef.current.offsetHeight + 20));
             }
 
             currentShow =
@@ -758,8 +761,7 @@ export default function Controls({
             }
 
             lastShowRef.current = currentShow;
-            lastMousePositionRef.current.x = mousePositionRef.current.x;
-            lastMousePositionRef.current.y = mousePositionRef.current.y;
+            lastMousePositionRef.current = { x: mousePositionRef.current?.x ?? 0, y: mousePositionRef.current?.y ?? 0 };
         }, 100);
         return () => clearInterval(interval);
     }, [mousePositionRef, showOnMouseMovement, playing]);
diff --git a/common/app/components/VideoPlayer.tsx b/common/app/components/VideoPlayer.tsx
index bf2696a8..3f141c0a 100755
--- a/common/app/components/VideoPlayer.tsx
+++ b/common/app/components/VideoPlayer.tsx
@@ -350,7 +350,7 @@ export default function VideoPlayer({
     const showSubtitlesRef = useRef<IndexedSubtitleModel[]>([]);
     showSubtitlesRef.current = showSubtitles;
     const clock = useMemo<Clock>(() => new Clock(), []);
-    const mousePositionRef = useRef<Point>({ x: 0, y: 0 });
+    const mousePositionRef = useRef<Point | undefined>(undefined);
     const [showCursor, setShowCursor] = useState<boolean>(false);
     const lastMouseMovementTimestamp = useRef<number>(0);
     const containerRef = useRef<HTMLDivElement>(null);
@@ -614,7 +614,7 @@ export default function VideoPlayer({
         }
     }, [handleSeek, seekRequest, length]);
 
-    function handleMouseMove(e: React.MouseEvent<HTMLDivElement>) {
+    const handleMouseMove = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
         lastMouseMovementTimestamp.current = Date.now();
 
         if (!containerRef.current) {
@@ -622,9 +622,12 @@ export default function VideoPlayer({
         }
 
         var bounds = containerRef.current.getBoundingClientRect();
-        mousePositionRef.current.x = e.clientX - bounds.left;
-        mousePositionRef.current.y = e.clientY - bounds.top;
-    }
+        mousePositionRef.current = { x: e.clientX - bounds.left, y: e.clientY - bounds.top };
+    }, []);
+
+    const handleMouseLeave = useCallback((e: React.MouseEvent<HTMLDivElement>) => {
+        mousePositionRef.current = undefined;
+    }, []);
 
     const handleAudioTrackSelected = useCallback(
         (id: string) => {
@@ -1300,7 +1303,7 @@ export default function VideoPlayer({
     }
 
     return (
-        <div ref={containerRef} onMouseMove={handleMouseMove} className={classes.root}>
+        <div ref={containerRef} onMouseMove={handleMouseMove} onMouseLeave={handleMouseLeave} className={classes.root}>
             <Alert open={alertOpen} onClose={handleAlertClosed} autoHideDuration={3000} severity={alertSeverity}>
                 {alertMessage}
             </Alert>