Rewrite player to handle changing of previews outside of video player

web/src/components/player/DynamicVideoPlayer.tsx

@@ -12,7 +12,6 @@ import TimelineEventOverlay from "../overlay/TimelineDataOverlay";
 import { useApiHost } from "@/api";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
-import ActivityIndicator from "../indicators/activity-indicator";
 import useKeyboardListener from "@/hooks/use-keyboard-listener";
 import { Recording } from "@/types/record";
 import { Preview } from "@/types/preview";
@@ -64,14 +63,14 @@ export default function DynamicVideoPlayer({
 
   // controlling playback
 
-  const playerRef = useRef<Player | undefined>(undefined);
+  const [playerRef, setPlayerRef] = useState<Player | undefined>(undefined);
   const previewRef = useRef<HTMLVideoElement | null>(null);
   const [isScrubbing, setIsScrubbing] = useState(previewOnly);
   const [focusedItem, setFocusedItem] = useState<Timeline | undefined>(
     undefined,
   );
   const controller = useMemo(() => {
-    if (!config) {
+    if (!config || !playerRef || !previewRef.current) {
       return undefined;
     }
 
@@ -84,10 +83,12 @@ export default function DynamicVideoPlayer({
       setIsScrubbing,
       setFocusedItem,
     );
-  }, [camera, config, previewOnly]);
+    // we only want to fire once when players are ready
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [camera, config, playerRef, previewRef]);
 
   useEffect(() => {
-    if (!playerRef.current && !previewRef.current) {
+    if (!controller) {
       return;
     }
 
@@ -97,7 +98,23 @@ export default function DynamicVideoPlayer({
 
     // we only want to fire once when players are ready
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [playerRef, previewRef]);
+  }, [controller]);
+
+  useEffect(() => {
+    if (!controller || !playerRef) {
+      return;
+    }
+
+    if (previewOnly) {
+      playerRef.autoplay(false);
+      controller.removePlayerListeners();
+    } else {
+      controller.setPlayerListeners();
+      playerRef.play();
+    }
+    // we only want to fire once when players are ready
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [controller, previewOnly]);
 
   const [hasRecordingAtTime, setHasRecordingAtTime] = useState(true);
 
@@ -108,33 +125,33 @@ export default function DynamicVideoPlayer({
       switch (key) {
         case "ArrowLeft":
           if (down) {
-            const currentTime = playerRef.current?.currentTime();
+            const currentTime = playerRef?.currentTime();
 
             if (currentTime) {
-              playerRef.current?.currentTime(Math.max(0, currentTime - 5));
+              playerRef?.currentTime(Math.max(0, currentTime - 5));
             }
           }
           break;
         case "ArrowRight":
           if (down) {
-            const currentTime = playerRef.current?.currentTime();
+            const currentTime = playerRef?.currentTime();
 
             if (currentTime) {
-              playerRef.current?.currentTime(currentTime + 5);
+              playerRef?.currentTime(currentTime + 5);
             }
           }
           break;
         case "m":
-          if (down && !repeat && playerRef.current) {
+          if (down && !repeat && playerRef) {
-            playerRef.current.muted(!playerRef.current.muted());
+            playerRef.muted(!playerRef.muted());
           }
           break;
         case " ":
-          if (down && playerRef.current) {
+          if (down && playerRef) {
-            if (playerRef.current.paused()) {
+            if (playerRef.paused()) {
-              playerRef.current.play();
+              playerRef.play();
             } else {
-              playerRef.current.pause();
+              playerRef.pause();
             }
           }
           break;
@@ -244,58 +261,47 @@ export default function DynamicVideoPlayer({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [controller, recordings]);
 
-  if (!controller) {
-    return <ActivityIndicator />;
-  }
-
   return (
     <div
       className={`relative ${className ?? ""} ${onClick ? (hasRecordingAtTime ? "cursor-pointer" : "") : ""}`}
       onClick={onClick}
     >
-      {!previewOnly && (
+      <div
-        <div
+        className={`w-full relative ${
-          className={`w-full relative ${
+          previewOnly || (currentPreview != undefined && isScrubbing)
-            currentPreview != undefined && isScrubbing ? "hidden" : "visible"
+            ? "hidden"
-          }`}
+            : "visible"
-        >
+        }`}
-          <VideoPlayer
+      >
-            options={{
+        <VideoPlayer
-              preload: "auto",
+          options={{
-              autoplay: true,
+            preload: "auto",
-              sources: [initialPlaybackSource],
+            autoplay: !previewOnly,
-              aspectRatio: tallVideo ? "16:9" : undefined,
+            sources: [initialPlaybackSource],
-              controlBar: {
+            aspectRatio: tallVideo ? "16:9" : undefined,
-                remainingTimeDisplay: false,
+            controlBar: {
-                progressControl: {
+              remainingTimeDisplay: false,
-                  seekBar: false,
+              progressControl: {
-                },
+                seekBar: false,
               },
-            }}
+            },
-            seekOptions={{ forward: 10, backward: 5 }}
+          }}
-            onReady={(player) => {
+          seekOptions={{ forward: 10, backward: 5 }}
-              playerRef.current = player;
+          onReady={(player) => {
-              player.on("playing", () => setFocusedItem(undefined));
+            setPlayerRef(player);
-              player.on("timeupdate", () => {
+          }}
-                controller.updateProgress(player.currentTime() || 0);
+          onDispose={() => {
-              });
+            setPlayerRef(undefined);
-              player.on("ended", () =>
+          }}
-                controller.fireClipChangeEvent("forward"),
+        >
-              );
+          {config && focusedItem && (
-            }}
+            <TimelineEventOverlay
-            onDispose={() => {
+              timeline={focusedItem}
-              playerRef.current = undefined;
+              cameraConfig={config.cameras[camera]}
-            }}
+            />
-          >
+          )}
-            {config && focusedItem && (
+        </VideoPlayer>
-              <TimelineEventOverlay
+      </div>
-                timeline={focusedItem}
-                cameraConfig={config.cameras[camera]}
-              />
-            )}
-          </VideoPlayer>
-        </div>
-      )}
       <video
         ref={previewRef}
         className={`size-full rounded-2xl ${currentPreview != undefined && (previewOnly || isScrubbing) ? "visible" : "hidden"} ${tallVideo ? "aspect-tall" : ""} bg-black`}
@@ -305,7 +311,7 @@ export default function DynamicVideoPlayer({
         muted
         disableRemotePlayback
         onSeeked={onPreviewSeeked}
-        onLoadedData={() => controller.previewReady()}
+        onLoadedData={() => controller?.previewReady()}
       >
         {currentPreview != undefined && (
           <source src={currentPreview.src} type={currentPreview.type} />
@@ -318,7 +324,7 @@ export default function DynamicVideoPlayer({
 export class DynamicVideoController {
   // main state
   public camera = "";
-  private playerRef: MutableRefObject<Player | undefined>;
+  private playerRef: Player;
   private previewRef: MutableRefObject<HTMLVideoElement | null>;
   private setScrubbing: (isScrubbing: boolean) => void;
   private setFocusedItem: (timeline: Timeline) => void;
@@ -327,24 +333,26 @@ export class DynamicVideoController {
 
   // playback
   private recordings: Recording[] = [];
-  private onPlaybackTimestamp:
+  private onPlaybackTimestamp: ((time: number) => void) | undefined = undefined;
-    | ((time: number, first: boolean) => void)
+  private onClipChange: ((dir: "forward") => void) | undefined = undefined;
-    | undefined = undefined;
-  private onClipChange: ((dir: "forward" | number) => void) | undefined =
-    undefined;
   private annotationOffset: number;
   private timeToStart: number | undefined = undefined;
-  private firstProgressUpdate: boolean = true;
 
   // preview
   private preview: Preview | undefined = undefined;
   private timeToSeek: number | undefined = undefined;
   private seeking = false;
-  private readyToScrub = true;
+
+  // listeners
+  private playerProgressListener = () => {
+    this.updateProgress(this.playerRef.currentTime() || 0);
+  };
+  private playerEndedListener = () => this.fireClipChangeEvent("forward");
+  private canPlayListener: (() => void) | null = null;
 
   constructor(
     camera: string,
-    playerRef: MutableRefObject<Player | undefined>,
+    playerRef: Player,
     previewRef: MutableRefObject<HTMLVideoElement | null>,
     annotationOffset: number,
     defaultMode: PlayerMode,
@@ -362,9 +370,8 @@ export class DynamicVideoController {
 
   newPlayback(newPlayback: DynamicPlayback) {
     this.recordings = newPlayback.recordings;
-    this.firstProgressUpdate = true;
 
-    this.playerRef.current?.src({
+    this.playerRef.src({
       src: newPlayback.playbackUri,
       type: "application/vnd.apple.mpegurl",
     });
@@ -375,6 +382,12 @@ export class DynamicVideoController {
     }
 
     this.preview = newPlayback.preview;
+
+    if (this.preview) {
+      this.seeking = false;
+      this.timeToSeek = undefined;
+    }
+
     this.timeRange = newPlayback.timeRange;
   }
 
@@ -406,15 +419,39 @@ export class DynamicVideoController {
         segment.end_time - segment.start_time - (segment.end_time - time);
       return true;
     });
-    this.playerRef.current?.currentTime(seekSeconds);
+    this.playerRef.currentTime(seekSeconds);
 
     if (play) {
-      this.playerRef.current?.play();
+      this.playerRef.play();
+    } else {
+      this.playerRef.pause();
+    }
+  }
+
+  setPlayerListeners() {
+    this.playerRef.on("timeupdate", this.playerProgressListener);
+    this.playerRef.on("ended", this.playerEndedListener);
+  }
+
+  removePlayerListeners() {
+    this.playerRef.off("timeupdate", this.playerProgressListener);
+    this.playerRef.off("ended", this.playerEndedListener);
+  }
+
+  onCanPlay(listener: (() => void) | null) {
+    if (listener) {
+      this.canPlayListener = listener;
+      this.playerRef.on("canplay", this.canPlayListener);
+    } else {
+      if (this.canPlayListener) {
+        this.playerRef.off("canplay", this.canPlayListener);
+        this.canPlayListener = null;
+      }
     }
   }
 
   seekToTimelineItem(timeline: Timeline) {
-    this.playerRef.current?.pause();
+    this.playerRef.pause();
     this.seekToTimestamp(timeline.timestamp + this.annotationOffset);
     this.setFocusedItem(timeline);
   }
@@ -435,14 +472,11 @@ export class DynamicVideoController {
         }
       });
 
-      this.onPlaybackTimestamp(timestamp, this.firstProgressUpdate);
+      this.onPlaybackTimestamp(timestamp);
-      this.firstProgressUpdate = false;
     }
   }
 
-  onPlayerTimeUpdate(
+  onPlayerTimeUpdate(listener: ((timestamp: number) => void) | undefined) {
-    listener: ((timestamp: number, first: boolean) => void) | undefined,
-  ) {
     this.onPlaybackTimestamp = listener;
   }
 
@@ -450,7 +484,7 @@ export class DynamicVideoController {
     this.onClipChange = listener;
   }
 
-  fireClipChangeEvent(dir: "forward" | number) {
+  fireClipChangeEvent(dir: "forward") {
     if (this.onClipChange) {
       this.onClipChange(dir);
     }
@@ -461,39 +495,13 @@ export class DynamicVideoController {
       return;
     }
 
-    const outsideHourBounds =
-      this.timeRange.start - time > 3600 || time - this.timeRange.end > 3600;
-
-    if (!this.readyToScrub || outsideHourBounds) {
-      if (outsideHourBounds) {
-        this.fireClipChangeEvent(time);
-      }
-
-      return;
-    }
-
-    if (time > this.timeRange.end || time < this.timeRange.start) {
-      if (this.playerMode == "scrubbing") {
-        this.timeToSeek = undefined;
-        this.seeking = false;
-        this.readyToScrub = false;
-        this.fireClipChangeEvent(time);
-
-        if (this.recordings.length > 0) {
-          this.playerMode = "playback";
-          this.setScrubbing(false);
-        }
-      }
-      return;
-    }
-
     if (time < this.preview.start || time > this.preview.end) {
       return;
     }
 
     if (this.playerMode != "scrubbing") {
       this.playerMode = "scrubbing";
-      this.playerRef.current?.pause();
+      this.playerRef.pause();
       this.setScrubbing(true);
     }
 
@@ -532,7 +540,6 @@ export class DynamicVideoController {
 
   previewReady() {
     this.previewRef.current?.pause();
-    this.readyToScrub = true;
   }
 
   hasRecordingAtTime(time: number): boolean {

web/src/views/events/EventView.tsx

@@ -579,12 +579,17 @@ function MotionReview({
     () => getChunkedTimeRange(timeRange.after, lastFullHour),
     [lastFullHour, timeRange],
   );
+
   const [selectedRangeIdx, setSelectedRangeIdx] = useState(
     timeRangeSegments.ranges.length - 1,
   );
   const [currentTime, setCurrentTime] = useState<number>(
     timeRangeSegments.ranges[selectedRangeIdx].start,
   );
+  const currentTimeRange = useMemo(
+    () => timeRangeSegments.ranges[selectedRangeIdx],
+    [selectedRangeIdx, timeRangeSegments],
+  );
 
   // move to next clip
 
@@ -604,24 +609,30 @@ function MotionReview({
           if (selectedRangeIdx < timeRangeSegments.ranges.length - 1) {
             setSelectedRangeIdx(selectedRangeIdx + 1);
           }
-        } else {
-          const index = timeRangeSegments.ranges.findIndex(
-            (seg) => seg.start <= dir && seg.end >= dir,
-          );
-
-          if (index != -1) {
-            setSelectedRangeIdx(index);
-          }
         }
       });
     }
   }, [selectedRangeIdx, timeRangeSegments, videoPlayersRef, playerReady]);
 
   useEffect(() => {
+    if (
+      currentTime > currentTimeRange.end + 60 ||
+      currentTime < currentTimeRange.start - 60
+    ) {
+      const index = timeRangeSegments.ranges.findIndex(
+        (seg) => seg.start <= currentTime && seg.end >= currentTime,
+      );
+
+      if (index != -1) {
+        setSelectedRangeIdx(index);
+      }
+      return;
+    }
+
     Object.values(videoPlayersRef.current).forEach((controller) => {
       controller.scrubToTimestamp(currentTime);
     });
-  }, [currentTime]);
+  }, [currentTime, currentTimeRange, timeRangeSegments]);
 
   return (
     <>
@@ -645,7 +656,7 @@ function MotionReview({
                 key={camera.name}
                 className={`${grow}`}
                 camera={camera.name}
-                timeRange={timeRangeSegments.ranges[selectedRangeIdx]}
+                timeRange={currentTimeRange}
                 cameraPreviews={relevantPreviews || []}
                 previewOnly
                 onControllerReady={(controller) => {