Improve refreshing of review items

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<HTMLDivElement | null>;
- 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 (
  <div className={className}>
@@ -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({

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<FrigateConfig>("config");
+ const { data: config } = useSWR<FrigateConfig>("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> | 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<ReviewSummary>([
- "review/summary",
+ const { data: reviewSummary, mutate: updateSummary } = useSWR<ReviewSummary>(
+ [
+ "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);

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({
  <NewReviewData
  className="absolute w-full z-30 pointer-events-none"
  contentRef={contentRef}
- severity={severity}
- hasUpdate={hasUpdate}
- setHasUpdate={setHasUpdate}
+ reviewItems={currentItems}
+ itemsToReview={itemsToReview}
  pullLatestData={pullLatestData}
  />
  )}
@@ -555,7 +550,6 @@ function DetectionReview({
  className="text-white"
  variant="select"
  onClick={() => {
- setHasUpdate(false);
  markAllItemsAsReviewed(currentItems ?? []);
  }}
  >