From 9f099131ff1dd16b90b74b4bbe149f0d2a12169f Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Sun, 14 Apr 2024 09:19:50 -0600
Subject: [PATCH] Fix control hovering

---
 web/src/components/player/HlsVideoPlayer.tsx | 49 ++++++++++++--------
 1 file changed, 29 insertions(+), 20 deletions(-)

diff --git a/web/src/components/player/HlsVideoPlayer.tsx b/web/src/components/player/HlsVideoPlayer.tsx
index c12cffde3..5f0348d88 100644
--- a/web/src/components/player/HlsVideoPlayer.tsx
+++ b/web/src/components/player/HlsVideoPlayer.tsx
@@ -81,6 +81,35 @@ export default function HlsVideoPlayer({
   const [controls, setControls] = useState(isMobile);
   const [controlsOpen, setControlsOpen] = useState(false);
 
+  useEffect(() => {
+    if (!isDesktop) {
+      return;
+    }
+
+    const callback = (e: MouseEvent) => {
+      if (!videoRef.current) {
+        return;
+      }
+
+      const rect = videoRef.current.getBoundingClientRect();
+
+      if (
+        e.clientX > rect.left &&
+        e.clientX < rect.right &&
+        e.clientY > rect.top &&
+        e.clientY < rect.bottom
+      ) {
+        setControls(true);
+      } else {
+        setControls(controlsOpen);
+      }
+    };
+    window.addEventListener("mousemove", callback);
+    return () => {
+      window.removeEventListener("mousemove", callback);
+    };
+  }, [videoRef, controlsOpen]);
+
   return (
     <TransformWrapper minScale={1.0}>
       <VideoControls
@@ -126,26 +155,6 @@ export default function HlsVideoPlayer({
           height: "100%",
         }}
         wrapperProps={{
-          onMouseMove: isDesktop
-            ? (e) => {
-                if (!videoRef.current) {
-                  return;
-                }
-
-                const rect = videoRef.current.getBoundingClientRect();
-
-                if (
-                  e.clientX > rect.left &&
-                  e.clientX < rect.right &&
-                  e.clientY > rect.top &&
-                  e.clientY < rect.bottom
-                ) {
-                  setControls(true);
-                } else {
-                  setControls(controlsOpen);
-                }
-              }
-            : undefined,
           onClick: isDesktop ? undefined : () => setControls(!controls),
         }}
         contentStyle={{