Reduce redundant code and don't pull new items when marking as reviewed

web/src/components/player/PreviewThumbnailPlayer.tsx

@@ -23,6 +23,7 @@ type PreviewPlayerProps = {
   relevantPreview?: Preview;
   autoPlayback?: boolean;
   setReviewed?: () => void;
+  onClick?: () => void;
 };
 
 type Preview = {
@@ -38,6 +39,7 @@ export default function PreviewThumbnailPlayer({
   relevantPreview,
   autoPlayback = false,
   setReviewed,
+  onClick,
 }: PreviewPlayerProps) {
   const apiHost = useApiHost();
   const { data: config } = useSWR<FrigateConfig>("config");
@@ -109,6 +111,7 @@ export default function PreviewThumbnailPlayer({
       className="relative w-full h-full cursor-pointer"
       onMouseEnter={isMobile ? undefined : () => onPlayback(true)}
       onMouseLeave={isMobile ? undefined : () => onPlayback(false)}
+      onClick={onClick}
     >
       {playingBack ? (
         <PreviewContent
@@ -247,6 +250,8 @@ function PreviewContent({
           }
 
           player.currentTime(playerStartTime);
+
+          let lastPercent = 0;
           player.on("timeupdate", () => {
             if (!setProgress) {
               return;
@@ -262,11 +267,14 @@ function PreviewContent({
             if (
               setReviewed &&
               !review.has_been_reviewed &&
+              lastPercent < 50 &&
               playerPercent > 50
             ) {
               setReviewed();
             }
 
+            lastPercent = playerPercent;
+
             if (playerPercent > 100) {
               playerRef.current?.pause();
               setManualPlayback(false);

web/src/pages/Events.tsx

@@ -1,11 +1,140 @@
+import useOverlayState from "@/hooks/use-overlay-state";
+import { ReviewSegment } from "@/types/review";
 import DesktopEventView from "@/views/events/DesktopEventView";
+import DesktopRecordingView from "@/views/events/DesktopRecordingView";
 import MobileEventView from "@/views/events/MobileEventView";
-import { isMobile } from 'react-device-detect';
+import axios from "axios";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { isMobile } from "react-device-detect";
+import useSWRInfinite from "swr/infinite";
+
+const API_LIMIT = 250;
 
 export default function Events() {
-  if (isMobile) {
+  // recordings viewer
-    return <MobileEventView />;
+  const [selectedReview, setSelectedReview] = useOverlayState("review");
+
+  // review paging
+
+  const [after, setAfter] = useState(getHoursAgo(24));
+  useEffect(() => {
+    const intervalId: NodeJS.Timeout = setInterval(() => {
+      setAfter(getHoursAgo(24));
+    }, 300000);
+    return () => clearInterval(intervalId);
+  }, [300000]);
+
+  const reviewSegmentFetcher = useCallback((key: any) => {
+    const [path, params] = Array.isArray(key) ? key : [key, undefined];
+    return axios.get(path, { params }).then((res) => res.data);
+  }, []);
+
+  const reviewSearchParams = {};
+  const getKey = useCallback(
+    (index: number, prevData: ReviewSegment[]) => {
+      if (index > 0) {
+        const lastDate = prevData[prevData.length - 1].start_time;
+        const pagedParams = reviewSearchParams
+          ? { before: lastDate, after: after, limit: API_LIMIT }
+          : {
+              ...reviewSearchParams,
+              before: lastDate,
+              after: after,
+              limit: API_LIMIT,
+            };
+        return ["review", pagedParams];
       }
 
-  return <DesktopEventView />;
+      const params = reviewSearchParams
+        ? { limit: API_LIMIT, after: after }
+        : { ...reviewSearchParams, limit: API_LIMIT, after: after };
+      return ["review", params];
+    },
+    [reviewSearchParams]
+  );
+
+  const {
+    data: reviewPages,
+    mutate: updateSegments,
+    size,
+    setSize,
+    isValidating,
+  } = useSWRInfinite<ReviewSegment[]>(getKey, reviewSegmentFetcher);
+
+  const isDone = useMemo(
+    () => (reviewPages?.at(-1)?.length ?? 0) < API_LIMIT,
+    [reviewPages]
+  );
+
+  // review status
+
+  const markItemAsReviewed = useCallback(
+    async (reviewId: string) => {
+      const resp = await axios.post(`review/${reviewId}/viewed`);
+
+      if (resp.status == 200) {
+        updateSegments(
+          (data: ReviewSegment[][] | undefined) => {
+            if (!data) {
+              return data;
+            }
+
+            const newData: ReviewSegment[][] = [];
+
+            data.forEach((page) => {
+              const reviewIndex = page.findIndex((item) => item.id == reviewId);
+
+              if (reviewIndex == -1) {
+                newData.push([...page]);
+              } else {
+                newData.push([
+                  ...page.slice(0, reviewIndex),
+                  { ...page[reviewIndex], has_been_reviewed: true },
+                  ...page.slice(reviewIndex + 1),
+                ]);
+              }
+            });
+
+            return newData;
+          },
+          { revalidate: false }
+        );
+      }
+    },
+    [updateSegments]
+  );
+
+  if (selectedReview) {
+    return <DesktopRecordingView />;
+  } else {
+    if (isMobile) {
+      return (
+        <MobileEventView
+          reviewPages={reviewPages}
+          reachedEnd={isDone}
+          isValidating={isValidating}
+          loadNextPage={() => setSize(size + 1)}
+          markItemAsReviewed={markItemAsReviewed}
+        />
+      );
+    }
+
+    return (
+      <DesktopEventView
+        reviewPages={reviewPages}
+        timeRange={[Date.now() / 1000, after]}
+        reachedEnd={isDone}
+        isValidating={isValidating}
+        loadNextPage={() => setSize(size + 1)}
+        markItemAsReviewed={markItemAsReviewed}
+        onSelectReview={setSelectedReview}
+      />
+    );
+  }
+}
+
+function getHoursAgo(hours: number): number {
+  const now = new Date();
+  now.setHours(now.getHours() - hours);
+  return now.getTime() / 1000;
 }

web/src/views/events/DesktopEventView.tsx

@@ -12,73 +12,35 @@ import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { ReviewSegment, ReviewSeverity } from "@/types/review";
 import { formatUnixTimestampToDateTime } from "@/utils/dateUtil";
-import axios from "axios";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { LuCalendar, LuFilter, LuVideo } from "react-icons/lu";
 import { MdCircle } from "react-icons/md";
 import useSWR from "swr";
-import useSWRInfinite from "swr/infinite";
 
-const API_LIMIT = 250;
+type DesktopEventViewProps = {
-
+  reviewPages?: ReviewSegment[][];
-export default function DesktopEventView() {
+  timeRange: [number, number];
+  reachedEnd: boolean;
+  isValidating: boolean;
+  loadNextPage: () => void;
+  markItemAsReviewed: (reviewId: string) => void;
+  onSelectReview: (reviewId: string) => void;
+};
+export default function DesktopEventView({
+  reviewPages,
+  timeRange,
+  reachedEnd,
+  isValidating,
+  loadNextPage,
+  markItemAsReviewed,
+  onSelectReview,
+}: DesktopEventViewProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
   const [severity, setSeverity] = useState<ReviewSeverity>("alert");
   const contentRef = useRef<HTMLDivElement | null>(null);
 
   // review paging
 
-  const [after, setAfter] = useState(0);
-  useEffect(() => {
-    const now = new Date();
-    now.setHours(now.getHours() - 24);
-    setAfter(now.getTime() / 1000);
-
-    const intervalId: NodeJS.Timeout = setInterval(() => {
-      const now = new Date();
-      now.setHours(now.getHours() - 24);
-      setAfter(now.getTime() / 1000);
-    }, 60000);
-    return () => clearInterval(intervalId);
-  }, [60000]);
-
-  const reviewSearchParams = {};
-  const reviewSegmentFetcher = useCallback((key: any) => {
-    const [path, params] = Array.isArray(key) ? key : [key, undefined];
-    return axios.get(path, { params }).then((res) => res.data);
-  }, []);
-
-  const getKey = useCallback(
-    (index: number, prevData: ReviewSegment[]) => {
-      if (index > 0) {
-        const lastDate = prevData[prevData.length - 1].start_time;
-        const pagedParams = reviewSearchParams
-          ? { before: lastDate, after: after, limit: API_LIMIT }
-          : {
-              ...reviewSearchParams,
-              before: lastDate,
-              after: after,
-              limit: API_LIMIT,
-            };
-        return ["review", pagedParams];
-      }
-
-      const params = reviewSearchParams
-        ? { limit: API_LIMIT, after: after }
-        : { ...reviewSearchParams, limit: API_LIMIT, after: after };
-      return ["review", params];
-    },
-    [reviewSearchParams]
-  );
-
-  const {
-    data: reviewPages,
-    mutate: updateSegments,
-    size,
-    setSize,
-    isValidating,
-  } = useSWRInfinite<ReviewSegment[]>(getKey, reviewSegmentFetcher);
-
   const reviewItems = useMemo(() => {
     const all: ReviewSegment[] = [];
     const alerts: ReviewSegment[] = [];
@@ -111,11 +73,6 @@ export default function DesktopEventView() {
     };
   }, [reviewPages]);
 
-  const isDone = useMemo(
-    () => (reviewPages?.at(-1)?.length ?? 0) < API_LIMIT,
-    [reviewPages]
-  );
-
   const currentItems = useMemo(() => {
     const current = reviewItems[severity];
 
@@ -135,8 +92,8 @@ export default function DesktopEventView() {
       if (pagingObserver.current) pagingObserver.current.disconnect();
       try {
         pagingObserver.current = new IntersectionObserver((entries) => {
-          if (entries[0].isIntersecting && !isDone) {
+          if (entries[0].isIntersecting && !reachedEnd) {
-            setSize(size + 1);
+            loadNextPage();
           }
         });
         if (node) pagingObserver.current.observe(node);
@@ -144,7 +101,7 @@ export default function DesktopEventView() {
         // no op
       }
     },
-    [isValidating, isDone]
+    [isValidating, reachedEnd]
   );
 
   const [minimap, setMinimap] = useState<string[]>([]);
@@ -209,19 +166,6 @@ export default function DesktopEventView() {
     return data;
   }, [minimap]);
 
-  // review status
-
-  const setReviewed = useCallback(
-    async (id: string) => {
-      const resp = await axios.post(`review/${id}/viewed`);
-
-      if (resp.status == 200) {
-        updateSegments();
-      }
-    },
-    [updateSegments]
-  );
-
   // preview videos
 
   const previewTimes = useMemo(() => {
@@ -331,10 +275,11 @@ export default function DesktopEventView() {
                   <PreviewThumbnailPlayer
                     review={value}
                     relevantPreview={relevantPreview}
-                    setReviewed={() => setReviewed(value.id)}
+                    setReviewed={() => markItemAsReviewed(value.id)}
+                    onClick={() => onSelectReview(value.id)}
                   />
                 </div>
-                {lastRow && !isDone && <ActivityIndicator />}
+                {lastRow && !reachedEnd && <ActivityIndicator />}
               </div>
             );
           })
@@ -343,12 +288,12 @@ export default function DesktopEventView() {
         )}
       </div>
       <div className="absolute top-12 right-0 bottom-0">
-        {after != 0 && (
+        {timeRange[1] != 0 && (
           <EventReviewTimeline
             segmentDuration={60}
             timestampSpread={15}
-            timelineStart={Math.floor(Date.now() / 1000)}
+            timelineStart={timeRange[0]}
-            timelineEnd={after}
+            timelineEnd={timeRange[1]}
             showMinimap
             minimapStartTime={minimapBounds.start}
             minimapEndTime={minimapBounds.end}

web/src/views/events/DesktopRecordingView.tsx

@@ -0,0 +1,7 @@
+
+
+export default function DesktopRecordingView ({ }) {
+    return (
+        <div>Hey this is pretty cool</div>
+    )
+}

web/src/views/events/MobileEventView.tsx

@@ -7,68 +7,27 @@ import axios from "axios";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { MdCircle } from "react-icons/md";
 import useSWR from "swr";
-import useSWRInfinite from "swr/infinite";
 
-const API_LIMIT = 250;
+type MobileEventViewProps = {
-
+  reviewPages?: ReviewSegment[][];
-export default function MobileEventView() {
+  reachedEnd: boolean;
+  isValidating: boolean;
+  loadNextPage: () => void;
+  markItemAsReviewed: (reviewId: string) => void;
+};
+export default function MobileEventView({
+  reviewPages,
+  reachedEnd,
+  isValidating,
+  loadNextPage,
+  markItemAsReviewed,
+}: MobileEventViewProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
   const [severity, setSeverity] = useState<ReviewSeverity>("alert");
   const contentRef = useRef<HTMLDivElement | null>(null);
 
   // review paging
 
-  const [after, setAfter] = useState(0);
-  useEffect(() => {
-    const now = new Date();
-    now.setHours(now.getHours() - 24);
-    setAfter(now.getTime() / 1000);
-
-    const intervalId: NodeJS.Timeout = setInterval(() => {
-      const now = new Date();
-      now.setHours(now.getHours() - 24);
-      setAfter(now.getTime() / 1000);
-    }, 60000);
-    return () => clearInterval(intervalId);
-  }, [60000]);
-
-  const reviewSearchParams = {};
-  const reviewSegmentFetcher = useCallback((key: any) => {
-    const [path, params] = Array.isArray(key) ? key : [key, undefined];
-    return axios.get(path, { params }).then((res) => res.data);
-  }, []);
-
-  const getKey = useCallback(
-    (index: number, prevData: ReviewSegment[]) => {
-      if (index > 0) {
-        const lastDate = prevData[prevData.length - 1].start_time;
-        const pagedParams = reviewSearchParams
-          ? { before: lastDate, after: after, limit: API_LIMIT }
-          : {
-              ...reviewSearchParams,
-              before: lastDate,
-              after: after,
-              limit: API_LIMIT,
-            };
-        return ["review", pagedParams];
-      }
-
-      const params = reviewSearchParams
-        ? { limit: API_LIMIT, after: after }
-        : { ...reviewSearchParams, limit: API_LIMIT, after: after };
-      return ["review", params];
-    },
-    [reviewSearchParams]
-  );
-
-  const {
-    data: reviewPages,
-    mutate: updateSegments,
-    size,
-    setSize,
-    isValidating,
-  } = useSWRInfinite<ReviewSegment[]>(getKey, reviewSegmentFetcher);
-
   const reviewItems = useMemo(() => {
     const all: ReviewSegment[] = [];
     const alerts: ReviewSegment[] = [];
@@ -101,11 +60,6 @@ export default function MobileEventView() {
     };
   }, [reviewPages]);
 
-  const isDone = useMemo(
-    () => (reviewPages?.at(-1)?.length ?? 0) < API_LIMIT,
-    [reviewPages]
-  );
-
   const currentItems = useMemo(() => {
     const current = reviewItems[severity];
 
@@ -125,8 +79,8 @@ export default function MobileEventView() {
       if (pagingObserver.current) pagingObserver.current.disconnect();
       try {
         pagingObserver.current = new IntersectionObserver((entries) => {
-          if (entries[0].isIntersecting && !isDone) {
+          if (entries[0].isIntersecting && !reachedEnd) {
-            setSize(size + 1);
+            loadNextPage();
           }
         });
         if (node) pagingObserver.current.observe(node);
@@ -134,7 +88,7 @@ export default function MobileEventView() {
         // no op
       }
     },
-    [isValidating, isDone]
+    [isValidating, reachedEnd]
   );
 
   const [minimap, setMinimap] = useState<string[]>([]);
@@ -199,19 +153,6 @@ export default function MobileEventView() {
     return data;
   }, [minimap]);
 
-  // review status
-
-  const setReviewed = useCallback(
-    async (id: string) => {
-      const resp = await axios.post(`review/${id}/viewed`);
-
-      if (resp.status == 200) {
-        updateSegments();
-      }
-    },
-    [updateSegments]
-  );
-
   // preview videos
 
   const previewTimes = useMemo(() => {
@@ -309,10 +250,10 @@ export default function MobileEventView() {
                     review={value}
                     relevantPreview={relevantPreview}
                     autoPlayback={minimapBounds.end == value.start_time}
-                    setReviewed={() => setReviewed(value.id)}
+                    setReviewed={() => markItemAsReviewed(value.id)}
                   />
                 </div>
-                {lastRow && !isDone && <ActivityIndicator />}
+                {lastRow && !reachedEnd && <ActivityIndicator />}
               </div>
             );
           })

web/vite.config.ts

@@ -12,24 +12,24 @@ export default defineConfig({
   server: {
     proxy: {
       '/api': {
-        target: 'http://localhost:5000',
+        target: 'http://192.168.50.106:5000',
         ws: true,
       },
       '/vod': {
-        target: 'http://localhost:5000'
+        target: 'http://192.168.50.106:5000'
       },
       '/clips': {
-        target: 'http://localhost:5000'
+        target: 'http://192.168.50.106:5000'
       },
       '/exports': {
-        target: 'http://localhost:5000'
+        target: 'http://192.168.50.106:5000'
       },
       '/ws': {
-        target: 'ws://localhost:5000',
+        target: 'ws://192.168.50.106:5000',
         ws: true,
       },
       '/live': {
-        target: 'ws://localhost:5000',
+        target: 'ws://192.168.50.106:5000',
         changeOrigin: true,
         ws: true,
       },