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

Dont use useEffect due to preview changing

Browse Source
This commit is contained in:
Nicolas Mowen 2024-03-30 09:32:07 -06:00
parent 482ea9bc12
commit 0be7194f94
1 changed files with 35 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

63
web/src/components/player/PreviewPlayer.tsx
View File

@ -170,40 +170,16 @@ function PreviewVideoPlayer({
}
}, [controller]);
useEffect(() => {
if (!controller) {
return;
}
const preview = cameraPreviews.find(
(preview) =>
preview.camera == camera &&
Math.round(preview.start) >= timeRange.after &&
Math.floor(preview.end) <= timeRange.before,
);
if (preview != currentPreview) {
setCurrentPreview(preview);
}
controller.newPlayback({
preview,
timeRange,
});
// we only want this to change when recordings update
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [controller, timeRange]);
// canvas to cover preview transition
const canvasRef = useRef<HTMLCanvasElement | null>(null);
const [videoSize, setVideoSize] = useState<number[]>([0, 0]);
// handle switching sources
const changeSource = useCallback(
(newPreview: Preview | undefined, video: HTMLVideoElement | null) => {
setCurrentPreview(newPreview);
useEffect(() => {
if (!currentPreview || !previewRef.current) {
if (!newPreview || !video) {
return;
}
@ -217,13 +193,40 @@ function PreviewVideoPlayer({
const context = canvasRef.current?.getContext("2d");
if (context) {
context.drawImage(previewRef.current, 0, 0, videoSize[0], videoSize[1]);
context.drawImage(video, 0, 0, videoSize[0], videoSize[1]);
setCurrentHourFrame(canvasRef.current?.toDataURL("image/webp"));
}
// we only want this to change when current preview changes
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [currentPreview, previewRef]);
},
[setCurrentHourFrame, videoSize],
);
useEffect(() => {
if (!controller) {
return;
}
const preview = cameraPreviews.find(
(preview) =>
preview.camera == camera &&
Math.round(preview.start) >= timeRange.after &&
Math.floor(preview.end) <= timeRange.before,
);
if (preview != currentPreview) {
changeSource(preview, previewRef.current);
}
controller.newPlayback({
preview,
timeRange,
});
// we only want this to change when recordings update
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [controller, timeRange, changeSource]);
return (
<div