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

Use the native ResizeObserver where available

Browse source 
My dev env suddenly, with no apparent prompt, went into a mode where
it wouldn't display nay video tiles which was because they were 0x0
in the top left corner, which in turn was because the ResizeObserver
was never returning the actual bounds of the video tile container.

As per comment, this uses the native impl in preference to the ponyfill,
although in practice it looks like all our target browsers should support
it, so perhaps we could just remove the ponyfill entirely.
This commit is contained in:
David Baker 2023-04-20 13:39:25 +01:00
parent 6f2b32ead5
commit d1aa34b2e0
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,
} from "@react-spring/web";
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 styles from "./VideoGrid.module.css";
@ -754,7 +754,13 @@ export function VideoGrid({
const lastLayoutRef = useRef<Layout>(layout);
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(() => {
setTileState(({ tiles, ...rest }) => {