@remotion/renderer 3.3.19 → 3.3.25

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/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/create-ffmpeg-complex-filter.d.ts

@@ -1,5 +1,8 @@
 import type { DownloadMap } from './assets/download-map';
 export declare const createFfmpegComplexFilter: (filters: number, downloadMap: DownloadMap) => Promise<{
-    complexFilterFlag: [string, string] | null;
+    complexFilterFlag: [
+        string,
+        string
+    ] | null;
     cleanup: () => void;
 }>;

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/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

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 import execa from 'execa';
 import { SymbolicateableError } from './error-handling/symbolicateable-error';
 import { mimeContentType, mimeLookup } from './mime-types';
@@ -61,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", 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 +114,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 +125,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-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.25",
 	"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.25",
 		"source-map": "^0.8.0-beta.0",
 		"ws": "8.7.0"
 	},
@@ -46,16 +48,24 @@
 		"typescript": "^4.7.0",
 		"vitest": "0.24.3"
 	},
+	"optionalDependencies": {
+		"@remotion/compositor-darwin-arm64": "3.3.25",
+		"@remotion/compositor-darwin-x64": "3.3.25",
+		"@remotion/compositor-linux-arm64-gnu": "3.3.25",
+		"@remotion/compositor-linux-arm64-musl": "3.3.25",
+		"@remotion/compositor-linux-x64-gnu": "3.3.25",
+		"@remotion/compositor-linux-x64-musl": "3.3.25",
+		"@remotion/compositor-win32-x64-msvc": "3.3.25"
+	},
 	"keywords": [
 		"remotion",
 		"ffmpeg",
 		"video",
 		"react",
-		"puppeteer",
 		"player"
 	],
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "097ff40cd34ecba3c7ebbbc08b442827b0f4ad7d"
+	"gitHead": "48e46dd2ede8fe903bf0139cebd6f546d7f2b5e0"
 }

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"]
-}