From 65ceadda2bcf73ec03a8d57828a4055da1f0b209 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Mon, 19 Aug 2024 10:45:55 -0600
Subject: [PATCH] Preview fixes (#13193)

* Handle case where preview was saved late

* fix timing
---
 web/src/components/player/PreviewPlayer.tsx | 15 ++++++-------
 web/src/hooks/use-camera-previews.ts        | 24 +++++++++++++++++++--
 2 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/web/src/components/player/PreviewPlayer.tsx b/web/src/components/player/PreviewPlayer.tsx
index 3b314f9a6..8c0394abd 100644
--- a/web/src/components/player/PreviewPlayer.tsx
+++ b/web/src/components/player/PreviewPlayer.tsx
@@ -16,6 +16,7 @@ import { isAndroid, isChrome, isMobile } from "react-device-detect";
 import { TimeRange } from "@/types/timeline";
 import { Skeleton } from "../ui/skeleton";
 import { cn } from "@/lib/utils";
+import { usePreviewForTimeRange } from "@/hooks/use-camera-previews";
 
 type PreviewPlayerProps = {
   className?: string;
@@ -39,15 +40,11 @@ export default function PreviewPlayer({
   onClick,
 }: PreviewPlayerProps) {
   const [currentHourFrame, setCurrentHourFrame] = useState<string>();
-
-  const currentPreview = useMemo(() => {
-    return cameraPreviews.find(
-      (preview) =>
-        preview.camera == camera &&
-        Math.round(preview.start) >= timeRange.after &&
-        Math.floor(preview.end) <= timeRange.before,
-    );
-  }, [cameraPreviews, camera, timeRange]);
+  const currentPreview = usePreviewForTimeRange(
+    cameraPreviews,
+    camera,
+    timeRange,
+  );
 
   if (currentPreview) {
     return (
diff --git a/web/src/hooks/use-camera-previews.ts b/web/src/hooks/use-camera-previews.ts
index 3bdbd7efb..040b1081b 100644
--- a/web/src/hooks/use-camera-previews.ts
+++ b/web/src/hooks/use-camera-previews.ts
@@ -1,6 +1,6 @@
 import { Preview } from "@/types/preview";
 import { TimeRange } from "@/types/timeline";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import useSWR from "swr";
 
 type OptionalCameraPreviewProps = {
@@ -8,7 +8,6 @@ type OptionalCameraPreviewProps = {
   autoRefresh?: boolean;
   fetchPreviews?: boolean;
 };
-
 export function useCameraPreviews(
   initialTimeRange: TimeRange,
   {
@@ -32,3 +31,24 @@ export function useCameraPreviews(
 
   return allPreviews;
 }
+
+// we need to add a buffer of 5 seconds to the end preview times
+// this ensures that if preview generation is running slowly
+// and the previews are generated 1-5 seconds late
+// it is not falsely thrown out.
+const PREVIEW_END_BUFFER = 5; // seconds
+
+export function usePreviewForTimeRange(
+  allPreviews: Preview[],
+  camera: string,
+  timeRange: TimeRange,
+) {
+  return useMemo(() => {
+    return allPreviews.find(
+      (preview) =>
+        preview.camera == camera &&
+        Math.ceil(preview.start) >= timeRange.after &&
+        Math.floor(preview.end) <= timeRange.before + PREVIEW_END_BUFFER,
+    );
+  }, [allPreviews, camera, timeRange]);
+}