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

Set a default if calculated height is incorrect

Browse Source
This commit is contained in:
Nick Mowen 2023-06-20 06:42:29 -06:00
parent 75c052ff4e
commit 26f0460ca2
1 changed files with 22 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
web/src/components/CameraImage.jsx
View File

@ -28,13 +28,18 @@ export default function CameraImage({ camera, onload, searchParams = '', stretch
const scaledHeight = useMemo(() => { const scaledHeight = useMemo(() => {
const scaledHeight = Math.floor(availableWidth / aspectRatio); const scaledHeight = Math.floor(availableWidth / aspectRatio);
return stretch ? scaledHeight : Math.min(scaledHeight, height); const finalHeight = stretch ? scaledHeight : Math.min(scaledHeight, height);
if (finalHeight > 0) {
return finalHeight;
}
return 100;
}, [availableWidth, aspectRatio, height, stretch]); }, [availableWidth, aspectRatio, height, stretch]);
const scaledWidth = useMemo(() => Math.ceil(scaledHeight * aspectRatio - scrollBarWidth), [ const scaledWidth = useMemo(
scaledHeight, () => Math.ceil(scaledHeight * aspectRatio - scrollBarWidth),
aspectRatio, [scaledHeight, aspectRatio, scrollBarWidth]
scrollBarWidth, );
]);
const img = useMemo(() => new Image(), []); const img = useMemo(() => new Image(), []);
img.onload = useCallback( img.onload = useCallback(
@ -58,18 +63,16 @@ export default function CameraImage({ camera, onload, searchParams = '', stretch
return ( return (
<div className="relative w-full" ref={containerRef}> <div className="relative w-full" ref={containerRef}>
{ {enabled ? (
(enabled) ? <canvas data-testid="cameraimage-canvas" height={scaledHeight} ref={canvasRef} width={scaledWidth} />
<canvas data-testid="cameraimage-canvas" height={scaledHeight} ref={canvasRef} width={scaledWidth} /> ) : (
: <div class="text-center pt-6">Camera is disabled in config, no stream or snapshot available!</div> <div class="text-center pt-6">Camera is disabled in config, no stream or snapshot available!</div>
} )}
{ {!hasLoaded && enabled ? (
(!hasLoaded && enabled) ? ( <div className="absolute inset-0 flex justify-center" style={`height: ${scaledHeight}px`}>
<div className="absolute inset-0 flex justify-center" style={`height: ${scaledHeight}px`}> <ActivityIndicator />
<ActivityIndicator /> </div>
</div> ) : null}
) : null </div>
}
</div >
); );
} }