From 5cfa530ad762f8756e635d542a9bc7f5ad8986a6 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Mon, 11 Mar 2024 16:41:55 -0600
Subject: [PATCH] Use preview players for previews

---
 web/src/views/events/RecordingView.tsx | 77 ++++++++++----------------
 1 file changed, 30 insertions(+), 47 deletions(-)

diff --git a/web/src/views/events/RecordingView.tsx b/web/src/views/events/RecordingView.tsx
index 953e0ecff..c9928d98c 100644
--- a/web/src/views/events/RecordingView.tsx
+++ b/web/src/views/events/RecordingView.tsx
@@ -1,6 +1,9 @@
 import DynamicVideoPlayer, {
   DynamicVideoController,
 } from "@/components/player/DynamicVideoPlayer";
+import PreviewPlayer, {
+  PreviewController,
+} from "@/components/player/PreviewPlayer";
 import EventReviewTimeline from "@/components/timeline/EventReviewTimeline";
 import MotionReviewTimeline from "@/components/timeline/MotionReviewTimeline";
 import { Button } from "@/components/ui/button";
@@ -45,9 +48,8 @@ export function DesktopRecordingView({
   // controller state
 
   const [mainCamera, setMainCamera] = useState(startCamera);
-  const videoPlayersRef = useRef<{ [camera: string]: DynamicVideoController }>(
-    {},
-  );
+  const mainControllerRef = useRef<DynamicVideoController | null>(null);
+  const previewRefs = useRef<{ [camera: string]: PreviewController }>({});
 
   const [playbackStart, setPlaybackStart] = useState(startTime);
 
@@ -66,27 +68,20 @@ export function DesktopRecordingView({
 
   // move to next clip
   useEffect(() => {
-    if (
-      !videoPlayersRef.current &&
-      Object.values(videoPlayersRef.current).length > 0
-    ) {
+    if (!mainControllerRef.current) {
       return;
     }
 
-    const mainController = videoPlayersRef.current[mainCamera];
-
-    if (mainController) {
-      mainController.onClipChangedEvent((dir) => {
-        if (dir == "forward") {
-          if (selectedRangeIdx < timeRange.ranges.length - 1) {
-            setSelectedRangeIdx(selectedRangeIdx + 1);
-          }
+    mainControllerRef.current.onClipChangedEvent((dir) => {
+      if (dir == "forward") {
+        if (selectedRangeIdx < timeRange.ranges.length - 1) {
+          setSelectedRangeIdx(selectedRangeIdx + 1);
         }
-      });
-    }
+      }
+    });
     // we only want to fire once when players are ready
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [selectedRangeIdx, timeRange, videoPlayersRef.current, mainCamera]);
+  }, [selectedRangeIdx, timeRange, mainControllerRef.current, mainCamera]);
 
   // scrubbing and timeline state
 
@@ -109,7 +104,9 @@ export function DesktopRecordingView({
         return;
       }
 
-      Object.values(videoPlayersRef.current).forEach((controller) => {
+      mainControllerRef.current?.scrubToTimestamp(currentTime);
+
+      Object.values(previewRefs.current).forEach((controller) => {
         controller.scrubToTimestamp(currentTime);
       });
     }
@@ -117,7 +114,7 @@ export function DesktopRecordingView({
 
   useEffect(() => {
     if (!scrubbing) {
-      videoPlayersRef.current[mainCamera]?.seekToTimestamp(currentTime, true);
+      mainControllerRef.current?.seekToTimestamp(currentTime, true);
     }
 
     // we only want to seek when user stops scrubbing
@@ -126,27 +123,10 @@ export function DesktopRecordingView({
 
   const onSelectCamera = useCallback(
     (newCam: string) => {
-      const lastController = videoPlayersRef.current[mainCamera];
-      const newController = videoPlayersRef.current[newCam];
-      lastController.onPlayerTimeUpdate(null);
-      lastController.onClipChangedEvent(null);
-      lastController.scrubToTimestamp(currentTime);
-      newController.onPlayerTimeUpdate((timestamp: number) => {
-        setCurrentTime(timestamp);
-
-        allCameras.forEach((cam) => {
-          if (cam != newCam) {
-            videoPlayersRef.current[cam]?.scrubToTimestamp(
-              Math.floor(timestamp),
-            );
-          }
-        });
-      });
-      newController.seekToTimestamp(currentTime, true);
-      setPlaybackStart(currentTime);
       setMainCamera(newCam);
+      setPlaybackStart(currentTime);
     },
-    [allCameras, currentTime, mainCamera],
+    [currentTime],
   );
 
   // motion timeline data
@@ -191,16 +171,19 @@ export function DesktopRecordingView({
 
       <div className="flex h-full justify-center overflow-hidden">
         <div className="flex flex-1 flex-wrap">
-          <div className="w-full flex flex-col h-full px-2 justify-center">
-            <div key={mainCamera} className="flex justify-center items mb-5">
+          <div className="w-full flex flex-col h-full px-2 justify-center items-center">
+            <div
+              key={mainCamera}
+              className="w-[82%] flex justify-center items mb-5"
+            >
               <DynamicVideoPlayer
-                className={`w-[82%] ${grow}`}
+                className={`w-full ${grow}`}
                 camera={mainCamera}
                 timeRange={currentTimeRange}
                 cameraPreviews={allPreviews ?? []}
                 startTime={playbackStart}
                 onControllerReady={(controller) => {
-                  videoPlayersRef.current[mainCamera] = controller;
+                  mainControllerRef.current = controller;
                   controller.onPlayerTimeUpdate((timestamp: number) => {
                     setCurrentTime(timestamp);
                   });
@@ -215,15 +198,15 @@ export function DesktopRecordingView({
                       key={cam}
                       className="aspect-video flex items-center w-[260px]"
                     >
-                      <DynamicVideoPlayer
+                      <PreviewPlayer
                         className="size-full"
                         camera={cam}
                         timeRange={currentTimeRange}
                         cameraPreviews={allPreviews ?? []}
-                        previewOnly
+                        startTime={startTime}
                         onControllerReady={(controller) => {
-                          videoPlayersRef.current[cam] = controller;
-                          controller.scrubToTimestamp(startTime, true);
+                          previewRefs.current[cam] = controller;
+                          controller.scrubToTimestamp(startTime);
                         }}
                         onClick={() => onSelectCamera(cam)}
                       />