@remotion/renderer 3.3.19 → 3.3.26

package/README.md

@@ -0,0 +1,47 @@
+# Rust development
+
+To participate in the development of the Rust parts of Remotion, you need to do additional steps. If you don't want to change the Rust code, you don't have to set anything up.
+
+## Setup
+
+These are instructions for macOS. Contributions for other platforms are appreciated.
+
+First, install Cargo, if you don't have it, or upgrade to a version that supports `edition-2021`:
+
+```
+curl https://sh.rustup.rs -sSf | sh
+```
+
+Second, install components that allow for cross-compilation:
+
+```sh
+sh install_platforms.sh
+```
+
+Third, install linkers for cross compilation:
+
+```sh
+brew install MaterializeInc/crosstools/x86_64-unknown-linux-gnu
+brew install MaterializeInc/crosstools/aarch64-unknown-linux-gnu
+brew install messense/macos-cross-toolchains/x86_64-unknown-linux-musl
+brew install messense/macos-cross-toolchains/aarch64-unknown-linux-musl
+brew install mingw-w64
+```
+
+> This will take a few minutes.
+
+## Building
+
+To build the Rust parts for your operating system, run:
+
+```
+node build.mjs
+```
+
+To build the Rust binaries for all supported platforms, run:
+
+```
+node build.mjs --all
+```
+
+The resulting artifacts should be checked into Git.

package/dist/assets/download-map.d.ts

@@ -53,6 +53,10 @@ export declare type DownloadMap = {
     audioPreprocessing: string;
     stitchFrames: string;
     assetDir: string;
+    compositingDir: string;
+    compositorCache: {
+        [key: string]: string;
+    };
 };
 export declare type RenderAssetInfo = {
     assets: TAsset[][];

package/dist/assets/download-map.js

@@ -62,12 +62,16 @@ const makeDownloadMap = () => {
         audioMixing: makeAndReturn(dir, 'remotion-audio-mixing'),
         audioPreprocessing: makeAndReturn(dir, 'remotion-audio-preprocessing'),
         stitchFrames: makeAndReturn(dir, 'remotion-stitch-temp-dir'),
+        compositingDir: makeAndReturn(dir, 'remotion-compositing-temp-dir'),
+        compositorCache: {},
     };
 };
 exports.makeDownloadMap = makeDownloadMap;
 const cleanDownloadMap = async (downloadMap) => {
     await (0, delete_directory_1.deleteDirectory)(downloadMap.downloadDir);
     await (0, delete_directory_1.deleteDirectory)(downloadMap.complexFilter);
+    await (0, delete_directory_1.deleteDirectory)(downloadMap.compositingDir);
+    // Assets dir must be last since the others are contained
     await (0, delete_directory_1.deleteDirectory)(downloadMap.assetDir);
 };
 exports.cleanDownloadMap = cleanDownloadMap;

package/dist/compositor/compose.d.ts

@@ -0,0 +1,13 @@
+import type { DownloadMap } from '../assets/download-map';
+import type { CompositorImageFormat, Layer } from './payloads';
+declare type CompositorInput = {
+    height: number;
+    width: number;
+    layers: Layer[];
+    imageFormat: CompositorImageFormat;
+};
+export declare const compose: ({ height, width, layers, output, downloadMap, imageFormat, }: CompositorInput & {
+    downloadMap: DownloadMap;
+    output: string;
+}) => Promise<void>;
+export {};

