motion video controls handle current time better

This commit is contained in:
Nicolas Mowen 2024-05-01 10:24:21 -06:00
parent 2e63941598
commit aea4e77d69

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