xmj/element-call
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #1017 from vector-im/dbkr/use_native_resizeobserver

Browse source 
Use the native ResizeObserver where available
This commit is contained in:
David Baker 2023-04-20 14:33:44 +01:00 committed by GitHub
commit 9b398590b9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/video-grid/VideoGrid.tsx
View file

@ -23,7 +23,7 @@ import {
useSprings, useSprings,
} from "@react-spring/web"; } from "@react-spring/web";
import useMeasure from "react-use-measure"; import useMeasure from "react-use-measure";
import { ResizeObserver } from "@juggle/resize-observer"; import { ResizeObserver as JuggleResizeObserver } from "@juggle/resize-observer";
import { ReactDOMAttributes } from "@use-gesture/react/dist/declarations/src/types"; import { ReactDOMAttributes } from "@use-gesture/react/dist/declarations/src/types";
import styles from "./VideoGrid.module.css"; import styles from "./VideoGrid.module.css";
@ -754,7 +754,13 @@ export function VideoGrid({
const lastLayoutRef = useRef<Layout>(layout); const lastLayoutRef = useRef<Layout>(layout);
const isMounted = useIsMounted(); const isMounted = useIsMounted();
const [gridRef, gridBounds] = useMeasure({ polyfill: ResizeObserver }); // The 'polyfill' argument to useMeasure is not a polyfill at all but is the impl that is always used
// if passed, whether the browser has native support or not, so pass in either the browser native
// version or the ponyfill (yes, pony) because Juggle's resizeobserver ponyfill is being weirdly
// buggy for me on my dev env my never updating the size until the window resizes.
const [gridRef, gridBounds] = useMeasure({
polyfill: window.ResizeObserver ?? JuggleResizeObserver,
});
useEffect(() => { useEffect(() => {
setTileState(({ tiles, ...rest }) => { setTileState(({ tiles, ...rest }) => {