@remotion/web-renderer 4.0.495 → 4.0.497

package/dist/drawing/make-dom-matrix.d.ts

@@ -0,0 +1 @@
+export declare const makeDOMMatrix: (transform?: string | undefined) => DOMMatrix;

package/dist/esm/index.mjs

@@ -1170,6 +1170,7 @@ function createScaffold({
   wrapper.style.inset = "0";
   wrapper.style.overflow = "hidden";
   wrapper.style.visibility = "hidden";
+  wrapper.style.filter = "opacity(0)";
   wrapper.style.pointerEvents = "none";
   wrapper.style.zIndex = "-9999";
   const div = document.createElement("div");
@@ -1187,6 +1188,14 @@ function createScaffold({
   wrapper.appendChild(div);
   document.body.appendChild(wrapper);
   const htmlInCanvasContext = useHtmlInCanvas ? setupHtmlInCanvas({ wrapper, div, width, height }) : null;
+  const updateFallbackScaffoldVisibility = () => {
+    if (htmlInCanvasContext) {
+      return;
+    }
+    div.style.visibility = containsLayoutSubtreeCanvas(div) ? "visible" : "";
+  };
+  const fallbackScaffoldObserver = htmlInCanvasContext ? null : new MutationObserver(updateFallbackScaffoldVisibility);
+  fallbackScaffoldObserver?.observe(div, { childList: true, subtree: true });
   const errorHolder = { error: null };
   const root = ReactDOM.createRoot(div, {
     onUncaughtError: (err, errorInfo) => {
@@ -1277,12 +1286,14 @@ function createScaffold({
       })
     }));
   });
+  updateFallbackScaffoldVisibility();
   return {
     delayRenderScope,
     div,
     errorHolder,
     htmlInCanvasContext,
     [Symbol.dispose]: () => {
+      fallbackScaffoldObserver?.disconnect();
       root.unmount();
       if (htmlInCanvasContext) {
         teardownHtmlInCanvas({ htmlInCanvasContext, wrapper, div });
@@ -1934,6 +1945,69 @@ var hasAnyTransformCssValue = (style) => {
   return hasTransformCssValue(style) || hasRotateCssValue(style) || hasScaleCssValue(style);
 };
 
+// src/drawing/make-dom-matrix.ts
+var parseScaleComponent = (component) => {
+  if (component.endsWith("%")) {
+    return Number(component.slice(0, -1)) / 100;
+  }
+  return Number(component);
+};
+var parseScale = (transform) => {
+  const match = /^scale\((.*)\)$/.exec(transform);
+  if (!match) {
+    return null;
+  }
+  const scaleValue = match[1].trim();
+  if (scaleValue === "") {
+    return null;
+  }
+  const components = scaleValue.split(/\s+/).map(parseScaleComponent);
+  if (components.length < 1 || components.length > 3 || components.some((component) => !Number.isFinite(component))) {
+    return null;
+  }
+  return {
+    x: components[0],
+    y: components[1] ?? components[0],
+    z: components[2] ?? 1
+  };
+};
+var parseAxisRotate = (transform) => {
+  const match = /^rotate\((.*)\)$/.exec(transform);
+  if (!match) {
+    return null;
+  }
+  const rotateValue = match[1].trim();
+  const keywordAxis = /^(x|y|z)\s+(.+)$/i.exec(rotateValue);
+  if (keywordAxis) {
+    const axisKeyword = keywordAxis[1].toLowerCase();
+    const angle = keywordAxis[2];
+    const rotateFunction = axisKeyword === "x" ? "rotateX" : axisKeyword === "y" ? "rotateY" : "rotate";
+    return `${rotateFunction}(${angle})`;
+  }
+  const vectorAxis = /^(\S+)\s+(\S+)\s+(\S+)\s+(.+)$/.exec(rotateValue);
+  if (!vectorAxis) {
+    return null;
+  }
+  const axisVector = vectorAxis.slice(1, 4).map(Number);
+  if (axisVector.some((component) => !Number.isFinite(component))) {
+    return null;
+  }
+  return `rotate3d(${axisVector.join(", ")}, ${vectorAxis[4]})`;
+};
+var makeDOMMatrix = (transform) => {
+  if (transform) {
+    const scale = parseScale(transform);
+    if (scale) {
+      return new DOMMatrix().scale(scale.x, scale.y, scale.z);
+    }
+    const axisRotate = parseAxisRotate(transform);
+    if (axisRotate) {
+      return new DOMMatrix(axisRotate);
+    }
+  }
+  return new DOMMatrix(transform);
+};
+
 // src/drawing/parse-linear-gradient.ts
 import { NoReactInternals as NoReactInternals2 } from "remotion/no-react";
 var isValidColor = (color) => {
@@ -2339,15 +2413,15 @@ var calculateTransforms = ({
     const hasApplicableTransformCssValue = canApplyCssTransforms({ computedStyle: transformStyle, element: parent }) && hasAnyTransformCssValue(transformStyle);
     if (hasApplicableTransformCssValue || parent === element) {
       const toParse = hasApplicableTransformCssValue && hasTransformCssValue(transformStyle) ? transformStyle.transform : undefined;
-      const matrix = new DOMMatrix(toParse);
+      const matrix = makeDOMMatrix(toParse);
       const resetTransforms = makeTransformResetter(parent);
       const { scale, rotate } = parent.style;
       const additionalMatrices = [];
       if (hasApplicableTransformCssValue && rotate !== "" && rotate !== "none") {
-        additionalMatrices.push(new DOMMatrix(`rotate(${rotate})`));
+        additionalMatrices.push(makeDOMMatrix(`rotate(${rotate})`));
       }
       if (hasApplicableTransformCssValue && scale !== "" && scale !== "none") {
-        additionalMatrices.push(new DOMMatrix(`scale(${scale})`));
+        additionalMatrices.push(makeDOMMatrix(`scale(${scale})`));
       }
       additionalMatrices.push(matrix);
       const cleanup = resetTransforms(hasApplicableTransformCssValue);

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/web-renderer"
 	},
 	"name": "@remotion/web-renderer",
-	"version": "4.0.495",
+	"version": "4.0.497",
 	"main": "dist/index.js",
 	"type": "module",
 	"scripts": {
@@ -22,20 +22,20 @@
 		"@mediabunny/mp3-encoder": "1.50.8",
 		"@mediabunny/aac-encoder": "1.50.8",
 		"@mediabunny/flac-encoder": "1.50.8",
-		"@remotion/licensing": "4.0.495",
-		"remotion": "4.0.495",
+		"@remotion/licensing": "4.0.497",
+		"remotion": "4.0.497",
 		"mediabunny": "1.50.8"
 	},
 	"devDependencies": {
-		"@remotion/effects": "4.0.495",
+		"@remotion/effects": "4.0.497",
 		"@react-three/fiber": "9.2.0",
-		"@remotion/eslint-config-internal": "4.0.495",
-		"@remotion/paths": "4.0.495",
-		"@remotion/player": "4.0.495",
-		"@remotion/media": "4.0.495",
-		"@remotion/shapes": "4.0.495",
-		"@remotion/three": "4.0.495",
-		"@remotion/transitions": "4.0.495",
+		"@remotion/eslint-config-internal": "4.0.497",
+		"@remotion/paths": "4.0.497",
+		"@remotion/player": "4.0.497",
+		"@remotion/media": "4.0.497",
+		"@remotion/shapes": "4.0.497",
+		"@remotion/three": "4.0.497",
+		"@remotion/transitions": "4.0.497",
 		"@types/three": "0.170.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1",
 		"@vitejs/plugin-react": "4.3.4",