Timeline handlebar tweaks (#10336)

* initial offset click for desktop only

* align start timeline and update pixel math

web/src/components/timeline/EventReviewTimeline.tsx

@@ -59,6 +59,11 @@ export function EventReviewTimeline({
     segmentDuration,
   );
 
+  const timelineStartAligned = useMemo(
+    () => alignStartDateToTimeline(timelineStart),
+    [timelineStart, alignStartDateToTimeline],
+  );
+
   const { handleMouseDown, handleMouseUp, handleMouseMove } =
     useDraggableHandler({
       contentRef,
@@ -71,7 +76,7 @@ export function EventReviewTimeline({
       handlebarTime,
       setHandlebarTime,
       timelineDuration,
-      timelineStart,
+      timelineStartAligned,
       isDragging,
       setIsDragging,
       handlebarTimeRef,
@@ -80,10 +85,9 @@ export function EventReviewTimeline({
   // Generate segments for the timeline
   const generateSegments = useCallback(() => {
     const segmentCount = timelineDuration / segmentDuration;
-    const segmentAlignedTime = alignStartDateToTimeline(timelineStart);
 
     return Array.from({ length: segmentCount }, (_, index) => {
-      const segmentTime = segmentAlignedTime - index * segmentDuration;
+      const segmentTime = timelineStartAligned - index * segmentDuration;
 
       return (
         <EventSegment

web/src/components/timeline/MotionReviewTimeline.tsx

@@ -60,6 +60,11 @@ export function MotionReviewTimeline({
     segmentDuration,
   );
 
+  const timelineStartAligned = useMemo(
+    () => alignStartDateToTimeline(timelineStart),
+    [timelineStart, alignStartDateToTimeline],
+  );
+
   const { handleMouseDown, handleMouseUp, handleMouseMove } =
     useDraggableHandler({
       contentRef,
@@ -72,7 +77,7 @@ export function MotionReviewTimeline({
       handlebarTime,
       setHandlebarTime,
       timelineDuration,
-      timelineStart,
+      timelineStartAligned,
       isDragging,
       setIsDragging,
       handlebarTimeRef,
@@ -81,10 +86,9 @@ export function MotionReviewTimeline({
   // Generate segments for the timeline
   const generateSegments = useCallback(() => {
     const segmentCount = timelineDuration / segmentDuration;
-    const segmentAlignedTime = alignStartDateToTimeline(timelineStart);
 
     return Array.from({ length: segmentCount }, (_, index) => {
-      const segmentTime = segmentAlignedTime - index * segmentDuration;
+      const segmentTime = timelineStartAligned - index * segmentDuration;
 
       return (
         <MotionSegment
@@ -106,7 +110,7 @@ export function MotionReviewTimeline({
   }, [
     segmentDuration,
     timestampSpread,
-    timelineStart,
+    timelineStartAligned,
     timelineDuration,
     showMinimap,
     minimapStartTime,
@@ -122,7 +126,7 @@ export function MotionReviewTimeline({
     [
       segmentDuration,
       timestampSpread,
-      timelineStart,
+      timelineStartAligned,
       timelineDuration,
       showMinimap,
       minimapStartTime,

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

@@ -14,7 +14,7 @@ type DragHandlerProps = {
   setHandlebarTime?: React.Dispatch<React.SetStateAction<number>>;
   handlebarTimeRef: React.MutableRefObject<HTMLDivElement | null>;
   timelineDuration: number;
-  timelineStart: number;
+  timelineStartAligned: number;
   isDragging: boolean;
   setIsDragging: React.Dispatch<React.SetStateAction<boolean>>;
 };
@@ -30,7 +30,7 @@ function useDraggableHandler({
   setHandlebarTime,
   handlebarTimeRef,
   timelineDuration,
-  timelineStart,
+  timelineStartAligned,
   isDragging,
   setIsDragging,
 }: DragHandlerProps) {
@@ -83,7 +83,7 @@ function useDraggableHandler({
       getClientYPosition(e);
       setIsDragging(true);
 
-      if (scrollTimeRef.current && clientYPosition) {
+      if (scrollTimeRef.current && clientYPosition && isDesktop) {
         const handlebarRect = scrollTimeRef.current.getBoundingClientRect();
         setInitialClickAdjustment(clientYPosition - handlebarRect.top);
       }
@@ -207,7 +207,7 @@ function useDraggableHandler({
 
         const segmentIndex = Math.floor(newHandlePosition / segmentHeight);
         const segmentStartTime = alignStartDateToTimeline(
-          timelineStart - segmentIndex * segmentDuration,
+          timelineStartAligned - segmentIndex * segmentDuration,
         );
 
         if (draggingAtTopEdge || draggingAtBottomEdge) {
@@ -233,8 +233,9 @@ function useDraggableHandler({
 
         if (setHandlebarTime) {
           setHandlebarTime(
-            timelineStart -
+            timelineStartAligned -
-              (newHandlePosition / segmentHeight) * segmentDuration,
+              ((newHandlePosition - segmentHeight / 2 - 2) / segmentHeight) *
+                segmentDuration,
           );
         }
 
@@ -265,7 +266,7 @@ function useDraggableHandler({
     clientYPosition,
     isDragging,
     segmentDuration,
-    timelineStart,
+    timelineStartAligned,
     timelineDuration,
     timelineRef,
     draggingAtTopEdge,
@@ -290,20 +291,17 @@ function useDraggableHandler({
       const parentScrollTop = getCumulativeScrollTop(timelineRef.current);
 
       const newHandlePosition =
-        ((timelineStart - handlebarTime) / segmentDuration) * segmentHeight +
+        ((timelineStartAligned - handlebarTime) / segmentDuration) *
+          segmentHeight +
         parentScrollTop -
-        scrolled;
+        scrolled -
+        2; // height of handlebar horizontal line
 
-      updateHandlebarPosition(
+      updateHandlebarPosition(newHandlePosition, handlebarTime, true, true);
-        newHandlePosition - segmentHeight,
-        handlebarTime,
-        true,
-        true,
-      );
     }
     // we know that these deps are correct
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [handlebarTime, showHandlebar, scrollTimeRef, timelineStart]);
+  }, [handlebarTime, showHandlebar, scrollTimeRef, timelineStartAligned]);
 
   return { handleMouseDown, handleMouseUp, handleMouseMove };
 }