@remotion/web-renderer 4.0.393 → 4.0.395

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,18 @@
+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 (true) {
+        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);
+        if (!treeWalker.nextNode()) {
+            break;
+        }
+    }
+    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/render-media-on-web.d.ts

@@ -44,6 +44,7 @@ type OptionalRenderMediaOnWebOptions<Schema extends AnyZodObject> = {
     onArtifact: OnArtifact | null;
     onFrame: OnFrameCallback | null;
     outputTarget: WebRendererOutputTarget | null;
+    licenseKey: string | undefined;
 };
 export type RenderMediaOnWebOptions<Schema extends AnyZodObject, Props extends Record<string, unknown>> = MandatoryRenderMediaOnWebOptions<Schema, Props> & Partial<OptionalRenderMediaOnWebOptions<Schema>> & InputPropsIfHasProps<Schema, Props>;
 export declare const renderMediaOnWeb: <Schema extends AnyZodObject, Props extends Record<string, unknown>>(options: RenderMediaOnWebOptions<Schema, Props>) => Promise<RenderMediaOnWebResult>;

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

@@ -9,6 +9,7 @@ import { getRealFrameRange } from './frame-range';
 import { getDefaultAudioEncodingConfig } from './get-audio-encoding-config';
 import { codecToMediabunnyCodec, containerToMediabunnyContainer, getDefaultVideoCodecForContainer, getMimeType, getQualityForWebRendererQuality, } from './mediabunny-mappings';
 import { onlyOneRenderAtATimeQueue } from './render-operations-queue';
+import { sendUsageEvent } from './send-telemetry-event';
 import { createFrame } from './take-screenshot';
 import { createThrottledProgressCallback } from './throttle-progress';
 import { validateVideoFrame } from './validate-video-frame';
@@ -19,7 +20,7 @@ import { cleanupStaleOpfsFiles, createWebFsTarget } from './web-fs-target';
 // TODO: Metadata
 // TODO: Validating inputs
 // TODO: Apply defaultCodec
