Break detection grid into separate function

web/src/components/player/DynamicVideoPlayer.tsx

@@ -144,6 +144,7 @@ export default function DynamicVideoPlayer({
   const initialPreviewSource = useMemo(() => {
     const preview = cameraPreviews.find(
       (preview) =>
+        preview.camera == camera &&
         Math.round(preview.start) >= timeRange.start &&
         Math.floor(preview.end) <= timeRange.end,
     );
@@ -191,6 +192,7 @@ export default function DynamicVideoPlayer({
 
     const preview = cameraPreviews.find(
       (preview) =>
+        preview.camera == camera &&
         Math.round(preview.start) >= timeRange.start &&
         Math.floor(preview.end) <= timeRange.end,
     );

web/src/utils/timelineUtil.tsx

@@ -120,7 +120,7 @@ export function getTimelineItemDescription(timelineItem: Timeline) {
   }
 }
 
-export function getChunkedTimeRange(timestamp: number) {
+export function getChunkedTimeDay(timestamp: number) {
   const endOfThisHour = new Date();
   endOfThisHour.setHours(endOfThisHour.getHours() + 1, 0, 0, 0);
   const data: { start: number; end: number }[] = [];
@@ -147,3 +147,33 @@ export function getChunkedTimeRange(timestamp: number) {
 
   return { start: startTimestamp, end, ranges: data };
 }
+
+export function getChunkedTimeRange(
+  startTimestamp: number,
+  endTimestamp: number,
+) {
+  const endOfThisHour = new Date();
+  endOfThisHour.setHours(endOfThisHour.getHours() + 1, 0, 0, 0);
+  const data: { start: number; end: number }[] = [];
+  const startDay = new Date(startTimestamp * 1000);
+  startDay.setMinutes(0, 0, 0);
+  let start = startDay.getTime() / 1000;
+  let end = 0;
+
+  while (end < endTimestamp) {
+    startDay.setHours(startDay.getHours() + 1);
+
+    if (startDay > endOfThisHour || startDay.getTime() / 1000 > endTimestamp) {
+      break;
+    }
+
+    end = endOfHourOrCurrentTime(startDay.getTime() / 1000);
+    data.push({
+      start,
+      end,
+    });
+    start = startDay.getTime() / 1000;
+  }
+
+  return { start: startTimestamp, end: endTimestamp, ranges: data };
+}

web/src/views/events/DesktopRecordingView.tsx

@@ -5,7 +5,7 @@ import EventReviewTimeline from "@/components/timeline/EventReviewTimeline";
 import { Button } from "@/components/ui/button";
 import { Preview } from "@/types/preview";
 import { ReviewSegment } from "@/types/review";
-import { getChunkedTimeRange } from "@/utils/timelineUtil";
+import { getChunkedTimeDay } from "@/utils/timelineUtil";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { IoMdArrowRoundBack } from "react-icons/io";
 import { useNavigate } from "react-router-dom";
@@ -31,7 +31,7 @@ export default function DesktopRecordingView({
   // timeline time
 
   const timeRange = useMemo(
-    () => getChunkedTimeRange(selectedReview.start_time),
+    () => getChunkedTimeDay(selectedReview.start_time),
     [selectedReview],
   );
   const [selectedRangeIdx, setSelectedRangeIdx] = useState(

web/src/views/events/EventView.tsx

@@ -2,6 +2,9 @@ import Logo from "@/components/Logo";
 import NewReviewData from "@/components/dynamic/NewReviewData";
 import ReviewActionGroup from "@/components/filter/ReviewActionGroup";
 import ReviewFilterGroup from "@/components/filter/ReviewFilterGroup";
+import DynamicVideoPlayer, {
+  DynamicVideoController,
+} from "@/components/player/DynamicVideoPlayer";
 import PreviewThumbnailPlayer from "@/components/player/PreviewThumbnailPlayer";
 import EventReviewTimeline from "@/components/timeline/EventReviewTimeline";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
@@ -10,14 +13,17 @@ import { useEventUtils } from "@/hooks/use-event-utils";
 import { useScrollLockout } from "@/hooks/use-mouse-listener";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { Preview } from "@/types/preview";
-import {
+import { ReviewFilter, ReviewSegment, ReviewSeverity } from "@/types/review";
-  ReviewFilter,
+import { getChunkedTimeRange } from "@/utils/timelineUtil";
-  ReviewSegment,
-  ReviewSeverity,
-  ReviewSummary,
-} from "@/types/review";
 import axios from "axios";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import {
+  MutableRefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import { isDesktop, isMobile } from "react-device-detect";
 import { LuFolderCheck } from "react-icons/lu";
 import { MdCircle } from "react-icons/md";
@@ -57,7 +63,6 @@ export default function EventView({
 }: EventViewProps) {
   const { data: config } = useSWR<FrigateConfig>("config");
   const contentRef = useRef<HTMLDivElement | null>(null);
-  const segmentDuration = 60;
 
   // review counts
 
@@ -122,11 +127,6 @@ export default function EventView({
     };
   }, [reviewPages]);
 
-  const { alignStartDateToTimeline } = useEventUtils(
-    reviewItems.all,
-    segmentDuration,
-  );
-
   const currentItems = useMemo(() => {
     const current = reviewItems[severity];
 
@@ -137,99 +137,7 @@ export default function EventView({
     return current;
   }, [reviewItems, severity]);
 
-  const showMinimap = useMemo(() => {
+  const pagingObserver = useRef<IntersectionObserver | null>(null);
-    if (!contentRef.current) {
-      return false;
-    }
-
-    return contentRef.current.scrollHeight > contentRef.current.clientHeight;
-    // we know that these deps are correct
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [contentRef.current?.scrollHeight, severity]);
-
-  // timeline interaction
-
-  const pagingObserver = useRef<IntersectionObserver | null>();
-  const lastReviewRef = useCallback(
-    (node: HTMLElement | null) => {
-      if (isValidating) return;
-      if (pagingObserver.current) pagingObserver.current.disconnect();
-      try {
-        pagingObserver.current = new IntersectionObserver((entries) => {
-          if (entries[0].isIntersecting && !reachedEnd) {
-            loadNextPage();
-          }
-        });
-        if (node) pagingObserver.current.observe(node);
-      } catch (e) {
-        // no op
-      }
-    },
-    [isValidating, reachedEnd, loadNextPage],
-  );
-
-  const [minimap, setMinimap] = useState<string[]>([]);
-  const minimapObserver = useRef<IntersectionObserver | null>();
-  useEffect(() => {
-    const visibleTimestamps = new Set<string>();
-    minimapObserver.current = new IntersectionObserver(
-      (entries) => {
-        entries.forEach((entry) => {
-          const start = (entry.target as HTMLElement).dataset.start;
-
-          if (!start) {
-            return;
-          }
-
-          if (entry.isIntersecting) {
-            visibleTimestamps.add(start);
-          } else {
-            visibleTimestamps.delete(start);
-          }
-
-          setMinimap([...visibleTimestamps]);
-        });
-      },
-      { root: contentRef.current, threshold: isDesktop ? 0.1 : 0.5 },
-    );
-
-    return () => {
-      minimapObserver.current?.disconnect();
-    };
-  }, [contentRef]);
-  const minimapRef = useCallback(
-    (node: HTMLElement | null) => {
-      if (!minimapObserver.current) {
-        return;
-      }
-
-      try {
-        if (node) minimapObserver.current.observe(node);
-      } catch (e) {
-        // no op
-      }
-    },
-    [minimapObserver],
-  );
-  const minimapBounds = useMemo(() => {
-    const data = {
-      start: 0,
-      end: 0,
-    };
-    const list = minimap.sort();
-
-    if (list.length > 0) {
-      data.end = parseFloat(list.at(-1) || "0");
-      data.start = parseFloat(list[0]);
-    }
-
-    return data;
-  }, [minimap]);
-
-  // preview playback
-
-  const [previewTime, setPreviewTime] = useState<number>();
-  const scrollLock = useScrollLockout(contentRef);
 
   // review interaction
 
@@ -339,82 +247,379 @@ export default function EventView({
       </div>
 
       <div className="flex h-full overflow-hidden">
-        <div
+        {severity != "significant_motion" && (
-          ref={contentRef}
+          <DetectionReview
-          className="flex flex-1 flex-wrap content-start gap-2 overflow-y-auto no-scrollbar"
-        >
-          {filter?.before == undefined && (
-            <NewReviewData
-              className="absolute w-full z-30"
-              contentRef={contentRef}
-              severity={severity}
-              pullLatestData={pullLatestData}
-            />
-          )}
-
-          {!isValidating && currentItems == null && (
-            <div className="size-full flex flex-col justify-center items-center">
-              <LuFolderCheck className="size-16" />
-              There are no {severity.replace(/_/g, " ")} items to review
-            </div>
-          )}
-
-          <div
-            className="w-full m-2 grid sm:grid-cols-2 md:grid-cols-3 3xl:grid-cols-4 gap-2 md:gap-4"
-            ref={contentRef}
-          >
-            {currentItems ? (
-              currentItems.map((value, segIdx) => {
-                const lastRow = segIdx == reviewItems[severity].length - 1;
-                const selected = selectedReviews.includes(value.id);
-
-                return (
-                  <div
-                    key={value.id}
-                    ref={lastRow ? lastReviewRef : minimapRef}
-                    data-start={value.start_time}
-                    data-segment-start={
-                      alignStartDateToTimeline(value.start_time) -
-                      segmentDuration
-                    }
-                    className={`outline outline-offset-1 rounded-lg shadow-none transition-all my-1 md:my-0 ${selected ? `outline-4 shadow-[0_0_6px_1px] outline-severity_${value.severity} shadow-severity_${value.severity}` : "outline-0 duration-500"}`}
-                  >
-                    <div className="aspect-video rounded-lg overflow-hidden">
-                      <PreviewThumbnailPlayer
-                        review={value}
-                        allPreviews={relevantPreviews}
-                        setReviewed={markItemAsReviewed}
-                        scrollLock={scrollLock}
-                        onTimeUpdate={setPreviewTime}
-                        onClick={onSelectReview}
-                      />
-                    </div>
-                    {lastRow && !reachedEnd && <ActivityIndicator />}
-                  </div>
-                );
-              })
-            ) : severity != "alert" ? (
-              <div ref={lastReviewRef} />
-            ) : null}
-          </div>
-        </div>
-        <div className="w-[55px] md:w-[100px] mt-2 overflow-y-auto no-scrollbar">
-          <EventReviewTimeline
-            segmentDuration={segmentDuration}
-            timestampSpread={15}
-            timelineStart={timeRange.before}
-            timelineEnd={timeRange.after}
-            showMinimap={showMinimap && !previewTime}
-            minimapStartTime={minimapBounds.start}
-            minimapEndTime={minimapBounds.end}
-            showHandlebar={previewTime != undefined}
-            handlebarTime={previewTime}
-            events={reviewItems.all}
-            severityType={severity}
             contentRef={contentRef}
+            currentItems={currentItems}
+            reviewItems={reviewItems}
+            relevantPreviews={relevantPreviews}
+            pagingObserver={pagingObserver}
+            selectedReviews={selectedReviews}
+            severity={severity}
+            filter={filter}
+            isValidating={isValidating}
+            reachedEnd={reachedEnd}
+            timeRange={timeRange}
+            loadNextPage={loadNextPage}
+            markItemAsReviewed={markItemAsReviewed}
+            onSelectReview={onSelectReview}
+            pullLatestData={pullLatestData}
           />
-        </div>
+        )}
+        {severity == "significant_motion" && (
+          <MotionReview
+            contentRef={contentRef}
+            reviewItems={reviewItems}
+            relevantPreviews={relevantPreviews}
+            timeRange={timeRange}
+            filter={filter}
+          />
+        )}
       </div>
     </div>
   );
 }
+
+type DetectionReviewProps = {
+  contentRef: MutableRefObject<HTMLDivElement | null>;
+  currentItems: ReviewSegment[] | null;
+  reviewItems: {
+    all: ReviewSegment[];
+    alert: ReviewSegment[];
+    detection: ReviewSegment[];
+    significant_motion: ReviewSegment[];
+  };
+  relevantPreviews?: Preview[];
+  pagingObserver: MutableRefObject<IntersectionObserver | null>;
+  selectedReviews: string[];
+  severity: ReviewSeverity;
+  filter?: ReviewFilter;
+  isValidating: boolean;
+  reachedEnd: boolean;
+  timeRange: { before: number; after: number };
+  loadNextPage: () => void;
+  markItemAsReviewed: (id: string) => void;
+  onSelectReview: (id: string, ctrl: boolean) => void;
+  pullLatestData: () => void;
+};
+function DetectionReview({
+  contentRef,
+  currentItems,
+  reviewItems,
+  relevantPreviews,
+  pagingObserver,
+  selectedReviews,
+  severity,
+  filter,
+  isValidating,
+  reachedEnd,
+  timeRange,
+  loadNextPage,
+  markItemAsReviewed,
+  onSelectReview,
+  pullLatestData,
+}: DetectionReviewProps) {
+  const segmentDuration = 60;
+
+  // preview
+
+  const [previewTime, setPreviewTime] = useState<number>();
+
+  // review interaction
+
+  const lastReviewRef = useCallback(
+    (node: HTMLElement | null) => {
+      if (isValidating) return;
+      if (pagingObserver.current) pagingObserver.current.disconnect();
+      try {
+        pagingObserver.current = new IntersectionObserver((entries) => {
+          if (entries[0].isIntersecting && !reachedEnd) {
+            loadNextPage();
+          }
+        });
+        if (node) pagingObserver.current.observe(node);
+      } catch (e) {
+        // no op
+      }
+    },
+    [isValidating, pagingObserver, reachedEnd, loadNextPage],
+  );
+
+  // timeline interaction
+
+  const { alignStartDateToTimeline } = useEventUtils(
+    reviewItems.all,
+    segmentDuration,
+  );
+
+  const scrollLock = useScrollLockout(contentRef);
+
+  const [minimap, setMinimap] = useState<string[]>([]);
+  const minimapObserver = useRef<IntersectionObserver | null>(null);
+  useEffect(() => {
+    const visibleTimestamps = new Set<string>();
+    minimapObserver.current = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          const start = (entry.target as HTMLElement).dataset.start;
+
+          if (!start) {
+            return;
+          }
+
+          if (entry.isIntersecting) {
+            visibleTimestamps.add(start);
+          } else {
+            visibleTimestamps.delete(start);
+          }
+
+          setMinimap([...visibleTimestamps]);
+        });
+      },
+      { root: contentRef.current, threshold: isDesktop ? 0.1 : 0.5 },
+    );
+
+    return () => {
+      minimapObserver.current?.disconnect();
+    };
+  }, [contentRef, minimapObserver]);
+
+  const minimapBounds = useMemo(() => {
+    const data = {
+      start: 0,
+      end: 0,
+    };
+    const list = minimap.sort();
+
+    if (list.length > 0) {
+      data.end = parseFloat(list.at(-1) || "0");
+      data.start = parseFloat(list[0]);
+    }
+
+    return data;
+  }, [minimap]);
+
+  const minimapRef = useCallback(
+    (node: HTMLElement | null) => {
+      if (!minimapObserver.current) {
+        return;
+      }
+
+      try {
+        if (node) minimapObserver.current.observe(node);
+      } catch (e) {
+        // no op
+      }
+    },
+    [minimapObserver],
+  );
+
+  const showMinimap = useMemo(() => {
+    if (!contentRef.current) {
+      return false;
+    }
+
+    return contentRef.current.scrollHeight > contentRef.current.clientHeight;
+    // we know that these deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [contentRef.current?.scrollHeight, severity]);
+
+  return (
+    <>
+      <div
+        ref={contentRef}
+        className="flex flex-1 flex-wrap content-start gap-2 overflow-y-auto no-scrollbar"
+      >
+        {filter?.before == undefined && (
+          <NewReviewData
+            className="absolute w-full z-30"
+            contentRef={contentRef}
+            severity={severity}
+            pullLatestData={pullLatestData}
+          />
+        )}
+
+        {!isValidating && currentItems == null && (
+          <div className="size-full flex flex-col justify-center items-center">
+            <LuFolderCheck className="size-16" />
+            There are no {severity.replace(/_/g, " ")} items to review
+          </div>
+        )}
+
+        <div
+          className="w-full m-2 grid sm:grid-cols-2 md:grid-cols-3 3xl:grid-cols-4 gap-2 md:gap-4"
+          ref={contentRef}
+        >
+          {currentItems ? (
+            currentItems.map((value, segIdx) => {
+              const lastRow = segIdx == currentItems.length - 1;
+              const selected = selectedReviews.includes(value.id);
+
+              return (
+                <div
+                  key={value.id}
+                  ref={lastRow ? lastReviewRef : minimapRef}
+                  data-start={value.start_time}
+                  data-segment-start={
+                    alignStartDateToTimeline(value.start_time) - segmentDuration
+                  }
+                  className={`outline outline-offset-1 rounded-lg shadow-none transition-all my-1 md:my-0 ${selected ? `outline-4 shadow-[0_0_6px_1px] outline-severity_${value.severity} shadow-severity_${value.severity}` : "outline-0 duration-500"}`}
+                >
+                  <div className="aspect-video rounded-lg overflow-hidden">
+                    <PreviewThumbnailPlayer
+                      review={value}
+                      allPreviews={relevantPreviews}
+                      setReviewed={markItemAsReviewed}
+                      scrollLock={scrollLock}
+                      onTimeUpdate={setPreviewTime}
+                      onClick={onSelectReview}
+                    />
+                  </div>
+                  {lastRow && !reachedEnd && <ActivityIndicator />}
+                </div>
+              );
+            })
+          ) : severity != "alert" ? (
+            <div ref={lastReviewRef} />
+          ) : null}
+        </div>
+      </div>
+      <div className="w-[55px] md:w-[100px] mt-2 overflow-y-auto no-scrollbar">
+        <EventReviewTimeline
+          segmentDuration={segmentDuration}
+          timestampSpread={15}
+          timelineStart={timeRange.before}
+          timelineEnd={timeRange.after}
+          showMinimap={showMinimap && !previewTime}
+          minimapStartTime={minimapBounds.start}
+          minimapEndTime={minimapBounds.end}
+          showHandlebar={previewTime != undefined}
+          handlebarTime={previewTime}
+          events={reviewItems.all}
+          severityType={severity}
+          contentRef={contentRef}
+        />
+      </div>
+    </>
+  );
+}
+
+type MotionReviewProps = {
+  contentRef: MutableRefObject<HTMLDivElement | null>;
+  reviewItems: {
+    all: ReviewSegment[];
+    alert: ReviewSegment[];
+    detection: ReviewSegment[];
+    significant_motion: ReviewSegment[];
+  };
+  relevantPreviews?: Preview[];
+  timeRange: { before: number; after: number };
+  filter?: ReviewFilter;
+};
+function MotionReview({
+  contentRef,
+  reviewItems,
+  relevantPreviews,
+  timeRange,
+  filter,
+}: MotionReviewProps) {
+  const segmentDuration = 30;
+  const { data: config } = useSWR<FrigateConfig>("config");
+
+  const reviewCameras = useMemo(() => {
+    if (!config) {
+      return [];
+    }
+
+    let cameras;
+    if (!filter || !filter.cameras) {
+      cameras = Object.values(config.cameras).filter(
+        (cam) => cam.name == "front_cam",
+      );
+    } else {
+      const filteredCams = filter.cameras;
+
+      cameras = Object.values(config.cameras).filter((cam) =>
+        filteredCams.includes(cam.name),
+      );
+    }
+
+    return cameras.sort((a, b) => a.ui.order - b.ui.order);
+  }, [config, filter]);
+
+  const videoPlayersRef = useRef<{ [camera: string]: DynamicVideoController }>(
+    {},
+  );
+
+  // timeline time
+
+  const lastFullHour = useMemo(() => {
+    const end = new Date(timeRange.before * 1000);
+    end.setMinutes(0, 0, 0);
+    return end.getTime() / 1000;
+  }, [timeRange]);
+  const timeRangeSegments = useMemo(
+    () => getChunkedTimeRange(timeRange.after, lastFullHour),
+    [lastFullHour, timeRange],
+  );
+  const [selectedRangeIdx, setSelectedRangeIdx] = useState(
+    timeRangeSegments.ranges.length - 1,
+  );
+  const [currentTime, setCurrentTime] = useState<number>(
+    timeRangeSegments.ranges[selectedRangeIdx].start,
+  );
+
+  useEffect(() => {
+    Object.values(videoPlayersRef.current).forEach((controller) => {
+      controller.scrubToTimestamp(currentTime);
+    });
+  }, [currentTime]);
+
+  return (
+    <>
+      <div
+        ref={contentRef}
+        className={`size-full mt-4 grid sm:grid-cols-2 xl:grid-cols-3 3xl:grid-cols-4 gap-2 md:gap-4`}
+      >
+        {reviewCameras.map((camera) => {
+          let grow;
+          const aspectRatio = camera.detect.width / camera.detect.height;
+          if (aspectRatio > 2) {
+            grow = "sm:col-span-2 aspect-wide";
+          } else if (aspectRatio < 1) {
+            grow = "md:row-span-2 md:h-full aspect-tall";
+          } else {
+            grow = "aspect-video";
+          }
+          return (
+            <div key={camera.name} className={`${grow}`}>
+              <DynamicVideoPlayer
+                camera={camera.name}
+                timeRange={timeRangeSegments.ranges[selectedRangeIdx]}
+                cameraPreviews={relevantPreviews || []}
+                onControllerReady={(controller) => {
+                  videoPlayersRef.current[camera.name] = controller;
+                  //setPlayerReady(true);
+                }}
+              />
+            </div>
+          );
+        })}
+      </div>
+      <div className="w-[55px] md:w-[100px] mt-2 overflow-y-auto no-scrollbar">
+        <EventReviewTimeline
+          segmentDuration={segmentDuration}
+          timestampSpread={15}
+          timelineStart={timeRangeSegments.end}
+          timelineEnd={timeRangeSegments.start}
+          showHandlebar
+          handlebarTime={currentTime}
+          setHandlebarTime={setCurrentTime}
+          events={reviewItems.all}
+          severityType="significant_motion"
+          contentRef={contentRef}
+        />
+      </div>
+    </>
+  );
+}