administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-11 05:35:25 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

fix timeline overscrolling

Browse Source
This commit is contained in:
Josh Hawkins 2024-03-26 15:25:16 -05:00
parent c5fa3cc0ad
commit 3da16b1565
2 changed files with 22 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
web/src/hooks/use-draggable-element.ts
View File

@ -44,6 +44,7 @@ function useDraggableElement({
const [clientYPosition, setClientYPosition] = useState<number | null>(null);
const [initialClickAdjustment, setInitialClickAdjustment] = useState(0);
const [scrollEdgeSize, setScrollEdgeSize] = useState<number>();
const [fullTimelineHeight, setFullTimelineHeight] = useState<number>();
const [segments, setSegments] = useState<HTMLDivElement[]>([]);
const { alignStartDateToTimeline, getCumulativeScrollTop } = useTimelineUtils(
{
@ -218,7 +219,8 @@ function useDraggableElement({
showDraggableElement &&
isDragging &&
clientYPosition &&
segments
segments &&
fullTimelineHeight
) {
const { scrollTop: scrolled } = timelineRef.current;
@ -227,8 +229,7 @@ function useDraggableElement({
// bottom of timeline
const elementEarliest = draggableElementEarliestTime
? timestampToPixels(draggableElementEarliestTime)
: segmentHeight * (timelineDuration / segmentDuration) -
segmentHeight * 3.5;
: fullTimelineHeight - segmentHeight * 1.5;
// top of timeline - default 2 segments added for draggableElement visibility
const elementLatest = draggableElementLatestTime
@ -302,7 +303,11 @@ function useDraggableElement({
scrollEdgeSize)) /
scrollEdgeSize,
);
timelineRef.current.scrollTop += segmentHeight * intensity;
const newScrollTop = Math.min(
fullTimelineHeight - segmentHeight,
timelineRef.current.scrollTop + segmentHeight * intensity,
);
timelineRef.current.scrollTop = newScrollTop;
}
}
@ -405,6 +410,7 @@ function useDraggableElement({
useEffect(() => {
if (timelineRef.current && draggableElementTime && timelineCollapsed) {
setFullTimelineHeight(timelineRef.current.scrollHeight);
const alignedSegmentTime = alignStartDateToTimeline(draggableElementTime);
let segmentElement = timelineRef.current.querySelector(
@ -414,8 +420,12 @@ function useDraggableElement({
if (!segmentElement) {
// segment not found, maybe we collapsed over a collapsible segment
let searchTime = alignedSegmentTime;
while (searchTime >= timelineStartAligned - timelineDuration) {
searchTime -= segmentDuration;
while (
searchTime < timelineStartAligned &&
searchTime < timelineStartAligned + timelineDuration
) {
searchTime += segmentDuration;
segmentElement = timelineRef.current.querySelector(
`[data-segment-id="${searchTime}"]`,
);
@ -435,10 +445,11 @@ function useDraggableElement({
}, [timelineCollapsed]);
useEffect(() => {
if (timelineRef.current) {
if (timelineRef.current && segments) {
setScrollEdgeSize(timelineRef.current.clientHeight * 0.03);
setFullTimelineHeight(timelineRef.current.scrollHeight);
}
}, [timelineRef]);
}, [timelineRef, segments]);
return { handleMouseDown, handleMouseUp, handleMouseMove };
}

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

@ -367,7 +367,7 @@ function UIPlayground() {
segmentDuration={zoomSettings.segmentDuration} // seconds per segment
timestampSpread={zoomSettings.timestampSpread} // minutes between each major timestamp
timelineStart={Math.floor(Date.now() / 1000)} // timestamp start of the timeline - the earlier time
timelineEnd={Math.floor(Date.now() / 1000) - 24 * 60 * 60} // end of timeline - the later time
timelineEnd={Math.floor(Date.now() / 1000) - 4 * 60 * 60} // end of timeline - the later time
showHandlebar // show / hide the handlebar
handlebarTime={handlebarTime} // set the time of the handlebar
setHandlebarTime={setHandlebarTime} // expose handler to set the handlebar time
@ -391,7 +391,7 @@ function UIPlayground() {
segmentDuration={zoomSettings.segmentDuration} // seconds per segment
timestampSpread={zoomSettings.timestampSpread} // minutes between each major timestamp
timelineStart={Math.floor(Date.now() / 1000)} // timestamp start of the timeline - the earlier time
timelineEnd={Math.floor(Date.now() / 1000) - 24 * 60 * 60} // end of timeline - the later time
timelineEnd={Math.floor(Date.now() / 1000) - 4 * 60 * 60} // end of timeline - the later time
showHandlebar // show / hide the handlebar
handlebarTime={handlebarTime} // set the time of the handlebar
setHandlebarTime={setHandlebarTime} // expose handler to set the handlebar time
@ -416,7 +416,7 @@ function UIPlayground() {
<SummaryTimeline
reviewTimelineRef={reviewTimelineRef} // the ref to the review timeline
timelineStart={Math.floor(Date.now() / 1000)} // timestamp start of the timeline - the earlier time
timelineEnd={Math.floor(Date.now() / 1000) - 24 * 60 * 60} // end of timeline - the later time
timelineEnd={Math.floor(Date.now() / 1000) - 4 * 60 * 60} // end of timeline - the later time
segmentDuration={zoomSettings.segmentDuration}
events={mockEvents}
severityType={"alert"} // show only events of this severity on the summary timeline