@remotion/web-renderer 4.0.430 → 4.0.431

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/drawing/draw-element-to-canvas.d.ts

@@ -0,0 +1,11 @@
+import type { LogLevel } from 'remotion';
+import type { DrawFn } from './drawn-fn';
+export type DrawElementToCanvasReturnValue = 'continue' | 'skip-children';
+export declare const drawElementToCanvas: ({ element, context, draw, offsetLeft, offsetTop, logLevel, }: {
+    element: HTMLElement | SVGElement;
+    context: OffscreenCanvasRenderingContext2D;
+    draw: DrawFn;
+    offsetLeft: number;
+    offsetTop: number;
+    logLevel: LogLevel;
+}) => Promise<DrawElementToCanvasReturnValue>;

package/dist/drawing/draw-element-to-canvas.js

@@ -0,0 +1,64 @@
+import { Internals } from 'remotion';
+import { compose } from '../compose';
+import { getBiggestBoundingClientRect } from '../get-biggest-bounding-client-rect';
+import { calculateTransforms } from './calculate-transforms';
+import { drawElement } from './draw-element';
+import { transformIn3d } from './transform-in-3d';
+export const drawElementToCanvas = async ({ element, context, draw, offsetLeft, offsetTop, logLevel, }) => {
+    const { totalMatrix, reset, dimensions, opacity, computedStyle } = calculateTransforms(element);
+    if (opacity === 0) {
+        reset();
+        return 'continue';
+    }
+    if (dimensions.width <= 0 || dimensions.height <= 0) {
+        reset();
+        return 'continue';
+    }
+    if (!totalMatrix.is2D) {
+        const biggestBoundingClientRect = getBiggestBoundingClientRect(element);
+        const canvasOffsetLeft = Math.min(biggestBoundingClientRect.left, 0);
+        const canvasOffsetTop = Math.min(biggestBoundingClientRect.top, 0);
+        const tempCanvasWidth = Math.max(biggestBoundingClientRect.width, biggestBoundingClientRect.right);
+        const tempCanvasHeight = Math.max(biggestBoundingClientRect.height, biggestBoundingClientRect.bottom);
+        const start = Date.now();
+        const tempCanvas = new OffscreenCanvas(tempCanvasWidth, tempCanvasHeight);
+        const context2 = tempCanvas.getContext('2d');
+        if (!context2) {
+            throw new Error('Could not get context');
+        }
+        await compose({
+            element,
+            context: context2,
+            offsetLeft: canvasOffsetLeft,
+            offsetTop: canvasOffsetTop,
+            logLevel,
+        });
+        const afterCompose = Date.now();
+        const transformed = transformIn3d({
+            canvasWidth: tempCanvasWidth,
+            canvasHeight: tempCanvasHeight,
+            matrix: totalMatrix,
+            sourceCanvas: tempCanvas,
+            offsetLeft: canvasOffsetLeft,
+            offsetTop: canvasOffsetTop,
+        });
+        context.drawImage(transformed, 0, 0);
+        const afterDraw = Date.now();
+        reset();
+        Internals.Log.trace({
+            logLevel,
+            tag: '@remotion/web-renderer',
+        }, `Transforming element in 3D - canvas size: ${tempCanvasWidth}x${tempCanvasHeight} - compose: ${afterCompose - start}ms - draw: ${afterDraw - afterCompose}ms`);
+        return 'skip-children';
+    }
+    await drawElement({
+        dimensions: new DOMRect(dimensions.left - offsetLeft, dimensions.top - offsetTop, dimensions.width, dimensions.height),
+        computedStyle,
+        context,
+        draw,
+        opacity,
+        totalMatrix,
+    });
+    reset();
+    return 'continue';
+};

package/dist/drawing/get-clipped-background.d.ts

@@ -1,8 +1,23 @@
-import type { LogLevel } from 'remotion';
-import type { InternalState } from '../internal-state';
 export declare const getClippedBackground: ({ element, boundingRect, logLevel, internalState, }: {
     element: HTMLElement | SVGElement;
     boundingRect: DOMRect;
-    logLevel: LogLevel;
-    internalState: InternalState;
+    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+    internalState: {
+        getDrawn3dPixels: () => number;
+        getPrecomposedTiles: () => number;
+        addPrecompose: ({ canvasWidth, canvasHeight, }: {
+            canvasWidth: number;
+            canvasHeight: number;
+        }) => void;
+        helperCanvasState: import("../internal-state").HelperCanvasState;
+        [Symbol.dispose]: () => void;
+        getWaitForReadyTime: () => number;
+        addWaitForReadyTime: (time: number) => void;
+        getAddSampleTime: () => number;
+        addAddSampleTime: (time: number) => void;
+        getCreateFrameTime: () => number;
+        addCreateFrameTime: (time: number) => void;
+        getAudioMixingTime: () => number;
+        addAudioMixingTime: (time: number) => void;
+    };
 }) => Promise<OffscreenCanvasRenderingContext2D>;