package/dist/compositor/compose.js

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.compose = void 0;
+const child_process_1 = require("child_process");
+const crypto_1 = require("crypto");
+const promises_1 = require("fs/promises");
+const get_executable_path_1 = require("./get-executable-path");
+const getCompositorHash = ({ ...input }) => {
+    return (0, crypto_1.createHash)('sha256').update(JSON.stringify(input)).digest('base64');
+};
+const compose = async ({ height, width, layers, output, downloadMap, imageFormat, }) => {
+    const bin = (0, get_executable_path_1.getExecutablePath)();
+    const hash = getCompositorHash({ height, width, layers, imageFormat });
+    if (downloadMap.compositorCache[hash]) {
+        await (0, promises_1.copyFile)(downloadMap.compositorCache[hash], output);
+        return;
+    }
+    const payload = {
+        v: 1,
+        height,
+        width,
+        layers,
+        output,
+        output_format: imageFormat,
+    };
+    await new Promise((resolve, reject) => {
+        const child = (0, child_process_1.spawn)(bin);
+        child.stdin.write(JSON.stringify(payload));
+        child.stdin.end();
+        const stderrChunks = [];
+        child.stderr.on('data', (d) => stderrChunks.push(d));
+        child.on('close', (code) => {
+            if (code === 0) {
+                resolve();
+            }
+            else {
+                const message = Buffer.concat(stderrChunks).toString('utf-8');
+                const parsed = JSON.parse(message);
+                const err = new Error(parsed.error);
+                err.stack = parsed.error + '\n' + parsed.backtrace;
+                reject(err);
+            }
+        });
+    });
+    downloadMap.compositorCache[hash] = output;
+};
+exports.compose = compose;

package/dist/compositor/compositor.d.ts

