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

chore: refactor to reduce re-rendering

Browse Source
This commit is contained in:
JohnMark Sill 2022-01-14 16:44:55 -06:00
parent 599303b35e
commit 072f52b061
1 changed files with 19 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
web/src/routes/Camera_V2.jsx
View File

@ -14,24 +14,6 @@ export default function Camera({ camera }) {
const [playerType, setPlayerType] = useState('live'); const [playerType, setPlayerType] = useState('live');
const cameraConfig = config?.cameras[camera]; const cameraConfig = config?.cameras[camera];
const liveWidth = Math.round(cameraConfig.live.height * (cameraConfig.detect.width / cameraConfig.detect.height));
const RenderPlayer = () => {
if (playerType === 'live') {
return (
<Fragment>
<div>
<JSMpegPlayer camera={camera} width={liveWidth} height={cameraConfig.live.height} />
</div>
</Fragment>
);
} else if (playerType === 'history') {
return <HistoryViewer camera={camera} />;
} else if (playerType === 'debug') {
return <DebugCamera camera={camera} />;
}
return <Fragment />;
};
const handleTabChange = (index) => { const handleTabChange = (index) => {
if (index === 0) { if (index === 0) {
@ -60,7 +42,7 @@ export default function Camera({ camera }) {
</div> </div>
<div className='flex flex-col justify-center h-full'> <div className='flex flex-col justify-center h-full'>
<RenderPlayer /> <RenderPlayer camera={camera} cameraConfig={cameraConfig} playerType={playerType} />
</div> </div>
<div className='absolute flex justify-center bottom-8 w-full'> <div className='absolute flex justify-center bottom-8 w-full'>
@ -74,3 +56,21 @@ export default function Camera({ camera }) {
</div> </div>
); );
} }
const RenderPlayer = function ({ camera, cameraConfig, playerType }) {
const liveWidth = Math.round(cameraConfig.live.height * (cameraConfig.detect.width / cameraConfig.detect.height));
if (playerType === 'live') {
return (
<Fragment>
<div>
<JSMpegPlayer camera={camera} width={liveWidth} height={cameraConfig.live.height} />
</div>
</Fragment>
);
} else if (playerType === 'history') {
return <HistoryViewer camera={camera} />;
} else if (playerType === 'debug') {
return <DebugCamera camera={camera} />;
}
return <Fragment />;
};