Implement scrubbing

web/src/components/timeline/EventReviewTimeline.tsx

@@ -25,6 +25,7 @@ export type EventReviewTimelineProps = {
   events: ReviewSegment[];
   severityType: ReviewSeverity;
   contentRef: RefObject<HTMLDivElement>;
+  onHandlebarDraggingChange?: (isDragging: boolean) => void;
 };
 
 export function EventReviewTimeline({
@@ -41,6 +42,7 @@ export function EventReviewTimeline({
   events,
   severityType,
   contentRef,
+  onHandlebarDraggingChange,
 }: EventReviewTimelineProps) {
   const [isDragging, setIsDragging] = useState(false);
   const [currentTimeSegment, setCurrentTimeSegment] = useState<number>(0);
@@ -152,6 +154,12 @@ export function EventReviewTimeline({
     }
   }, [currentTimeSegment, showHandlebar]);
 
+  useEffect(() => {
+    if (onHandlebarDraggingChange) {
+      onHandlebarDraggingChange(isDragging);
+    }
+  }, [isDragging, onHandlebarDraggingChange]);
+
   useEffect(() => {
     if (timelineRef.current && handlebarTime && showHandlebar) {
       const { scrollHeight: timelineHeight } = timelineRef.current;

web/src/pages/Events.tsx

@@ -139,7 +139,7 @@ export default function Events() {
 
   // selected items
 
-  const selectedReviews = useMemo(() => {
+  const selectedData = useMemo(() => {
     if (!selectedReviewId) {
       return undefined;
     }
@@ -159,18 +159,21 @@ export default function Events() {
 
     return {
       selected: selectedReview,
-      cameraReviews: allReviews.filter(
-        (seg) => seg.camera == selectedReview?.camera
+      cameraSegments: allReviews.filter(
+        (seg) => seg.camera == selectedReview.camera
+      ),
+      cameraPreviews: allPreviews?.filter(
+        (seg) => seg.camera == selectedReview.camera
       ),
     };
   }, [selectedReviewId, reviewPages]);
 
-  if (selectedReviews) {
+  if (selectedData) {
     return (
       <DesktopRecordingView
-        reviewItems={selectedReviews.cameraReviews}
-        selectedReview={selectedReviews.selected}
-        relevantPreviews={allPreviews}
+        reviewItems={selectedData.cameraSegments}
+        selectedReview={selectedData.selected}
+        relevantPreviews={selectedData.cameraPreviews}
       />
     );
   } else {

web/src/views/events/DesktopRecordingView.tsx

@@ -5,7 +5,7 @@ import EventReviewTimeline from "@/components/timeline/EventReviewTimeline";
 import { Button } from "@/components/ui/button";
 import { ReviewSegment } from "@/types/review";
 import { getChunkedTimeRange } from "@/utils/timelineUtil";
-import { useMemo, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { IoMdArrowRoundBack } from "react-icons/io";
 import { useNavigate } from "react-router-dom";
 
@@ -24,6 +24,7 @@ export default function DesktopRecordingView({
   const contentRef = useRef<HTMLDivElement | null>(null);
 
   // timeline time
+
   const timeRange = useMemo(
     () => getChunkedTimeRange(selectedReview.start_time),
     []
@@ -37,10 +38,40 @@ export default function DesktopRecordingView({
     })
   );
 
+  // move to next clip
+  useEffect(() => {
+    if (!controllerRef.current) {
+      return;
+    }
+
+    console.log("current index and moving to ");
+
+    if (selectedRangeIdx < timeRange.ranges.length - 1) {
+      controllerRef.current.onClipEndedEvent(() => {
+        setSelectedRangeIdx(selectedRangeIdx + 1);
+      });
+    }
+  }, [controllerRef, selectedRangeIdx]);
+
+  // scrubbing and timeline state
+
+  const [scrubbing, setScrubbing] = useState(false);
   const [currentTime, setCurrentTime] = useState<number>(
     selectedReview?.start_time || Date.now() / 1000
   );
 
+  useEffect(() => {
+    if (scrubbing) {
+      controllerRef.current?.scrubToTimestamp(currentTime);
+    }
+  }, [controllerRef, currentTime, scrubbing]);
+
+  useEffect(() => {
+    if (!scrubbing) {
+      controllerRef.current?.seekToTimestamp(currentTime, true);
+    }
+  }, [controllerRef, scrubbing]);
+
   return (
     <div ref={contentRef} className="relative w-full h-full">
       <Button
@@ -72,7 +103,7 @@ export default function DesktopRecordingView({
 
       <div className="absolute top-0 right-0 bottom-0">
         <EventReviewTimeline
-          segmentDuration={60}
+          segmentDuration={30}
           timestampSpread={15}
           timelineStart={timeRange.end}
           timelineEnd={timeRange.start}
@@ -82,6 +113,7 @@ export default function DesktopRecordingView({
           events={reviewItems}
           severityType={selectedReview.severity}
           contentRef={contentRef}
+          onHandlebarDraggingChange={(scrubbing) => setScrubbing(scrubbing)}
         />
       </div>
     </div>