From 28957004ba9d636a9e567ce968ad545bc9659618 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 7 Mar 2024 16:24:33 -0600
Subject: [PATCH] better segment clicking on motion segments

---
 web/src/components/timeline/MotionSegment.tsx | 38 +++++++++++--------
 web/src/hooks/use-motion-segment-utils.ts     |  2 +-
 web/src/pages/UIPlayground.tsx                |  4 +-
 3 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/web/src/components/timeline/MotionSegment.tsx b/web/src/components/timeline/MotionSegment.tsx
index 2c7138967..2efdd73d0 100644
--- a/web/src/components/timeline/MotionSegment.tsx
+++ b/web/src/components/timeline/MotionSegment.tsx
@@ -82,6 +82,19 @@ export function MotionSegment({
     return isMobile ? 30 : 50;
   }, []);
 
+  const segmentWidth = useMemo(() => {
+    return interpolateMotionAudioData(
+      getMotionSegmentValue(segmentTime + segmentDuration / 2),
+      maxSegmentWidth,
+    );
+  }, [
+    segmentTime,
+    segmentDuration,
+    maxSegmentWidth,
+    getMotionSegmentValue,
+    interpolateMotionAudioData,
+  ]);
+
   const alignedMinimapStartTime = useMemo(
     () => alignStartDateToTimeline(minimapStartTime ?? 0),
     [minimapStartTime, alignStartDateToTimeline],
@@ -154,13 +167,18 @@ export function MotionSegment({
   };
 
   const segmentClick = useCallback(() => {
-    if (startTimestamp && setHandlebarTime) {
+    if (startTimestamp && setHandlebarTime && segmentWidth > 1) {
       setHandlebarTime(startTimestamp);
     }
-  }, [startTimestamp, setHandlebarTime]);
+  }, [startTimestamp, setHandlebarTime, segmentWidth]);
 
   return (
-    <div key={segmentKey} className={segmentClasses}>
+    <div
+      key={segmentKey}
+      className={segmentClasses}
+      onClick={segmentClick}
+      onTouchStart={(event) => handleTouchStart(event, segmentClick)}
+    >
       <MinimapBounds
         isFirstSegmentInMinimap={isFirstSegmentInMinimap}
         isLastSegmentInMinimap={isLastSegmentInMinimap}
@@ -185,13 +203,8 @@ export function MotionSegment({
             <div
               key={`${segmentKey}_motion_data_1`}
               className={`h-[2px] rounded-full bg-motion_review`}
-              onClick={segmentClick}
-              onTouchStart={(event) => handleTouchStart(event, segmentClick)}
               style={{
-                width: interpolateMotionAudioData(
-                  getMotionSegmentValue(segmentTime + segmentDuration / 2),
-                  maxSegmentWidth,
-                ),
+                width: segmentWidth,
               }}
             ></div>
           </div>
@@ -202,13 +215,8 @@ export function MotionSegment({
             <div
               key={`${segmentKey}_motion_data_2`}
               className={`h-[2px] rounded-full bg-motion_review`}
-              onClick={segmentClick}
-              onTouchStart={(event) => handleTouchStart(event, segmentClick)}
               style={{
-                width: interpolateMotionAudioData(
-                  getMotionSegmentValue(segmentTime),
-                  maxSegmentWidth,
-                ),
+                width: segmentWidth,
               }}
             ></div>
           </div>
diff --git a/web/src/hooks/use-motion-segment-utils.ts b/web/src/hooks/use-motion-segment-utils.ts
index 514f91c0c..4cf0c15e1 100644
--- a/web/src/hooks/use-motion-segment-utils.ts
+++ b/web/src/hooks/use-motion-segment-utils.ts
@@ -43,7 +43,7 @@ export const useMotionSegmentUtils = (
       const matchingEvent = motion_events.find((event) => {
         return (
           time >= getSegmentStart(event.start_time) &&
-          time < getSegmentEnd(event.start_time)
+          time <= getSegmentEnd(event.start_time)
         );
       });
 
diff --git a/web/src/pages/UIPlayground.tsx b/web/src/pages/UIPlayground.tsx
index bbfe211b9..40ddb5d2a 100644
--- a/web/src/pages/UIPlayground.tsx
+++ b/web/src/pages/UIPlayground.tsx
@@ -124,7 +124,7 @@ function UIPlayground() {
   const [mockEvents, setMockEvents] = useState<ReviewSegment[]>([]);
   const [mockMotionData, setMockMotionData] = useState<MotionData[]>([]);
   const [handlebarTime, setHandlebarTime] = useState(
-    Math.floor(Date.now() / 1000) - 15 * 60,
+    Math.round((Date.now() / 1000 - 15 * 60) / 60) * 60,
   );
 
   useMemo(() => {
@@ -285,7 +285,7 @@ function UIPlayground() {
               <MotionReviewTimeline
                 segmentDuration={zoomSettings.segmentDuration} // seconds per segment
                 timestampSpread={zoomSettings.timestampSpread} // minutes between each major timestamp
-                timelineStart={Math.floor(Date.now() / 1000)} // timestamp start of the timeline - the earlier time
+                timelineStart={Math.round(((Date.now() / 1000) * 60) / 60) * 60} // timestamp start of the timeline - the earlier time
                 timelineEnd={Math.floor(Date.now() / 1000) - 6 * 60 * 60} // end of timeline - the later time
                 showHandlebar // show / hide the handlebar
                 handlebarTime={handlebarTime} // set the time of the handlebar