From 38e76666e740d59e6a9bbd4e02a68932857e037d Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 4 Mar 2024 16:18:27 -0600
Subject: [PATCH] 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 07c171b341814ee5dbe8ee97b76f1230888538af.
---
 .../timeline/MotionReviewTimeline.tsx         |  2 ++
 web/src/components/timeline/MotionSegment.tsx | 34 +++++--------------
 web/src/hooks/use-motion-segment-utils.ts     | 34 +++++++++----------
 3 files changed, 27 insertions(+), 43 deletions(-)

diff --git a/web/src/components/timeline/MotionReviewTimeline.tsx b/web/src/components/timeline/MotionReviewTimeline.tsx
index 4f1da2962..900ceb98d 100644
--- a/web/src/components/timeline/MotionReviewTimeline.tsx
+++ b/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,
     ],
   );
 
diff --git a/web/src/components/timeline/MotionSegment.tsx b/web/src/components/timeline/MotionSegment.tsx
index b898611ca..fc184e3d1 100644
--- a/web/src/components/timeline/MotionSegment.tsx
+++ b/web/src/components/timeline/MotionSegment.tsx
@@ -217,15 +217,10 @@ export function MotionSegment({
               className={`h-[2px] rounded-full bg-motion_review`}
               onClick={segmentClick}
               style={{
-                width:
-                  maxSegmentWidth -
-                  interpolateMotionAudioData(
-                    getMotionSegmentValue(segmentTime - segmentDuration / 2),
-                    0,
-                    100,
-                    1,
-                    maxSegmentWidth,
-                  ),
+                width: interpolateMotionAudioData(
+                  getMotionSegmentValue(segmentTime + segmentDuration / 2),
+                  maxSegmentWidth,
+                ),
               }}
             ></div>
           </div>
@@ -236,10 +231,7 @@ export function MotionSegment({
               onClick={segmentClick}
               style={{
                 width: interpolateMotionAudioData(
-                  getAudioSegmentValue(segmentTime - segmentDuration / 2),
-                  -100,
-                  0,
-                  1,
+                  getAudioSegmentValue(segmentTime + segmentDuration / 2),
                   maxSegmentWidth,
                 ),
               }}
@@ -254,15 +246,10 @@ export function MotionSegment({
               className={`h-[2px] rounded-full bg-motion_review`}
               onClick={segmentClick}
               style={{
-                width:
-                  maxSegmentWidth -
-                  interpolateMotionAudioData(
-                    getMotionSegmentValue(segmentTime),
-                    0,
-                    100,
-                    1,
-                    maxSegmentWidth,
-                  ),
+                width: interpolateMotionAudioData(
+                  getMotionSegmentValue(segmentTime),
+                  maxSegmentWidth,
+                ),
               }}
             ></div>
           </div>
@@ -274,9 +261,6 @@ export function MotionSegment({
               style={{
                 width: interpolateMotionAudioData(
                   getAudioSegmentValue(segmentTime),
-                  -100,
-                  0,
-                  1,
                   maxSegmentWidth,
                 ),
               }}
diff --git a/web/src/hooks/use-motion-segment-utils.ts b/web/src/hooks/use-motion-segment-utils.ts
index b9b2ce665..3ec5ee122 100644
--- a/web/src/hooks/use-motion-segment-utils.ts
+++ b/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,
-      oldMin: number,
-      oldMax: number,
-      newMin: number,
-      newMax: number,
-    ): number => {
-      return (
-        ((value - oldMin) / (oldMax - oldMin)) * (newMax - newMin) + newMin
-      );
+    (value: number, newMax: number): number => {
+      return Math.ceil((Math.abs(value) / 100.0) * newMax) || 1;
     },
     [],
   );
@@ -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)
         );
       });