Show refresh button

web/src/pages/Events.tsx

@@ -181,6 +181,7 @@ export default function Events() {
       return (
         <MobileEventView
           reviewPages={reviewPages}
+          relevantPreviews={allPreviews}
           reachedEnd={isDone}
           isValidating={isValidating}
           loadNextPage={() => setSize(size + 1)}
@@ -199,6 +200,7 @@ export default function Events() {
         loadNextPage={() => setSize(size + 1)}
         markItemAsReviewed={markItemAsReviewed}
         onSelectReview={setSelectedReviewId}
+        pullLatestData={updateSegments}
       />
     );
   }

web/src/views/events/DesktopEventView.tsx

@@ -1,3 +1,5 @@
+import { useFrigateEvents } from "@/api/ws";
+import Chip from "@/components/Chip";
 import PreviewThumbnailPlayer from "@/components/player/PreviewThumbnailPlayer";
 import EventReviewTimeline from "@/components/timeline/EventReviewTimeline";
 import ActivityIndicator from "@/components/ui/activity-indicator";
@@ -13,7 +15,7 @@ import { FrigateConfig } from "@/types/frigateConfig";
 import { ReviewSegment, ReviewSeverity } from "@/types/review";
 import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { LuCalendar, LuFilter, LuVideo } from "react-icons/lu";
+import { LuCalendar, LuFilter, LuRefreshCcw, LuVideo } from "react-icons/lu";
 import { MdCircle } from "react-icons/md";
 import useSWR from "swr";
 
@@ -26,6 +28,7 @@ type DesktopEventViewProps = {
   loadNextPage: () => void;
   markItemAsReviewed: (reviewId: string) => void;
   onSelectReview: (reviewId: string) => void;
+  pullLatestData: () => void;
 };
 export default function DesktopEventView({
   reviewPages,
@@ -36,6 +39,7 @@ export default function DesktopEventView({
   loadNextPage,
   markItemAsReviewed,
   onSelectReview,
+  pullLatestData,
 }: DesktopEventViewProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
   const [severity, setSeverity] = useState<ReviewSeverity>("alert");
@@ -168,6 +172,25 @@ export default function DesktopEventView({
     return data;
   }, [minimap]);
 
+  // new data alert
+
+  const { payload: eventUpdate } = useFrigateEvents();
+  const [hasUpdate, setHasUpdate] = useState(false);
+  useEffect(() => {
+    if (!eventUpdate) {
+      return;
+    }
+
+    // if event is ended and was saved, update events list
+    if (
+      eventUpdate.type == "end" &&
+      (eventUpdate.after.has_clip || eventUpdate.after.has_snapshot)
+    ) {
+      setHasUpdate(true);
+      return;
+    }
+  }, [eventUpdate]);
+
   if (!config) {
     return <ActivityIndicator />;
   }
@@ -225,6 +248,20 @@ export default function DesktopEventView({
         </div>
       </div>
 
+      {hasUpdate && (
+        <Button
+          className="absolute top-14 left-[50%] -translate-x-[50%] z-30 bg-gray-400 text-white"
+          variant="secondary"
+          onClick={() => {
+            setHasUpdate(false);
+            pullLatestData();
+          }}
+        >
+          <LuRefreshCcw className="w-4 h-4 mr-2" />
+          New Items To Review
+        </Button>
+      )}
+
       <div
         ref={contentRef}
         className="absolute left-0 top-12 bottom-0 right-28 flex flex-wrap content-start gap-2 overflow-y-auto no-scrollbar"

web/src/views/events/MobileEventView.tsx

@@ -3,13 +3,13 @@ import ActivityIndicator from "@/components/ui/activity-indicator";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { ReviewSegment, ReviewSeverity } from "@/types/review";
-import axios from "axios";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { MdCircle } from "react-icons/md";
 import useSWR from "swr";
 
 type MobileEventViewProps = {
   reviewPages?: ReviewSegment[][];
+  relevantPreviews?: Preview[];
   reachedEnd: boolean;
   isValidating: boolean;
   loadNextPage: () => void;
@@ -17,6 +17,7 @@ type MobileEventViewProps = {
 };
 export default function MobileEventView({
   reviewPages,
+  relevantPreviews,
   reachedEnd,
   isValidating,
   loadNextPage,
@@ -153,34 +154,6 @@ export default function MobileEventView({
     return data;
   }, [minimap]);
 
-  // preview videos
-
-  const previewTimes = useMemo(() => {
-    if (
-      !reviewPages ||
-      reviewPages.length == 0 ||
-      reviewPages.at(-1)!!.length == 0
-    ) {
-      return undefined;
-    }
-
-    const startDate = new Date();
-    startDate.setMinutes(0, 0, 0);
-
-    const endDate = new Date(reviewPages.at(-1)!!.at(-1)!!.end_time);
-    endDate.setHours(0, 0, 0, 0);
-    return {
-      start: startDate.getTime() / 1000,
-      end: endDate.getTime() / 1000,
-    };
-  }, [reviewPages]);
-  const { data: allPreviews } = useSWR<Preview[]>(
-    previewTimes
-      ? `preview/all/start/${previewTimes.start}/end/${previewTimes.end}`
-      : null,
-    { revalidateOnFocus: false }
-  );
-
   if (!config) {
     return <ActivityIndicator />;
   }
@@ -232,7 +205,7 @@ export default function MobileEventView({
         {currentItems ? (
           currentItems.map((value, segIdx) => {
             const lastRow = segIdx == reviewItems[severity].length - 1;
-            const relevantPreview = Object.values(allPreviews || []).find(
+            const relevantPreview = Object.values(relevantPreviews || []).find(
               (preview) =>
                 preview.camera == value.camera &&
                 preview.start < value.start_time &&