From b5edcd2fae8bffa803031b2a3a8a03315ae83f88 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Tue, 5 Mar 2024 15:53:49 -0600
Subject: [PATCH] better timeline scrolling behavior when dragging (#10269)

---
 web/src/hooks/use-handle-dragging.ts | 19 ++++++++++++++-----
 1 file changed, 14 insertions(+), 5 deletions(-)

diff --git a/web/src/hooks/use-handle-dragging.ts b/web/src/hooks/use-handle-dragging.ts
index 295e035c6..0f1444c03 100644
--- a/web/src/hooks/use-handle-dragging.ts
+++ b/web/src/hooks/use-handle-dragging.ts
@@ -71,6 +71,7 @@ function useDraggableHandler({
     (
       newHandlePosition: number,
       segmentStartTime: number,
+      scrollTimeline: boolean,
       updateHandle: boolean,
     ) => {
       const thumb = scrollTimeRef.current;
@@ -85,10 +86,12 @@ function useDraggableHandler({
               minute: "2-digit",
               ...(segmentDuration < 60 && { second: "2-digit" }),
             });
-            scrollIntoView(thumb, {
-              scrollMode: "if-needed",
-              behavior: "smooth",
-            });
+            if (scrollTimeline) {
+              scrollIntoView(thumb, {
+                block: "center",
+                behavior: "smooth",
+              });
+            }
           }
         });
 
@@ -136,7 +139,7 @@ function useDraggableHandler({
         const parentScrollTop = getCumulativeScrollTop(timelineRef.current);
 
         const newHandlePosition = Math.min(
-          visibleTimelineHeight - timelineTop + parentScrollTop,
+          visibleTimelineHeight + parentScrollTop,
           Math.max(
             segmentHeight + scrolled,
             clientY - timelineTop + parentScrollTop,
@@ -148,9 +151,14 @@ function useDraggableHandler({
           timelineStart - segmentIndex * segmentDuration,
         );
 
+        const scrollTimeline =
+          clientY < visibleTimelineHeight * 0.1 ||
+          clientY > visibleTimelineHeight * 0.9;
+
         updateHandlebarPosition(
           newHandlePosition - segmentHeight,
           segmentStartTime,
+          scrollTimeline,
           false,
         );
 
@@ -202,6 +210,7 @@ function useDraggableHandler({
         newHandlePosition - segmentHeight,
         handlebarTime,
         true,
+        true,
       );
     }
     // we know that these deps are correct