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

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(
-                  relevantPreviews || [],
-                ).find(
-                  (preview) =>
-                    preview.camera == value.camera &&
-                    preview.start < value.start_time &&
-                    preview.end > value.end_time,
-                );
+                const selected = selectedReviews.includes(value.id);
 
                 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>