@remotion/player 3.0.0-processing.7 → 3.0.0-rc.1

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

@@ -1,7 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useElementSize = void 0;
+exports.useElementSize = exports.updateAllElementsSizes = void 0;
 const react_1 = require("react");
+let elementSizeHooks = [];
+const updateAllElementsSizes = () => {
+    for (const listener of elementSizeHooks) {
+        listener();
+    }
+};
+exports.updateAllElementsSizes = updateAllElementsSizes;
 const useElementSize = (ref, options) => {
     const [size, setSize] = (0, react_1.useState)(null);
     const observer = (0, react_1.useMemo)(() => {
@@ -9,19 +16,29 @@ const useElementSize = (ref, options) => {
             return null;
         }
         return new ResizeObserver((entries) => {
+            // The contentRect returns the width without any `scale()`'s being applied. The height is wrong
+            const { contentRect } = entries[0];
+            // The clientRect returns the size with `scale()` being applied.
             const newSize = entries[0].target.getClientRects();
             if (!newSize || !newSize[0]) {
                 setSize(null);
                 return;
             }
+            const probableCssParentScale = newSize[0].width / contentRect.width;
+            const width = options.shouldApplyCssTransforms
+                ? newSize[0].width
+                : newSize[0].width * (1 / probableCssParentScale);
+            const height = options.shouldApplyCssTransforms
+                ? newSize[0].height
+                : newSize[0].height * (1 / probableCssParentScale);
             setSize({
-                width: newSize[0].width,
-                height: newSize[0].height,
+                width,
+                height,
                 left: newSize[0].x,
                 top: newSize[0].y,
             });
         });
-    }, []);
+    }, [options.shouldApplyCssTransforms]);
     const updateSize = (0, react_1.useCallback)(() => {
         if (!ref.current) {
             return;
@@ -62,6 +79,12 @@ const useElementSize = (ref, options) => {
             window.removeEventListener('resize', updateSize);
         };
     }, [options.triggerOnWindowResize, updateSize]);
+    (0, react_1.useEffect)(() => {
+        elementSizeHooks.push(updateSize);
+        return () => {
+            elementSizeHooks = elementSizeHooks.filter((e) => e !== updateSize);
+        };
+    }, [updateSize]);
     return size;
 };
 exports.useElementSize = useElementSize;

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

