Add preview only mode to make loading more efficeint

web/src/components/player/DynamicVideoPlayer.tsx

@@ -28,7 +28,7 @@ type DynamicVideoPlayerProps = {
   camera: string;
   timeRange: { start: number; end: number };
   cameraPreviews: Preview[];
-  defaultMode?: PlayerMode;
+  previewOnly?: boolean;
   onControllerReady?: (controller: DynamicVideoController) => void;
 };
 export default function DynamicVideoPlayer({
@@ -36,7 +36,7 @@ export default function DynamicVideoPlayer({
   camera,
   timeRange,
   cameraPreviews,
-  defaultMode = "playback",
+  previewOnly = false,
   onControllerReady,
 }: DynamicVideoPlayerProps) {
   const apiHost = useApiHost();
@@ -64,7 +64,7 @@ export default function DynamicVideoPlayer({
 
   const playerRef = useRef<Player | undefined>(undefined);
   const previewRef = useRef<Player | undefined>(undefined);
-  const [isScrubbing, setIsScrubbing] = useState(defaultMode == "scrubbing");
+  const [isScrubbing, setIsScrubbing] = useState(previewOnly);
   const [hasPreview, setHasPreview] = useState(false);
   const [focusedItem, setFocusedItem] = useState<Timeline | undefined>(
     undefined,
@@ -78,11 +78,11 @@ export default function DynamicVideoPlayer({
       playerRef,
       previewRef,
       (config.cameras[camera]?.detect?.annotation_offset || 0) / 1000,
-      defaultMode,
+      previewOnly ? "scrubbing" : "playback",
       setIsScrubbing,
       setFocusedItem,
     );
-  }, [camera, config, defaultMode]);
+  }, [camera, config, previewOnly]);
 
   // keyboard control
 
@@ -178,12 +178,12 @@ export default function DynamicVideoPlayer({
     };
   }, [timeRange]);
   const { data: recordings } = useSWR<Recording[]>(
-    [`${camera}/recordings`, recordingParams],
+    previewOnly ? null : [`${camera}/recordings`, recordingParams],
     { revalidateOnFocus: false },
   );
 
   useEffect(() => {
-    if (!controller || !recordings) {
+    if (!controller || (!previewOnly && !recordings)) {
       return;
     }
 
@@ -204,7 +204,7 @@ export default function DynamicVideoPlayer({
     setHasPreview(preview != undefined);
 
     controller.newPlayback({
-      recordings,
+      recordings: recordings ?? [],
       playbackUri,
       preview,
     });
@@ -219,49 +219,53 @@ export default function DynamicVideoPlayer({
 
   return (
     <div className={className}>
-      <div
-        className={`w-full relative ${
-          hasPreview && isScrubbing ? "hidden" : "visible"
-        }`}
-      >
-        <VideoPlayer
-          options={{
-            preload: "auto",
-            autoplay: true,
-            sources: [initialPlaybackSource],
-            aspectRatio: tallVideo ? "16:9" : undefined,
-            controlBar: {
-              remainingTimeDisplay: false,
-              progressControl: {
-                seekBar: false,
-              },
-            },
-          }}
-          seekOptions={{ forward: 10, backward: 5 }}
-          onReady={(player) => {
-            playerRef.current = player;
-            player.on("playing", () => setFocusedItem(undefined));
-            player.on("timeupdate", () => {
-              controller.updateProgress(player.currentTime() || 0);
-            });
-            player.on("ended", () => controller.fireClipChangeEvent("forward"));
-
-            if (onControllerReady) {
-              onControllerReady(controller);
-            }
-          }}
-          onDispose={() => {
-            playerRef.current = undefined;
-          }}
+      {!previewOnly && (
+        <div
+          className={`w-full relative ${
+            hasPreview && isScrubbing ? "hidden" : "visible"
+          }`}
         >
-          {config && focusedItem && (
-            <TimelineEventOverlay
-              timeline={focusedItem}
-              cameraConfig={config.cameras[camera]}
-            />
-          )}
-        </VideoPlayer>
-      </div>
+          <VideoPlayer
+            options={{
+              preload: "auto",
+              autoplay: true,
+              sources: [initialPlaybackSource],
+              aspectRatio: tallVideo ? "16:9" : undefined,
+              controlBar: {
+                remainingTimeDisplay: false,
+                progressControl: {
+                  seekBar: false,
+                },
+              },
+            }}
+            seekOptions={{ forward: 10, backward: 5 }}
+            onReady={(player) => {
+              playerRef.current = player;
+              player.on("playing", () => setFocusedItem(undefined));
+              player.on("timeupdate", () => {
+                controller.updateProgress(player.currentTime() || 0);
+              });
+              player.on("ended", () =>
+                controller.fireClipChangeEvent("forward"),
+              );
+
+              if (onControllerReady) {
+                onControllerReady(controller);
+              }
+            }}
+            onDispose={() => {
+              playerRef.current = undefined;
+            }}
+          >
+            {config && focusedItem && (
+              <TimelineEventOverlay
+                timeline={focusedItem}
+                cameraConfig={config.cameras[camera]}
+              />
+            )}
+          </VideoPlayer>
+        </div>
+      )}
       <div
         className={`w-full ${hasPreview && isScrubbing ? "visible" : "hidden"}`}
       >
@@ -281,6 +285,10 @@ export default function DynamicVideoPlayer({
             player.pause();
             player.on("seeked", () => controller.finishedSeeking());
             player.on("loadeddata", () => controller.previewReady());
+
+            if (previewOnly && onControllerReady) {
+              onControllerReady(controller);
+            }
           }}
           onDispose={() => {
             previewRef.current = undefined;

web/src/pages/Events.tsx

@@ -5,8 +5,8 @@ import useOverlayState from "@/hooks/use-overlay-state";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { Preview } from "@/types/preview";
 import { ReviewFilter, ReviewSegment, ReviewSeverity } from "@/types/review";
-import DesktopRecordingView from "@/views/events/DesktopRecordingView";
 import EventView from "@/views/events/EventView";
+import RecordingView from "@/views/events/RecordingView";
 import axios from "axios";
 import { useCallback, useMemo, useState } from "react";
 import useSWR from "swr";
@@ -220,7 +220,7 @@ export default function Events() {
 
   if (selectedData) {
     return (
-      <DesktopRecordingView
+      <RecordingView
         reviewItems={selectedData.cameraSegments}
         selectedReview={selectedData.selected}
         relevantPreviews={selectedData.cameraPreviews}

web/src/views/events/EventView.tsx

@@ -13,7 +13,12 @@ import { useEventUtils } from "@/hooks/use-event-utils";
 import { useScrollLockout } from "@/hooks/use-mouse-listener";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { Preview } from "@/types/preview";
-import { ReviewFilter, ReviewSegment, ReviewSeverity } from "@/types/review";
+import {
+  ReviewFilter,
+  ReviewSegment,
+  ReviewSeverity,
+  ReviewSummary,
+} from "@/types/review";
 import { getChunkedTimeRange } from "@/utils/timelineUtil";
 import axios from "axios";
 import {
@@ -621,7 +626,7 @@ function MotionReview({
                 camera={camera.name}
                 timeRange={timeRangeSegments.ranges[selectedRangeIdx]}
                 cameraPreviews={relevantPreviews || []}
-                defaultMode="scrubbing"
+                previewOnly
                 onControllerReady={(controller) => {
                   videoPlayersRef.current[camera.name] = controller;
                   setPlayerReady(true);

web/src/views/events/RecordingView.tsx

@@ -10,16 +10,16 @@ import { useEffect, useMemo, useRef, useState } from "react";
 import { IoMdArrowRoundBack } from "react-icons/io";
 import { useNavigate } from "react-router-dom";
 
-type DesktopRecordingViewProps = {
+type RecordingViewProps = {
   selectedReview: ReviewSegment;
   reviewItems: ReviewSegment[];
   relevantPreviews?: Preview[];
 };
-export default function DesktopRecordingView({
+export default function RecordingView({
   selectedReview,
   reviewItems,
   relevantPreviews,
-}: DesktopRecordingViewProps) {
+}: RecordingViewProps) {
   const navigate = useNavigate();
   const contentRef = useRef<HTMLDivElement | null>(null);