@remotion/renderer 3.3.35 → 3.3.37

package/dist/client.d.ts

@@ -1,3 +1,10 @@
 export declare const BrowserSafeApis: {
-    getFileExtensionFromCodec: (codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv" | "gif", type: "chunk" | "final") => "mp3" | "aac" | "wav" | "gif" | "mp4" | "mkv" | "mov" | "webm";
+    getFileExtensionFromCodec: (codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv" | "gif") => "mp3" | "aac" | "wav" | "gif" | "mp4" | "mkv" | "mov" | "webm";
+    validCodecs: readonly ["h264", "h265", "vp8", "vp9", "mp3", "aac", "wav", "prores", "h264-mkv", "gif"];
+    getDefaultCrfForCodec: (codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv" | "gif") => number;
+    getValidCrfRanges: (codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv" | "gif") => [number, number];
+    isAudioCodec: (codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv" | "gif" | undefined) => boolean;
+    proResProfileOptions: readonly ["4444-xq", "4444", "hq", "standard", "light", "proxy"];
+    validPixelFormats: readonly ["yuv420p", "yuva420p", "yuv422p", "yuv444p", "yuv420p10le", "yuv422p10le", "yuv444p10le", "yuva444p10le"];
+    DEFAULT_PIXEL_FORMAT: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";
 };

package/dist/client.js

@@ -1,7 +1,19 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BrowserSafeApis = void 0;
+const codec_1 = require("./codec");
+const crf_1 = require("./crf");
 const get_extension_from_codec_1 = require("./get-extension-from-codec");
+const is_audio_codec_1 = require("./is-audio-codec");
+const pixel_format_1 = require("./pixel-format");
+const prores_profile_1 = require("./prores-profile");
 exports.BrowserSafeApis = {
     getFileExtensionFromCodec: get_extension_from_codec_1.getFileExtensionFromCodec,
+    validCodecs: codec_1.validCodecs,
+    getDefaultCrfForCodec: crf_1.getDefaultCrfForCodec,
+    getValidCrfRanges: crf_1.getValidCrfRanges,
+    isAudioCodec: is_audio_codec_1.isAudioCodec,
+    proResProfileOptions: prores_profile_1.proResProfileOptions,
+    validPixelFormats: pixel_format_1.validPixelFormats,
+    DEFAULT_PIXEL_FORMAT: pixel_format_1.DEFAULT_PIXEL_FORMAT,
 };

package/dist/compositor/compositor.d.ts

@@ -0,0 +1,12 @@
+import type { CompositorCommand, CompositorInitiatePayload } from './payloads';
+export declare type Compositor = {
+    finishCommands: () => void;
+    executeCommand: (payload: Omit<CompositorCommand, 'nonce'>) => Promise<void>;
+    waitForDone: () => Promise<void>;
+};
+export declare const spawnCompositorOrReuse: ({ initiatePayload, renderId, }: {
+    initiatePayload: CompositorInitiatePayload;
+    renderId: string;
+}) => Compositor;
+export declare const releaseCompositorWithId: (renderId: string) => void;
+export declare const waitForCompositorWithIdToQuit: (renderId: string) => Promise<void>;

package/dist/compositor/compositor.js

@@ -0,0 +1,111 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.waitForCompositorWithIdToQuit = exports.releaseCompositorWithId = exports.spawnCompositorOrReuse = void 0;
+const child_process_1 = require("child_process");
+const truthy_1 = require("../truthy");
+const get_executable_path_1 = require("./get-executable-path");
+const compositorMap = {};
+const spawnCompositorOrReuse = ({ initiatePayload, renderId, }) => {
+    if (!compositorMap[renderId]) {
+        compositorMap[renderId] = startCompositor(initiatePayload);
+    }
+    return compositorMap[renderId];
+};
+exports.spawnCompositorOrReuse = spawnCompositorOrReuse;
+const releaseCompositorWithId = (renderId) => {
+    if (compositorMap[renderId]) {
+        compositorMap[renderId].finishCommands();
+    }
+};
+exports.releaseCompositorWithId = releaseCompositorWithId;
+const waitForCompositorWithIdToQuit = (renderId) => {
+    if (!compositorMap[renderId]) {
+        throw new TypeError('No compositor with that id');
+    }
+    return compositorMap[renderId].waitForDone();
+};
+exports.waitForCompositorWithIdToQuit = waitForCompositorWithIdToQuit;
+const startCompositor = (compositorInitiatePayload) => {
+    const bin = (0, get_executable_path_1.getExecutablePath)();
+    const child = (0, child_process_1.spawn)(`${bin}`, [JSON.stringify(compositorInitiatePayload)]);
+    const stderrChunks = [];
+    let stdoutListeners = [];
+    let stderrListeners = [];
+    child.stderr.on('data', (d) => {
+        stderrChunks.push(d);
+        const str = d.toString('utf-8');
+        stderrListeners.forEach((s) => s(str));
+    });
+    child.stdout.on('data', (d) => {
+        const str = d.toString('utf-8');
+        stdoutListeners.forEach((s) => s(str));
+    });
+    let nonce = 0;
+    return {
+        waitForDone: () => {
+            return new Promise((resolve, reject) => {
+                child.on('exit', (code) => {
+                    if (code === 0) {
+                        resolve();
+                    }
+                    else {
+                        reject(Buffer.concat(stderrChunks).toString('utf-8'));
+                    }
+                });
+            });
+        },
+        finishCommands: () => {
+            child.stdin.write('EOF\n');
+        },
+        executeCommand: (payload) => {
+            const actualPayload = {
+                ...payload,
+                nonce,
+            };
+            nonce++;
+            return new Promise((resolve, reject) => {
+                child.stdin.write(JSON.stringify(actualPayload) + '\n');
+                const onStderr = (message) => {
+                    let parsed = null;
+                    try {
+                        const content = JSON.parse(message);
+                        if (content.msg_type === 'error') {
+                            parsed = content;
+                        }
+                    }
+                    catch (error) {
+                        // TODO: Obviously bad, does not handle panics
+                        console.log('Rust debug err:', message);
+                    }
+                    if (parsed) {
+                        const err = new Error(parsed.error);
+                        err.stack = parsed.error + '\n' + parsed.backtrace;
+                        reject(err);
+                        stdoutListeners = stdoutListeners.filter((s) => s !== onStdout);
+                        stderrListeners = stderrListeners.filter((s) => s !== onStderr);
+                    }
+                };
+                const onStdout = (str) => {
+                    const lineSplit = str.split('\n');
+                    for (const line of lineSplit.filter(truthy_1.truthy)) {
+                        let parsed = null;
+                        try {
+                            const p = JSON.parse(line);
+                            if (p.msg_type === 'finish') {
+                                parsed = p;
+                            }
+                        }
+                        catch (e) { }
+                        if (parsed && parsed.nonce === actualPayload.nonce) {
+                            resolve();
+                            stdoutListeners = stdoutListeners.filter((s) => s !== onStdout);
+                            stderrListeners = stderrListeners.filter((s) => s !== onStderr);
+                        }
+                    }
+                };
+                stdoutListeners.push(onStdout);
+                stderrListeners.push(onStderr);
+            });
+        },
+    };
+};

package/dist/determine-vcodec-ffmepg-flags.d.ts

@@ -0,0 +1,2 @@
+import type { SpecialVCodecForTransparency } from './assets/download-map';
+export declare const determineVcodecFfmepgFlags: (vcodecFlag: SpecialVCodecForTransparency) => string[];

package/dist/determine-vcodec-ffmepg-flags.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.determineVcodecFfmepgFlags = void 0;
+const truthy_1 = require("./truthy");
+const determineVcodecFfmepgFlags = (vcodecFlag) => {
+    return [
+        vcodecFlag === 'vp9' ? '-vcodec' : null,
+        vcodecFlag === 'vp9' ? 'libvpx-vp9' : null,
+        vcodecFlag === 'vp8' ? '-vcodec' : null,
+        vcodecFlag === 'vp8' ? 'libvpx' : null,
+    ].filter(truthy_1.truthy);
+};
+exports.determineVcodecFfmepgFlags = determineVcodecFfmepgFlags;

package/dist/get-compositions-from-bundle.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentType } from 'react';
+import type { TCompMetadata } from 'remotion';
+import type { GetCompositionsConfig } from './get-compositions';
+export declare const getCompositionsFromBundle: (bundle: string, options: GetCompositionsConfig) => {
+    compositions: TCompMetadata[];
+    root: ComponentType;
+};

package/dist/get-compositions-from-bundle.js

@@ -0,0 +1,55 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCompositionsFromBundle = void 0;
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const remotion_1 = require("remotion");
+const vm_1 = __importDefault(require("vm"));
+const is_serve_url_1 = require("./is-serve-url");
+const getCompositionsFromBundle = (bundle, options) => {
+    const bundleFile = path_1.default.join(bundle, 'bundle.js');
+    if ((0, is_serve_url_1.isServeUrl)(bundle)) {
+        throw new Error('Can only use getCompositionFromBundle from a local file');
+    }
+    const content = fs_1.default.readFileSync(bundleFile, 'utf-8');
+    // @ts-éxpect-error
+    process.env.REMOTION_SERVER_RENDERING = 'true';
+    const context = {
+        window: {
+            remotion_envVariables: options.envVariables,
+        },
+        clearTimeout: () => {
+            console.trace('clearTimeout() called inside a server-side bundle. This is not supported.');
+        },
+        setTimeout: () => {
+            console.trace('setTimeout() called inside a server-side bundle. This is not supported.');
+        },
+        process: {
+            env: {
+                REMOTION_SERVER_RENDERING: true,
+            },
+        },
+        require,
+        Buffer,
+        console,
+    };
+    const vmContext = vm_1.default.createContext(context);
+    // TODO: Set props and env
+    const code = content;
+    vm_1.default.runInContext(code, vmContext, {
+        filename: bundleFile,
+        breakOnSigint: true,
+    });
+    const theRoot = remotion_1.Internals.getRoot();
+    if (!theRoot) {
+        throw new Error('Did not call getRoot() in the bundle. Delaying the calling of getRoot() is not supported in server-side-rendering.');
+    }
+    const Comp = theRoot;
+    const comps = (0, remotion_1.getCompositionsFromMarkup)(Comp);
+    remotion_1.Internals.clearRoot();
+    return { compositions: comps, root: Comp };
+};
+exports.getCompositionsFromBundle = getCompositionsFromBundle;

package/dist/get-compositions-from-markup.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentType } from 'react';
+import type { TCompMetadata } from 'remotion';
+export declare const getCompositionsFromMarkup: (Comp: ComponentType) => TCompMetadata[];

package/dist/get-compositions-from-markup.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCompositionsFromMarkup = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const server_1 = require("react-dom/server");
+const getCompositionsFromMarkup = (Comp) => {
+    process.env.REMOTION_SERVER_RENDERING = 'true';
+    const str = (0, server_1.renderToString)((0, jsx_runtime_1.jsx)(Comp, {}));
+    const matches = str.matchAll(/<div>(.*?)<\/div>/g);
+    const metadata = [];
+    for (const match of matches) {
+        const json = JSON.parse(match[1]);
+        metadata.push(json);
+    }
+    return metadata;
+};
+exports.getCompositionsFromMarkup = getCompositionsFromMarkup;

package/dist/get-compositions-on-server.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentType } from 'react';
+import type { TCompMetadata } from 'remotion';
+export declare const getCompositionsFromMarkup: (Comp: ComponentType) => TCompMetadata[];

package/dist/get-compositions-on-server.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCompositionsFromMarkup = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const server_1 = require("react-dom/server");
+const getCompositionsFromMarkup = (Comp) => {
+    process.env.REMOTION_SERVER_RENDERING = 'true';
+    const str = (0, server_1.renderToString)((0, jsx_runtime_1.jsx)(Comp, {}));
+    console.log({ str }, (0, jsx_runtime_1.jsx)(Comp, {}));
+    const matches = str.matchAll(/<div>(.*?)<\/div>/g);
+    const metadata = [];
+    for (const match of matches) {
+        const json = JSON.parse(match[1]);
+        metadata.push(json);
+    }
+    return metadata;
+};
+exports.getCompositionsFromMarkup = getCompositionsFromMarkup;

package/dist/get-extension-from-codec.d.ts

@@ -1,2 +1,2 @@
 import type { Codec } from './codec';
-export declare const getFileExtensionFromCodec: (codec: Codec) => "mp3" | "aac" | "wav" | "gif" | "webm" | "mp4" | "mov" | "mkv";
+export declare const getFileExtensionFromCodec: (codec: Codec) => "mp3" | "aac" | "wav" | "gif" | "mp4" | "mkv" | "mov" | "webm";

package/dist/get-video-signals.d.ts

@@ -0,0 +1,2 @@
+import type { CompositorLayer } from './compositor/payloads';
+export declare const getNativeVideoSignals: (layers: CompositorLayer[]) => Record<string, Record<number, number>>;

package/dist/get-video-signals.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getNativeVideoSignals = void 0;
+const getNativeVideoSignals = (layers) => {
+    const videoSignals = layers
+        .filter((l) => {
+        return l.type === 'VideoFrame';
+    })
+        .map((l) => {
+        if (l.type !== 'VideoFrame') {
+            throw new Error('Expected VideoFrame');
+        }
+        return { frame: l.params.frame, src: l.params.src };
+    });
+    const map = {};
+    // Return a map for each video source and the number of times each frame is expected to be used
+    for (const { src, frame } of videoSignals) {
+        if (!map[src]) {
+            map[src] = {};
+        }
+        if (!map[src][frame]) {
+            map[src][frame] = 0;
+        }
+        map[src][frame]++;
+    }
+    return map;
+};
+exports.getNativeVideoSignals = getNativeVideoSignals;

package/dist/guess-extension-for-media.d.ts

@@ -2,4 +2,4 @@ export declare const guessExtensionForVideo: ({ src, remotionRoot, ffprobeBinary
     src: string;
     remotionRoot: string;
     ffprobeBinary: string | null;
-}) => Promise<"mp3" | "wav" | "webm" | "mp4">;
+}) => Promise<"mp3" | "wav" | "mp4" | "webm">;

