Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2025-10-27 10:52:11 +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, setIsDragging,
}: DragHandlerProps) { }: DragHandlerProps) {
const [clientYPosition, setClientYPosition] = useState<number | null>(null); const [clientYPosition, setClientYPosition] = useState<number | null>(null);
const [initialClickAdjustment, setInitialClickAdjustment] = useState(0);
const draggingAtTopEdge = useMemo(() => { const draggingAtTopEdge = useMemo(() => {
if (clientYPosition && timelineRef.current) { if (clientYPosition && timelineRef.current) {
@ -81,8 +82,13 @@ function useDraggableHandler({
e.stopPropagation(); e.stopPropagation();
getClientYPosition(e); getClientYPosition(e);
setIsDragging(true); setIsDragging(true);
if (scrollTimeRef.current && clientYPosition) {
const handlebarRect = scrollTimeRef.current.getBoundingClientRect();
setInitialClickAdjustment(clientYPosition - handlebarRect.top);
}
}, },
[setIsDragging, getClientYPosition], [setIsDragging, getClientYPosition, scrollTimeRef, clientYPosition],
); );
const handleMouseUp = useCallback( const handleMouseUp = useCallback(
@ -93,6 +99,7 @@ function useDraggableHandler({
e.stopPropagation(); e.stopPropagation();
if (isDragging) { if (isDragging) {
setIsDragging(false); setIsDragging(false);
setInitialClickAdjustment(0);
} }
}, },
[isDragging, setIsDragging], [isDragging, setIsDragging],
@ -184,11 +191,17 @@ function useDraggableHandler({
const parentScrollTop = getCumulativeScrollTop(timelineRef.current); const parentScrollTop = getCumulativeScrollTop(timelineRef.current);
const newHandlePosition = Math.min( const newHandlePosition = Math.min(
// end of timeline
segmentHeight * (timelineDuration / segmentDuration) - segmentHeight * (timelineDuration / segmentDuration) -
segmentHeight * 2, segmentHeight * 2,
Math.max( Math.max(
// start of timeline
segmentHeight + scrolled, 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 <MotionReviewTimeline
segmentDuration={zoomSettings.segmentDuration} // seconds per segment segmentDuration={zoomSettings.segmentDuration} // seconds per segment
timestampSpread={zoomSettings.timestampSpread} // minutes between each major timestamp 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 timelineEnd={Math.floor(Date.now() / 1000) - 6 * 60 * 60} // end of timeline - the later time
showHandlebar // show / hide the handlebar showHandlebar // show / hide the handlebar
handlebarTime={handlebarTime} // set the time of the handlebar handlebarTime={handlebarTime} // set the time of the handlebar