From 2969b6c4f5fc0a2224127ac1fa9807f94ff8a7cf Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Fri, 22 Mar 2024 10:31:35 -0600
Subject: [PATCH] Fix player controls visibility

---
 web/src/components/player/HlsVideoPlayer.tsx             | 4 +++-
 web/src/components/player/dynamic/DynamicVideoPlayer.tsx | 3 ++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/web/src/components/player/HlsVideoPlayer.tsx b/web/src/components/player/HlsVideoPlayer.tsx
index 1a9b1d8b9..f8cb3b34c 100644
--- a/web/src/components/player/HlsVideoPlayer.tsx
+++ b/web/src/components/player/HlsVideoPlayer.tsx
@@ -22,6 +22,7 @@ type HlsVideoPlayerProps = {
   className: string;
   children?: ReactNode;
   videoRef: MutableRefObject<HTMLVideoElement | null>;
+  visible: boolean;
   currentSource: string;
   onClipEnded?: () => void;
   onPlayerLoaded?: () => void;
@@ -32,6 +33,7 @@ export default function HlsVideoPlayer({
   className,
   children,
   videoRef,
+  visible,
   currentSource,
   onClipEnded,
   onPlayerLoaded,
@@ -137,7 +139,7 @@ export default function HlsVideoPlayer({
 
   return (
     <div
-      className={`relative`}
+      className={`relative ${visible ? "visible" : "hidden"}`}
       onMouseOver={
         isDesktop
           ? () => {
diff --git a/web/src/components/player/dynamic/DynamicVideoPlayer.tsx b/web/src/components/player/dynamic/DynamicVideoPlayer.tsx
index 1aaa0d7b7..62f087cfb 100644
--- a/web/src/components/player/dynamic/DynamicVideoPlayer.tsx
+++ b/web/src/components/player/dynamic/DynamicVideoPlayer.tsx
@@ -167,8 +167,9 @@ export default function DynamicVideoPlayer({
   return (
     <div className={`relative ${className ?? ""}`}>
       <HlsVideoPlayer
-        className={`w-full ${isScrubbing || isLoading ? "hidden" : "visible"} ${grow ?? ""}`}
+        className={`w-full ${grow ?? ""}`}
         videoRef={playerRef}
+        visible={!(isScrubbing || isLoading)}
         currentSource={source}
         onTimeUpdate={onTimeUpdate}
         onPlayerLoaded={onPlayerLoaded}