Prepare for using motion data timeline

frigate/api/review.py

@@ -295,17 +295,17 @@ def review_activity():
     for rec in all_recordings:
         factor = 0.1 if rec.objects > 0 else 1.0
         data.append({
-            "date": rec.start_time,
+            "start_time": rec.start_time,
             "motion": rec.motion * factor,
             "audio": rec.dBFS * factor,
         })
 
     # resample data using pandas to get activity on scaled basis
-    df = pd.DataFrame(data, columns=["date", "motion", "audio"])
+    df = pd.DataFrame(data, columns=["start_time", "motion", "audio"])
 
     # set date as datetime index
-    df["date"] = pd.to_datetime(df["date"], unit="s")
-    df.set_index(["date"], inplace=True)
+    df["start_time"] = pd.to_datetime(df["start_time"], unit="s")
+    df.set_index(["start_time"], inplace=True)
 
     # normalize data
     df = df.resample(f"{scale}S").mean().fillna(0.0)

web/src/types/review.ts

@@ -37,3 +37,9 @@ export type ReviewSummary = {
   total_detection: number;
   total_motion: number;
 };
+
+export type MotionData = {
+  start_time: number;
+  motion: number;
+  audio: number;
+};

web/src/views/events/EventView.tsx

@@ -14,6 +14,7 @@ import { useScrollLockout } from "@/hooks/use-mouse-listener";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { Preview } from "@/types/preview";
 import {
+  MotionData,
   ReviewFilter,
   ReviewSegment,
   ReviewSeverity,
@@ -33,6 +34,7 @@ import { isDesktop, isMobile } from "react-device-detect";
 import { LuFolderCheck } from "react-icons/lu";
 import { MdCircle } from "react-icons/md";
 import useSWR from "swr";
+import MotionReviewTimeline from "@/components/timeline/MotionReviewTimeline";
 
 type EventViewProps = {
   reviewPages?: ReviewSegment[][];
@@ -561,6 +563,13 @@ function MotionReview({
     {},
   );
 
+  // motion data
+
+  const { data: motionData } = useSWR<MotionData[]>([
+    "review/activity",
+    { before: timeRange.before, after: timeRange.after },
+  ]);
+
   // timeline time
 
   const lastFullHour = useMemo(() => {
@@ -580,6 +589,7 @@ function MotionReview({
   );
 
   // move to next clip
+
   useEffect(() => {
     if (
       !videoPlayersRef.current &&
@@ -643,7 +653,7 @@ function MotionReview({
         })}
       </div>
       <div className="w-[55px] md:w-[100px] mt-2 overflow-y-auto no-scrollbar">
-        <EventReviewTimeline
+        <MotionReviewTimeline
           segmentDuration={segmentDuration}
           timestampSpread={15}
           timelineStart={timeRangeSegments.end}
@@ -652,6 +662,7 @@ function MotionReview({
           handlebarTime={currentTime}
           setHandlebarTime={setCurrentTime}
           events={reviewItems.all}
+          motion_events={motionData ?? []}
           severityType="significant_motion"
           contentRef={contentRef}
         />