@remotion/cli 4.0.21 → 4.0.23

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, 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]
@@ -201,6 +202,7 @@ const benchmarkCommand = async (remotionRoot, args) => {
                 overwrite,
                 pixelFormat,
                 proResProfile,
+                x264Preset,
                 jpegQuality,
                 chromiumOptions,
                 timeoutInMilliseconds: config_1.ConfigInternals.getCurrentPuppeteerTimeout(),
@@ -234,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/image-format.d.ts

@@ -2,4 +2,4 @@ import type { StillImageFormat, VideoImageFormat } from '@remotion/renderer';
 export declare const setStillImageFormat: (format: StillImageFormat) => void;
 export declare const setVideoImageFormat: (format: VideoImageFormat) => void;
 export declare const getUserPreferredStillImageFormat: () => "png" | "jpeg" | "pdf" | "webp" | undefined;
-export declare const getUserPreferredVideoImageFormat: () => "png" | "jpeg" | "none" | undefined;
+export declare const getUserPreferredVideoImageFormat: () => "none" | "png" | "jpeg" | undefined;

package/dist/config/index.d.ts

@@ -220,6 +220,7 @@ declare global {
          * See https://avpres.net/FFmpeg/im_ProRes.html for meaning of possible values.
          */
         readonly setProResProfile: (profile: '4444-xq' | '4444' | 'hq' | 'standard' | 'light' | 'proxy' | undefined) => void;
+        readonly setX264Preset: (profile: 'ultrafast' | 'superfast' | 'veryfast' | 'faster' | 'fast' | 'medium' | 'slow' | 'slower' | 'veryslow' | 'placebo' | undefined) => void;
         /**
          * Override the arguments that Remotion passes to FFMPEG.
          * Consult https://remotion.dev/docs/renderer/render-media#ffmpegoverride before using this feature.
@@ -245,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.'
      */
@@ -278,6 +280,7 @@ export declare const ConfigInternals: {
     getBrowser: () => null;
     getPixelFormat: () => "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";
     getProResProfile: () => "4444-xq" | "4444" | "hq" | "standard" | "light" | "proxy" | undefined;
+    getPresetProfile: () => "medium" | "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "slow" | "slower" | "veryslow" | "placebo" | undefined;
     getShouldOverwrite: ({ defaultValue, }: {
         defaultValue: boolean;
     }) => boolean;
@@ -297,7 +300,7 @@ export declare const ConfigInternals: {
     getShouldOutputImageSequence: (frameRange: FrameRange | null) => boolean;
     getDotEnvLocation: () => string | null;
     getUserPreferredStillImageFormat: () => "png" | "jpeg" | "pdf" | "webp" | undefined;
-    getUserPreferredVideoImageFormat: () => "png" | "jpeg" | "none" | undefined;
+    getUserPreferredVideoImageFormat: () => "none" | "png" | "jpeg" | undefined;
     getWebpackOverrideFn: () => WebpackOverrideFn;
     getWebpackCaching: () => boolean;
     getOutputLocation: () => string | null;
@@ -323,4 +326,5 @@ export declare const ConfigInternals: {
     getWebpackPolling: () => number | null;
     getShouldOpenBrowser: () => boolean;
     getChromiumUserAgent: () => string | null;
+    getOffthreadVideoCacheSizeInBytes: () => number | null;
 };

package/dist/config/index.js

@@ -46,6 +46,7 @@ const scale_1 = require("./scale");
 const still_frame_1 = require("./still-frame");
 const timeout_1 = require("./timeout");
 const webpack_caching_1 = require("./webpack-caching");
+const x264_preset_1 = require("./x264-preset");
 const audio_codec_1 = require("./audio-codec");
 const bitrate_1 = require("./bitrate");
 const browser_executable_2 = require("./browser-executable");
@@ -68,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");
@@ -82,6 +84,7 @@ const user_agent_1 = require("./user-agent");
 const webpack_caching_2 = require("./webpack-caching");
 const webpack_poll_1 = require("./webpack-poll");
 const width_1 = require("./width");
+const x264_preset_2 = require("./x264-preset");
 exports.Config = {
     get Bundling() {
         throw new Error('The config format has changed. Change `Config.Bundling.*()` calls to `Config.*()` in your config file.');
@@ -144,12 +147,14 @@ exports.Config = {
     setCrf: crf_1.setCrf,
     setImageSequence: image_sequence_2.setImageSequence,
     setProResProfile: prores_profile_2.setProResProfile,
+    setX264Preset: x264_preset_2.setX264Preset,
     setAudioBitrate: bitrate_1.setAudioBitrate,
     setVideoBitrate: bitrate_1.setVideoBitrate,
     overrideHeight: height_1.overrideHeight,
     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,
@@ -157,6 +162,7 @@ exports.ConfigInternals = {
     getBrowser: browser_1.getBrowser,
     getPixelFormat: pixel_format_1.getPixelFormat,
     getProResProfile: prores_profile_1.getProResProfile,
+    getPresetProfile: x264_preset_1.getX264Preset,
     getShouldOverwrite: overwrite_1.getShouldOverwrite,
     getBrowserExecutable: browser_executable_1.getBrowserExecutable,
     getScale: scale_1.getScale,
@@ -200,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/config/x264-preset.d.ts

@@ -0,0 +1,3 @@
+import type { X264Preset } from '@remotion/renderer';
+export declare const getX264Preset: () => X264Preset | undefined;
+export declare const setX264Preset: (profile: X264Preset | undefined) => void;

package/dist/config/x264-preset.js

@@ -0,0 +1,12 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setX264Preset = exports.getX264Preset = void 0;
+let preset;
+const getX264Preset = () => {
+    return preset;
+};
+exports.getX264Preset = getX264Preset;
+const setX264Preset = (profile) => {
+    preset = profile;
+};
+exports.setX264Preset = setX264Preset;

package/dist/editor/components/Editor.js

@@ -29,6 +29,17 @@ const Editor = () => {
         }
         return (0, remotion_1.delayRender)('Waiting for registerRoot()');
     });
+    (0, react_1.useEffect)(() => {
+        const listenToChanges = (e) => {
+            if (window.remotion_unsavedProps) {
+                e.returnValue = 'Are you sure you want to leave?';
+            }
+        };
+        window.addEventListener('beforeunload', listenToChanges);
+        return () => {
+            window.removeEventListener('beforeunload', listenToChanges);
+        };
+    }, []);
     (0, react_1.useEffect)(() => {
         if (Root) {
             return;
@@ -37,7 +48,9 @@ const Editor = () => {
             setRoot(() => NewRoot);
             (0, remotion_1.continueRender)(waitForRoot);
         });
-        return () => cleanup();
+        return () => {
+            cleanup();
+        };
     }, [Root, waitForRoot]);
     return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsxs)(timeline_zoom_1.TimelineZoomContext, { children: [(0, jsx_runtime_1.jsxs)("div", { style: background, children: [Root === null ? null : (0, jsx_runtime_1.jsx)(Root, {}), (0, jsx_runtime_1.jsxs)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [Root === null ? (0, jsx_runtime_1.jsx)(NoRegisterRoot_1.NoRegisterRoot, {}) : (0, jsx_runtime_1.jsx)(EditorContent_1.EditorContent, {}), (0, jsx_runtime_1.jsx)(GlobalKeybindings_1.GlobalKeybindings, {})] }), (0, jsx_runtime_1.jsx)(NotificationCenter_1.NotificationCenter, {})] }), (0, jsx_runtime_1.jsx)(Modals_1.Modals, {})] }) }));
 };

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, 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";
-export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | "rightAlign" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+}) => "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/NewComposition/RemInputTypeColor.d.ts

