@remotion/cli 4.0.22 → 4.0.24

package/dist/benchmark.js

@@ -95,7 +95,7 @@ const benchmarkCommand = async (remotionRoot, args) => {
         process.exit(1);
     }
     const fullEntryPoint = (0, convert_entry_point_to_serve_url_1.convertEntryPointToServeUrl)(file);
-    const { inputProps, envVariables, browserExecutable, chromiumOptions, port, puppeteerTimeout, browser, scale, publicDir, proResProfile, x264Preset, frameRange: defaultFrameRange, overwrite, jpegQuality, crf: configFileCrf, pixelFormat, scale: configFileScale, numberOfGifLoops, everyNthFrame, muted, enforceAudioTrack, ffmpegOverride, audioBitrate, videoBitrate, height, width, concurrency: unparsedConcurrency, logLevel, } = await (0, get_cli_options_1.getCliOptions)({
+    const { inputProps, envVariables, browserExecutable, chromiumOptions, port, puppeteerTimeout, browser, scale, publicDir, proResProfile, x264Preset, frameRange: defaultFrameRange, overwrite, jpegQuality, crf: configFileCrf, pixelFormat, scale: configFileScale, numberOfGifLoops, everyNthFrame, muted, enforceAudioTrack, ffmpegOverride, audioBitrate, videoBitrate, height, width, concurrency: unparsedConcurrency, logLevel, offthreadVideoCacheSizeInBytes, } = await (0, get_cli_options_1.getCliOptions)({
         isLambda: false,
         type: 'series',
         remotionRoot,
@@ -145,6 +145,7 @@ const benchmarkCommand = async (remotionRoot, args) => {
         //  Intentionally disabling server to not cache results
         server: undefined,
         logLevel,
+        offthreadVideoCacheSizeInBytes,
     });
     const ids = (remainingArgs[0]
         ? remainingArgs[0]
@@ -235,6 +236,7 @@ const benchmarkCommand = async (remotionRoot, args) => {
                     indent: undefined,
                     staticBase: null,
                 }).serializedString,
+                offthreadVideoCacheSizeInBytes,
             }, (run, progress) => {
                 benchmarkProgress.update(makeBenchmarkProgressBar({
                     totalRuns: runs,

package/dist/better-opn/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="node" />
 export declare const openBrowser: ({ url, browserFlag, browserArgs, }: {
     url: string;
     browserFlag: string | undefined;

package/dist/compositions.js

@@ -20,7 +20,7 @@ const listCompositionsCommand = async (remotionRoot, args) => {
     }
     const logLevel = config_1.ConfigInternals.Logging.getLogLevel();
     log_1.Log.verbose('Entry point:', file, 'reason:', reason);
-    const { browserExecutable, chromiumOptions, envVariables, inputProps, puppeteerTimeout, port, publicDir, } = await (0, get_cli_options_1.getCliOptions)({
+    const { browserExecutable, chromiumOptions, envVariables, inputProps, puppeteerTimeout, port, publicDir, offthreadVideoCacheSizeInBytes, } = await (0, get_cli_options_1.getCliOptions)({
         isLambda: false,
         type: 'get-compositions',
         remotionRoot,
@@ -57,6 +57,7 @@ const listCompositionsCommand = async (remotionRoot, args) => {
         puppeteerInstance: undefined,
         logLevel,
         server: undefined,
+        offthreadVideoCacheSizeInBytes,
     });
     (0, print_compositions_1.printCompositions)(compositions);
 };

package/dist/config/index.d.ts

@@ -246,6 +246,7 @@ type FlatConfig = RemotionConfigObject & RemotionBundlingOptions & {
      * See the Encoding guide in the docs for defaults and available options.
      */
     setAudioCodec: (codec: 'pcm-16' | 'aac' | 'mp3' | 'opus') => void;
+    setOffthreadVideoCacheSizeInBytes: (size: number | null) => void;
     /**
      * @deprecated 'The config format has changed. Change `Config.Bundling.*()` calls to `Config.*()` in your config file.'
      */
@@ -325,4 +326,5 @@ export declare const ConfigInternals: {
     getWebpackPolling: () => number | null;
     getShouldOpenBrowser: () => boolean;
     getChromiumUserAgent: () => string | null;
+    getOffthreadVideoCacheSizeInBytes: () => number | null;
 };

package/dist/config/index.js

@@ -69,6 +69,7 @@ const max_timeline_tracks_2 = require("./max-timeline-tracks");
 const muted_1 = require("./muted");
 const number_of_gif_loops_1 = require("./number-of-gif-loops");
 const number_of_shared_audio_tags_1 = require("./number-of-shared-audio-tags");
+const offthread_video_cache_size_1 = require("./offthread-video-cache-size");
 const open_browser_1 = require("./open-browser");
 const output_location_2 = require("./output-location");
 const override_webpack_2 = require("./override-webpack");
@@ -153,6 +154,7 @@ exports.Config = {
     overrideWidth: width_1.overrideWidth,
     overrideFfmpegCommand: ffmpeg_override_1.setFfmpegOverrideFunction,
     setAudioCodec: audio_codec_1.setAudioCodec,
+    setOffthreadVideoCacheSizeInBytes: offthread_video_cache_size_1.setOffthreadVideoCacheSizeInBytes,
 };
 exports.ConfigInternals = {
     getRange: frame_range_1.getRange,
@@ -204,4 +206,5 @@ exports.ConfigInternals = {
     getWebpackPolling: webpack_poll_1.getWebpackPolling,
     getShouldOpenBrowser: open_browser_1.getShouldOpenBrowser,
     getChromiumUserAgent: user_agent_1.getChromiumUserAgent,
+    getOffthreadVideoCacheSizeInBytes: offthread_video_cache_size_1.getOffthreadVideoCacheSizeInBytes,
 };

package/dist/config/offthread-video-cache-size.d.ts

@@ -0,0 +1,2 @@
+export declare const getOffthreadVideoCacheSizeInBytes: () => number | null;
+export declare const setOffthreadVideoCacheSizeInBytes: (size: number | null) => void;

package/dist/config/offthread-video-cache-size.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setOffthreadVideoCacheSizeInBytes = exports.getOffthreadVideoCacheSizeInBytes = void 0;
+let offthreadVideoCacheSizeInBytes = null;
+const getOffthreadVideoCacheSizeInBytes = () => {
+    return offthreadVideoCacheSizeInBytes;
+};
+exports.getOffthreadVideoCacheSizeInBytes = getOffthreadVideoCacheSizeInBytes;
+const setOffthreadVideoCacheSizeInBytes = (size) => {
+    offthreadVideoCacheSizeInBytes = size;
+};
+exports.setOffthreadVideoCacheSizeInBytes = setOffthreadVideoCacheSizeInBytes;

package/dist/editor/components/Modals.js

@@ -16,7 +16,7 @@ const UpdateModal_1 = require("./UpdateModal/UpdateModal");
 const Modals = () => {
     const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
     const canRender = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).type === 'connected';
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && ((0, jsx_runtime_1.jsx)(NewComposition_1.default, { initialCompType: modalContextType.compType })), modalContextType && canRender && modalContextType.type === 'render' && ((0, jsx_runtime_1.jsx)(RenderModal_1.RenderModalWithLoader, { initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialOutName: modalContextType.initialOutName, initialScale: modalContextType.initialScale, initialVerbose: modalContextType.initialVerbose, initialRenderType: modalContextType.initialRenderType, initialVideoCodecForAudioTab: modalContextType.initialVideoCodecForAudioTab, initialVideoCodecForVideoTab: modalContextType.initialVideoCodecForVideoTab, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialAudioCodec: modalContextType.initialAudioCodec, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark })), modalContextType &&
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && ((0, jsx_runtime_1.jsx)(NewComposition_1.default, { initialCompType: modalContextType.compType })), modalContextType && canRender && modalContextType.type === 'render' && ((0, jsx_runtime_1.jsx)(RenderModal_1.RenderModalWithLoader, { initialFrame: modalContextType.initialFrame, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialOutName: modalContextType.initialOutName, initialScale: modalContextType.initialScale, initialVerbose: modalContextType.initialVerbose, initialRenderType: modalContextType.initialRenderType, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialVideoCodecForAudioTab: modalContextType.initialVideoCodecForAudioTab, initialVideoCodecForVideoTab: modalContextType.initialVideoCodecForVideoTab, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialAudioCodec: modalContextType.initialAudioCodec, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark })), modalContextType &&
                 canRender &&
                 modalContextType.type === 'render-progress' && ((0, jsx_runtime_1.jsx)(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && ((0, jsx_runtime_1.jsx)(UpdateModal_1.UpdateModal, { info: modalContextType.info })), modalContextType && modalContextType.type === 'quick-switcher' && ((0, jsx_runtime_1.jsx)(QuickSwitcher_1.default, { invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode }))] }));
 };

package/dist/editor/components/NewComposition/NewCompCode.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export declare const getNewCompositionCode: ({ type, height, width, fps, durationInFrames, name, raw, }: {
     type: 'still' | 'composition';
     height: number;

package/dist/editor/components/NewComposition/RemInput.d.ts

@@ -12,6 +12,6 @@ export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
     status: 'error' | 'warning' | 'ok';
     isFocused: boolean;
     isHovered: boolean;
-}) => "hsla(0, 0%, 100%, 0.15)" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)" | "#ff3232" | "#f1c40f";
+}) => "hsla(0, 0%, 100%, 0.15)" | "#ff3232" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)" | "#f1c40f";
 export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "key" | keyof React.InputHTMLAttributes<HTMLInputElement> | "status" | "rightAlign"> & React.RefAttributes<HTMLInputElement>>;
 export {};

package/dist/editor/components/Notifications/ServerDisconnected.js

@@ -38,14 +38,15 @@ window.addEventListener('beforeunload', () => {
 });
 const ServerDisconnected = () => {
     const ctx = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const fav = document.getElementById('__remotion_favicon');
     if (ctx.type !== 'disconnected') {
+        fav.setAttribute('href', '/remotion.png');
         return null;
     }
     if (pageIsGoingToReload) {
         return null;
     }
     const base64Favicon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAYAAABw4pVUAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAARiSURBVHgB7d1NThRBFAfw/2tGgru5gXMD8QZ4AmVjAi6kN0TiAm8gnkBcGARNumcx4E48Ae0JaE9gewLHlQSZelaNgyHGL/RVd1X3+y10RQL58+rVx1QBKKWUUkoppZRSSimllFJKKVUjQs32stEiJcktZiwxzKL9Fvqzb6S0/44JVBKbtwa9aj29U6JjagtkJzsYzBEyBi9d5utsQIULCcxvelgo03R5jBarJZCXw/17E+bt82r4Hy4gtuEQekUbK8h7IHvDV5vMZht+VAlRfmYw3EhXKrSA10Ce2X7RIzpGDVzlgM1wPb2bI2JeA9nN99/b/waoV+XCmTAex1g13gLZyUZrdjjJ0CAbTB5bMN4C2ctHxwxaRABiCsZLIG6KmxC/R2BiCCaBBwn4NgJk10B2GOWj3Wz/IQLlpUL28oOjyy4AG1AZppuhVYt4hWRZ1o8gDGc6rL4YHjxCQMQDOcNCEI38bxnmLTc9d30PARAPZAITZP/4A1ctx3bjcw0NEw8koeQ64tRnu25qeggTb+q2/BmRcyv9K7yw3MTOsmiFuLMOtICblJzS5+Mm+opoIBOgFYHMuL5yVHcoooFQuwJxag9FNJCIG/rv1BqKaCDfzshbqbZQxAJxK3SJI9qATUPJstdef0axQGJbof+jwRc6eQ2PxAIx4DZXx3duSrybv3oCTyR7yACdYR762sIXDKQbFfId4ZGPJi8YCA3QLf05YvF+IhYIEV1Dx9hNu8XdbLQFQV6OcDuFaFNyKiwWiJ19DNBN/VN8XoMQrRABDFqCEJ32CiBisT08rRAZAwjRQAKjgcgQO+rVQARMb3gJ0UAkML+DEA1EwAQkdkNMcnOx1Zcxf8V9ol7y88GSm4tdDKRy1xsgSIes/0BM4ndN5HZ7OzZkMePperqSQ5jkkFWhO6r76WrYJ4b2N+YTumF60QeeSG6/d2DI4rHvW1eCPaT9Q9YZw/sVOMlZVoUWM8zpg/Su97dVJGdZFVrKhbFR05MdYoFcwWmF1rF9kbG8UeP7KaI3qBp628QTHrueUccwdZHw/ZDWNHY7tU1u1B2GIxqIYSO2Dd0Ud79wnq/eaOpBgR4EMVDW/oijINu87d7U6hYaJBrInA0k0iu4bvVtZ1KrBRrm4Vr06GNkF3cO7RCVhvK4pmiFOISkjOStk1lVrBQIiPh5SAyN3fWKWeMuEBjxCmEkh3bVvokAzd5idL2iQqDEA1nASXmK+XFIfeTCo5gFAudllvo8G20TUeNVElMQ58QrxLHD1jbB3GumSnhsz7qHE9BhTEGc87aOm16KJHi7rfqj8yfI53E1j/l9eK8L651stJUQeXx/iuzU1QztZLGIsRp+xvtOh3Qo3/qCedumEC6qZetpJztwz7O6UAa4FNsP7ELTfXbWbskUdjgq9M9VCJoFcwvTlfyPDd9t3XNJjA+2IZcGpmxi+7tpjW3OupurJziZhtKWPzWhlFJKKaWUUkoppZRSSiml/uwrgZ/Bfwo/wccAAAAASUVORK5CYII=';
-    const fav = document.getElementById('__remotion_favicon');
     fav.setAttribute('href', base64Favicon);
     return ((0, jsx_runtime_1.jsx)("div", { style: container, className: "css-reset", children: (0, jsx_runtime_1.jsxs)("div", { style: message, children: ["The studio server has disconnected. ", (0, jsx_runtime_1.jsx)("br", {}), window.remotion_studioServerCommand ? ((0, jsx_runtime_1.jsxs)("span", { children: ["Run", ' ', (0, jsx_runtime_1.jsx)("code", { style: inlineCode, children: window.remotion_studioServerCommand }), ' ', "to run it again."] })) : ((0, jsx_runtime_1.jsx)("span", { children: "Fast refresh will not work." }))] }) }));
 };

package/dist/editor/components/RenderButton.js

@@ -95,6 +95,7 @@ const RenderButton = () => {
             initialOpenGlRenderer: defaults.openGlRenderer,
             initialHeadless: defaults.headless,
             initialIgnoreCertificateErrors: defaults.ignoreCertificateErrors,
+            initialOffthreadVideoCacheSizeInBytes: defaults.offthreadVideoCacheSizeInBytes,
             defaultProps: (_c = props[video.id]) !== null && _c !== void 0 ? _c : video.defaultProps,
             inFrameMark: inFrame,
             outFrameMark: outFrame,

package/dist/editor/components/RenderModal/CrfSetting.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { Codec, RemotionOption } from '@remotion/renderer';
+import type { AnyRemotionOption, Codec } from '@remotion/renderer';
 export declare const useCrfState: (codec: Codec) => {
     crf: number;
     setCrf: import("react").Dispatch<import("react").SetStateAction<number>>;
@@ -11,5 +11,5 @@ export declare const CrfSetting: React.FC<{
     setCrf: React.Dispatch<React.SetStateAction<number>>;
     min: number;
     max: number;
-    option: RemotionOption;
+    option: AnyRemotionOption;
 }>;

package/dist/editor/components/RenderModal/EnforceAudioTrackSetting.d.ts

@@ -1,8 +1,8 @@
-import type { RemotionOption } from '@remotion/renderer';
+import type { AnyRemotionOption } from '@remotion/renderer';
 import React from 'react';
 export declare const EnforceAudioTrackSetting: React.FC<{
     enforceAudioTrack: boolean;
     setEnforceAudioTrack: React.Dispatch<React.SetStateAction<boolean>>;
     muted: boolean;
-    option: RemotionOption;
+    option: AnyRemotionOption;
 }>;

package/dist/editor/components/RenderModal/MutedSetting.d.ts

@@ -1,8 +1,8 @@
-import type { RemotionOption } from '@remotion/renderer';
+import type { AnyRemotionOption } from '@remotion/renderer';
 import React from 'react';
 export declare const MutedSetting: React.FC<{
     muted: boolean;
     setMuted: React.Dispatch<React.SetStateAction<boolean>>;
     enforceAudioTrack: boolean;
-    hint: RemotionOption;
+    hint: AnyRemotionOption;
 }>;

package/dist/editor/components/RenderModal/NumberSetting.d.ts

@@ -1,4 +1,4 @@
-import type { RemotionOption } from '@remotion/renderer';
+import type { AnyRemotionOption } from '@remotion/renderer';
 import React from 'react';
 export declare const NumberSetting: React.FC<{
     name: string;
@@ -8,5 +8,5 @@ export declare const NumberSetting: React.FC<{
     min: number;
     step: number;
     formatter?: (value: string | number) => string;
-    hint?: RemotionOption;
+    hint?: AnyRemotionOption;
 }>;

package/dist/editor/components/RenderModal/OptionExplainer.d.ts

@@ -1,5 +1,5 @@
-import type { RemotionOption } from '@remotion/renderer';
+import type { AnyRemotionOption } from '@remotion/renderer';
 import React from 'react';
 export declare const OptionExplainer: React.FC<{
-    option: RemotionOption;
+    option: AnyRemotionOption;
 }>;

package/dist/editor/components/RenderModal/RenderModal.d.ts

@@ -31,6 +31,7 @@ type RenderModalProps = {
     initialDisableWebSecurity: boolean;
     initialGl: OpenGlRenderer | null;
     initialIgnoreCertificateErrors: boolean;
+    initialOffthreadVideoCacheSizeInBytes: number | null;
     initialHeadless: boolean;
     defaultProps: Record<string, unknown>;
     inFrameMark: number | null;

package/dist/editor/components/RenderModal/RenderModal.js

@@ -114,7 +114,7 @@ const outer = {
     display: 'flex',
     flexDirection: 'column',
 };
-const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageFormat, initialJpegQuality, initialScale, initialVerbose, initialOutName, initialRenderType, initialVideoCodecForAudioTab, initialVideoCodecForVideoTab, initialConcurrency, maxConcurrency, minConcurrency, initialMuted, initialEnforceAudioTrack, initialProResProfile, initialx264Preset, initialPixelFormat, initialVideoBitrate, initialAudioBitrate, initialEveryNthFrame, initialNumberOfGifLoops, initialDelayRenderTimeout, initialAudioCodec, initialEnvVariables, initialDisableWebSecurity, initialGl, initialHeadless, initialIgnoreCertificateErrors, defaultProps, inFrameMark, outFrameMark, onClose, resolvedComposition, unresolvedComposition, }) => {
+const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageFormat, initialJpegQuality, initialScale, initialVerbose, initialOutName, initialRenderType, initialVideoCodecForAudioTab, initialVideoCodecForVideoTab, initialConcurrency, maxConcurrency, minConcurrency, initialMuted, initialEnforceAudioTrack, initialProResProfile, initialx264Preset, initialPixelFormat, initialVideoBitrate, initialAudioBitrate, initialEveryNthFrame, initialNumberOfGifLoops, initialDelayRenderTimeout, initialOffthreadVideoCacheSizeInBytes, initialAudioCodec, initialEnvVariables, initialDisableWebSecurity, initialGl, initialHeadless, initialIgnoreCertificateErrors, defaultProps, inFrameMark, outFrameMark, onClose, resolvedComposition, unresolvedComposition, }) => {
     const isMounted = (0, react_1.useRef)(true);
     const [state, dispatch] = (0, react_1.useReducer)(reducer, initialState);
     const [unclampedFrame, setFrame] = (0, react_1.useState)(() => initialFrame);
@@ -160,6 +160,7 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
     const [limitNumberOfGifLoops, setLimitNumberOfGifLoops] = (0, react_1.useState)(() => initialNumberOfGifLoops !== null);
     const [numberOfGifLoopsSetting, setNumberOfGifLoopsSetting] = (0, react_1.useState)(() => initialNumberOfGifLoops !== null && initialNumberOfGifLoops !== void 0 ? initialNumberOfGifLoops : 1);
     const [delayRenderTimeout, setDelayRenderTimeout] = (0, react_1.useState)(() => initialDelayRenderTimeout);
+    const [offthreadVideoCacheSizeInBytes, setOffthreadVideoCacheSizeInBytes] = (0, react_1.useState)(initialOffthreadVideoCacheSizeInBytes);
     const codec = (0, react_1.useMemo)(() => {
         if (renderMode === 'audio') {
             return videoCodecForAudioTab;
@@ -333,6 +334,7 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
             delayRenderTimeout,
             envVariables: (0, convert_env_variables_1.envVariablesArrayToObject)(envVariables),
             inputProps,
+            offthreadVideoCacheSizeInBytes,
         })
             .then(() => {
             dispatchIfMounted({ type: 'succeed' });
@@ -355,6 +357,7 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
         delayRenderTimeout,
         envVariables,
         inputProps,
+        offthreadVideoCacheSizeInBytes,
         onClose,
     ]);
     const [everyNthFrameSetting, setEveryNthFrameSetting] = (0, react_1.useState)(() => initialEveryNthFrame);
@@ -398,6 +401,7 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
             chromiumOptions,
             envVariables: (0, convert_env_variables_1.envVariablesArrayToObject)(envVariables),
             inputProps,
+            offthreadVideoCacheSizeInBytes,
         })
             .then(() => {
             dispatchIfMounted({ type: 'succeed' });
@@ -437,6 +441,7 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
         chromiumOptions,
         envVariables,
         inputProps,
+        offthreadVideoCacheSizeInBytes,
         onClose,
     ]);
     (0, react_1.useEffect)(() => {
@@ -594,7 +599,7 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
     return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: `Render ${resolvedComposition.id}` }), (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: renderTabOptions, needsWrapping: false }), (0, jsx_runtime_1.jsx)("div", { style: flexer }), (0, jsx_runtime_1.jsxs)(Button_1.Button, { autoFocus: true, onClick: trigger, disabled: renderDisabled, style: {
                             ...buttonStyle,
                             backgroundColor: outnameValidation.valid ? colors_1.BLUE : colors_1.BLUE_DISABLED,
-                        }, children: [state.type === 'idle' ? `Render ${renderMode}` : 'Rendering...', (0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: horizontalLayout, children: [(0, jsx_runtime_1.jsxs)("div", { style: leftSidebar, children: [shownTabs.includes('general') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(file_1.FileIcon, { style: icon }) }), "General"] })) : null, shownTabs.includes('data') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(data_1.DataIcon, { style: icon }) }), "Input Props"] })) : null, shownTabs.includes('picture') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(frame_1.PicIcon, { style: icon }) }), "Picture"] })) : null, shownTabs.includes('audio') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(audio_1.AudioIcon, { style: icon }) }), "Audio"] })) : null, shownTabs.includes('gif') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'gif', onClick: () => setTab('gif'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(gif_1.GifIcon, { style: icon }) }), "GIF"] })) : null, shownTabs.includes('advanced') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(gear_1.GearIcon, { style: icon }) }), "Other"] })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? ((0, jsx_runtime_1.jsx)(RenderModalBasic_1.RenderModalBasic, { codec: codec, resolvedComposition: resolvedComposition, frame: frame, imageFormatOptions: imageFormatOptions, outName: outName, proResProfile: proResProfile, renderMode: renderMode, setVideoCodec: setCodec, setFrame: setFrame, setOutName: setOutName, setProResProfile: setProResProfile, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, startFrame: startFrame, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message })) : tab === 'picture' ? ((0, jsx_runtime_1.jsx)(RenderModalPicture_1.RenderModalPicture, { renderMode: renderMode, scale: scale, setScale: setScale, pixelFormat: pixelFormat, setPixelFormat: setPixelFormat, imageFormatOptions: imageFormatOptions, crf: crf, setCrf: setCrf, customTargetVideoBitrate: customTargetVideoBitrate, maxCrf: maxCrf, minCrf: minCrf, jpegQuality: jpegQuality, qualityControlType: qualityControlType, setJpegQuality: setJpegQuality, setCustomTargetVideoBitrateValue: setCustomTargetVideoBitrateValue, setQualityControl: setQualityControl, videoImageFormat: videoImageFormat, stillImageFormat: stillImageFormat, shouldDisplayQualityControlPicker: supportsBothQualityControls })) : tab === 'audio' ? ((0, jsx_runtime_1.jsx)(RenderModalAudio_1.RenderModalAudio, { muted: muted, renderMode: renderMode, setMuted: setMuted, codec: codec, audioCodec: audioCodec, setAudioCodec: setAudioCodec, enforceAudioTrack: enforceAudioTrack, setEnforceAudioTrackState: setEnforceAudioTrackState, customTargetAudioBitrate: customTargetAudioBitrate, setCustomTargetAudioBitrateValue: setCustomTargetAudioBitrateValue, setShouldHaveCustomTargetAudioBitrate: setShouldHaveCustomTargetAudioBitrate, shouldHaveCustomTargetAudioBitrate: shouldHaveCustomTargetAudioBitrate })) : tab === 'gif' ? ((0, jsx_runtime_1.jsx)(RenderModalGif_1.RenderModalGif, { everyNthFrame: everyNthFrame, limitNumberOfGifLoops: limitNumberOfGifLoops, numberOfGifLoopsSetting: numberOfGifLoopsSetting, setEveryNthFrameSetting: setEveryNthFrameSetting, setLimitNumberOfGifLoops: setLimitNumberOfGifLoops, setNumberOfGifLoopsSetting: setNumberOfGifLoopsSetting })) : tab === 'data' ? ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { inputProps: inputProps, setInputProps: setInputProps, unresolvedComposition: unresolvedComposition, mayShowSaveButton: false, propsEditType: "input-props", saving: saving, setSaving: setSaving })) : ((0, jsx_runtime_1.jsx)(RenderModalAdvanced_1.RenderModalAdvanced, { x264Preset: x264Preset, setx264Preset: setx264Preset, concurrency: concurrency, maxConcurrency: maxConcurrency, minConcurrency: minConcurrency, renderMode: renderMode, setConcurrency: setConcurrency, setVerboseLogging: setVerboseLogging, verbose: verbose, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, disallowParallelEncoding: disallowParallelEncoding, setDisallowParallelEncoding: setDisallowParallelEncoding, setDisableWebSecurity: setDisableWebSecurity, setIgnoreCertificateErrors: setIgnoreCertificateErrors, setHeadless: setHeadless, headless: headless, ignoreCertificateErrors: ignoreCertificateErrors, disableWebSecurity: disableWebSecurity, openGlOption: openGlOption, setOpenGlOption: setOpenGlOption, setEnvVariables: setEnvVariables, envVariables: envVariables, codec: codec })) })] })] }));
+                        }, children: [state.type === 'idle' ? `Render ${renderMode}` : 'Rendering...', (0, jsx_runtime_1.jsx)(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })] })] }), (0, jsx_runtime_1.jsxs)("div", { style: horizontalLayout, children: [(0, jsx_runtime_1.jsxs)("div", { style: leftSidebar, children: [shownTabs.includes('general') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'general', onClick: () => setTab('general'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(file_1.FileIcon, { style: icon }) }), "General"] })) : null, shownTabs.includes('data') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'data', onClick: () => setTab('data'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(data_1.DataIcon, { style: icon }) }), "Input Props"] })) : null, shownTabs.includes('picture') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'picture', onClick: () => setTab('picture'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(frame_1.PicIcon, { style: icon }) }), "Picture"] })) : null, shownTabs.includes('audio') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'audio', onClick: () => setTab('audio'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(audio_1.AudioIcon, { style: icon }) }), "Audio"] })) : null, shownTabs.includes('gif') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'gif', onClick: () => setTab('gif'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(gif_1.GifIcon, { style: icon }) }), "GIF"] })) : null, shownTabs.includes('advanced') ? ((0, jsx_runtime_1.jsxs)(vertical_1.VerticalTab, { style: horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), children: [(0, jsx_runtime_1.jsx)("div", { style: iconContainer, children: (0, jsx_runtime_1.jsx)(gear_1.GearIcon, { style: icon }) }), "Other"] })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: optionsPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: tab === 'general' ? ((0, jsx_runtime_1.jsx)(RenderModalBasic_1.RenderModalBasic, { codec: codec, resolvedComposition: resolvedComposition, frame: frame, imageFormatOptions: imageFormatOptions, outName: outName, proResProfile: proResProfile, renderMode: renderMode, setVideoCodec: setCodec, setFrame: setFrame, setOutName: setOutName, setProResProfile: setProResProfile, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, startFrame: startFrame, validationMessage: outnameValidation.valid ? null : outnameValidation.error.message })) : tab === 'picture' ? ((0, jsx_runtime_1.jsx)(RenderModalPicture_1.RenderModalPicture, { renderMode: renderMode, scale: scale, setScale: setScale, pixelFormat: pixelFormat, setPixelFormat: setPixelFormat, imageFormatOptions: imageFormatOptions, crf: crf, setCrf: setCrf, customTargetVideoBitrate: customTargetVideoBitrate, maxCrf: maxCrf, minCrf: minCrf, jpegQuality: jpegQuality, qualityControlType: qualityControlType, setJpegQuality: setJpegQuality, setCustomTargetVideoBitrateValue: setCustomTargetVideoBitrateValue, setQualityControl: setQualityControl, videoImageFormat: videoImageFormat, stillImageFormat: stillImageFormat, shouldDisplayQualityControlPicker: supportsBothQualityControls })) : tab === 'audio' ? ((0, jsx_runtime_1.jsx)(RenderModalAudio_1.RenderModalAudio, { muted: muted, renderMode: renderMode, setMuted: setMuted, codec: codec, audioCodec: audioCodec, setAudioCodec: setAudioCodec, enforceAudioTrack: enforceAudioTrack, setEnforceAudioTrackState: setEnforceAudioTrackState, customTargetAudioBitrate: customTargetAudioBitrate, setCustomTargetAudioBitrateValue: setCustomTargetAudioBitrateValue, setShouldHaveCustomTargetAudioBitrate: setShouldHaveCustomTargetAudioBitrate, shouldHaveCustomTargetAudioBitrate: shouldHaveCustomTargetAudioBitrate })) : tab === 'gif' ? ((0, jsx_runtime_1.jsx)(RenderModalGif_1.RenderModalGif, { everyNthFrame: everyNthFrame, limitNumberOfGifLoops: limitNumberOfGifLoops, numberOfGifLoopsSetting: numberOfGifLoopsSetting, setEveryNthFrameSetting: setEveryNthFrameSetting, setLimitNumberOfGifLoops: setLimitNumberOfGifLoops, setNumberOfGifLoopsSetting: setNumberOfGifLoopsSetting })) : tab === 'data' ? ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { inputProps: inputProps, setInputProps: setInputProps, unresolvedComposition: unresolvedComposition, mayShowSaveButton: false, propsEditType: "input-props", saving: saving, setSaving: setSaving })) : ((0, jsx_runtime_1.jsx)(RenderModalAdvanced_1.RenderModalAdvanced, { x264Preset: x264Preset, setx264Preset: setx264Preset, concurrency: concurrency, maxConcurrency: maxConcurrency, minConcurrency: minConcurrency, renderMode: renderMode, setConcurrency: setConcurrency, setVerboseLogging: setVerboseLogging, verbose: verbose, delayRenderTimeout: delayRenderTimeout, setDelayRenderTimeout: setDelayRenderTimeout, disallowParallelEncoding: disallowParallelEncoding, setDisallowParallelEncoding: setDisallowParallelEncoding, setDisableWebSecurity: setDisableWebSecurity, setIgnoreCertificateErrors: setIgnoreCertificateErrors, setHeadless: setHeadless, headless: headless, ignoreCertificateErrors: ignoreCertificateErrors, disableWebSecurity: disableWebSecurity, openGlOption: openGlOption, setOpenGlOption: setOpenGlOption, setEnvVariables: setEnvVariables, envVariables: envVariables, offthreadVideoCacheSizeInBytes: offthreadVideoCacheSizeInBytes, setOffthreadVideoCacheSizeInBytes: setOffthreadVideoCacheSizeInBytes, codec: codec })) })] })] }));
 };
 const RenderModalWithLoader = (props) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);

