Add motion previews filter (#22347)

* add ability to filter motion previews via heatmap grid

* i18n

* use dialog on mobile

web/public/locales/en/views/events.json

@@ -80,6 +80,9 @@
     "back": "Back",
     "empty": "No previews available",
     "noPreview": "Preview unavailable",
-    "seekAria": "Seek {{camera}} player to {{time}}"
+    "seekAria": "Seek {{camera}} player to {{time}}",
+    "filter": "Filter",
+    "filterDesc": "Select areas to only show clips with motion in those regions.",
+    "filterClear": "Clear"
   }
 }

web/src/components/filter/MotionRegionFilterGrid.tsx

@@ -0,0 +1,150 @@
+import { baseUrl } from "@/api/baseUrl";
+import { useCallback, useRef } from "react";
+
+const GRID_SIZE = 16;
+
+type MotionRegionFilterGridProps = {
+  cameraName: string;
+  selectedCells: Set<number>;
+  onCellsChange: (cells: Set<number>) => void;
+};
+
+export default function MotionRegionFilterGrid({
+  cameraName,
+  selectedCells,
+  onCellsChange,
+}: MotionRegionFilterGridProps) {
+  const paintingRef = useRef<{ active: boolean; adding: boolean }>({
+    active: false,
+    adding: true,
+  });
+  const lastCellRef = useRef<number>(-1);
+  const gridRef = useRef<HTMLDivElement>(null);
+
+  const toggleCell = useCallback(
+    (index: number, forceAdd?: boolean) => {
+      const next = new Set(selectedCells);
+
+      if (forceAdd !== undefined) {
+        if (forceAdd) {
+          next.add(index);
+        } else {
+          next.delete(index);
+        }
+      } else if (next.has(index)) {
+        next.delete(index);
+      } else {
+        next.add(index);
+      }
+
+      onCellsChange(next);
+    },
+    [selectedCells, onCellsChange],
+  );
+
+  const getCellFromPoint = useCallback(
+    (clientX: number, clientY: number): number | null => {
+      const grid = gridRef.current;
+
+      if (!grid) {
+        return null;
+      }
+
+      const rect = grid.getBoundingClientRect();
+      const x = clientX - rect.left;
+      const y = clientY - rect.top;
+
+      if (x < 0 || y < 0 || x >= rect.width || y >= rect.height) {
+        return null;
+      }
+
+      const col = Math.floor((x / rect.width) * GRID_SIZE);
+      const row = Math.floor((y / rect.height) * GRID_SIZE);
+
+      return row * GRID_SIZE + col;
+    },
+    [],
+  );
+
+  const handlePointerDown = useCallback(
+    (e: React.PointerEvent) => {
+      e.preventDefault();
+      const index = getCellFromPoint(e.clientX, e.clientY);
+
+      if (index === null) {
+        return;
+      }
+
+      const adding = !selectedCells.has(index);
+      paintingRef.current = { active: true, adding };
+      lastCellRef.current = index;
+      toggleCell(index, adding);
+    },
+    [selectedCells, toggleCell, getCellFromPoint],
+  );
+
+  const handlePointerMove = useCallback(
+    (e: React.PointerEvent) => {
+      if (!paintingRef.current.active) {
+        return;
+      }
+
+      const index = getCellFromPoint(e.clientX, e.clientY);
+
+      if (index === null || index === lastCellRef.current) {
+        return;
+      }
+
+      lastCellRef.current = index;
+      toggleCell(index, paintingRef.current.adding);
+    },
+    [toggleCell, getCellFromPoint],
+  );
+
+  const handlePointerUp = useCallback(() => {
+    paintingRef.current.active = false;
+    lastCellRef.current = -1;
+  }, []);
+
+  return (
+    <div className="space-y-2">
+      <div
+        className="relative aspect-video w-full select-none overflow-hidden rounded-lg"
+        style={{ touchAction: "none" }}
+        onPointerUp={handlePointerUp}
+        onPointerLeave={handlePointerUp}
+      >
+        <img
+          src={`${baseUrl}api/${cameraName}/latest.jpg?h=500`}
+          className="absolute inset-0 size-full object-contain"
+          draggable={false}
+          alt=""
+        />
+        <div
+          ref={gridRef}
+          className="absolute inset-0 grid"
+          style={{
+            gridTemplateColumns: `repeat(${GRID_SIZE}, 1fr)`,
+            gridTemplateRows: `repeat(${GRID_SIZE}, 1fr)`,
+          }}
+          onPointerDown={handlePointerDown}
+          onPointerMove={handlePointerMove}
+        >
+          {Array.from({ length: GRID_SIZE * GRID_SIZE }, (_, index) => {
+            const isSelected = selectedCells.has(index);
+            return (
+              <div
+                key={index}
+                className={
+                  isSelected
+                    ? "border border-severity_alert/60 bg-severity_alert/40"
+                    : "border border-transparent hover:bg-white/20"
+                }
+              />
+            );
+          })}
+        </div>
+      </div>
+    </div>
+  );
+}

web/src/views/events/EventView.tsx

@@ -79,7 +79,17 @@ import { GiSoundWaves } from "react-icons/gi";
 import useKeyboardListener from "@/hooks/use-keyboard-listener";
 import { useTimelineZoom } from "@/hooks/use-timeline-zoom";
 import { useTranslation } from "react-i18next";
-import { FaCog } from "react-icons/fa";
+import { FaCog, FaFilter } from "react-icons/fa";
+import MotionRegionFilterGrid from "@/components/filter/MotionRegionFilterGrid";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
 import ReviewActivityCalendar from "@/components/overlay/ReviewActivityCalendar";
 import PlatformAwareDialog from "@/components/overlay/dialog/PlatformAwareDialog";
 import MotionPreviewsPane from "./MotionPreviewsPane";