@@ -1 +1 @@
-{"version":3,"file":"use-element-size.js","sourceRoot":"","sources":["../../src/utils/use-element-size.ts"],"names":[],"mappings":";;;AAAA,iCAAgE;AASzD,MAAM,cAAc,GAAG,CAC7B,GAAiC,EACjC,OAEC,EACa,EAAE;IAChB,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAc,IAAI,CAAC,CAAC;IACpD,MAAM,QAAQ,GAAG,IAAA,eAAO,EAAC,GAAG,EAAE;QAC7B,IAAI,OAAO,cAAc,KAAK,WAAW,EAAE;YAC1C,OAAO,IAAI,CAAC;SACZ;QAED,OAAO,IAAI,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE;YACrC,MAAM,OAAO,GAAG,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,cAAc,EAAE,CAAC;YACnD,IAAI,CAAC,OAAO,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE;gBAC5B,OAAO,CAAC,IAAI,CAAC,CAAC;gBACd,OAAO;aACP;YAED,OAAO,CAAC;gBACP,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,KAAK;gBACvB,MAAM,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,MAAM;gBACzB,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;gBAClB,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC;aACjB,CAAC,CAAC;QACJ,CAAC,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,UAAU,GAAG,IAAA,mBAAW,EAAC,GAAG,EAAE;QACnC,IAAI,CAAC,GAAG,CAAC,OAAO,EAAE;YACjB,OAAO;SACP;QAED,MAAM,IAAI,GAAG,GAAG,CAAC,OAAO,CAAC,cAAc,EAAE,CAAC;QAC1C,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE;YACb,OAAO,CAAC,IAAI,CAAC,CAAC;YACd,OAAO;SACP;QAED,OAAO,CAAC;YACP,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,KAAe;YAC9B,MAAM,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,MAAgB;YAChC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAW;YACzB,GAAG,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAW;SACxB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,IAAA,iBAAS,EAAC,GAAG,EAAE;QACd,IAAI,CAAC,QAAQ,EAAE;YACd,OAAO;SACP;QAED,UAAU,EAAE,CAAC;QACb,MAAM,EAAC,OAAO,EAAC,GAAG,GAAG,CAAC;QACtB,IAAI,GAAG,CAAC,OAAO,EAAE;YAChB,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;SAC9B;QAED,OAAO,GAAS,EAAE;YACjB,IAAI,OAAO,EAAE;gBACZ,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;aAC5B;QACF,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,GAAG,EAAE,UAAU,CAAC,CAAC,CAAC;IAEhC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACd,IAAI,CAAC,OAAO,CAAC,qBAAqB,EAAE;YACnC,OAAO;SACP;QAED,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;QAE9C,OAAO,GAAG,EAAE;YACX,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;QAClD,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,qBAAqB,EAAE,UAAU,CAAC,CAAC,CAAC;IAEhD,OAAO,IAAI,CAAC;AACb,CAAC,CAAC;AA7EW,QAAA,cAAc,kBA6EzB"}
+{"version":3,"file":"use-element-size.js","sourceRoot":"","sources":["../../src/utils/use-element-size.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,11 +1,12 @@
 {
 	"name": "@remotion/player",
-	"version": "3.0.0-processing.7+f6f27a6d1",
+	"version": "3.0.0-rc.1",
 	"description": "Remotion Player",
 	"main": "dist/index.js",
 	"sideEffects": false,
 	"scripts": {
-		"test": "eslint src --ext ts,tsx && jest",
+		"lint": "eslint src --ext ts,tsx",
+		"test": "jest",
 		"build": "tsc -d",
 		"watch": "tsc -w",
 		"prerelease": "cp ../../README.md ."
@@ -13,6 +14,9 @@
 	"repository": {
 		"url": "https://github.com/remotion-dev/remotion"
 	},
+	"bugs": {
+		"url": "https://github.com/remotion-dev/remotion/issues"
+	},
 	"files": [
 		"dist",
 		"README.md"
@@ -24,30 +28,40 @@
 	],
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"remotion": "3.0.0-processing.7+f6f27a6d1"
+		"remotion": "3.0.0-rc.1"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
 		"react-dom": ">=16.8.0"
 	},
 	"devDependencies": {
-		"@jonny/eslint-config": "^2.1.248",
-		"@testing-library/react": "^11.2.2",
-		"@types/jest": "^27.0.2",
+		"@jonny/eslint-config": "3.0.259",
+		"@testing-library/react": "13.1.1",
+		"@types/jest": "^27.4.0",
 		"@types/node": "^14.14.14",
-		"@types/react": "17.0.27",
-		"@types/react-dom": "^17.0.0",
+		"@types/react": "18.0.1",
+		"@types/react-dom": "18.0.0",
 		"csstype": "^3.0.9",
-		"eslint": "^7.4.0",
+		"eslint": "8.13.0",
 		"jest": "^27.2.4",
 		"prettier": "^2.0.5",
 		"prettier-plugin-organize-imports": "^1.1.1",
+		"react": "^18.0.0",
+		"react-dom": "^18.0.0",
 		"ts-jest": "^27.0.5",
-		"typescript": "^4.4.2",
+		"typescript": "^4.5.5",
 		"webpack": "5.60.0"
 	},
+	"keywords": [
+		"remotion",
+		"ffmpeg",
+		"video",
+		"react",
+		"puppeteer",
+		"player"
+	],
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "f6f27a6d1796bfd231648db013f8f89128aaaa16"
+	"gitHead": "1908be17649b132109b71da2d1065293dbfcb0a3"
 }