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

Fix useEffect and try to load next clip for preview

Browse Source
This commit is contained in:
Nicolas Mowen 2024-02-26 07:14:14 -07:00
parent 0a15ef022b
commit 81f0c68b85
2 changed files with 29 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -199,8 +199,6 @@ export default function DynamicVideoPlayer({
return <ActivityIndicator />; return <ActivityIndicator />;
} }
//console.log(`${config.detect.width / config.detect.height < 1.7 ? "16:9" : undefined}`)
return ( return (
<div className={className}> <div className={className}>
<div <div
@ -406,19 +404,32 @@ export class DynamicVideoController {
} }
scrubToTimestamp(time: number) { scrubToTimestamp(time: number) {
if (!this.preview) {
return;
}
if (time > this.preview.end) {
if (this.playerMode == "scrubbing") {
this.fireClipEndEvent();
this.playerMode = "playback";
this.setScrubbing(false);
this.timeToSeek = undefined;
this.seeking = false;
}
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);
} }
if (this.preview) { if (this.seeking) {
if (this.seeking) { this.timeToSeek = time;
this.timeToSeek = time; } else {
} else { this.previewRef.current?.currentTime(time - this.preview.start);
this.previewRef.current?.currentTime(time - this.preview.start); this.seeking = true;
this.seeking = true;
}
} }
} }

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

@ -20,9 +20,13 @@ export default function DesktopRecordingView({
relevantPreviews, relevantPreviews,
}: DesktopRecordingViewProps) { }: DesktopRecordingViewProps) {
const navigate = useNavigate(); const navigate = useNavigate();
const controllerRef = useRef<DynamicVideoController | undefined>(undefined);
const contentRef = useRef<HTMLDivElement | null>(null); const contentRef = useRef<HTMLDivElement | null>(null);
// controller state
const [playerReady, setPlayerReady] = useState(false);
const controllerRef = useRef<DynamicVideoController | undefined>(undefined);
// timeline time // timeline time
const timeRange = useMemo( const timeRange = useMemo(
@ -49,7 +53,7 @@ export default function DesktopRecordingView({
setSelectedRangeIdx(selectedRangeIdx + 1); setSelectedRangeIdx(selectedRangeIdx + 1);
}); });
} }
}, [controllerRef, selectedRangeIdx]); }, [playerReady, selectedRangeIdx]);
// scrubbing and timeline state // scrubbing and timeline state
@ -62,13 +66,13 @@ export default function DesktopRecordingView({
if (scrubbing) { if (scrubbing) {
controllerRef.current?.scrubToTimestamp(currentTime); controllerRef.current?.scrubToTimestamp(currentTime);
} }
}, [controllerRef, currentTime, scrubbing]); }, [currentTime, scrubbing]);
useEffect(() => { useEffect(() => {
if (!scrubbing) { if (!scrubbing) {
controllerRef.current?.seekToTimestamp(currentTime, true); controllerRef.current?.seekToTimestamp(currentTime, true);
} }
}, [controllerRef, scrubbing]); }, [scrubbing]);
return ( return (
<div ref={contentRef} className="relative w-full h-full"> <div ref={contentRef} className="relative w-full h-full">
@ -87,6 +91,7 @@ export default function DesktopRecordingView({
cameraPreviews={relevantPreviews || []} cameraPreviews={relevantPreviews || []}
onControllerReady={(controller) => { onControllerReady={(controller) => {
controllerRef.current = controller; controllerRef.current = controller;
setPlayerReady(true);
controllerRef.current.onPlayerTimeUpdate((timestamp: number) => { controllerRef.current.onPlayerTimeUpdate((timestamp: number) => {
setCurrentTime(timestamp); setCurrentTime(timestamp);
}); });