diff --git a/web/src/components/dynamic/NewReviewData.tsx b/web/src/components/dynamic/NewReviewData.tsx index b7b0961157..0e021f6348 100644 --- a/web/src/components/dynamic/NewReviewData.tsx +++ b/web/src/components/dynamic/NewReviewData.tsx @@ -1,45 +1,29 @@ -import { useFrigateReviews } from "@/api/ws"; -import { ReviewSeverity } from "@/types/review"; +import { ReviewSegment } from "@/types/review"; import { Button } from "../ui/button"; import { LuRefreshCcw } from "react-icons/lu"; -import { MutableRefObject, useEffect, useMemo, useState } from "react"; +import { MutableRefObject, useMemo } from "react"; type NewReviewDataProps = { className: string; contentRef: MutableRefObject; - severity: ReviewSeverity; - hasUpdate: boolean; - setHasUpdate: (update: boolean) => void; + reviewItems?: ReviewSegment[] | null; + itemsToReview?: number; pullLatestData: () => void; }; export default function NewReviewData({ className, contentRef, - severity, - hasUpdate, - setHasUpdate, + reviewItems, + itemsToReview, pullLatestData, }: NewReviewDataProps) { - const { payload: review } = useFrigateReviews(); - - const startCheckTs = useMemo(() => Date.now() / 1000, []); - const [reviewTs, setReviewTs] = useState(startCheckTs); - - useEffect(() => { - if (!review) { - return; + const hasUpdate = useMemo(() => { + if (!reviewItems || !itemsToReview) { + return false; } - if (review.type == "end" && review.review.severity == severity) { - setReviewTs(review.review.start_time); - } - }, [review, severity]); - - useEffect(() => { - if (reviewTs > startCheckTs) { - setHasUpdate(true); - } - }, [startCheckTs, reviewTs, setHasUpdate]); + return reviewItems.length != itemsToReview; + }, [reviewItems, itemsToReview]); return (
@@ -52,7 +36,6 @@ export default function NewReviewData({ } text-center mt-5 mx-auto bg-gray-400 text-white`} variant="secondary" onClick={() => { - setHasUpdate(false); pullLatestData(); if (contentRef.current) { contentRef.current.scrollTo({ diff --git a/web/src/pages/Events.tsx b/web/src/pages/Events.tsx index 0ddecdfeaa..53f74a5e3d 100644 --- a/web/src/pages/Events.tsx +++ b/web/src/pages/Events.tsx @@ -18,7 +18,9 @@ import { useCallback, useEffect, useMemo, useState } from "react"; import useSWR from "swr"; export default function Events() { - const { data: config } = useSWR("config"); + const { data: config } = useSWR("config", { + revalidateOnFocus: false, + }); const timezone = useTimezone(config); // recordings viewer @@ -66,6 +68,9 @@ export default function Events() { }; }, [last24Hours, reviewSearchParams]); + // we want to update the items whenever the severity changes + useEffect(() => setBeforeTs(Date.now() / 1000), [severity]); + const reviewSegmentFetcher = useCallback((key: Array | string) => { const [path, params] = Array.isArray(key) ? key : [key, undefined]; return axios.get(path, { params }).then((res) => res.data); @@ -93,15 +98,21 @@ export default function Events() { // review summary - const { data: reviewSummary, mutate: updateSummary } = useSWR([ - "review/summary", + const { data: reviewSummary, mutate: updateSummary } = useSWR( + [ + "review/summary", + { + timezone: timezone, + cameras: reviewSearchParams["cameras"] ?? null, + labels: reviewSearchParams["labels"] ?? null, + }, + ], { - timezone: timezone, - cameras: reviewSearchParams["cameras"] ?? null, - labels: reviewSearchParams["labels"] ?? null, + revalidateOnFocus: true, + refreshInterval: 30000, + revalidateOnReconnect: false, }, - { revalidateOnFocus: false, revalidateOnReconnect: false }, - ]); + ); const reloadData = useCallback(() => { setBeforeTs(Date.now() / 1000); diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx index 0f5561b923..c0f532a17f 100644 --- a/web/src/views/events/EventView.tsx +++ b/web/src/views/events/EventView.tsx @@ -382,10 +382,6 @@ function DetectionReview({ [previewTime, setPreviewTime], ); - // review interaction - - const [hasUpdate, setHasUpdate] = useState(false); - // timeline interaction const timelineDuration = useMemo( @@ -498,9 +494,8 @@ function DetectionReview({ )} @@ -555,7 +550,6 @@ function DetectionReview({ className="text-white" variant="select" onClick={() => { - setHasUpdate(false); markAllItemsAsReviewed(currentItems ?? []); }} >