package/dist/drawing/go-rects-intersect.d.ts

@@ -0,0 +1 @@
+export declare function doRectsIntersect(rect1: DOMRect, rect2: DOMRect): boolean;

package/dist/drawing/go-rects-intersect.js

@@ -0,0 +1,6 @@
+export function doRectsIntersect(rect1, rect2) {
+    return !(rect1.right <= rect2.left ||
+        rect1.left >= rect2.right ||
+        rect1.bottom <= rect2.top ||
+        rect1.top >= rect2.bottom);
+}

package/dist/drawing/precompose.d.ts

@@ -1,10 +1,26 @@
-import type { LogLevel } from 'remotion';
-import type { InternalState } from '../internal-state';
-export declare const precomposeDOMElement: ({ boundingRect, element, logLevel, internalState, }: {
+export declare const precomposeDOMElement: ({ boundingRect, element, logLevel, internalState, scale, }: {
     boundingRect: DOMRect;
     element: HTMLElement | SVGElement;
-    logLevel: LogLevel;
-    internalState: InternalState;
+    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+    internalState: {
+        getDrawn3dPixels: () => number;
+        getPrecomposedTiles: () => number;
+        addPrecompose: ({ canvasWidth, canvasHeight, }: {
+            canvasWidth: number;
+            canvasHeight: number;
+        }) => void;
+        helperCanvasState: import("../internal-state").HelperCanvasState;
+        [Symbol.dispose]: () => void;
+        getWaitForReadyTime: () => number;
+        addWaitForReadyTime: (time: number) => void;
+        getAddSampleTime: () => number;
+        addAddSampleTime: (time: number) => void;
+        getCreateFrameTime: () => number;
+        addCreateFrameTime: (time: number) => void;
+        getAudioMixingTime: () => number;
+        addAudioMixingTime: (time: number) => void;
+    };
+    scale: number;
 }) => Promise<{
     tempCanvas: OffscreenCanvas;
     tempContext: OffscreenCanvasRenderingContext2D;

package/dist/drawing/text/get-base-height.d.ts

@@ -0,0 +1 @@
+export declare const getOpticalHeight: (span: HTMLSpanElement) => number;

package/dist/drawing/text/get-base-height.js

@@ -0,0 +1,13 @@
+// A text with e.g. font-size: 12px does not always get rendered with 12px
+// With "Arial", it gets rendered with 13.5px height, with SF Pro, it gets
+// rendered with 14px height. I therefore conclude there is no logic
+// and we need to measure it. I rendered the string "1", "a" and "qË" and
+// they all have the same height, so it doesn't matter if certain characters
+// go low or high.
+export const getOpticalHeight = (span) => {
+    const originalText = span.textContent;
+    span.textContent = '1';
+    const { height } = span.getBoundingClientRect();
+    span.textContent = originalText;
+    return height;
+};

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/internal-state.js

@@ -1,9 +1,6 @@
 export const makeInternalState = () => {
     let drawnPrecomposedPixels = 0;
     let precomposedTextures = 0;
-    let waitForReadyTime = 0;
-    let addSampleTime = 0;
-    let createFrameTime = 0;
     const helperCanvasState = {
         current: null,
     };
@@ -20,17 +17,5 @@ export const makeInternalState = () => {
                 helperCanvasState.current.cleanup();
             }
         },
-        getWaitForReadyTime: () => waitForReadyTime,
-        addWaitForReadyTime: (time) => {
-            waitForReadyTime += time;
-        },
-        getAddSampleTime: () => addSampleTime,
-        addAddSampleTime: (time) => {
-            addSampleTime += time;
-        },
-        getCreateFrameTime: () => createFrameTime,
-        addCreateFrameTime: (time) => {
-            createFrameTime += time;
-        },
     };
 };

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/register-mp3-encoder.d.ts

@@ -0,0 +1 @@
+export declare const ensureMp3EncoderRegistered: () => Promise<void>;

package/dist/render-media-on-web.js

@@ -92,7 +92,6 @@ const internalRenderMediaOnWeb = async ({ composition, inputProps, delayRenderTi
             scope: delayRenderScope,
             signal,
             apiName: 'renderMediaOnWeb',
-            internalState,
         });
         if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
             throw new Error('renderMediaOnWeb() was cancelled');
@@ -150,12 +149,10 @@ const internalRenderMediaOnWeb = async ({ composition, inputProps, delayRenderTi
                 scope: delayRenderScope,
                 signal,
                 apiName: 'renderMediaOnWeb',
-                internalState,
             });
             if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
                 throw new Error('renderMediaOnWeb() was cancelled');
             }
