better timeline scrolling behavior when dragging (#10269)

This commit is contained in:
Josh Hawkins 2024-03-05 15:53:49 -06:00 committed by GitHub
parent ac9cd72f28
commit b5edcd2fae
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -71,6 +71,7 @@ function useDraggableHandler({
(
newHandlePosition: number,
segmentStartTime: number,
scrollTimeline: boolean,
updateHandle: boolean,
) => {
const thumb = scrollTimeRef.current;
@ -85,11 +86,13 @@ function useDraggableHandler({
minute: "2-digit",
...(segmentDuration < 60 && { second: "2-digit" }),
});
if (scrollTimeline) {
scrollIntoView(thumb, {
scrollMode: "if-needed",
block: "center",
behavior: "smooth",
});
}
}
});
if (setHandlebarTime && updateHandle) {
@ -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