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

Fix handling of recordings and switching cameras

Browse Source
This commit is contained in:
Nicolas Mowen 2024-03-09 08:58:48 -07:00
parent 9fc1286568
commit 6a9a6626f4
2 changed files with 62 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { useCallback, useEffect, useMemo, useState } from "react";
import VideoPlayer from "./VideoPlayer";
import Player from "video.js/dist/types/player";
import TimelineEventOverlay from "../overlay/TimelineDataOverlay";
@ -24,6 +24,7 @@ type DynamicVideoPlayerProps = {
timeRange: { start: number; end: number };
cameraPreviews: Preview[];
previewOnly?: boolean;
startTime?: number;
onControllerReady: (controller: DynamicVideoController) => void;
onClick?: () => void;
};
@ -33,6 +34,7 @@ export default function DynamicVideoPlayer({
timeRange,
cameraPreviews,
previewOnly = false,
startTime,
onControllerReady,
onClick,
}: DynamicVideoPlayerProps) {
@ -59,7 +61,7 @@ export default function DynamicVideoPlayer({
// controlling playback
const playerRef = useRef<Player | null>(null);
const [playerRef, setPlayerRef] = useState<Player | null>(null);
const [previewController, setPreviewController] =
useState<PreviewVideoController | null>(null);
const [isScrubbing, setIsScrubbing] = useState(previewOnly);
@ -67,13 +69,13 @@ export default function DynamicVideoPlayer({
undefined,
);
const controller = useMemo(() => {
if (!config || !playerRef.current || !previewController) {
if (!config || !playerRef || !previewController) {
return undefined;
}
return new DynamicVideoController(
camera,
playerRef.current,
playerRef,
previewController,
(config.cameras[camera]?.detect?.annotation_offset || 0) / 1000,
previewOnly ? "scrubbing" : "playback",
@ -82,7 +84,7 @@ export default function DynamicVideoPlayer({
);
// we only want to fire once when players are ready
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [camera, config, playerRef.current, previewController]);
}, [camera, config, playerRef, previewController]);
useEffect(() => {
if (!controller) {
@ -100,7 +102,7 @@ export default function DynamicVideoPlayer({
const [initPreviewOnly, setInitPreviewOnly] = useState(previewOnly);
useEffect(() => {
if (!controller || !playerRef.current) {
if (!controller || !playerRef) {
return;
}
@ -109,7 +111,7 @@ export default function DynamicVideoPlayer({
}
if (!previewOnly) {
controller.seekToTimestamp(playerRef.current.currentTime() || 0, true);
controller.seekToTimestamp(playerRef.currentTime() || 0, true);
}
setInitPreviewOnly(previewOnly);
@ -121,40 +123,40 @@ export default function DynamicVideoPlayer({
const onKeyboardShortcut = useCallback(
(key: string, down: boolean, repeat: boolean) => {
if (!playerRef.current || previewOnly) {
if (!playerRef || previewOnly) {
return;
}
switch (key) {
case "ArrowLeft":
if (down) {
const currentTime = playerRef.current.currentTime();
const currentTime = playerRef.currentTime();
if (currentTime) {
playerRef.current.currentTime(Math.max(0, currentTime - 5));
playerRef.currentTime(Math.max(0, currentTime - 5));
}
}
break;
case "ArrowRight":
if (down) {
const currentTime = playerRef.current.currentTime();
const currentTime = playerRef.currentTime();
if (currentTime) {
playerRef.current.currentTime(currentTime + 5);
playerRef.currentTime(currentTime + 5);
}
}
break;
case "m":
if (down && !repeat && playerRef) {
playerRef.current.muted(!playerRef.current.muted());
playerRef.muted(!playerRef.muted());
}
break;
case " ":
if (down && playerRef) {
if (playerRef.current.paused()) {
playerRef.current.play();
if (playerRef.paused()) {
playerRef.play();
} else {
playerRef.current.pause();
playerRef.pause();
}
}
break;
@ -162,7 +164,7 @@ export default function DynamicVideoPlayer({
},
// only update when preview only changes
// eslint-disable-next-line react-hooks/exhaustive-deps
[playerRef.current, previewOnly],
[playerRef, previewOnly],
);
useKeyboardListener(
["ArrowLeft", "ArrowRight", "m", " "],
@ -186,6 +188,35 @@ export default function DynamicVideoPlayer({
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
// start at correct time
useEffect(() => {
if (previewOnly || !startTime) {
return;
}
const player = playerRef;
if (!player) {
return;
}
if (player.isReady_) {
controller?.seekToTimestamp(startTime, true);
return;
}
const callback = () => {
controller?.seekToTimestamp(startTime, true);
};
player.on("loadeddata", callback);
return () => {
player.off("loadeddata", callback);
};
// we only want to calculate this once
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [previewOnly, startTime, controller]);
// state of playback player
const recordingParams = useMemo(() => {
@ -236,7 +267,7 @@ export default function DynamicVideoPlayer({
<VideoPlayer
options={{
preload: "auto",
autoplay: !previewOnly,
autoplay: false,
sources: [initialPlaybackSource],
aspectRatio: wideVideo ? undefined : "16:9",
controlBar: {
@ -248,10 +279,10 @@ export default function DynamicVideoPlayer({
}}
seekOptions={{ forward: 10, backward: 5 }}
onReady={(player) => {
playerRef.current = player;
setPlayerRef(player);
}}
onDispose={() => {
playerRef.current = null;
setPlayerRef(null);
}}
>
{config && focusedItem && (
@ -289,12 +320,10 @@ export class DynamicVideoController {
private recordings: Recording[] = [];
private annotationOffset: number;
private timeToStart: number | undefined = undefined;
private canPlay: boolean = false;
// listeners
private playerProgressListener: (() => void) | null = null;
private playerEndedListener: (() => void) | null = null;
private canPlayListener: (() => void) | null = null;
constructor(
camera: string,
@ -320,7 +349,6 @@ export class DynamicVideoController {
src: newPlayback.playbackUri,
type: "application/vnd.apple.mpegurl",
});
this.canPlay = false;
if (this.timeToStart) {
this.seekToTimestamp(this.timeToStart);
@ -328,10 +356,6 @@ export class DynamicVideoController {
}
}
autoPlay(play: boolean) {
this.playerController.autoplay(play);
}
seekToTimestamp(time: number, play: boolean = false) {
if (this.playerMode != "playback") {
this.playerMode = "playback";
@ -391,21 +415,6 @@ export class DynamicVideoController {
return timestamp;
}
onCanPlay(listener: (() => void) | null) {
if (this.canPlayListener) {
this.playerController.off("canplay", this.canPlayListener);
this.canPlayListener = null;
}
if (listener) {
this.canPlayListener = () => {
this.canPlay = true;
listener();
};
this.playerController.on("canplay", this.canPlayListener);
}
}
onPlayerTimeUpdate(listener: ((timestamp: number) => void) | null) {
if (this.playerProgressListener) {
this.playerController.off("timeupdate", this.playerProgressListener);
@ -414,9 +423,13 @@ export class DynamicVideoController {
if (listener) {
this.playerProgressListener = () => {
if (this.canPlay) {
listener(this.getProgress(this.playerController.currentTime() || 0));
const progress = this.playerController.currentTime() || 0;
if (progress == 0) {
return;
}
listener(this.getProgress(progress));
};
this.playerController.on("timeupdate", this.playerProgressListener);
}

16
web/src/views/events/RecordingView.tsx
View File

@ -40,6 +40,8 @@ export function DesktopRecordingView({
{},
);
const [playbackStart, setPlaybackStart] = useState(startTime);
// timeline time
const timeRange = useMemo(() => getChunkedTimeDay(startTime), [startTime]);
@ -119,13 +121,7 @@ export function DesktopRecordingView({
const newController = videoPlayersRef.current[newCam];
lastController.onPlayerTimeUpdate(null);
lastController.onClipChangedEvent(null);
lastController.autoPlay(false);
lastController.scrubToTimestamp(currentTime);
newController.autoPlay(true);
newController.onCanPlay(() => {
newController.seekToTimestamp(currentTime, true);
newController.onCanPlay(null);
});
newController.onPlayerTimeUpdate((timestamp: number) => {
setCurrentTime(timestamp);
@ -137,6 +133,8 @@ export function DesktopRecordingView({
}
});
});
newController.seekToTimestamp(currentTime, true);
setPlaybackStart(currentTime);
setMainCamera(newCam);
},
[allCameras, currentTime, mainCamera],
@ -179,6 +177,7 @@ export function DesktopRecordingView({
camera={cam}
timeRange={currentTimeRange}
cameraPreviews={allPreviews ?? []}
startTime={playbackStart}
onControllerReady={(controller) => {
videoPlayersRef.current[cam] = controller;
controller.onPlayerTimeUpdate((timestamp: number) => {
@ -192,11 +191,6 @@ export function DesktopRecordingView({
}
});
});
controller.onCanPlay(() => {
controller.seekToTimestamp(startTime, true);
controller.onCanPlay(null);
});
}}
/>
</div>