From 5a3dcd860525fa0e25f1d1f38f61bd753ecd72ec Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 4 Mar 2024 15:13:07 -0600
Subject: [PATCH] fix math and update dependency

---
 .../timeline/MotionReviewTimeline.tsx         |  2 ++
 web/src/components/timeline/MotionSegment.tsx |  8 +++----
 web/src/hooks/use-motion-segment-utils.ts     | 24 ++++++++++++-------
 3 files changed, 21 insertions(+), 13 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 3bed07f86..fc184e3d1 100644
--- a/web/src/components/timeline/MotionSegment.tsx
+++ b/web/src/components/timeline/MotionSegment.tsx
@@ -218,7 +218,7 @@ export function MotionSegment({
               onClick={segmentClick}
               style={{
                 width: interpolateMotionAudioData(
-                  getMotionSegmentValue(segmentTime),
+                  getMotionSegmentValue(segmentTime + segmentDuration / 2),
                   maxSegmentWidth,
                 ),
               }}
@@ -231,7 +231,7 @@ export function MotionSegment({
               onClick={segmentClick}
               style={{
                 width: interpolateMotionAudioData(
-                  getAudioSegmentValue(segmentTime),
+                  getAudioSegmentValue(segmentTime + segmentDuration / 2),
                   maxSegmentWidth,
                 ),
               }}
@@ -247,7 +247,7 @@ export function MotionSegment({
               onClick={segmentClick}
               style={{
                 width: interpolateMotionAudioData(
-                  getMotionSegmentValue(segmentTime + segmentDuration / 2),
+                  getMotionSegmentValue(segmentTime),
                   maxSegmentWidth,
                 ),
               }}
@@ -260,7 +260,7 @@ export function MotionSegment({
               onClick={segmentClick}
               style={{
                 width: interpolateMotionAudioData(
-                  getAudioSegmentValue(segmentTime + segmentDuration / 2),
+                  getAudioSegmentValue(segmentTime),
                   maxSegmentWidth,
                 ),
               }}
diff --git a/web/src/hooks/use-motion-segment-utils.ts b/web/src/hooks/use-motion-segment-utils.ts
index 9cfa4e0d4..3ec5ee122 100644
--- a/web/src/hooks/use-motion-segment-utils.ts
+++ b/web/src/hooks/use-motion-segment-utils.ts
@@ -1,28 +1,34 @@
-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(
@@ -37,13 +43,13 @@ export const useMotionSegmentUtils = (
       const matchingEvent = motion_events.find((event) => {
         return (
           time >= getSegmentStart(event.start_time) &&
-          time < getSegmentEnd(event.start_time + segmentDuration / 2)
+          time < getSegmentEnd(event.start_time)
         );
       });
 
       return matchingEvent?.motionValue ?? 0;
     },
-    [motion_events, getSegmentStart, getSegmentEnd, segmentDuration],
+    [motion_events, getSegmentStart, getSegmentEnd],
   );
 
   const getAudioSegmentValue = useCallback(
@@ -51,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)
         );
       });