Fix jumping to segment in recordings view (#10424)

* Fix skeletons showing incorrectly

* Handle clicking segment from different time range

web/src/components/player/DynamicVideoPlayer.tsx

@@ -345,14 +345,23 @@ export class DynamicVideoController {
     }
   }
 
+  pause() {
+    this.playerController.pause();
+  }
+
   seekToTimestamp(time: number, play: boolean = false) {
     if (this.playerMode != "playback") {
       this.playerMode = "playback";
       this.setScrubbing(false);
     }
 
-    if (this.recordings.length == 0) {
+    if (
+      this.recordings.length == 0 ||
+      time < this.recordings[0].start_time ||
+      time > this.recordings[this.recordings.length - 1].end_time
+    ) {
       this.timeToStart = time;
+      return;
     }
 
     let seekSeconds = 0;
@@ -371,12 +380,15 @@ export class DynamicVideoController {
         segment.end_time - segment.start_time - (segment.end_time - time);
       return true;
     });
-    this.playerController.currentTime(seekSeconds);
 
-    if (play) {
-      this.playerController.play();
-    } else {
-      this.playerController.pause();
+    if (seekSeconds != 0) {
+      this.playerController.currentTime(seekSeconds);
+
+      if (play) {
+        this.playerController.play();
+      } else {
+        this.playerController.pause();
+      }
     }
   }
 

web/src/components/player/PreviewPlayer.tsx

@@ -154,8 +154,11 @@ function PreviewVideoPlayer({
         Math.round(preview.start) >= timeRange.start &&
         Math.floor(preview.end) <= timeRange.end,
     );
-    setLoaded(false);
-    setCurrentPreview(preview);
+
+    if (preview != currentPreview) {
+      setCurrentPreview(preview);
+      setLoaded(false);
+    }
 
     controller.newPlayback({
       preview,

web/src/views/events/RecordingView.tsx

@@ -92,6 +92,21 @@ export function DesktopRecordingView({
 
   const [scrubbing, setScrubbing] = useState(false);
   const [currentTime, setCurrentTime] = useState<number>(startTime);
+  const [playerTime, setPlayerTime] = useState(startTime);
+
+  const updateSelectedSegment = useCallback(
+    (currentTime: number) => {
+      const index = timeRange.ranges.findIndex(
+        (seg) => seg.start <= currentTime && seg.end >= currentTime,
+      );
+
+      if (index != -1) {
+        setSelectedRangeIdx(index);
+        setPlaybackStart(currentTime);
+      }
+    },
+    [timeRange],
+  );
 
   useEffect(() => {
     if (scrubbing) {
@@ -99,13 +114,7 @@ export function DesktopRecordingView({
         currentTime > currentTimeRange.end + 60 ||
         currentTime < currentTimeRange.start - 60
       ) {
-        const index = timeRange.ranges.findIndex(
-          (seg) => seg.start <= currentTime && seg.end >= currentTime,
-        );
-
-        if (index != -1) {
-          setSelectedRangeIdx(index);
-        }
+        updateSelectedSegment(currentTime);
         return;
       }
 
@@ -115,7 +124,13 @@ export function DesktopRecordingView({
         controller.scrubToTimestamp(currentTime);
       });
     }
-  }, [currentTime, scrubbing, timeRange, currentTimeRange]);
+  }, [
+    currentTime,
+    scrubbing,
+    timeRange,
+    currentTimeRange,
+    updateSelectedSegment,
+  ]);
 
   useEffect(() => {
     if (!scrubbing) {
@@ -126,6 +141,25 @@ export function DesktopRecordingView({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [scrubbing]);
 
+  useEffect(() => {
+    if (!scrubbing) {
+      if (Math.abs(currentTime - playerTime) > 10) {
+        mainControllerRef.current?.pause();
+
+        if (
+          currentTimeRange.start <= currentTime &&
+          currentTimeRange.end >= currentTime
+        ) {
+          mainControllerRef.current?.seekToTimestamp(currentTime, true);
+        } else {
+          updateSelectedSegment(currentTime);
+        }
+      }
+    }
+    // we only want to seek when current time doesn't match the player update time
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentTime]);
+
   const onSelectCamera = useCallback(
     (newCam: string) => {
       setMainCamera(newCam);
@@ -191,6 +225,7 @@ export function DesktopRecordingView({
                 onControllerReady={(controller) => {
                   mainControllerRef.current = controller;
                   controller.onPlayerTimeUpdate((timestamp: number) => {
+                    setPlayerTime(timestamp);
                     setCurrentTime(timestamp);
                     Object.values(previewRefs.current ?? {}).forEach((prev) =>
                       prev.scrubToTimestamp(Math.floor(timestamp)),