Mirrors/blakeblackshear.frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2024-11-21 19:07:46 +01:00
Code Issues Projects Releases Wiki Activity

Fix motion and recording views (#10318)

Browse Source 
* Fix switching between different hours

* Simplify book keeping of different time ranges

* Rewrite player to handle changing of previews outside of video player

* Simplify switching between cameras

* Fix previews causing cameras to not load

* Simplify listeners

* Always clear existing listener
This commit is contained in:
Nicolas Mowen 2024-03-07 17:31:43 -07:00 committed by GitHub
parent fc6d6a4e9a
commit 90a40d2509
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 231 additions and 153 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -12,7 +12,6 @@ import TimelineEventOverlay from "../overlay/TimelineDataOverlay";
import { useApiHost } from "@/api"; import { useApiHost } from "@/api";
import useSWR from "swr"; import useSWR from "swr";
import { FrigateConfig } from "@/types/frigateConfig"; import { FrigateConfig } from "@/types/frigateConfig";
import ActivityIndicator from "../indicators/activity-indicator";
import useKeyboardListener from "@/hooks/use-keyboard-listener"; import useKeyboardListener from "@/hooks/use-keyboard-listener";
import { Recording } from "@/types/record"; import { Recording } from "@/types/record";
import { Preview } from "@/types/preview"; import { Preview } from "@/types/preview";
@ -29,6 +28,7 @@ type DynamicVideoPlayerProps = {
timeRange: { start: number; end: number }; timeRange: { start: number; end: number };
cameraPreviews: Preview[]; cameraPreviews: Preview[];
previewOnly?: boolean; previewOnly?: boolean;
preloadRecordings: boolean;
onControllerReady: (controller: DynamicVideoController) => void; onControllerReady: (controller: DynamicVideoController) => void;
onClick?: () => void; onClick?: () => void;
}; };
@ -38,6 +38,7 @@ export default function DynamicVideoPlayer({
timeRange, timeRange,
cameraPreviews, cameraPreviews,
previewOnly = false, previewOnly = false,
preloadRecordings = true,
onControllerReady, onControllerReady,
onClick, onClick,
}: DynamicVideoPlayerProps) { }: DynamicVideoPlayerProps) {
@ -64,18 +65,19 @@ export default function DynamicVideoPlayer({
// controlling playback // controlling playback
const playerRef = useRef<Player | undefined>(undefined); const [playerRef, setPlayerRef] = useState<Player | undefined>(undefined);
const previewRef = useRef<HTMLVideoElement | null>(null); const previewRef = useRef<HTMLVideoElement | null>(null);
const [isScrubbing, setIsScrubbing] = useState(previewOnly); const [isScrubbing, setIsScrubbing] = useState(previewOnly);
const [focusedItem, setFocusedItem] = useState<Timeline | undefined>( const [focusedItem, setFocusedItem] = useState<Timeline | undefined>(
undefined, undefined,
); );
const controller = useMemo(() => { const controller = useMemo(() => {
if (!config) { if (!config || !playerRef || !previewRef.current) {
return undefined; return undefined;
} }
return new DynamicVideoController( return new DynamicVideoController(
camera,
playerRef, playerRef,
previewRef, previewRef,
(config.cameras[camera]?.detect?.annotation_offset || 0) / 1000, (config.cameras[camera]?.detect?.annotation_offset || 0) / 1000,
@ -83,10 +85,12 @@ export default function DynamicVideoPlayer({
setIsScrubbing, setIsScrubbing,
setFocusedItem, setFocusedItem,
); );
}, [camera, config, previewOnly]); // we only want to fire once when players are ready
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [camera, config, playerRef, previewRef]);
useEffect(() => { useEffect(() => {
if (!playerRef.current && !previewRef.current) { if (!controller) {
return; return;
} }
@ -96,7 +100,29 @@ export default function DynamicVideoPlayer({
// we only want to fire once when players are ready // we only want to fire once when players are ready
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [playerRef, previewRef]); }, [controller]);
const [initPreviewOnly, setInitPreviewOnly] = useState(previewOnly);
useEffect(() => {
if (!controller || !playerRef) {
return;
}
if (previewOnly == initPreviewOnly) {
return;
}
if (previewOnly) {
playerRef.autoplay(false);
} else {
controller.seekToTimestamp(playerRef.currentTime() || 0, true);
}
setInitPreviewOnly(previewOnly);
// we only want to fire once when players are ready
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [controller, previewOnly]);
const [hasRecordingAtTime, setHasRecordingAtTime] = useState(true); const [hasRecordingAtTime, setHasRecordingAtTime] = useState(true);
@ -107,33 +133,33 @@ export default function DynamicVideoPlayer({
switch (key) { switch (key) {
case "ArrowLeft": case "ArrowLeft":
if (down) { if (down) {
const currentTime = playerRef.current?.currentTime(); const currentTime = playerRef?.currentTime();
if (currentTime) { if (currentTime) {
playerRef.current?.currentTime(Math.max(0, currentTime - 5)); playerRef?.currentTime(Math.max(0, currentTime - 5));
} }
} }
break; break;
case "ArrowRight": case "ArrowRight":
if (down) { if (down) {
const currentTime = playerRef.current?.currentTime(); const currentTime = playerRef?.currentTime();
if (currentTime) { if (currentTime) {
playerRef.current?.currentTime(currentTime + 5); playerRef?.currentTime(currentTime + 5);
} }
} }
break; break;
case "m": case "m":
if (down && !repeat && playerRef.current) { if (down && !repeat && playerRef) {
playerRef.current.muted(!playerRef.current.muted()); playerRef.muted(!playerRef.muted());
} }
break; break;
case " ": case " ":
if (down && playerRef.current) { if (down && playerRef) {
if (playerRef.current.paused()) { if (playerRef.paused()) {
playerRef.current.play(); playerRef.play();
} else { } else {
playerRef.current.pause(); playerRef.pause();
} }
} }
break; break;
@ -236,31 +262,30 @@ export default function DynamicVideoPlayer({
recordings: recordings ?? [], recordings: recordings ?? [],
playbackUri, playbackUri,
preview, preview,
timeRange,
}); });
// we only want this to change when recordings update // we only want this to change when recordings update
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [controller, recordings]); }, [controller, recordings]);
if (!controller) {
return <ActivityIndicator />;
}
return ( return (
<div <div
className={`relative ${className ?? ""} ${onClick ? (hasRecordingAtTime ? "cursor-pointer" : "") : ""}`} className={`relative ${className ?? ""} ${onClick ? (hasRecordingAtTime ? "cursor-pointer" : "") : ""}`}
onClick={onClick} onClick={onClick}
> >
{!previewOnly && ( {preloadRecordings && (
<div <div
className={`w-full relative ${ className={`w-full relative ${
currentPreview != undefined && isScrubbing ? "hidden" : "visible" previewOnly || (currentPreview != undefined && isScrubbing)
? "hidden"
: "visible"
}`} }`}
> >
<VideoPlayer <VideoPlayer
options={{ options={{
preload: "auto", preload: "auto",
autoplay: true, autoplay: !previewOnly,
sources: [initialPlaybackSource], sources: [initialPlaybackSource],
aspectRatio: tallVideo ? "16:9" : undefined, aspectRatio: tallVideo ? "16:9" : undefined,
controlBar: { controlBar: {
@ -272,17 +297,10 @@ export default function DynamicVideoPlayer({
}} }}
seekOptions={{ forward: 10, backward: 5 }} seekOptions={{ forward: 10, backward: 5 }}
onReady={(player) => { onReady={(player) => {
playerRef.current = player; setPlayerRef(player);
player.on("playing", () => setFocusedItem(undefined));
player.on("timeupdate", () => {
controller.updateProgress(player.currentTime() || 0);
});
player.on("ended", () =>
controller.fireClipChangeEvent("forward"),
);
}} }}
onDispose={() => { onDispose={() => {
playerRef.current = undefined; setPlayerRef(undefined);
}} }}
> >
{config && focusedItem && ( {config && focusedItem && (
@ -303,7 +321,7 @@ export default function DynamicVideoPlayer({
muted muted
disableRemotePlayback disableRemotePlayback
onSeeked={onPreviewSeeked} onSeeked={onPreviewSeeked}
onLoadedData={() => controller.previewReady()} onLoadedData={() => controller?.previewReady()}
> >
{currentPreview != undefined && ( {currentPreview != undefined && (
<source src={currentPreview.src} type={currentPreview.type} /> <source src={currentPreview.src} type={currentPreview.type} />
@ -315,35 +333,39 @@ export default function DynamicVideoPlayer({
export class DynamicVideoController { export class DynamicVideoController {
// main state // main state
private playerRef: MutableRefObject<Player | undefined>; public camera = "";
private playerRef: Player;
private previewRef: MutableRefObject<HTMLVideoElement | null>; private previewRef: MutableRefObject<HTMLVideoElement | null>;
private setScrubbing: (isScrubbing: boolean) => void; private setScrubbing: (isScrubbing: boolean) => void;
private setFocusedItem: (timeline: Timeline) => void; private setFocusedItem: (timeline: Timeline) => void;
private playerMode: PlayerMode = "playback"; private playerMode: PlayerMode = "playback";
private timeRange: { start: number; end: number } | undefined = undefined;
// playback // playback
private recordings: Recording[] = []; private recordings: Recording[] = [];
private onPlaybackTimestamp: ((time: number) => void) | undefined = undefined;
private onClipChange: ((dir: "forward" | "backward") => void) | undefined =
undefined;
private annotationOffset: number; private annotationOffset: number;
private timeToStart: number | undefined = undefined; private timeToStart: number | undefined = undefined;
private clipChangeLockout: boolean = true;
// preview // preview
private preview: Preview | undefined = undefined; private preview: Preview | undefined = undefined;
private timeToSeek: number | undefined = undefined; private timeToSeek: number | undefined = undefined;
private seeking = false; private seeking = false;
private readyToScrub = true;
// listeners
private playerProgressListener: (() => void) | null = null;
private playerEndedListener: (() => void) | null = null;
private canPlayListener: (() => void) | null = null;
constructor( constructor(
playerRef: MutableRefObject<Player | undefined>, camera: string,
playerRef: Player,
previewRef: MutableRefObject<HTMLVideoElement | null>, previewRef: MutableRefObject<HTMLVideoElement | null>,
annotationOffset: number, annotationOffset: number,
defaultMode: PlayerMode, defaultMode: PlayerMode,
setScrubbing: (isScrubbing: boolean) => void, setScrubbing: (isScrubbing: boolean) => void,
setFocusedItem: (timeline: Timeline) => void, setFocusedItem: (timeline: Timeline) => void,
) { ) {
this.camera = camera;
this.playerRef = playerRef; this.playerRef = playerRef;
this.previewRef = previewRef; this.previewRef = previewRef;
this.annotationOffset = annotationOffset; this.annotationOffset = annotationOffset;
@ -355,7 +377,7 @@ export class DynamicVideoController {
newPlayback(newPlayback: DynamicPlayback) { newPlayback(newPlayback: DynamicPlayback) {
this.recordings = newPlayback.recordings; this.recordings = newPlayback.recordings;
this.playerRef.current?.src({ this.playerRef.src({
src: newPlayback.playbackUri, src: newPlayback.playbackUri,
type: "application/vnd.apple.mpegurl", type: "application/vnd.apple.mpegurl",
}); });
@ -366,6 +388,13 @@ export class DynamicVideoController {
} }
this.preview = newPlayback.preview; this.preview = newPlayback.preview;
if (this.preview) {
this.seeking = false;
this.timeToSeek = undefined;
}
this.timeRange = newPlayback.timeRange;
} }
seekToTimestamp(time: number, play: boolean = false) { seekToTimestamp(time: number, play: boolean = false) {
@ -396,99 +425,86 @@ export class DynamicVideoController {
segment.end_time - segment.start_time - (segment.end_time - time); segment.end_time - segment.start_time - (segment.end_time - time);
return true; return true;
}); });
this.playerRef.current?.currentTime(seekSeconds); this.playerRef.currentTime(seekSeconds);
if (play) { if (play) {
this.playerRef.current?.play(); this.playerRef.play();
} else {
this.playerRef.pause();
}
}
onCanPlay(listener: (() => void) | null) {
if (listener) {
this.canPlayListener = listener;
this.playerRef.on("canplay", this.canPlayListener);
} else {
if (this.canPlayListener) {
this.playerRef.off("canplay", this.canPlayListener);
this.canPlayListener = null;
}
} }
} }
seekToTimelineItem(timeline: Timeline) { seekToTimelineItem(timeline: Timeline) {
this.playerRef.current?.pause(); this.playerRef.pause();
this.seekToTimestamp(timeline.timestamp + this.annotationOffset); this.seekToTimestamp(timeline.timestamp + this.annotationOffset);
this.setFocusedItem(timeline); this.setFocusedItem(timeline);
} }
updateProgress(playerTime: number) { getProgress(playerTime: number): number {
if (this.onPlaybackTimestamp) { // take a player time in seconds and convert to timestamp in timeline
// take a player time in seconds and convert to timestamp in timeline let timestamp = 0;
let timestamp = 0; let totalTime = 0;
let totalTime = 0; (this.recordings || []).every((segment) => {
(this.recordings || []).every((segment) => { if (totalTime + segment.duration > playerTime) {
if (totalTime + segment.duration > playerTime) { // segment is here
// segment is here timestamp = segment.start_time + (playerTime - totalTime);
timestamp = segment.start_time + (playerTime - totalTime); return false;
return false; } else {
} else { totalTime += segment.duration;
totalTime += segment.duration; return true;
return true; }
} });
});
this.onPlaybackTimestamp(timestamp); return timestamp;
}
} }
onPlayerTimeUpdate(listener: ((timestamp: number) => void) | undefined) { onPlayerTimeUpdate(listener: ((timestamp: number) => void) | undefined) {
this.onPlaybackTimestamp = listener; if (this.playerProgressListener) {
this.playerRef.off("timeupdate", this.playerProgressListener);
}
if (listener) {
this.playerProgressListener = () =>
listener(this.getProgress(this.playerRef.currentTime() || 0));
this.playerRef.on("timeupdate", this.playerProgressListener);
}
} }
onClipChangedEvent(listener: (dir: "forward" | "backward") => void) { onClipChangedEvent(listener: ((dir: "forward") => void) | undefined) {
this.onClipChange = listener; if (this.playerEndedListener) {
} this.playerRef.off("ended", this.playerEndedListener);
}
fireClipChangeEvent(dir: "forward" | "backward") { if (listener) {
if (this.onClipChange) { this.playerEndedListener = () => listener("forward");
this.onClipChange(dir); this.playerRef.on("ended", this.playerEndedListener);
} }
} }
scrubToTimestamp(time: number) { scrubToTimestamp(time: number) {
if (!this.preview) { if (!this.preview || !this.timeRange) {
return; return;
} }
if (!this.readyToScrub) { if (time < this.preview.start || time > this.preview.end) {
return;
}
if (time > this.preview.end) {
if (this.clipChangeLockout && time - this.preview.end < 30) {
return;
}
if (this.playerMode == "scrubbing") {
this.playerMode = "playback";
this.setScrubbing(false);
this.timeToSeek = undefined;
this.seeking = false;
this.readyToScrub = false;
this.clipChangeLockout = true;
this.fireClipChangeEvent("forward");
}
return;
}
if (time < this.preview.start) {
if (this.clipChangeLockout && this.preview.start - time < 30) {
return;
}
if (this.playerMode == "scrubbing") {
this.playerMode = "playback";
this.setScrubbing(false);
this.timeToSeek = undefined;
this.seeking = false;
this.readyToScrub = false;
this.clipChangeLockout = true;
this.fireClipChangeEvent("backward");
}
return; return;
} }
if (this.playerMode != "scrubbing") { if (this.playerMode != "scrubbing") {
this.playerMode = "scrubbing"; this.playerMode = "scrubbing";
this.playerRef.current?.pause(); this.playerRef.pause();
this.setScrubbing(true); this.setScrubbing(true);
} }
@ -514,8 +530,6 @@ export class DynamicVideoController {
return; return;
} }
this.clipChangeLockout = false;
if ( if (
this.timeToSeek && this.timeToSeek &&
this.timeToSeek != this.previewRef.current?.currentTime this.timeToSeek != this.previewRef.current?.currentTime
@ -529,7 +543,6 @@ export class DynamicVideoController {
previewReady() { previewReady() {
this.previewRef.current?.pause(); this.previewRef.current?.pause();
this.readyToScrub = true;
} }
hasRecordingAtTime(time: number): boolean { hasRecordingAtTime(time: number): boolean {

1
web/src/types/playback.ts
View File

@ -5,4 +5,5 @@ export type DynamicPlayback = {
recordings: Recording[]; recordings: Recording[];
playbackUri: string; playbackUri: string;
preview: Preview | undefined; preview: Preview | undefined;
timeRange: { end: number; start: number };
}; };

39
web/src/views/events/EventView.tsx
View File

@ -579,12 +579,17 @@ function MotionReview({
() => getChunkedTimeRange(timeRange.after, lastFullHour), () => getChunkedTimeRange(timeRange.after, lastFullHour),
[lastFullHour, timeRange], [lastFullHour, timeRange],
); );
const [selectedRangeIdx, setSelectedRangeIdx] = useState( const [selectedRangeIdx, setSelectedRangeIdx] = useState(
timeRangeSegments.ranges.length - 1, timeRangeSegments.ranges.length - 1,
); );
const [currentTime, setCurrentTime] = useState<number>( const [currentTime, setCurrentTime] = useState<number>(
timeRangeSegments.ranges[selectedRangeIdx].start, timeRangeSegments.ranges[selectedRangeIdx].start,
); );
const currentTimeRange = useMemo(
() => timeRangeSegments.ranges[selectedRangeIdx],
[selectedRangeIdx, timeRangeSegments],
);
// move to next clip // move to next clip
@ -600,23 +605,38 @@ function MotionReview({
if (firstController) { if (firstController) {
firstController.onClipChangedEvent((dir) => { firstController.onClipChangedEvent((dir) => {
if ( if (dir == "forward") {
dir == "forward" && if (selectedRangeIdx < timeRangeSegments.ranges.length - 1) {
selectedRangeIdx < timeRangeSegments.ranges.length - 1 setSelectedRangeIdx(selectedRangeIdx + 1);
) { }
setSelectedRangeIdx(selectedRangeIdx + 1);
} else if (selectedRangeIdx > 0) {
setSelectedRangeIdx(selectedRangeIdx - 1);
} }
}); });
} }
}, [selectedRangeIdx, timeRangeSegments, videoPlayersRef, playerReady]); }, [selectedRangeIdx, timeRangeSegments, videoPlayersRef, playerReady]);
useEffect(() => { useEffect(() => {
if (
currentTime > currentTimeRange.end + 60 ||
currentTime < currentTimeRange.start - 60
) {
const index = timeRangeSegments.ranges.findIndex(
(seg) => seg.start <= currentTime && seg.end >= currentTime,
);
if (index != -1) {
setSelectedRangeIdx(index);
}
return;
}
Object.values(videoPlayersRef.current).forEach((controller) => { Object.values(videoPlayersRef.current).forEach((controller) => {
controller.scrubToTimestamp(currentTime); controller.scrubToTimestamp(currentTime);
}); });
}, [currentTime]); }, [currentTime, currentTimeRange, timeRangeSegments]);
if (!relevantPreviews) {
return <ActivityIndicator />;
}
return ( return (
<> <>
@ -640,9 +660,10 @@ function MotionReview({
key={camera.name} key={camera.name}
className={`${grow}`} className={`${grow}`}
camera={camera.name} camera={camera.name}
timeRange={timeRangeSegments.ranges[selectedRangeIdx]} timeRange={currentTimeRange}
cameraPreviews={relevantPreviews || []} cameraPreviews={relevantPreviews || []}
previewOnly previewOnly
preloadRecordings={false}
onControllerReady={(controller) => { onControllerReady={(controller) => {
videoPlayersRef.current[camera.name] = controller; videoPlayersRef.current[camera.name] = controller;
setPlayerReady(true); setPlayerReady(true);

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

@ -49,6 +49,10 @@ export function DesktopRecordingView({
return chunk.start <= startTime && chunk.end >= startTime; return chunk.start <= startTime && chunk.end >= startTime;
}), }),
); );
const currentTimeRange = useMemo(
() => timeRange.ranges[selectedRangeIdx],
[selectedRangeIdx, timeRange],
);
// move to next clip // move to next clip
useEffect(() => { useEffect(() => {
@ -59,21 +63,18 @@ export function DesktopRecordingView({
return; return;
} }
const firstController = Object.values(videoPlayersRef.current)[0]; const mainController = videoPlayersRef.current[mainCamera];
if (firstController) { if (mainController) {
firstController.onClipChangedEvent((dir) => { mainController.onClipChangedEvent((dir) => {
if ( if (dir == "forward") {
dir == "forward" && if (selectedRangeIdx < timeRange.ranges.length - 1) {
selectedRangeIdx < timeRange.ranges.length - 1 setSelectedRangeIdx(selectedRangeIdx + 1);
) { }
setSelectedRangeIdx(selectedRangeIdx + 1);
} else if (selectedRangeIdx > 0) {
setSelectedRangeIdx(selectedRangeIdx - 1);
} }
}); });
} }
}, [selectedRangeIdx, timeRange, videoPlayersRef, playerReady]); }, [selectedRangeIdx, timeRange, videoPlayersRef, playerReady, mainCamera]);
// scrubbing and timeline state // scrubbing and timeline state
@ -82,11 +83,25 @@ export function DesktopRecordingView({
useEffect(() => { useEffect(() => {
if (scrubbing) { if (scrubbing) {
if (
currentTime > currentTimeRange.end + 60 ||
currentTime < currentTimeRange.start - 60
) {
const index = timeRange.ranges.findIndex(
(seg) => seg.start <= currentTime && seg.end >= currentTime,
);
if (index != -1) {
setSelectedRangeIdx(index);
}
return;
}
Object.values(videoPlayersRef.current).forEach((controller) => { Object.values(videoPlayersRef.current).forEach((controller) => {
controller.scrubToTimestamp(currentTime); controller.scrubToTimestamp(currentTime);
}); });
} }
}, [currentTime, scrubbing]); }, [currentTime, scrubbing, timeRange, currentTimeRange]);
useEffect(() => { useEffect(() => {
if (!scrubbing) { if (!scrubbing) {
@ -99,22 +114,26 @@ export function DesktopRecordingView({
const onSelectCamera = useCallback( const onSelectCamera = useCallback(
(newCam: string) => { (newCam: string) => {
videoPlayersRef.current[mainCamera].onPlayerTimeUpdate(undefined); const lastController = videoPlayersRef.current[mainCamera];
videoPlayersRef.current[mainCamera].scrubToTimestamp(currentTime); const newController = videoPlayersRef.current[newCam];
videoPlayersRef.current[newCam].seekToTimestamp(currentTime, true); lastController.onPlayerTimeUpdate(undefined);
videoPlayersRef.current[newCam].onPlayerTimeUpdate( lastController.onClipChangedEvent(undefined);
(timestamp: number) => { lastController.scrubToTimestamp(currentTime);
setCurrentTime(timestamp); newController.onCanPlay(() => {
newController.seekToTimestamp(currentTime, true);
newController.onCanPlay(null);
});
newController.onPlayerTimeUpdate((timestamp: number) => {
setCurrentTime(timestamp);
allCameras.forEach((cam) => { allCameras.forEach((cam) => {
if (cam != newCam) { if (cam != newCam) {
videoPlayersRef.current[cam]?.scrubToTimestamp( videoPlayersRef.current[cam]?.scrubToTimestamp(
Math.floor(timestamp), Math.floor(timestamp),
); );
} }
}); });
}, });
);
setMainCamera(newCam); setMainCamera(newCam);
}, },
[allCameras, currentTime, mainCamera], [allCameras, currentTime, mainCamera],
@ -155,8 +174,9 @@ export function DesktopRecordingView({
> >
<DynamicVideoPlayer <DynamicVideoPlayer
camera={cam} camera={cam}
timeRange={timeRange.ranges[selectedRangeIdx]} timeRange={currentTimeRange}
cameraPreviews={allPreviews ?? []} cameraPreviews={allPreviews ?? []}
preloadRecordings
onControllerReady={(controller) => { onControllerReady={(controller) => {
videoPlayersRef.current[cam] = controller; videoPlayersRef.current[cam] = controller;
setPlayerReady(true); setPlayerReady(true);
@ -172,7 +192,10 @@ export function DesktopRecordingView({
}); });
}); });
controller.seekToTimestamp(startTime, true); controller.onCanPlay(() => {
controller.seekToTimestamp(startTime, true);
controller.onCanPlay(null);
});
}} }}
/> />
</div> </div>
@ -184,9 +207,10 @@ export function DesktopRecordingView({
<DynamicVideoPlayer <DynamicVideoPlayer
className="size-full" className="size-full"
camera={cam} camera={cam}
timeRange={timeRange.ranges[selectedRangeIdx]} timeRange={currentTimeRange}
cameraPreviews={allPreviews ?? []} cameraPreviews={allPreviews ?? []}
previewOnly previewOnly
preloadRecordings
onControllerReady={(controller) => { onControllerReady={(controller) => {
videoPlayersRef.current[cam] = controller; videoPlayersRef.current[cam] = controller;
setPlayerReady(true); setPlayerReady(true);
@ -265,6 +289,10 @@ export function MobileRecordingView({
return chunk.start <= startTime && chunk.end >= startTime; return chunk.start <= startTime && chunk.end >= startTime;
}), }),
); );
const currentTimeRange = useMemo(
() => timeRange.ranges[selectedRangeIdx],
[selectedRangeIdx, timeRange],
);
// move to next clip // move to next clip
useEffect(() => { useEffect(() => {
@ -273,10 +301,10 @@ export function MobileRecordingView({
} }
controllerRef.current.onClipChangedEvent((dir) => { controllerRef.current.onClipChangedEvent((dir) => {
if (dir == "forward" && selectedRangeIdx < timeRange.ranges.length - 1) { if (dir == "forward") {
setSelectedRangeIdx(selectedRangeIdx + 1); if (selectedRangeIdx < timeRange.ranges.length - 1) {
} else if (selectedRangeIdx > 0) { setSelectedRangeIdx(selectedRangeIdx + 1);
setSelectedRangeIdx(selectedRangeIdx - 1); }
} }
}); });
}, [playerReady, selectedRangeIdx, timeRange]); }, [playerReady, selectedRangeIdx, timeRange]);
@ -290,9 +318,23 @@ export function MobileRecordingView({
useEffect(() => { useEffect(() => {
if (scrubbing) { if (scrubbing) {
if (
currentTime > currentTimeRange.end + 60 ||
currentTime < currentTimeRange.start - 60
) {
const index = timeRange.ranges.findIndex(
(seg) => seg.start <= currentTime && seg.end >= currentTime,
);
if (index != -1) {
setSelectedRangeIdx(index);
}
return;
}
controllerRef.current?.scrubToTimestamp(currentTime); controllerRef.current?.scrubToTimestamp(currentTime);
} }
}, [currentTime, scrubbing]); }, [currentTime, scrubbing, currentTimeRange, timeRange]);
useEffect(() => { useEffect(() => {
if (!scrubbing) { if (!scrubbing) {
@ -328,8 +370,9 @@ export function MobileRecordingView({
<div> <div>
<DynamicVideoPlayer <DynamicVideoPlayer
camera={startCamera} camera={startCamera}
timeRange={timeRange.ranges[selectedRangeIdx]} timeRange={currentTimeRange}
cameraPreviews={relevantPreviews || []} cameraPreviews={relevantPreviews || []}
preloadRecordings
onControllerReady={(controller) => { onControllerReady={(controller) => {
controllerRef.current = controller; controllerRef.current = controller;
setPlayerReady(true); setPlayerReady(true);