rename vars for clarity and use timeout instead of interval

This commit is contained in:
Josh Hawkins 2024-03-24 21:19:15 -05:00
parent b399b13559
commit b9bd71d04c

View File

@ -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({