@remotion/web-renderer 4.0.393 → 4.0.394

package/dist/calculate-transforms.d.ts

@@ -0,0 +1,9 @@
+export declare const calculateTransforms: (element: HTMLElement | SVGSVGElement) => {
+    dimensions: DOMRect;
+    totalMatrix: DOMMatrix;
+    reset: () => void;
+    nativeTransformOrigin: {
+        x: number;
+        y: number;
+    };
+};

package/dist/calculate-transforms.js

@@ -0,0 +1,74 @@
+import { parseTransformOrigin } from './parse-transform-origin';
+const getInternalTransformOrigin = (transform) => {
+    var _a;
+    const centerX = transform.boundingClientRect.width / 2;
+    const centerY = transform.boundingClientRect.height / 2;
+    const origin = (_a = parseTransformOrigin(transform.transformOrigin)) !== null && _a !== void 0 ? _a : {
+        x: centerX,
+        y: centerY,
+    };
+    return origin;
+};
+const getGlobalTransformOrigin = (transform) => {
+    const { x: originX, y: originY } = getInternalTransformOrigin(transform);
+    return {
+        x: originX + transform.boundingClientRect.left,
+        y: originY + transform.boundingClientRect.top,
+    };
+};
+export const calculateTransforms = (element) => {
+    // Compute the cumulative transform by traversing parent nodes
+    let parent = element;
+    const transforms = [];
+    const toReset = [];
+    while (parent) {
+        const computedStyle = getComputedStyle(parent);
+        if ((computedStyle.transform && computedStyle.transform !== 'none') ||
+            parent === element) {
+            const toParse = computedStyle.transform === 'none' || computedStyle.transform === ''
+                ? undefined
+                : computedStyle.transform;
+            const matrix = new DOMMatrix(toParse);
+            const { transform } = parent.style;
+            parent.style.transform = 'none';
+            transforms.push({
+                matrix,
+                rect: parent,
+                transformOrigin: computedStyle.transformOrigin,
+                boundingClientRect: null,
+            });
+            const parentRef = parent;
+            toReset.push(() => {
+                parentRef.style.transform = transform;
+            });
+        }
+        parent = parent.parentElement;
+    }
+    for (const transform of transforms) {
+        transform.boundingClientRect = transform.rect.getBoundingClientRect();
+    }
+    const dimensions = transforms[0].boundingClientRect;
+    const nativeTransformOrigin = getInternalTransformOrigin(transforms[0]);
+    const totalMatrix = new DOMMatrix();
+    for (const transform of transforms.slice().reverse()) {
+        if (!transform.boundingClientRect) {
+            throw new Error('Bounding client rect not found');
+        }
+        const globalTransformOrigin = getGlobalTransformOrigin(transform);
+        const transformMatrix = new DOMMatrix()
+            .translate(globalTransformOrigin.x, globalTransformOrigin.y)
+            .multiply(transform.matrix)
+            .translate(-globalTransformOrigin.x, -globalTransformOrigin.y);
+        totalMatrix.multiplySelf(transformMatrix);
+    }
+    return {
+        dimensions,
+        totalMatrix,
+        reset: () => {
+            for (const reset of toReset) {
+                reset();
+            }
+        },
+        nativeTransformOrigin,
+    };
+};

package/dist/composable.d.ts

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

package/dist/composable.js

@@ -0,0 +1 @@
+export {};

package/dist/compose-canvas.d.ts

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

package/dist/compose-canvas.js

@@ -0,0 +1,12 @@
+import { calculateTransforms } from './calculate-transforms';
+import { turnSvgIntoDrawable } from './compose-svg';
+export const composeCanvas = async (canvas, context) => {
+    const { totalMatrix, reset, dimensions } = calculateTransforms(canvas);
+    context.setTransform(totalMatrix);
+    const drawable = canvas instanceof SVGSVGElement
+        ? await turnSvgIntoDrawable(canvas)
+        : canvas;
+    context.drawImage(drawable, dimensions.left, dimensions.top, dimensions.width, dimensions.height);
+    context.setTransform(new DOMMatrix());
+    reset();
+};

package/dist/compose-svg.d.ts

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

package/dist/compose-svg.js

@@ -0,0 +1,34 @@
+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/find-capturable-elements.d.ts

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

package/dist/find-capturable-elements.js

@@ -0,0 +1,28 @@
+export const findCapturableElements = (element) => {
+    const canvasAndSvgElements = element.querySelectorAll('svg,canvas,img');
+    const composables = [];
+    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: 'svg',
+                element: svg,
+            });
+        }
+        else if (capturableElement.tagName.toLocaleLowerCase() === 'img') {
+            const img = capturableElement;
+            composables.push({
+                type: 'img',
+                element: img,
+            });
+        }
+    });
+    return composables;
+};

package/dist/get-biggest-bounding-client-rect.d.ts

@@ -0,0 +1 @@
+export declare const getBiggestBoundingClientRect: (element: HTMLElement | SVGElement) => DOMRect;

package/dist/get-biggest-bounding-client-rect.js

@@ -0,0 +1,15 @@
+export const getBiggestBoundingClientRect = (element) => {
+    const treeWalker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT);
+    let mostLeft = Infinity;
+    let mostTop = Infinity;
+    let mostRight = -Infinity;
+    let mostBottom = -Infinity;
+    while (treeWalker.nextNode()) {
+        const rect = treeWalker.currentNode.getBoundingClientRect();
+        mostLeft = Math.min(mostLeft, rect.left);
+        mostTop = Math.min(mostTop, rect.top);
+        mostRight = Math.max(mostRight, rect.right);
+        mostBottom = Math.max(mostBottom, rect.bottom);
+    }
+    return new DOMRect(mostLeft, mostTop, mostRight - mostLeft, mostBottom - mostTop);
+};

package/dist/parse-transform-origin.d.ts

@@ -0,0 +1,4 @@
+export declare const parseTransformOrigin: (transformOrigin: string) => {
+    x: number;
+    y: number;
+} | null;

package/dist/parse-transform-origin.js

@@ -0,0 +1,7 @@
+export const parseTransformOrigin = (transformOrigin) => {
+    if (transformOrigin.trim() === '') {
+        return null;
+    }
+    const [x, y] = transformOrigin.split(' ');
+    return { x: parseFloat(x), y: parseFloat(y) };
+};

package/dist/send-telemetry-event.d.ts

@@ -0,0 +1,5 @@
+export declare const sendUsageEvent: ({ licenseKey, succeeded, apiName, }: {
+    licenseKey: string | null;
+    succeeded: boolean;
+    apiName: string;
+}) => Promise<void>;

package/dist/send-telemetry-event.js

@@ -0,0 +1,22 @@
+import { registerUsageEvent } from '@remotion/licensing';
+import { Internals } from 'remotion';
+export const sendUsageEvent = async ({ licenseKey, succeeded, apiName, }) => {
+    var _a;
+    const host = typeof window === 'undefined'
+        ? null
+        : typeof window.location === 'undefined'
+            ? null
+            : ((_a = window.location.origin) !== null && _a !== void 0 ? _a : null);
+    if (host === null) {
+        return;
+    }
+    if (licenseKey === null) {
+        Internals.Log.warn({ logLevel: 'warn', tag: 'web-renderer' }, `Pass "licenseKey" to ${apiName}(). If you qualify for the free license (https://remotion.dev/license), pass "free-license" instead.`);
+    }
+    await registerUsageEvent({
+        apiKey: licenseKey,
+        event: 'webcodec-conversion',
+        host,
+        succeeded,
+    });
+};

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