Handle in progress review items

web/src/components/player/PreviewThumbnailPlayer.tsx

@@ -21,11 +21,14 @@ import { useSwipeable } from "react-swipeable";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import ImageLoadingIndicator from "../indicators/ImageLoadingIndicator";
 import useContextMenu from "@/hooks/use-contextmenu";
+import ActivityIndicator from "../indicators/activity-indicator";
+import { TimeRange } from "@/types/timeline";
 
 type PreviewPlayerProps = {
   review: ReviewSegment;
   allPreviews?: Preview[];
   scrollLock?: boolean;
+  timeRange: TimeRange;
   onTimeUpdate?: (time: number | undefined) => void;
   setReviewed: (review: ReviewSegment) => void;
   onClick: (review: ReviewSegment, ctrl: boolean) => void;
@@ -43,6 +46,7 @@ export default function PreviewThumbnailPlayer({
   review,
   allPreviews,
   scrollLock = false,
+  timeRange,
   setReviewed,
   onClick,
   onTimeUpdate,
@@ -70,8 +74,10 @@ export default function PreviewThumbnailPlayer({
   });
 
   const handleSetReviewed = useCallback(() => {
+    if (review.end_time) {
       review.has_been_reviewed = true;
       setReviewed(review);
+    }
   }, [review, setReviewed]);
 
   useContextMenu(imgRef, () => {
@@ -91,7 +97,7 @@ export default function PreviewThumbnailPlayer({
         return false;
       }
 
-      if (review.end_time > preview.end) {
+      if ((review.end_time ?? timeRange.before) > preview.end) {
         multiHour = true;
       }
 
@@ -108,7 +114,8 @@ export default function PreviewThumbnailPlayer({
 
     const firstPrev = allPreviews[firstIndex];
     const firstDuration = firstPrev.end - review.start_time;
-    const secondDuration = review.end_time - firstPrev.end;
+    const secondDuration =
+      (review.end_time ?? timeRange.before) - firstPrev.end;
 
     if (firstDuration > secondDuration) {
       // the first preview is longer than the second, return the first
@@ -123,7 +130,7 @@ export default function PreviewThumbnailPlayer({
 
       return undefined;
     }
-  }, [allPreviews, review]);
+  }, [allPreviews, review, timeRange]);
 
   // Hover Playback
 
@@ -183,6 +190,7 @@ export default function PreviewThumbnailPlayer({
           <PreviewContent
             review={review}
             relevantPreview={relevantPreview}
+            timeRange={timeRange}
             setReviewed={handleSetReviewed}
             setIgnoreClick={setIgnoreClick}
             isPlayingBack={setPlayback}
@@ -256,7 +264,13 @@ export default function PreviewThumbnailPlayer({
             <div className="absolute top-0 inset-x-0 rounded-t-l z-10 w-full h-[30%] bg-gradient-to-b from-black/60 to-transparent pointer-events-none"></div>
             <div className="absolute bottom-0 inset-x-0 rounded-b-l z-10 w-full h-[20%] bg-gradient-to-t from-black/60 to-transparent pointer-events-none">
               <div className="flex h-full justify-between items-end mx-3 pb-1 text-white text-sm">
+                {review.end_time ? (
                   <TimeAgo time={review.start_time * 1000} dense />
+                ) : (
+                  <div>
+                    <ActivityIndicator size={24} />
+                  </div>
+                )}
                 {formattedDate}
               </div>
             </div>
@@ -270,6 +284,7 @@ export default function PreviewThumbnailPlayer({
 type PreviewContentProps = {
   review: ReviewSegment;
   relevantPreview: Preview | undefined;
+  timeRange: TimeRange;
   setReviewed: () => void;
   setIgnoreClick: (ignore: boolean) => void;
   isPlayingBack: (ended: boolean) => void;
@@ -278,6 +293,7 @@ type PreviewContentProps = {
 function PreviewContent({
   review,
   relevantPreview,
+  timeRange,
   setReviewed,
   setIgnoreClick,
   isPlayingBack,
@@ -300,6 +316,7 @@ function PreviewContent({
     return (
       <InProgressPreview
         review={review}
+        timeRange={timeRange}
         setReviewed={setReviewed}
         setIgnoreClick={setIgnoreClick}
         isPlayingBack={isPlayingBack}
@@ -348,7 +365,10 @@ function VideoPreview({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const playerDuration = useMemo(
-    () => review.end_time - review.start_time + PREVIEW_PADDING,
+    () =>
+      (review.end_time ?? relevantPreview.end) -
+      review.start_time +
+      PREVIEW_PADDING,
     // we know that these deps are correct
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [],
@@ -551,6 +571,7 @@ function VideoPreview({
 const MIN_LOAD_TIMEOUT_MS = 200;
 type InProgressPreviewProps = {
   review: ReviewSegment;
+  timeRange: TimeRange;
   setReviewed: (reviewId: string) => void;
   setIgnoreClick: (ignore: boolean) => void;
   isPlayingBack: (ended: boolean) => void;
@@ -558,6 +579,7 @@ type InProgressPreviewProps = {
 };
 function InProgressPreview({
   review,
+  timeRange,
   setReviewed,
   setIgnoreClick,
   isPlayingBack,
@@ -567,7 +589,7 @@ function InProgressPreview({
   const sliderRef = useRef<HTMLDivElement | null>(null);
   const { data: previewFrames } = useSWR<string[]>(
     `preview/${review.camera}/start/${Math.floor(review.start_time) - PREVIEW_PADDING}/end/${
-      Math.ceil(review.end_time) + PREVIEW_PADDING
+      Math.ceil(review.end_time ?? timeRange.before) + PREVIEW_PADDING
     }/frames`,
     { revalidateOnFocus: false },
   );

web/src/pages/Events.tsx

@@ -204,7 +204,7 @@ export default function Events() {
           const newData = [...data];
 
           newData.forEach((seg) => {
-            if (seg.severity == severity) {
+            if (seg.end_time && seg.severity == severity) {
               seg.has_been_reviewed = true;
             }
           });
@@ -214,10 +214,16 @@ export default function Events() {
         { revalidate: false, populateCache: true },
       );
 
+      const itemsToMarkReviewed = currentItems
+        ?.filter((seg) => seg.end_time)
+        ?.map((seg) => seg.id);
+
+      if (itemsToMarkReviewed.length > 0) {
         await axios.post(`reviews/viewed`, {
-        ids: currentItems?.map((seg) => seg.id),
+          ids: itemsToMarkReviewed,
         });
         reloadData();
+      }
     },
     [reloadData, updateSegments],
   );

web/src/types/review.ts

@@ -3,7 +3,7 @@ export interface ReviewSegment {
   camera: string;
   severity: ReviewSeverity;
   start_time: number;
-  end_time: number;
+  end_time?: number;
   thumb_path: string;
   has_been_reviewed: boolean;
   data: ReviewData;

web/src/views/events/EventView.tsx

@@ -546,6 +546,7 @@ function DetectionReview({
                     <PreviewThumbnailPlayer
                       review={value}
                       allPreviews={relevantPreviews}
+                      timeRange={timeRange}
                       setReviewed={markItemAsReviewed}
                       scrollLock={scrollLock}
                       onTimeUpdate={onPreviewTimeUpdate}
@@ -787,16 +788,16 @@ 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;
+
           ((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;
+        });
 
         return matchingItem ? matchingItem.severity : null;
       }
@@ -805,6 +806,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]);