Improve motion review and add motion search (#22253)

* implement motion search and motion previews

* tweaks

* fix merge issue

* fix copilot instructions

web/src/pages/Events.tsx

@@ -1,5 +1,6 @@
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import useApiFilter from "@/hooks/use-api-filter";
+import { useAllowedCameras } from "@/hooks/use-allowed-cameras";
 import { useCameraPreviews } from "@/hooks/use-camera-previews";
 import { useTimezone } from "@/hooks/use-date-utils";
 import { useOverlayState, useSearchEffect } from "@/hooks/use-overlay-state";
@@ -21,6 +22,7 @@ import {
   getEndOfDayTimestamp,
 } from "@/utils/dateUtil";
 import EventView from "@/views/events/EventView";
+import MotionSearchView from "@/views/motion-search/MotionSearchView";
 import { RecordingView } from "@/views/recording/RecordingView";
 import axios from "axios";
 import { useCallback, useEffect, useMemo, useState } from "react";
@@ -34,6 +36,7 @@ export default function Events() {
     revalidateOnFocus: false,
   });
   const timezone = useTimezone(config);
+  const allowedCameras = useAllowedCameras();
 
   // recordings viewer
 
@@ -52,6 +55,74 @@ export default function Events() {
     undefined,
     false,
   );
+  const [motionPreviewsCamera, setMotionPreviewsCamera] = useOverlayState<
+    string | undefined
+  >("motionPreviewsCamera", undefined);
+
+  const [motionSearchCamera, setMotionSearchCamera] = useState<string | null>(
+    null,
+  );
+  const [motionSearchDay, setMotionSearchDay] = useState<Date | undefined>(
+    undefined,
+  );
+
+  const motionSearchCameras = useMemo(() => {
+    if (!config?.cameras) {
+      return [] as string[];
+    }
+
+    return Object.keys(config.cameras).filter((cam) =>
+      allowedCameras.includes(cam),
+    );
+  }, [allowedCameras, config?.cameras]);
+
+  const selectedMotionSearchCamera = useMemo(() => {
+    if (!motionSearchCamera) {
+      return null;
+    }
+
+    if (motionSearchCameras.includes(motionSearchCamera)) {
+      return motionSearchCamera;
+    }
+
+    return motionSearchCameras[0] ?? null;
+  }, [motionSearchCamera, motionSearchCameras]);
+
+  const motionSearchTimeRange = useMemo(() => {
+    if (motionSearchDay) {
+      return {
+        after: getBeginningOfDayTimestamp(new Date(motionSearchDay)),
+        before: getEndOfDayTimestamp(new Date(motionSearchDay)),
+      };
+    }
+
+    const now = Date.now() / 1000;
+    return {
+      after: now - 86400,
+      before: now,
+    };
+  }, [motionSearchDay]);
+
+  const closeMotionSearch = useCallback(() => {
+    setMotionSearchCamera(null);
+    setMotionSearchDay(undefined);
+    setBeforeTs(Date.now() / 1000);
+  }, []);
+
+  const handleMotionSearchCameraSelect = useCallback((camera: string) => {
+    setMotionSearchCamera(camera);
+  }, []);
+
+  const handleMotionSearchDaySelect = useCallback((day: Date | undefined) => {
+    if (day == undefined) {
+      setMotionSearchDay(undefined);
+      return;
+    }
+
+    const normalizedDay = new Date(day);
+    normalizedDay.setHours(0, 0, 0, 0);
+    setMotionSearchDay(normalizedDay);
+  }, []);
 
   const [notificationTab, setNotificationTab] =
     useState<TimelineType>("timeline");
@@ -508,7 +579,24 @@ export default function Events() {
       );
     }
   } else {
-    return (
+    return motionSearchCamera ? (
+      !config || !selectedMotionSearchCamera ? (
+        <ActivityIndicator />
+      ) : (
+        <MotionSearchView
+          config={config}
+          cameras={motionSearchCameras}
+          selectedCamera={selectedMotionSearchCamera}
+          onCameraSelect={handleMotionSearchCameraSelect}
+          cameraLocked={true}
+          selectedDay={motionSearchDay}
+          onDaySelect={handleMotionSearchDaySelect}
+          timeRange={motionSearchTimeRange}
+          timezone={timezone}
+          onBack={closeMotionSearch}
+        />
+      )
+    ) : (
       <EventView
         reviewItems={reviewItems}
         currentReviewItems={currentItems}
@@ -525,6 +613,11 @@ export default function Events() {
         markItemAsReviewed={markItemAsReviewed}
         markAllItemsAsReviewed={markAllItemsAsReviewed}
         onOpenRecording={setRecording}
+        motionPreviewsCamera={motionPreviewsCamera ?? null}
+        setMotionPreviewsCamera={(camera) =>
+          setMotionPreviewsCamera(camera ?? undefined)
+        }
+        setMotionSearchCamera={setMotionSearchCamera}
         pullLatestData={reloadData}
         updateFilter={onUpdateFilter}
       />