mirror of
https://github.com/blakeblackshear/frigate.git
synced 2024-11-21 19:07:46 +01:00
Handlebar dragging fix (#10333)
* account for initial click position on handlebar when dragging * fix wrong start time in playground
This commit is contained in:
parent
dfab850b61
commit
cb3045b424
@ -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,
|
||||
),
|
||||
);
|
||||
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user