From a826b4ec7ecdbec42ac8d5cd7d41042b4f204aa0 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Sun, 10 Mar 2024 21:38:08 -0500
Subject: [PATCH] fix segments on motion review

---
 web/src/components/timeline/MotionSegment.tsx | 32 ++++++++++++++++---
 web/src/hooks/use-motion-segment-utils.ts     | 14 +++++---
 2 files changed, 37 insertions(+), 9 deletions(-)

diff --git a/web/src/components/timeline/MotionSegment.tsx b/web/src/components/timeline/MotionSegment.tsx
index 2efdd73d0..d9c3ca8a5 100644
--- a/web/src/components/timeline/MotionSegment.tsx
+++ b/web/src/components/timeline/MotionSegment.tsx
@@ -82,7 +82,19 @@ export function MotionSegment({
     return isMobile ? 30 : 50;
   }, []);
 
-  const segmentWidth = useMemo(() => {
+  const firstHalfSegmentWidth = useMemo(() => {
+    return interpolateMotionAudioData(
+      getMotionSegmentValue(segmentTime),
+      maxSegmentWidth,
+    );
+  }, [
+    segmentTime,
+    maxSegmentWidth,
+    getMotionSegmentValue,
+    interpolateMotionAudioData,
+  ]);
+
+  const secondHalfSegmentWidth = useMemo(() => {
     return interpolateMotionAudioData(
       getMotionSegmentValue(segmentTime + segmentDuration / 2),
       maxSegmentWidth,
@@ -167,14 +179,24 @@ export function MotionSegment({
   };
 
   const segmentClick = useCallback(() => {
-    if (startTimestamp && setHandlebarTime && segmentWidth > 1) {
+    if (
+      startTimestamp &&
+      setHandlebarTime &&
+      (firstHalfSegmentWidth > 1 || secondHalfSegmentWidth > 1)
+    ) {
       setHandlebarTime(startTimestamp);
     }
-  }, [startTimestamp, setHandlebarTime, segmentWidth]);
+  }, [
+    startTimestamp,
+    setHandlebarTime,
+    firstHalfSegmentWidth,
+    secondHalfSegmentWidth,
+  ]);
 
   return (
     <div
       key={segmentKey}
+      data-segment-key={segmentKey}
       className={segmentClasses}
       onClick={segmentClick}
       onTouchStart={(event) => handleTouchStart(event, segmentClick)}
@@ -204,7 +226,7 @@ export function MotionSegment({
               key={`${segmentKey}_motion_data_1`}
               className={`h-[2px] rounded-full bg-motion_review`}
               style={{
-                width: segmentWidth,
+                width: secondHalfSegmentWidth,
               }}
             ></div>
           </div>
@@ -216,7 +238,7 @@ export function MotionSegment({
               key={`${segmentKey}_motion_data_2`}
               className={`h-[2px] rounded-full bg-motion_review`}
               style={{
-                width: segmentWidth,
+                width: firstHalfSegmentWidth,
               }}
             ></div>
           </div>
diff --git a/web/src/hooks/use-motion-segment-utils.ts b/web/src/hooks/use-motion-segment-utils.ts
index 4cf0c15e1..dfec48358 100644
--- a/web/src/hooks/use-motion-segment-utils.ts
+++ b/web/src/hooks/use-motion-segment-utils.ts
@@ -40,14 +40,20 @@ export const useMotionSegmentUtils = (
 
   const getMotionSegmentValue = useCallback(
     (time: number): number => {
-      const matchingEvent = motion_events.find((event) => {
+      const segmentStart = getSegmentStart(time);
+      const segmentEnd = getSegmentEnd(time);
+      const matchingEvents = motion_events.filter((event) => {
         return (
-          time >= getSegmentStart(event.start_time) &&
-          time <= getSegmentEnd(event.start_time)
+          event.start_time >= segmentStart && event.start_time < segmentEnd
         );
       });
 
-      return matchingEvent?.motion ?? 0;
+      const totalMotion = matchingEvents.reduce(
+        (acc, curr) => acc + (curr.motion ?? 0),
+        0,
+      );
+
+      return totalMotion;
     },
     [motion_events, getSegmentStart, getSegmentEnd],
   );