@remotion/player 4.0.471 → 4.0.472

package/dist/cjs/index.d.ts

@@ -42,7 +42,7 @@ export declare const PlayerInternals: {
         getCurrentFrame: () => number;
         muted: boolean;
     }) => void;
-    useElementSize: (ref: import("react").RefObject<HTMLElement | null>, options: {
+    useElementSize: (source: HTMLElement | import("react").RefObject<HTMLElement | null> | null, options: {
         triggerOnWindowResize: boolean;
         shouldApplyCssTransforms: boolean;
     }) => import("./index.js").Size | null;

package/dist/cjs/utils/use-element-size.d.ts

@@ -10,7 +10,9 @@ export type Size = {
     refresh: () => void;
 };
 export declare const updateAllElementsSizes: () => void;
-export declare const useElementSize: (ref: import("react").RefObject<HTMLElement | null>, options: {
+type ElementSizeSource = React.RefObject<HTMLElement | null> | HTMLElement | null;
+export declare const useElementSize: (source: ElementSizeSource, options: {
     triggerOnWindowResize: boolean;
     shouldApplyCssTransforms: boolean;
 }) => Size | null;
+export {};

package/dist/cjs/utils/use-element-size.js

@@ -9,12 +9,22 @@ const updateAllElementsSizes = () => {
     }
 };
 exports.updateAllElementsSizes = updateAllElementsSizes;
-const useElementSize = (ref, options) => {
+const getElement = (source) => {
+    if (!source) {
+        return null;
+    }
+    if ('current' in source) {
+        return source.current;
+    }
+    return source;
+};
+const useElementSize = (source, options) => {
     const [size, setSize] = (0, react_1.useState)(() => {
-        if (!ref.current) {
+        const element = getElement(source);
+        if (!element) {
             return null;
         }
-        const rect = ref.current.getClientRects();
+        const rect = element.getClientRects();
         if (!rect[0]) {
             return null;
         }
@@ -77,10 +87,11 @@ const useElementSize = (ref, options) => {
         });
     }, [options.shouldApplyCssTransforms]);
     const updateSize = (0, react_1.useCallback)(() => {
-        if (!ref.current) {
+        const element = getElement(source);
+        if (!element) {
             return;
         }
-        const rect = ref.current.getClientRects();
+        const rect = element.getClientRects();
         if (!rect[0]) {
             setSize(null);
             return;
@@ -107,21 +118,24 @@ const useElementSize = (ref, options) => {
                 },
             };
         });
-    }, [ref]);
+    }, [source]);
+    (0, react_1.useEffect)(() => {
+        updateSize();
+    }, [updateSize]);
     (0, react_1.useEffect)(() => {
         if (!observer) {
             return;
         }
-        const { current } = ref;
-        if (current) {
-            observer.observe(current);
+        const element = getElement(source);
+        if (element) {
+            observer.observe(element);
         }
         return () => {
-            if (current) {
-                observer.unobserve(current);
+            if (element) {
+                observer.unobserve(element);
             }
         };
-    }, [observer, ref, updateSize]);
+    }, [observer, source]);
     (0, react_1.useEffect)(() => {
         if (!options.triggerOnWindowResize) {
             return;

package/dist/esm/index.mjs

@@ -1186,12 +1186,22 @@ var updateAllElementsSizes = () => {
     listener();
   }
 };
-var useElementSize = (ref, options) => {
+var getElement = (source) => {
+  if (!source) {
+    return null;
+  }
+  if ("current" in source) {
+    return source.current;
+  }
+  return source;
+};
+var useElementSize = (source, options) => {
   const [size, setSize] = useState4(() => {
-    if (!ref.current) {
+    const element = getElement(source);
+    if (!element) {
       return null;
     }
-    const rect = ref.current.getClientRects();
+    const rect = element.getClientRects();
     if (!rect[0]) {
       return null;
     }
@@ -1240,10 +1250,11 @@ var useElementSize = (ref, options) => {
     });
   }, [options.shouldApplyCssTransforms]);
   const updateSize = useCallback2(() => {
-    if (!ref.current) {
+    const element = getElement(source);
+    if (!element) {
       return;
     }
-    const rect = ref.current.getClientRects();
+    const rect = element.getClientRects();
     if (!rect[0]) {
       setSize(null);
       return;
@@ -1264,21 +1275,24 @@ var useElementSize = (ref, options) => {
         }
       };
     });
-  }, [ref]);
+  }, [source]);
+  useEffect6(() => {
+    updateSize();
+  }, [updateSize]);
   useEffect6(() => {
     if (!observer) {
       return;
     }
-    const { current } = ref;
-    if (current) {
-      observer.observe(current);
+    const element = getElement(source);
+    if (element) {
+      observer.observe(element);
     }
     return () => {
-      if (current) {
-        observer.unobserve(current);
+      if (element) {
+        observer.unobserve(element);
       }
     };
-  }, [observer, ref, updateSize]);
+  }, [observer, source]);
   useEffect6(() => {
     if (!options.triggerOnWindowResize) {
       return;

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/player"
 	},
 	"name": "@remotion/player",
-	"version": "4.0.471",
+	"version": "4.0.472",
 	"description": "React component for embedding a Remotion preview into your app",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -35,7 +35,7 @@
 	],
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"remotion": "4.0.471"
+		"remotion": "4.0.472"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
@@ -49,7 +49,7 @@
 		"react-dom": "19.2.3",
 		"webpack": "5.105.0",
 		"zod": "4.3.6",
-		"@remotion/eslint-config-internal": "4.0.471",
+		"@remotion/eslint-config-internal": "4.0.472",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},