subtract scrollBarWidth from scaledWidth

This commit is contained in:
Bernt Christian Egeland 2021-08-31 16:39:33 +02:00
parent 59f001b047
commit 091e773ef7

View File

@ -14,7 +14,7 @@ export default function CameraImage({ camera, onload, searchParams = '', stretch
// Add scrollbar width (when visible) to the available observer width to eliminate screen juddering. // Add scrollbar width (when visible) to the available observer width to eliminate screen juddering.
// https://github.com/blakeblackshear/frigate/issues/1657 // https://github.com/blakeblackshear/frigate/issues/1657
let scrollBarWidth; let scrollBarWidth = 0;
if (window.innerWidth && document.body.offsetWidth) { if (window.innerWidth && document.body.offsetWidth) {
scrollBarWidth = window.innerWidth - document.body.offsetWidth; scrollBarWidth = window.innerWidth - document.body.offsetWidth;
} }
@ -28,7 +28,10 @@ export default function CameraImage({ camera, onload, searchParams = '', stretch
const scaledHeight = Math.floor(availableWidth / aspectRatio); const scaledHeight = Math.floor(availableWidth / aspectRatio);
return stretch ? scaledHeight : Math.min(scaledHeight, height); return stretch ? scaledHeight : Math.min(scaledHeight, height);
}, [availableWidth, aspectRatio, height, stretch]); }, [availableWidth, aspectRatio, height, stretch]);
const scaledWidth = useMemo(() => Math.ceil(scaledHeight * aspectRatio), [scaledHeight, aspectRatio]); const scaledWidth = useMemo(() => Math.ceil(scaledHeight * aspectRatio - scrollBarWidth), [
scaledHeight,
aspectRatio,
]);
const img = useMemo(() => new Image(), []); const img = useMemo(() => new Image(), []);
img.onload = useCallback( img.onload = useCallback(