Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-12-19 19:06:16 +01:00
Code Issues Projects Releases Wiki Activity

better timeline scrolling behavior when dragging (#10269)

Browse Source
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
1 changed files with 14 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
web/src/hooks/use-handle-dragging.ts
View File

@ -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