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

added scrollbar width to observer width.

Browse Source
This commit is contained in:
Bernt Christian Egeland 2021-08-31 16:15:18 +02:00 committed by Nick Mowen
parent 624c314335
commit 6c10e3de99
1 changed files with 9 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -11,7 +11,15 @@ export default function CameraImage({ camera, onload, searchParams = '', stretch
const [hasLoaded, setHasLoaded] = useState(false); const [hasLoaded, setHasLoaded] = useState(false);
const containerRef = useRef(null); const containerRef = useRef(null);
const canvasRef = useRef(null); const canvasRef = useRef(null);
const [{ width: availableWidth }] = useResizeObserver(containerRef); const [{ width: containerWidth }] = useResizeObserver(containerRef);
// Add scrollbar width (when visible) to the available observer width to eliminate screen juddering.
// https://github.com/blakeblackshear/frigate/issues/1657
let scrollBarWidth;
if (window.innerWidth && document.body.offsetWidth) {
scrollBarWidth = window.innerWidth - document.body.offsetWidth;
}
const availableWidth = scrollBarWidth ? containerWidth + scrollBarWidth : containerWidth;
const { name } = config ? config.cameras[camera] : ''; const { name } = config ? config.cameras[camera] : '';
const enabled = config ? config.cameras[camera].enabled : 'True'; const enabled = config ? config.cameras[camera].enabled : 'True';