From 1441a831513f7940e84376a888c9c18a47064d4a Mon Sep 17 00:00:00 2001
From: Nicolas Mowen <nickmowen213@gmail.com>
Date: Sun, 3 Mar 2024 17:17:24 -0700
Subject: [PATCH] Fix resolution of timeline dragging (#10219)

---
 web/src/hooks/use-handle-dragging.ts | 23 ++++++++++++++++++++---
 1 file changed, 20 insertions(+), 3 deletions(-)

diff --git a/web/src/hooks/use-handle-dragging.ts b/web/src/hooks/use-handle-dragging.ts
index f28d82943..295e035c6 100644
--- a/web/src/hooks/use-handle-dragging.ts
+++ b/web/src/hooks/use-handle-dragging.ts
@@ -68,7 +68,11 @@ function useDraggableHandler({
   }, []);
 
   const updateHandlebarPosition = useCallback(
-    (newHandlePosition: number, segmentStartTime: number) => {
+    (
+      newHandlePosition: number,
+      segmentStartTime: number,
+      updateHandle: boolean,
+    ) => {
       const thumb = scrollTimeRef.current;
       if (thumb) {
         requestAnimationFrame(() => {
@@ -87,7 +91,8 @@ function useDraggableHandler({
             });
           }
         });
-        if (setHandlebarTime) {
+
+        if (setHandlebarTime && updateHandle) {
           setHandlebarTime(segmentStartTime);
         }
       }
@@ -146,7 +151,15 @@ function useDraggableHandler({
         updateHandlebarPosition(
           newHandlePosition - segmentHeight,
           segmentStartTime,
+          false,
         );
+
+        if (setHandlebarTime) {
+          setHandlebarTime(
+            timelineStart -
+              (newHandlePosition / segmentHeight) * segmentDuration,
+          );
+        }
       }
     },
     // we know that these deps are correct
@@ -185,7 +198,11 @@ function useDraggableHandler({
         parentScrollTop -
         scrolled;
 
-      updateHandlebarPosition(newHandlePosition - segmentHeight, handlebarTime);
+      updateHandlebarPosition(
+        newHandlePosition - segmentHeight,
+        handlebarTime,
+        true,
+      );
     }
     // we know that these deps are correct
     // eslint-disable-next-line react-hooks/exhaustive-deps