Fix useEffect and try to load next clip for preview

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

View File

@ -199,8 +199,6 @@ export default function DynamicVideoPlayer({
return <ActivityIndicator />;
}
//console.log(`${config.detect.width / config.detect.height < 1.7 ? "16:9" : undefined}`)
return (
<div className={className}>
<div
@ -406,13 +404,27 @@ export class DynamicVideoController {
}
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") {
this.playerMode = "scrubbing";
this.playerRef.current?.pause();
this.setScrubbing(true);
}
if (this.preview) {
if (this.seeking) {
this.timeToSeek = time;
} else {
@ -420,7 +432,6 @@ export class DynamicVideoController {
this.seeking = true;
}
}
}
finishedSeeking() {
if (!this.preview || this.playerMode == "playback") {

View File

@ -20,9 +20,13 @@ export default function DesktopRecordingView({
relevantPreviews,
}: DesktopRecordingViewProps) {
const navigate = useNavigate();
const controllerRef = useRef<DynamicVideoController | undefined>(undefined);
const contentRef = useRef<HTMLDivElement | null>(null);
// controller state
const [playerReady, setPlayerReady] = useState(false);
const controllerRef = useRef<DynamicVideoController | undefined>(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 (
<div ref={contentRef} className="relative w-full h-full">
@ -87,6 +91,7 @@ export default function DesktopRecordingView({
cameraPreviews={relevantPreviews || []}
onControllerReady={(controller) => {
controllerRef.current = controller;
setPlayerReady(true);
controllerRef.current.onPlayerTimeUpdate((timestamp: number) => {
setCurrentTime(timestamp);
});