package/dist/index.d.ts

@@ -60,7 +60,7 @@ export declare const RenderInternals: {
         scale: number;
         codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv" | "gif";
     }) => void;
-    getFileExtensionFromCodec: (codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv" | "gif") => "mp3" | "aac" | "wav" | "gif" | "webm" | "mp4" | "mov" | "mkv";
+    getFileExtensionFromCodec: (codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv" | "gif") => "mp3" | "aac" | "wav" | "gif" | "mp4" | "mkv" | "mov" | "webm";
     tmpDir: (str: string) => string;
     deleteDirectory: (directory: string) => Promise<void>;
     isServeUrl: (potentialUrl: string) => boolean;
@@ -117,8 +117,8 @@ export declare const RenderInternals: {
     validPixelFormats: readonly ["yuv420p", "yuva420p", "yuv422p", "yuv444p", "yuv420p10le", "yuv422p10le", "yuv444p10le", "yuva444p10le"];
     DEFAULT_BROWSER: import("./browser").Browser;
     validateFrameRange: (frameRange: import("./frame-range").FrameRange | null) => void;
-    DEFAULT_OPENGL_RENDERER: "angle" | "swangle" | "egl" | "swiftshader" | null;
-    validateOpenGlRenderer: (option: "angle" | "swangle" | "egl" | "swiftshader" | null) => "angle" | "swangle" | "egl" | "swiftshader" | null;
+    DEFAULT_OPENGL_RENDERER: "swangle" | "angle" | "egl" | "swiftshader" | null;
+    validateOpenGlRenderer: (option: "swangle" | "angle" | "egl" | "swiftshader" | null) => "swangle" | "angle" | "egl" | "swiftshader" | null;
     validImageFormats: readonly ["png", "jpeg", "none"];
     validCodecs: readonly ["h264", "h265", "vp8", "vp9", "mp3", "aac", "wav", "prores", "h264-mkv", "gif"];
     DEFAULT_PIXEL_FORMAT: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";
@@ -128,7 +128,7 @@ export declare const RenderInternals: {
     DEFAULT_CODEC: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv" | "gif";
     isAudioCodec: (codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv" | "gif" | undefined) => boolean;
     logLevels: readonly ["verbose", "info", "warn", "error"];
-    isEqualOrBelowLogLevel: (currentLevel: "error" | "verbose" | "info" | "warn", level: "error" | "verbose" | "info" | "warn") => boolean;
+    isEqualOrBelowLogLevel: (currentLevel: "verbose" | "error" | "info" | "warn", level: "verbose" | "error" | "info" | "warn") => boolean;
     isValidLogLevel: (level: string) => boolean;
     perf: typeof perf;
     makeDownloadMap: () => import("./assets/download-map").DownloadMap;

package/dist/lock-port-selection.d.ts

@@ -0,0 +1,2 @@
+export declare const lockPortSelection: () => void;
+export declare const unlockPortSelection: () => void;

package/dist/lock-port-selection.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.unlockPortSelection = exports.lockPortSelection = void 0;
+const locks = [];
+const waitForPortSelection = () => { };
+const lockPortSelection = () => {
+    locks.push();
+};
+exports.lockPortSelection = lockPortSelection;
+const unlockPortSelection = () => { };
+exports.unlockPortSelection = unlockPortSelection;

package/dist/make-comp-manager-context.d.ts

@@ -0,0 +1,2 @@
+import type { CompositionManagerContext, TCompMetadata } from 'remotion';
+export declare const makeCompManagerContext: (composition: TCompMetadata) => CompositionManagerContext;

package/dist/make-comp-manager-context.js

@@ -0,0 +1,45 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeCompManagerContext = void 0;
+const makeCompManagerContext = (composition) => {
+    const memo = {
+        assets: [],
+        compositions: [composition],
+        currentComposition: composition.id,
+        currentCompositionMetadata: composition,
+        folders: [],
+        registerAsset: () => {
+            throw new Error('Not implemented');
+        },
+        registerComposition: () => {
+            throw new Error('Not implemented');
+        },
+        registerFolder: () => {
+            throw new Error('Not implemented');
+        },
+        setCurrentComposition: () => {
+            throw new Error('Not implemented');
+        },
+        registerSequence() {
+            throw new Error('Not implemented');
+        },
+        sequences: [],
+        setCurrentCompositionMetadata: () => {
+            throw new Error('Not implemented');
+        },
+        unregisterAsset: () => {
+            throw new Error('Not implemented');
+        },
+        unregisterComposition: () => {
+            throw new Error('Not implemented');
+        },
+        unregisterFolder: () => {
+            throw new Error('Not implemented');
+        },
+        unregisterSequence: () => {
+            throw new Error('Not implemented');
+        },
+    };
+    return memo;
+};
+exports.makeCompManagerContext = makeCompManagerContext;

package/dist/make-timeline-context-value.d.ts

@@ -0,0 +1,2 @@
+import type { SmallTCompMetadata, TimelineContextValue } from 'remotion';
+export declare const makeTimelineContextValue: (composition: SmallTCompMetadata, frame: number) => TimelineContextValue;

package/dist/make-timeline-context-value.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeTimelineContextValue = void 0;
+const makeTimelineContextValue = (composition, frame) => {
+    const value = {
+        audioAndVideoTags: { current: [] },
+        rootId: composition.id,
+        playing: false,
+        playbackRate: 1,
+        imperativePlaying: {
+            current: false,
+        },
+        frame,
+        setPlaybackRate: () => {
+            throw new Error('Not implemented');
+        },
+    };
+    return value;
+};
+exports.makeTimelineContextValue = makeTimelineContextValue;

package/dist/render-on-server.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentType } from 'react';
+import type { TCompMetadata } from 'remotion';
+export declare const renderOnServer: (Comp: ComponentType, composition: TCompMetadata) => Promise<void>;

package/dist/render-on-server.js

@@ -0,0 +1,90 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderOnServer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const execa_1 = __importDefault(require("execa"));
+const path_1 = __importDefault(require("path"));
+const server_1 = require("react-dom/server");
+const remotion_1 = require("remotion");
+const download_map_1 = require("./assets/download-map");
+const compose_1 = require("./compositor/compose");
+const compositor_1 = require("./compositor/compositor");
+const get_frame_padded_index_1 = require("./get-frame-padded-index");
+const make_comp_manager_context_1 = require("./make-comp-manager-context");
+const pool_1 = require("./pool");
+const renderOnServer = async (Comp, composition) => {
+    console.time('total');
+    console.time('frames');
+    process.env.REMOTION_SERVER_RENDERING = 'true';
+    // eslint-disable-next-line react/jsx-no-constructed-context-values
+    const memo = (0, make_comp_manager_context_1.makeCompManagerContext)(composition);
+    const pool = new pool_1.Pool(new Array(4).fill(true).map((_, i) => i));
+    const downloadMap = (0, download_map_1.makeDownloadMap)();
+    const renderId = 'abc';
+    await Promise.all(new Array(composition.durationInFrames).fill(true).map(async (_, i) => {
+        const frame = await pool.acquire();
+        // eslint-disable-next-line react/jsx-no-constructed-context-values
+        const value = {
+            audioAndVideoTags: { current: [] },
+            rootId: composition.id,
+            playing: false,
+            playbackRate: 1,
+            imperativePlaying: {
+                current: false,
+            },
+            frame: i,
+            setPlaybackRate: () => {
+                throw new Error('Not implemented');
+            },
+        };
+        const svg = (0, server_1.renderToStaticMarkup)((0, jsx_runtime_1.jsx)(remotion_1.Internals.SelectCompositionMode, { layer: 0, id: composition.id, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.TimelineContext.Provider, { value: value, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.CompositionManager.Provider, { value: memo, children: (0, jsx_runtime_1.jsx)(Comp, {}) }) }) }));
+        const out = path_1.default.join(downloadMap.compositingDir, (0, get_frame_padded_index_1.getFrameOutputFileName)({
+            frame: i,
+            imageFormat: 'tiff',
+            index: i,
+            countType: 'from-zero',
+            lastFrame: composition.durationInFrames - 1,
+            totalFrames: composition.durationInFrames,
+        }));
+        await (0, compose_1.compose)({
+            height: composition.height,
+            width: composition.width,
+            downloadMap,
+            imageFormat: 'AddToH264',
+            layers: [
+                {
+                    type: 'SvgImage',
+                    params: {
+                        height: composition.height,
+                        width: composition.width,
+                        markup: svg,
+                        x: 0,
+                        y: 0,
+                    },
+                },
+            ],
+            output: out,
+            renderId,
+            compositorInitiatePayload: {
+                create_h264_queue: true,
+                duration_in_frames: 300,
+                fps: 30,
+                video_signals: {},
+                height: composition.height,
+                width: composition.width,
+            },
+        });
+        pool.release(frame);
+    }));
+    (0, compositor_1.releaseCompositorWithId)(renderId);
+    console.timeEnd('frames');
+    await (0, compositor_1.waitForCompositorWithIdToQuit)(renderId);
+    console.time('convert');
+    await (0, execa_1.default)('ffmpeg', ['-i', 'fade.h264', '-c', 'copy', 'fade.mp4', '-y']);
+    console.timeEnd('convert');
+    console.timeEnd('total');
+};
+exports.renderOnServer = renderOnServer;

package/dist/render-svg.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentType } from 'react';
+import type { TCompMetadata } from 'remotion';
+export declare const renderSvg: ({ composition, Comp, frame, layer, }: {
+    composition: TCompMetadata;
+    Comp: ComponentType;
+    frame: number;
+    layer: number;
+}) => string;

package/dist/render-svg.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderSvg = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const server_1 = require("react-dom/server");
+const remotion_1 = require("remotion");
+const make_comp_manager_context_1 = require("./make-comp-manager-context");
+const make_timeline_context_value_1 = require("./make-timeline-context-value");
+const renderSvg = ({ composition, Comp, frame, layer, }) => {
+    const svg = (0, server_1.renderToStaticMarkup)((0, jsx_runtime_1.jsx)(remotion_1.Internals.SelectCompositionMode, { layer: layer, id: composition.id, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.TimelineContext.Provider, { value: (0, make_timeline_context_value_1.makeTimelineContextValue)(composition, frame), children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.CompositionManager.Provider, { value: (0, make_comp_manager_context_1.makeCompManagerContext)(composition), children: (0, jsx_runtime_1.jsx)(Comp, {}) }) }) }));
+    return svg;
+};
+exports.renderSvg = renderSvg;

