@remotion/web-renderer 4.0.387 → 4.0.388

package/dist/calculate-transforms.d.ts

@@ -6,6 +6,4 @@ export declare const calculateTransforms: (element: HTMLElement | SVGSVGElement)
         x: number;
         y: number;
     };
-    borderRadius: import("./drawing/border-radius").BorderRadiusCorners;
-    opacity: number;
 };

package/dist/calculate-transforms.js

@@ -1,4 +1,3 @@
-import { parseBorderRadius } from './drawing/border-radius';
 import { parseTransformOrigin } from './parse-transform-origin';
 const getInternalTransformOrigin = (transform) => {
     var _a;
@@ -22,18 +21,8 @@ export const calculateTransforms = (element) => {
     let parent = element;
     const transforms = [];
     const toReset = [];
-    let borderRadius = '';
-    let opacity = 1;
     while (parent) {
         const computedStyle = getComputedStyle(parent);
-        if (parent === element) {
-            borderRadius = computedStyle.borderRadius;
-        }
-        // Multiply opacity values from element and all parents
-        const parentOpacity = computedStyle.opacity;
-        if (parentOpacity && parentOpacity !== '') {
-            opacity *= parseFloat(parentOpacity);
-        }
         if ((computedStyle.transform && computedStyle.transform !== 'none') ||
             parent === element) {
             const toParse = computedStyle.transform === 'none' || computedStyle.transform === ''
@@ -81,11 +70,5 @@ export const calculateTransforms = (element) => {
             }
         },
         nativeTransformOrigin,
-        borderRadius: parseBorderRadius({
-            borderRadius,
-            width: dimensions.width,
-            height: dimensions.height,
-        }),
-        opacity,
     };
 };

package/dist/composable.d.ts

@@ -1,4 +1,10 @@
 export type Composable = {
-    type: 'element';
-    element: HTMLElement | SVGElement;
+    type: 'canvas';
+    element: HTMLCanvasElement;
+} | {
+    type: 'svg';
+    element: SVGSVGElement;
+} | {
+    type: 'img';
+    element: HTMLImageElement;
 };

package/dist/compose-canvas.js

@@ -1,36 +1,12 @@
-import { setBorderRadius } from './border-radius';
 import { calculateTransforms } from './calculate-transforms';
-import { turnSvgIntoDrawable } from './drawing/compose-svg';
-import { setOpacity } from './drawing/opacity';
-import { setTransform } from './drawing/transform';
+import { turnSvgIntoDrawable } from './compose-svg';
 export const composeCanvas = async (canvas, context) => {
-    const { totalMatrix, reset, dimensions, borderRadius, opacity } = calculateTransforms(canvas);
-    if (opacity === 0) {
-        reset();
-        return;
-    }
+    const { totalMatrix, reset, dimensions } = calculateTransforms(canvas);
+    context.setTransform(totalMatrix);
     const drawable = canvas instanceof SVGSVGElement
         ? await turnSvgIntoDrawable(canvas)
         : canvas;
-    const finishTransform = setTransform({
-        ctx: context,
-        transform: totalMatrix,
-    });
-    const finishBorderRadius = setBorderRadius({
-        ctx: context,
-        x: dimensions.left,
-        y: dimensions.top,
-        width: dimensions.width,
-        height: dimensions.height,
-        borderRadius,
-    });
-    const finishOpacity = setOpacity({
-        ctx: context,
-        opacity,
-    });
     context.drawImage(drawable, dimensions.left, dimensions.top, dimensions.width, dimensions.height);
-    finishOpacity();
-    finishBorderRadius();
-    finishTransform();
+    context.setTransform(new DOMMatrix());
     reset();
 };

package/dist/find-capturable-elements.d.ts

@@ -1,2 +1,2 @@
 import type { Composable } from './composable';
-export declare const findCapturableElements: (element: HTMLDivElement, context: OffscreenCanvasRenderingContext2D) => Promise<Composable[]>;
+export declare const findCapturableElements: (element: HTMLDivElement) => Composable[];

package/dist/find-capturable-elements.js

@@ -1,26 +1,28 @@
-import { drawElementToCanvas } from './drawing/draw-element-to-canvas';
-export const findCapturableElements = async (element, context) => {
-    const treeWalker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, (node) => {
-        if (node instanceof Element) {
-            const computedStyle = getComputedStyle(node);
-            return computedStyle.display === 'none'
-                ? NodeFilter.FILTER_REJECT
-                : NodeFilter.FILTER_ACCEPT;
-        }
-        return NodeFilter.FILTER_ACCEPT;
-    });
+export const findCapturableElements = (element) => {
+    const canvasAndSvgElements = element.querySelectorAll('svg,canvas,img');
     const composables = [];
-    while (treeWalker.nextNode()) {
-        const node = treeWalker.currentNode;
-        if (node instanceof HTMLCanvasElement ||
-            node instanceof SVGSVGElement ||
-            node instanceof HTMLImageElement) {
-            await drawElementToCanvas(node, context);
+    Array.from(canvasAndSvgElements).forEach((capturableElement) => {
+        if (capturableElement.tagName.toLocaleLowerCase() === 'canvas') {
+            const canvas = capturableElement;
+            composables.push({
+                type: 'canvas',
+                element: canvas,
+            });
+        }
+        else if (capturableElement.tagName.toLocaleLowerCase() === 'svg') {
+            const svg = capturableElement;
             composables.push({
-                type: 'element',
-                element: node,
+                type: 'svg',
+                element: svg,
             });
         }
-    }
+        else if (capturableElement.tagName.toLocaleLowerCase() === 'img') {
+            const img = capturableElement;
+            composables.push({
+                type: 'img',
+                element: img,
+            });
+        }
+    });
     return composables;
 };

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.387",
+	"version": "4.0.388",
 	"main": "dist/index.js",
 	"sideEffects": false,
 	"scripts": {
@@ -16,13 +16,13 @@
 	"author": "Remotion <jonny@remotion.dev>",
 	"license": "UNLICENSED",
 	"dependencies": {
-		"remotion": "4.0.387",
+		"remotion": "4.0.388",
 		"mediabunny": "1.25.8"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.387",
-		"@remotion/player": "4.0.387",
-		"@remotion/media": "4.0.387",
+		"@remotion/eslint-config-internal": "4.0.388",
+		"@remotion/player": "4.0.388",
+		"@remotion/media": "4.0.388",
 		"@vitejs/plugin-react": "4.1.0",
 		"@vitest/browser-playwright": "4.0.9",
 		"playwright": "1.55.1",

package/dist/border-radius.d.ts

@@ -1,31 +0,0 @@
-export type BorderRadiusCorners = {
-    topLeft: {
-        horizontal: number;
-        vertical: number;
-    };
-    topRight: {
-        horizontal: number;
-        vertical: number;
-    };
-    bottomRight: {
-        horizontal: number;
-        vertical: number;
-    };
-    bottomLeft: {
-        horizontal: number;
-        vertical: number;
-    };
-};
-export declare function parseBorderRadius({ borderRadius, width, height, }: {
-    borderRadius: string;
-    width: number;
-    height: number;
-}): BorderRadiusCorners;
-export declare function setBorderRadius({ ctx, x, y, width, height, borderRadius, }: {
-    ctx: OffscreenCanvasRenderingContext2D;
-    x: number;
-    y: number;
-    width: number;
-    height: number;
-    borderRadius: BorderRadiusCorners;
-}): () => void;

package/dist/border-radius.js

@@ -1,152 +0,0 @@
-function parseValue({ value, reference, }) {
-    value = value.trim();
-    if (value.endsWith('%')) {
-        const percentage = parseFloat(value);
-        return (percentage / 100) * reference;
-    }
-    if (value.endsWith('px')) {
-        return parseFloat(value);
-    }
-    // If no unit, assume pixels
-    return parseFloat(value);
-}
-function expandShorthand(values) {
-    if (values.length === 1) {
-        // All corners the same
-        return [values[0], values[0], values[0], values[0]];
-    }
-    if (values.length === 2) {
-        // [0] = top-left & bottom-right, [1] = top-right & bottom-left
-        return [values[0], values[1], values[0], values[1]];
-    }
-    if (values.length === 3) {
-        // [0] = top-left, [1] = top-right & bottom-left, [2] = bottom-right
-        return [values[0], values[1], values[2], values[1]];
-    }
-    // 4 values: top-left, top-right, bottom-right, bottom-left
-    return [values[0], values[1], values[2], values[3]];
-}
-function clampBorderRadius({ borderRadius, width, height, }) {
-    // According to CSS spec, if the sum of border radii on adjacent corners
-    // exceeds the length of the edge, they should be proportionally reduced
-    const clamped = {
-        topLeft: { ...borderRadius.topLeft },
-        topRight: { ...borderRadius.topRight },
-        bottomRight: { ...borderRadius.bottomRight },
-        bottomLeft: { ...borderRadius.bottomLeft },
-    };
-    // Check top edge
-    const topSum = clamped.topLeft.horizontal + clamped.topRight.horizontal;
-    if (topSum > width) {
-        const factor = width / topSum;
-        clamped.topLeft.horizontal *= factor;
-        clamped.topRight.horizontal *= factor;
-    }
-    // Check right edge
-    const rightSum = clamped.topRight.vertical + clamped.bottomRight.vertical;
-    if (rightSum > height) {
-        const factor = height / rightSum;
-        clamped.topRight.vertical *= factor;
-        clamped.bottomRight.vertical *= factor;
-    }
-    // Check bottom edge
-    const bottomSum = clamped.bottomRight.horizontal + clamped.bottomLeft.horizontal;
-    if (bottomSum > width) {
-        const factor = width / bottomSum;
-        clamped.bottomRight.horizontal *= factor;
-        clamped.bottomLeft.horizontal *= factor;
-    }
-    // Check left edge
-    const leftSum = clamped.bottomLeft.vertical + clamped.topLeft.vertical;
-    if (leftSum > height) {
-        const factor = height / leftSum;
-        clamped.bottomLeft.vertical *= factor;
-        clamped.topLeft.vertical *= factor;
-    }
-    return clamped;
-}
-export function parseBorderRadius({ borderRadius, width, height, }) {
-    // Split by '/' to separate horizontal and vertical radii
-    const parts = borderRadius.split('/').map((part) => part.trim());
-    const horizontalPart = parts[0];
-    const verticalPart = parts[1];
-    // Split each part into individual values
-    const horizontalValues = horizontalPart.split(/\s+/).filter((v) => v);
-    const verticalValues = verticalPart
-        ? verticalPart.split(/\s+/).filter((v) => v)
-        : horizontalValues; // If no '/', use horizontal values for vertical
-    // Expand shorthand to 4 values
-    const [hTopLeft, hTopRight, hBottomRight, hBottomLeft] = expandShorthand(horizontalValues);
-    const [vTopLeft, vTopRight, vBottomRight, vBottomLeft] = expandShorthand(verticalValues);
-    return clampBorderRadius({
-        borderRadius: {
-            topLeft: {
-                horizontal: parseValue({ value: hTopLeft, reference: width }),
-                vertical: parseValue({ value: vTopLeft, reference: height }),
-            },
-            topRight: {
-                horizontal: parseValue({ value: hTopRight, reference: width }),
-                vertical: parseValue({ value: vTopRight, reference: height }),
-            },
-            bottomRight: {
-                horizontal: parseValue({ value: hBottomRight, reference: width }),
-                vertical: parseValue({ value: vBottomRight, reference: height }),
-            },
-            bottomLeft: {
-                horizontal: parseValue({ value: hBottomLeft, reference: width }),
-                vertical: parseValue({ value: vBottomLeft, reference: height }),
-            },
-        },
-        width,
-        height,
-    });
-}
-export function setBorderRadius({ ctx, x, y, width, height, borderRadius, }) {
-    if (borderRadius.topLeft.horizontal === 0 &&
-        borderRadius.topLeft.vertical === 0 &&
-        borderRadius.topRight.horizontal === 0 &&
-        borderRadius.topRight.vertical === 0 &&
-        borderRadius.bottomRight.horizontal === 0 &&
-        borderRadius.bottomRight.vertical === 0 &&
-        borderRadius.bottomLeft.horizontal === 0 &&
-        borderRadius.bottomLeft.vertical === 0) {
-        return () => { };
-    }
-    ctx.save();
-    ctx.beginPath();
-    // Start at top-left corner, after the horizontal radius
-    ctx.moveTo(x + borderRadius.topLeft.horizontal, y);
-    // Top edge to top-right corner
-    ctx.lineTo(x + width - borderRadius.topRight.horizontal, y);
-    // Top-right corner (elliptical arc)
-    if (borderRadius.topRight.horizontal > 0 ||
-        borderRadius.topRight.vertical > 0) {
-        ctx.ellipse(x + width - borderRadius.topRight.horizontal, y + borderRadius.topRight.vertical, borderRadius.topRight.horizontal, borderRadius.topRight.vertical, 0, -Math.PI / 2, 0);
-    }
-    // Right edge to bottom-right corner
-    ctx.lineTo(x + width, y + height - borderRadius.bottomRight.vertical);
-    // Bottom-right corner (elliptical arc)
-    if (borderRadius.bottomRight.horizontal > 0 ||
-        borderRadius.bottomRight.vertical > 0) {
-        ctx.ellipse(x + width - borderRadius.bottomRight.horizontal, y + height - borderRadius.bottomRight.vertical, borderRadius.bottomRight.horizontal, borderRadius.bottomRight.vertical, 0, 0, Math.PI / 2);
-    }
-    // Bottom edge to bottom-left corner
-    ctx.lineTo(x + borderRadius.bottomLeft.horizontal, y + height);
-    // Bottom-left corner (elliptical arc)
-    if (borderRadius.bottomLeft.horizontal > 0 ||
-        borderRadius.bottomLeft.vertical > 0) {
-        ctx.ellipse(x + borderRadius.bottomLeft.horizontal, y + height - borderRadius.bottomLeft.vertical, borderRadius.bottomLeft.horizontal, borderRadius.bottomLeft.vertical, 0, Math.PI / 2, Math.PI);
-    }
-    // Left edge to top-left corner
-    ctx.lineTo(x, y + borderRadius.topLeft.vertical);
-    // Top-left corner (elliptical arc)
-    if (borderRadius.topLeft.horizontal > 0 ||
-        borderRadius.topLeft.vertical > 0) {
-        ctx.ellipse(x + borderRadius.topLeft.horizontal, y + borderRadius.topLeft.vertical, borderRadius.topLeft.horizontal, borderRadius.topLeft.vertical, 0, Math.PI, (Math.PI * 3) / 2);
-    }
-    ctx.closePath();
-    ctx.clip();
-    return () => {
-        ctx.restore();
-    };
-}

package/dist/drawing/compose-canvas.d.ts

@@ -1 +0,0 @@
-export declare const drawElementToCanvas: (canvas: HTMLCanvasElement | HTMLImageElement | SVGSVGElement, context: OffscreenCanvasRenderingContext2D) => Promise<void>;

package/dist/drawing/compose-canvas.js

@@ -1,36 +0,0 @@
-import { setBorderRadius } from './border-radius';
-import { calculateTransforms } from './calculate-transforms';
-import { turnSvgIntoDrawable } from './compose-svg';
-import { setOpacity } from './opacity';
-import { setTransform } from './transform';
-export const drawElementToCanvas = async (canvas, context) => {
-    const { totalMatrix, reset, dimensions, borderRadius, opacity } = calculateTransforms(canvas);
-    if (opacity === 0) {
-        reset();
-        return;
-    }
-    const drawable = canvas instanceof SVGSVGElement
-        ? await turnSvgIntoDrawable(canvas)
-        : canvas;
-    const finishTransform = setTransform({
-        ctx: context,
-        transform: totalMatrix,
-    });
-    const finishBorderRadius = setBorderRadius({
-        ctx: context,
-        x: dimensions.left,
-        y: dimensions.top,
-        width: dimensions.width,
-        height: dimensions.height,
-        borderRadius,
-    });
-    const finishOpacity = setOpacity({
-        ctx: context,
-        opacity,
-    });
-    context.drawImage(drawable, dimensions.left, dimensions.top, dimensions.width, dimensions.height);
-    finishOpacity();
-    finishBorderRadius();
-    finishTransform();
-    reset();
-};

package/dist/drawing/compose-svg.d.ts

@@ -1 +0,0 @@
-export declare const turnSvgIntoDrawable: (svg: SVGSVGElement) => Promise<HTMLImageElement>;

package/dist/drawing/compose-svg.js

@@ -1,34 +0,0 @@
-export const turnSvgIntoDrawable = (svg) => {
-    const originalTransform = svg.style.transform;
-    const originalTransformOrigin = svg.style.transformOrigin;
-    const originalMarginLeft = svg.style.marginLeft;
-    const originalMarginRight = svg.style.marginRight;
-    const originalMarginTop = svg.style.marginTop;
-    const originalMarginBottom = svg.style.marginBottom;
-    svg.style.transform = 'none';
-    svg.style.transformOrigin = '';
-    // Margins were already included in the positioning calculation,
-    // so we need to remove them to avoid double counting.
-    svg.style.marginLeft = '0';
-    svg.style.marginRight = '0';
-    svg.style.marginTop = '0';
-    svg.style.marginBottom = '0';
-    const svgData = new XMLSerializer().serializeToString(svg);
-    svg.style.marginLeft = originalMarginLeft;
-    svg.style.marginRight = originalMarginRight;
-    svg.style.marginTop = originalMarginTop;
-    svg.style.marginBottom = originalMarginBottom;
-    svg.style.transform = originalTransform;
-    svg.style.transformOrigin = originalTransformOrigin;
-    return new Promise((resolve, reject) => {
-        const image = new Image();
-        const url = `data:image/svg+xml;base64,${btoa(svgData)}`;
-        image.onload = function () {
-            resolve(image);
-        };
-        image.onerror = () => {
-            reject(new Error('Failed to convert SVG to image'));
-        };
-        image.src = url;
-    });
-};

package/dist/drawing/compose.d.ts

@@ -1,5 +0,0 @@
-import type { Composable } from '../composable';
-export declare const compose: ({ composables, context, }: {
-    composables: Composable[];
-    context: OffscreenCanvasRenderingContext2D;
-}) => Promise<void>;

package/dist/drawing/compose.js

@@ -1,6 +0,0 @@
-import { drawElementToCanvas } from './draw-element-to-canvas';
-export const compose = async ({ composables, context, }) => {
-    for (const composable of composables) {
-        await drawElementToCanvas(composable.element, context);
-    }
-};

package/dist/drawing/get-computed-style-cache.js

@@ -1 +0,0 @@
-"use strict";

package/dist/drawing/text/draw-text.d.ts

@@ -1 +0,0 @@
-export declare const drawTextToCanvas: (parentElement: HTMLElement, context: OffscreenCanvasRenderingContext2D) => Promise<void>;

package/dist/drawing/text/draw-text.js

@@ -1,57 +0,0 @@
-import { withResolvers } from '../../with-resolvers';
-export const drawTextToCanvas = async (parentElement, context) => {
-    const clientRect = parentElement.getBoundingClientRect();
-    const computedStyle = getComputedStyle(parentElement);
-    const clonedNode = parentElement.cloneNode(true);
-    for (let i = 0; i < computedStyle.length; i++) {
-        const propertyName = computedStyle[i];
-        const value = computedStyle.getPropertyValue(propertyName);
-        if (propertyName === 'margin-top' ||
-            propertyName === 'margin-bottom' ||
-            propertyName === 'margin-left' ||
-            propertyName === 'margin-right' ||
-            propertyName === 'margin') {
-            // @ts-expect-error - propertyName is a valid CSS property
-            clonedNode.style[propertyName] = '0px';
-            continue;
-        }
-        // @ts-expect-error - propertyName is a valid CSS property
-        clonedNode.style[propertyName] = value;
-    }
-    // Create an SVG that contains the cloned node via a foreignObject
-    const svgNS = 'http://www.w3.org/2000/svg';
-    const svg = document.createElementNS(svgNS, 'svg');
-    svg.setAttribute('width', `${clientRect.width}`);
-    svg.setAttribute('height', `${clientRect.height}`);
-    const foreignObject = document.createElementNS(svgNS, 'foreignObject');
-    foreignObject.setAttribute('x', '0');
-    foreignObject.setAttribute('y', '0');
-    foreignObject.setAttribute('width', `${clientRect.width}`);
-    foreignObject.setAttribute('height', `${clientRect.height}`);
-    // The cloned node must be in XHTML namespace to render properly
-    const xhtmlNS = 'http://www.w3.org/1999/xhtml';
-    const wrappedDiv = document.createElementNS(xhtmlNS, 'div');
-    wrappedDiv.style.width = `${clientRect.width}px`;
-    wrappedDiv.style.height = `${clientRect.height}px`;
-    wrappedDiv.appendChild(clonedNode);
-    foreignObject.appendChild(wrappedDiv);
-    svg.appendChild(foreignObject);
-    // Convert SVG to data URL
-    const serializer = new XMLSerializer();
-    const svgString = serializer.serializeToString(svg);
-    const svgDataUrl = `data:image/svg+xml;charset=utf-8,${encodeURIComponent(svgString)}`;
-    const { promise, resolve, reject } = withResolvers();
-    // Create image and draw when loaded
-    const img = new window.Image();
-    img.onload = function () {
-        resolve(img);
-    };
-    img.onerror = function (err) {
-        // We may want to add robust error handling here
-        reject(err);
-    };
-    img.src = svgDataUrl;
-    await promise;
-    console.log(clientRect);
-    context.drawImage(img, clientRect.left, clientRect.top, clientRect.width, clientRect.height);
-};

package/dist/find-canvas-elements.d.ts

@@ -1 +0,0 @@
-export declare const findCanvasElements: (element: HTMLDivElement) => HTMLCanvasElement[];

package/dist/find-canvas-elements.js

@@ -1,13 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.findCanvasElements = void 0;
-const findCanvasElements = (element) => {
-    const canvasElements = element.querySelectorAll('canvas');
-    const composables = [];
-    Array.from(canvasElements).forEach((canvasElement) => {
-        const canvas = canvasElement;
-        composables.push(canvas);
-    });
-    return composables;
-};
-exports.findCanvasElements = findCanvasElements;

package/dist/opacity.d.ts

@@ -1,4 +0,0 @@
-export declare const setOpacity: ({ ctx, opacity, }: {
-    ctx: OffscreenCanvasRenderingContext2D;
-    opacity: number;
-}) => () => void;

package/dist/opacity.js

@@ -1,7 +0,0 @@
-export const setOpacity = ({ ctx, opacity, }) => {
-    const previousAlpha = ctx.globalAlpha;
-    ctx.globalAlpha = opacity;
-    return () => {
-        ctx.globalAlpha = previousAlpha;
-    };
-};

package/dist/transform.d.ts

@@ -1,4 +0,0 @@
-export declare const setTransform: ({ ctx, transform, }: {
-    ctx: OffscreenCanvasRenderingContext2D;
-    transform: DOMMatrix;
-}) => () => void;

package/dist/transform.js

@@ -1,6 +0,0 @@
-export const setTransform = ({ ctx, transform, }) => {
-    ctx.setTransform(transform);
-    return () => {
-        ctx.setTransform(new DOMMatrix());
-    };
-};