administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-08 20:25:26 +03:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

Handle skipping to next preview

Browse Source
This commit is contained in:
Nicolas Mowen 2024-02-26 08:22:04 -07:00
parent 5cbc0443f7
commit 7986b8cf4f
2 changed files with 24 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

44
web/src/components/player/DynamicVideoPlayer.tsx
View File

@ -226,7 +226,7 @@ export default function DynamicVideoPlayer({
player.on("timeupdate", () => { player.on("timeupdate", () => {
controller.updateProgress(player.currentTime() || 0); controller.updateProgress(player.currentTime() || 0);
}); });
player.on("ended", () => controller.fireClipEndEvent()); player.on("ended", () => controller.fireClipChangeEvent("forward"));
if (onControllerReady) { if (onControllerReady) {
onControllerReady(controller); onControllerReady(controller);
@ -262,7 +262,7 @@ export default function DynamicVideoPlayer({
previewRef.current = player; previewRef.current = player;
player.pause(); player.pause();
player.on("seeked", () => controller.finishedSeeking()); player.on("seeked", () => controller.finishedSeeking());
player.on("loadeddata", () => controller.previewReady()) player.on("loadeddata", () => controller.previewReady());
}} }}
onDispose={() => { onDispose={() => {
previewRef.current = undefined; previewRef.current = undefined;
@ -284,7 +284,8 @@ export class DynamicVideoController {
// playback // playback
private recordings: Recording[] = []; private recordings: Recording[] = [];
private onPlaybackTimestamp: ((time: number) => void) | undefined = undefined; private onPlaybackTimestamp: ((time: number) => void) | undefined = undefined;
private onClipEnded: (() => void) | undefined = undefined; private onClipChange: ((dir: "forward" | "backward") => void) | undefined =
undefined;
private annotationOffset: number; private annotationOffset: number;
private timeToStart: number | undefined = undefined; private timeToStart: number | undefined = undefined;
@ -395,13 +396,13 @@ export class DynamicVideoController {
this.onPlaybackTimestamp = listener; this.onPlaybackTimestamp = listener;
} }
onClipEndedEvent(listener: () => void) { onClipChangedEvent(listener: (dir: "forward" | "backward") => void) {
this.onClipEnded = listener; this.onClipChange = listener;
} }
fireClipEndEvent() { fireClipChangeEvent(dir: "forward" | "backward") {
if (this.onClipEnded) { if (this.onClipChange) {
this.onClipEnded(); this.onClipChange(dir);
} }
} }
@ -410,6 +411,10 @@ export class DynamicVideoController {
return; return;
} }
if (!this.readyToScrub) {
return;
}
if (time > this.preview.end) { if (time > this.preview.end) {
if (this.playerMode == "scrubbing") { if (this.playerMode == "scrubbing") {
this.playerMode = "playback"; this.playerMode = "playback";
@ -417,35 +422,23 @@ export class DynamicVideoController {
this.timeToSeek = undefined; this.timeToSeek = undefined;
this.seeking = false; this.seeking = false;
this.readyToScrub = false; this.readyToScrub = false;
this.fireClipEndEvent(); this.fireClipChangeEvent("forward");
} }
return; return;
} }
if (!this.readyToScrub) {
return;
}
if (this.playerMode != "scrubbing") { if (this.playerMode != "scrubbing") {
this.playerMode = "scrubbing"; this.playerMode = "scrubbing";
this.playerRef.current?.pause(); this.playerRef.current?.pause();
this.setScrubbing(true); this.setScrubbing(true);
} }
console.log(
"scrubbing to " +
time +
" with current seek time " +
this.timeToSeek +
" and current player time " +
this.previewRef.current?.currentTime()
);
if (this.seeking) { if (this.seeking) {
this.timeToSeek = time; this.timeToSeek = time;
} else { } else {
console.log("player is being seeked to " + Math.max(0, time - this.preview.start)) this.previewRef.current?.currentTime(
this.previewRef.current?.currentTime(Math.max(0, time - this.preview.start)); Math.max(0, time - this.preview.start)
);
this.seeking = true; this.seeking = true;
} }
} }
@ -468,8 +461,7 @@ export class DynamicVideoController {
} }
previewReady() { previewReady() {
console.log("the preview is ready") this.previewRef.current?.pause();
this.previewRef.current?.pause()
this.readyToScrub = true; this.readyToScrub = true;
} }
} }

10
web/src/views/events/DesktopRecordingView.tsx
View File

@ -48,11 +48,13 @@ export default function DesktopRecordingView({
return; return;
} }
if (selectedRangeIdx < timeRange.ranges.length - 1) { controllerRef.current.onClipChangedEvent((dir) => {
controllerRef.current.onClipEndedEvent(() => { if (dir == "forward" && selectedRangeIdx < timeRange.ranges.length - 1) {
setSelectedRangeIdx(selectedRangeIdx + 1); setSelectedRangeIdx(selectedRangeIdx + 1);
}); } else if (selectedRangeIdx > 0) {
} setSelectedRangeIdx(selectedRangeIdx - 1);
}
});
}, [playerReady, selectedRangeIdx]); }, [playerReady, selectedRangeIdx]);
// scrubbing and timeline state // scrubbing and timeline state