From c9246bd4ab3653af7904215a5f24d2428d0f7ca0 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Mon, 29 Apr 2024 10:12:57 -0600
Subject: [PATCH] Open to recordings with pre-buffer (#11143)

* Open to recordings with pre-buffer

* Reduce buffer

* Use variable for preview FPS
---
 web/src/components/player/PreviewThumbnailPlayer.tsx | 6 +++---
 web/src/types/preview.ts                             | 5 +++++
 web/src/types/review.ts                              | 2 ++
 web/src/views/events/EventView.tsx                   | 3 ++-
 4 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/web/src/components/player/PreviewThumbnailPlayer.tsx b/web/src/components/player/PreviewThumbnailPlayer.tsx
index 0767933b2..c36a2e129 100644
--- a/web/src/components/player/PreviewThumbnailPlayer.tsx
+++ b/web/src/components/player/PreviewThumbnailPlayer.tsx
@@ -23,6 +23,7 @@ import useContextMenu from "@/hooks/use-contextmenu";
 import ActivityIndicator from "../indicators/activity-indicator";
 import { TimeRange } from "@/types/timeline";
 import { NoThumbSlider } from "../ui/slider";
+import { PREVIEW_FPS, PREVIEW_PADDING } from "@/types/preview";
 
 type PreviewPlayerProps = {
   review: ReviewSegment;
@@ -337,7 +338,6 @@ function PreviewContent({
   }
 }
 
-const PREVIEW_PADDING = 16;
 type VideoPreviewProps = {
   relevantPreview: Preview;
   startTime: number;
@@ -398,7 +398,7 @@ export function VideoPreview({
       setManualPlayback(true);
     } else {
       playerRef.current.currentTime = playerStartTime;
-      playerRef.current.playbackRate = 8;
+      playerRef.current.playbackRate = PREVIEW_FPS;
     }
 
     // we know that these deps are correct
@@ -470,7 +470,7 @@ export function VideoPreview({
         playerRef.current.currentTime = playerStartTime + counter;
         counter += 1;
       }
-    }, 125);
+    }, 1000 / PREVIEW_FPS);
     return () => clearInterval(intervalId);
 
     // we know that these deps are correct
diff --git a/web/src/types/preview.ts b/web/src/types/preview.ts
index e9bd12185..a9f958f7f 100644
--- a/web/src/types/preview.ts
+++ b/web/src/types/preview.ts
@@ -1,3 +1,5 @@
+import { REVIEW_PADDING } from "./review";
+
 export type Preview = {
   camera: string;
   src: string;
@@ -5,3 +7,6 @@ export type Preview = {
   start: number;
   end: number;
 };
+
+export const PREVIEW_FPS = 8;
+export const PREVIEW_PADDING = REVIEW_PADDING * PREVIEW_FPS;
diff --git a/web/src/types/review.ts b/web/src/types/review.ts
index b8e5254d9..bbefaf5d3 100644
--- a/web/src/types/review.ts
+++ b/web/src/types/review.ts
@@ -48,3 +48,5 @@ export type MotionData = {
   audio?: number;
   camera: string;
 };
+
+export const REVIEW_PADDING = 2;
diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx
index be6e2d8fe..caeaef5b4 100644
--- a/web/src/views/events/EventView.tsx
+++ b/web/src/views/events/EventView.tsx
@@ -12,6 +12,7 @@ import { FrigateConfig } from "@/types/frigateConfig";
 import { Preview } from "@/types/preview";
 import {
   MotionData,
+  REVIEW_PADDING,
   ReviewFilter,
   ReviewSegment,
   ReviewSeverity,
@@ -175,7 +176,7 @@ export default function EventView({
       } else {
         onOpenRecording({
           camera: review.camera,
-          startTime: review.start_time,
+          startTime: review.start_time - REVIEW_PADDING,
           severity: review.severity,
         });