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

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

@ -170,6 +170,39 @@ function PreviewVideoPlayer({
} }
}, [controller]); }, [controller]);
// canvas to cover preview transition
const canvasRef = useRef<HTMLCanvasElement | null>(null);
const [videoSize, setVideoSize] = useState<number[]>([0, 0]);
const changeSource = useCallback(
(newPreview: Preview | undefined, video: HTMLVideoElement | null) => {
setCurrentPreview(newPreview);
if (!newPreview || !video) {
return;
}
if (!canvasRef.current && videoSize[0] > 0) {
const canvas = document.createElement("canvas");
canvas.width = videoSize[0];
canvas.height = videoSize[1];
canvasRef.current = canvas;
}
const context = canvasRef.current?.getContext("2d");
if (context) {
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
},
[setCurrentHourFrame, videoSize],
);
useEffect(() => { useEffect(() => {
if (!controller) { if (!controller) {
return; return;
@ -183,7 +216,7 @@ function PreviewVideoPlayer({
); );
if (preview != currentPreview) { if (preview != currentPreview) {
setCurrentPreview(preview); changeSource(preview, previewRef.current);
} }
controller.newPlayback({ controller.newPlayback({
@ -193,37 +226,7 @@ function PreviewVideoPlayer({
// 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, timeRange]); }, [controller, timeRange, changeSource]);
// canvas to cover preview transition
const canvasRef = useRef<HTMLCanvasElement | null>(null);
const [videoSize, setVideoSize] = useState<number[]>([0, 0]);
// handle switching sources
useEffect(() => {
if (!currentPreview || !previewRef.current) {
return;
}
if (!canvasRef.current && videoSize[0] > 0) {
const canvas = document.createElement("canvas");
canvas.width = videoSize[0];
canvas.height = videoSize[1];
canvasRef.current = canvas;
}
const context = canvasRef.current?.getContext("2d");
if (context) {
context.drawImage(previewRef.current, 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]);
return ( return (
<div <div