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

added scrollbar width to observer width.

Browse Source
This commit is contained in:
Bernt Christian Egeland 2021-08-31 16:15:18 +02:00
parent d74021af47
commit 59f001b047
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

@ -10,7 +10,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.cameras[camera]; const { name } = config.cameras[camera];
const { width, height } = config.cameras[camera].detect; const { width, height } = config.cameras[camera].detect;