Simplify switching between cameras

web/src/components/player/DynamicVideoPlayer.tsx

@@ -28,6 +28,7 @@ type DynamicVideoPlayerProps = {
   timeRange: { start: number; end: number };
   cameraPreviews: Preview[];
   previewOnly?: boolean;
+  preloadRecordings: boolean;
   onControllerReady: (controller: DynamicVideoController) => void;
   onClick?: () => void;
 };
@@ -37,6 +38,7 @@ export default function DynamicVideoPlayer({
   timeRange,
   cameraPreviews,
   previewOnly = false,
+  preloadRecordings = true,
   onControllerReady,
   onClick,
 }: DynamicVideoPlayerProps) {
@@ -100,18 +102,26 @@ export default function DynamicVideoPlayer({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [controller]);
 
+  const [initPreviewOnly, setInitPreviewOnly] = useState(previewOnly);
+
   useEffect(() => {
     if (!controller || !playerRef) {
       return;
     }
 
+    if (previewOnly == initPreviewOnly) {
+      return;
+    }
+
     if (previewOnly) {
       playerRef.autoplay(false);
       controller.removePlayerListeners();
     } else {
       controller.setPlayerListeners();
-      playerRef.play();
+      controller.seekToTimestamp(playerRef.currentTime() || 0, true);
     }
+
+    setInitPreviewOnly(previewOnly);
     // we only want to fire once when players are ready
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [controller, previewOnly]);
@@ -266,6 +276,7 @@ export default function DynamicVideoPlayer({
       className={`relative ${className ?? ""} ${onClick ? (hasRecordingAtTime ? "cursor-pointer" : "") : ""}`}
       onClick={onClick}
     >
+      {preloadRecordings && (
         <div
           className={`w-full relative ${
             previewOnly || (currentPreview != undefined && isScrubbing)
@@ -302,6 +313,7 @@ export default function DynamicVideoPlayer({
             )}
           </VideoPlayer>
         </div>
+      )}
       <video
         ref={previewRef}
         className={`size-full rounded-2xl ${currentPreview != undefined && (previewOnly || isScrubbing) ? "visible" : "hidden"} ${tallVideo ? "aspect-tall" : ""} bg-black`}

web/src/views/events/EventView.tsx

@@ -659,6 +659,7 @@ function MotionReview({
                 timeRange={currentTimeRange}
                 cameraPreviews={relevantPreviews || []}
                 previewOnly
+                preloadRecordings={false}
                 onControllerReady={(controller) => {
                   videoPlayersRef.current[camera.name] = controller;
                   setPlayerReady(true);

web/src/views/events/RecordingView.tsx

@@ -49,6 +49,10 @@ export function DesktopRecordingView({
       return chunk.start <= startTime && chunk.end >= startTime;
     }),
   );
+  const currentTimeRange = useMemo(
+    () => timeRange.ranges[selectedRangeIdx],
+    [selectedRangeIdx, timeRange],
+  );
 
   // move to next clip
   useEffect(() => {
@@ -59,21 +63,18 @@ export function DesktopRecordingView({
       return;
     }
 
-    const firstController = Object.values(videoPlayersRef.current)[0];
+    const mainController = videoPlayersRef.current[mainCamera];
 
-    if (firstController) {
+    if (mainController) {
-      firstController.onClipChangedEvent((dir) => {
+      mainController.onClipChangedEvent((dir) => {
-        if (
+        if (dir == "forward") {
-          dir == "forward" &&
+          if (selectedRangeIdx < timeRange.ranges.length - 1) {
-          selectedRangeIdx < timeRange.ranges.length - 1
-        ) {
             setSelectedRangeIdx(selectedRangeIdx + 1);
-        } else if (selectedRangeIdx > 0) {
+          }
-          setSelectedRangeIdx(selectedRangeIdx - 1);
         }
       });
     }
-  }, [selectedRangeIdx, timeRange, videoPlayersRef, playerReady]);
+  }, [selectedRangeIdx, timeRange, videoPlayersRef, playerReady, mainCamera]);
 
   // scrubbing and timeline state
 
@@ -82,11 +83,25 @@ export function DesktopRecordingView({
 
   useEffect(() => {
     if (scrubbing) {
+      if (
+        currentTime > currentTimeRange.end + 60 ||
+        currentTime < currentTimeRange.start - 60
+      ) {
+        const index = timeRange.ranges.findIndex(
+          (seg) => seg.start <= currentTime && seg.end >= currentTime,
+        );
+
+        if (index != -1) {
+          setSelectedRangeIdx(index);
+        }
+        return;
+      }
+
       Object.values(videoPlayersRef.current).forEach((controller) => {
         controller.scrubToTimestamp(currentTime);
       });
     }
-  }, [currentTime, scrubbing]);
+  }, [currentTime, scrubbing, timeRange, currentTimeRange]);
 
   useEffect(() => {
     if (!scrubbing) {
@@ -99,11 +114,15 @@ export function DesktopRecordingView({
 
   const onSelectCamera = useCallback(
     (newCam: string) => {
-      videoPlayersRef.current[mainCamera].onPlayerTimeUpdate(undefined);
+      const lastController = videoPlayersRef.current[mainCamera];
-      videoPlayersRef.current[mainCamera].scrubToTimestamp(currentTime);
+      const newController = videoPlayersRef.current[newCam];
-      videoPlayersRef.current[newCam].seekToTimestamp(currentTime, true);
+      lastController.onPlayerTimeUpdate(undefined);
-      videoPlayersRef.current[newCam].onPlayerTimeUpdate(
+      lastController.scrubToTimestamp(currentTime);
-        (timestamp: number) => {
+      newController.onCanPlay(() => {
+        newController.seekToTimestamp(currentTime, true);
+        newController.onCanPlay(null);
+      });
+      newController.onPlayerTimeUpdate((timestamp: number) => {
         setCurrentTime(timestamp);
 
         allCameras.forEach((cam) => {
@@ -113,8 +132,7 @@ export function DesktopRecordingView({
             );
           }
         });
-        },
+      });
-      );
       setMainCamera(newCam);
     },
     [allCameras, currentTime, mainCamera],
@@ -155,8 +173,9 @@ export function DesktopRecordingView({
               >
                 <DynamicVideoPlayer
                   camera={cam}
-                  timeRange={timeRange.ranges[selectedRangeIdx]}
+                  timeRange={currentTimeRange}
                   cameraPreviews={allPreviews ?? []}
+                  preloadRecordings
                   onControllerReady={(controller) => {
                     videoPlayersRef.current[cam] = controller;
                     setPlayerReady(true);
@@ -172,7 +191,10 @@ export function DesktopRecordingView({
                       });
                     });
 
+                    controller.onCanPlay(() => {
                       controller.seekToTimestamp(startTime, true);
+                      controller.onCanPlay(null);
+                    });
                   }}
                 />
               </div>
@@ -184,9 +206,10 @@ export function DesktopRecordingView({
               <DynamicVideoPlayer
                 className="size-full"
                 camera={cam}
-                timeRange={timeRange.ranges[selectedRangeIdx]}
+                timeRange={currentTimeRange}
                 cameraPreviews={allPreviews ?? []}
                 previewOnly
+                preloadRecordings
                 onControllerReady={(controller) => {
                   videoPlayersRef.current[cam] = controller;
                   setPlayerReady(true);
@@ -265,6 +288,10 @@ export function MobileRecordingView({
       return chunk.start <= startTime && chunk.end >= startTime;
     }),
   );
+  const currentTimeRange = useMemo(
+    () => timeRange.ranges[selectedRangeIdx],
+    [selectedRangeIdx, timeRange],
+  );
 
   // move to next clip
   useEffect(() => {
@@ -273,10 +300,10 @@ export function MobileRecordingView({
     }
 
     controllerRef.current.onClipChangedEvent((dir) => {
-      if (dir == "forward" && selectedRangeIdx < timeRange.ranges.length - 1) {
+      if (dir == "forward") {
+        if (selectedRangeIdx < timeRange.ranges.length - 1) {
           setSelectedRangeIdx(selectedRangeIdx + 1);
-      } else if (selectedRangeIdx > 0) {
+        }
-        setSelectedRangeIdx(selectedRangeIdx - 1);
       }
     });
   }, [playerReady, selectedRangeIdx, timeRange]);
@@ -290,9 +317,23 @@ export function MobileRecordingView({
 
   useEffect(() => {
     if (scrubbing) {
+      if (
+        currentTime > currentTimeRange.end + 60 ||
+        currentTime < currentTimeRange.start - 60
+      ) {
+        const index = timeRange.ranges.findIndex(
+          (seg) => seg.start <= currentTime && seg.end >= currentTime,
+        );
+
+        if (index != -1) {
+          setSelectedRangeIdx(index);
+        }
+        return;
+      }
+
       controllerRef.current?.scrubToTimestamp(currentTime);
     }
-  }, [currentTime, scrubbing]);
+  }, [currentTime, scrubbing, currentTimeRange, timeRange]);
 
   useEffect(() => {
     if (!scrubbing) {
@@ -328,8 +369,9 @@ export function MobileRecordingView({
       <div>
         <DynamicVideoPlayer
           camera={startCamera}
-          timeRange={timeRange.ranges[selectedRangeIdx]}
+          timeRange={currentTimeRange}
           cameraPreviews={relevantPreviews || []}
+          preloadRecordings
           onControllerReady={(controller) => {
             controllerRef.current = controller;
             setPlayerReady(true);