package/dist/render-video-layer.d.ts

@@ -0,0 +1,9 @@
+import type { ComponentType } from 'react';
+import type { TCompMetadata } from 'remotion';
+import type { NativeVideoLayerInfo } from 'remotion/src/video/NativeVideoForRendering';
+export declare const renderVideoLayer: ({ composition, Comp, frame, layer, }: {
+    composition: TCompMetadata;
+    Comp: ComponentType;
+    frame: number;
+    layer: number;
+}) => NativeVideoLayerInfo | null;

package/dist/render-video-layer.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderVideoLayer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const server_1 = require("react-dom/server");
+const remotion_1 = require("remotion");
+const make_comp_manager_context_1 = require("./make-comp-manager-context");
+const make_timeline_context_value_1 = require("./make-timeline-context-value");
+const renderVideoLayer = ({ composition, Comp, frame, layer, }) => {
+    process.env.REMOTION_SERVER_RENDERING = 'true';
+    const markup = (0, server_1.renderToStaticMarkup)((0, jsx_runtime_1.jsx)(remotion_1.Internals.SelectCompositionMode, { layer: layer, id: composition.id, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.TimelineContext.Provider, { value: (0, make_timeline_context_value_1.makeTimelineContextValue)(composition, frame), children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.CompositionManager.Provider, { value: (0, make_comp_manager_context_1.makeCompManagerContext)(composition), children: (0, jsx_runtime_1.jsx)(Comp, {}) }) }) }));
+    const matches = markup.matchAll(/<div>(.*?)<\/div>/g);
+    let parsed = null;
+    for (const match of matches) {
+        if (parsed) {
+            throw new Error('cannot have more than one video layer');
+        }
+        const json = JSON.parse(match[1]);
+        parsed = json;
+    }
+    return parsed;
+};
+exports.renderVideoLayer = renderVideoLayer;

