Motion timeline data (#10245)

* Refactor activity api to send motion and audio data

* Prepare for using motion data timeline

* Get working

* reduce to 0

* fix

* Formatting

* fix typing

* add motion data to timelines and allow motion cameas to be selectable

* Fix tests

* cleanup

* Fix not loading preview when changing hours

web/src/components/player/DynamicVideoPlayer.tsx

@@ -85,6 +85,16 @@ export default function DynamicVideoPlayer({
     );
   }, [camera, config, previewOnly]);
 
+  useEffect(() => {
+    if (!controller) {
+      return;
+    }
+
+    if (onControllerReady) {
+      onControllerReady(controller);
+    }
+  }, [controller, onControllerReady]);
+
   const [hasRecordingAtTime, setHasRecordingAtTime] = useState(true);
 
   // keyboard control
@@ -215,6 +225,10 @@ export default function DynamicVideoPlayer({
     );
     setCurrentPreview(preview);
 
+    if (preview && previewRef.current) {
+      previewRef.current.load();
+    }
+
     controller.newPlayback({
       recordings: recordings ?? [],
       playbackUri,
@@ -283,27 +297,20 @@ export default function DynamicVideoPlayer({
       )}
       <video
         ref={previewRef}
-        className={`size-full rounded-2xl ${currentPreview != undefined && isScrubbing ? "visible" : "hidden"} ${tallVideo ? "aspect-tall" : ""} bg-black`}
+        className={`size-full rounded-2xl ${currentPreview != undefined && (previewOnly || isScrubbing) ? "visible" : "hidden"} ${tallVideo ? "aspect-tall" : ""} bg-black`}
         preload="auto"
         autoPlay
         playsInline
         muted
         onSeeked={onPreviewSeeked}
         onLoadedData={() => controller.previewReady()}
-        onLoadStart={
-          previewOnly && onControllerReady
-            ? () => {
-                onControllerReady(controller);
-              }
-            : undefined
-        }
       >
         {currentPreview != undefined && (
           <source src={currentPreview.src} type={currentPreview.type} />
         )}
       </video>
       {onClick && !hasRecordingAtTime && (
-        <div className="absolute inset-0 z-10 bg-black bg-opacity-60" />
+        <div className="absolute inset-0 z-10 bg-black bg-opacity-60 rounded-2xl" />
       )}
     </div>
   );

web/src/components/timeline/MotionReviewTimeline.tsx

@@ -9,9 +9,8 @@ import {
 } from "react";
 import MotionSegment from "./MotionSegment";
 import { useEventUtils } from "@/hooks/use-event-utils";
-import { ReviewSegment, ReviewSeverity } from "@/types/review";
+import { MotionData, ReviewSegment, ReviewSeverity } from "@/types/review";
 import ReviewTimeline from "./ReviewTimeline";
-import { MockMotionData } from "@/pages/UIPlayground";
 
 export type MotionReviewTimelineProps = {
   segmentDuration: number;
@@ -25,7 +24,7 @@ export type MotionReviewTimelineProps = {
   minimapStartTime?: number;
   minimapEndTime?: number;
   events: ReviewSegment[];
-  motion_events: MockMotionData[];
+  motion_events: MotionData[];
   severityType: ReviewSeverity;
   contentRef: RefObject<HTMLDivElement>;
   onHandlebarDraggingChange?: (isDragging: boolean) => void;

web/src/components/timeline/MotionSegment.tsx

@@ -1,6 +1,6 @@
 import { useEventUtils } from "@/hooks/use-event-utils";
 import { useEventSegmentUtils } from "@/hooks/use-event-segment-utils";
-import { ReviewSegment } from "@/types/review";
+import { MotionData, ReviewSegment } from "@/types/review";
 import React, {
   RefObject,
   useCallback,
@@ -10,13 +10,12 @@ import React, {
 } 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[];
+  motion_events: MotionData[];
   segmentTime: number;
   segmentDuration: number;
   timestampSpread: number;