@remotion/web-renderer 4.0.395 → 4.0.396

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

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

package/dist/find-canvas-elements.js

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

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

package/dist/find-capturable-elements.js

@@ -1,28 +1,26 @@
-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,
-            });
+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;
         }
-        else if (capturableElement.tagName.toLocaleLowerCase() === 'svg') {
-            const svg = capturableElement;
-            composables.push({
-                type: 'svg',
-                element: svg,
-            });
-        }
-        else if (capturableElement.tagName.toLocaleLowerCase() === 'img') {
-            const img = capturableElement;
+        return NodeFilter.FILTER_ACCEPT;
+    });
+    const composables = [];
+    while (treeWalker.nextNode()) {
+        const node = treeWalker.currentNode;
+        if (node instanceof HTMLCanvasElement ||
+            node instanceof SVGSVGElement ||
+            node instanceof HTMLImageElement) {
+            await drawElementToCanvas(node, context);
             composables.push({
-                type: 'img',
-                element: img,
+                type: 'element',
+                element: node,
             });
         }
-    });
+    }
     return composables;
 };

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

@@ -1,3 +1,5 @@
+import { parseOutlineOffset, parseOutlineWidth } from './drawing/draw-outline';
+import { skipToNextNonDescendant } from './walk-tree';
 export const getBiggestBoundingClientRect = (element) => {
     const treeWalker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT);
     let mostLeft = Infinity;
