Simplify recordings view

web/src/components/player/HlsVideoPlayer.tsx

@@ -19,7 +19,6 @@ const unsupportedErrorCodes = [
 ];
 
 type HlsVideoPlayerProps = {
-  className: string;
   children?: ReactNode;
   videoRef: MutableRefObject<HTMLVideoElement | null>;
   visible: boolean;
@@ -31,7 +30,6 @@ type HlsVideoPlayerProps = {
   onPlaying?: () => void;
 };
 export default function HlsVideoPlayer({
-  className,
   children,
   videoRef,
   visible,
@@ -91,26 +89,10 @@ export default function HlsVideoPlayer({
 
   return (
     <TransformWrapper minScale={1.0}>
-      <div
-        className={`relative ${className ?? ""} ${visible ? "visible" : "hidden"}`}
-        onMouseOver={
-          isDesktop
-            ? () => {
-                setControls(true);
-              }
-            : undefined
-        }
-        onMouseOut={
-          isDesktop
-            ? () => {
-                setControls(controlsOpen);
-              }
-            : undefined
-        }
-        onClick={isDesktop ? undefined : () => setControls(!controls)}
-      >
       <TransformComponent
         wrapperStyle={{
+          position: "relative",
+          display: visible ? undefined : "none",
           width: "100%",
           height: "100%",
         }}
@@ -132,9 +114,7 @@ export default function HlsVideoPlayer({
 
             if (isMobile) {
               setControls(true);
-                setMobileCtrlTimeout(
-                  setTimeout(() => setControls(false), 4000),
-                );
+              setMobileCtrlTimeout(setTimeout(() => setControls(false), 4000));
             }
           }}
           onPlaying={onPlaying}
@@ -165,7 +145,25 @@ export default function HlsVideoPlayer({
             }
           }}
         />
-        </TransformComponent>
+        <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}
@@ -201,6 +199,8 @@ export default function HlsVideoPlayer({
             />
             {children}
           </div>
+        </div>
+      </TransformComponent>
     </TransformWrapper>
   );
 }

web/src/components/player/dynamic/DynamicVideoPlayer.tsx

@@ -150,7 +150,6 @@ export default function DynamicVideoPlayer({
   return (
     <>
       <HlsVideoPlayer
-        className={className ?? ""}
         videoRef={playerRef}
         visible={!(isScrubbing || isLoading)}
         currentSource={source}