mirror of
https://github.com/blakeblackshear/frigate.git
synced 2026-02-09 04:35:25 +03:00
rename vars for clarity and use timeout instead of interval
This commit is contained in:
parent
b399b13559
commit
b9bd71d04c
@ -720,7 +720,7 @@ function MotionReview({
|
|||||||
const [playbackRate, setPlaybackRate] = useState(8);
|
const [playbackRate, setPlaybackRate] = useState(8);
|
||||||
const [controlsOpen, setControlsOpen] = useState(false);
|
const [controlsOpen, setControlsOpen] = useState(false);
|
||||||
|
|
||||||
const ranges = useMemo(() => {
|
const noMotionRanges = useMemo(() => {
|
||||||
if (!motionData || !reviewItems) {
|
if (!motionData || !reviewItems) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
@ -769,14 +769,14 @@ function MotionReview({
|
|||||||
}, [motionData, reviewItems, motionOnly]);
|
}, [motionData, reviewItems, motionOnly]);
|
||||||
|
|
||||||
const nextTimestamp = useMemo(() => {
|
const nextTimestamp = useMemo(() => {
|
||||||
if (!ranges) {
|
if (!noMotionRanges) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
let currentRange = 0;
|
let currentRange = 0;
|
||||||
let nextTimestamp = currentTime + 0.5;
|
let nextTimestamp = currentTime + 0.5;
|
||||||
|
|
||||||
while (currentRange < ranges.length) {
|
while (currentRange < noMotionRanges.length) {
|
||||||
const [start, end] = ranges[currentRange];
|
const [start, end] = noMotionRanges[currentRange];
|
||||||
|
|
||||||
if (start && end) {
|
if (start && end) {
|
||||||
// If the current time is before the start of the current range
|
// If the current time is before the start of the current range
|
||||||
@ -799,26 +799,30 @@ function MotionReview({
|
|||||||
}
|
}
|
||||||
|
|
||||||
return nextTimestamp;
|
return nextTimestamp;
|
||||||
}, [currentTime, ranges]);
|
}, [currentTime, noMotionRanges]);
|
||||||
|
|
||||||
|
const timeoutIdRef = useRef<NodeJS.Timeout | null>(null);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (!playing) {
|
if (nextTimestamp) {
|
||||||
return;
|
if (!playing && timeoutIdRef.current != null) {
|
||||||
}
|
clearTimeout(timeoutIdRef.current);
|
||||||
|
return;
|
||||||
const interval = 500 / playbackRate;
|
|
||||||
|
|
||||||
const intervalId = setInterval(() => {
|
|
||||||
if (nextTimestamp) {
|
|
||||||
setCurrentTime(nextTimestamp);
|
|
||||||
}
|
}
|
||||||
}, interval);
|
|
||||||
|
|
||||||
return () => {
|
const handleTimeout = () => {
|
||||||
clearInterval(intervalId);
|
setCurrentTime(nextTimestamp);
|
||||||
};
|
timeoutIdRef.current = setTimeout(handleTimeout, 500 / playbackRate);
|
||||||
// do not render when current time changes
|
};
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
||||||
|
timeoutIdRef.current = setTimeout(handleTimeout, 500 / playbackRate);
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
if (timeoutIdRef.current) {
|
||||||
|
clearTimeout(timeoutIdRef.current);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
}, [playing, playbackRate, nextTimestamp]);
|
}, [playing, playbackRate, nextTimestamp]);
|
||||||
|
|
||||||
const { alignStartDateToTimeline } = useTimelineUtils({
|
const { alignStartDateToTimeline } = useTimelineUtils({
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user