Improve preview loading (#11469)

* Improve preview loading * Ensure it works when selecting dates
blakeblackshear · May 21, 2024 · cc3bbcc · cc3bbcc
1 parent 2a86969
commit cc3bbcc
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 32 deletions.
diff --git 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
@@ -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 },