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

Handlebar dragging fix (#10333)

Browse Source 
* account for initial click position on handlebar when dragging

* fix wrong start time in playground
This commit is contained in:
Josh Hawkins 2024-03-08 10:13:42 -06:00 committed by GitHub
parent dfab850b61
commit cb3045b424
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 16 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -35,6 +35,7 @@ function useDraggableHandler({
setIsDragging,
}: DragHandlerProps) {
const [clientYPosition, setClientYPosition] = useState<number | null>(null);
const [initialClickAdjustment, setInitialClickAdjustment] = useState(0);
const draggingAtTopEdge = useMemo(() => {
if (clientYPosition && timelineRef.current) {
@ -81,8 +82,13 @@ function useDraggableHandler({
e.stopPropagation();
getClientYPosition(e);
setIsDragging(true);
if (scrollTimeRef.current && clientYPosition) {
const handlebarRect = scrollTimeRef.current.getBoundingClientRect();
setInitialClickAdjustment(clientYPosition - handlebarRect.top);
}
},
[setIsDragging, getClientYPosition],
[setIsDragging, getClientYPosition, scrollTimeRef, clientYPosition],
);
const handleMouseUp = useCallback(
@ -93,6 +99,7 @@ function useDraggableHandler({
e.stopPropagation();
if (isDragging) {
setIsDragging(false);
setInitialClickAdjustment(0);
}
},
[isDragging, setIsDragging],
@ -184,11 +191,17 @@ function useDraggableHandler({
const parentScrollTop = getCumulativeScrollTop(timelineRef.current);
const newHandlePosition = Math.min(
// end of timeline
segmentHeight * (timelineDuration / segmentDuration) -
segmentHeight * 2,
Math.max(
// start of timeline
segmentHeight + scrolled,
clientYPosition - timelineTop + parentScrollTop,
// current Y position
clientYPosition -
timelineTop +
parentScrollTop -
initialClickAdjustment,
),
);

2
web/src/pages/UIPlayground.tsx
View File

@ -285,7 +285,7 @@ function UIPlayground() {
<MotionReviewTimeline
segmentDuration={zoomSettings.segmentDuration} // seconds per segment
timestampSpread={zoomSettings.timestampSpread} // minutes between each major timestamp
timelineStart={Math.round(((Date.now() / 1000) * 60) / 60) * 60} // timestamp start of the timeline - the earlier time
timelineStart={Math.floor(Date.now() / 1000)} // timestamp start of the timeline - the earlier time
timelineEnd={Math.floor(Date.now() / 1000) - 6 * 60 * 60} // end of timeline - the later time
showHandlebar // show / hide the handlebar
handlebarTime={handlebarTime} // set the time of the handlebar