From 911277ecf433f5ef2cd84902d718bfa3a2fcbe63 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Sun, 14 Apr 2024 09:01:22 -0600
Subject: [PATCH] Always show video controls even when zooming

---
 web/src/components/player/HlsVideoPlayer.tsx | 122 +++++++++----------
 web/src/views/events/RecordingView.tsx       |   4 +-
 2 files changed, 59 insertions(+), 67 deletions(-)

diff --git a/web/src/components/player/HlsVideoPlayer.tsx b/web/src/components/player/HlsVideoPlayer.tsx
index 4c496fcb5..088db8263 100644
--- a/web/src/components/player/HlsVideoPlayer.tsx
+++ b/web/src/components/player/HlsVideoPlayer.tsx
@@ -1,10 +1,4 @@
-import {
-  MutableRefObject,
-  ReactNode,
-  useEffect,
-  useRef,
-  useState,
-} from "react";
+import { MutableRefObject, useEffect, useRef, useState } from "react";
 import Hls from "hls.js";
 import { isAndroid, isDesktop, isMobile } from "react-device-detect";
 import { TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
@@ -19,7 +13,6 @@ const unsupportedErrorCodes = [
 ];
 
 type HlsVideoPlayerProps = {
-  children?: ReactNode;
   videoRef: MutableRefObject<HTMLVideoElement | null>;
   visible: boolean;
   currentSource: string;
@@ -30,7 +23,6 @@ type HlsVideoPlayerProps = {
   onPlaying?: () => void;
 };
 export default function HlsVideoPlayer({
-  children,
   videoRef,
   visible,
   currentSource,
@@ -89,13 +81,68 @@ export default function HlsVideoPlayer({
 
   return (
     <TransformWrapper minScale={1.0}>
+      <VideoControls
+        className="absolute bottom-5 left-1/2 -translate-x-1/2 z-50"
+        video={videoRef.current}
+        isPlaying={isPlaying}
+        show={controls}
+        controlsOpen={controlsOpen}
+        setControlsOpen={setControlsOpen}
+        playbackRate={videoRef.current?.playbackRate ?? 1}
+        hotKeys={hotKeys}
+        onPlayPause={(play) => {
+          if (!videoRef.current) {
+            return;
+          }
+
+          if (play) {
+            videoRef.current.play();
+          } else {
+            videoRef.current.pause();
+          }
+        }}
+        onSeek={(diff) => {
+          const currentTime = videoRef.current?.currentTime;
+
+          if (!videoRef.current || !currentTime) {
+            return;
+          }
+
+          videoRef.current.currentTime = Math.max(0, currentTime + diff);
+        }}
+        onSetPlaybackRate={(rate) =>
+          videoRef.current ? (videoRef.current.playbackRate = rate) : null
+        }
+      />
       <TransformComponent
         wrapperStyle={{
-          position: "relative",
           display: visible ? undefined : "none",
           width: "100%",
           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={{
           width: "100%",
           height: isMobile ? "100%" : undefined,
@@ -145,61 +192,6 @@ export default function HlsVideoPlayer({
             }
           }}
         />
-        <div
-          className="absolute inset-0"
-          onMouseOver={
-            isDesktop
-              ? () => {
-                  setControls(true);
-                }
-              : undefined
-          }
-          onMouseOut={
-            isDesktop
-              ? () => {
-                  setControls(controlsOpen);
-                }
-              : undefined
-          }
-          onClick={isDesktop ? undefined : () => setControls(!controls)}
-        >
-          <div className={`size-full relative ${visible ? "" : "hidden"}`}>
-            <VideoControls
-              className="absolute bottom-5 left-1/2 -translate-x-1/2"
-              video={videoRef.current}
-              isPlaying={isPlaying}
-              show={controls}
-              controlsOpen={controlsOpen}
-              setControlsOpen={setControlsOpen}
-              playbackRate={videoRef.current?.playbackRate ?? 1}
-              hotKeys={hotKeys}
-              onPlayPause={(play) => {
-                if (!videoRef.current) {
-                  return;
-                }
-
-                if (play) {
-                  videoRef.current.play();
-                } else {
-                  videoRef.current.pause();
-                }
-              }}
-              onSeek={(diff) => {
-                const currentTime = videoRef.current?.currentTime;
-
-                if (!videoRef.current || !currentTime) {
-                  return;
-                }
-
-                videoRef.current.currentTime = Math.max(0, currentTime + diff);
-              }}
-              onSetPlaybackRate={(rate) =>
-                videoRef.current ? (videoRef.current.playbackRate = rate) : null
-              }
-            />
-            {children}
-          </div>
-        </div>
       </TransformComponent>
     </TransformWrapper>
   );
diff --git a/web/src/views/events/RecordingView.tsx b/web/src/views/events/RecordingView.tsx
index 57608a693..decb87ba5 100644
--- a/web/src/views/events/RecordingView.tsx
+++ b/web/src/views/events/RecordingView.tsx
@@ -364,11 +364,11 @@ export function RecordingView({
           >
             <div
               key={mainCamera}
-              className={
+              className={`relative ${
                 isDesktop
                   ? `${mainCameraAspect == "tall" ? "h-[50%] md:h-[60%] lg:h-[75%] xl:h-[90%]" : mainCameraAspect == "wide" ? "w-full" : "w-[78%]"} px-4 flex justify-center`
                   : `portrait:w-full pt-2 ${mainCameraAspect == "wide" ? "landscape:w-full aspect-wide" : "landscape:h-[94%] aspect-video"}`
-              }
+              }`}
               style={{
                 aspectRatio: isDesktop
                   ? mainCameraAspect == "tall"