@@ -0,0 +1,9 @@
+import type { CliInput } from './payloads';
+export declare type Compositor = {
+    finishCommands: () => void;
+    executeCommand: (payload: Omit<CliInput, 'nonce'>) => Promise<void>;
+    waitForDone: () => Promise<void>;
+};
+export declare const spawnCompositorOrReuse: (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,114 @@
+"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 = (renderId) => {
+    if (!compositorMap[renderId]) {
+        compositorMap[renderId] = startCompositor();
+    }
+    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 = () => {
+    const bin = (0, get_executable_path_1.getExecutablePath)();
+    const child = (0, child_process_1.spawn)(bin);
+    const _stderrChunks = [];
+    const stdoutChunks = [];
+    child.stderr.on('data', (d) => {
+        console.log(d.toString('utf-8'));
+        _stderrChunks.push(d);
+    });
+    child.stdout.on('data', (d) => {
+        console.log(d.toString('utf-8'));
+        stdoutChunks.push(d);
+    });
+    let nonce = 0;
+    return {
+        waitForDone: () => {
+            return new Promise((resolve, reject) => {
+                child.on('exit', (code) => {
+                    console.log({ 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 stderrChunks = [];
+                const onStderr = (d) => {
+                    stderrChunks.push(d);
+                    const message = Buffer.concat(stderrChunks).toString('utf-8');
+                    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);
+                        child.stderr.off('data', onStderr);
+                        child.stdout.off('data', onStdout);
+                    }
+                };
+                const onStdout = (d) => {
+                    const str = d.toString('utf-8');
+                    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();
+                            child.stderr.off('data', onStderr);
+                            child.stdout.off('data', onStdout);
+                        }
+                    }
+                };
+                child.stderr.on('data', onStderr);
+                child.stdout.on('data', onStdout);
+            });
+        },
+    };
+};

package/dist/compositor/get-executable-path.d.ts

@@ -0,0 +1 @@
+export declare const getExecutablePath: () => any;

package/dist/compositor/get-executable-path.js

@@ -0,0 +1,47 @@
+"use strict";
+// Adapted from @swc/core package
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getExecutablePath = void 0;
+function isMusl() {
+    // @ts-expect-error no types
+    const { glibcVersionRuntime } = process.report.getReport().header;
+    return !glibcVersionRuntime;
+}
+const getExecutablePath = () => {
+    switch (process.platform) {
+        case 'win32':
+            switch (process.arch) {
+                case 'x64':
+                    return require('@remotion/compositor-win32-x64-msvc').binaryPath;
+                default:
+                    throw new Error(`Unsupported architecture on Windows: ${process.arch}`);
+            }
+        case 'darwin':
+            switch (process.arch) {
+                case 'x64':
+                    return require('@remotion/compositor-darwin-x64').binaryPath;
+                case 'arm64':
+                    return require('@remotion/compositor-darwin-arm64').binaryPath;
+                default:
+                    throw new Error(`Unsupported architecture on macOS: ${process.arch}`);
+            }
+        case 'linux':
+            switch (process.arch) {
+                case 'x64':
+                    if (isMusl()) {
+                        return require('@remotion/compositor-linux-x64-musl').binaryPath;
+                    }
+                    return require('@remotion/compositor-linux-x64-gnu').binaryPath;
+                case 'arm64':
+                    if (isMusl()) {
+                        return require('@remotion/compositor-linux-arm64-musl').binaryPath;
+                    }
+                    return require('@remotion/compositor-linux-arm64-gnu').binaryPath;
+                default:
+                    throw new Error(`Unsupported architecture on Linux: ${process.arch}`);
+            }
+        default:
+            throw new Error(`Unsupported OS: ${process.platform}, architecture: ${process.arch}`);
+    }
+};
+exports.getExecutablePath = getExecutablePath;

package/dist/compositor/payloads.d.ts

@@ -0,0 +1,41 @@
+export declare type Layer = {
+    type: 'PngImage';
+    params: {
+        src: string;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+} | {
+    type: 'JpgImage';
+    params: {
+        src: string;
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+} | {
+    type: 'Solid';
+    params: {
+        fill: [number, number, number, number];
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+    };
+};
+export declare type CompositorImageFormat = 'Png' | 'Jpeg';
+export declare type CliInput = {
+    v: number;
+    output: string;
+    width: number;
+    height: number;
+    layers: Layer[];
+    output_format: CompositorImageFormat;
+};
+export declare type ErrorPayload = {
+    error: string;
+    backtrace: string;
+};

package/dist/compositor/payloads.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/extract-frame-from-video.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 import type { OffthreadVideoImageFormat } from 'remotion';
 import type { DownloadMap } from './assets/download-map';
 import type { FfmpegExecutable } from './ffmpeg-executable';

package/dist/ffmpeg-flags.js

@@ -32,7 +32,9 @@ const randomFfmpegRuntimeId = String(Math.random()).replace('0.', '');
 const ffmpegInNodeModules = (remotionRoot, binary) => {
     const folderName = getFfmpegFolderName(remotionRoot);
     if (!fs_1.default.existsSync(folderName)) {
-        fs_1.default.mkdirSync(folderName);
+        fs_1.default.mkdirSync(folderName, {
+            recursive: true,
+        });
     }
     // Check if a version of FFMPEG is already installed.
     // To qualify, it must have the expected file size

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCompositionsOnServer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const server_1 = require("react-dom/server");
+const getCompositionsOnServer = (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.getCompositionsOnServer = getCompositionsOnServer;

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

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

package/dist/get-frame-of-video-slow.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 import type { OffthreadVideoImageFormat } from 'remotion';
 import type { SpecialVCodecForTransparency } from './assets/download-map';
 import type { FfmpegExecutable } from './ffmpeg-executable';
@@ -8,7 +7,10 @@ export declare const getFrameOfVideoSlow: ({ src, duration, ffmpegExecutable, im
     duration: number;
     imageFormat: OffthreadVideoImageFormat;
     specialVCodecForTransparency: SpecialVCodecForTransparency;
-    needsResize: [number, number] | null;
+    needsResize: [
+        number,
+        number
+    ] | null;
     offset: number;
     fps: number | null;
     remotionRoot: string;

package/dist/get-frame-padded-index.d.ts

@@ -2,7 +2,7 @@ export declare type CountType = 'from-zero' | 'actual-frames';
 export declare const getFrameOutputFileName: ({ index, frame, imageFormat, countType, lastFrame, totalFrames, }: {
     index: number;
     frame: number;
-    imageFormat: 'png' | 'jpeg';
+    imageFormat: 'png' | 'jpeg' | 'none';
     countType: CountType;
     lastFrame: number;
     totalFrames: number;

package/dist/get-frame-padded-index.js

@@ -10,13 +10,14 @@ const padIndex = ({ num, filePadLength, }) => {
 };
 const getFrameOutputFileName = ({ index, frame, imageFormat, countType, lastFrame, totalFrames, }) => {
     const filePadLength = (0, exports.getFilePadLength)({ lastFrame, countType, totalFrames });
+    const prefix = 'element';
     if (countType === 'actual-frames') {
         const paddedIndex = padIndex({ filePadLength, num: frame });
-        return `element-${paddedIndex}.${imageFormat}`;
+        return `${prefix}-${paddedIndex}.${imageFormat}`;
     }
     if (countType === 'from-zero') {
         const paddedIndex = padIndex({ filePadLength, num: index });
-        return `element-${paddedIndex}.${imageFormat}`;
+        return `${prefix}-${paddedIndex}.${imageFormat}`;
     }
     throw new TypeError('Unknown count type');
 };

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

@@ -61,7 +61,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", type: "chunk" | "final") => "mp3" | "aac" | "wav" | "gif" | "webm" | "mp4" | "mov" | "mkv";
+    getFileExtensionFromCodec: (codec: "h264" | "h265" | "vp8" | "vp9" | "mp3" | "aac" | "wav" | "prores" | "h264-mkv" | "gif", type: "chunk" | "final") => "mp3" | "aac" | "wav" | "gif" | "mp4" | "mkv" | "mov" | "webm";
     tmpDir: (str: string) => string;
     deleteDirectory: (directory: string) => Promise<void>;
     isServeUrl: (potentialUrl: string) => boolean;
@@ -115,8 +115,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";
@@ -126,7 +126,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/last-frame-from-video-cache.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 import type { OffthreadVideoImageFormat } from 'remotion';
 import type { DownloadMap, SpecialVCodecForTransparency } from './assets/download-map';
 import type { FfmpegExecutable } from './ffmpeg-executable';

package/dist/provide-screenshot.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="node" />
+import type { ClipRegion } from 'remotion';
 import type { Page } from './browser/BrowserPage';
 import type { ImageFormat } from './image-format';
-export declare const provideScreenshot: ({ page, imageFormat, options, quality, height, width, }: {
+export declare const provideScreenshot: ({ page, imageFormat, options, quality, height, width, clipRegion, }: {
     page: Page;
     imageFormat: ImageFormat;
     quality: number | undefined;
@@ -11,4 +11,5 @@ export declare const provideScreenshot: ({ page, imageFormat, options, quality,
     };
     height: number;
     width: number;
+    clipRegion: ClipRegion | null;
 }) => Promise<Buffer>;

package/dist/provide-screenshot.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.provideScreenshot = void 0;
 const screenshot_dom_element_1 = require("./screenshot-dom-element");
-const provideScreenshot = ({ page, imageFormat, options, quality, height, width, }) => {
+const provideScreenshot = ({ page, imageFormat, options, quality, height, width, clipRegion, }) => {
     return (0, screenshot_dom_element_1.screenshotDOMElement)({
         page,
         opts: {
@@ -12,6 +12,7 @@ const provideScreenshot = ({ page, imageFormat, options, quality, height, width,
         quality,
         height,
         width,
+        clipRegion,
     });
 };
 exports.provideScreenshot = provideScreenshot;

package/dist/puppeteer-screenshot.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="node" />
+import type { ClipRegion } from 'remotion';
 import type { Page } from './browser/BrowserPage';
 export declare const screenshot: (options: {
     page: Page;
@@ -8,4 +8,5 @@ export declare const screenshot: (options: {
     omitBackground: boolean;
     width: number;
     height: number;
+    clipRegion: ClipRegion | null;
 }) => Promise<Buffer | string | void>;

package/dist/puppeteer-screenshot.js

@@ -66,6 +66,7 @@ const screenshot = (options) => {
         omitBackground: options.omitBackground,
         path: options.path,
         quality: options.quality,
+        clipRegion: options.clipRegion,
     }));
 };
 exports.screenshot = screenshot;

package/dist/render-frames.js

@@ -25,12 +25,12 @@ const open_browser_1 = require("./open-browser");
 const perf_1 = require("./perf");
 const pool_1 = require("./pool");
 const prepare_server_1 = require("./prepare-server");
-const provide_screenshot_1 = require("./provide-screenshot");
 const puppeteer_evaluate_1 = require("./puppeteer-evaluate");
 const quality_1 = require("./quality");
 const replace_browser_1 = require("./replace-browser");
 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 truthy_1 = require("./truthy");
 const validate_scale_1 = require("./validate-scale");
 const MAX_RETRIES_PER_FRAME = 1;
@@ -163,56 +163,40 @@ const innerRenderFrames = ({ onFrameUpdate, outputDir, onStart, inputProps, qual
         });
         freePage.on('error', errorCallbackOnFrame);
         await (0, seek_to_frame_1.seekToFrame)({ frame, page: freePage });
-        if (imageFormat !== 'none') {
-            if (onFrameBuffer) {
-                const id = (0, perf_1.startPerfMeasure)('save');
-                const buffer = await (0, provide_screenshot_1.provideScreenshot)({
-                    page: freePage,
-                    imageFormat,
-                    quality,
-                    options: {
-                        frame,
-                        output: null,
-                    },
-                    height: composition.height,
-                    width: composition.width,
-                });
-                (0, perf_1.stopPerfMeasure)(id);
-                onFrameBuffer(buffer, frame);
-            }
-            else {
-                if (!outputDir) {
-                    throw new Error('Called renderFrames() without specifying either `outputDir` or `onFrameBuffer`');
-                }
-                const output = path_1.default.join(outputDir, (0, get_frame_padded_index_1.getFrameOutputFileName)({
-                    frame,
-                    imageFormat,
-                    index,
-                    countType,
-                    lastFrame,
-                    totalFrames: framesToRender.length,
-                }));
-                await (0, provide_screenshot_1.provideScreenshot)({
-                    page: freePage,
-                    imageFormat,
-                    quality,
-                    options: {
-                        frame,
-                        output,
-                    },
-                    height,
-                    width,
-                });
-            }
+        if (!outputDir && !onFrameBuffer && imageFormat !== 'none') {
+            throw new Error('Called renderFrames() without specifying either `outputDir` or `onFrameBuffer`');
         }
-        const collectedAssets = await (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
-            pageFunction: () => {
-                return window.remotion_collectAssets();
-            },
-            args: [],
+        if (outputDir && onFrameBuffer && imageFormat !== 'none') {
+            throw new Error('Pass either `outputDir` or `onFrameBuffer` to renderFrames(), not both.');
+        }
+        const id = (0, perf_1.startPerfMeasure)('save');
+        const frameDir = outputDir !== null && outputDir !== void 0 ? outputDir : downloadMap.compositingDir;
+        const { buffer, collectedAssets } = await (0, take_frame_and_compose_1.takeFrameAndCompose)({
             frame,
-            page: freePage,
+            freePage,
+            height,
+            imageFormat,
+            output: path_1.default.join(frameDir, (0, get_frame_padded_index_1.getFrameOutputFileName)({
+                frame,
+                imageFormat,
+                index,
+                countType,
+                lastFrame,
+                totalFrames: framesToRender.length,
+            })),
+            quality,
+            width,
+            scale,
+            downloadMap,
+            wantsBuffer: Boolean(onFrameBuffer),
         });
+        if (onFrameBuffer) {
+            if (!buffer) {
+                throw new Error('unexpected null buffer');
+            }
+            onFrameBuffer(buffer, frame);
+        }
+        (0, perf_1.stopPerfMeasure)(id);
         const compressedAssets = collectedAssets.map((asset) => (0, compress_assets_1.compressAsset)(assets.filter(truthy_1.truthy).flat(1), asset));
         assets[index] = compressedAssets;
         compressedAssets.forEach((asset) => {

package/dist/render-media.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 import type { SmallTCompMetadata } from 'remotion';
 import type { RenderMediaOnDownload } from './assets/download-and-map-assets-to-file';
 import type { DownloadMap } from './assets/download-map';

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,119 @@
+"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 pool_1 = require("./pool");
+const renderOnServer = async (Comp, composition) => {
+    console.time('total');
+    console.time('frames');
+    process.env.REMOTION_SERVER_RENDERING = 'true';
+    process.env.SELECT_COMP_ID = composition.id;
+    // eslint-disable-next-line react/jsx-no-constructed-context-values
+    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');
+        },
+    };
+    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.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,
+        });
+        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-still.js

@@ -40,15 +40,15 @@ const image_format_1 = require("./image-format");
 const legacy_webpack_config_1 = require("./legacy-webpack-config");
 const open_browser_1 = require("./open-browser");
 const prepare_server_1 = require("./prepare-server");
-const provide_screenshot_1 = require("./provide-screenshot");
 const puppeteer_evaluate_1 = require("./puppeteer-evaluate");
 const quality_1 = require("./quality");
 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 validate_frame_1 = require("./validate-frame");
 const validate_puppeteer_timeout_1 = require("./validate-puppeteer-timeout");
 const validate_scale_1 = require("./validate-scale");
-const innerRenderStill = async ({ composition, quality, imageFormat = 'png', serveUrl, puppeteerInstance, dumpBrowserLogs = false, onError, inputProps, envVariables, output, frame = 0, overwrite = true, browserExecutable, timeoutInMilliseconds, chromiumOptions, scale = 1, proxyPort, cancelSignal, }) => {
+const innerRenderStill = async ({ composition, quality, imageFormat = 'png', serveUrl, puppeteerInstance, dumpBrowserLogs = false, onError, inputProps, envVariables, output, frame = 0, overwrite = true, browserExecutable, timeoutInMilliseconds, chromiumOptions, scale = 1, proxyPort, cancelSignal, downloadMap, }) => {
     remotion_1.Internals.validateDimension(composition.height, 'height', 'in the `config` object passed to `renderStill()`');
     remotion_1.Internals.validateDimension(composition.width, 'width', 'in the `config` object passed to `renderStill()`');
     remotion_1.Internals.validateFps(composition.fps, 'in the `config` object of `renderStill()`', false);
@@ -151,16 +151,17 @@ const innerRenderStill = async ({ composition, quality, imageFormat = 'png', ser
         page,
     });
     await (0, seek_to_frame_1.seekToFrame)({ frame: stillFrame, page });
-    const buffer = await (0, provide_screenshot_1.provideScreenshot)({
-        page,
-        imageFormat,
-        quality,
-        options: {
-            frame: stillFrame,
-            output,
-        },
+    const { buffer } = await (0, take_frame_and_compose_1.takeFrameAndCompose)({
+        downloadMap,
+        frame: stillFrame,
+        freePage: page,
         height: composition.height,
         width: composition.width,
+        imageFormat,
+        scale,
+        output,
+        quality,
+        wantsBuffer: !output,
     });
     await cleanup();
     return { buffer: output ? null : buffer };
@@ -196,6 +197,7 @@ const renderStill = (options) => {
                 serveUrl,
                 onError: (err) => reject(err),
                 proxyPort: offthreadPort,
+                downloadMap,
             });
         })
             .then((res) => resolve(res))

package/dist/screenshot-dom-element.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="node" />
+import type { ClipRegion } from 'remotion';
 import type { Page } from './browser/BrowserPage';
 import type { ImageFormat } from './image-format';
-export declare const screenshotDOMElement: ({ page, imageFormat, quality, opts, height, width, }: {
+export declare const screenshotDOMElement: ({ page, imageFormat, quality, opts, height, width, clipRegion, }: {
     page: Page;
     imageFormat: ImageFormat;
     quality: number | undefined;
@@ -10,4 +10,5 @@ export declare const screenshotDOMElement: ({ page, imageFormat, quality, opts,
     };
     height: number;
     width: number;
+    clipRegion: ClipRegion | null;
 }) => Promise<Buffer>;

package/dist/screenshot-dom-element.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.screenshotDOMElement = void 0;
 const puppeteer_evaluate_1 = require("./puppeteer-evaluate");
 const puppeteer_screenshot_1 = require("./puppeteer-screenshot");
-const screenshotDOMElement = async ({ page, imageFormat, quality, opts, height, width, }) => {
+const screenshotDOMElement = async ({ page, imageFormat, quality, opts, height, width, clipRegion, }) => {
     const { path } = opts;
     if (imageFormat === 'png') {
         await (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
@@ -36,6 +36,7 @@ const screenshotDOMElement = async ({ page, imageFormat, quality, opts, height,
         quality,
         width,
         height,
+        clipRegion,
     });
 };
 exports.screenshotDOMElement = screenshotDOMElement;

package/dist/screenshot-task.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="node" />
+import type { ClipRegion } from 'remotion';
 import type { Page } from './browser/BrowserPage';
 import type { StillImageFormat } from './image-format';
-export declare const screenshotTask: ({ format, height, omitBackground, page, width, path, quality, }: {
+export declare const screenshotTask: ({ format, height, omitBackground, page, width, path, quality, clipRegion, }: {
     page: Page;
     format: StillImageFormat;
     path?: string | undefined;
@@ -9,4 +9,5 @@ export declare const screenshotTask: ({ format, height, omitBackground, page, wi
     omitBackground: boolean;
     width: number;
     height: number;
+    clipRegion: ClipRegion | null;
 }) => Promise<Buffer | string>;

package/dist/screenshot-task.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.screenshotTask = void 0;
 const fs_1 = __importDefault(require("fs"));
 const perf_1 = require("./perf");
-const screenshotTask = async ({ format, height, omitBackground, page, width, path, quality, }) => {
+const screenshotTask = async ({ format, height, omitBackground, page, width, path, quality, clipRegion, }) => {
     var _a;
     const client = page._client();
     const target = page.target();
@@ -25,13 +25,21 @@ const screenshotTask = async ({ format, height, omitBackground, page, width, pat
         const result = await client.send('Page.captureScreenshot', {
             format,
             quality,
-            clip: {
-                x: 0,
-                y: 0,
-                height,
-                scale: 1,
-                width,
-            },
+            clip: clipRegion !== null && clipRegion !== 'hide'
+                ? {
+                    x: clipRegion.x,
+                    y: clipRegion.y,
+                    height: clipRegion.height,
+                    scale: 1,
+                    width: clipRegion.width,
+                }
+                : {
+                    x: 0,
+                    y: 0,
+                    height,
+                    scale: 1,
+                    width,
+                },
             captureBeyondViewport: true,
             optimizeForSpeed: true,
         });

package/dist/take-frame-and-compose.d.ts

@@ -0,0 +1,19 @@
+import type { TAsset } from 'remotion';
+import type { DownloadMap } from './assets/download-map';
+import type { Page } from './browser/BrowserPage';
+import type { ImageFormat } from './image-format';
+export declare const takeFrameAndCompose: ({ freePage, imageFormat, quality, frame, width, height, output, scale, downloadMap, wantsBuffer, }: {
+    freePage: Page;
+    imageFormat: ImageFormat;
+    quality: number | undefined;
+    frame: number;
+    height: number;
+    width: number;
+    output: string | null;
+    scale: number;
+    downloadMap: DownloadMap;
+    wantsBuffer: boolean;
+}) => Promise<{
+    buffer: Buffer | null;
+    collectedAssets: TAsset[];
+}>;

package/dist/take-frame-and-compose.js

@@ -0,0 +1,96 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.takeFrameAndCompose = void 0;
+const fs_1 = __importDefault(require("fs"));
+const path_1 = __importDefault(require("path"));
+const compose_1 = require("./compositor/compose");
+const provide_screenshot_1 = require("./provide-screenshot");
+const puppeteer_evaluate_1 = require("./puppeteer-evaluate");
+const truthy_1 = require("./truthy");
+const takeFrameAndCompose = async ({ freePage, imageFormat, quality, frame, width, height, output, scale, downloadMap, wantsBuffer, }) => {
+    var _a;
+    const [clipRegion, collectedAssets] = await Promise.all([
+        (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
+            pageFunction: () => {
+                if (typeof window.remotion_getClipRegion === 'undefined') {
+                    return null;
+                }
+                return window.remotion_getClipRegion();
+            },
+            args: [],
+            frame,
+            page: freePage,
+        }),
+        (0, puppeteer_evaluate_1.puppeteerEvaluateWithCatch)({
+            pageFunction: () => {
+                return window.remotion_collectAssets();
+            },
+            args: [],
+            frame,
+            page: freePage,
+        }),
+    ]);
+    if (imageFormat === 'none') {
+        return { buffer: null, collectedAssets };
+    }
+    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,
+        };
+    if (clipRegion !== 'hide') {
+        const shouldMakeBuffer = wantsBuffer && !needsComposing;
+        const buf = await (0, provide_screenshot_1.provideScreenshot)({
+            page: freePage,
+            imageFormat,
+            quality,
+            options: {
+                frame,
+                output: shouldMakeBuffer ? null : (_a = needsComposing === null || needsComposing === void 0 ? void 0 : needsComposing.tmpFile) !== null && _a !== void 0 ? _a : output,
+            },
+            height,
+            width,
+            clipRegion,
+        });
+        if (shouldMakeBuffer) {
+            return { buffer: buf, collectedAssets };
+        }
+    }
+    if (needsComposing) {
+        await (0, compose_1.compose)({
+            height: height * scale,
+            width: width * scale,
+            layers: [
+                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,
+                        },
+                    },
+            ].filter(truthy_1.truthy),
+            output: needsComposing.finalOutfie,
+            downloadMap,
+            imageFormat: imageFormat === 'jpeg' ? 'Jpeg' : 'Png',
+        });
+        if (wantsBuffer) {
+            const buffer = await fs_1.default.promises.readFile(needsComposing.finalOutfie);
+            await fs_1.default.promises.unlink(needsComposing.finalOutfie);
+            return { buffer, collectedAssets };
+        }
+    }
+    return { buffer: null, collectedAssets };
+};
+exports.takeFrameAndCompose = takeFrameAndCompose;

package/dist/try-to-extract-frame-of-video-fast.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 import type { OffthreadVideoImageFormat } from 'remotion';
 import type { NeedsResize, SpecialVCodecForTransparency } from './assets/download-map';
 import type { FfmpegExecutable } from './ffmpeg-executable';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@remotion/renderer",
-	"version": "3.3.19",
+	"version": "3.3.26",
 	"description": "Renderer for Remotion",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -9,9 +9,11 @@
 		"lint": "eslint src --ext ts,tsx",
 		"test": "vitest --run",
 		"watch": "tsc -w",
-		"build": "tsc -d"
+		"build": "node build.mjs && tsc -d",
+		"build-all": "node build.mjs --all",
+		"prepublishOnly": "node build.mjs --all"
 	},
-	"author": "",
+	"author": "Jonny Burger <jonny@remotion.dev>",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"repository": {
 		"url": "https://github.com/remotion-dev/remotion"
@@ -22,7 +24,7 @@
 	"dependencies": {
 		"execa": "5.1.1",
 		"extract-zip": "2.0.1",
-		"remotion": "3.3.19",
+		"remotion": "3.3.26",
 		"source-map": "^0.8.0-beta.0",
 		"ws": "8.7.0"
 	},
@@ -36,8 +38,8 @@
 		"@testing-library/react": "13.3.0",
 		"@types/node": "^16.7.5",
 		"@types/progress": "2.0.5",
-		"@types/react": "18.0.23",
-		"@types/react-dom": "18.0.0",
+		"@types/react": "18.0.26",
+		"@types/react-dom": "18.0.10",
 		"eslint": "8.25.0",
 		"prettier": "^2.7.1",
 		"prettier-plugin-organize-imports": "^2.3.4",
@@ -46,16 +48,24 @@
 		"typescript": "^4.7.0",
 		"vitest": "0.24.3"
 	},
+	"optionalDependencies": {
+		"@remotion/compositor-darwin-arm64": "3.3.26",
+		"@remotion/compositor-darwin-x64": "3.3.26",
+		"@remotion/compositor-linux-arm64-gnu": "3.3.26",
+		"@remotion/compositor-linux-arm64-musl": "3.3.26",
+		"@remotion/compositor-linux-x64-gnu": "3.3.26",
+		"@remotion/compositor-linux-x64-musl": "3.3.26",
+		"@remotion/compositor-win32-x64-msvc": "3.3.26"
+	},
 	"keywords": [
 		"remotion",
 		"ffmpeg",
 		"video",
 		"react",
-		"puppeteer",
 		"player"
 	],
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "097ff40cd34ecba3c7ebbbc08b442827b0f4ad7d"
+	"gitHead": "8efe8771f7c2b1d22bd50e8c81cc37ae054dfae9"
 }

package/.prettierrc.js

@@ -1,14 +0,0 @@
-module.exports = {
-	singleQuote: true,
-	bracketSpacing: false,
-	useTabs: true,
-	overrides: [
-		{
-			files: ['*.yml'],
-			options: {
-				singleQuote: false,
-			},
-		},
-	],
-	plugins: [require.resolve('prettier-plugin-organize-imports')],
-};

package/tsconfig.json

@@ -1,10 +0,0 @@
-{
-	"extends": "../tsconfig.settings.json",
-	"compilerOptions": {
-		"composite": true,
-		"rootDir": "src",
-		"outDir": "dist"
-	},
-	"references": [{"path": "../core"}, {"path": "../bundler"}],
-	"exclude": ["vitest.config.ts", "dist"]
-}