Preview fixes (#13193)

* Handle case where preview was saved late

* fix timing

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 (

web/src/hooks/use-camera-previews.ts

@@ -1,14 +1,13 @@
 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 = {
   camera?: string;
   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]);
+}