Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

Show motion playback on page initially (#11196)

Browse Source 
* motion video controls handle current time better

* Make sure state is updated
This commit is contained in:
Nicolas Mowen 2024-05-01 20:23:03 -06:00 committed by GitHub
parent 2e63941598
commit 28dd871d44
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 38 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/hooks/use-overlay-state.tsx
View File

@ -8,7 +8,8 @@ export function useOverlayState<S>(
): [S | undefined, (value: S, replace?: boolean) => void] { ): [S | undefined, (value: S, replace?: boolean) => void] {
const location = useLocation(); const location = useLocation();
const navigate = useNavigate(); const navigate = useNavigate();
const currentLocationState = location.state;
const currentLocationState = useMemo(() => location.state, [location]);
const setOverlayStateValue = useCallback( const setOverlayStateValue = useCallback(
(value: S, replace: boolean = false) => { (value: S, replace: boolean = false) => {
@ -18,7 +19,7 @@ export function useOverlayState<S>(
}, },
// we know that these deps are correct // we know that these deps are correct
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
[key, navigate], [key, currentLocationState, navigate],
); );
const overlayStateValue = useMemo<S | undefined>( const overlayStateValue = useMemo<S | undefined>(
@ -39,7 +40,8 @@ export function usePersistedOverlayState<S extends string>(
); );
const location = useLocation(); const location = useLocation();
const navigate = useNavigate(); const navigate = useNavigate();
const currentLocationState = location.state;
const currentLocationState = useMemo(() => location.state, [location]);
const setOverlayStateValue = useCallback( const setOverlayStateValue = useCallback(
(value: S | undefined, replace: boolean = false) => { (value: S | undefined, replace: boolean = false) => {
@ -50,7 +52,7 @@ export function usePersistedOverlayState<S extends string>(
}, },
// we know that these deps are correct // we know that these deps are correct
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
[key, navigate], [key, currentLocationState, navigate],
); );
const overlayStateValue = useMemo<S | undefined>( const overlayStateValue = useMemo<S | undefined>(

61
web/src/views/events/EventView.tsx
View File

@ -805,6 +805,11 @@ function MotionReview({
return; return;
} }
if (nextTimestamp >= timeRange.before - 4) {
setPlaying(false);
return;
}
const handleTimeout = () => { const handleTimeout = () => {
setCurrentTime(nextTimestamp); setCurrentTime(nextTimestamp);
timeoutIdRef.current = setTimeout(handleTimeout, 500 / playbackRate); timeoutIdRef.current = setTimeout(handleTimeout, 500 / playbackRate);
@ -818,7 +823,7 @@ function MotionReview({
} }
}; };
} }
}, [playing, playbackRate, nextTimestamp]); }, [playing, playbackRate, nextTimestamp, setPlaying, timeRange]);
const { alignStartDateToTimeline } = useTimelineUtils({ const { alignStartDateToTimeline } = useTimelineUtils({
segmentDuration, segmentDuration,
@ -962,37 +967,35 @@ function MotionReview({
)} )}
</div> </div>
{!scrubbing && ( <VideoControls
<VideoControls className="absolute bottom-16 left-1/2 -translate-x-1/2 bg-secondary"
className="absolute bottom-16 left-1/2 -translate-x-1/2 bg-secondary" features={{
features={{ volume: false,
volume: false, seek: true,
seek: true, playbackRate: true,
playbackRate: true, }}
}} isPlaying={playing}
isPlaying={playing} show={!scrubbing}
playbackRates={[4, 8, 12, 16]} playbackRates={[4, 8, 12, 16]}
playbackRate={playbackRate} playbackRate={playbackRate}
controlsOpen={controlsOpen} controlsOpen={controlsOpen}
setControlsOpen={setControlsOpen} setControlsOpen={setControlsOpen}
onPlayPause={setPlaying} onPlayPause={setPlaying}
onSeek={(diff) => { onSeek={(diff) => {
const wasPlaying = playing; const wasPlaying = playing;
if (wasPlaying) { if (wasPlaying) {
setPlaying(false); setPlaying(false);
} }
setCurrentTime(currentTime + diff); setCurrentTime(currentTime + diff);
if (wasPlaying) { if (wasPlaying) {
setTimeout(() => setPlaying(true), 100); setTimeout(() => setPlaying(true), 100);
} }
}} }}
onSetPlaybackRate={setPlaybackRate} onSetPlaybackRate={setPlaybackRate}
show={currentTime < timeRange.before - 4} />
/>
)}
</> </>
); );
} }