@@ -4,5 +4,5 @@ type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>
     status: RemInputStatus;
     name: string;
 };
-export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "key" | keyof React.InputHTMLAttributes<HTMLInputElement> | "status"> & React.RefAttributes<HTMLInputElement>>;
 export {};

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

@@ -3,5 +3,5 @@ type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLTextAreaEleme
     status: 'error' | 'warning' | 'ok';
 };
 export declare const inputBaseStyle: React.CSSProperties;
-export declare const RemTextarea: React.ForwardRefExoticComponent<Pick<Props, "status" | "key" | keyof React.InputHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>;
+export declare const RemTextarea: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | keyof React.InputHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>;
 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

@@ -82,6 +82,7 @@ const RenderButton = () => {
             initialMuted: defaults.muted,
             initialEnforceAudioTrack: defaults.enforceAudioTrack,
             initialProResProfile: defaults.proResProfile,
+            initialx264Preset: defaults.x264Preset,
             initialPixelFormat: defaults.pixelFormat,
             initialAudioBitrate: defaults.audioBitrate,
             initialVideoBitrate: defaults.videoBitrate,
@@ -94,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

@@ -1,4 +1,4 @@
-import type { AudioCodec, Codec, OpenGlRenderer, PixelFormat, ProResProfile, StillImageFormat, VideoImageFormat } from '@remotion/renderer';
+import type { AudioCodec, Codec, OpenGlRenderer, PixelFormat, ProResProfile, StillImageFormat, VideoImageFormat, X264Preset } from '@remotion/renderer';
 import React from 'react';
 import type { RenderType } from './RenderModalAdvanced';
 type RenderModalProps = {
@@ -20,6 +20,7 @@ type RenderModalProps = {
     initialMuted: boolean;
     initialEnforceAudioTrack: boolean;
     initialProResProfile: ProResProfile;
+    initialx264Preset: X264Preset;
     initialPixelFormat: PixelFormat;
     initialVideoBitrate: string | null;
     initialAudioBitrate: string | null;
@@ -30,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, 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);
@@ -151,6 +151,7 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
     const [endFrameOrNull, setEndFrame] = (0, react_1.useState)(() => outFrameMark !== null && outFrameMark !== void 0 ? outFrameMark : null);
     const [startFrameOrNull, setStartFrame] = (0, react_1.useState)(() => inFrameMark !== null && inFrameMark !== void 0 ? inFrameMark : null);
     const [proResProfileSetting, setProResProfile] = (0, react_1.useState)(() => initialProResProfile);
+    const [x264PresetSetting, setx264Preset] = (0, react_1.useState)(() => initialx264Preset);
     const [pixelFormat, setPixelFormat] = (0, react_1.useState)(() => initialPixelFormat);
     const [preferredQualityControlType, setQualityControl] = (0, react_1.useState)(() => initialVideoBitrate === null ? 'crf' : 'bitrate');
     const [shouldHaveCustomTargetAudioBitrate, setShouldHaveCustomTargetAudioBitrate,] = (0, react_1.useState)(() => initialAudioBitrate !== null);
@@ -159,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;
@@ -232,6 +234,12 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
         }
         return null;
     }, [codec, proResProfileSetting, renderMode]);
