Automatically skip to next preview / clip when watching full recordings (#10055)

* Fix useEffect and try to load next clip for preview

* Get scrubbing to next preview working

* Handle skipping to next preview

web/src/views/events/DesktopRecordingView.tsx

@@ -20,9 +20,13 @@ export default function DesktopRecordingView({
   relevantPreviews,
 }: DesktopRecordingViewProps) {
   const navigate = useNavigate();
-  const controllerRef = useRef<DynamicVideoController | undefined>(undefined);
   const contentRef = useRef<HTMLDivElement | null>(null);
 
+  // controller state
+
+  const [playerReady, setPlayerReady] = useState(false);
+  const controllerRef = useRef<DynamicVideoController | undefined>(undefined);
+
   // timeline time
 
   const timeRange = useMemo(
@@ -44,12 +48,14 @@ export default function DesktopRecordingView({
       return;
     }
 
-    if (selectedRangeIdx < timeRange.ranges.length - 1) {
-      controllerRef.current.onClipEndedEvent(() => {
+    controllerRef.current.onClipChangedEvent((dir) => {
+      if (dir == "forward" && selectedRangeIdx < timeRange.ranges.length - 1) {
         setSelectedRangeIdx(selectedRangeIdx + 1);
-      });
-    }
-  }, [controllerRef, selectedRangeIdx]);
+      } else if (selectedRangeIdx > 0) {
+        setSelectedRangeIdx(selectedRangeIdx - 1);
+      }
+    });
+  }, [playerReady, selectedRangeIdx]);
 
   // scrubbing and timeline state
 
@@ -62,13 +68,13 @@ export default function DesktopRecordingView({
     if (scrubbing) {
       controllerRef.current?.scrubToTimestamp(currentTime);
     }
-  }, [controllerRef, currentTime, scrubbing]);
+  }, [currentTime, scrubbing]);
 
   useEffect(() => {
     if (!scrubbing) {
       controllerRef.current?.seekToTimestamp(currentTime, true);
     }
-  }, [controllerRef, scrubbing]);
+  }, [scrubbing]);
 
   return (
     <div ref={contentRef} className="relative w-full h-full">
@@ -87,6 +93,7 @@ export default function DesktopRecordingView({
           cameraPreviews={relevantPreviews || []}
           onControllerReady={(controller) => {
             controllerRef.current = controller;
+            setPlayerReady(true);
             controllerRef.current.onPlayerTimeUpdate((timestamp: number) => {
               setCurrentTime(timestamp);
             });