From 81f0c68b85b1556a4bf75a8fa0119e09a0c6e90a Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Mon, 26 Feb 2024 07:14:14 -0700
Subject: [PATCH] Fix useEffect and try to load next clip for preview

---
 .../components/player/DynamicVideoPlayer.tsx  | 29 +++++++++++++------
 web/src/views/events/DesktopRecordingView.tsx | 13 ++++++---
 2 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/web/src/components/player/DynamicVideoPlayer.tsx b/web/src/components/player/DynamicVideoPlayer.tsx
index 306f10392..2f5d148b0 100644
--- a/web/src/components/player/DynamicVideoPlayer.tsx
+++ b/web/src/components/player/DynamicVideoPlayer.tsx
@@ -199,8 +199,6 @@ export default function DynamicVideoPlayer({
     return <ActivityIndicator />;
   }
 
-  //console.log(`${config.detect.width / config.detect.height < 1.7 ? "16:9" : undefined}`)
-
   return (
     <div className={className}>
       <div
@@ -406,19 +404,32 @@ export class DynamicVideoController {
   }
 
   scrubToTimestamp(time: number) {
+    if (!this.preview) {
+      return;
+    }
+
+    if (time > this.preview.end) {
+      if (this.playerMode == "scrubbing") {
+        this.fireClipEndEvent();
+        this.playerMode = "playback";
+        this.setScrubbing(false);
+        this.timeToSeek = undefined;
+        this.seeking = false;
+      }
+      return;
+    }
+
     if (this.playerMode != "scrubbing") {
       this.playerMode = "scrubbing";
       this.playerRef.current?.pause();
       this.setScrubbing(true);
     }
 
-    if (this.preview) {
-      if (this.seeking) {
-        this.timeToSeek = time;
-      } else {
-        this.previewRef.current?.currentTime(time - this.preview.start);
-        this.seeking = true;
-      }
+    if (this.seeking) {
+      this.timeToSeek = time;
+    } else {
+      this.previewRef.current?.currentTime(time - this.preview.start);
+      this.seeking = true;
     }
   }
 
diff --git a/web/src/views/events/DesktopRecordingView.tsx b/web/src/views/events/DesktopRecordingView.tsx
index 4b73e6491..30438cf0a 100644
--- a/web/src/views/events/DesktopRecordingView.tsx
+++ b/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(
@@ -49,7 +53,7 @@ export default function DesktopRecordingView({
         setSelectedRangeIdx(selectedRangeIdx + 1);
       });
     }
-  }, [controllerRef, selectedRangeIdx]);
+  }, [playerReady, selectedRangeIdx]);
 
   // scrubbing and timeline state
 
@@ -62,13 +66,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 +91,7 @@ export default function DesktopRecordingView({
           cameraPreviews={relevantPreviews || []}
           onControllerReady={(controller) => {
             controllerRef.current = controller;
+            setPlayerReady(true);
             controllerRef.current.onPlayerTimeUpdate((timestamp: number) => {
               setCurrentTime(timestamp);
             });