Improve motion review and add motion search (#22253)

* implement motion search and motion previews

* tweaks

* fix merge issue

* fix copilot instructions

web/src/hooks/use-camera-activity.ts

@@ -8,14 +8,19 @@ import {
 import { CameraConfig, FrigateConfig } from "@/types/frigateConfig";
 import { MotionData, ReviewSegment } from "@/types/review";
 import { useCallback, useEffect, useMemo, useState } from "react";
-import { useTimelineUtils } from "./use-timeline-utils";
 import { AudioDetection, ObjectType } from "@/types/ws";
+import { useTimelineUtils } from "./use-timeline-utils";
 import useDeepMemo from "./use-deep-memo";
 import { isEqual } from "lodash";
 import { useAutoFrigateStats } from "./use-stats";
 import useSWR from "swr";
 import { getAttributeLabels } from "@/utils/iconUtil";
 
+export type MotionOnlyRange = {
+  start_time: number;
+  end_time: number;
+};
+
 type useCameraActivityReturn = {
   enabled?: boolean;
   activeTracking: boolean;
@@ -204,9 +209,9 @@ export function useCameraMotionNextTimestamp(
       return [];
     }
 
-    const ranges = [];
-    let currentSegmentStart = null;
-    let currentSegmentEnd = null;
+    const ranges: [number, number][] = [];
+    let currentSegmentStart: number | null = null;
+    let currentSegmentEnd: number | null = null;
 
     // align motion start to timeline start
     const offset =
@@ -215,13 +220,19 @@ export function useCameraMotionNextTimestamp(
       segmentDuration;
 
     const startIndex = Math.abs(Math.floor(offset / 15));
+    const now = Date.now() / 1000;
 
     for (
       let i = startIndex;
       i < motionData.length;
       i = i + segmentDuration / 15
     ) {
-      const motionStart = motionData[i].start_time;
+      const motionStart = motionData[i]?.start_time;
+
+      if (motionStart == undefined) {
+        continue;
+      }
+
       const motionEnd = motionStart + segmentDuration;
 
       const segmentMotion = motionData
@@ -230,10 +241,10 @@ export function useCameraMotionNextTimestamp(
       const overlappingReviewItems = reviewItems.some(
         (item) =>
           (item.start_time >= motionStart && item.start_time < motionEnd) ||
-          ((item.end_time ?? Date.now() / 1000) > motionStart &&
-            (item.end_time ?? Date.now() / 1000) <= motionEnd) ||
+          ((item.end_time ?? now) > motionStart &&
+            (item.end_time ?? now) <= motionEnd) ||
           (item.start_time <= motionStart &&
-            (item.end_time ?? Date.now() / 1000) >= motionEnd),
+            (item.end_time ?? now) >= motionEnd),
       );
 
       if (!segmentMotion || overlappingReviewItems) {
@@ -241,16 +252,14 @@ export function useCameraMotionNextTimestamp(
           currentSegmentStart = motionStart;
         }
         currentSegmentEnd = motionEnd;
-      } else {
-        if (currentSegmentStart !== null) {
-          ranges.push([currentSegmentStart, currentSegmentEnd]);
-          currentSegmentStart = null;
-          currentSegmentEnd = null;
-        }
+      } else if (currentSegmentStart !== null && currentSegmentEnd !== null) {
+        ranges.push([currentSegmentStart, currentSegmentEnd]);
+        currentSegmentStart = null;
+        currentSegmentEnd = null;
       }
     }
 
-    if (currentSegmentStart !== null) {
+    if (currentSegmentStart !== null && currentSegmentEnd !== null) {
       ranges.push([currentSegmentStart, currentSegmentEnd]);
     }
 
@@ -304,3 +313,93 @@ export function useCameraMotionNextTimestamp(
 
   return nextTimestamp;
 }
+
+export function useCameraMotionOnlyRanges(
+  segmentDuration: number,
+  reviewItems: ReviewSegment[],
+  motionData: MotionData[],
+) {
+  const motionOnlyRanges = useMemo(() => {
+    if (!motionData?.length || !reviewItems) {
+      return [];
+    }
+
+    const fallbackBucketDuration = Math.max(1, segmentDuration / 2);
+    const normalizedMotionData = Array.from(
+      motionData
+        .reduce((accumulator, item) => {
+          const currentMotion = accumulator.get(item.start_time) ?? 0;
+          accumulator.set(
+            item.start_time,
+            Math.max(currentMotion, item.motion ?? 0),
+          );
+          return accumulator;
+        }, new Map<number, number>())
+        .entries(),
+    )
+      .map(([start_time, motion]) => ({ start_time, motion }))
+      .sort((left, right) => left.start_time - right.start_time);
+
+    const bucketRanges: MotionOnlyRange[] = [];
+    const now = Date.now() / 1000;
+
+    for (let i = 0; i < normalizedMotionData.length; i++) {
+      const motionStart = normalizedMotionData[i].start_time;
+      const motionEnd = motionStart + fallbackBucketDuration;
+
+      const overlappingReviewItems = reviewItems.some(
+        (item) =>
+          (item.start_time >= motionStart && item.start_time < motionEnd) ||
+          ((item.end_time ?? now) > motionStart &&
+            (item.end_time ?? now) <= motionEnd) ||
+          (item.start_time <= motionStart &&
+            (item.end_time ?? now) >= motionEnd),
+      );
+
+      const isMotionOnlySegment =
+        (normalizedMotionData[i].motion ?? 0) > 0 && !overlappingReviewItems;
+
+      if (!isMotionOnlySegment) {
+        continue;
+      }
+
+      bucketRanges.push({
+        start_time: motionStart,
+        end_time: motionEnd,
+      });
+    }
+
+    if (!bucketRanges.length) {
+      return [];
+    }
+
+    const mergedRanges = bucketRanges.reduce<MotionOnlyRange[]>(
+      (ranges, range) => {
+        if (!ranges.length) {
+          return [range];
+        }
+
+        const previousRange = ranges[ranges.length - 1];
+        const isContiguous =
+          range.start_time <= previousRange.end_time + 0.001 &&
+          range.start_time >= previousRange.end_time - 0.001;
+
+        if (isContiguous) {
+          previousRange.end_time = Math.max(
+            previousRange.end_time,
+            range.end_time,
+          );
+          return ranges;
+        }
+
+        ranges.push(range);
+        return ranges;
+      },
+      [],
+    );
+
+    return mergedRanges;
+  }, [motionData, reviewItems, segmentDuration]);
+
+  return motionOnlyRanges;
+}