From 99878d9eeeddc8b772e0443d84eba0d5541f7e66 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Mon, 1 Apr 2024 10:57:35 -0500
Subject: [PATCH] use single lookup for motion data (#10778)

---
 .../timeline/MotionReviewTimeline.tsx         | 11 ++++--
 web/src/components/timeline/MotionSegment.tsx | 39 +++++++------------
 2 files changed, 21 insertions(+), 29 deletions(-)

diff --git a/web/src/components/timeline/MotionReviewTimeline.tsx b/web/src/components/timeline/MotionReviewTimeline.tsx
index deac2ea44..fef69a75f 100644
--- a/web/src/components/timeline/MotionReviewTimeline.tsx
+++ b/web/src/components/timeline/MotionReviewTimeline.tsx
@@ -90,9 +90,13 @@ export function MotionReviewTimeline({
       const motionStart = segmentTime;
       const motionEnd = motionStart + segmentDuration;
 
+      const firstHalfMotionValue = getMotionSegmentValue(motionStart);
+      const secondHalfMotionValue = getMotionSegmentValue(
+        motionStart + segmentDuration / 2,
+      );
+
       const segmentMotion =
-        getMotionSegmentValue(motionStart) > 0 ||
-        getMotionSegmentValue(motionStart + segmentDuration / 2) > 0;
+        firstHalfMotionValue > 0 || secondHalfMotionValue > 0;
       const overlappingReviewItems = events.some(
         (item) =>
           (item.start_time >= motionStart && item.start_time < motionEnd) ||
@@ -110,7 +114,8 @@ export function MotionReviewTimeline({
         <MotionSegment
           key={segmentTime}
           events={events}
-          motion_events={motion_events}
+          firstHalfMotionValue={firstHalfMotionValue}
+          secondHalfMotionValue={secondHalfMotionValue}
           segmentDuration={segmentDuration}
           segmentTime={segmentTime}
           timestampSpread={timestampSpread}
diff --git a/web/src/components/timeline/MotionSegment.tsx b/web/src/components/timeline/MotionSegment.tsx
index 718d443b5..438842e23 100644
--- a/web/src/components/timeline/MotionSegment.tsx
+++ b/web/src/components/timeline/MotionSegment.tsx
@@ -1,6 +1,6 @@
 import { useTimelineUtils } from "@/hooks/use-timeline-utils";
 import { useEventSegmentUtils } from "@/hooks/use-event-segment-utils";
-import { MotionData, ReviewSegment } from "@/types/review";
+import { ReviewSegment } from "@/types/review";
 import React, { useCallback, useEffect, useMemo, useRef } from "react";
 import scrollIntoView from "scroll-into-view-if-needed";
 import { MinimapBounds, Tick, Timestamp } from "./segment-metadata";
@@ -10,10 +10,11 @@ import useTapUtils from "@/hooks/use-tap-utils";
 
 type MotionSegmentProps = {
   events: ReviewSegment[];
-  motion_events: MotionData[];
   segmentTime: number;
   segmentDuration: number;
   timestampSpread: number;
+  firstHalfMotionValue: number;
+  secondHalfMotionValue: number;
   motionOnly: boolean;
   showMinimap: boolean;
   minimapStartTime?: number;
@@ -24,10 +25,11 @@ type MotionSegmentProps = {
 
 export function MotionSegment({
   events,
-  motion_events,
   segmentTime,
   segmentDuration,
   timestampSpread,
+  firstHalfMotionValue,
+  secondHalfMotionValue,
   motionOnly,
   showMinimap,
   minimapStartTime,
@@ -43,8 +45,10 @@ export function MotionSegment({
     shouldShowRoundedCorners,
   } = useEventSegmentUtils(segmentDuration, events, severityType);
 
-  const { getMotionSegmentValue, interpolateMotionAudioData } =
-    useMotionSegmentUtils(segmentDuration, motion_events);
+  const { interpolateMotionAudioData } = useMotionSegmentUtils(
+    segmentDuration,
+    [],
+  );
 
   const { alignStartDateToTimeline, alignEndDateToTimeline } = useTimelineUtils(
     { segmentDuration },
@@ -77,29 +81,12 @@ export function MotionSegment({
   }, []);
 
   const firstHalfSegmentWidth = useMemo(() => {
-    return interpolateMotionAudioData(
-      getMotionSegmentValue(segmentTime),
-      maxSegmentWidth,
-    );
-  }, [
-    segmentTime,
-    maxSegmentWidth,
-    getMotionSegmentValue,
-    interpolateMotionAudioData,
-  ]);
+    return interpolateMotionAudioData(firstHalfMotionValue, maxSegmentWidth);
+  }, [maxSegmentWidth, firstHalfMotionValue, interpolateMotionAudioData]);
 
   const secondHalfSegmentWidth = useMemo(() => {
-    return interpolateMotionAudioData(
-      getMotionSegmentValue(segmentTime + segmentDuration / 2),
-      maxSegmentWidth,
-    );
-  }, [
-    segmentTime,
-    segmentDuration,
-    maxSegmentWidth,
-    getMotionSegmentValue,
-    interpolateMotionAudioData,
-  ]);
+    return interpolateMotionAudioData(secondHalfMotionValue, maxSegmentWidth);
+  }, [maxSegmentWidth, secondHalfMotionValue, interpolateMotionAudioData]);
 
   const alignedMinimapStartTime = useMemo(
     () => alignStartDateToTimeline(minimapStartTime ?? 0),