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

2026-02-08 20:25:26 +03:00 · 2024-02-22 10:11:51 -07:00 · 2024-02-22 10:11:51 -07:00 · 341922aaf4
commit 341922aaf4
parent 9d8b568438
6 changed files with 201 additions and 171 deletions
--- a/web/src/components/player/PreviewThumbnailPlayer.tsx
+++ b/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);
--- a/web/src/pages/Events.tsx
+++ b/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) {
-    return <MobileEventView />;
-  }
+  // recordings viewer
+  const [selectedReview, setSelectedReview] = useOverlayState("review");

-  return <DesktopEventView />;
+  // 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];
+      }
+
+      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;
 }
--- a/web/src/views/events/DesktopEventView.tsx
+++ b/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;
-
-export default function DesktopEventView() {
+type DesktopEventViewProps = {
+  reviewPages?: ReviewSegment[][];
+  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) {
-            setSize(size + 1);
+          if (entries[0].isIntersecting && !reachedEnd) {
+            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)}
-            timelineEnd={after}
+            timelineStart={timeRange[0]}
+            timelineEnd={timeRange[1]}
            showMinimap
            minimapStartTime={minimapBounds.start}
            minimapEndTime={minimapBounds.end}
--- a/web/src/views/events/DesktopRecordingView.tsx
+++ b/web/src/views/events/DesktopRecordingView.tsx
@ -0,0 +1,7 @@
+
+
+export default function DesktopRecordingView ({ }) {
+    return (
+        <div>Hey this is pretty cool</div>
+    )
+}
--- a/web/src/views/events/MobileEventView.tsx
+++ b/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;
-
-export default function MobileEventView() {
+type MobileEventViewProps = {
+  reviewPages?: ReviewSegment[][];
+  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) {
-            setSize(size + 1);
+          if (entries[0].isIntersecting && !reachedEnd) {
+            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>
            );
          })
--- a/web/vite.config.ts
+++ b/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,
      },