@remotion/web-renderer 4.0.375 → 4.0.377

package/dist/take-screenshot.d.ts

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

package/dist/take-screenshot.js

@@ -0,0 +1,18 @@
+import { compose } from './compose';
+import { findCapturableElements } from './find-capturable-elements';
+export const createFrame = async ({ div, width, height, }) => {
+    const composables = findCapturableElements(div);
+    const composed = await compose({
+        composables,
+        width,
+        height,
+    });
+    return composed;
+};
+export const takeScreenshot = async ({ div, width, height, imageFormat, }) => {
+    const frame = await createFrame({ div, width, height });
+    const imageData = await frame.convertToBlob({
+        type: `image/${imageFormat}`,
+    });
+    return imageData;
+};

package/dist/throttle-progress.d.ts

@@ -0,0 +1,6 @@
+import type { RenderMediaOnWebProgressCallback } from './render-media-on-web';
+/**
+ * Creates a throttled version of a progress callback that ensures it's not called
+ * more frequently than the specified interval (default: 250ms)
+ */
+export declare const createThrottledProgressCallback: (callback: RenderMediaOnWebProgressCallback | null, throttleMs?: number) => RenderMediaOnWebProgressCallback | null;

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/update-time.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { LogLevel } from 'remotion';
+export type TimeUpdaterRef = {
+    update: (frame: number) => void;
+};
+export declare const UpdateTime: React.FC<{
+    readonly children: React.ReactNode;
+    readonly audioEnabled: boolean;
+    readonly videoEnabled: boolean;
+    readonly logLevel: LogLevel;
+    readonly compId: string;
+    readonly initialFrame: number;
+    readonly timeUpdater: React.RefObject<TimeUpdaterRef | null>;
+}>;

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.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Validates and processes a VideoFrame returned from an onFrame callback
+ */
+export type OnFrameCallback = (frame: VideoFrame) => VideoFrame | Promise<VideoFrame>;
+export type ValidateVideoFrameOptions = {
+    originalFrame: VideoFrame;
+    returnedFrame: VideoFrame;
+    expectedWidth: number;
+    expectedHeight: number;
+    expectedTimestamp: number;
+};
+/**
+ * Validates that a VideoFrame returned from onFrame callback matches expected dimensions and timestamp
+ * If validation fails, closes both frames and throws an error
+ */
+export declare const validateVideoFrame: ({ originalFrame, returnedFrame, expectedWidth, expectedHeight, expectedTimestamp, }: ValidateVideoFrameOptions) => VideoFrame;

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.d.ts

@@ -1,2 +1,7 @@
 import type { _InternalTypes } from 'remotion';
-export declare const waitForReady: (timeoutInMilliseconds: number, scope: _InternalTypes["DelayRenderScope"]) => Promise<void>;
+export declare const waitForReady: ({ timeoutInMilliseconds, scope, signal, apiName, }: {
+    timeoutInMilliseconds: number;
+    scope: _InternalTypes["DelayRenderScope"];
+    signal: AbortSignal | null;
+    apiName: "renderMediaOnWeb" | "renderStillOnWeb";
+}) => Promise<void>;

package/dist/wait-for-ready.js

@@ -1,31 +1,35 @@
 import { withResolvers } from './with-resolvers';
-export const waitForReady = (timeoutInMilliseconds, scope) => {
-    if (scope.remotion_renderReady === true) {
-        return Promise.resolve();
-    }
+export const waitForReady = ({ timeoutInMilliseconds, scope, signal, apiName, }) => {
     const start = Date.now();
     const { promise, resolve, reject } = withResolvers();
-    const interval = setInterval(() => {
+    let cancelled = false;
+    const check = () => {
+        if (cancelled) {
+            return;
+        }
+        if (signal === null || signal === void 0 ? void 0 : signal.aborted) {
+            cancelled = true;
+            reject(new Error(`${apiName}() was cancelled`));
+            return;
+        }
         if (scope.remotion_renderReady === true) {
-            // Wait for useEffects() to apply
-            requestAnimationFrame(() => {
-                resolve();
-            });
-            clearInterval(interval);
+            resolve();
             return;
         }
         if (scope.remotion_cancelledError !== undefined) {
+            cancelled = true;
             reject(scope.remotion_cancelledError);
-            clearInterval(interval);
             return;
         }
         if (Date.now() - start > timeoutInMilliseconds + 3000) {
-            // TODO: Error message should be just as good
+            cancelled = true;
             reject(new Error(Object.values(scope.remotion_delayRenderTimeouts)
                 .map((d) => d.label)
                 .join(', ')));
-            clearInterval(interval);
+            return;
         }
-    }, 50);
+        requestAnimationFrame(check);
+    };
+    requestAnimationFrame(check);
     return promise;
 };

package/package.json

@@ -3,30 +3,35 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/web-renderer"
 	},
 	"name": "@remotion/web-renderer",
