@remotion/renderer 4.0.535 → 4.0.536

package/dist/esm/index.mjs

@@ -3620,13 +3620,13 @@ class Page extends EventEmitter {
       mobile: false,
       width: viewport.width,
       height: viewport.height,
-      deviceScaleFactor: 1,
+      deviceScaleFactor: viewport.deviceScaleFactor,
       screenHeight: viewport.height,
       screenWidth: viewport.width,
-      scale: viewport.deviceScaleFactor,
+      scale: 1,
       viewport: {
-        height: viewport.height * viewport.deviceScaleFactor,
-        width: viewport.width * viewport.deviceScaleFactor,
+        height: viewport.height,
+        width: viewport.width,
         scale: 1,
         x: 0,
         y: 0
@@ -14762,6 +14762,11 @@ var mimeDb = {
     compressible: false,
     extensions: ["jpx", "jpf"]
   },
+  "image/jxl": {
+    source: "iana",
+    compressible: false,
+    extensions: ["jxl"]
+  },
   "image/jxr": {
     source: "iana",
     extensions: ["jxr"]
@@ -24204,10 +24209,12 @@ var stringifyFfmpegFilter = ({
   }
   const { toneFrequency, startInVideo } = asset;
   const startInVideoSeconds = startInVideo / fps;
+  const assetTrimLeftOffset = startInVideo === 0 ? trimLeftOffset : 0;
+  const startInChunkSeconds = startInVideo === 0 ? 0 : startInVideoSeconds - trimLeftOffset;
   const { trimLeft, maxTrim } = getActualTrimLeft({
     trimLeft: asset.trimLeft,
     fps,
-    trimLeftOffset,
+    trimLeftOffset: assetTrimLeftOffset,
     seamless: forSeamlessAacConcatenation,
     assetDuration,
     audioStartFrame: asset.audioStartFrame,
@@ -24225,7 +24232,7 @@ var stringifyFfmpegFilter = ({
     filter: trimAndTempoFilter
   } = trimAndSetTempo({
     assetDuration,
-    trimLeftOffset,
+    trimLeftOffset: assetTrimLeftOffset,
     trimRightOffset,
     asset,
     fps,
@@ -24237,8 +24244,8 @@ var stringifyFfmpegFilter = ({
     fps,
     trimLeft: actualTrimLeft
   });
-  const padAtEnd = chunkLengthInSeconds - audibleDuration - startInVideoSeconds;
-  const padStart = startInVideoSeconds + (asset.trimLeft === 0 ? presentationTimeOffsetInSeconds : 0);
+  const padAtEnd = chunkLengthInSeconds - audibleDuration - startInChunkSeconds;
+  const padStart = startInChunkSeconds + (asset.trimLeft === 0 ? presentationTimeOffsetInSeconds : 0);
   return {
     filter: "[0:a]" + [
       `aformat=sample_fmts=s16:sample_rates=${sampleRate}`,

package/dist/mime-db.js

@@ -7222,6 +7222,11 @@ exports.mimeDb = {
         compressible: false,
         extensions: ['jpx', 'jpf'],
     },
+    'image/jxl': {
+        source: 'iana',
+        compressible: false,
+        extensions: ['jxl'],
+    },
     'image/jxr': {
         source: 'iana',
         extensions: ['jxr'],

package/dist/options/index.d.ts

@@ -1,5 +1,24 @@
 import type { AnyRemotionOption } from './option';
 export declare const allOptions: {
+    showLayerFrameNumbersOption: {
+        name: string;
+        addedIn: string;
+        cliFlag: "show-layer-frame-numbers";
+        id: "show-layer-frame-numbers";
+        description: () => import("react/jsx-runtime").JSX.Element;
+        ssrName: null;
+        docLink: string;
+        type: boolean;
+        getValue: ({ commandLine }: {
+            commandLine: Record<string, unknown>;
+        }) => {
+            value: boolean;
+            source: string;
+        };
+        setConfig(value: boolean): void;
+        getConfigValue: () => boolean | null;
+        reset: () => void;
+    };
     showPremountingOption: {
         name: string;
         addedIn: string;
@@ -1387,49 +1406,11 @@ export declare const allOptions: {
         setConfig(value: boolean): void;
         id: "experimental-keep-audio-context-alive";
     };
-    experimentalTracksOption: {
-        name: string;
-        addedIn: string;
-        cliFlag: "experimental-tracks";
-        description: () => import("react/jsx-runtime").JSX.Element;
-        ssrName: null;
-        docLink: string;
-        type: boolean;
-        getValue: ({ commandLine }: {
-            commandLine: Record<string, unknown>;
-        }) => {
-            value: boolean;
-            source: string;
-        };
-        setConfig(value: boolean): void;
-        getConfigValue: () => boolean | null;
-        reset: () => void;
-        id: "experimental-tracks";
-    };
-    experimentalSequenceActivityOption: {
-        name: string;
-        addedIn: string;
-        cliFlag: "experimental-sequence-activity";
-        description: () => import("react/jsx-runtime").JSX.Element;
-        ssrName: null;
-        docLink: string;
-        type: boolean;
-        getValue: ({ commandLine }: {
-            commandLine: Record<string, unknown>;
-        }) => {
-            value: boolean;
-            source: string;
-        };
-        setConfig(value: boolean): void;
-        getConfigValue: () => boolean | null;
-        reset: () => void;
-        id: "experimental-sequence-activity";
-    };
-    experimentalSequenceActivityLimitOption: {
+    sequenceActivityLimitOption: {
         name: string;
         addedIn: string;
-        cliFlag: "experimental-sequence-activity-limit";
-        id: "experimental-sequence-activity-limit";
+        cliFlag: "sequence-activity-limit";
+        id: "sequence-activity-limit";
         description: () => import("react/jsx-runtime").JSX.Element;
         ssrName: null;
         docLink: string;

package/dist/options/index.js

@@ -37,9 +37,6 @@ const enforce_audio_1 = require("./enforce-audio");
 const env_file_1 = require("./env-file");
 const every_nth_frame_1 = require("./every-nth-frame");
 const experimental_keep_audio_context_alive_1 = require("./experimental-keep-audio-context-alive");
-const experimental_sequence_activity_1 = require("./experimental-sequence-activity");
-const experimental_sequence_activity_limit_1 = require("./experimental-sequence-activity-limit");
-const experimental_tracks_1 = require("./experimental-tracks");
 const folder_expiry_1 = require("./folder-expiry");
 const for_seamless_aac_concatenation_1 = require("./for-seamless-aac-concatenation");
 const force_new_studio_1 = require("./force-new-studio");
@@ -89,6 +86,8 @@ const runs_1 = require("./runs");
 const sample_rate_1 = require("./sample-rate");
 const scale_1 = require("./scale");
 const separate_audio_1 = require("./separate-audio");
+const sequence_activity_limit_1 = require("./sequence-activity-limit");
+const show_layer_frame_numbers_1 = require("./show-layer-frame-numbers");
 const show_premounting_1 = require("./show-premounting");
 const skip_skills_1 = require("./skip-skills");
 const still_frame_1 = require("./still-frame");
@@ -105,6 +104,7 @@ const webhook_custom_data_1 = require("./webhook-custom-data");
 const webpack_poll_1 = require("./webpack-poll");
 const x264_preset_1 = require("./x264-preset");
 exports.allOptions = {
+    showLayerFrameNumbersOption: show_layer_frame_numbers_1.showLayerFrameNumbersOption,
     showPremountingOption: show_premounting_1.showPremountingOption,
     allowHtmlInCanvasOption: allow_html_in_canvas_1.allowHtmlInCanvasOption,
     audioCodecOption: audio_codec_1.audioCodecOption,
@@ -181,9 +181,7 @@ exports.allOptions = {
     framesOption: frames_1.framesOption,
     forceNewStudioOption: force_new_studio_1.forceNewStudioOption,
     experimentalKeepAudioContextAliveOption: experimental_keep_audio_context_alive_1.experimentalKeepAudioContextAliveOption,
-    experimentalTracksOption: experimental_tracks_1.experimentalTracksOption,
-    experimentalSequenceActivityOption: experimental_sequence_activity_1.experimentalSequenceActivityOption,
-    experimentalSequenceActivityLimitOption: experimental_sequence_activity_limit_1.experimentalSequenceActivityLimitOption,
+    sequenceActivityLimitOption: sequence_activity_limit_1.sequenceActivityLimitOption,
     numberOfSharedAudioTagsOption: number_of_shared_audio_tags_1.numberOfSharedAudioTagsOption,
     ipv4Option: ipv4_1.ipv4Option,
     stillImageFormatOption: still_image_format_1.stillImageFormatOption,

package/dist/options/sequence-activity-limit.d.ts

@@ -0,0 +1,19 @@
+export declare const sequenceActivityLimitOption: {
+    name: string;
+    addedIn: string;
+    cliFlag: "sequence-activity-limit";
+    id: "sequence-activity-limit";
+    description: () => import("react/jsx-runtime").JSX.Element;
+    ssrName: null;
+    docLink: string;
+    type: number;
+    getValue: ({ commandLine }: {
+        commandLine: Record<string, unknown>;
+    }) => {
+        value: number;
+        source: string;
+    };
+    setConfig(value: number): void;
+    getConfigValue: () => number | null;
+    reset: () => void;
+};

package/dist/options/sequence-activity-limit.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.sequenceActivityLimitOption = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const no_react_1 = require("remotion/no-react");
+let configuredLimit = null;
+const cliFlag = 'sequence-activity-limit';
+exports.sequenceActivityLimitOption = {
+    name: 'Sequence Activity limit',
+    addedIn: '4.0.536',
+    cliFlag,
+    id: cliFlag,
+    description: () => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: ["Limit hidden scenes discovered by Sequence Activity in the Remotion Studio, including nested sequences and their ancestors. Visible, premounted, and postmounted scenes always render. Defaults to", ' ', jsx_runtime_1.jsx("code", { children: "Infinity" }),
+            " for unlimited discovery without admission delays. Must be a non-negative safe integer or ",
+            jsx_runtime_1.jsx("code", { children: "Infinity" }),
+            ". Set to 0 to disable Sequence Activity. Finite limits prioritize nearby scenes. Does not affect rendering."] })),
+    ssrName: null,
+    docLink: 'https://www.remotion.dev/docs/options/sequence-activity-limit',
+    type: 0,
+    getValue: ({ commandLine }) => {
+        if (commandLine[cliFlag] !== undefined) {
+            const value = commandLine[cliFlag] === 'Infinity' ? Infinity : commandLine[cliFlag];
+            if (value !== Infinity &&
+                (!Number.isSafeInteger(value) || value < 0)) {
+                throw new Error('Sequence Activity limit must be a non-negative safe integer or Infinity.');
+            }
+            return { value: value, source: 'cli' };
+        }
+        return {
+            value: configuredLimit !== null && configuredLimit !== void 0 ? configuredLimit : no_react_1.NoReactInternals.DEFAULT_SEQUENCE_ACTIVITY_LIMIT,
+            source: 'config',
+        };
+    },
+    setConfig(value) {
+        if (value !== Infinity && (!Number.isSafeInteger(value) || value < 0)) {
+            throw new Error('Sequence Activity limit must be a non-negative safe integer or Infinity.');
+        }
+        configuredLimit = value;
+    },
+    getConfigValue: () => configuredLimit,
+    reset: () => {
+        configuredLimit = null;
+    },
+};

package/dist/options/{experimental-client-side-rendering.d.ts → show-layer-frame-numbers.d.ts}

@@ -1,6 +1,8 @@
-export declare const experimentalClientSideRenderingOption: {
+export declare const showLayerFrameNumbersOption: {
     name: string;
-    cliFlag: "enable-experimental-client-side-rendering";
+    addedIn: string;
+    cliFlag: "show-layer-frame-numbers";
+    id: "show-layer-frame-numbers";
     description: () => import("react/jsx-runtime").JSX.Element;
     ssrName: null;
     docLink: string;
@@ -12,5 +14,6 @@ export declare const experimentalClientSideRenderingOption: {
         source: string;
     };
     setConfig(value: boolean): void;
-    id: "enable-experimental-client-side-rendering";
+    getConfigValue: () => boolean | null;
+    reset: () => void;
 };

package/dist/options/show-layer-frame-numbers.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.showLayerFrameNumbersOption = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+let configuredShowLayerFrameNumbers = null;
+const cliFlag = 'show-layer-frame-numbers';
+exports.showLayerFrameNumbersOption = {
+    name: 'Show frame numbers of layer',
+    addedIn: '4.0.535',
+    cliFlag,
+    id: cliFlag,
+    description: () => (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: ["Show the current frame number inside sequence layers in the Studio timeline. Defaults to ",
+            jsx_runtime_1.jsx("code", { children: "false" }),
+            "."] })),
+    ssrName: null,
+    docLink: 'https://www.remotion.dev/docs/options/show-layer-frame-numbers',
+    type: false,
+    getValue: ({ commandLine }) => {
+        if (commandLine[cliFlag] !== undefined && commandLine[cliFlag] !== null) {
+            return { value: commandLine[cliFlag], source: 'cli' };
+        }
+        return { value: configuredShowLayerFrameNumbers !== null && configuredShowLayerFrameNumbers !== void 0 ? configuredShowLayerFrameNumbers : false, source: 'config' };
+    },
+    setConfig(value) {
+        if (typeof value !== 'boolean') {
+            throw new Error('Config.setShowLayerFrameNumbers() expects a boolean');
+        }
+        configuredShowLayerFrameNumbers = value;
+    },
+    getConfigValue: () => configuredShowLayerFrameNumbers,
+    reset: () => {
+        configuredShowLayerFrameNumbers = null;
+    },
+};

package/dist/stringify-ffmpeg-filter.js

@@ -67,10 +67,14 @@ const stringifyFfmpegFilter = ({ channels, volume, fps, assetDuration, chunkLeng
     }
     const { toneFrequency, startInVideo } = asset;
     const startInVideoSeconds = startInVideo / fps;
+    // A chunk's leading trim only cuts into assets already playing at its start.
+    // For later assets, remove that time from the silence before the asset instead.
+    const assetTrimLeftOffset = startInVideo === 0 ? trimLeftOffset : 0;
+    const startInChunkSeconds = startInVideo === 0 ? 0 : startInVideoSeconds - trimLeftOffset;
     const { trimLeft, maxTrim } = (0, seamless_aac_trim_1.getActualTrimLeft)({
         trimLeft: asset.trimLeft,
         fps,
-        trimLeftOffset,
+        trimLeftOffset: assetTrimLeftOffset,
         seamless: forSeamlessAacConcatenation,
         assetDuration,
         audioStartFrame: asset.audioStartFrame,
@@ -84,7 +88,7 @@ const stringifyFfmpegFilter = ({ channels, volume, fps, assetDuration, chunkLeng
     }
     const { actualTrimLeft, audibleDuration, filter: trimAndTempoFilter, } = trimAndSetTempo({
         assetDuration,
-        trimLeftOffset,
+        trimLeftOffset: assetTrimLeftOffset,
         trimRightOffset,
         asset,
         fps,
@@ -96,8 +100,8 @@ const stringifyFfmpegFilter = ({ channels, volume, fps, assetDuration, chunkLeng
         fps,
         trimLeft: actualTrimLeft,
     });
-    const padAtEnd = chunkLengthInSeconds - audibleDuration - startInVideoSeconds;
-    const padStart = startInVideoSeconds +
+    const padAtEnd = chunkLengthInSeconds - audibleDuration - startInChunkSeconds;
+    const padStart = startInChunkSeconds +
         (asset.trimLeft === 0 ? presentationTimeOffsetInSeconds : 0);
     // Set as few filters as possible, as combining them can create noise
     return {

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/renderer"
 	},
 	"name": "@remotion/renderer",
-	"version": "4.0.535",
+	"version": "4.0.536",
 	"description": "Render Remotion videos using Node.js or Bun",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -22,11 +22,11 @@
 	},
 	"dependencies": {
 		"execa": "5.1.1",
-		"remotion": "4.0.535",
-		"@remotion/streaming": "4.0.535",
+		"remotion": "4.0.536",
+		"@remotion/streaming": "4.0.536",
 		"source-map": "0.8.0",
 		"ws": "8.21.0",
-		"@remotion/licensing": "4.0.535"
+		"@remotion/licensing": "4.0.536"
 	},
 	"peerDependencies": {
 		"react": ">=16.8.0",
@@ -40,19 +40,21 @@
 		"react-dom": "19.2.3",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1",
 		"@types/ws": "8.5.10",
-		"@remotion/example-videos": "4.0.535",
-		"@remotion/eslint-config-internal": "4.0.535",
+		"@remotion/example-videos": "4.0.536",
+		"@remotion/eslint-config-internal": "4.0.536",
 		"eslint": "9.19.0",
-		"@types/node": "20.12.14"
+		"@types/node": "20.12.14",
+		"@types/pngjs": "6.0.5",
+		"pngjs": "7.0.0"
 	},
 	"optionalDependencies": {
-		"@remotion/compositor-darwin-arm64": "4.0.535",
-		"@remotion/compositor-darwin-x64": "4.0.535",
-		"@remotion/compositor-linux-arm64-gnu": "4.0.535",
-		"@remotion/compositor-linux-arm64-musl": "4.0.535",
-		"@remotion/compositor-linux-x64-gnu": "4.0.535",
-		"@remotion/compositor-linux-x64-musl": "4.0.535",
-		"@remotion/compositor-win32-x64-msvc": "4.0.535"
+		"@remotion/compositor-darwin-arm64": "4.0.536",
+		"@remotion/compositor-darwin-x64": "4.0.536",
+		"@remotion/compositor-linux-arm64-gnu": "4.0.536",
+		"@remotion/compositor-linux-arm64-musl": "4.0.536",
+		"@remotion/compositor-linux-x64-gnu": "4.0.536",
+		"@remotion/compositor-linux-x64-musl": "4.0.536",
+		"@remotion/compositor-win32-x64-msvc": "4.0.536"
 	},
 	"keywords": [
 		"remotion",

package/dist/options/experimental-client-side-rendering.js

@@ -1,30 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.experimentalClientSideRenderingOption = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-let experimentalClientSideRenderingEnabled = false;
-const cliFlag = 'enable-experimental-client-side-rendering';
-exports.experimentalClientSideRenderingOption = {
-    name: 'Enable Experimental Client-Side Rendering',
-    cliFlag,
-    description: () => (jsx_runtime_1.jsx(jsx_runtime_1.Fragment, { children: "Enable WIP client-side rendering in the Remotion Studio. See https://www.remotion.dev/docs/client-side-rendering/ for notes." })),
-    ssrName: null,
-    docLink: 'https://www.remotion.dev/docs/client-side-rendering',
-    type: false,
-    getValue: ({ commandLine }) => {
-        if (commandLine[cliFlag] !== null) {
-            return {
-                value: commandLine[cliFlag],
-                source: 'cli',
-            };
-        }
-        return {
-            value: experimentalClientSideRenderingEnabled,
-            source: 'config',
-        };
-    },
-    setConfig(value) {
-        experimentalClientSideRenderingEnabled = value;
-    },
-    id: cliFlag,
-};

package/dist/prestitcher-memory-usage.d.ts

@@ -1,13 +0,0 @@
-export declare const hasEnoughMemoryForParallelEncoding: ({ freeMemory, estimatedUsage, }: {
-    freeMemory: number;
-    estimatedUsage: number;
-}) => boolean;
-export declare const shouldUseParallelEncoding: ({ width, height, logLevel, }: {
-    width: number;
-    height: number;
-    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
-}) => {
-    hasEnoughMemory: boolean;
-    freeMemory: number;
-    estimatedUsage: number;
-};

package/dist/prestitcher-memory-usage.js

@@ -1,33 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.shouldUseParallelEncoding = exports.hasEnoughMemoryForParallelEncoding = void 0;
-const get_available_memory_1 = require("./memory/get-available-memory");
-const MINIMUM_MEMORY_LEFT = 2000000000;
-const hasEnoughMemoryForParallelEncoding = ({ freeMemory, estimatedUsage, }) => {
-    return freeMemory - estimatedUsage > MINIMUM_MEMORY_LEFT;
-};
-exports.hasEnoughMemoryForParallelEncoding = hasEnoughMemoryForParallelEncoding;
-const estimateMemoryUsageForPrestitcher = ({ width, height, }) => {
-    // Empirically we detected that per 1 million pixels, FFMPEG uses around 1GB of memory, relatively independent of
-    // the duration of the video.
-    const memoryUsageFor4K = 1000000000;
-    const memoryUsageOfPixel = memoryUsageFor4K / 1000000;
-    return memoryUsageOfPixel * width * height;
-};
-const shouldUseParallelEncoding = ({ width, height, logLevel, }) => {
-    const freeMemory = (0, get_available_memory_1.getAvailableMemory)(logLevel);
-    const estimatedUsage = estimateMemoryUsageForPrestitcher({
-        height,
-        width,
-    });
-    const hasEnoughMemory = (0, exports.hasEnoughMemoryForParallelEncoding)({
-        estimatedUsage,
-        freeMemory,
-    });
-    return {
-        hasEnoughMemory,
-        freeMemory,
-        estimatedUsage,
-    };
-};
-exports.shouldUseParallelEncoding = shouldUseParallelEncoding;

package/dist/render-partitions.d.ts

@@ -1,7 +0,0 @@
-export declare const renderPartitions: ({ frames, concurrency, }: {
-    frames: number[];
-    concurrency: number;
-}) => {
-    partitions: number[][];
-    getNextFrame: (pageIndex: number) => number;
-};

package/dist/render-partitions.js

@@ -1,50 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderPartitions = void 0;
-const renderPartitions = ({ frames, concurrency, }) => {
-    const partitions = [];
-    let start = 0;
-    for (let i = 0; i < concurrency; i++) {
-        const end = start + Math.ceil((frames.length - start) / (concurrency - i));
-        partitions.push(frames.slice(start, end));
-        start = end;
-    }
-    return {
-        partitions,
-        getNextFrame: (pageIndex) => {
-            if (partitions[pageIndex].length === 0) {
-                const partitionLengths = partitions.map((p) => p.length);
-                if (partitionLengths.every((p) => p === 0)) {
-                    throw new Error('No more frames to render');
-                }
-                let longestRemainingPartitionIndex = -1;
-                for (let i = 0; i < partitions.length; i++) {
-                    if (longestRemainingPartitionIndex === -1) {
-                        longestRemainingPartitionIndex = i;
-                        continue;
-                    }
-                    if (partitions[i].length >
-                        partitions[longestRemainingPartitionIndex].length) {
-                        longestRemainingPartitionIndex = i;
-                    }
-                }
-                if (longestRemainingPartitionIndex === -1) {
-                    throw new Error('No more frames to render');
-                }
-                // Round up - let's say only one frame is left to render, we should take this one
-                const slicePoint = Math.ceil(partitions[longestRemainingPartitionIndex].length / 2) -
-                    // but don't forget it's zero indexed :)
-                    1;
-                partitions[pageIndex] =
-                    partitions[longestRemainingPartitionIndex].slice(slicePoint);
-                partitions[longestRemainingPartitionIndex] = partitions[longestRemainingPartitionIndex].slice(0, slicePoint);
-            }
-            const value = partitions[pageIndex].shift();
-            if (value === undefined) {
-                throw new Error('No more frames to render');
-            }
-            return value;
-        },
-    };
-};
-exports.renderPartitions = renderPartitions;