Motion review timeline (#10235)

* initial motion and audio timeline with dummy data

* initial motion and audio timeline with dummy data

web/src/components/timeline/EventReviewTimeline.tsx

@@ -10,6 +10,7 @@ import {
 import EventSegment from "./EventSegment";
 import { useEventUtils } from "@/hooks/use-event-utils";
 import { ReviewSegment, ReviewSeverity } from "@/types/review";
+import ReviewTimeline from "./ReviewTimeline";
 
 export type EventReviewTimelineProps = {
   segmentDuration: number;
@@ -48,7 +49,6 @@ export function EventReviewTimeline({
   const scrollTimeRef = useRef<HTMLDivElement>(null);
   const timelineRef = useRef<HTMLDivElement>(null);
   const handlebarTimeRef = useRef<HTMLDivElement>(null);
-  const observer = useRef<ResizeObserver | null>(null);
   const timelineDuration = useMemo(
     () => timelineStart - timelineEnd,
     [timelineEnd, timelineStart],
@@ -77,28 +77,6 @@ export function EventReviewTimeline({
       handlebarTimeRef,
     });
 
-  function handleResize() {
-    // TODO: handle screen resize for mobile
-    // eslint-disable-next-line no-empty
-    if (timelineRef.current && contentRef.current) {
-    }
-  }
-
-  useEffect(() => {
-    if (contentRef.current) {
-      const content = contentRef.current;
-      observer.current = new ResizeObserver(() => {
-        handleResize();
-      });
-      observer.current.observe(content);
-      return () => {
-        observer.current?.unobserve(content);
-      };
-    }
-    // should only be calculated at beginning
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   // Generate segments for the timeline
   const generateSegments = useCallback(() => {
     const segmentCount = timelineDuration / segmentDuration;
@@ -158,46 +136,19 @@ export function EventReviewTimeline({
   }, [isDragging, onHandlebarDraggingChange]);
 
   return (
-    <div
+    <ReviewTimeline
-      ref={timelineRef}
+      timelineRef={timelineRef}
-      onMouseMove={handleMouseMove}
+      scrollTimeRef={scrollTimeRef}
-      onTouchMove={handleMouseMove}
+      handlebarTimeRef={handlebarTimeRef}
-      onMouseUp={handleMouseUp}
+      handleMouseMove={handleMouseMove}
-      onTouchEnd={handleMouseUp}
+      handleMouseUp={handleMouseUp}
-      className={`relative h-full overflow-y-scroll no-scrollbar bg-secondary ${
+      handleMouseDown={handleMouseDown}
-        isDragging && showHandlebar ? "cursor-grabbing" : "cursor-auto"
+      segmentDuration={segmentDuration}
-      }`}
+      showHandlebar={showHandlebar}
+      isDragging={isDragging}
     >
-      <div className="flex flex-col">{segments}</div>
+      {segments}
-      {showHandlebar && (
+    </ReviewTimeline>
-        <div className={`absolute left-0 top-0 z-20 w-full `} role="scrollbar">
-          <div
-            className="flex items-center justify-center touch-none select-none"
-            onMouseDown={handleMouseDown}
-            onTouchStart={handleMouseDown}
-          >
-            <div
-              ref={scrollTimeRef}
-              className={`relative w-full ${
-                isDragging ? "cursor-grabbing" : "cursor-grab"
-              }`}
-            >
-              <div
-                className={`bg-destructive rounded-full mx-auto ${
-                  segmentDuration < 60 ? "w-16 md:w-20" : "w-12 md:w-16"
-                } h-5 flex items-center justify-center`}
-              >
-                <div
-                  ref={handlebarTimeRef}
-                  className="text-white text-[8px] md:text-xs z-10"
-                ></div>
-              </div>
-              <div className="absolute h-1 w-full bg-destructive top-1/2 transform -translate-y-1/2"></div>
-            </div>
-          </div>
-        </div>
-      )}
-    </div>
   );
 }
 

web/src/components/timeline/EventSegment.tsx

@@ -1,6 +1,6 @@
 import { useApiHost } from "@/api";
 import { useEventUtils } from "@/hooks/use-event-utils";
-import { useSegmentUtils } from "@/hooks/use-segment-utils";
+import { useEventSegmentUtils } from "@/hooks/use-event-segment-utils";
 import { ReviewSegment, ReviewSeverity } from "@/types/review";
 import React, {
   RefObject,
@@ -9,7 +9,6 @@ import React, {
   useMemo,
   useRef,
 } from "react";
-import { isDesktop } from "react-device-detect";
 import {
   HoverCard,
   HoverCardContent,
@@ -17,6 +16,7 @@ import {
 } from "../ui/hover-card";
 import { HoverCardPortal } from "@radix-ui/react-hover-card";
 import scrollIntoView from "scroll-into-view-if-needed";
+import { MinimapBounds, Tick, Timestamp } from "./segment-metadata";
 
 type EventSegmentProps = {
   events: ReviewSegment[];
@@ -30,105 +30,6 @@ type EventSegmentProps = {
   contentRef: RefObject<HTMLDivElement>;
 };
 
-type MinimapSegmentProps = {
-  isFirstSegmentInMinimap: boolean;
-  isLastSegmentInMinimap: boolean;
-  alignedMinimapStartTime: number;
-  alignedMinimapEndTime: number;
-  firstMinimapSegmentRef: React.MutableRefObject<HTMLDivElement | null>;
-};
-
-type TickSegmentProps = {
-  timestamp: Date;
-  timestampSpread: number;
-};
-
-type TimestampSegmentProps = {
-  isFirstSegmentInMinimap: boolean;
-  isLastSegmentInMinimap: boolean;
-  timestamp: Date;
-  timestampSpread: number;
-  segmentKey: number;
-};
-
-function MinimapBounds({
-  isFirstSegmentInMinimap,
-  isLastSegmentInMinimap,
-  alignedMinimapStartTime,
-  alignedMinimapEndTime,
-  firstMinimapSegmentRef,
-}: MinimapSegmentProps) {
-  return (
-    <>
-      {isFirstSegmentInMinimap && (
-        <div
-          className="absolute inset-0 -bottom-7 w-full flex items-center justify-center text-primary-foreground font-medium z-20 text-center text-[10px] scroll-mt-8"
-          ref={firstMinimapSegmentRef}
-        >
-          {new Date(alignedMinimapStartTime * 1000).toLocaleTimeString([], {
-            hour: "2-digit",
-            minute: "2-digit",
-            ...(isDesktop && { month: "short", day: "2-digit" }),
-          })}
-        </div>
-      )}
-
-      {isLastSegmentInMinimap && (
-        <div className="absolute inset-0 -top-3 w-full flex items-center justify-center text-primary-foreground font-medium z-20 text-center text-[10px]">
-          {new Date(alignedMinimapEndTime * 1000).toLocaleTimeString([], {
-            hour: "2-digit",
-            minute: "2-digit",
-            ...(isDesktop && { month: "short", day: "2-digit" }),
-          })}
-        </div>
-      )}
-    </>
-  );
-}
-
-function Tick({ timestamp, timestampSpread }: TickSegmentProps) {
-  return (
-    <div className="absolute">
-      <div className="flex items-end content-end w-[12px] h-2">
-        <div
-          className={`h-0.5 ${
-            timestamp.getMinutes() % timestampSpread === 0 &&
-            timestamp.getSeconds() === 0
-              ? "w-[12px] bg-gray-400"
-              : "w-[8px] bg-gray-600"
-          }`}
-        ></div>
-      </div>
-    </div>
-  );
-}
-
-function Timestamp({
-  isFirstSegmentInMinimap,
-  isLastSegmentInMinimap,
-  timestamp,
-  timestampSpread,
-  segmentKey,
-}: TimestampSegmentProps) {
-  return (
-    <div className="absolute left-[15px] top-[1px] h-2 z-10">
-      {!isFirstSegmentInMinimap && !isLastSegmentInMinimap && (
-        <div
-          key={`${segmentKey}_timestamp`}
-          className="text-[8px] text-gray-400"
-        >
-          {timestamp.getMinutes() % timestampSpread === 0 &&
-            timestamp.getSeconds() === 0 &&
-            timestamp.toLocaleTimeString([], {
-              hour: "2-digit",
-              minute: "2-digit",
-            })}
-        </div>
-      )}
-    </div>
-  );
-}
-
 export function EventSegment({
   events,
   segmentTime,
@@ -147,7 +48,7 @@ export function EventSegment({
     shouldShowRoundedCorners,
     getEventStart,
     getEventThumbnail,
-  } = useSegmentUtils(segmentDuration, events, severityType);
+  } = useEventSegmentUtils(segmentDuration, events, severityType);
 
   const { alignStartDateToTimeline, alignEndDateToTimeline } = useEventUtils(
     events,
@@ -294,11 +195,7 @@ export function EventSegment({
   }, [startTimestamp]);
 
   return (
-    <div
+    <div key={segmentKey} className={segmentClasses}>
-      key={segmentKey}
-      className={segmentClasses}
-      data-segment-time={new Date(segmentTime * 1000)}
-    >
       <MinimapBounds
         isFirstSegmentInMinimap={isFirstSegmentInMinimap}
         isLastSegmentInMinimap={isLastSegmentInMinimap}
@@ -317,7 +214,7 @@ export function EventSegment({
         segmentKey={segmentKey}
       />
 
-      {severity.map((severityValue, index) => (
+      {severity.map((severityValue: number, index: number) => (
         <React.Fragment key={index}>
           {severityValue === displaySeverityType && (
             <HoverCard openDelay={200} closeDelay={100}>

web/src/components/timeline/MotionReviewTimeline.tsx

@@ -0,0 +1,157 @@
+import useDraggableHandler from "@/hooks/use-handle-dragging";
+import {
+  useEffect,
+  useCallback,
+  useMemo,
+  useRef,
+  useState,
+  RefObject,
+} from "react";
+import MotionSegment from "./MotionSegment";
+import { useEventUtils } from "@/hooks/use-event-utils";
+import { ReviewSegment, ReviewSeverity } from "@/types/review";
+import ReviewTimeline from "./ReviewTimeline";
+import { MockMotionData } from "@/pages/UIPlayground";
+
+export type MotionReviewTimelineProps = {
+  segmentDuration: number;
+  timestampSpread: number;
+  timelineStart: number;
+  timelineEnd: number;
+  showHandlebar?: boolean;
+  handlebarTime?: number;
+  setHandlebarTime?: React.Dispatch<React.SetStateAction<number>>;
+  showMinimap?: boolean;
+  minimapStartTime?: number;
+  minimapEndTime?: number;
+  events: ReviewSegment[];
+  motion_events: MockMotionData[];
+  severityType: ReviewSeverity;
+  contentRef: RefObject<HTMLDivElement>;
+  onHandlebarDraggingChange?: (isDragging: boolean) => void;
+};
+
+export function MotionReviewTimeline({
+  segmentDuration,
+  timestampSpread,
+  timelineStart,
+  timelineEnd,
+  showHandlebar = false,
+  handlebarTime,
+  setHandlebarTime,
+  showMinimap = false,
+  minimapStartTime,
+  minimapEndTime,
+  events,
+  motion_events,
+  contentRef,
+  onHandlebarDraggingChange,
+}: MotionReviewTimelineProps) {
+  const [isDragging, setIsDragging] = useState(false);
+  const scrollTimeRef = useRef<HTMLDivElement>(null);
+  const timelineRef = useRef<HTMLDivElement>(null);
+  const handlebarTimeRef = useRef<HTMLDivElement>(null);
+  const timelineDuration = useMemo(
+    () => timelineStart - timelineEnd,
+    [timelineEnd, timelineStart],
+  );
+
+  const { alignStartDateToTimeline, alignEndDateToTimeline } = useEventUtils(
+    events,
+    segmentDuration,
+  );
+
+  const { handleMouseDown, handleMouseUp, handleMouseMove } =
+    useDraggableHandler({
+      contentRef,
+      timelineRef,
+      scrollTimeRef,
+      alignStartDateToTimeline,
+      alignEndDateToTimeline,
+      segmentDuration,
+      showHandlebar,
+      handlebarTime,
+      setHandlebarTime,
+      timelineDuration,
+      timelineStart,
+      isDragging,
+      setIsDragging,
+      handlebarTimeRef,
+    });
+
+  // Generate segments for the timeline
+  const generateSegments = useCallback(() => {
+    const segmentCount = timelineDuration / segmentDuration;
+    const segmentAlignedTime = alignStartDateToTimeline(timelineStart);
+
+    return Array.from({ length: segmentCount }, (_, index) => {
+      const segmentTime = segmentAlignedTime - index * segmentDuration;
+
+      return (
+        <MotionSegment
+          key={segmentTime}
+          events={events}
+          motion_events={motion_events}
+          segmentDuration={segmentDuration}
+          segmentTime={segmentTime}
+          timestampSpread={timestampSpread}
+          showMinimap={showMinimap}
+          minimapStartTime={minimapStartTime}
+          minimapEndTime={minimapEndTime}
+          contentRef={contentRef}
+        />
+      );
+    });
+    // we know that these deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [
+    segmentDuration,
+    timestampSpread,
+    timelineStart,
+    timelineDuration,
+    showMinimap,
+    minimapStartTime,
+    minimapEndTime,
+    events,
+  ]);
+
+  const segments = useMemo(
+    () => generateSegments(),
+    // we know that these deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [
+      segmentDuration,
+      timestampSpread,
+      timelineStart,
+      timelineDuration,
+      showMinimap,
+      minimapStartTime,
+      minimapEndTime,
+      events,
+    ],
+  );
+
+  useEffect(() => {
+    if (onHandlebarDraggingChange) {
+      onHandlebarDraggingChange(isDragging);
+    }
+  }, [isDragging, onHandlebarDraggingChange]);
+
+  return (
+    <ReviewTimeline
+      timelineRef={timelineRef}
+      scrollTimeRef={scrollTimeRef}
+      handlebarTimeRef={handlebarTimeRef}
+      handleMouseMove={handleMouseMove}
+      handleMouseUp={handleMouseUp}
+      handleMouseDown={handleMouseDown}
+      segmentDuration={segmentDuration}
+      showHandlebar={showHandlebar}
+      isDragging={isDragging}
+    >
+      {segments}
+    </ReviewTimeline>
+  );
+}
+
+export default MotionReviewTimeline;

web/src/components/timeline/MotionSegment.tsx

@@ -0,0 +1,307 @@
+import { useEventUtils } from "@/hooks/use-event-utils";
+import { useEventSegmentUtils } from "@/hooks/use-event-segment-utils";
+import { ReviewSegment } from "@/types/review";
+import React, {
+  RefObject,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+} from "react";
+import scrollIntoView from "scroll-into-view-if-needed";
+import { MinimapBounds, Tick, Timestamp } from "./segment-metadata";
+import { MockMotionData } from "@/pages/UIPlayground";
+import { useMotionSegmentUtils } from "@/hooks/use-motion-segment-utils";
+import { isMobile } from "react-device-detect";
+
+type MotionSegmentProps = {
+  events: ReviewSegment[];
+  motion_events: MockMotionData[];
+  segmentTime: number;
+  segmentDuration: number;
+  timestampSpread: number;
+  showMinimap: boolean;
+  minimapStartTime?: number;
+  minimapEndTime?: number;
+  contentRef: RefObject<HTMLDivElement>;
+};
+
+export function MotionSegment({
+  events,
+  motion_events,
+  segmentTime,
+  segmentDuration,
+  timestampSpread,
+  showMinimap,
+  minimapStartTime,
+  minimapEndTime,
+  contentRef,
+}: MotionSegmentProps) {
+  const severityType = "all";
+  const {
+    getSeverity,
+    getReviewed,
+    displaySeverityType,
+    shouldShowRoundedCorners,
+    getEventStart,
+  } = useEventSegmentUtils(segmentDuration, events, severityType);
+
+  const {
+    getMotionSegmentValue,
+    getAudioSegmentValue,
+    interpolateMotionAudioData,
+  } = useMotionSegmentUtils(segmentDuration, motion_events);
+
+  const { alignStartDateToTimeline, alignEndDateToTimeline } = useEventUtils(
+    events,
+    segmentDuration,
+  );
+
+  const severity = useMemo(
+    () => getSeverity(segmentTime, displaySeverityType),
+    // we know that these deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [getSeverity, segmentTime],
+  );
+
+  const reviewed = useMemo(
+    () => getReviewed(segmentTime),
+    [getReviewed, segmentTime],
+  );
+
+  const { roundTopSecondary, roundBottomSecondary } = useMemo(
+    () => shouldShowRoundedCorners(segmentTime),
+    [shouldShowRoundedCorners, segmentTime],
+  );
+
+  const startTimestamp = useMemo(() => {
+    const eventStart = getEventStart(segmentTime);
+    if (eventStart) {
+      return alignStartDateToTimeline(eventStart);
+    }
+    // we know that these deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [getEventStart, segmentTime]);
+
+  const timestamp = useMemo(() => new Date(segmentTime * 1000), [segmentTime]);
+  const segmentKey = useMemo(() => segmentTime, [segmentTime]);
+
+  const maxSegmentWidth = useMemo(() => {
+    return isMobile ? 15 : 25;
+  }, []);
+
+  const alignedMinimapStartTime = useMemo(
+    () => alignStartDateToTimeline(minimapStartTime ?? 0),
+    [minimapStartTime, alignStartDateToTimeline],
+  );
+  const alignedMinimapEndTime = useMemo(
+    () => alignEndDateToTimeline(minimapEndTime ?? 0),
+    [minimapEndTime, alignEndDateToTimeline],
+  );
+
+  const isInMinimapRange = useMemo(() => {
+    return (
+      showMinimap &&
+      segmentTime >= alignedMinimapStartTime &&
+      segmentTime < alignedMinimapEndTime
+    );
+  }, [
+    showMinimap,
+    alignedMinimapStartTime,
+    alignedMinimapEndTime,
+    segmentTime,
+  ]);
+
+  const isFirstSegmentInMinimap = useMemo(() => {
+    return showMinimap && segmentTime === alignedMinimapStartTime;
+  }, [showMinimap, segmentTime, alignedMinimapStartTime]);
+
+  const isLastSegmentInMinimap = useMemo(() => {
+    return showMinimap && segmentTime === alignedMinimapEndTime;
+  }, [showMinimap, segmentTime, alignedMinimapEndTime]);
+
+  const firstMinimapSegmentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    // Check if the first segment is out of view
+    const firstSegment = firstMinimapSegmentRef.current;
+    if (firstSegment && showMinimap && isFirstSegmentInMinimap) {
+      scrollIntoView(firstSegment, {
+        scrollMode: "if-needed",
+        behavior: "smooth",
+      });
+    }
+    // we know that these deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [showMinimap, isFirstSegmentInMinimap, events, segmentDuration]);
+
+  const segmentClasses = `h-2 relative w-full ${
+    showMinimap
+      ? isInMinimapRange
+        ? "bg-secondary-highlight"
+        : isLastSegmentInMinimap
+          ? ""
+          : "opacity-70"
+      : ""
+  } ${
+    isFirstSegmentInMinimap || isLastSegmentInMinimap
+      ? "relative h-2 border-b-2 border-gray-500"
+      : ""
+  }`;
+
+  const severityColors: { [key: number]: string } = {
+    1: reviewed
+      ? "from-severity_motion-dimmed/50 to-severity_motion/50"
+      : "from-severity_motion-dimmed to-severity_motion",
+    2: reviewed
+      ? "from-severity_detection-dimmed/50 to-severity_detection/50"
+      : "from-severity_detection-dimmed to-severity_detection",
+    3: reviewed
+      ? "from-severity_alert-dimmed/50 to-severity_alert/50"
+      : "from-severity_alert-dimmed to-severity_alert",
+  };
+
+  const segmentClick = useCallback(() => {
+    if (contentRef.current && startTimestamp) {
+      const element = contentRef.current.querySelector(
+        `[data-segment-start="${startTimestamp - segmentDuration}"]`,
+      );
+      if (element instanceof HTMLElement) {
+        scrollIntoView(element, {
+          scrollMode: "if-needed",
+          behavior: "smooth",
+        });
+        element.classList.add(
+          `outline-severity_${severityType}`,
+          `shadow-severity_${severityType}`,
+        );
+        element.classList.add("outline-4", "shadow-[0_0_6px_1px]");
+        element.classList.remove("outline-0", "shadow-none");
+
+        // Remove the classes after a short timeout
+        setTimeout(() => {
+          element.classList.remove("outline-4", "shadow-[0_0_6px_1px]");
+          element.classList.add("outline-0", "shadow-none");
+        }, 3000);
+      }
+    }
+    // we know that these deps are correct
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [startTimestamp]);
+
+  return (
+    <div key={segmentKey} className={segmentClasses}>
+      <MinimapBounds
+        isFirstSegmentInMinimap={isFirstSegmentInMinimap}
+        isLastSegmentInMinimap={isLastSegmentInMinimap}
+        alignedMinimapStartTime={alignedMinimapStartTime}
+        alignedMinimapEndTime={alignedMinimapEndTime}
+        firstMinimapSegmentRef={firstMinimapSegmentRef}
+      />
+
+      <Tick timestamp={timestamp} timestampSpread={timestampSpread} />
+
+      <Timestamp
+        isFirstSegmentInMinimap={isFirstSegmentInMinimap}
+        isLastSegmentInMinimap={isLastSegmentInMinimap}
+        timestamp={timestamp}
+        timestampSpread={timestampSpread}
+        segmentKey={segmentKey}
+      />
+
+      <div className="absolute left-1/2 transform -translate-x-1/2 w-[20px] md:w-[40px] h-2 z-10 cursor-pointer">
+        <div className="flex flex-row justify-center w-[20px] md:w-[40px] mb-[1px]">
+          <div className="w-[10px] md:w-[20px] flex justify-end">
+            <div
+              key={`${segmentKey}_motion_data_1`}
+              className={`h-[2px] rounded-full bg-motion_review`}
+              onClick={segmentClick}
+              style={{
+                width:
+                  maxSegmentWidth -
+                  interpolateMotionAudioData(
+                    getMotionSegmentValue(segmentTime - segmentDuration / 2),
+                    0,
+                    100,
+                    1,
+                    maxSegmentWidth,
+                  ),
+              }}
+            ></div>
+          </div>
+          <div className="w-[10px] md:w-[20px]">
+            <div
+              key={`${segmentKey}_audio_data_1`}
+              className={`h-[2px] rounded-full bg-audio_review`}
+              onClick={segmentClick}
+              style={{
+                width: interpolateMotionAudioData(
+                  getAudioSegmentValue(segmentTime - segmentDuration / 2),
+                  -100,
+                  0,
+                  1,
+                  maxSegmentWidth,
+                ),
+              }}
+            ></div>
+          </div>
+        </div>
+
+        <div className="flex flex-row justify-center w-[20px] md:w-[40px]">
+          <div className="w-[10px] md:w-[20px] flex justify-end">
+            <div
+              key={`${segmentKey}_motion_data_2`}
+              className={`h-[2px] rounded-full bg-motion_review`}
+              onClick={segmentClick}
+              style={{
+                width:
+                  maxSegmentWidth -
+                  interpolateMotionAudioData(
+                    getMotionSegmentValue(segmentTime),
+                    0,
+                    100,
+                    1,
+                    maxSegmentWidth,
+                  ),
+              }}
+            ></div>
+          </div>
+          <div className="w-[10px] md:w-[20px]">
+            <div
+              key={`${segmentKey}_audio_data_2`}
+              className={`h-[2px] rounded-full bg-audio_review`}
+              onClick={segmentClick}
+              style={{
+                width: interpolateMotionAudioData(
+                  getAudioSegmentValue(segmentTime),
+                  -100,
+                  0,
+                  1,
+                  maxSegmentWidth,
+                ),
+              }}
+            ></div>
+          </div>
+        </div>
+      </div>
+
+      {severity.map((severityValue: number, index: number) => (
+        <React.Fragment key={index}>
+          <div className="absolute right-0 h-2 z-10">
+            <div
+              key={`${segmentKey}_${index}_secondary_data`}
+              className={`
+                  w-1 h-2 bg-gradient-to-r
+                  ${roundBottomSecondary ? "rounded-bl-full rounded-br-full" : ""}
+                  ${roundTopSecondary ? "rounded-tl-full rounded-tr-full" : ""}
+                  ${severityColors[severityValue]}
+                `}
+            ></div>
+          </div>
+        </React.Fragment>
+      ))}
+    </div>
+  );
+}
+
+export default MotionSegment;

web/src/components/timeline/ReviewTimeline.tsx

@@ -0,0 +1,84 @@
+import { ReactNode, RefObject } from "react";
+
+export type ReviewTimelineProps = {
+  timelineRef: RefObject<HTMLDivElement>;
+  scrollTimeRef: RefObject<HTMLDivElement>;
+  handlebarTimeRef: RefObject<HTMLDivElement>;
+  handleMouseMove: (
+    e:
+      | React.MouseEvent<HTMLDivElement, MouseEvent>
+      | React.TouchEvent<HTMLDivElement>,
+  ) => void;
+  handleMouseUp: (
+    e:
+      | React.MouseEvent<HTMLDivElement, MouseEvent>
+      | React.TouchEvent<HTMLDivElement>,
+  ) => void;
+  handleMouseDown: (
+    e:
+      | React.MouseEvent<HTMLDivElement, MouseEvent>
+      | React.TouchEvent<HTMLDivElement>,
+  ) => void;
+  segmentDuration: number;
+  showHandlebar: boolean;
+  isDragging: boolean;
+  children: ReactNode;
+};
+
+export function ReviewTimeline({
+  timelineRef,
+  scrollTimeRef,
+  handlebarTimeRef,
+  handleMouseMove,
+  handleMouseUp,
+  handleMouseDown,
+  segmentDuration,
+  showHandlebar = false,
+  isDragging,
+  children,
+}: ReviewTimelineProps) {
+  return (
+    <div
+      ref={timelineRef}
+      onMouseMove={handleMouseMove}
+      onTouchMove={handleMouseMove}
+      onMouseUp={handleMouseUp}
+      onTouchEnd={handleMouseUp}
+      className={`relative h-full overflow-y-scroll no-scrollbar bg-secondary ${
+        isDragging && showHandlebar ? "cursor-grabbing" : "cursor-auto"
+      }`}
+    >
+      <div className="flex flex-col">{children}</div>
+      {showHandlebar && (
+        <div className="absolute left-0 top-0 z-20 w-full" role="scrollbar">
+          <div
+            className="flex items-center justify-center touch-none select-none"
+            onMouseDown={handleMouseDown}
+            onTouchStart={handleMouseDown}
+          >
+            <div
+              ref={scrollTimeRef}
+              className={`relative w-full ${
+                isDragging ? "cursor-grabbing" : "cursor-grab"
+              }`}
+            >
+              <div
+                className={`bg-destructive rounded-full mx-auto ${
+                  segmentDuration < 60 ? "w-14 md:w-20" : "w-12 md:w-16"
+                } h-5 flex items-center justify-center`}
+              >
+                <div
+                  ref={handlebarTimeRef}
+                  className="text-white text-[8px] md:text-xs z-10"
+                ></div>
+              </div>
+              <div className="absolute h-1 w-full bg-destructive top-1/2 transform -translate-y-1/2"></div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default ReviewTimeline;

web/src/components/timeline/segment-metadata.tsx

@@ -0,0 +1,100 @@
+import { isDesktop } from "react-device-detect";
+
+type MinimapSegmentProps = {
+  isFirstSegmentInMinimap: boolean;
+  isLastSegmentInMinimap: boolean;
+  alignedMinimapStartTime: number;
+  alignedMinimapEndTime: number;
+  firstMinimapSegmentRef: React.MutableRefObject<HTMLDivElement | null>;
+};
+
+type TickSegmentProps = {
+  timestamp: Date;
+  timestampSpread: number;
+};
+
+type TimestampSegmentProps = {
+  isFirstSegmentInMinimap: boolean;
+  isLastSegmentInMinimap: boolean;
+  timestamp: Date;
+  timestampSpread: number;
+  segmentKey: number;
+};
+
+export function MinimapBounds({
+  isFirstSegmentInMinimap,
+  isLastSegmentInMinimap,
+  alignedMinimapStartTime,
+  alignedMinimapEndTime,
+  firstMinimapSegmentRef,
+}: MinimapSegmentProps) {
+  return (
+    <>
+      {isFirstSegmentInMinimap && (
+        <div
+          className="absolute inset-0 -bottom-7 w-full flex items-center justify-center text-primary-foreground font-medium z-20 text-center text-[10px] scroll-mt-8"
+          ref={firstMinimapSegmentRef}
+        >
+          {new Date(alignedMinimapStartTime * 1000).toLocaleTimeString([], {
+            hour: "2-digit",
+            minute: "2-digit",
+            ...(isDesktop && { month: "short", day: "2-digit" }),
+          })}
+        </div>
+      )}
+
+      {isLastSegmentInMinimap && (
+        <div className="absolute inset-0 -top-3 w-full flex items-center justify-center text-primary-foreground font-medium z-20 text-center text-[10px]">
+          {new Date(alignedMinimapEndTime * 1000).toLocaleTimeString([], {
+            hour: "2-digit",
+            minute: "2-digit",
+            ...(isDesktop && { month: "short", day: "2-digit" }),
+          })}
+        </div>
+      )}
+    </>
+  );
+}
+
+export function Tick({ timestamp, timestampSpread }: TickSegmentProps) {
+  return (
+    <div className="absolute">
+      <div className="flex items-end content-end w-[12px] h-2">
+        <div
+          className={`h-0.5 ${
+            timestamp.getMinutes() % timestampSpread === 0 &&
+            timestamp.getSeconds() === 0
+              ? "w-[12px] bg-gray-400"
+              : "w-[8px] bg-gray-600"
+          }`}
+        ></div>
+      </div>
+    </div>
+  );
+}
+
+export function Timestamp({
+  isFirstSegmentInMinimap,
+  isLastSegmentInMinimap,
+  timestamp,
+  timestampSpread,
+  segmentKey,
+}: TimestampSegmentProps) {
+  return (
+    <div className="absolute left-[15px] top-[1px] h-2 z-10">
+      {!isFirstSegmentInMinimap && !isLastSegmentInMinimap && (
+        <div
+          key={`${segmentKey}_timestamp`}
+          className="text-[8px] text-gray-400"
+        >
+          {timestamp.getMinutes() % timestampSpread === 0 &&
+            timestamp.getSeconds() === 0 &&
+            timestamp.toLocaleTimeString([], {
+              hour: "2-digit",
+              minute: "2-digit",
+            })}
+        </div>
+      )}
+    </div>
+  );
+}

web/src/hooks/use-event-segment-utils.ts

@@ -1,7 +1,7 @@
 import { useCallback, useMemo } from "react";
 import { ReviewSegment } from "@/types/review";
 
-export const useSegmentUtils = (
+export const useEventSegmentUtils = (
   segmentDuration: number,
   events: ReviewSegment[],
   severityType: string,

web/src/hooks/use-motion-segment-utils.ts

@@ -0,0 +1,76 @@
+import { useCallback } from "react";
+import { MockMotionData } from "@/pages/UIPlayground";
+
+export const useMotionSegmentUtils = (
+  segmentDuration: number,
+  motion_events: MockMotionData[],
+) => {
+  const getSegmentStart = useCallback(
+    (time: number): number => {
+      return Math.floor(time / segmentDuration) * segmentDuration;
+    },
+    [segmentDuration],
+  );
+
+  const getSegmentEnd = useCallback(
+    (time: number | undefined): number => {
+      if (time) {
+        return (
+          Math.floor(time / segmentDuration) * segmentDuration + segmentDuration
+        );
+      } else {
+        return Date.now() / 1000 + segmentDuration;
+      }
+    },
+    [segmentDuration],
+  );
+
+  const interpolateMotionAudioData = useCallback(
+    (
+      value: number,
+      oldMin: number,
+      oldMax: number,
+      newMin: number,
+      newMax: number,
+    ): number => {
+      return (
+        ((value - oldMin) / (oldMax - oldMin)) * (newMax - newMin) + newMin
+      );
+    },
+    [],
+  );
+
+  const getMotionSegmentValue = useCallback(
+    (time: number): number => {
+      const matchingEvent = motion_events.find((event) => {
+        return (
+          time >= getSegmentStart(event.start_time) &&
+          time < getSegmentEnd(event.end_time)
+        );
+      });
+
+      return matchingEvent?.motionValue ?? 0;
+    },
+    [motion_events, getSegmentStart, getSegmentEnd],
+  );
+
+  const getAudioSegmentValue = useCallback(
+    (time: number): number => {
+      const matchingEvent = motion_events.find((event) => {
+        return (
+          time >= getSegmentStart(event.start_time) &&
+          time < getSegmentEnd(event.end_time)
+        );
+      });
+
+      return matchingEvent?.audioValue ?? 0;
+    },
+    [motion_events, getSegmentStart, getSegmentEnd],
+  );
+
+  return {
+    getMotionSegmentValue,
+    getAudioSegmentValue,
+    interpolateMotionAudioData,
+  };
+};

web/src/pages/UIPlayground.tsx

@@ -7,6 +7,16 @@ import EventReviewTimeline from "@/components/timeline/EventReviewTimeline";
 import { ReviewData, ReviewSegment, ReviewSeverity } from "@/types/review";
 import { Button } from "@/components/ui/button";
 import CameraActivityIndicator from "@/components/indicators/CameraActivityIndicator";
+import MotionReviewTimeline from "@/components/timeline/MotionReviewTimeline";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 
 // Color data
 const colors = [
@@ -43,6 +53,39 @@ function ColorSwatch({ name, value }: { name: string; value: string }) {
   );
 }
 
+export type MockMotionData = {
+  start_time: number;
+  end_time: number;
+  motionValue: number;
+  audioValue: number;
+};
+
+function generateRandomMotionAudioData(): MockMotionData[] {
+  const now = new Date();
+  const endTime = now.getTime() / 1000;
+  const startTime = endTime - 24 * 60 * 60; // 24 hours ago
+  const interval = 30; // 30 seconds
+
+  const data = [];
+  for (
+    let startTimestamp = startTime;
+    startTimestamp < endTime;
+    startTimestamp += interval
+  ) {
+    const endTimestamp = startTimestamp + interval;
+    const motionValue = Math.floor(Math.random() * 101); // Random number between 0 and 100
+    const audioValue = Math.random() * -100; // Random negative value between -100 and 0
+    data.push({
+      start_time: startTimestamp,
+      end_time: endTimestamp,
+      motionValue,
+      audioValue,
+    });
+  }
+
+  return data;
+}
+
 const generateRandomEvent = (): ReviewSegment => {
   const start_time =
     Math.floor(Date.now() / 1000) - 10800 - Math.random() * 60 * 60;
@@ -83,6 +126,7 @@ function UIPlayground() {
   const { data: config } = useSWR<FrigateConfig>("config");
   const contentRef = useRef<HTMLDivElement>(null);
   const [mockEvents, setMockEvents] = useState<ReviewSegment[]>([]);
+  const [mockMotionData, setMockMotionData] = useState<MockMotionData[]>([]);
   const [handlebarTime, setHandlebarTime] = useState(
     Math.floor(Date.now() / 1000) - 15 * 60,
   );
@@ -90,6 +134,7 @@ function UIPlayground() {
   useMemo(() => {
     const initialEvents = Array.from({ length: 50 }, generateRandomEvent);
     setMockEvents(initialEvents);
+    setMockMotionData(generateRandomMotionAudioData());
   }, []);
 
   // Calculate minimap start and end times based on events
@@ -142,6 +187,8 @@ function UIPlayground() {
     setIsDragging(dragging);
   };
 
+  const [isEventsReviewTimeline, setIsEventsReviewTimeline] = useState(true);
+
   return (
     <>
       <div className="w-full h-full">
@@ -175,6 +222,28 @@ function UIPlayground() {
               <p className="text-small">
                 Handlebar is dragging: {isDragging ? "yes" : "no"}
               </p>
+              <div className="my-4">
+                <Heading as="h4">Timeline type</Heading>
+                <Select
+                  defaultValue={isEventsReviewTimeline ? "event" : "motion"}
+                  onValueChange={(checked) => {
+                    setIsEventsReviewTimeline(checked == "event");
+                  }}
+                >
+                  <SelectTrigger className="w-[180px]">
+                    <SelectValue placeholder="Select a timeline" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectGroup>
+                      <SelectLabel>Timeline Type</SelectLabel>
+                      <SelectItem value="event">Event Review</SelectItem>
+                      <SelectItem value="motion">
+                        Motion/Audio Review
+                      </SelectItem>
+                    </SelectGroup>
+                  </SelectContent>
+                </Select>
+              </div>
               <div className="w-[40px] my-4">
                 <CameraActivityIndicator />
               </div>
@@ -215,7 +284,27 @@ function UIPlayground() {
             </div>
           </div>
 
-          <div className="w-[100px] overflow-y-auto no-scrollbar">
+          <div className="w-[55px] md:w-[100px] overflow-y-auto no-scrollbar">
+            {!isEventsReviewTimeline && (
+              <MotionReviewTimeline
+                segmentDuration={zoomSettings.segmentDuration} // seconds per segment
+                timestampSpread={zoomSettings.timestampSpread} // minutes between each major timestamp
+                timelineStart={Math.floor(Date.now() / 1000)} // timestamp start of the timeline - the earlier time
+                timelineEnd={Math.floor(Date.now() / 1000) - 6 * 60 * 60} // end of timeline - the later time
+                showHandlebar // show / hide the handlebar
+                handlebarTime={handlebarTime} // set the time of the handlebar
+                setHandlebarTime={setHandlebarTime} // expose handler to set the handlebar time
+                onHandlebarDraggingChange={handleDraggingChange} // function for state of handlebar dragging
+                showMinimap // show / hide the minimap
+                minimapStartTime={minimapStartTime} // start time of the minimap - the earlier time (eg 1:00pm)
+                minimapEndTime={minimapEndTime} // end of the minimap - the later time (eg 3:00pm)
+                events={mockEvents} // events, including new has_been_reviewed and severity properties
+                motion_events={mockMotionData}
+                severityType={"alert"} // choose the severity type for the middle line - all other severity types are to the right
+                contentRef={contentRef} // optional content ref where previews are, can be used for observing/scrolling later
+              />
+            )}
+            {isEventsReviewTimeline && (
               <EventReviewTimeline
                 segmentDuration={zoomSettings.segmentDuration} // seconds per segment
                 timestampSpread={zoomSettings.timestampSpread} // minutes between each major timestamp
@@ -232,6 +321,7 @@ function UIPlayground() {
                 severityType={"alert"} // choose the severity type for the middle line - all other severity types are to the right
                 contentRef={contentRef} // optional content ref where previews are, can be used for observing/scrolling later
               />
+            )}
           </div>
         </div>
       </div>

web/tailwind.config.js

@@ -91,6 +91,12 @@ module.exports = {
           DEFAULT: "hsl(var(--severity_motion))",
           dimmed: "hsl(var(--severity_motion_dimmed))",
         },
+        motion_review: {
+          DEFAULT: "hsl(var(--motion_review))",
+        },
+        audio_review: {
+          DEFAULT: "hsl(var(--audio_review))",
+        },
       },
       keyframes: {
         "accordion-down": {

web/themes/theme-default.css

@@ -73,6 +73,12 @@
 
     --severity_motion: var(--yellow-400);
     --severity_motion_dimmed: var(--yellow-200);
+
+    --motion_review: hsl(44, 94%, 50%);
+    --motion_review: 44, 94%, 50%;
+
+    --audio_review: hsl(228, 94%, 67%);
+    --audio_review: 228, 94%, 67%;
   }
 
   .dark {