Motion review

web/src/components/player/DynamicVideoPlayer.tsx

@@ -18,6 +18,8 @@ import { Recording } from "@/types/record";
 import { Preview } from "@/types/preview";
 import { DynamicPlayback } from "@/types/playback";
 
+type PlayerMode = "playback" | "scrubbing";
+
 /**
  * Dynamically switches between video playback and scrubbing preview player.
  */
@@ -26,13 +28,15 @@ type DynamicVideoPlayerProps = {
   camera: string;
   timeRange: { start: number; end: number };
   cameraPreviews: Preview[];
+  previewOnly?: boolean;
   onControllerReady?: (controller: DynamicVideoController) => void;
 };
 export default function DynamicVideoPlayer({
   className,
   camera,
   timeRange,
   cameraPreviews,
+  previewOnly = false,
   onControllerReady,
 }: DynamicVideoPlayerProps) {
   const apiHost = useApiHost();
@@ -60,7 +64,7 @@ export default function DynamicVideoPlayer({
 
   const playerRef = useRef<Player | undefined>(undefined);
   const previewRef = useRef<Player | undefined>(undefined);
-  const [isScrubbing, setIsScrubbing] = useState(false);
+  const [isScrubbing, setIsScrubbing] = useState(previewOnly);
   const [hasPreview, setHasPreview] = useState(false);
   const [focusedItem, setFocusedItem] = useState<Timeline | undefined>(
     undefined,
@@ -74,10 +78,11 @@ export default function DynamicVideoPlayer({
       playerRef,
       previewRef,
       (config.cameras[camera]?.detect?.annotation_offset || 0) / 1000,
+      previewOnly ? "scrubbing" : "playback",
       setIsScrubbing,
       setFocusedItem,
     );
-  }, [camera, config]);
+  }, [camera, config, previewOnly]);
 
   // keyboard control
 
@@ -144,6 +149,7 @@ export default function DynamicVideoPlayer({
   const initialPreviewSource = useMemo(() => {
     const preview = cameraPreviews.find(
       (preview) =>
+        preview.camera == camera &&
         Math.round(preview.start) >= timeRange.start &&
         Math.floor(preview.end) <= timeRange.end,
     );
@@ -172,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 || recordings.length == 0) {
+    if (!controller || (!previewOnly && !recordings)) {
       return;
     }
 
@@ -191,13 +197,14 @@ export default function DynamicVideoPlayer({
 
     const preview = cameraPreviews.find(
       (preview) =>
+        preview.camera == camera &&
         Math.round(preview.start) >= timeRange.start &&
         Math.floor(preview.end) <= timeRange.end,
     );
     setHasPreview(preview != undefined);
 
     controller.newPlayback({
-      recordings,
+      recordings: recordings ?? [],
       playbackUri,
       preview,
     });
@@ -212,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"}`}
       >
@@ -274,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;
@@ -290,7 +305,7 @@ export class DynamicVideoController {
   private previewRef: MutableRefObject<Player | undefined>;
   private setScrubbing: (isScrubbing: boolean) => void;
   private setFocusedItem: (timeline: Timeline) => void;
-  private playerMode: "playback" | "scrubbing" = "playback";
+  private playerMode: PlayerMode = "playback";
 
   // playback
   private recordings: Recording[] = [];
@@ -299,6 +314,7 @@ export class DynamicVideoController {
     undefined;
   private annotationOffset: number;
   private timeToStart: number | undefined = undefined;
+  private clipChangeLockout: boolean = true;
 
   // preview
   private preview: Preview | undefined = undefined;
@@ -310,12 +326,14 @@ export class DynamicVideoController {
     playerRef: MutableRefObject<Player | undefined>,
     previewRef: MutableRefObject<Player | undefined>,
     annotationOffset: number,
+    defaultMode: PlayerMode,
     setScrubbing: (isScrubbing: boolean) => void,
     setFocusedItem: (timeline: Timeline) => void,
   ) {
     this.playerRef = playerRef;
     this.previewRef = previewRef;
     this.annotationOffset = annotationOffset;
+    this.playerMode = defaultMode;
     this.setScrubbing = setScrubbing;
     this.setFocusedItem = setFocusedItem;
   }
@@ -427,17 +445,39 @@ export class DynamicVideoController {
     }
 
     if (time > this.preview.end) {
+      if (this.clipChangeLockout) {
+        return;
+      }
+
       if (this.playerMode == "scrubbing") {
         this.playerMode = "playback";
         this.setScrubbing(false);
         this.timeToSeek = undefined;
         this.seeking = false;
         this.readyToScrub = false;
+        this.clipChangeLockout = true;
         this.fireClipChangeEvent("forward");
       }
       return;
     }
 
+    if (time < this.preview.start) {
+      if (this.clipChangeLockout) {
+        return;
+      }
+
+      if (this.playerMode == "scrubbing") {
+        this.playerMode = "playback";
+        this.setScrubbing(false);
+        this.timeToSeek = undefined;
+        this.seeking = false;
+        this.readyToScrub = false;
+        this.clipChangeLockout = true;
+        this.fireClipChangeEvent("backward");
+      }
+      return;
+    }
+
     if (this.playerMode != "scrubbing") {
       this.playerMode = "scrubbing";
       this.playerRef.current?.pause();
@@ -459,6 +499,8 @@ export class DynamicVideoController {
       return;
     }
 
+    this.clipChangeLockout = false;
+
     if (
       this.timeToSeek &&
       this.timeToSeek != this.previewRef.current?.currentTime()

web/src/components/player/VideoPlayer.tsx

@@ -88,7 +88,7 @@ export default function VideoPlayer({
 
   return (
     <div data-vjs-player>
-      <div ref={videoRef} />
+      <div className="rounded-2xl overflow-hidden" ref={videoRef} />
       {children}
     </div>
   );

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/utils/timelineUtil.tsx

@@ -120,7 +120,7 @@ export function getTimelineItemDescription(timelineItem: Timeline) {
   }
 }
 
-export function getChunkedTimeRange(timestamp: number) {
+export function getChunkedTimeDay(timestamp: number) {
   const endOfThisHour = new Date();
   endOfThisHour.setHours(endOfThisHour.getHours() + 1, 0, 0, 0);
   const data: { start: number; end: number }[] = [];
@@ -147,3 +147,33 @@ export function getChunkedTimeRange(timestamp: number) {
 
   return { start: startTimestamp, end, ranges: data };
 }
+
+export function getChunkedTimeRange(
+  startTimestamp: number,
+  endTimestamp: number,
+) {
+  const endOfThisHour = new Date();
+  endOfThisHour.setHours(endOfThisHour.getHours() + 1, 0, 0, 0);
+  const data: { start: number; end: number }[] = [];
+  const startDay = new Date(startTimestamp * 1000);
+  startDay.setMinutes(0, 0, 0);
+  let start = startDay.getTime() / 1000;
+  let end = 0;
+
+  while (end < endTimestamp) {
+    startDay.setHours(startDay.getHours() + 1);
+
+    if (startDay > endOfThisHour || startDay.getTime() / 1000 > endTimestamp) {
+      break;
+    }
+
+    end = endOfHourOrCurrentTime(startDay.getTime() / 1000);
+    data.push({
+      start,
+      end,
+    });
+    start = startDay.getTime() / 1000;
+  }
+
+  return { start: startTimestamp, end: endTimestamp, ranges: data };
+}