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,6 +219,7 @@ export default function DynamicVideoPlayer({
 
   return (
     <div className={className}>
+      {!previewOnly && (
         <div
           className={`w-full relative ${
             hasPreview && isScrubbing ? "hidden" : "visible"
@@ -244,7 +245,9 @@ export default function DynamicVideoPlayer({
               player.on("timeupdate", () => {
                 controller.updateProgress(player.currentTime() || 0);
               });
-            player.on("ended", () => controller.fireClipChangeEvent("forward"));
+              player.on("ended", () =>
+                controller.fireClipChangeEvent("forward"),
+              );
 
               if (onControllerReady) {
                 onControllerReady(controller);
@@ -262,6 +265,7 @@ export default function DynamicVideoPlayer({
             )}
           </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);