From d1aa34b2e0cfbeaafa17b90c04021ff4dcb04791 Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 20 Apr 2023 13:39:25 +0100 Subject: [PATCH] Use the native ResizeObserver where available 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. --- src/video-grid/VideoGrid.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/video-grid/VideoGrid.tsx b/src/video-grid/VideoGrid.tsx index 03d9583..522924f 100644 --- a/src/video-grid/VideoGrid.tsx +++ b/src/video-grid/VideoGrid.tsx @@ -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); 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 }) => {