-            const createFrameStart = performance.now();
             const imageData = await createFrame({
                 div,
                 width: resolved.width,
@@ -163,7 +160,6 @@ const internalRenderMediaOnWeb = async ({ composition, inputProps, delayRenderTi
                 logLevel,
                 internalState,
             });
-            internalState.addCreateFrameTime(performance.now() - createFrameStart);
             if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
                 throw new Error('renderMediaOnWeb() was cancelled');
             }
@@ -203,14 +199,12 @@ const internalRenderMediaOnWeb = async ({ composition, inputProps, delayRenderTi
                     expectedTimestamp: timestamp,
                 });
             }
-            const addSampleStart = performance.now();
             await Promise.all([
                 addVideoSampleAndCloseFrame(frameToEncode, videoSampleSource),
                 audio && audioSampleSource
                     ? addAudioSample(audio, audioSampleSource)
                     : Promise.resolve(),
             ]);
-            internalState.addAddSampleTime(performance.now() - addSampleStart);
             progress.encodedFrames++;
             throttledOnProgress === null || throttledOnProgress === void 0 ? void 0 : throttledOnProgress({ ...progress });
             if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
@@ -222,7 +216,6 @@ const internalRenderMediaOnWeb = async ({ composition, inputProps, delayRenderTi
         videoSampleSource.close();
         audioSampleSource === null || audioSampleSource === void 0 ? void 0 : audioSampleSource.close();
         await output.finalize();
-        Internals.Log.verbose({ logLevel, tag: 'web-renderer' }, `Render timings: waitForReady=${internalState.getWaitForReadyTime().toFixed(2)}ms, createFrame=${internalState.getCreateFrameTime().toFixed(2)}ms, addSample=${internalState.getAddSampleTime().toFixed(2)}ms`);
         const mimeType = getMimeType(container);
         if (webFsTarget) {
             sendUsageEvent({

package/dist/render-still-on-web.js

@@ -51,7 +51,6 @@ async function internalRenderStillOnWeb({ frame, delayRenderTimeoutInMillisecond
             scope: delayRenderScope,
             signal,
             apiName: 'renderStillOnWeb',
-            internalState: null,
         });
         if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
             throw new Error('renderStillOnWeb() was cancelled');

package/dist/wait-for-ready.js

@@ -1,6 +1,6 @@
 import { withResolvers } from './with-resolvers';
-export const waitForReady = ({ timeoutInMilliseconds, scope, signal, apiName, internalState, }) => {
-    const start = performance.now();
+export const waitForReady = ({ timeoutInMilliseconds, scope, signal, apiName, }) => {
+    const start = Date.now();
     const { promise, resolve, reject } = withResolvers();
     let cancelled = false;
     const check = () => {
@@ -9,24 +9,20 @@ export const waitForReady = ({ timeoutInMilliseconds, scope, signal, apiName, in
         }
         if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
             cancelled = true;
-            internalState === null || internalState === void 0 ? void 0 : internalState.addWaitForReadyTime(performance.now() - start);
             reject(new Error(`${apiName}() was cancelled`));
             return;
         }
         if (scope.remotion_renderReady === true) {
-            internalState === null || internalState === void 0 ? void 0 : internalState.addWaitForReadyTime(performance.now() - start);
             resolve();
             return;
         }
         if (scope.remotion_cancelledError !== undefined) {
             cancelled = true;
-            internalState === null || internalState === void 0 ? void 0 : internalState.addWaitForReadyTime(performance.now() - start);
             reject(scope.remotion_cancelledError);
             return;
         }
-        if (performance.now() - start > timeoutInMilliseconds + 3000) {
+        if (Date.now() - start > timeoutInMilliseconds + 3000) {
             cancelled = true;
-            internalState === null || internalState === void 0 ? void 0 : internalState.addWaitForReadyTime(performance.now() - start);
             reject(new Error(Object.values(scope.remotion_delayRenderTimeouts)
                 .map((d) => d.label)
                 .join(', ')));

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.430",
+	"version": "4.0.431",
 	"main": "dist/index.js",
 	"type": "module",
 	"scripts": {
@@ -19,16 +19,16 @@
 	"author": "Remotion <jonny@remotion.dev>",
 	"license": "UNLICENSED",
 	"dependencies": {
-		"@remotion/licensing": "4.0.429",
-		"remotion": "4.0.429",
+		"@remotion/licensing": "4.0.431",
+		"remotion": "4.0.431",
 		"mediabunny": "1.35.1"
 	},
 	"devDependencies": {
 		"@react-three/fiber": "9.2.0",
-		"@remotion/eslint-config-internal": "4.0.429",
-		"@remotion/player": "4.0.429",
-		"@remotion/media": "4.0.429",
-		"@remotion/three": "4.0.429",
+		"@remotion/eslint-config-internal": "4.0.431",
+		"@remotion/player": "4.0.431",
+		"@remotion/media": "4.0.431",
+		"@remotion/three": "4.0.431",
 		"@types/three": "0.170.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1",
 		"@vitejs/plugin-react": "4.3.4",