Add multiselect and batch actions to review items (#10161)

* Implement context menu for batch operations and implement apis

* reduce preview calculations on rerenders

* Add button to mark above items as reviewed

* Use context menu for mark as reviewed

* Cleanup

frigate/http.py

@@ -2464,6 +2464,24 @@ def set_reviewed(id):
     )
 
 
+@bp.route("/reviews/<ids>/viewed", methods=("POST",))
+def set_multiple_reviewed(ids: str):
+    list_of_ids = ids.split(",")
+
+    if not list_of_ids or len(list_of_ids) == 0:
+        return make_response(
+            jsonify({"success": False, "message": "Not a valid list of ids"}), 404
+        )
+
+    ReviewSegment.update(has_been_reviewed=True).where(
+        ReviewSegment.id << list_of_ids
+    ).execute()
+
+    return make_response(
+        jsonify({"success": True, "message": "Reviewed multiple items"}), 200
+    )
+
+
 @bp.route("/review/<id>/viewed", methods=("DELETE",))
 def set_not_reviewed(id):
     try:
@@ -2481,6 +2499,20 @@ def set_not_reviewed(id):
     )
 
 
+@bp.route("/reviews/<ids>", methods=("DELETE",))
+def delete_reviews(ids: str):
+    list_of_ids = ids.split(",")
+
+    if not list_of_ids or len(list_of_ids) == 0:
+        return make_response(
+            jsonify({"success": False, "message": "Not a valid list of ids"}), 404
+        )
+
+    ReviewSegment.delete().where(ReviewSegment.id << list_of_ids).execute()
+
+    return make_response(jsonify({"success": True, "message": "Delete reviews"}), 200)
+
+
 @bp.route("/review/<id>/preview.gif")
 def review_preview(id: str):
     try:

web/src/components/filter/ReviewActionGroup.tsx

@@ -0,0 +1,72 @@
+import { LuCheckSquare, LuTrash, LuX } from "react-icons/lu";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "../ui/tooltip";
+import { useCallback } from "react";
+import axios from "axios";
+
+type ReviewActionGroupProps = {
+  selectedReviews: string[];
+  setSelectedReviews: (ids: string[]) => void;
+  pullLatestData: () => void;
+};
+export default function ReviewActionGroup({
+  selectedReviews,
+  setSelectedReviews,
+  pullLatestData,
+}: ReviewActionGroupProps) {
+  const onClearSelected = useCallback(() => {
+    setSelectedReviews([]);
+  }, [setSelectedReviews]);
+
+  const onMarkAsReviewed = useCallback(async () => {
+    const idList = selectedReviews.join(",");
+    await axios.post(`reviews/${idList}/viewed`);
+    setSelectedReviews([]);
+    pullLatestData();
+  }, [selectedReviews, setSelectedReviews, pullLatestData]);
+
+  const onDelete = useCallback(async () => {
+    const idList = selectedReviews.join(",");
+    await axios.delete(`reviews/${idList}`);
+    setSelectedReviews([]);
+    pullLatestData();
+  }, [selectedReviews, setSelectedReviews, pullLatestData]);
+
+  return (
+    <div className="absolute inset-x-2 md:inset-x-[40%] top-0 p-2 bg-primary-foreground md:border-2 md:rounded-lg flex justify-between items-center">
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <div className="cursor-pointer" onClick={onClearSelected}>
+              <LuX />
+            </div>
+          </TooltipTrigger>
+          <TooltipContent>Unselect All</TooltipContent>
+        </Tooltip>
+        <div className="flex gap-2 items-center">
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="cursor-pointer" onClick={onMarkAsReviewed}>
+                <LuCheckSquare />
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>Mark Selected As Reviewed</TooltipContent>
+          </Tooltip>
+          <div className="text-sm font-thin">|</div>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <div className="cursor-pointer" onClick={onDelete}>
+                <LuTrash />
+              </div>
+            </TooltipTrigger>
+            <TooltipContent>Delete Selected</TooltipContent>
+          </Tooltip>
+        </div>
+      </TooltipProvider>
+    </div>
+  );
+}

web/src/components/player/PreviewThumbnailPlayer.tsx

