Motion playback (#10609)

* Move controls to separate component and make features configurable

* Allow playback on motion screen

* Simplify layout

* Fix seeking

* Fix playback

* fix preview scrubbing

* Fix player controls visibility

* Use opacity for both dark and light mode

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

@@ -165,33 +165,30 @@ export default function DynamicVideoPlayer({
   }, [controller, recordings]);
 
   return (
-    <div className={`relative ${className ?? ""} cursor-pointer`}>
-      <div
-        className={`w-full relative ${isScrubbing || isLoading ? "hidden" : "visible"}`}
-      >
-        <HlsVideoPlayer
-          className={`${grow}`}
-          videoRef={playerRef}
-          currentSource={source}
-          onTimeUpdate={onTimeUpdate}
-          onPlayerLoaded={onPlayerLoaded}
-          onClipEnded={onClipEnded}
-          onPlaying={() => {
-            if (isScrubbing) {
-              playerRef.current?.pause();
-            }
+    <div className={`relative ${className ?? ""}`}>
+      <HlsVideoPlayer
+        className={`w-full ${grow ?? ""}`}
+        videoRef={playerRef}
+        visible={!(isScrubbing || isLoading)}
+        currentSource={source}
+        onTimeUpdate={onTimeUpdate}
+        onPlayerLoaded={onPlayerLoaded}
+        onClipEnded={onClipEnded}
+        onPlaying={() => {
+          if (isScrubbing) {
+            playerRef.current?.pause();
+          }
 
-            setIsLoading(false);
-          }}
-        >
-          {config && focusedItem && (
-            <TimelineEventOverlay
-              timeline={focusedItem}
-              cameraConfig={config.cameras[camera]}
-            />
-          )}
-        </HlsVideoPlayer>
-      </div>
+          setIsLoading(false);
+        }}
+      >
+        {config && focusedItem && (
+          <TimelineEventOverlay
+            timeline={focusedItem}
+            cameraConfig={config.cameras[camera]}
+          />
+        )}
+      </HlsVideoPlayer>
       <PreviewPlayer
         className={`${isScrubbing || isLoading ? "visible" : "hidden"} ${grow}`}
         camera={camera}