Fix preview getting wrong update time (#10534)

* Fix preview getting wrong update time * remove dead logic * Cleanup * Fix case where multiple previews play at the same time * Fix typing
blakeblackshear · Mar 19, 2024 · ccdf9a2 · ccdf9a2
1 parent 5c3925a
commit ccdf9a2
Show file tree

Hide file tree

Showing 4 changed files with 32 additions and 26 deletions.
diff --git a/web/src/components/player/PreviewPlayer.tsx b/web/src/components/player/PreviewPlayer.tsx
@@ -272,25 +272,12 @@ class PreviewVideoController extends PreviewController {
       return false;
     }
 
-    const seekTime = time - this.preview.start;
-
-    if (
-      isAndroid &&
-      isChrome &&
-      this.scrubbing &&
-      Math.abs(seekTime - this.previewRef.current.currentTime) > 400
-    ) {
-      // android/chrome has incorrect timestamps sent that are before the expected seek time
-      return false;
-    }
+    const seekTime = Math.max(0, time - this.preview.start);
 
     if (this.seeking) {
-      this.timeToSeek = time;
+      this.timeToSeek = seekTime;
     } else {
-      this.previewRef.current.currentTime = Math.max(
-        0,
-        time - this.preview.start,
-      );
+      this.previewRef.current.currentTime = seekTime;
       this.seeking = true;
     }
 
@@ -303,16 +290,15 @@ class PreviewVideoController extends PreviewController {
     }
 
     if (this.timeToSeek) {
-      const diff =
-        Math.round(this.timeToSeek) -
-        Math.round(this.previewRef.current.currentTime + this.preview.start);
+      const diff = Math.round(
+        this.timeToSeek - this.previewRef.current.currentTime,
+      );
 
       const scrubLimit = isMobile ? 1 : 0.5;
 
       if (Math.abs(diff) >= scrubLimit) {
         // only seek if there is an appropriate amount of time difference
-        this.previewRef.current.currentTime =
-          this.timeToSeek - this.preview.start;
+        this.previewRef.current.currentTime = this.timeToSeek;
       } else {
         this.seeking = false;
         this.timeToSeek = undefined;

diff --git a/web/src/components/player/PreviewThumbnailPlayer.tsx b/web/src/components/player/PreviewThumbnailPlayer.tsx
@@ -24,7 +24,7 @@ type PreviewPlayerProps = {
   review: ReviewSegment;
   allPreviews?: Preview[];
   scrollLock?: boolean;
-  onTimeUpdate?: React.Dispatch<React.SetStateAction<number | undefined>>;
+  onTimeUpdate?: (time: number | undefined) => void;
   setReviewed: (review: ReviewSegment) => void;
   onClick: (reviewId: string, ctrl: boolean) => void;
 };

diff --git a/web/src/components/player/dynamic/DynamicVideoPlayer.tsx b/web/src/components/player/dynamic/DynamicVideoPlayer.tsx
@@ -120,13 +120,13 @@ export default function DynamicVideoPlayer({
 
   const onTimeUpdate = useCallback(
     (time: number) => {
-      if (!controller || !onTimestampUpdate || time == 0) {
+      if (isScrubbing || !controller || !onTimestampUpdate || time == 0) {
         return;
       }
 
       onTimestampUpdate(controller.getProgress(time));
     },
-    [controller, onTimestampUpdate],
+    [controller, onTimestampUpdate, isScrubbing],
   );
 
   // state of playback player
@@ -176,7 +176,13 @@ export default function DynamicVideoPlayer({
           onTimeUpdate={onTimeUpdate}
           onPlayerLoaded={onPlayerLoaded}
           onClipEnded={onClipEnded}
-          onPlaying={() => setIsLoading(false)}
+          onPlaying={() => {
+            if (isScrubbing) {
+              playerRef.current?.pause();
+            }
+
+            setIsLoading(false);
+          }}
         >
           {config && focusedItem && (
             <TimelineEventOverlay

diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
@@ -349,6 +349,20 @@ function DetectionReview({
 
   const [previewTime, setPreviewTime] = useState<number>();
 
+  const onPreviewTimeUpdate = useCallback(
+    (time: number | undefined) => {
+      if (!time) {
+        setPreviewTime(time);
+        return;
+      }
+
+      if (!previewTime || time > previewTime) {
+        setPreviewTime(time);
+      }
+    },
+    [previewTime, setPreviewTime],
+  );
+
   // review interaction
 
   const [hasUpdate, setHasUpdate] = useState(false);
@@ -483,7 +497,7 @@ function DetectionReview({
                       allPreviews={relevantPreviews}
                       setReviewed={markItemAsReviewed}
                       scrollLock={scrollLock}
-                      onTimeUpdate={setPreviewTime}
+                      onTimeUpdate={onPreviewTimeUpdate}
                       onClick={onSelectReview}
                     />
                   </div>