@@ -1,4 +1,10 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import React, {
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { useApiHost } from "@/api";
 import { isCurrentHour } from "@/utils/dateUtil";
 import { ReviewSegment } from "@/types/review";
@@ -16,7 +22,8 @@ import {
   ContextMenuSeparator,
   ContextMenuTrigger,
 } from "../ui/context-menu";
-import { LuCheckSquare, LuFileUp, LuTrash } from "react-icons/lu";
+import { LuCheckCheck, LuCheckSquare, LuFileUp, LuTrash } from "react-icons/lu";
+import { RiCheckboxMultipleLine } from "react-icons/ri";
 import axios from "axios";
 import { useFormattedTimestamp } from "@/hooks/use-date-utils";
 import useImageLoaded from "@/hooks/use-image-loaded";
@@ -25,11 +32,11 @@ import { useSwipeable } from "react-swipeable";
 
 type PreviewPlayerProps = {
   review: ReviewSegment;
-  relevantPreview?: Preview;
+  allPreviews?: Preview[];
-  autoPlayback?: boolean;
-  setReviewed?: (reviewId: string) => void;
-  onClick?: (reviewId: string) => void;
   onTimeUpdate?: (time: number | undefined) => void;
+  setReviewed: (reviewId: string) => void;
+  markAboveReviewed: () => void;
+  onClick: (reviewId: string, ctrl: boolean) => void;
 };
 
 type Preview = {
@@ -42,8 +49,9 @@ type Preview = {
 
 export default function PreviewThumbnailPlayer({
   review,
-  relevantPreview,
+  allPreviews,
   setReviewed,
+  markAboveReviewed,
   onClick,
   onTimeUpdate,
 }: PreviewPlayerProps) {
@@ -57,11 +65,14 @@ export default function PreviewThumbnailPlayer({
 
   // interaction
 
-  const handleOnClick = useCallback(() => {
+  const handleOnClick = useCallback(
-    if (onClick && !ignoreClick) {
+    (e: React.MouseEvent<HTMLDivElement>) => {
-      onClick(review.id);
+      if (!ignoreClick) {
-    }
+        onClick(review.id, e.metaKey);
-  }, [ignoreClick, review, onClick]);
+      }
+    },
+    [ignoreClick, review, onClick],
+  );
 
   const swipeHandlers = useSwipeable({
     onSwipedLeft: () => (setReviewed ? setReviewed(review.id) : null),
@@ -69,14 +80,24 @@ export default function PreviewThumbnailPlayer({
     preventScrollOnSwipe: true,
   });
 
-  const handleSetReviewed = useCallback(() => {
+  const handleSetReviewed = useCallback(
-    if (setReviewed) {
+    () => setReviewed(review.id),
-      setReviewed(review.id);
+    [review, setReviewed],
-    }
+  );
-  }, [review, setReviewed]);
 
   // playback
 
+  const relevantPreview = useMemo(
+    () =>
+      Object.values(allPreviews || []).find(
+        (preview) =>
+          preview.camera == review.camera &&
+          preview.start < review.start_time &&
+          preview.end > review.end_time,
+      ),
+    [allPreviews],
+  );
+
   const playingBack = useMemo(() => playback, [playback]);
 
   const onPlayback = useCallback(
@@ -186,7 +207,12 @@ export default function PreviewThumbnailPlayer({
           )}
         </div>
       </ContextMenuTrigger>
-      <PreviewContextItems review={review} setReviewed={handleSetReviewed} />
+      <PreviewContextItems
+        review={review}
+        onSelect={() => onClick(review.id, true)}
+        setReviewed={handleSetReviewed}
+        markAboveReviewed={markAboveReviewed}
+      />
     </ContextMenu>
   );
 }
@@ -557,11 +583,15 @@ function InProgressPreview({
 
 type PreviewContextItemsProps = {
   review: ReviewSegment;
-  setReviewed?: () => void;
+  onSelect: () => void;
+  setReviewed: () => void;
+  markAboveReviewed: () => void;
 };
 function PreviewContextItems({
   review,
+  onSelect,
   setReviewed,
+  markAboveReviewed,
 }: PreviewContextItemsProps) {
   const exportReview = useCallback(() => {
     axios.post(
@@ -570,27 +600,46 @@ function PreviewContextItems({
     );
   }, [review]);
 
+  const deleteReview = useCallback(() => {
+    axios.delete(`reviews/${review.id}`);
+  }, [review]);
+
   return (
     <ContextMenuContent>
+      {isMobile && (
+        <ContextMenuItem onSelect={onSelect}>
+          <div className="w-full flex justify-between items-center">
+            Select
+            <RiCheckboxMultipleLine className="ml-4 size-4" />
+          </div>
+        </ContextMenuItem>
+      )}
+      <ContextMenuItem onSelect={markAboveReviewed}>
+        <div className="w-full flex justify-between items-center">
+          Mark Above as Reviewed
+          <LuCheckCheck className="ml-4 size-4" />
+        </div>
+      </ContextMenuItem>
+      <ContextMenuSeparator />
       {!review.has_been_reviewed && (
         <ContextMenuItem onSelect={() => (setReviewed ? setReviewed() : null)}>
           <div className="w-full flex justify-between items-center">
             Mark As Reviewed
-            <LuCheckSquare className="ml-4 w-4 h-4" />
+            <LuCheckSquare className="ml-4 size-4" />
           </div>
         </ContextMenuItem>
       )}
-      <ContextMenuItem onSelect={() => exportReview()}>
+      <ContextMenuItem onSelect={exportReview}>
         <div className="w-full flex justify-between items-center">
           Export
-          <LuFileUp className="ml-4 w-4 h-4" />
+          <LuFileUp className="ml-4 size-4" />
         </div>
       </ContextMenuItem>
       <ContextMenuSeparator />
-      <ContextMenuItem>
+      <ContextMenuItem onSelect={deleteReview}>
         <div className="w-full flex justify-between items-center text-danger">
           Delete
-          <LuTrash className="ml-4 w-4 h-4" />
+          <LuTrash className="ml-4 size-4" />
         </div>
       </ContextMenuItem>
     </ContextMenuContent>

web/src/pages/Events.tsx

@@ -9,7 +9,7 @@ import { useCallback, useMemo, useState } from "react";
 import useSWR from "swr";
 import useSWRInfinite from "swr/infinite";
 
-const API_LIMIT = 250;
+const API_LIMIT = 100;
 
 export default function Events() {
   // recordings viewer
@@ -221,7 +221,7 @@ export default function Events() {
         setSeverity={setSeverity}
         loadNextPage={onLoadNextPage}
         markItemAsReviewed={markItemAsReviewed}
-        onSelectReview={setSelectedReviewId}
+        onOpenReview={setSelectedReviewId}
         pullLatestData={reloadData}
         updateFilter={onUpdateFilter}
       />

web/src/views/events/EventView.tsx

@@ -1,5 +1,6 @@
 import Logo from "@/components/Logo";
 import NewReviewData from "@/components/dynamic/NewReviewData";
+import ReviewActionGroup from "@/components/filter/ReviewActionGroup";
 import ReviewFilterGroup from "@/components/filter/ReviewFilterGroup";
 import PreviewThumbnailPlayer from "@/components/player/PreviewThumbnailPlayer";
 import EventReviewTimeline from "@/components/timeline/EventReviewTimeline";
@@ -9,6 +10,7 @@ import { useEventUtils } from "@/hooks/use-event-utils";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { Preview } from "@/types/preview";
 import { ReviewFilter, ReviewSegment, ReviewSeverity } from "@/types/review";
+import axios from "axios";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { isDesktop, isMobile } from "react-device-detect";
 import { LuFolderCheck } from "react-icons/lu";
@@ -26,7 +28,7 @@ type EventViewProps = {
   setSeverity: (severity: ReviewSeverity) => void;
   loadNextPage: () => void;
   markItemAsReviewed: (reviewId: string) => void;
-  onSelectReview: (reviewId: string) => void;
+  onOpenReview: (reviewId: string) => void;
   pullLatestData: () => void;
   updateFilter: (filter: ReviewFilter) => void;
 };
@@ -41,7 +43,7 @@ export default function EventView({
   setSeverity,
   loadNextPage,
   markItemAsReviewed,
-  onSelectReview,
+  onOpenReview,
   pullLatestData,
   updateFilter,
 }: EventViewProps) {
@@ -108,7 +110,7 @@ export default function EventView({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [contentRef.current?.scrollHeight, severity]);
 
-  // review interaction
+  // timeline interaction
 
   const pagingObserver = useRef<IntersectionObserver | null>();
   const lastReviewRef = useCallback(
@@ -191,6 +193,59 @@ export default function EventView({
 
   const [previewTime, setPreviewTime] = useState<number>();
 
+  // review interaction
+
+  const [selectedReviews, setSelectedReviews] = useState<string[]>([]);
+  const onSelectReview = useCallback(
+    (reviewId: string, ctrl: boolean) => {
+      if (selectedReviews.length > 0 || ctrl) {
+        const index = selectedReviews.indexOf(reviewId);
+
+        if (index != -1) {
+          if (selectedReviews.length == 1) {
+            setSelectedReviews([]);
+          } else {
+            const copy = [
+              ...selectedReviews.slice(0, index),
+              ...selectedReviews.slice(index + 1),
+            ];
+            setSelectedReviews(copy);
+          }
+        } else {
+          const copy = [...selectedReviews];
+          copy.push(reviewId);
+          setSelectedReviews(copy);
+        }
+      } else {
+        onOpenReview(reviewId);
+      }
+    },
+    [selectedReviews, setSelectedReviews],
+  );
+
+  const markScrolledItemsAsReviewed = useCallback(async () => {
+    if (!currentItems) {
+      return;
+    }
+
+    const scrolled: string[] = [];
+
+    currentItems.find((value) => {
+      if (value.start_time > minimapBounds.end) {
+        scrolled.push(value.id);
+        return false;
+      } else {
+        return true;
+      }
+    });
+
+    const idList = scrolled.join(",");
+
+    await axios.post(`reviews/${idList}/viewed`);
+    setSelectedReviews([]);
+    pullLatestData();
+  }, [currentItems, minimapBounds]);
+
   if (!config) {
     return <ActivityIndicator />;
   }
@@ -236,6 +291,13 @@ export default function EventView({
           </ToggleGroupItem>
         </ToggleGroup>
         <ReviewFilterGroup filter={filter} onUpdateFilter={updateFilter} />
+        {selectedReviews.length > 0 && (
+          <ReviewActionGroup
+            selectedReviews={selectedReviews}
+            setSelectedReviews={setSelectedReviews}
+            pullLatestData={pullLatestData}
+          />
+        )}
       </div>
 
       <div className="flex h-full overflow-hidden">
@@ -260,20 +322,13 @@ export default function EventView({
           )}
 
           <div
-            className="w-full m-2 md:grid md:grid-cols-3 3xl:grid-cols-4 gap-4"
+            className="w-full m-2 grid md:grid-cols-3 3xl:grid-cols-4 gap-2 md:gap-4"
             ref={contentRef}
           >
             {currentItems ? (
               currentItems.map((value, segIdx) => {
                 const lastRow = segIdx == reviewItems[severity].length - 1;
-                const relevantPreview = Object.values(
+                const selected = selectedReviews.includes(value.id);
-                  relevantPreviews || [],
-                ).find(
-                  (preview) =>
-                    preview.camera == value.camera &&
-                    preview.start < value.start_time &&
-                    preview.end > value.end_time,
-                );
 
                 return (
                   <div
@@ -284,14 +339,15 @@ export default function EventView({
                       alignStartDateToTimeline(value.start_time) -
                       segmentDuration
                     }
-                    className="outline outline-offset-1 outline-0 rounded-lg shadow-none transition-all duration-500 my-1 md:my-0"
+                    className={`outline outline-offset-1 rounded-lg shadow-none transition-all my-1 md:my-0 ${selected ? `outline-4 shadow-[0_0_6px_1px] outline-severity_${value.severity} shadow-severity_${value.severity}` : "outline-0 duration-500"}`}
                   >
                     <div className="aspect-video rounded-lg overflow-hidden">
                       <PreviewThumbnailPlayer
                         review={value}
-                        relevantPreview={relevantPreview}
+                        allPreviews={relevantPreviews}
                         setReviewed={markItemAsReviewed}
                         onTimeUpdate={setPreviewTime}
+                        markAboveReviewed={markScrolledItemsAsReviewed}
                         onClick={onSelectReview}
                       />
                     </div>