chris/frigate
1
0
Fork 0
forked from Github/frigate
Code Pull Requests Packages 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
2 changed files with 38 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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}
/>
</>
);
}