-	"version": "4.0.375",
+	"version": "4.0.377",
 	"main": "dist/index.js",
 	"sideEffects": false,
 	"scripts": {
 		"formatting": "prettier --experimental-cli src --check",
 		"lint": "eslint src",
 		"make": "tsc -d && bun --env-file=../.env.bundle bundle.ts",
-		"test": "node src/test/execute.mjs"
+		"testwebrenderer": "vitest src/test --browser --run",
+		"studio": "cd ../example && bunx remotion studio ../web-renderer/src/test/studio.ts"
 	},
 	"author": "Remotion <jonny@remotion.dev>",
 	"license": "UNLICENSED",
 	"dependencies": {
-		"remotion": "4.0.375"
+		"remotion": "4.0.377",
+		"mediabunny": "1.24.5"
 	},
 	"devDependencies": {
-		"@remotion/eslint-config-internal": "4.0.375",
-		"@remotion/player": "4.0.375",
+		"@remotion/eslint-config-internal": "4.0.377",
+		"@remotion/player": "4.0.377",
+		"@remotion/media": "4.0.377",
 		"@vitejs/plugin-react": "^5.1.0",
-		"@vitest/browser-webdriverio": "4.0.7",
+		"@vitest/browser-playwright": "4.0.9",
+		"playwright": "1.55.1",
 		"eslint": "9.19.0",
 		"react": "19.0.0",
 		"react-dom": "19.0.0",
-		"vitest": "4.0.7",
-		"vitest-browser-react": "^2.0.2"
+		"vitest": "4.0.9",
+		"vitest-browser-react": "^2.0.2",
+		"zod": "3.22.3"
 	},
 	"peerDependencies": {
 		"react": ">=18.0.0",

package/dist/error-boundary.d.ts

@@ -1,16 +0,0 @@
-import React from 'react';
-export declare class ErrorBoundary extends React.Component<{
-    onError: (error: Error) => void;
-    children: React.ReactNode;
-}, {
-    hasError: Error | null;
-}> {
-    state: {
-        hasError: null;
-    };
-    static getDerivedStateFromError(): {
-        hasError: boolean;
-    };
-    componentDidCatch(error: Error): void;
-    render(): React.ReactNode;
-}

package/dist/error-boundary.js

@@ -1,20 +0,0 @@
-import React from 'react';
-export class ErrorBoundary extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = { hasError: null };
-    }
-    static getDerivedStateFromError() {
-        // Update state so the next render will show the fallback UI.
-        return { hasError: true };
-    }
-    componentDidCatch(error) {
-        this.props.onError(error);
-    }
-    render() {
-        if (this.state.hasError) {
-            return null;
-        }
-        return this.props.children;
-    }
-}

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

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

package/dist/find-canvas-elements.js

@@ -1,12 +0,0 @@
-export const findCanvasElements = (element) => {
-    const canvasElements = element.querySelectorAll('canvas');
-    const composables = [];
-    Array.from(canvasElements).forEach((canvasElement) => {
-        const canvas = canvasElement;
-        composables.push({
-            type: 'canvas',
-            element: canvas,
-        });
-    });
-    return composables;
-};

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

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

package/dist/find-svg-elements.js

@@ -1,12 +0,0 @@
-export const findSvgElements = (element) => {
-    const svgElements = element.querySelectorAll('svg');
-    const composables = [];
-    Array.from(svgElements).forEach((svgElement) => {
-        const svg = svgElement;
-        composables.push({
-            type: 'svg',
-            element: svg,
-        });
-    });
-    return composables;
-};