@remotion/web-renderer 4.0.428 → 4.0.430

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

@@ -0,0 +1,110 @@
+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';
+import { waitForReady } from './wait-for-ready';
+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,
+        signal: signal !== null && signal !== void 0 ? signal : new AbortController().signal,
+        defaultProps: (_b = composition.defaultProps) !== null && _b !== void 0 ? _b : {},
+        inputProps: inputProps !== null && inputProps !== void 0 ? inputProps : {},
+        compositionId: composition.id,
+        compositionDurationInFrames: (_c = composition.durationInFrames) !== null && _c !== void 0 ? _c : null,
+        compositionFps: (_d = composition.fps) !== null && _d !== void 0 ? _d : null,
+        compositionHeight: (_e = composition.height) !== null && _e !== void 0 ? _e : null,
+        compositionWidth: (_f = composition.width) !== null && _f !== void 0 ? _f : null,
+    });
+    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,
+        delayRenderTimeoutInMilliseconds,
+        logLevel,
+        resolvedProps: resolved.props,
+        id: resolved.id,
+        mediaCacheSizeInBytes,
+        audioEnabled: false,
+        Component: composition.component,
+        videoEnabled: true,
+        durationInFrames: resolved.durationInFrames,
+        fps: resolved.fps,
+        schema: schema !== null && schema !== void 0 ? schema : null,
+        initialFrame: frame,
+        defaultCodec: resolved.defaultCodec,
+        defaultOutName: resolved.defaultOutName,
+    });
+    const artifactsHandler = handleArtifacts();
+    try {
+        if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
+            throw new Error('renderStillOnWeb() was cancelled');
+        }
+        await waitForReady({
+            timeoutInMilliseconds: delayRenderTimeoutInMilliseconds,
+            scope: delayRenderScope,
+            signal,
+            apiName: 'renderStillOnWeb',
+            internalState: null,
+        });
+        if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
+            throw new Error('renderStillOnWeb() was cancelled');
+        }
+        const imageData = await takeScreenshot({
+            div,
+            width: resolved.width,
+            height: resolved.height,
+            imageFormat,
+            logLevel,
+            internalState,
+        });
+        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 { blob: imageData, internalState };
+    }
+    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 {
+        internalState.cleanup();
+        cleanupScaffold();
+    }
+}
+export const renderStillOnWeb = (options) => {
+    onlyOneRenderAtATimeQueue.ref = onlyOneRenderAtATimeQueue.ref
+        .catch(() => Promise.resolve())
+        .then(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h;
+        return internalRenderStillOnWeb({
+            ...options,
+            delayRenderTimeoutInMilliseconds: (_a = options.delayRenderTimeoutInMilliseconds) !== null && _a !== void 0 ? _a : 30000,
+            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.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({
+        licenseKey: licenseKey === 'free-license' ? null : licenseKey,
+        event: 'webcodec-conversion',
+        host,
+        succeeded,
+    });
+};

package/dist/take-screenshot.js

@@ -0,0 +1,30 @@
+import { compose } from './compose';
+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,
+        logLevel,
+        parentRect: new DOMRect(0, 0, width, height),
+        internalState,
+        onlyBackgroundClip: false,
+    });
+    return canvas;
+};
+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}`,
+    });
+    return imageData;
+};

package/dist/throttle-progress.js

@@ -0,0 +1,43 @@
+const DEFAULT_THROTTLE_MS = 250;
+/**
+ * Creates a throttled version of a progress callback that ensures it's not called
+ * more frequently than the specified interval (default: 250ms)
+ */
+export const createThrottledProgressCallback = (callback, throttleMs = DEFAULT_THROTTLE_MS) => {
+    if (!callback) {
+        return null;
+    }
+    let lastCallTime = 0;
+    let pendingUpdate = null;
+    let timeoutId = null;
+    const throttled = (progress) => {
+        const now = Date.now();
+        const timeSinceLastCall = now - lastCallTime;
+        // Always store the latest progress
+        pendingUpdate = progress;
+        // If enough time has passed, call immediately
+        if (timeSinceLastCall >= throttleMs) {
+            lastCallTime = now;
+            callback(progress);
+            pendingUpdate = null;
+            // Clear any pending timeout
+            if (timeoutId !== null) {
+                clearTimeout(timeoutId);
+                timeoutId = null;
+            }
+        }
+        else if (timeoutId === null) {
+            // Schedule a call for when the throttle period expires
+            const remainingTime = throttleMs - timeSinceLastCall;
+            timeoutId = setTimeout(() => {
+                if (pendingUpdate !== null) {
+                    lastCallTime = Date.now();
+                    callback(pendingUpdate);
+                    pendingUpdate = null;
+                }
+                timeoutId = null;
+            }, remainingTime);
+        }
+    };
+    return throttled;
+};

package/dist/tree-walker-cleanup-after-children.js

@@ -0,0 +1,33 @@
+export const createTreeWalkerCleanupAfterChildren = (treeWalker) => {
+    const cleanupAfterChildren = [];
+    const checkCleanUpAtBeginningOfIteration = () => {
+        for (let i = 0; i < cleanupAfterChildren.length;) {
+            const cleanup = cleanupAfterChildren[i];
+            if (!(cleanup.element === treeWalker.currentNode ||
+                cleanup.element.contains(treeWalker.currentNode))) {
+                cleanup.cleanupFn();
+                cleanupAfterChildren.splice(i, 1);
+            }
+            else {
+                i++;
+            }
+        }
+    };
+    const addCleanup = (element, cleanupFn) => {
+        // Last registered must be cleaned up first
+        cleanupAfterChildren.unshift({
+            element,
+            cleanupFn,
+        });
+    };
+    const cleanupInTheEndOfTheIteration = () => {
+        for (const cleanup of cleanupAfterChildren) {
+            cleanup.cleanupFn();
+        }
+    };
+    return {
+        checkCleanUpAtBeginningOfIteration,
+        addCleanup,
+        cleanupInTheEndOfTheIteration,
+    };
+};

package/dist/update-time.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useImperativeHandle, useState } from 'react';
+import { flushSync } from 'react-dom';
+import { Internals } from 'remotion';
+export const UpdateTime = ({ children, audioEnabled, videoEnabled, logLevel, compId, initialFrame, timeUpdater, }) => {
+    const [frame, setFrame] = useState(initialFrame);
+    useImperativeHandle(timeUpdater, () => ({
+        update: (f) => {
+            flushSync(() => {
+                setFrame(f);
+            });
+        },
+    }));
+    return (_jsx(Internals.RemotionRootContexts, { audioEnabled: audioEnabled, videoEnabled: videoEnabled, logLevel: logLevel, numberOfAudioTags: 0, audioLatencyHint: "interactive", frameState: {
+            [compId]: frame,
+        }, children: children }));
+};

package/dist/validate-video-frame.js

@@ -0,0 +1,34 @@
+/**
+ * Validates and processes a VideoFrame returned from an onFrame callback
+ */
+/**
+ * Validates that a VideoFrame returned from onFrame callback matches expected dimensions and timestamp
+ * If validation fails, closes both frames and throws an error
+ */
+export const validateVideoFrame = ({ originalFrame, returnedFrame, expectedWidth, expectedHeight, expectedTimestamp, }) => {
+    // Validate that the returned frame is actually a VideoFrame
+    if (!(returnedFrame instanceof VideoFrame)) {
+        originalFrame.close();
+        throw new Error('onFrame callback must return a VideoFrame or void');
+    }
+    // Check if it's the same frame (no validation needed)
+    if (returnedFrame === originalFrame) {
+        return returnedFrame;
+    }
+    // Validate dimensions
+    if (returnedFrame.displayWidth !== expectedWidth ||
+        returnedFrame.displayHeight !== expectedHeight) {
+        originalFrame.close();
+        returnedFrame.close();
+        throw new Error(`VideoFrame dimensions mismatch: expected ${expectedWidth}x${expectedHeight}, got ${returnedFrame.displayWidth}x${returnedFrame.displayHeight}`);
+    }
+    // Validate timestamp
+    if (returnedFrame.timestamp !== expectedTimestamp) {
+        originalFrame.close();
+        returnedFrame.close();
+        throw new Error(`VideoFrame timestamp mismatch: expected ${expectedTimestamp}, got ${returnedFrame.timestamp}`);
+    }
+    // If we got a different frame but it's valid, close the original and use the new one
+    originalFrame.close();
+    return returnedFrame;
+};

package/dist/wait-for-ready.js

@@ -0,0 +1,39 @@
+import { withResolvers } from './with-resolvers';
+export const waitForReady = ({ timeoutInMilliseconds, scope, signal, apiName, internalState, }) => {
+    const start = performance.now();
+    const { promise, resolve, reject } = withResolvers();
+    let cancelled = false;
+    const check = () => {
+        if (cancelled) {
+            return;
+        }
+        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) {
+            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(', ')));
+            return;
+        }
+        requestAnimationFrame(check);
+    };
+    requestAnimationFrame(check);
+    return promise;
+};

package/dist/walk-tree.js

@@ -0,0 +1,14 @@
+export function skipToNextNonDescendant(treeWalker) {
+    // Try to go to next sibling
+    if (treeWalker.nextSibling()) {
+        return true;
+    }
+    // No sibling, go up to parent and try to find ancestor's sibling
+    while (treeWalker.parentNode()) {
+        if (treeWalker.nextSibling()) {
+            return true;
+        }
+    }
+    // No more nodes
+    return false;
+}

package/dist/web-fs-target.js

@@ -0,0 +1,41 @@
+let sessionId = null;
+const getPrefix = () => {
+    if (!sessionId) {
+        sessionId = crypto.randomUUID();
+    }
+    return `__remotion_render:${sessionId}:`;
+};
+export const cleanupStaleOpfsFiles = async () => {
+    try {
+        const root = await navigator.storage.getDirectory();
+        for await (const [name] of root.entries()) {
+            if (name.startsWith('__remotion_render:') &&
+                !name.startsWith(getPrefix())) {
+                await root.removeEntry(name);
+            }
+        }
+    }
+    catch (_a) {
+        // Ignore, could already be closed
+    }
+};
+export const createWebFsTarget = async () => {
+    const directoryHandle = await navigator.storage.getDirectory();
+    const filename = `${getPrefix()}${crypto.randomUUID()}`;
+    const fileHandle = await directoryHandle.getFileHandle(filename, {
+        create: true,
+    });
+    const writable = await fileHandle.createWritable();
+    const stream = new WritableStream({
+        async write(chunk) {
+            await writable.seek(chunk.position);
+            await writable.write(chunk);
+        },
+    });
+    const getBlob = async () => {
+        const handle = await directoryHandle.getFileHandle(filename);
+        return handle.getFile();
+    };
+    const close = () => writable.close();
+    return { stream, getBlob, close };
+};

package/dist/with-resolvers.js

@@ -0,0 +1,9 @@
+export const withResolvers = function () {
+    let resolve;
+    let reject;
+    const promise = new Promise((res, rej) => {
+        resolve = res;
+        reject = rej;
+    });
+    return { promise, resolve: resolve, reject: reject };
+};

package/package.json

@@ -3,11 +3,12 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/web-renderer"
 	},
 	"name": "@remotion/web-renderer",
-	"version": "4.0.428",
+	"version": "4.0.430",
 	"main": "dist/index.js",
 	"type": "module",
 	"scripts": {
-		"formatting": "prettier src --check",
+		"formatting": "oxfmt src --check",
+		"format": "oxfmt src",
 		"lint": "eslint src",
 		"make": "tsgo && bun --env-file=../.env.bundle bundle.ts",
 		"watch": "tsgo -w",
@@ -18,16 +19,16 @@
 	"author": "Remotion <jonny@remotion.dev>",
 	"license": "UNLICENSED",
 	"dependencies": {
-		"@remotion/licensing": "4.0.428",
-		"remotion": "4.0.428",
-		"mediabunny": "1.34.4"
+		"@remotion/licensing": "4.0.429",
+		"remotion": "4.0.429",
+		"mediabunny": "1.35.1"
 	},
 	"devDependencies": {
 		"@react-three/fiber": "9.2.0",
-		"@remotion/eslint-config-internal": "4.0.428",
-		"@remotion/player": "4.0.428",
-		"@remotion/media": "4.0.428",
-		"@remotion/three": "4.0.428",
+		"@remotion/eslint-config-internal": "4.0.429",
+		"@remotion/player": "4.0.429",
+		"@remotion/media": "4.0.429",
+		"@remotion/three": "4.0.429",
 		"@types/three": "0.170.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1",
 		"@vitejs/plugin-react": "4.3.4",