@@ -1117,6 +1127,13 @@ function MotionReview({
   const [controlsOpen, setControlsOpen] = useState(false);
   const [dimStrength, setDimStrength] = useState(82);
   const [isPreviewSettingsOpen, setIsPreviewSettingsOpen] = useState(false);
+  const [motionFilterCells, setMotionFilterCells] = useState<Set<number>>(
+    new Set(),
+  );
+  const [pendingFilterCells, setPendingFilterCells] = useState<Set<number>>(
+    new Set(),
+  );
+  const [isRegionFilterOpen, setIsRegionFilterOpen] = useState(false);
 
   const objectReviewItems = useMemo(
     () =>
@@ -1314,6 +1331,68 @@ function MotionReview({
                   updateSelectedDay={onUpdateSelectedDay}
                 />
               )}
+              <Dialog
+                open={isRegionFilterOpen}
+                onOpenChange={(open) => {
+                  if (open) {
+                    setPendingFilterCells(new Set(motionFilterCells));
+                  }
+                  setIsRegionFilterOpen(open);
+                }}
+              >
+                <DialogTrigger asChild>
+                  <Button
+                    className={cn(
+                      isDesktop ? "flex items-center gap-2" : "rounded-lg",
+                    )}
+                    size="sm"
+                    variant={motionFilterCells.size > 0 ? "select" : "default"}
+                    aria-label={t("motionPreviews.filter")}
+                  >
+                    <FaFilter
+                      className={
+                        motionFilterCells.size > 0
+                          ? "text-selected-foreground"
+                          : "text-secondary-foreground"
+                      }
+                    />
+                    {isDesktop && t("motionPreviews.filter")}
+                  </Button>
+                </DialogTrigger>
+                <DialogContent className="max-h-[90dvh] overflow-y-auto sm:max-w-[85%] md:max-w-[70%] lg:max-w-[60%]">
+                  <DialogHeader>
+                    <DialogTitle>{t("motionPreviews.filter")}</DialogTitle>
+                    <DialogDescription>
+                      {t("motionPreviews.filterDesc")}
+                    </DialogDescription>
+                  </DialogHeader>
+                  <MotionRegionFilterGrid
+                    cameraName={selectedMotionPreviewCamera.name}
+                    selectedCells={pendingFilterCells}
+                    onCellsChange={setPendingFilterCells}
+                  />
+                  <DialogFooter className="justify-end gap-1">
+                    <Button
+                      variant="outline"
+                      disabled={pendingFilterCells.size === 0}
+                      onClick={() => {
+                        setPendingFilterCells(new Set());
+                      }}
+                    >
+                      {t("motionPreviews.filterClear")}
+                    </Button>
+                    <Button
+                      variant="select"
+                      onClick={() => {
+                        setMotionFilterCells(new Set(pendingFilterCells));
+                        setIsRegionFilterOpen(false);
+                      }}
+                    >
+                      {t("button.apply", { ns: "common" })}
+                    </Button>
+                  </DialogFooter>
+                </DialogContent>
+              </Dialog>
               <PlatformAwareDialog
                 trigger={
                   <Button
@@ -1456,6 +1535,7 @@ function MotionReview({
             }
             playbackRate={playbackRate}
             nonMotionAlpha={dimStrength / 100}
+            motionFilterCells={motionFilterCells}
             onSeek={(timestamp) => {
               onOpenRecording({
                 camera: selectedMotionPreviewCamera.name,

web/src/views/events/MotionPreviewsPane.tsx

@@ -589,6 +589,7 @@ type MotionPreviewsPaneProps = {
   isLoadingMotionRanges?: boolean;
   playbackRate: number;
   nonMotionAlpha: number;
+  motionFilterCells?: Set<number>;
   onSeek: (timestamp: number) => void;
 };
 
@@ -600,6 +601,7 @@ export default function MotionPreviewsPane({
   isLoadingMotionRanges = false,
   playbackRate,
   nonMotionAlpha,
+  motionFilterCells,
   onSeek,
 }: MotionPreviewsPaneProps) {
   const { t } = useTranslation(["views/events"]);
@@ -879,6 +881,26 @@ export default function MotionPreviewsPane({
     ],
   );
 
+  const filteredClipData = useMemo(() => {
+    if (!motionFilterCells || motionFilterCells.size === 0) {
+      return clipData;
+    }
+
+    return clipData.filter(({ motionHeatmap }) => {
+      if (!motionHeatmap) {
+        return false;
+      }
+
+      for (const cellIndex of motionFilterCells) {
+        if ((motionHeatmap[cellIndex.toString()] ?? 0) > 0) {
+          return true;
+        }
+      }
+
+      return false;
+    });
+  }, [clipData, motionFilterCells]);
+
   const hasCurrentHourRanges = useMemo(
     () => motionRanges.some((range) => isCurrentHour(range.end_time)),
     [motionRanges],
@@ -901,13 +923,13 @@ export default function MotionPreviewsPane({
         ref={setContentNode}
         className="no-scrollbar min-h-0 flex-1 overflow-y-auto"
       >
-        {clipData.length === 0 ? (
+        {filteredClipData.length === 0 ? (
           <div className="flex h-full items-center justify-center text-lg text-primary">
             {t("motionPreviews.empty")}
           </div>
         ) : (
           <div className="grid grid-cols-1 gap-2 pb-2 sm:grid-cols-2 md:gap-4 xl:grid-cols-4">
-            {clipData.map(
+            {filteredClipData.map(
               ({ range, preview, fallbackFrameTimes, motionHeatmap }, idx) => {
                 const clipId = `${camera.name}-${range.start_time}-${range.end_time}-${idx}`;
                 const isMounted = mountedClips.has(clipId);