administrator/frigate
1
0
Fork 0
mirror of https://github.com/blakeblackshear/frigate.git synced 2026-02-08 20:25:26 +03:00
Code Issues Actions 2 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

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

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