Ongoing review segments (#10924)

* Update review maintainer to save events when ongoing

* Handle previews for in progress review items

* Reset DB items in app

* Handle in progress review items

* Scroll back down to selected event item

* Handle undefined end time

* Formatting

* remove unused

* Make export handles have full resolution

* reduce preview thumbnail props

* fix missing return

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

---------

Co-authored-by: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>

web/src/views/events/EventView.tsx

@@ -43,6 +43,7 @@ import { TimeRange } from "@/types/timeline";
 import { useCameraMotionNextTimestamp } from "@/hooks/use-camera-activity";
 import useOptimisticState from "@/hooks/use-optimistic-state";
 import { Skeleton } from "@/components/ui/skeleton";
+import scrollIntoView from "scroll-into-view-if-needed";
 
 type EventViewProps = {
   reviews?: ReviewSegment[];
@@ -293,6 +294,7 @@ export default function EventView({
             severity={severity}
             filter={filter}
             timeRange={timeRange}
+            startTime={startTime}
             markItemAsReviewed={markItemAsReviewed}
             markAllItemsAsReviewed={markAllItemsAsReviewed}
             onSelectReview={onSelectReview}
@@ -331,6 +333,7 @@ type DetectionReviewProps = {
   severity: ReviewSeverity;
   filter?: ReviewFilter;
   timeRange: { before: number; after: number };
+  startTime?: number;
   markItemAsReviewed: (review: ReviewSegment) => void;
   markAllItemsAsReviewed: (currentItems: ReviewSegment[]) => void;
   onSelectReview: (review: ReviewSegment, ctrl: boolean) => void;
@@ -345,6 +348,7 @@ function DetectionReview({
   severity,
   filter,
   timeRange,
+  startTime,
   markItemAsReviewed,
   markAllItemsAsReviewed,
   onSelectReview,
@@ -495,6 +499,26 @@ function DetectionReview({
     [minimap],
   );
 
+  // existing review item
+
+  useEffect(() => {
+    if (!startTime || !currentItems || currentItems.length == 0) {
+      return;
+    }
+
+    const element = contentRef.current?.querySelector(
+      `[data-start="${startTime}"]`,
+    );
+    if (element) {
+      scrollIntoView(element, {
+        scrollMode: "if-needed",
+        behavior: "smooth",
+      });
+    }
+    // only run when start time changes
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [startTime]);
+
   return (
     <>
       <div
@@ -546,6 +570,7 @@ function DetectionReview({
                     <PreviewThumbnailPlayer
                       review={value}
                       allPreviews={relevantPreviews}
+                      timeRange={timeRange}
                       setReviewed={markItemAsReviewed}
                       scrollLock={scrollLock}
                       onTimeUpdate={onPreviewTimeUpdate}
@@ -787,16 +812,23 @@ function MotionReview({
       } else {
         const segmentStartTime = alignStartDateToTimeline(currentTime);
         const segmentEndTime = segmentStartTime + segmentDuration;
-        const matchingItem = reviewItems?.all.find(
-          (item) =>
+        const matchingItem = reviewItems?.all.find((item) => {
+          const endTime = item.end_time ?? timeRange.before;
+
+          return (
             ((item.start_time >= segmentStartTime &&
               item.start_time < segmentEndTime) ||
-              (item.end_time > segmentStartTime &&
-                item.end_time <= segmentEndTime) ||
+              (endTime > segmentStartTime && endTime <= segmentEndTime) ||
               (item.start_time <= segmentStartTime &&
-                item.end_time >= segmentEndTime)) &&
-            item.camera === cameraName,
-        );
+                endTime >= segmentEndTime)) &&
+            item.camera === cameraName
+          );
+            item.start_time < segmentEndTime) ||
+            (endTime > segmentStartTime && endTime <= segmentEndTime) ||
+            (item.start_time <= segmentStartTime &&
+              endTime >= segmentEndTime)) &&
+            item.camera === cameraName;
+        });
 
         return matchingItem ? matchingItem.severity : null;
       }
@@ -805,6 +837,7 @@ function MotionReview({
       reviewItems,
       motionData,
       currentTime,
+      timeRange,
       motionOnly,
       alignStartDateToTimeline,
     ],

web/src/views/live/LiveDashboardView.tsx

@@ -47,8 +47,8 @@ export default function LiveDashboardView({
     }
 
     // if event is ended and was saved, update events list
-    if (eventUpdate.type == "end" && eventUpdate.review.severity == "alert") {
-      setTimeout(() => updateEvents(), 1000);
+    if (eventUpdate.review.severity == "alert") {
+      setTimeout(() => updateEvents(), eventUpdate.type == "end" ? 1000 : 6000);
       return;
     }
   }, [eventUpdate, updateEvents]);