package/dist/render-web-frame.d.ts

@@ -0,0 +1,74 @@
+/// <reference types="node" />
+import type { SmallTCompMetadata, TAsset } from 'remotion';
+import type { DownloadMap } from './assets/download-map';
+import type { BrowserExecutable } from './browser-executable';
+import type { BrowserLog } from './browser-log';
+import type { Page } from './browser/BrowserPage';
+import type { CompositorLayer } from './compositor/payloads';
+import type { CountType } from './get-frame-padded-index';
+import type { ServeUrl } from './legacy-webpack-config';
+import type { ChromiumOptions } from './open-browser';
+import type { Pool } from './pool';
+import type { BrowserReplacer } from './replace-browser';
+export declare const renderWebFrameAndRetryTargetClose: ({ frame, index, retriesLeft, attempt, actualConcurrency, browserReplacer, poolPromise, composition, downloadMap, imageFormat, onFrameBuffer, outputDir, stopState, countType, scale, quality, framesToRender, lastFrame, framesRendered, browserExecutable, chromiumOptions, dumpBrowserLogs, pagesArray, onBrowserLog, inputProps, envVariables, muted, proxyPort, realFrameRange, serveUrl, timeoutInMilliseconds, }: {
+    frame: number;
+    index: number;
+    retriesLeft: number;
+    attempt: number;
+    actualConcurrency: number;
+    browserReplacer: BrowserReplacer | null;
+    poolPromise: Promise<Pool<Page>>;
+    composition: SmallTCompMetadata;
+    downloadMap: DownloadMap;
+    imageFormat: 'png' | 'jpeg' | 'none';
+    onFrameBuffer: ((buffer: Buffer, frame: number) => void) | undefined;
+    outputDir: string | null;
+    stopState: {
+        isStopped: boolean;
+    };
+    countType: CountType;
+    scale: number;
+    quality: number | undefined;
+    framesToRender: number[];
+    lastFrame: number;
+    framesRendered: {
+        frames: number;
+    };
+    browserExecutable?: BrowserExecutable | undefined;
+    chromiumOptions?: ChromiumOptions | undefined;
+    dumpBrowserLogs?: boolean | undefined;
+    pagesArray: Page[];
+    onBrowserLog?: ((log: BrowserLog) => void) | undefined;
+    inputProps: unknown;
+    envVariables?: Record<string, string> | undefined;
+    muted: boolean;
+    proxyPort: number;
+    realFrameRange: [number, number];
+    serveUrl: ServeUrl;
+    timeoutInMilliseconds: number;
+}) => Promise<{
+    layer: CompositorLayer | null;
+    buffer: Buffer | null;
+    assets: TAsset[];
+}>;
+export declare const makePage: ({ browserReplacer, pagesArray, composition, scale, onBrowserLog, inputProps, envVariables, serveUrl, realFrameRange, timeoutInMilliseconds, proxyPort, imageFormat, muted, }: {
+    browserReplacer: BrowserReplacer;
+    pagesArray: Page[];
+    composition: SmallTCompMetadata;
+    scale?: number | undefined;
+    onBrowserLog?: ((log: BrowserLog) => void) | undefined;
+    inputProps: unknown;
+    envVariables?: Record<string, string> | undefined;
+    serveUrl: ServeUrl;
+    realFrameRange: [number, number];
+    timeoutInMilliseconds: number | undefined;
+    proxyPort: number;
+    imageFormat: 'png' | 'jpeg' | 'none';
+    muted: boolean;
+}) => Promise<Page>;
+export declare const makeBrowser: ({ dumpBrowserLogs, browserExecutable, chromiumOptions, scale, }: {
+    dumpBrowserLogs?: boolean | undefined;
+    browserExecutable?: BrowserExecutable | undefined;
+    chromiumOptions?: ChromiumOptions | undefined;
+    scale?: number | undefined;
+}) => Promise<import("./browser/Browser").Browser>;

