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

use a single source of truth for scrubbing

Browse Source
This commit is contained in:
Josh Hawkins 2024-03-13 21:21:42 -05:00
parent 8937e3fd59
commit c3fc20129a
3 changed files with 9 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/src/components/player/dynamic/DynamicVideoController.ts
View File

@ -9,7 +9,7 @@ export class DynamicVideoController {
public camera = ""; public camera = "";
private playerController: HTMLVideoElement; private playerController: HTMLVideoElement;
private previewController: PreviewController; private previewController: PreviewController;
private setScrubbing: (isScrubbing: boolean) => void; private isScrubbing: boolean;
private setFocusedItem: (timeline: Timeline) => void; private setFocusedItem: (timeline: Timeline) => void;
private playerMode: PlayerMode = "playback"; private playerMode: PlayerMode = "playback";
@ -24,7 +24,7 @@ export class DynamicVideoController {
previewController: PreviewController, previewController: PreviewController,
annotationOffset: number, annotationOffset: number,
defaultMode: PlayerMode, defaultMode: PlayerMode,
setScrubbing: (isScrubbing: boolean) => void, isScrubbing: boolean,
setFocusedItem: (timeline: Timeline) => void, setFocusedItem: (timeline: Timeline) => void,
) { ) {
this.camera = camera; this.camera = camera;
@ -32,7 +32,7 @@ export class DynamicVideoController {
this.previewController = previewController; this.previewController = previewController;
this.annotationOffset = annotationOffset; this.annotationOffset = annotationOffset;
this.playerMode = defaultMode; this.playerMode = defaultMode;
this.setScrubbing = setScrubbing; this.isScrubbing = isScrubbing;
this.setFocusedItem = setFocusedItem; this.setFocusedItem = setFocusedItem;
} }
@ -52,7 +52,6 @@ export class DynamicVideoController {
seekToTimestamp(time: number, play: boolean = false) { seekToTimestamp(time: number, play: boolean = false) {
if (this.playerMode != "playback") { if (this.playerMode != "playback") {
this.playerMode = "playback"; this.playerMode = "playback";
this.setScrubbing(false);
} }
if ( if (
@ -123,10 +122,9 @@ export class DynamicVideoController {
this.previewController.setNewPreviewStartTime(time); this.previewController.setNewPreviewStartTime(time);
} }
if (scrubResult && this.playerMode != "scrubbing") { if (scrubResult && this.playerMode != "scrubbing" && !this.isScrubbing) {
this.playerMode = "scrubbing"; this.playerMode = "scrubbing";
this.playerController.pause(); this.playerController.pause();
this.setScrubbing(true);
} }
} }

5
web/src/components/player/dynamic/DynamicVideoPlayer.tsx
View File

@ -21,6 +21,7 @@ type DynamicVideoPlayerProps = {
onControllerReady: (controller: DynamicVideoController) => void; onControllerReady: (controller: DynamicVideoController) => void;
onTimestampUpdate?: (timestamp: number) => void; onTimestampUpdate?: (timestamp: number) => void;
onClipEnded?: () => void; onClipEnded?: () => void;
isScrubbing: boolean;
}; };
export default function DynamicVideoPlayer({ export default function DynamicVideoPlayer({
className, className,
@ -31,6 +32,7 @@ export default function DynamicVideoPlayer({
onControllerReady, onControllerReady,
onTimestampUpdate, onTimestampUpdate,
onClipEnded, onClipEnded,
isScrubbing,
}: DynamicVideoPlayerProps) { }: DynamicVideoPlayerProps) {
const apiHost = useApiHost(); const apiHost = useApiHost();
const { data: config } = useSWR<FrigateConfig>("config"); const { data: config } = useSWR<FrigateConfig>("config");
@ -53,7 +55,6 @@ export default function DynamicVideoPlayer({
const playerRef = useRef<HTMLVideoElement | null>(null); const playerRef = useRef<HTMLVideoElement | null>(null);
const [previewController, setPreviewController] = const [previewController, setPreviewController] =
useState<PreviewController | null>(null); useState<PreviewController | null>(null);
const [isScrubbing, setIsScrubbing] = useState(false);
const [focusedItem, setFocusedItem] = useState<Timeline | undefined>( const [focusedItem, setFocusedItem] = useState<Timeline | undefined>(
undefined, undefined,
); );
@ -68,7 +69,7 @@ export default function DynamicVideoPlayer({
previewController, previewController,
(config.cameras[camera]?.detect?.annotation_offset || 0) / 1000, (config.cameras[camera]?.detect?.annotation_offset || 0) / 1000,
"playback", "playback",
setIsScrubbing, isScrubbing,
setFocusedItem, setFocusedItem,
); );
// we only want to fire once when players are ready // we only want to fire once when players are ready

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

@ -234,6 +234,7 @@ export function DesktopRecordingView({
onControllerReady={(controller) => { onControllerReady={(controller) => {
mainControllerRef.current = controller; mainControllerRef.current = controller;
}} }}
isScrubbing={scrubbing}
/> />
</div> </div>
<div className="w-full flex justify-center gap-2 overflow-x-auto"> <div className="w-full flex justify-center gap-2 overflow-x-auto">
@ -452,6 +453,7 @@ export function MobileRecordingView({
}} }}
onTimestampUpdate={setCurrentTime} onTimestampUpdate={setCurrentTime}
onClipEnded={onClipEnded} onClipEnded={onClipEnded}
isScrubbing={scrubbing}
/> />
</div> </div>