From cc3bbcc303ec7974d8e96ee3085114ef42563566 Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Tue, 21 May 2024 18:30:29 +0530
Subject: [PATCH] Improve preview loading (#11469)

* Improve preview loading

* Ensure it works when selecting dates
---
 web/src/hooks/use-camera-previews.ts | 25 +------------------------
 web/src/pages/Events.tsx             | 12 ++++--------
 2 files changed, 5 insertions(+), 32 deletions(-)

diff --git a/web/src/hooks/use-camera-previews.ts b/web/src/hooks/use-camera-previews.ts
index db2ff33f8..3bdbd7efb 100644
--- a/web/src/hooks/use-camera-previews.ts
+++ b/web/src/hooks/use-camera-previews.ts
@@ -27,31 +27,8 @@ export function useCameraPreviews(
     fetchPreviews
       ? `preview/${camera}/start/${Math.round(timeRange.after)}/end/${Math.round(timeRange.before)}`
       : null,
-    { revalidateOnFocus: false, revalidateOnReconnect: false },
+    { revalidateOnFocus: autoRefresh, revalidateOnReconnect: autoRefresh },
   );
 
-  // Set a timeout to update previews on the hour
-  useEffect(() => {
-    if (!autoRefresh || !fetchPreviews || !allPreviews) {
-      return;
-    }
-
-    const callback = () => {
-      const nextPreviewStart = new Date(
-        allPreviews[allPreviews.length - 1].end * 1000,
-      );
-      nextPreviewStart.setHours(nextPreviewStart.getHours() + 1);
-
-      if (Date.now() > nextPreviewStart.getTime()) {
-        setTimeRange({ after: timeRange.after, before: Date.now() / 1000 });
-      }
-    };
-    document.addEventListener("focusin", callback);
-
-    return () => {
-      document.removeEventListener("focusin", callback);
-    };
-  }, [allPreviews, autoRefresh, fetchPreviews, timeRange]);
-
   return allPreviews;
 }
diff --git a/web/src/pages/Events.tsx b/web/src/pages/Events.tsx
index 2abf9382b..e54482cf1 100644
--- a/web/src/pages/Events.tsx
+++ b/web/src/pages/Events.tsx
@@ -163,24 +163,20 @@ export default function Events() {
 
   // preview videos
   const previewTimes = useMemo(() => {
-    if (!reviews || reviews.length == 0) {
-      return undefined;
-    }
-
     // offset by timezone minutes
     const timestampOffset = getTimestampOffset(Date.now() / 1000);
 
-    const startDate = new Date();
+    const startDate = new Date(selectedTimeRange.after * 1000);
     startDate.setMinutes(0, 0, 0);
 
-    const endDate = new Date(reviews.at(-1)?.end_time || 0);
-    endDate.setHours(0, 0, 0, 0);
+    const endDate = new Date(selectedTimeRange.before * 1000);
+    endDate.setHours(endDate.getHours() + 1, 0, 0, 0);
 
     return {
       after: startDate.getTime() / 1000 + timestampOffset,
       before: endDate.getTime() / 1000 + timestampOffset,
     };
-  }, [reviews]);
+  }, [selectedTimeRange]);
 
   const allPreviews = useCameraPreviews(
     previewTimes ?? { after: 0, before: 0 },