administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-10 13:15:25 +03:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Use preview players for previews

Browse Source
This commit is contained in:
Nicolas Mowen 2024-03-11 16:41:55 -06:00
parent f0376365b2
commit 5cfa530ad7
1 changed files with 30 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,9 @@
import DynamicVideoPlayer, { import DynamicVideoPlayer, {
DynamicVideoController, DynamicVideoController,
} from "@/components/player/DynamicVideoPlayer"; } from "@/components/player/DynamicVideoPlayer";
import PreviewPlayer, {
PreviewController,
} from "@/components/player/PreviewPlayer";
import EventReviewTimeline from "@/components/timeline/EventReviewTimeline"; import EventReviewTimeline from "@/components/timeline/EventReviewTimeline";
import MotionReviewTimeline from "@/components/timeline/MotionReviewTimeline"; import MotionReviewTimeline from "@/components/timeline/MotionReviewTimeline";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
@ -45,9 +48,8 @@ export function DesktopRecordingView({
// controller state // controller state
const [mainCamera, setMainCamera] = useState(startCamera); const [mainCamera, setMainCamera] = useState(startCamera);
const videoPlayersRef = useRef<{ [camera: string]: DynamicVideoController }>( const mainControllerRef = useRef<DynamicVideoController | null>(null);
{}, const previewRefs = useRef<{ [camera: string]: PreviewController }>({});
);
const [playbackStart, setPlaybackStart] = useState(startTime); const [playbackStart, setPlaybackStart] = useState(startTime);
@ -66,27 +68,20 @@ export function DesktopRecordingView({
// move to next clip // move to next clip
useEffect(() => { useEffect(() => {
if ( if (!mainControllerRef.current) {
!videoPlayersRef.current &&
Object.values(videoPlayersRef.current).length > 0
) {
return; return;
} }
const mainController = videoPlayersRef.current[mainCamera]; mainControllerRef.current.onClipChangedEvent((dir) => {
if (mainController) {
mainController.onClipChangedEvent((dir) => {
if (dir == "forward") { if (dir == "forward") {
if (selectedRangeIdx < timeRange.ranges.length - 1) { if (selectedRangeIdx < timeRange.ranges.length - 1) {
setSelectedRangeIdx(selectedRangeIdx + 1); setSelectedRangeIdx(selectedRangeIdx + 1);
} }
} }
}); });
}
// 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
}, [selectedRangeIdx, timeRange, videoPlayersRef.current, mainCamera]); }, [selectedRangeIdx, timeRange, mainControllerRef.current, mainCamera]);
// scrubbing and timeline state // scrubbing and timeline state
@ -109,7 +104,9 @@ export function DesktopRecordingView({
return; return;
} }
Object.values(videoPlayersRef.current).forEach((controller) => { mainControllerRef.current?.scrubToTimestamp(currentTime);
Object.values(previewRefs.current).forEach((controller) => {
controller.scrubToTimestamp(currentTime); controller.scrubToTimestamp(currentTime);
}); });
} }
@ -117,7 +114,7 @@ export function DesktopRecordingView({
useEffect(() => { useEffect(() => {
if (!scrubbing) { if (!scrubbing) {
videoPlayersRef.current[mainCamera]?.seekToTimestamp(currentTime, true); mainControllerRef.current?.seekToTimestamp(currentTime, true);
} }
// we only want to seek when user stops scrubbing // we only want to seek when user stops scrubbing
@ -126,27 +123,10 @@ export function DesktopRecordingView({
const onSelectCamera = useCallback( const onSelectCamera = useCallback(
(newCam: string) => { (newCam: string) => {
const lastController = videoPlayersRef.current[mainCamera];
const newController = videoPlayersRef.current[newCam];
lastController.onPlayerTimeUpdate(null);
lastController.onClipChangedEvent(null);
lastController.scrubToTimestamp(currentTime);
newController.onPlayerTimeUpdate((timestamp: number) => {
setCurrentTime(timestamp);
allCameras.forEach((cam) => {
if (cam != newCam) {
videoPlayersRef.current[cam]?.scrubToTimestamp(
Math.floor(timestamp),
);
}
});
});
newController.seekToTimestamp(currentTime, true);
setPlaybackStart(currentTime);
setMainCamera(newCam); setMainCamera(newCam);
setPlaybackStart(currentTime);
}, },
[allCameras, currentTime, mainCamera], [currentTime],
); );
// motion timeline data // motion timeline data
@ -191,16 +171,19 @@ export function DesktopRecordingView({
<div className="flex h-full justify-center overflow-hidden"> <div className="flex h-full justify-center overflow-hidden">
<div className="flex flex-1 flex-wrap"> <div className="flex flex-1 flex-wrap">
<div className="w-full flex flex-col h-full px-2 justify-center"> <div className="w-full flex flex-col h-full px-2 justify-center items-center">
<div key={mainCamera} className="flex justify-center items mb-5"> <div
key={mainCamera}
className="w-[82%] flex justify-center items mb-5"
>
<DynamicVideoPlayer <DynamicVideoPlayer
className={`w-[82%] ${grow}`} className={`w-full ${grow}`}
camera={mainCamera} camera={mainCamera}
timeRange={currentTimeRange} timeRange={currentTimeRange}
cameraPreviews={allPreviews ?? []} cameraPreviews={allPreviews ?? []}
startTime={playbackStart} startTime={playbackStart}
onControllerReady={(controller) => { onControllerReady={(controller) => {
videoPlayersRef.current[mainCamera] = controller; mainControllerRef.current = controller;
controller.onPlayerTimeUpdate((timestamp: number) => { controller.onPlayerTimeUpdate((timestamp: number) => {
setCurrentTime(timestamp); setCurrentTime(timestamp);
}); });
@ -215,15 +198,15 @@ export function DesktopRecordingView({
key={cam} key={cam}
className="aspect-video flex items-center w-[260px]" className="aspect-video flex items-center w-[260px]"
> >
<DynamicVideoPlayer <PreviewPlayer
className="size-full" className="size-full"
camera={cam} camera={cam}
timeRange={currentTimeRange} timeRange={currentTimeRange}
cameraPreviews={allPreviews ?? []} cameraPreviews={allPreviews ?? []}
previewOnly startTime={startTime}
onControllerReady={(controller) => { onControllerReady={(controller) => {
videoPlayersRef.current[cam] = controller; previewRefs.current[cam] = controller;
controller.scrubToTimestamp(startTime, true); controller.scrubToTimestamp(startTime);
}} }}
onClick={() => onSelectCamera(cam)} onClick={() => onSelectCamera(cam)}
/> />