chris/frigate
1
0
Fork 0
forked from Github/frigate
Code Pull Requests Packages Activity

Motion review playback optimizations (#10659)

Browse Source 
* handle motion timestamps with ranges

* check for overlaps when checking segment for events

* rename motion color vars to significant_motion for consistency

* safelist significant_motion

* rename vars for clarity and use timeout instead of interval
This commit is contained in:
Josh Hawkins
2024-03-24 21:37:44 -05:00
committed by GitHub
parent 24d29dd32c
commit 7b64091128
9 changed files with 163 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -368,27 +368,10 @@ function useDraggableElement({
const alignedSegmentTime = alignStartDateToTimeline(draggableElementTime);
let segmentElement = timelineRef.current.querySelector(
const segmentElement = timelineRef.current.querySelector(
`[data-segment-id="${alignedSegmentTime}"]`,
);
if (!segmentElement) {
// segment not found, maybe we collapsed over a collapsible segment
let searchTime = alignedSegmentTime;
while (searchTime >= timelineStartAligned - timelineDuration) {
// Decrement currentTime by segmentDuration
searchTime -= segmentDuration;
segmentElement = timelineRef.current.querySelector(
`[data-segment-id="${searchTime}"]`,
);
if (segmentElement) {
// segmentElement found
break;
}
}
}
if (segmentElement) {
const timelineRect = timelineRef.current.getBoundingClientRect();
const timelineTopAbsolute = timelineRect.top;
@@ -422,6 +405,37 @@ function useDraggableElement({
segments,
]);
useEffect(() => {
if (timelineRef.current && draggableElementTime && timelineCollapsed) {
const alignedSegmentTime = alignStartDateToTimeline(draggableElementTime);
let segmentElement = timelineRef.current.querySelector(
`[data-segment-id="${alignedSegmentTime}"]`,
);
if (!segmentElement) {
// segment not found, maybe we collapsed over a collapsible segment
let searchTime = alignedSegmentTime;
while (searchTime >= timelineStartAligned - timelineDuration) {
searchTime -= segmentDuration;
segmentElement = timelineRef.current.querySelector(
`[data-segment-id="${searchTime}"]`,
);
if (segmentElement) {
// found, set time
if (setDraggableElementTime) {
setDraggableElementTime(searchTime);
}
break;
}
}
}
}
// we know that these deps are correct
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [timelineCollapsed]);
return { handleMouseDown, handleMouseUp, handleMouseMove };
}