diff --git a/web/src/components/player/DynamicVideoPlayer.tsx b/web/src/components/player/DynamicVideoPlayer.tsx index 306f10392..2f5d148b0 100644 --- a/web/src/components/player/DynamicVideoPlayer.tsx +++ b/web/src/components/player/DynamicVideoPlayer.tsx @@ -199,8 +199,6 @@ export default function DynamicVideoPlayer({ return ; } - //console.log(`${config.detect.width / config.detect.height < 1.7 ? "16:9" : undefined}`) - return (
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") { this.playerMode = "scrubbing"; this.playerRef.current?.pause(); this.setScrubbing(true); } - if (this.preview) { - if (this.seeking) { - this.timeToSeek = time; - } else { - this.previewRef.current?.currentTime(time - this.preview.start); - this.seeking = true; - } + if (this.seeking) { + this.timeToSeek = time; + } else { + this.previewRef.current?.currentTime(time - this.preview.start); + this.seeking = true; } } diff --git a/web/src/views/events/DesktopRecordingView.tsx b/web/src/views/events/DesktopRecordingView.tsx index 4b73e6491..30438cf0a 100644 --- a/web/src/views/events/DesktopRecordingView.tsx +++ b/web/src/views/events/DesktopRecordingView.tsx @@ -20,9 +20,13 @@ export default function DesktopRecordingView({ relevantPreviews, }: DesktopRecordingViewProps) { const navigate = useNavigate(); - const controllerRef = useRef(undefined); const contentRef = useRef(null); + // controller state + + const [playerReady, setPlayerReady] = useState(false); + const controllerRef = useRef(undefined); + // timeline time const timeRange = useMemo( @@ -49,7 +53,7 @@ export default function DesktopRecordingView({ setSelectedRangeIdx(selectedRangeIdx + 1); }); } - }, [controllerRef, selectedRangeIdx]); + }, [playerReady, selectedRangeIdx]); // scrubbing and timeline state @@ -62,13 +66,13 @@ export default function DesktopRecordingView({ if (scrubbing) { controllerRef.current?.scrubToTimestamp(currentTime); } - }, [controllerRef, currentTime, scrubbing]); + }, [currentTime, scrubbing]); useEffect(() => { if (!scrubbing) { controllerRef.current?.seekToTimestamp(currentTime, true); } - }, [controllerRef, scrubbing]); + }, [scrubbing]); return (
@@ -87,6 +91,7 @@ export default function DesktopRecordingView({ cameraPreviews={relevantPreviews || []} onControllerReady={(controller) => { controllerRef.current = controller; + setPlayerReady(true); controllerRef.current.onPlayerTimeUpdate((timestamp: number) => { setCurrentTime(timestamp); });