@@ -5,11 +7,19 @@ export const getBiggestBoundingClientRect = (element) => {
     let mostRight = -Infinity;
     let mostBottom = -Infinity;
     while (true) {
+        const computedStyle = getComputedStyle(treeWalker.currentNode);
+        const outlineWidth = parseOutlineWidth(computedStyle.outlineWidth);
+        const outlineOffset = parseOutlineOffset(computedStyle.outlineOffset);
         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);
+        mostLeft = Math.min(mostLeft, rect.left - outlineOffset - outlineWidth);
+        mostTop = Math.min(mostTop, rect.top - outlineOffset - outlineWidth);
+        mostRight = Math.max(mostRight, rect.right + outlineOffset + outlineWidth);
+        mostBottom = Math.max(mostBottom, rect.bottom + outlineOffset + outlineWidth);
+        if (computedStyle.overflow === 'hidden') {
+            if (!skipToNextNonDescendant(treeWalker)) {
+                break;
+            }
+        }
         if (!treeWalker.nextNode()) {
             break;
         }

package/dist/internal-state.d.ts

@@ -0,0 +1,9 @@
+export declare const makeInternalState: () => {
+    getDrawn3dPixels: () => number;
+    getDrawn3dTextures: () => number;
+    add3DTransform: ({ canvasWidth, canvasHeight, }: {
+        canvasWidth: number;
+        canvasHeight: number;
+    }) => void;
+};
+export type InternalState = ReturnType<typeof makeInternalState>;

package/dist/internal-state.js

@@ -0,0 +1,12 @@
+export const makeInternalState = () => {
+    let drawn3dPixels = 0;
+    let drawn3dTextures = 0;
+    return {
+        getDrawn3dPixels: () => drawn3dPixels,
+        getDrawn3dTextures: () => drawn3dTextures,
+        add3DTransform: ({ canvasWidth, canvasHeight, }) => {
+            drawn3dPixels += canvasWidth * canvasHeight;
+            drawn3dTextures++;
+        },
+    };
+};

package/dist/opacity.d.ts

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

package/dist/opacity.js

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

package/dist/render-media-on-web.d.ts

@@ -2,6 +2,7 @@ import { type LogLevel } from 'remotion';
 import type { AnyZodObject, z } from 'zod';
 import { type OnArtifact } from './artifact';
 import { type FrameRange } from './frame-range';
+import type { InternalState } from './internal-state';
 import type { WebRendererContainer, WebRendererQuality } from './mediabunny-mappings';
 import { type WebRendererCodec } from './mediabunny-mappings';
 import type { WebRendererOutputTarget } from './output-target';
@@ -25,6 +26,7 @@ export type RenderMediaOnWebProgress = {
 };
 export type RenderMediaOnWebResult = {
     getBlob: () => Promise<Blob>;
+    internalState: InternalState;
 };
 export type RenderMediaOnWebProgressCallback = (progress: RenderMediaOnWebProgress) => void;
 type OptionalRenderMediaOnWebOptions<Schema extends AnyZodObject> = {

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

@@ -7,6 +7,7 @@ import { canUseWebFsWriter } from './can-use-webfs-target';
 import { createScaffold } from './create-scaffold';
 import { getRealFrameRange } from './frame-range';
 import { getDefaultAudioEncodingConfig } from './get-audio-encoding-config';
+import { makeInternalState } from './internal-state';
 import { codecToMediabunnyCodec, containerToMediabunnyContainer, getDefaultVideoCodecForContainer, getMimeType, getQualityForWebRendererQuality, } from './mediabunny-mappings';
 import { onlyOneRenderAtATimeQueue } from './render-operations-queue';
 import { sendUsageEvent } from './send-telemetry-event';
@@ -69,6 +70,7 @@ const internalRenderMediaOnWeb = async ({ composition, inputProps, delayRenderTi
         defaultCodec: resolved.defaultCodec,
         defaultOutName: resolved.defaultOutName,
     });
+    const internalState = makeInternalState();
     const artifactsHandler = handleArtifacts();
     cleanupFns.push(() => {
         cleanupScaffold();
@@ -153,6 +155,7 @@ const internalRenderMediaOnWeb = async ({ composition, inputProps, delayRenderTi
                 width: resolved.width,
                 height: resolved.height,
                 logLevel,
+                internalState,
             });
             if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
                 throw new Error('renderMediaOnWeb() was cancelled');
@@ -213,6 +216,7 @@ const internalRenderMediaOnWeb = async ({ composition, inputProps, delayRenderTi
                 getBlob: () => {
                     return webFsTarget.getBlob();
                 },
+                internalState,
             };
         }
         if (!(target instanceof BufferTarget)) {
@@ -230,6 +234,7 @@ const internalRenderMediaOnWeb = async ({ composition, inputProps, delayRenderTi
                 }
                 return Promise.resolve(new Blob([target.buffer], { type: mimeType }));
             },
+            internalState,
         };
     }
     catch (err) {

package/dist/render-still-on-web.d.ts

@@ -1,6 +1,7 @@
 import { type LogLevel } from 'remotion';
 import type { AnyZodObject } from 'zod';
 import type { OnArtifact } from './artifact';
+import type { InternalState } from './internal-state';
 import type { CompositionCalculateMetadataOrExplicit } from './props-if-has-props';
 import type { InputPropsIfHasProps } from './render-media-on-web';
 export type RenderStillOnWebImageFormat = 'png' | 'jpeg' | 'webp';
@@ -20,5 +21,8 @@ type OptionalRenderStillOnWebOptions<Schema extends AnyZodObject> = {
     licenseKey: string | undefined;
 };
 export type RenderStillOnWebOptions<Schema extends AnyZodObject, Props extends Record<string, unknown>> = MandatoryRenderStillOnWebOptions<Schema, Props> & Partial<OptionalRenderStillOnWebOptions<Schema>> & InputPropsIfHasProps<Schema, Props>;
-export declare const renderStillOnWeb: <Schema extends AnyZodObject, Props extends Record<string, unknown>>(options: RenderStillOnWebOptions<Schema, Props>) => Promise<Blob>;
+export declare const renderStillOnWeb: <Schema extends AnyZodObject, Props extends Record<string, unknown>>(options: RenderStillOnWebOptions<Schema, Props>) => Promise<{
+    blob: Blob;
+    internalState: InternalState;
+}>;
 export {};

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

@@ -1,6 +1,7 @@
 import { Internals, } from 'remotion';
 import { handleArtifacts } from './artifact';
 import { createScaffold } from './create-scaffold';
+import { makeInternalState } from './internal-state';
 import { onlyOneRenderAtATimeQueue } from './render-operations-queue';
 import { sendUsageEvent } from './send-telemetry-event';
 import { takeScreenshot } from './take-screenshot';
@@ -21,6 +22,7 @@ async function internalRenderStillOnWeb({ frame, delayRenderTimeoutInMillisecond
     if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
         return Promise.reject(new Error('renderStillOnWeb() was cancelled'));
     }
+    const internalState = makeInternalState();
     const { delayRenderScope, div, cleanupScaffold, collectAssets } = await createScaffold({
         width: resolved.width,
         height: resolved.height,
@@ -59,6 +61,7 @@ async function internalRenderStillOnWeb({ frame, delayRenderTimeoutInMillisecond
             height: resolved.height,
             imageFormat,
             logLevel,
+            internalState,
         });
         const assets = collectAssets.current.collectAssets();
         if (onArtifact) {
@@ -69,7 +72,7 @@ async function internalRenderStillOnWeb({ frame, delayRenderTimeoutInMillisecond
             succeeded: true,
             apiName: 'renderStillOnWeb',
         });
-        return imageData;
+        return { blob: imageData, internalState };
     }
     catch (err) {
         sendUsageEvent({

package/dist/take-screenshot.d.ts

@@ -1,15 +1,18 @@
 import type { LogLevel } from 'remotion';
+import type { InternalState } from './internal-state';
 import type { RenderStillOnWebImageFormat } from './render-still-on-web';
-export declare const createFrame: ({ div, width, height, logLevel, }: {
+export declare const createFrame: ({ div, width, height, logLevel, internalState, }: {
     div: HTMLDivElement;
     width: number;
     height: number;
     logLevel: LogLevel;
+    internalState: InternalState;
 }) => Promise<OffscreenCanvas>;
-export declare const takeScreenshot: ({ div, width, height, imageFormat, logLevel, }: {
+export declare const takeScreenshot: ({ div, width, height, imageFormat, logLevel, internalState, }: {
     div: HTMLDivElement;
     width: number;
     height: number;
     imageFormat: RenderStillOnWebImageFormat;
     logLevel: LogLevel;
+    internalState: InternalState;
 }) => Promise<Blob>;

package/dist/take-screenshot.js

@@ -1,15 +1,27 @@
 import { compose } from './compose';
-export const createFrame = async ({ div, width, height, logLevel, }) => {
+export const createFrame = async ({ div, width, height, logLevel, internalState, }) => {
     const canvas = new OffscreenCanvas(width, height);
     const context = canvas.getContext('2d');
     if (!context) {
         throw new Error('Could not get context');
     }
-    await compose({ element: div, context, offsetLeft: 0, offsetTop: 0, logLevel });
+    await compose({
+        element: div,
+        context,
+        logLevel,
+        parentRect: new DOMRect(0, 0, width, height),
+        internalState,
+    });
     return canvas;
 };
-export const takeScreenshot = async ({ div, width, height, imageFormat, logLevel, }) => {
-    const frame = await createFrame({ div, width, height, logLevel });
+export const takeScreenshot = async ({ div, width, height, imageFormat, logLevel, internalState, }) => {
+    const frame = await createFrame({
+        div,
+        width,
+        height,
+        logLevel,
+        internalState,
+    });
     const imageData = await frame.convertToBlob({
         type: `image/${imageFormat}`,
     });

package/dist/transform.d.ts

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

package/dist/transform.js

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

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

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

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

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

@@ -1,13 +0,0 @@
-// 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;
-};