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(
-                  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>