Cleanup to use new preview video player in dynamic player (#10335)

* Cleanup to use new preview video player

* Make it so motion persists the selected time

* Don't jump when player first starts

* Get autoplay working right

web/src/views/events/EventView.tsx

@@ -44,6 +44,7 @@ type EventViewProps = {
   timeRange: { before: number; after: number };
   filter?: ReviewFilter;
   severity: ReviewSeverity;
+  startTime?: number;
   setSeverity: (severity: ReviewSeverity) => void;
   markItemAsReviewed: (review: ReviewSegment) => void;
   onOpenReview: (reviewId: string) => void;
@@ -57,6 +58,7 @@ export default function EventView({
   timeRange,
   filter,
   severity,
+  startTime,
   setSeverity,
   markItemAsReviewed,
   onOpenReview,
@@ -262,6 +264,7 @@ export default function EventView({
             reviewItems={reviewItems}
             relevantPreviews={relevantPreviews}
             timeRange={timeRange}
+            startTime={startTime}
             filter={filter}
             onSelectReview={onSelectReview}
           />
@@ -518,6 +521,7 @@ type MotionReviewProps = {
   };
   relevantPreviews?: Preview[];
   timeRange: { before: number; after: number };
+  startTime?: number;
   filter?: ReviewFilter;
   onSelectReview: (data: string, ctrl: boolean) => void;
 };
@@ -526,6 +530,7 @@ function MotionReview({
   reviewItems,
   relevantPreviews,
   timeRange,
+  startTime,
   filter,
   onSelectReview,
 }: MotionReviewProps) {
@@ -579,11 +584,21 @@ function MotionReview({
     [lastFullHour, timeRange],
   );
 
-  const [selectedRangeIdx, setSelectedRangeIdx] = useState(
-    timeRangeSegments.ranges.length - 1,
-  );
+  const initialIndex = useMemo(() => {
+    if (!startTime) {
+      return timeRangeSegments.ranges.length - 1;
+    }
+
+    return timeRangeSegments.ranges.findIndex(
+      (seg) => seg.start <= startTime && seg.end >= startTime,
+    );
+    // only render once
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const [selectedRangeIdx, setSelectedRangeIdx] = useState(initialIndex);
   const [currentTime, setCurrentTime] = useState<number>(
-    timeRangeSegments.ranges[selectedRangeIdx].start,
+    startTime ?? timeRangeSegments.ranges[selectedRangeIdx].start,
   );
   const currentTimeRange = useMemo(
     () => timeRangeSegments.ranges[selectedRangeIdx],
@@ -642,6 +657,7 @@ function MotionReview({
                 className={`${grow}`}
                 camera={camera.name}
                 timeRange={currentTimeRange}
+                startTime={startTime}
                 cameraPreviews={relevantPreviews || []}
                 onControllerReady={(controller) => {
                   videoPlayersRef.current[camera.name] = controller;

web/src/views/events/RecordingView.tsx

@@ -35,7 +35,6 @@ export function DesktopRecordingView({
 
   // controller state
 
-  const [playerReady, setPlayerReady] = useState(false);
   const [mainCamera, setMainCamera] = useState(startCamera);
   const videoPlayersRef = useRef<{ [camera: string]: DynamicVideoController }>(
     {},
@@ -74,7 +73,9 @@ export function DesktopRecordingView({
         }
       });
     }
-  }, [selectedRangeIdx, timeRange, videoPlayersRef, playerReady, mainCamera]);
+    // we only want to fire once when players are ready
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedRangeIdx, timeRange, videoPlayersRef.current, mainCamera]);
 
   // scrubbing and timeline state
 
@@ -116,9 +117,11 @@ export function DesktopRecordingView({
     (newCam: string) => {
       const lastController = videoPlayersRef.current[mainCamera];
       const newController = videoPlayersRef.current[newCam];
-      lastController.onPlayerTimeUpdate(undefined);
-      lastController.onClipChangedEvent(undefined);
+      lastController.onPlayerTimeUpdate(null);
+      lastController.onClipChangedEvent(null);
+      lastController.autoPlay(false);
       lastController.scrubToTimestamp(currentTime);
+      newController.autoPlay(true);
       newController.onCanPlay(() => {
         newController.seekToTimestamp(currentTime, true);
         newController.onCanPlay(null);
@@ -176,10 +179,8 @@ export function DesktopRecordingView({
                   camera={cam}
                   timeRange={currentTimeRange}
                   cameraPreviews={allPreviews ?? []}
-                  preloadRecordings
                   onControllerReady={(controller) => {
                     videoPlayersRef.current[cam] = controller;
-                    setPlayerReady(true);
                     controller.onPlayerTimeUpdate((timestamp: number) => {
                       setCurrentTime(timestamp);
 
@@ -210,11 +211,9 @@ export function DesktopRecordingView({
                 timeRange={currentTimeRange}
                 cameraPreviews={allPreviews ?? []}
                 previewOnly
-                preloadRecordings
                 onControllerReady={(controller) => {
                   videoPlayersRef.current[cam] = controller;
-                  setPlayerReady(true);
-                  controller.scrubToTimestamp(startTime);
+                  controller.scrubToTimestamp(startTime, true);
                 }}
                 onClick={() => onSelectCamera(cam)}
               />
@@ -372,7 +371,6 @@ export function MobileRecordingView({
           camera={startCamera}
           timeRange={currentTimeRange}
           cameraPreviews={relevantPreviews || []}
-          preloadRecordings
           onControllerReady={(controller) => {
             controllerRef.current = controller;
             setPlayerReady(true);