From a4c406c91118591b8ff1e979f3c775968519af1b Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 4 Mar 2024 13:41:44 -0600
Subject: [PATCH] adjust segment math

---
 web/src/components/timeline/MotionSegment.tsx | 36 +++++++++----------
 web/src/hooks/use-motion-segment-utils.ts     |  4 +--
 2 files changed, 18 insertions(+), 22 deletions(-)

diff --git a/web/src/components/timeline/MotionSegment.tsx b/web/src/components/timeline/MotionSegment.tsx
index b898611ca..1cea97586 100644
--- a/web/src/components/timeline/MotionSegment.tsx
+++ b/web/src/components/timeline/MotionSegment.tsx
@@ -217,15 +217,13 @@ 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),
+                  0,
+                  100,
+                  1,
+                  maxSegmentWidth,
+                ),
               }}
             ></div>
           </div>
@@ -236,7 +234,7 @@ export function MotionSegment({
               onClick={segmentClick}
               style={{
                 width: interpolateMotionAudioData(
-                  getAudioSegmentValue(segmentTime - segmentDuration / 2),
+                  getAudioSegmentValue(segmentTime),
                   -100,
                   0,
                   1,
@@ -254,15 +252,13 @@ 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 - segmentDuration / 2),
+                  0,
+                  100,
+                  1,
+                  maxSegmentWidth,
+                ),
               }}
             ></div>
           </div>
@@ -273,7 +269,7 @@ export function MotionSegment({
               onClick={segmentClick}
               style={{
                 width: interpolateMotionAudioData(
-                  getAudioSegmentValue(segmentTime),
+                  getAudioSegmentValue(segmentTime - segmentDuration / 2),
                   -100,
                   0,
                   1,
diff --git a/web/src/hooks/use-motion-segment-utils.ts b/web/src/hooks/use-motion-segment-utils.ts
index b9b2ce665..f65ce7beb 100644
--- a/web/src/hooks/use-motion-segment-utils.ts
+++ b/web/src/hooks/use-motion-segment-utils.ts
@@ -45,13 +45,13 @@ 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 + segmentDuration / 2)
         );
       });
 
       return matchingEvent?.motionValue ?? 0;
     },
-    [motion_events, getSegmentStart, getSegmentEnd],
+    [motion_events, getSegmentStart, getSegmentEnd, segmentDuration],
   );
 
   const getAudioSegmentValue = useCallback(