package/dist/render-web-frame.js

@@ -0,0 +1,259 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeBrowser = exports.makePage = exports.renderWebFrameAndRetryTargetClose = void 0;
+const path_1 = __importDefault(require("path"));
+const browser_1 = require("./browser");
+const handle_javascript_exception_1 = require("./error-handling/handle-javascript-exception");
+const make_cancel_signal_1 = require("./make-cancel-signal");
+const open_browser_1 = require("./open-browser");
+const perf_1 = require("./perf");
+const puppeteer_evaluate_1 = require("./puppeteer-evaluate");
+const seek_to_frame_1 = require("./seek-to-frame");
+const set_props_and_env_1 = require("./set-props-and-env");
+const take_frame_and_compose_1 = require("./take-frame-and-compose");
+const renderFrameWithOptionToReject = async ({ frame, index, reject, width, height, poolPromise, stopState, imageFormat, downloadMap, scale, quality, }) => {
+    const pool = await poolPromise;
+    const freePage = await pool.acquire();
+    if (stopState.isStopped) {
+        reject(new Error('Render was stopped'));
+        throw new Error('stopped');
+    }
+    const errorCallbackOnFrame = (err) => {
+        reject(err);
+    };
+    const cleanupPageError = (0, handle_javascript_exception_1.handleJavascriptException)({
+        page: freePage,
+        onError: errorCallbackOnFrame,
+        frame,
+    });
+    freePage.on('error', errorCallbackOnFrame);
+    await (0, seek_to_frame_1.seekToFrame)({ frame, page: freePage });
+    const id = (0, perf_1.startPerfMeasure)('save');
+    const output = path_1.default.join(downloadMap.compositingDir, `preframe-${index}.${imageFormat}`);
+    const { buffer, collectedAssets, clipRegion } = await (0, take_frame_and_compose_1.takeFrame)({
+        frame,
+        freePage,
+        height,
+        imageFormat,
+        quality,
+        width,
+    });
+    const needsComposing = clipRegion === null
+        ? null
+        : {
+            tmpFile: path_1.default.join(downloadMap.compositingDir, `${frame}.${imageFormat}`),
+            finalOutfie: output !== null && output !== void 0 ? output : path_1.default.join(downloadMap.compositingDir, `${frame}-final.${imageFormat}`),
+            clipRegion: clipRegion,
+        };
+    const compositionLayer = !needsComposing || needsComposing.clipRegion === 'hide'
+        ? null
+        : {
+            type: imageFormat === 'jpeg'
+                ? 'JpgImage'
+                : 'PngImage',
+            params: {
+                height: needsComposing.clipRegion.height * scale,
+                width: needsComposing.clipRegion.width * scale,
+                src: needsComposing.tmpFile,
+                x: needsComposing.clipRegion.x * scale,
+                y: needsComposing.clipRegion.y * scale,
+            },
+        };
+    // TODO: Always return buffer
+    (0, perf_1.stopPerfMeasure)(id);
+    cleanupPageError();
+    freePage.off('error', errorCallbackOnFrame);
+    pool.release(freePage);
+    return { layer: compositionLayer, buffer, assets: collectedAssets };
+};
+const renderWebFrame = ({ frame, index, downloadMap, imageFormat, poolPromise, stopState, composition, scale, quality, }) => {
+    return new Promise((resolve, reject) => {
+        renderFrameWithOptionToReject({
+            frame,
+            index,
+            reject,
+            width: composition.width,
+            height: composition.height,
+            downloadMap,
+            imageFormat,
+            poolPromise,
+            stopState,
+            scale,
+            quality,
+        })
+            .then((res) => {
+            resolve(res);
+        })
+            .catch((err) => {
+            reject(err);
+        });
+    });
+};
+const renderWebFrameAndRetryTargetClose = async ({ frame, index, retriesLeft, attempt, actualConcurrency, browserReplacer, poolPromise, composition, downloadMap, imageFormat, onFrameBuffer, outputDir, stopState, countType, scale, quality, framesToRender, lastFrame, framesRendered, browserExecutable, chromiumOptions, dumpBrowserLogs, pagesArray, onBrowserLog, inputProps, envVariables, muted, proxyPort, realFrameRange, serveUrl, timeoutInMilliseconds, }) => {
+    var _a, _b;
+    try {
+        const returnval = await renderWebFrame({
+            frame,
+            index,
+            poolPromise,
+            composition,
+            downloadMap,
+            imageFormat,
+            stopState,
+            scale,
+            quality,
+        });
+        return returnval;
+    }
+    catch (err) {
+        if (!((_a = err === null || err === void 0 ? void 0 : err.message) === null || _a === void 0 ? void 0 : _a.includes('Target closed')) &&
+            !((_b = err === null || err === void 0 ? void 0 : err.message) === null || _b === void 0 ? void 0 : _b.includes('Session closed'))) {
+            throw err;
+        }
+        if ((0, make_cancel_signal_1.isUserCancelledRender)(err)) {
+            throw err;
+        }
+        if (retriesLeft === 0) {
+            console.warn(err, `The browser crashed ${attempt} times while rendering frame ${frame}. Not retrying anymore. Learn more about this error under https://www.remotion.dev/docs/target-closed`);
+            throw err;
+        }
+        console.warn(`The browser crashed while rendering frame ${frame}, retrying ${retriesLeft} more times. Learn more about this error under https://www.remotion.dev/docs/target-closed`);
+        if (!browserReplacer) {
+            throw new Error('Did not have browser replacer for web frame');
+        }
+        await browserReplacer.replaceBrowser(() => (0, exports.makeBrowser)({
+            browserExecutable,
+            chromiumOptions,
+            dumpBrowserLogs,
+            scale,
+        }), async () => {
+            const pages = new Array(actualConcurrency).fill(true).map(() => (0, exports.makePage)({
+                browserReplacer,
+                composition,
+                pagesArray,
+                onBrowserLog,
+                scale,
+                inputProps,
+                envVariables,
+                imageFormat,
+                muted,
+                proxyPort,
+                realFrameRange,
+                serveUrl,
+                timeoutInMilliseconds,
+            }));
+            const puppeteerPages = await Promise.all(pages);
+            const pool = await poolPromise;
+            for (const newPage of puppeteerPages) {
+                pool.release(newPage);
+            }
+        });
+        const fram = await (0, exports.renderWebFrameAndRetryTargetClose)({
+            frame,
+            index,
+            retriesLeft: retriesLeft - 1,
+            attempt: attempt + 1,
+            actualConcurrency,
+            browserReplacer,
+            composition,
+            downloadMap,
+            imageFormat,
+            onFrameBuffer,
+            outputDir,
+            poolPromise,
+            stopState,
+            countType,
+            scale,
+            quality,
+            framesToRender,
+            lastFrame,
+            framesRendered,
+            inputProps,
+            pagesArray,
+            browserExecutable,
+            chromiumOptions,
+            dumpBrowserLogs,
+            envVariables,
+            muted,
+            onBrowserLog,
+            proxyPort,
+            realFrameRange,
+            serveUrl,
+            timeoutInMilliseconds,
+        });
+        return fram;
+    }
+};
+exports.renderWebFrameAndRetryTargetClose = renderWebFrameAndRetryTargetClose;
+const makePage = async ({ browserReplacer, pagesArray, composition, scale, onBrowserLog, inputProps, envVariables, serveUrl, realFrameRange, timeoutInMilliseconds, proxyPort, imageFormat, muted, }) => {
+    if (!browserReplacer) {
+        throw new Error('canonot make page without browser replacer');
+    }
+    const page = await browserReplacer.getBrowser().newPage();
+    pagesArray.push(page);
+    await page.setViewport({
+        width: composition.width,
+        height: composition.height,
+        deviceScaleFactor: scale !== null && scale !== void 0 ? scale : 1,
+    });
+    const logCallback = (log) => {
+        onBrowserLog === null || onBrowserLog === void 0 ? void 0 : onBrowserLog({
+            stackTrace: log.stackTrace(),
+            text: log.text,
+            type: log.type,
+        });
+    };
+    if (onBrowserLog) {
+        page.on('console', logCallback);
+    }
+    const initialFrame = realFrameRange[0];
+    await (0, set_props_and_env_1.setPropsAndEnv)({
+        inputProps,
+        envVariables,
+        page,
+        serveUrl,
+        initialFrame,
+        timeoutInMilliseconds,
+        proxyPort,
+        retriesRemaining: 2,
+        audioEnabled: !muted,
+        videoEnabled: imageFormat !== 'none',
+    });
+    await (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
+        // eslint-disable-next-line max-params
+        pageFunction: (id, defaultProps, durationInFrames, fps, height, width) => {
+            window.setBundleMode({
+                type: 'composition',
+                compositionName: id,
+                compositionDefaultProps: defaultProps,
+                compositionDurationInFrames: durationInFrames,
+                compositionFps: fps,
+                compositionHeight: height,
+                compositionWidth: width,
+            });
+        },
+        args: [
+            composition.id,
+            composition.defaultProps,
+            composition.durationInFrames,
+            composition.fps,
+            composition.height,
+            composition.width,
+        ],
+        frame: null,
+        page,
+    });
+    page.off('console', logCallback);
+    return page;
+};
+exports.makePage = makePage;
+const makeBrowser = ({ dumpBrowserLogs, browserExecutable, chromiumOptions, scale, }) => (0, open_browser_1.openBrowser)(browser_1.DEFAULT_BROWSER, {
+    shouldDumpIo: dumpBrowserLogs,
+    browserExecutable,
+    chromiumOptions,
+    forceDeviceScaleFactor: scale !== null && scale !== void 0 ? scale : 1,
+});
+exports.makeBrowser = makeBrowser;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/renderer",
-	"version": "3.3.35",
+	"version": "3.3.37",
 	"description": "Renderer for Remotion",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -24,7 +24,7 @@
 	"dependencies": {
 		"execa": "5.1.1",
 		"extract-zip": "2.0.1",
-		"remotion": "3.3.35",
+		"remotion": "3.3.37",
 		"source-map": "^0.8.0-beta.0",
 		"ws": "8.7.0"
 	},
