chris/frigate
1
0
Fork 0
forked from Github/frigate
Code Pull Requests Packages Activity

Cleanup to use new preview video player in dynamic player (#10335)

Browse Source 
* Cleanup to use new preview video player

* Make it so motion persists the selected time

* Don't jump when player first starts

* Get autoplay working right
This commit is contained in:
Nicolas Mowen
2024-03-08 16:24:12 -07:00
committed by GitHub
parent 05a66ce90d
commit 086eb37ece
6 changed files with 172 additions and 245 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -35,7 +35,6 @@ export function DesktopRecordingView({
// controller state
const [playerReady, setPlayerReady] = useState(false);
const [mainCamera, setMainCamera] = useState(startCamera);
const videoPlayersRef = useRef<{ [camera: string]: DynamicVideoController }>(
{},
@@ -74,7 +73,9 @@ export function DesktopRecordingView({
}
});
}
}, [selectedRangeIdx, timeRange, videoPlayersRef, playerReady, mainCamera]);
// we only want to fire once when players are ready
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [selectedRangeIdx, timeRange, videoPlayersRef.current, mainCamera]);
// scrubbing and timeline state
@@ -116,9 +117,11 @@ export function DesktopRecordingView({
(newCam: string) => {
const lastController = videoPlayersRef.current[mainCamera];
const newController = videoPlayersRef.current[newCam];
lastController.onPlayerTimeUpdate(undefined);
lastController.onClipChangedEvent(undefined);
lastController.onPlayerTimeUpdate(null);
lastController.onClipChangedEvent(null);
lastController.autoPlay(false);
lastController.scrubToTimestamp(currentTime);
newController.autoPlay(true);
newController.onCanPlay(() => {
newController.seekToTimestamp(currentTime, true);
newController.onCanPlay(null);
@@ -176,10 +179,8 @@ export function DesktopRecordingView({
camera={cam}
timeRange={currentTimeRange}
cameraPreviews={allPreviews ?? []}
preloadRecordings
onControllerReady={(controller) => {
videoPlayersRef.current[cam] = controller;
setPlayerReady(true);
controller.onPlayerTimeUpdate((timestamp: number) => {
setCurrentTime(timestamp);
@@ -210,11 +211,9 @@ export function DesktopRecordingView({
timeRange={currentTimeRange}
cameraPreviews={allPreviews ?? []}
previewOnly
preloadRecordings
onControllerReady={(controller) => {
videoPlayersRef.current[cam] = controller;
setPlayerReady(true);
controller.scrubToTimestamp(startTime);
controller.scrubToTimestamp(startTime, true);
}}
onClick={() => onSelectCamera(cam)}
/>
@@ -372,7 +371,6 @@ export function MobileRecordingView({
camera={startCamera}
timeRange={currentTimeRange}
cameraPreviews={relevantPreviews || []}
preloadRecordings
onControllerReady={(controller) => {
controllerRef.current = controller;
setPlayerReady(true);