Handle back seeking going to previous clip

This commit is contained in:
Nicolas Mowen 2026-06-21 12:23:28 -06:00
parent d036061e3f
commit 4b7bc4fe13
3 changed files with 24 additions and 2 deletions

View File

@ -47,6 +47,7 @@ type HlsVideoPlayerProps = {
frigateControls?: boolean; frigateControls?: boolean;
inpointOffset?: number; inpointOffset?: number;
onClipEnded?: (currentTime: number) => void; onClipEnded?: (currentTime: number) => void;
onClipPrevious?: (diff: number) => void;
onPlayerLoaded?: () => void; onPlayerLoaded?: () => void;
onTimeUpdate?: (time: number) => void; onTimeUpdate?: (time: number) => void;
onPlaying?: () => void; onPlaying?: () => void;
@ -74,6 +75,7 @@ export default function HlsVideoPlayer({
frigateControls = true, frigateControls = true,
inpointOffset = 0, inpointOffset = 0,
onClipEnded, onClipEnded,
onClipPrevious,
onPlayerLoaded, onPlayerLoaded,
onTimeUpdate, onTimeUpdate,
onPlaying, onPlaying,
@ -339,11 +341,17 @@ export default function HlsVideoPlayer({
onSeek={(diff) => { onSeek={(diff) => {
const currentTime = videoRef.current?.currentTime; const currentTime = videoRef.current?.currentTime;
if (!videoRef.current || !currentTime) { if (!videoRef.current || currentTime == undefined) {
return; return;
} }
videoRef.current.currentTime = Math.max(0, currentTime + diff); const newTime = currentTime + diff;
if (newTime < 0 && onClipPrevious) {
onClipPrevious(diff);
} else {
videoRef.current.currentTime = Math.max(0, newTime);
}
}} }}
onSetPlaybackRate={(rate) => { onSetPlaybackRate={(rate) => {
setPlaybackRate(rate, true); setPlaybackRate(rate, true);

View File

@ -49,6 +49,7 @@ type DynamicVideoPlayerProps = {
onControllerReady: (controller: DynamicVideoController) => void; onControllerReady: (controller: DynamicVideoController) => void;
onTimestampUpdate?: (timestamp: number) => void; onTimestampUpdate?: (timestamp: number) => void;
onClipEnded?: () => void; onClipEnded?: () => void;
onClipPrevious?: (diff: number) => void;
onSeekToTime?: (timestamp: number, play?: boolean) => void; onSeekToTime?: (timestamp: number, play?: boolean) => void;
setFullResolution: React.Dispatch<React.SetStateAction<VideoResolutionType>>; setFullResolution: React.Dispatch<React.SetStateAction<VideoResolutionType>>;
toggleFullscreen: () => void; toggleFullscreen: () => void;
@ -68,6 +69,7 @@ export default function DynamicVideoPlayer({
onControllerReady, onControllerReady,
onTimestampUpdate, onTimestampUpdate,
onClipEnded, onClipEnded,
onClipPrevious,
onSeekToTime, onSeekToTime,
setFullResolution, setFullResolution,
toggleFullscreen, toggleFullscreen,
@ -343,6 +345,7 @@ export default function DynamicVideoPlayer({
onTimeUpdate={onTimeUpdate} onTimeUpdate={onTimeUpdate}
onPlayerLoaded={onPlayerLoaded} onPlayerLoaded={onPlayerLoaded}
onClipEnded={onValidateClipEnd} onClipEnded={onValidateClipEnd}
onClipPrevious={onClipPrevious}
onSeekToTime={(timestamp, play) => { onSeekToTime={(timestamp, play) => {
if (onSeekToTime) { if (onSeekToTime) {
onSeekToTime(timestamp, play); onSeekToTime(timestamp, play);

View File

@ -336,6 +336,16 @@ export function RecordingView({
[currentTimeRange, updateSelectedSegment], [currentTimeRange, updateSelectedSegment],
); );
const onClipPrevious = useCallback(
(diff: number) => {
manuallySetCurrentTime(
currentTime + diff,
mainControllerRef.current?.isPlaying() ?? false,
);
},
[currentTime, manuallySetCurrentTime],
);
const onShareReviewLink = useCallback( const onShareReviewLink = useCallback(
(timestamp: number) => { (timestamp: number) => {
const reviewUrl = createRecordingReviewUrl(location.pathname, { const reviewUrl = createRecordingReviewUrl(location.pathname, {
@ -902,6 +912,7 @@ export function RecordingView({
); );
}} }}
onClipEnded={onClipEnded} onClipEnded={onClipEnded}
onClipPrevious={onClipPrevious}
onSeekToTime={manuallySetCurrentTime} onSeekToTime={manuallySetCurrentTime}
onControllerReady={(controller) => { onControllerReady={(controller) => {
mainControllerRef.current = controller; mainControllerRef.current = controller;