@@ -49,13 +49,13 @@
 		"vitest": "0.24.3"
 	},
 	"optionalDependencies": {
-		"@remotion/compositor-darwin-arm64": "3.3.35",
-		"@remotion/compositor-darwin-x64": "3.3.35",
-		"@remotion/compositor-linux-arm64-gnu": "3.3.35",
-		"@remotion/compositor-linux-arm64-musl": "3.3.35",
-		"@remotion/compositor-linux-x64-gnu": "3.3.35",
-		"@remotion/compositor-linux-x64-musl": "3.3.35",
-		"@remotion/compositor-win32-x64-msvc": "3.3.35"
+		"@remotion/compositor-darwin-arm64": "3.3.37",
+		"@remotion/compositor-darwin-x64": "3.3.37",
+		"@remotion/compositor-linux-arm64-gnu": "3.3.37",
+		"@remotion/compositor-linux-arm64-musl": "3.3.37",
+		"@remotion/compositor-linux-x64-gnu": "3.3.37",
+		"@remotion/compositor-linux-x64-musl": "3.3.37",
+		"@remotion/compositor-win32-x64-msvc": "3.3.37"
 	},
 	"keywords": [
 		"remotion",
@@ -67,5 +67,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "92344ca937e4c51b8484f79528e3c38d598f7053"
+	"gitHead": "ead6bdacc14a9953cae738159c49bf3daf09e9b0"
 }