diff --git a/web/src/hooks/use-overlay-state.tsx b/web/src/hooks/use-overlay-state.tsx index 656b61bda..391712c6a 100644 --- a/web/src/hooks/use-overlay-state.tsx +++ b/web/src/hooks/use-overlay-state.tsx @@ -8,7 +8,8 @@ export function useOverlayState( ): [S | undefined, (value: S, replace?: boolean) => void] { const location = useLocation(); const navigate = useNavigate(); - const currentLocationState = location.state; + + const currentLocationState = useMemo(() => location.state, [location]); const setOverlayStateValue = useCallback( (value: S, replace: boolean = false) => { @@ -18,7 +19,7 @@ export function useOverlayState( }, // we know that these deps are correct // eslint-disable-next-line react-hooks/exhaustive-deps - [key, navigate], + [key, currentLocationState, navigate], ); const overlayStateValue = useMemo( @@ -39,7 +40,8 @@ export function usePersistedOverlayState( ); const location = useLocation(); const navigate = useNavigate(); - const currentLocationState = location.state; + + const currentLocationState = useMemo(() => location.state, [location]); const setOverlayStateValue = useCallback( (value: S | undefined, replace: boolean = false) => { @@ -50,7 +52,7 @@ export function usePersistedOverlayState( }, // we know that these deps are correct // eslint-disable-next-line react-hooks/exhaustive-deps - [key, navigate], + [key, currentLocationState, navigate], ); const overlayStateValue = useMemo( diff --git a/web/src/views/events/EventView.tsx b/web/src/views/events/EventView.tsx index 7c33648f0..18f7731dd 100644 --- a/web/src/views/events/EventView.tsx +++ b/web/src/views/events/EventView.tsx @@ -805,6 +805,11 @@ function MotionReview({ return; } + if (nextTimestamp >= timeRange.before - 4) { + setPlaying(false); + return; + } + const handleTimeout = () => { setCurrentTime(nextTimestamp); timeoutIdRef.current = setTimeout(handleTimeout, 500 / playbackRate); @@ -818,7 +823,7 @@ function MotionReview({ } }; } - }, [playing, playbackRate, nextTimestamp]); + }, [playing, playbackRate, nextTimestamp, setPlaying, timeRange]); const { alignStartDateToTimeline } = useTimelineUtils({ segmentDuration, @@ -962,37 +967,35 @@ function MotionReview({ )} - {!scrubbing && ( - { - const wasPlaying = playing; + { + const wasPlaying = playing; - if (wasPlaying) { - setPlaying(false); - } + if (wasPlaying) { + setPlaying(false); + } - setCurrentTime(currentTime + diff); + setCurrentTime(currentTime + diff); - if (wasPlaying) { - setTimeout(() => setPlaying(true), 100); - } - }} - onSetPlaybackRate={setPlaybackRate} - show={currentTime < timeRange.before - 4} - /> - )} + if (wasPlaying) { + setTimeout(() => setPlaying(true), 100); + } + }} + onSetPlaybackRate={setPlaybackRate} + /> ); }