Motion review timeline (#10235)

* initial motion and audio timeline with dummy data

* initial motion and audio timeline with dummy data

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,
+  };
+};