-const internalRenderMediaOnWeb = async ({ composition, inputProps, delayRenderTimeoutInMilliseconds, logLevel, mediaCacheSizeInBytes, schema, codec, container, signal, onProgress, hardwareAcceleration, keyframeIntervalInSeconds, videoBitrate, frameRange, transparent, onArtifact, onFrame, outputTarget: userDesiredOutputTarget, }) => {
+const internalRenderMediaOnWeb = async ({ composition, inputProps, delayRenderTimeoutInMilliseconds, logLevel, mediaCacheSizeInBytes, schema, codec, container, signal, onProgress, hardwareAcceleration, keyframeIntervalInSeconds, videoBitrate, frameRange, transparent, onArtifact, onFrame, outputTarget: userDesiredOutputTarget, licenseKey, }) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const outputTarget = userDesiredOutputTarget === null
         ? (await canUseWebFsWriter())
@@ -151,6 +152,7 @@ const internalRenderMediaOnWeb = async ({ composition, inputProps, delayRenderTi
                 div,
                 width: resolved.width,
                 height: resolved.height,
+                logLevel,
             });
             if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
                 throw new Error('renderMediaOnWeb() was cancelled');
@@ -216,6 +218,11 @@ const internalRenderMediaOnWeb = async ({ composition, inputProps, delayRenderTi
         if (!(target instanceof BufferTarget)) {
             throw new Error('Expected target to be a BufferTarget');
         }
+        sendUsageEvent({
+            licenseKey: licenseKey !== null && licenseKey !== void 0 ? licenseKey : null,
+            succeeded: true,
+            apiName: 'renderMediaOnWeb',
+        });
         return {
             getBlob: () => {
                 if (!target.buffer) {
@@ -225,6 +232,16 @@ const internalRenderMediaOnWeb = async ({ composition, inputProps, delayRenderTi
             },
         };
     }
+    catch (err) {
+        sendUsageEvent({
+            succeeded: false,
+            licenseKey: licenseKey !== null && licenseKey !== void 0 ? licenseKey : null,
+            apiName: 'renderMediaOnWeb',
+        }).catch((err2) => {
+            Internals.Log.error({ logLevel: 'error', tag: 'web-renderer' }, 'Failed to send usage event', err2);
+        });
+        throw err;
+    }
     finally {
         cleanupFns.forEach((fn) => fn());
     }
@@ -236,25 +253,26 @@ export const renderMediaOnWeb = (options) => {
     onlyOneRenderAtATimeQueue.ref = onlyOneRenderAtATimeQueue.ref
         .catch(() => Promise.resolve())
         .then(() => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r;
         return internalRenderMediaOnWeb({
             ...options,
             delayRenderTimeoutInMilliseconds: (_a = options.delayRenderTimeoutInMilliseconds) !== null && _a !== void 0 ? _a : 30000,
-            logLevel: (_b = options.logLevel) !== null && _b !== void 0 ? _b : 'info',
-            schema: (_c = options.schema) !== null && _c !== void 0 ? _c : undefined,
-            mediaCacheSizeInBytes: (_d = options.mediaCacheSizeInBytes) !== null && _d !== void 0 ? _d : null,
+            logLevel: (_c = (_b = options.logLevel) !== null && _b !== void 0 ? _b : window.remotion_logLevel) !== null && _c !== void 0 ? _c : 'info',
+            schema: (_d = options.schema) !== null && _d !== void 0 ? _d : undefined,
+            mediaCacheSizeInBytes: (_e = options.mediaCacheSizeInBytes) !== null && _e !== void 0 ? _e : null,
             codec,
             container,
-            signal: (_e = options.signal) !== null && _e !== void 0 ? _e : null,
-            onProgress: (_f = options.onProgress) !== null && _f !== void 0 ? _f : null,
-            hardwareAcceleration: (_g = options.hardwareAcceleration) !== null && _g !== void 0 ? _g : 'no-preference',
-            keyframeIntervalInSeconds: (_h = options.keyframeIntervalInSeconds) !== null && _h !== void 0 ? _h : 5,
-            videoBitrate: (_j = options.videoBitrate) !== null && _j !== void 0 ? _j : 'medium',
-            frameRange: (_k = options.frameRange) !== null && _k !== void 0 ? _k : null,
-            transparent: (_l = options.transparent) !== null && _l !== void 0 ? _l : false,
-            onArtifact: (_m = options.onArtifact) !== null && _m !== void 0 ? _m : null,
-            onFrame: (_o = options.onFrame) !== null && _o !== void 0 ? _o : null,
-            outputTarget: (_p = options.outputTarget) !== null && _p !== void 0 ? _p : null,
+            signal: (_f = options.signal) !== null && _f !== void 0 ? _f : null,
+            onProgress: (_g = options.onProgress) !== null && _g !== void 0 ? _g : null,
+            hardwareAcceleration: (_h = options.hardwareAcceleration) !== null && _h !== void 0 ? _h : 'no-preference',
+            keyframeIntervalInSeconds: (_j = options.keyframeIntervalInSeconds) !== null && _j !== void 0 ? _j : 5,
+            videoBitrate: (_k = options.videoBitrate) !== null && _k !== void 0 ? _k : 'medium',
+            frameRange: (_l = options.frameRange) !== null && _l !== void 0 ? _l : null,
+            transparent: (_m = options.transparent) !== null && _m !== void 0 ? _m : false,
+            onArtifact: (_o = options.onArtifact) !== null && _o !== void 0 ? _o : null,
+            onFrame: (_p = options.onFrame) !== null && _p !== void 0 ? _p : null,
+            outputTarget: (_q = options.outputTarget) !== null && _q !== void 0 ? _q : null,
+            licenseKey: (_r = options.licenseKey) !== null && _r !== void 0 ? _r : undefined,
         });
     });
     return onlyOneRenderAtATimeQueue.ref;

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

@@ -17,6 +17,7 @@ type OptionalRenderStillOnWebOptions<Schema extends AnyZodObject> = {
     mediaCacheSizeInBytes: number | null;
     signal: AbortSignal | null;
     onArtifact: OnArtifact | null;
+    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>;

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

@@ -2,9 +2,10 @@ import { Internals, } from 'remotion';
 import { handleArtifacts } from './artifact';
 import { createScaffold } from './create-scaffold';
 import { onlyOneRenderAtATimeQueue } from './render-operations-queue';
+import { sendUsageEvent } from './send-telemetry-event';
 import { takeScreenshot } from './take-screenshot';
 import { waitForReady } from './wait-for-ready';
-async function internalRenderStillOnWeb({ frame, delayRenderTimeoutInMilliseconds, logLevel, inputProps, schema, imageFormat, mediaCacheSizeInBytes, composition, signal, onArtifact, }) {
+async function internalRenderStillOnWeb({ frame, delayRenderTimeoutInMilliseconds, logLevel, inputProps, schema, imageFormat, mediaCacheSizeInBytes, composition, signal, onArtifact, licenseKey, }) {
     var _a, _b, _c, _d, _e, _f;
     const resolved = await Internals.resolveVideoConfig({
         calculateMetadata: (_a = composition.calculateMetadata) !== null && _a !== void 0 ? _a : null,
@@ -57,13 +58,29 @@ async function internalRenderStillOnWeb({ frame, delayRenderTimeoutInMillisecond
             width: resolved.width,
             height: resolved.height,
             imageFormat,
+            logLevel,
         });
         const assets = collectAssets.current.collectAssets();
         if (onArtifact) {
             await artifactsHandler.handle({ imageData, frame, assets, onArtifact });
         }
+        sendUsageEvent({
+            licenseKey: licenseKey !== null && licenseKey !== void 0 ? licenseKey : null,
+            succeeded: true,
+            apiName: 'renderStillOnWeb',
+        });
         return imageData;
     }
+    catch (err) {
+        sendUsageEvent({
+            succeeded: false,
+            licenseKey: licenseKey !== null && licenseKey !== void 0 ? licenseKey : null,
+            apiName: 'renderStillOnWeb',
+        }).catch((err2) => {
+            Internals.Log.error({ logLevel: 'error', tag: 'web-renderer' }, 'Failed to send usage event', err2);
+        });
+        throw err;
+    }
     finally {
         cleanupScaffold();
     }
@@ -72,15 +89,16 @@ export const renderStillOnWeb = (options) => {
     onlyOneRenderAtATimeQueue.ref = onlyOneRenderAtATimeQueue.ref
         .catch(() => Promise.resolve())
         .then(() => {
-        var _a, _b, _c, _d, _e, _f;
+        var _a, _b, _c, _d, _e, _f, _g, _h;
         return internalRenderStillOnWeb({
             ...options,
             delayRenderTimeoutInMilliseconds: (_a = options.delayRenderTimeoutInMilliseconds) !== null && _a !== void 0 ? _a : 30000,
-            logLevel: (_b = options.logLevel) !== null && _b !== void 0 ? _b : 'info',
-            schema: (_c = options.schema) !== null && _c !== void 0 ? _c : undefined,
-            mediaCacheSizeInBytes: (_d = options.mediaCacheSizeInBytes) !== null && _d !== void 0 ? _d : null,
-            signal: (_e = options.signal) !== null && _e !== void 0 ? _e : null,
-            onArtifact: (_f = options.onArtifact) !== null && _f !== void 0 ? _f : null,
+            logLevel: (_c = (_b = options.logLevel) !== null && _b !== void 0 ? _b : window.remotion_logLevel) !== null && _c !== void 0 ? _c : 'info',
+            schema: (_d = options.schema) !== null && _d !== void 0 ? _d : undefined,
+            mediaCacheSizeInBytes: (_e = options.mediaCacheSizeInBytes) !== null && _e !== void 0 ? _e : null,
+            signal: (_f = options.signal) !== null && _f !== void 0 ? _f : null,
+            onArtifact: (_g = options.onArtifact) !== null && _g !== void 0 ? _g : null,
+            licenseKey: (_h = options.licenseKey) !== null && _h !== void 0 ? _h : undefined,
         });
     });
     return onlyOneRenderAtATimeQueue.ref;

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 === 'free-license' ? null : licenseKey,
+        event: 'webcodec-conversion',
+        host,
+        succeeded,
+    });
+};

package/dist/take-screenshot.d.ts

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

package/dist/take-screenshot.js

@@ -1,15 +1,15 @@
 import { compose } from './compose';
-export const createFrame = async ({ div, width, height, }) => {
+export const createFrame = async ({ div, width, height, logLevel, }) => {
     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 });
+    await compose({ element: div, context, offsetLeft: 0, offsetTop: 0, logLevel });
     return canvas;
 };
-export const takeScreenshot = async ({ div, width, height, imageFormat, }) => {
-    const frame = await createFrame({ div, width, height });
+export const takeScreenshot = async ({ div, width, height, imageFormat, logLevel, }) => {
+    const frame = await createFrame({ div, width, height, logLevel });
     const imageData = await frame.convertToBlob({
         type: `image/${imageFormat}`,
     });

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