Better segment clicking (#10321)

* better segment clicking on motion segments

* move handlebar on click when handlebar is showing

* only scroll handlebar if needed

web/src/components/timeline/EventReviewTimeline.tsx

@@ -97,6 +97,7 @@ export function EventReviewTimeline({
           minimapEndTime={minimapEndTime}
           severityType={severityType}
           contentRef={contentRef}
+          setHandlebarTime={setHandlebarTime}
         />
       );
     });

web/src/components/timeline/EventSegment.tsx

@@ -29,6 +29,7 @@ type EventSegmentProps = {
   minimapEndTime?: number;
   severityType: ReviewSeverity;
   contentRef: RefObject<HTMLDivElement>;
+  setHandlebarTime?: React.Dispatch<React.SetStateAction<number>>;
 };
 
 export function EventSegment({
@@ -41,6 +42,7 @@ export function EventSegment({
   minimapEndTime,
   severityType,
   contentRef,
+  setHandlebarTime,
 }: EventSegmentProps) {
   const {
     getSeverity,
@@ -192,6 +194,10 @@ export function EventSegment({
           element.classList.add("outline-0", "shadow-none");
         }, 3000);
       }
+
+      if (setHandlebarTime) {
+        setHandlebarTime(startTimestamp);
+      }
     }
     // we know that these deps are correct
     // eslint-disable-next-line react-hooks/exhaustive-deps

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(
+                width: segmentWidth,
-                  getMotionSegmentValue(segmentTime + segmentDuration / 2),
-                  maxSegmentWidth,
-                ),
               }}
             ></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(
+                width: segmentWidth,
-                  getMotionSegmentValue(segmentTime),
-                  maxSegmentWidth,
-                ),
               }}
             ></div>
           </div>

web/src/hooks/use-handle-dragging.ts

@@ -130,6 +130,7 @@ function useDraggableHandler({
               scrollIntoView(thumb, {
                 block: "center",
                 behavior: "smooth",
+                scrollMode: "if-needed",
               });
             }
           }

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)
         );
       });
 

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