From cb3045b4245055ab6a5706ac7c0486534b943eb6 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Fri, 8 Mar 2024 10:13:42 -0600
Subject: [PATCH] Handlebar dragging fix (#10333)

* account for initial click position on handlebar when dragging

* fix wrong start time in playground
---
 web/src/hooks/use-handle-dragging.ts | 17 +++++++++++++++--
 web/src/pages/UIPlayground.tsx       |  2 +-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/web/src/hooks/use-handle-dragging.ts b/web/src/hooks/use-handle-dragging.ts
index c6556189e..c306705a1 100644
--- a/web/src/hooks/use-handle-dragging.ts
+++ b/web/src/hooks/use-handle-dragging.ts
@@ -35,6 +35,7 @@ function useDraggableHandler({
   setIsDragging,
 }: DragHandlerProps) {
   const [clientYPosition, setClientYPosition] = useState<number | null>(null);
+  const [initialClickAdjustment, setInitialClickAdjustment] = useState(0);
 
   const draggingAtTopEdge = useMemo(() => {
     if (clientYPosition && timelineRef.current) {
@@ -81,8 +82,13 @@ function useDraggableHandler({
       e.stopPropagation();
       getClientYPosition(e);
       setIsDragging(true);
+
+      if (scrollTimeRef.current && clientYPosition) {
+        const handlebarRect = scrollTimeRef.current.getBoundingClientRect();
+        setInitialClickAdjustment(clientYPosition - handlebarRect.top);
+      }
     },
-    [setIsDragging, getClientYPosition],
+    [setIsDragging, getClientYPosition, scrollTimeRef, clientYPosition],
   );
 
   const handleMouseUp = useCallback(
@@ -93,6 +99,7 @@ function useDraggableHandler({
       e.stopPropagation();
       if (isDragging) {
         setIsDragging(false);
+        setInitialClickAdjustment(0);
       }
     },
     [isDragging, setIsDragging],
@@ -184,11 +191,17 @@ function useDraggableHandler({
         const parentScrollTop = getCumulativeScrollTop(timelineRef.current);
 
         const newHandlePosition = Math.min(
+          // end of timeline
           segmentHeight * (timelineDuration / segmentDuration) -
             segmentHeight * 2,
           Math.max(
+            // start of timeline
             segmentHeight + scrolled,
-            clientYPosition - timelineTop + parentScrollTop,
+            // current Y position
+            clientYPosition -
+              timelineTop +
+              parentScrollTop -
+              initialClickAdjustment,
           ),
         );
 
diff --git a/web/src/pages/UIPlayground.tsx b/web/src/pages/UIPlayground.tsx
index 40ddb5d2a..be8531e4e 100644
--- a/web/src/pages/UIPlayground.tsx
+++ b/web/src/pages/UIPlayground.tsx
@@ -285,7 +285,7 @@ function UIPlayground() {
               <MotionReviewTimeline
                 segmentDuration={zoomSettings.segmentDuration} // seconds per segment
                 timestampSpread={zoomSettings.timestampSpread} // minutes between each major timestamp
-                timelineStart={Math.round(((Date.now() / 1000) * 60) / 60) * 60} // timestamp start of the timeline - the earlier time
+                timelineStart={Math.floor(Date.now() / 1000)} // 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