package/dist/editor/components/RenderModal/RenderModalAdvanced.d.ts

@@ -26,5 +26,7 @@ export declare const RenderModalAdvanced: React.FC<{
     setEnvVariables: React.Dispatch<React.SetStateAction<[string, string][]>>;
     x264Preset: X264Preset | null;
     setx264Preset: React.Dispatch<React.SetStateAction<X264Preset>>;
+    offthreadVideoCacheSizeInBytes: number | null;
+    setOffthreadVideoCacheSizeInBytes: React.Dispatch<React.SetStateAction<number | null>>;
     codec: Codec;
 }>;

package/dist/editor/components/RenderModal/RenderModalAdvanced.js

@@ -17,13 +17,21 @@ const container = {
     flex: 1,
     overflowY: 'auto',
 };
-const RenderModalAdvanced = ({ renderMode, maxConcurrency, minConcurrency, setConcurrency, concurrency, setVerboseLogging, verbose, delayRenderTimeout, setDelayRenderTimeout, disallowParallelEncoding, setDisallowParallelEncoding, setDisableWebSecurity, setIgnoreCertificateErrors, setHeadless, headless, ignoreCertificateErrors, disableWebSecurity, openGlOption, setOpenGlOption, setEnvVariables, envVariables, setx264Preset, x264Preset, codec, }) => {
+const RenderModalAdvanced = ({ renderMode, maxConcurrency, minConcurrency, setConcurrency, concurrency, setVerboseLogging, verbose, delayRenderTimeout, setDelayRenderTimeout, disallowParallelEncoding, setDisallowParallelEncoding, setDisableWebSecurity, setIgnoreCertificateErrors, setHeadless, headless, ignoreCertificateErrors, disableWebSecurity, openGlOption, setOpenGlOption, setEnvVariables, envVariables, setx264Preset, x264Preset, codec, offthreadVideoCacheSizeInBytes, setOffthreadVideoCacheSizeInBytes, }) => {
     const extendedOpenGlOptions = (0, react_1.useMemo)(() => {
         return ['angle', 'egl', 'swangle', 'swiftshader', 'default'];
     }, []);
     const onVerboseLoggingChanged = (0, react_1.useCallback)((e) => {
         setVerboseLogging(e.target.checked);
     }, [setVerboseLogging]);
+    const toggleCustomOffthreadVideoCacheSizeInBytes = (0, react_1.useCallback)(() => {
+        setOffthreadVideoCacheSizeInBytes((previous) => {
+            if (previous === null) {
+                return 512 * 1024 * 1024;
+            }
+            return null;
+        });
+    }, [setOffthreadVideoCacheSizeInBytes]);
     const onDisallowParallelEncodingChanged = (0, react_1.useCallback)((e) => {
         setDisallowParallelEncoding(e.target.checked);
     }, [setDisallowParallelEncoding]);
@@ -69,10 +77,22 @@ const RenderModalAdvanced = ({ renderMode, maxConcurrency, minConcurrency, setCo
             };
         });
     }, [setx264Preset, x264Preset]);
