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);
});