Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +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, newHandlePosition: number,
segmentStartTime: number, segmentStartTime: number,
scrollTimeline: boolean,
updateHandle: boolean, updateHandle: boolean,
) => { ) => {
const thumb = scrollTimeRef.current; const thumb = scrollTimeRef.current;
@ -85,10 +86,12 @@ function useDraggableHandler({
minute: "2-digit", minute: "2-digit",
...(segmentDuration < 60 && { second: "2-digit" }), ...(segmentDuration < 60 && { second: "2-digit" }),
}); });
scrollIntoView(thumb, { if (scrollTimeline) {
scrollMode: "if-needed", scrollIntoView(thumb, {
behavior: "smooth", block: "center",
}); behavior: "smooth",
});
}
} }
}); });
@ -136,7 +139,7 @@ function useDraggableHandler({
const parentScrollTop = getCumulativeScrollTop(timelineRef.current); const parentScrollTop = getCumulativeScrollTop(timelineRef.current);
const newHandlePosition = Math.min( const newHandlePosition = Math.min(
visibleTimelineHeight - timelineTop + parentScrollTop, visibleTimelineHeight + parentScrollTop,
Math.max( Math.max(
segmentHeight + scrolled, segmentHeight + scrolled,
clientY - timelineTop + parentScrollTop, clientY - timelineTop + parentScrollTop,
@ -148,9 +151,14 @@ function useDraggableHandler({
timelineStart - segmentIndex * segmentDuration, timelineStart - segmentIndex * segmentDuration,
); );
const scrollTimeline =
clientY < visibleTimelineHeight * 0.1 ||
clientY > visibleTimelineHeight * 0.9;
updateHandlebarPosition( updateHandlebarPosition(
newHandlePosition - segmentHeight, newHandlePosition - segmentHeight,
segmentStartTime, segmentStartTime,
scrollTimeline,
false, false,
); );
@ -202,6 +210,7 @@ function useDraggableHandler({
newHandlePosition - segmentHeight, newHandlePosition - segmentHeight,
handlebarTime, handlebarTime,
true, true,
true,
); );
} }
// we know that these deps are correct // we know that these deps are correct