+    const changeOffthreadVideoCacheSizeInBytes = (0, react_1.useCallback)((cb) => {
+        setOffthreadVideoCacheSizeInBytes((prev) => {
+            if (prev === null) {
+                throw new TypeError('Expected previous value');
+            }
+            if (typeof cb === 'function') {
+                return cb(prev);
+            }
+            return cb;
+        });
+    }, [setOffthreadVideoCacheSizeInBytes]);
     return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [renderMode === 'video' && codec === 'h264' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "x264 Preset" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: x264Preset, selectedId: x264Preset, values: x264PresetOptions }) })] })) : null, renderMode === 'still' ? null : ((0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { min: minConcurrency, max: maxConcurrency, step: 1, name: "Concurrency", formatter: (w) => `${w}x`, onValueChanged: setConcurrency, value: concurrency })), (0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting
             // Also appears in packages/renderer/src/validate-puppeteer-timeout.ts
             , { 
                 // Also appears in packages/renderer/src/validate-puppeteer-timeout.ts
-                min: 7000, max: 900000, name: "delayRender() timeout", onValueChanged: setDelayRenderTimeout, formatter: (w) => `${w}ms`, step: 1000, value: delayRenderTimeout }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "No parallel encoding" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: disallowParallelEncoding, onChange: onDisallowParallelEncodingChanged, name: "disallow-parallel-encoding" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Verbose logging" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: verbose, onChange: onVerboseLoggingChanged, name: "verbose-logging" }) })] }), (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Disable web security" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: disableWebSecurity, onChange: onDisableWebSecurityChanged, name: "disable-web-security" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Ignore certificate errors " }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: ignoreCertificateErrors, onChange: onIgnoreCertificatErrors, name: "ignore-certificate-errors" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Headless mode" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: headless, onChange: onHeadless, name: "headless" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "OpenGL render backend" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: openGlOptions, selectedId: openGlOption, title: "OpenGl option" }) })] }), (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}), (0, jsx_runtime_1.jsx)(RenderModalEnvironmentVariables_1.RenderModalEnvironmentVariables, { envVariables: envVariables, setEnvVariables: setEnvVariables })] }));
+                min: 7000, max: 900000, name: "delayRender() timeout", onValueChanged: setDelayRenderTimeout, formatter: (w) => `${w}ms`, step: 1000, value: delayRenderTimeout }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "No parallel encoding" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: disallowParallelEncoding, onChange: onDisallowParallelEncodingChanged, name: "disallow-parallel-encoding" }) })] }), renderMode === 'audio' ? null : ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Custom OffthreadVideo cache" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: offthreadVideoCacheSizeInBytes !== null, onChange: toggleCustomOffthreadVideoCacheSizeInBytes, name: "custom-audio-bitrate" }) })] })), renderMode === 'audio' ||
+                offthreadVideoCacheSizeInBytes === null ? null : ((0, jsx_runtime_1.jsx)(NumberSetting_1.NumberSetting, { min: minConcurrency, max: 2000 * 1024 * 1024, step: 1024, name: "OffthreadVideo cache size", formatter: (w) => `${w} bytes`, onValueChanged: changeOffthreadVideoCacheSizeInBytes, value: offthreadVideoCacheSizeInBytes })), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Verbose logging" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: verbose, onChange: onVerboseLoggingChanged, name: "verbose-logging" }) })] }), (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Disable web security" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: disableWebSecurity, onChange: onDisableWebSecurityChanged, name: "disable-web-security" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Ignore certificate errors " }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: ignoreCertificateErrors, onChange: onIgnoreCertificatErrors, name: "ignore-certificate-errors" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Headless mode" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(Checkbox_1.Checkbox, { checked: headless, onChange: onHeadless, name: "headless" }) })] }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "OpenGL render backend" }), (0, jsx_runtime_1.jsx)("div", { style: layout_1.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: openGlOptions, selectedId: openGlOption, title: "OpenGl option" }) })] }), (0, jsx_runtime_1.jsx)(RenderModalHr_1.RenderModalHr, {}), (0, jsx_runtime_1.jsx)(RenderModalEnvironmentVariables_1.RenderModalEnvironmentVariables, { envVariables: envVariables, setEnvVariables: setEnvVariables })] }));
 };
 exports.RenderModalAdvanced = RenderModalAdvanced;

