chris/frigate
1
0
Fork 0
forked from Github/frigate
Code Pull Requests Packages Activity

Fix Bad Resize For Camera Snapshot (#6797)

Browse Source 
* Catch cases where incorrect size is requested

* Set a default if calculated height is incorrect
This commit is contained in:
Nicolas Mowen
2023-06-30 06:34:10 -06:00
committed by GitHub
parent b6fce8f0bb
commit 0a8249d6fb
2 changed files with 31 additions and 19 deletions
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 = 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]);
const scaledWidth = useMemo(() => Math.ceil(scaledHeight * aspectRatio - scrollBarWidth), [
scaledHeight,
aspectRatio,
scrollBarWidth,
]);
const scaledWidth = useMemo(
() => Math.ceil(scaledHeight * aspectRatio - scrollBarWidth),
[scaledHeight, aspectRatio, scrollBarWidth]
);
const img = useMemo(() => new Image(), []);
img.onload = useCallback(
@@ -58,18 +63,16 @@ export default function CameraImage({ camera, onload, searchParams = '', stretch
return (
<div className="relative w-full" ref={containerRef}>
{
(enabled) ?
<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>
}
{
(!hasLoaded && enabled) ? (
<div className="absolute inset-0 flex justify-center" style={`height: ${scaledHeight}px`}>
<ActivityIndicator />
</div>
) : null
}
</div >
{enabled ? (
<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>
)}
{!hasLoaded && enabled ? (
<div className="absolute inset-0 flex justify-center" style={`height: ${scaledHeight}px`}>
<ActivityIndicator />
</div>
) : null}
</div>
);
}