Move websocket to top level events

web/src/pages/Events.tsx

@@ -1,3 +1,4 @@
+import { useFrigateEvents } from "@/api/ws";
 import useApiFilter from "@/hooks/use-api-filter";
 import useOverlayState from "@/hooks/use-overlay-state";
 import { ReviewFilter, ReviewSegment } from "@/types/review";
@@ -5,7 +6,7 @@ import DesktopEventView from "@/views/events/DesktopEventView";
 import DesktopRecordingView from "@/views/events/DesktopRecordingView";
 import MobileEventView from "@/views/events/MobileEventView";
 import axios from "axios";
-import { useCallback, useMemo } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { isMobile } from "react-device-detect";
 import useSWR from "swr";
 import useSWRInfinite from "swr/infinite";
@@ -183,6 +184,25 @@ export default function Events() {
     };
   }, [selectedReviewId, reviewPages]);
 
+  // review updates
+
+  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 (selectedData) {
     return (
       <DesktopRecordingView
@@ -199,8 +219,11 @@ export default function Events() {
           relevantPreviews={allPreviews}
           reachedEnd={isDone}
           isValidating={isValidating}
+          hasUpdate={hasUpdate}
+          setHasUpdate={setHasUpdate}
           loadNextPage={onLoadNextPage}
           markItemAsReviewed={markItemAsReviewed}
+          pullLatestData={updateSegments}
         />
       );
     }
@@ -213,6 +236,8 @@ export default function Events() {
         reachedEnd={isDone}
         isValidating={isValidating}
         filter={reviewFilter}
+        hasUpdate={hasUpdate}
+        setHasUpdate={setHasUpdate}
         loadNextPage={onLoadNextPage}
         markItemAsReviewed={markItemAsReviewed}
         onSelectReview={setSelectedReviewId}

web/src/views/events/DesktopEventView.tsx

@@ -1,4 +1,3 @@
-import { useFrigateEvents } from "@/api/ws";
 import ReviewFilterGroup from "@/components/filter/ReviewFilterGroup";
 import PreviewThumbnailPlayer from "@/components/player/PreviewThumbnailPlayer";
 import EventReviewTimeline from "@/components/timeline/EventReviewTimeline";
@@ -19,6 +18,8 @@ type DesktopEventViewProps = {
   reachedEnd: boolean;
   isValidating: boolean;
   filter?: ReviewFilter;
+  hasUpdate: boolean;
+  setHasUpdate: (hasUpdated: boolean) => void;
   loadNextPage: () => void;
   markItemAsReviewed: (reviewId: string) => void;
   onSelectReview: (reviewId: string) => void;
@@ -32,6 +33,8 @@ export default function DesktopEventView({
   reachedEnd,
   isValidating,
   filter,
+  hasUpdate,
+  setHasUpdate,
   loadNextPage,
   markItemAsReviewed,
   onSelectReview,
@@ -177,25 +180,6 @@ 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 />;
   }
@@ -305,7 +289,7 @@ export default function DesktopEventView({
                         review={value}
                         relevantPreview={relevantPreview}
                         setReviewed={markItemAsReviewed}
-                        onClick={onSelectReview(value.id}
+                        onClick={onSelectReview}
                       />
                     </div>
                     {lastRow && !reachedEnd && <ActivityIndicator />}

web/src/views/events/MobileEventView.tsx

@@ -1,9 +1,11 @@
 import PreviewThumbnailPlayer from "@/components/player/PreviewThumbnailPlayer";
 import ActivityIndicator from "@/components/ui/activity-indicator";
+import { Button } from "@/components/ui/button";
 import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { ReviewSegment, ReviewSeverity } from "@/types/review";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { LuRefreshCcw } from "react-icons/lu";
 import { MdCircle } from "react-icons/md";
 import useSWR from "swr";
 
@@ -12,16 +14,22 @@ type MobileEventViewProps = {
   relevantPreviews?: Preview[];
   reachedEnd: boolean;
   isValidating: boolean;
+  hasUpdate: boolean;
+  setHasUpdate: (hasUpdated: boolean) => void;
   loadNextPage: () => void;
   markItemAsReviewed: (reviewId: string) => void;
+  pullLatestData: () => void;
 };
 export default function MobileEventView({
   reviewPages,
   relevantPreviews,
   reachedEnd,
   isValidating,
+  hasUpdate,
+  setHasUpdate,
   loadNextPage,
   markItemAsReviewed,
+  pullLatestData,
 }: MobileEventViewProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
   const [severity, setSeverity] = useState<ReviewSeverity>("alert");
@@ -198,6 +206,34 @@ export default function MobileEventView({
         </ToggleGroupItem>
       </ToggleGroup>
 
+      {hasUpdate && (
+        <div className="absolute w-full z-30">
+          <div className="flex justify-center items-center">
+            <Button
+              className={`${
+                hasUpdate
+                  ? "animate-in slide-in-from-top duration-500"
+                  : "invisible"
+              }  text-center mt-5 mx-auto bg-gray-400 text-white`}
+              variant="secondary"
+              onClick={() => {
+                setHasUpdate(false);
+                pullLatestData();
+                if (contentRef.current) {
+                  contentRef.current.scrollTo({
+                    top: 0,
+                    behavior: "smooth",
+                  });
+                }
+              }}
+            >
+              <LuRefreshCcw className="w-4 h-4 mr-2" />
+              New Items To Review
+            </Button>
+          </div>
+        </div>
+      )}
+
       <div
         ref={contentRef}
         className="w-full h-full grid grid-cols-1 sm:grid-cols-2 mt-2 gap-2 overflow-y-auto"