package/dist/editor/components/RenderModal/RenderModalPicture.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import type { SegmentedControlItem } from '../SegmentedControl';
 import type { RenderType } from './RenderModalAdvanced';
 declare const qualityControlModes: readonly ["crf", "bitrate"];
-export type QualityControl = typeof qualityControlModes[number];
+export type QualityControl = (typeof qualityControlModes)[number];
 export declare const RenderModalPicture: React.FC<{
     renderMode: RenderType;
     scale: number;

package/dist/editor/components/RenderModal/SchemaEditor/input-props-serialization.d.ts

@@ -0,0 +1,14 @@
+export type SerializedJSONWithCustomFields = {
+    serializedString: string;
+    customDateUsed: boolean;
+    customFileUsed: boolean;
+    mapUsed: boolean;
+    setUsed: boolean;
+};
+export declare const FILE_TOKEN = "remotion-file:";
+export declare const serializeJSONWithDate: ({ data, indent, staticBase, }: {
+    data: unknown;
+    indent: number | undefined;
+    staticBase: string;
+}) => SerializedJSONWithCustomFields;
+export declare const deserializeJSONWithCustomFields: (data: string) => any;

package/dist/editor/components/RenderModal/SchemaEditor/input-props-serialization.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.deserializeJSONWithCustomFields = exports.serializeJSONWithDate = exports.FILE_TOKEN = void 0;
+const DATE_TOKEN = 'remotion-date:';
+exports.FILE_TOKEN = 'remotion-file:';
+const serializeJSONWithDate = ({ data, indent, staticBase, }) => {
+    let customDateUsed = false;
+    let customFileUsed = false;
+    let mapUsed = false;
+    let setUsed = false;
+    const serializedString = JSON.stringify(data, function (key, value) {
+        const item = this[key];
+        if (item instanceof Date) {
+            customDateUsed = true;
+            return `${DATE_TOKEN}${item.toISOString()}`;
+        }
+        if (item instanceof Map) {
+            mapUsed = true;
+            return value;
+        }
+        if (item instanceof Set) {
+            setUsed = true;
+            return value;
+        }
+        if (typeof item === 'string' && item.startsWith(staticBase)) {
+            customFileUsed = true;
+            return `${exports.FILE_TOKEN}${item.replace(staticBase + '/', '')}`;
+        }
+        return value;
+    }, indent);
+    return { serializedString, customDateUsed, customFileUsed, mapUsed, setUsed };
+};
+exports.serializeJSONWithDate = serializeJSONWithDate;
+const deserializeJSONWithCustomFields = (data) => {
+    return JSON.parse(data, (_, value) => {
+        if (typeof value === 'string' && value.startsWith(DATE_TOKEN)) {
+            return new Date(value.replace(DATE_TOKEN, ''));
+        }
+        return value;
+    });
+};
+exports.deserializeJSONWithCustomFields = deserializeJSONWithCustomFields;

package/dist/editor/components/RenderModal/layout.js

@@ -12,7 +12,7 @@ exports.optionRow = {
     paddingBottom: 8,
 };
 exports.label = {
-    width: 170,
+    width: 220,
     fontSize: 15,
     lineHeight: '40px',
     color: colors_1.LIGHT_TEXT,

package/dist/editor/components/RenderQueue/actions.d.ts

@@ -2,7 +2,7 @@ import type { AudioCodec, Codec, PixelFormat, ProResProfile, StillImageFormat, V
 import type { RenderJob } from '../../../preview-server/render-queue/job';
 import type { RequiredChromiumOptions } from '../../../required-chromium-options';
 import type { EnumPath } from '../RenderModal/SchemaEditor/extract-enum-json-paths';
-export declare const addStillRenderJob: ({ compositionId, outName, imageFormat, jpegQuality, frame, scale, verbose, chromiumOptions, delayRenderTimeout, envVariables, inputProps, }: {
+export declare const addStillRenderJob: ({ compositionId, outName, imageFormat, jpegQuality, frame, scale, verbose, chromiumOptions, delayRenderTimeout, envVariables, inputProps, offthreadVideoCacheSizeInBytes, }: {
     compositionId: string;
     outName: string;
     imageFormat: StillImageFormat;
@@ -14,8 +14,9 @@ export declare const addStillRenderJob: ({ compositionId, outName, imageFormat,
     delayRenderTimeout: number;
     envVariables: Record<string, string>;
     inputProps: Record<string, unknown>;
+    offthreadVideoCacheSizeInBytes: number | null;
 }) => Promise<undefined>;
-export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat, jpegQuality, scale, verbose, codec, concurrency, crf, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, x264Preset, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, }: {
+export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat, jpegQuality, scale, verbose, codec, concurrency, crf, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, x264Preset, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, offthreadVideoCacheSizeInBytes, }: {
     compositionId: string;
     outName: string;
     imageFormat: VideoImageFormat;
@@ -42,6 +43,7 @@ export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat,
     chromiumOptions: RequiredChromiumOptions;
     envVariables: Record<string, string>;
     inputProps: Record<string, unknown>;
+    offthreadVideoCacheSizeInBytes: number | null;
 }) => Promise<undefined>;
 export declare const unsubscribeFromFileExistenceWatcher: ({ file, clientId, }: {
     file: string;

package/dist/editor/components/RenderQueue/actions.js

@@ -26,7 +26,7 @@ const callApi = (endpoint, body, signal) => {
         });
     });
 };
-const addStillRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, frame, scale, verbose, chromiumOptions, delayRenderTimeout, envVariables, inputProps, }) => {
+const addStillRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, frame, scale, verbose, chromiumOptions, delayRenderTimeout, envVariables, inputProps, offthreadVideoCacheSizeInBytes, }) => {
     return callApi('/api/render', {
         compositionId,
         type: 'still',
@@ -44,10 +44,11 @@ const addStillRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, f
             staticBase: window.remotion_staticBase,
             indent: undefined,
         }).serializedString,
+        offthreadVideoCacheSizeInBytes,
     });
 };
 exports.addStillRenderJob = addStillRenderJob;
-const addVideoRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, scale, verbose, codec, concurrency, crf, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, x264Preset, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, }) => {
+const addVideoRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, scale, verbose, codec, concurrency, crf, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, x264Preset, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, offthreadVideoCacheSizeInBytes, }) => {
     return callApi('/api/render', {
         compositionId,
         type: 'video',
@@ -80,6 +81,7 @@ const addVideoRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, s
             staticBase: window.remotion_staticBase,
             indent: undefined,
         }).serializedString,
+        offthreadVideoCacheSizeInBytes,
     });
 };
 exports.addVideoRenderJob = addVideoRenderJob;