From 2dc5a7f7675b279c49eb84d73d7b58ebfef2d990 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Fri, 23 Aug 2024 08:51:59 -0600
Subject: [PATCH] Fix delayed preview not showing (#13295)

---
 web/src/components/player/PreviewPlayer.tsx | 12 +++++-----
 web/src/hooks/use-camera-previews.ts        | 25 ++++++++++++++-------
 2 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/web/src/components/player/PreviewPlayer.tsx b/web/src/components/player/PreviewPlayer.tsx
index 8c0394abd..6ff5e1590 100644
--- a/web/src/components/player/PreviewPlayer.tsx
+++ b/web/src/components/player/PreviewPlayer.tsx
@@ -16,7 +16,10 @@ 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";
+import {
+  getPreviewForTimeRange,
+  usePreviewForTimeRange,
+} from "@/hooks/use-camera-previews";
 
 type PreviewPlayerProps = {
   className?: string;
@@ -243,12 +246,7 @@ function PreviewVideoPlayer({
       return;
     }
 
-    const preview = cameraPreviews.find(
-      (preview) =>
-        preview.camera == camera &&
-        Math.round(preview.start) >= timeRange.after &&
-        Math.floor(preview.end) <= timeRange.before,
-    );
+    const preview = getPreviewForTimeRange(cameraPreviews, camera, timeRange);
 
     if (preview != currentPreview) {
       controller.newPreviewLoaded = false;
diff --git a/web/src/hooks/use-camera-previews.ts b/web/src/hooks/use-camera-previews.ts
index 040b1081b..921fecd70 100644
--- a/web/src/hooks/use-camera-previews.ts
+++ b/web/src/hooks/use-camera-previews.ts
@@ -38,17 +38,26 @@ export function useCameraPreviews(
 // it is not falsely thrown out.
 const PREVIEW_END_BUFFER = 5; // seconds
 
+export function getPreviewForTimeRange(
+  allPreviews: Preview[],
+  camera: string,
+  timeRange: TimeRange,
+) {
+  return allPreviews.find(
+    (preview) =>
+      preview.camera == camera &&
+      Math.ceil(preview.start) >= timeRange.after &&
+      Math.floor(preview.end) <= timeRange.before + PREVIEW_END_BUFFER,
+  );
+}
+
 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]);
+  return useMemo(
+    () => getPreviewForTimeRange(allPreviews, camera, timeRange),
+    [allPreviews, camera, timeRange],
+  );
 }