Motion timeline updates (#10242)

* adjust segment math

* simplify interp and fix math

* fix math and update dependency

* push debug

* Revert "push debug"

This reverts commit 07c171b341.

web/src/components/timeline/MotionReviewTimeline.tsx

@@ -113,6 +113,7 @@ export function MotionReviewTimeline({
     minimapStartTime,
     minimapEndTime,
     events,
+    motion_events,
   ]);
 
   const segments = useMemo(
@@ -128,6 +129,7 @@ export function MotionReviewTimeline({
       minimapStartTime,
       minimapEndTime,
       events,
+      motion_events,
     ],
   );
 

web/src/components/timeline/MotionSegment.tsx

@@ -217,13 +217,8 @@ export function MotionSegment({
               className={`h-[2px] rounded-full bg-motion_review`}
               onClick={segmentClick}
               style={{
-                width:
+                width: interpolateMotionAudioData(
-                  maxSegmentWidth -
+                  getMotionSegmentValue(segmentTime + segmentDuration / 2),
-                  interpolateMotionAudioData(
-                    getMotionSegmentValue(segmentTime - segmentDuration / 2),
-                    0,
-                    100,
-                    1,
                   maxSegmentWidth,
                 ),
               }}
@@ -236,10 +231,7 @@ export function MotionSegment({
               onClick={segmentClick}
               style={{
                 width: interpolateMotionAudioData(
-                  getAudioSegmentValue(segmentTime - segmentDuration / 2),
+                  getAudioSegmentValue(segmentTime + segmentDuration / 2),
-                  -100,
-                  0,
-                  1,
                   maxSegmentWidth,
                 ),
               }}
@@ -254,13 +246,8 @@ export function MotionSegment({
               className={`h-[2px] rounded-full bg-motion_review`}
               onClick={segmentClick}
               style={{
-                width:
+                width: interpolateMotionAudioData(
-                  maxSegmentWidth -
-                  interpolateMotionAudioData(
                   getMotionSegmentValue(segmentTime),
-                    0,
-                    100,
-                    1,
                   maxSegmentWidth,
                 ),
               }}
@@ -274,9 +261,6 @@ export function MotionSegment({
               style={{
                 width: interpolateMotionAudioData(
                   getAudioSegmentValue(segmentTime),
-                  -100,
-                  0,
-                  1,
                   maxSegmentWidth,
                 ),
               }}

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

@@ -1,41 +1,39 @@
-import { useCallback } from "react";
+import { useCallback, useMemo } from "react";
 import { MockMotionData } from "@/pages/UIPlayground";
 
 export const useMotionSegmentUtils = (
   segmentDuration: number,
   motion_events: MockMotionData[],
 ) => {
+  const halfSegmentDuration = useMemo(
+    () => segmentDuration / 2,
+    [segmentDuration],
+  );
+
   const getSegmentStart = useCallback(
     (time: number): number => {
-      return Math.floor(time / segmentDuration) * segmentDuration;
+      return Math.floor(time / halfSegmentDuration) * halfSegmentDuration;
     },
-    [segmentDuration],
+    [halfSegmentDuration],
   );
 
   const getSegmentEnd = useCallback(
     (time: number | undefined): number => {
       if (time) {
         return (
-          Math.floor(time / segmentDuration) * segmentDuration + segmentDuration
+          Math.floor(time / halfSegmentDuration) * halfSegmentDuration +
+          halfSegmentDuration
         );
       } else {
-        return Date.now() / 1000 + segmentDuration;
+        return Date.now() / 1000 + halfSegmentDuration;
       }
     },
-    [segmentDuration],
+    [halfSegmentDuration],
   );
 
   const interpolateMotionAudioData = useCallback(
-    (
+    (value: number, newMax: number): number => {
-      value: number,
+      return Math.ceil((Math.abs(value) / 100.0) * newMax) || 1;
-      oldMin: number,
-      oldMax: number,
-      newMin: number,
-      newMax: number,
-    ): number => {
-      return (
-        ((value - oldMin) / (oldMax - oldMin)) * (newMax - newMin) + newMin
-      );
     },
     [],
   );
@@ -45,7 +43,7 @@ export const useMotionSegmentUtils = (
       const matchingEvent = motion_events.find((event) => {
         return (
           time >= getSegmentStart(event.start_time) &&
-          time < getSegmentEnd(event.end_time)
+          time < getSegmentEnd(event.start_time)
         );
       });
 
@@ -59,7 +57,7 @@ export const useMotionSegmentUtils = (
       const matchingEvent = motion_events.find((event) => {
         return (
           time >= getSegmentStart(event.start_time) &&
-          time < getSegmentEnd(event.end_time)
+          time < getSegmentEnd(event.start_time)
         );
       });