Merge bf0d985b9d into dd9497baf2

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

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

web/src/components/filter/MotionRegionFilterGrid.tsx

@@ -1,150 +0,0 @@
-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,17 +79,7 @@ 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, FaFilter } from "react-icons/fa";
-import MotionRegionFilterGrid from "@/components/filter/MotionRegionFilterGrid";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@/components/ui/dialog";
+import { FaCog } from "react-icons/fa";
 import ReviewActivityCalendar from "@/components/overlay/ReviewActivityCalendar";
 import PlatformAwareDialog from "@/components/overlay/dialog/PlatformAwareDialog";
 import MotionPreviewsPane from "./MotionPreviewsPane";
@@ -1127,13 +1117,6 @@ 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(
     () =>
@@ -1331,68 +1314,6 @@ 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
@@ -1535,7 +1456,6 @@ function MotionReview({
             }
             playbackRate={playbackRate}
             nonMotionAlpha={dimStrength / 100}
-            motionFilterCells={motionFilterCells}
             onSeek={(timestamp) => {
               onOpenRecording({
                 camera: selectedMotionPreviewCamera.name,

web/src/views/events/MotionPreviewsPane.tsx

@@ -589,7 +589,6 @@ type MotionPreviewsPaneProps = {
   isLoadingMotionRanges?: boolean;
   playbackRate: number;
   nonMotionAlpha: number;
-  motionFilterCells?: Set<number>;
   onSeek: (timestamp: number) => void;
 };
 
@@ -601,7 +600,6 @@ export default function MotionPreviewsPane({
   isLoadingMotionRanges = false,
   playbackRate,
   nonMotionAlpha,
-  motionFilterCells,
   onSeek,
 }: MotionPreviewsPaneProps) {
   const { t } = useTranslation(["views/events"]);
@@ -881,26 +879,6 @@ 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],
@@ -923,13 +901,13 @@ export default function MotionPreviewsPane({
         ref={setContentNode}
         className="no-scrollbar min-h-0 flex-1 overflow-y-auto"
       >
-        {filteredClipData.length === 0 ? (
+        {clipData.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">
-            {filteredClipData.map(
+            {clipData.map(
               ({ range, preview, fallbackFrameTimes, motionHeatmap }, idx) => {
                 const clipId = `${camera.name}-${range.start_time}-${range.end_time}-${idx}`;
                 const isMounted = mountedClips.has(clipId);