+    const x264Preset = (0, react_1.useMemo)(() => {
+        if (renderMode === 'video' && codec === 'h264') {
+            return x264PresetSetting;
+        }
+        return null;
+    }, [codec, x264PresetSetting, renderMode]);
     const [inputProps, setInputProps] = (0, react_1.useState)(() => defaultProps);
     const endFrame = (0, react_1.useMemo)(() => {
         if (endFrameOrNull === null) {
@@ -326,6 +334,7 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
             delayRenderTimeout,
             envVariables: (0, convert_env_variables_1.envVariablesArrayToObject)(envVariables),
             inputProps,
+            offthreadVideoCacheSizeInBytes,
         })
             .then(() => {
             dispatchIfMounted({ type: 'succeed' });
@@ -348,6 +357,7 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
         delayRenderTimeout,
         envVariables,
         inputProps,
+        offthreadVideoCacheSizeInBytes,
         onClose,
     ]);
     const [everyNthFrameSetting, setEveryNthFrameSetting] = (0, react_1.useState)(() => initialEveryNthFrame);
@@ -379,6 +389,7 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
             muted,
             enforceAudioTrack,
             proResProfile,
+            x264Preset,
             pixelFormat,
             audioBitrate,
             videoBitrate,
@@ -390,6 +401,7 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
             chromiumOptions,
             envVariables: (0, convert_env_variables_1.envVariablesArrayToObject)(envVariables),
             inputProps,
+            offthreadVideoCacheSizeInBytes,
         })
             .then(() => {
             dispatchIfMounted({ type: 'succeed' });
@@ -417,6 +429,7 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
         muted,
         enforceAudioTrack,
         proResProfile,
+        x264Preset,
         pixelFormat,
         audioBitrate,
         videoBitrate,
@@ -428,6 +441,7 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
         chromiumOptions,
         envVariables,
         inputProps,
+        offthreadVideoCacheSizeInBytes,
         onClose,
     ]);
     (0, react_1.useEffect)(() => {
@@ -585,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, { 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 })) })] })] }));
+                        }, 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

@@ -1,3 +1,4 @@
+import type { Codec, X264Preset } from '@remotion/renderer';
 import React from 'react';
 import type { UiOpenGlOptions } from '../../../required-chromium-options';
 export type RenderType = 'still' | 'video' | 'audio';
@@ -23,4 +24,9 @@ export declare const RenderModalAdvanced: React.FC<{
     setOpenGlOption: React.Dispatch<React.SetStateAction<UiOpenGlOptions>>;
     envVariables: [string, string][];
     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;
 }>;