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] {
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<S>(
},
// we know that these deps are correct
// eslint-disable-next-line react-hooks/exhaustive-deps
[key, navigate],
[key, currentLocationState, navigate],
);
const overlayStateValue = useMemo<S | undefined>(
@ -39,7 +40,8 @@ export function usePersistedOverlayState<S extends string>(
);
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<S extends string>(
},
// we know that these deps are correct
// eslint-disable-next-line react-hooks/exhaustive-deps
[key, navigate],
[key, currentLocationState, navigate],
);
const overlayStateValue = useMemo<S | undefined>(

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

@ -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({
)}
</div>
{!scrubbing && (
<VideoControls
className="absolute bottom-16 left-1/2 -translate-x-1/2 bg-secondary"
features={{
volume: false,
seek: true,
playbackRate: true,
}}
isPlaying={playing}
playbackRates={[4, 8, 12, 16]}
playbackRate={playbackRate}
controlsOpen={controlsOpen}
setControlsOpen={setControlsOpen}
onPlayPause={setPlaying}
onSeek={(diff) => {
const wasPlaying = playing;
<VideoControls
className="absolute bottom-16 left-1/2 -translate-x-1/2 bg-secondary"
features={{
volume: false,
seek: true,
playbackRate: true,
}}
isPlaying={playing}
show={!scrubbing}
playbackRates={[4, 8, 12, 16]}
playbackRate={playbackRate}
controlsOpen={controlsOpen}
setControlsOpen={setControlsOpen}
onPlayPause={setPlaying}
onSeek={(diff) => {
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}
/>
</>
);
}