@remotion/cli 4.0.21 → 4.0.22

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, } = await (0, get_cli_options_1.getCliOptions)({
         isLambda: false,
         type: 'series',
         remotionRoot,
@@ -201,6 +201,7 @@ const benchmarkCommand = async (remotionRoot, args) => {
                 overwrite,
                 pixelFormat,
                 proResProfile,
+                x264Preset,
                 jpegQuality,
                 chromiumOptions,
                 timeoutInMilliseconds: config_1.ConfigInternals.getCurrentPuppeteerTimeout(),

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.
@@ -278,6 +279,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 +299,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;

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");
@@ -82,6 +83,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,6 +146,7 @@ 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,
@@ -157,6 +160,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,

package/dist/config/presets-profile.d.ts

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

package/dist/config/presets-profile.js

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

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, 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/RemInput.d.ts

@@ -13,5 +13,5 @@ export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
     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>>;
+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/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,

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;

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, 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);
@@ -232,6 +233,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) {
@@ -379,6 +386,7 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
             muted,
             enforceAudioTrack,
             proResProfile,
+            x264Preset,
             pixelFormat,
             audioBitrate,
             videoBitrate,
@@ -417,6 +425,7 @@ const RenderModal = ({ initialFrame, initialVideoImageFormat, initialStillImageF
         muted,
         enforceAudioTrack,
         proResProfile,
+        x264Preset,
         pixelFormat,
         audioBitrate,
         videoBitrate,
@@ -585,7 +594,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, 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,7 @@ 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>>;
+    codec: Codec;
 }>;

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

@@ -2,7 +2,9 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderModalAdvanced = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const client_1 = require("@remotion/renderer/client");
 const react_1 = require("react");
+const presets_labels_1 = require("../../helpers/presets-labels");
 const Checkmark_1 = require("../../icons/Checkmark");
 const Checkbox_1 = require("../Checkbox");
 const is_menu_item_1 = require("../Menu/is-menu-item");
@@ -15,7 +17,7 @@ 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, }) => {
+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 extendedOpenGlOptions = (0, react_1.useMemo)(() => {
         return ['angle', 'egl', 'swangle', 'swiftshader', 'default'];
     }, []);
@@ -50,7 +52,24 @@ const RenderModalAdvanced = ({ renderMode, maxConcurrency, minConcurrency, setCo
             };
         });
     }, [extendedOpenGlOptions, openGlOption, setOpenGlOption]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [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
+    const x264PresetOptions = (0, react_1.useMemo)(() => {
+        return client_1.BrowserSafeApis.x264PresetOptions.map((option) => {
+            return {
+                label: (0, presets_labels_1.labelx264Preset)(option),
+                onClick: () => setx264Preset(option),
+                key: option,
+                selected: x264Preset === option,
+                type: 'item',
+                id: option,
+                keyHint: null,
+                leftItem: null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: option,
+            };
+        });
+    }, [setx264Preset, x264Preset]);
+    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

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

@@ -75,6 +75,6 @@ const RenderModalBasic = ({ renderMode, imageFormatOptions, outName, codec, setV
     const onValueChange = (0, react_1.useCallback)((e) => {
         setOutName(e.target.value);
     }, [setOutName]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [renderMode === 'still' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: true }) })] })) : ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Codec", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(InfoBubble_1.InfoBubble, { title: "Learn more about this option", children: (0, jsx_runtime_1.jsx)(OptionExplainer_1.OptionExplainer, { option: client_1.BrowserSafeApis.options.videoCodecOption }) })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: videoCodecOptions, selectedId: codec, title: "Codec" }) })] })), renderMode === 'still' && resolvedComposition.durationInFrames > 1 ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Frame" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(RemInput_1.RightAlignInput, { children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: frame, onTextChange: onFrameChanged, placeholder: `0-${resolvedComposition.durationInFrames - 1}`, onValueChange: onFrameSetDirectly, name: "frame", step: 1, min: 0, status: "ok", max: resolvedComposition.durationInFrames - 1, rightAlign: true }) }) })] })) : null, renderMode === 'video' && codec === 'prores' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "ProRes profile" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: proResProfile, selectedId: proResProfile, values: proResProfileOptions }) })] })) : null, renderMode === 'still' ? null : ((0, jsx_runtime_1.jsx)(FrameRangeSetting_1.FrameRangeSetting, { durationInFrames: resolvedComposition.durationInFrames, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, startFrame: startFrame })), (0, jsx_runtime_1.jsx)(RenderModalInput_1.RenderModalInput, { existence: existence, inputStyle: layout_2.input, outName: outName, onValueChange: onValueChange, validationMessage: validationMessage })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [renderMode === 'still' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Format" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(SegmentedControl_1.SegmentedControl, { items: imageFormatOptions, needsWrapping: true }) })] })) : ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsxs)("div", { style: layout_2.label, children: ["Codec", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(InfoBubble_1.InfoBubble, { title: "Learn more about this option", children: (0, jsx_runtime_1.jsx)(OptionExplainer_1.OptionExplainer, { option: client_1.BrowserSafeApis.options.videoCodecOption }) })] }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { values: videoCodecOptions, selectedId: codec, title: "Codec" }) })] })), renderMode === 'still' && resolvedComposition.durationInFrames > 1 ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "Frame" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(RemInput_1.RightAlignInput, { children: (0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { value: frame, onTextChange: onFrameChanged, placeholder: `0-${resolvedComposition.durationInFrames - 1}`, onValueChange: onFrameSetDirectly, name: "frame", step: 1, min: 0, status: "ok", max: resolvedComposition.durationInFrames - 1, rightAlign: true }) }) })] })) : null, renderMode === 'video' && codec === 'prores' ? ((0, jsx_runtime_1.jsxs)("div", { style: layout_2.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_2.label, children: "ProRes profile" }), (0, jsx_runtime_1.jsx)("div", { style: layout_2.rightRow, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: 'proResProfile', selectedId: proResProfile, values: proResProfileOptions }) })] })) : null, renderMode === 'still' ? null : ((0, jsx_runtime_1.jsx)(FrameRangeSetting_1.FrameRangeSetting, { durationInFrames: resolvedComposition.durationInFrames, endFrame: endFrame, setEndFrame: setEndFrame, setStartFrame: setStartFrame, startFrame: startFrame })), (0, jsx_runtime_1.jsx)(RenderModalInput_1.RenderModalInput, { existence: existence, inputStyle: layout_2.input, outName: outName, onValueChange: onValueChange, validationMessage: validationMessage })] }));
 };
 exports.RenderModalBasic = RenderModalBasic;

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

@@ -58,7 +58,7 @@ const ZodDiscriminatedUnionEditor = ({ schema, setValue, showSaveButton, saving,
         return {
             discriminator: typedSchema.discriminator,
             markup: ((0, jsx_runtime_1.jsxs)(Fieldset_1.Fieldset, { shouldPad: mayPad, success: true, children: [(0, jsx_runtime_1.jsx)(SchemaLabel_1.SchemaLabel, { isDefaultValue: localValue.value[typedSchema.discriminator] ===
-                            defaultValue[typedSchema.discriminator], jsonPath: [...jsonPath, typedSchema.discriminator], onRemove: onRemove, onReset: reset, onSave: save, saveDisabledByParent: saveDisabledByParent, saving: saving, showSaveButton: showSaveButton, suffix: null, valid: localValue.zodValidation.success }), (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Select type", values: comboBoxValues, selectedId: value[typedSchema.discriminator] })] })),
+                            defaultValue[typedSchema.discriminator], jsonPath: [...jsonPath, typedSchema.discriminator], onRemove: onRemove, onReset: reset, onSave: save, saveDisabledByParent: saveDisabledByParent, saving: saving, showSaveButton: showSaveButton, suffix: null, valid: localValue.zodValidation.success }), (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Select type", values: comboBoxValues, selectedId: value[typedSchema.discriminator] })] }, 'replacement')),
         };
     }, [
         comboBoxValues,

package/dist/editor/components/RenderModal/human-readable-codec.d.ts

@@ -1,2 +1,2 @@
 import type { Codec } from '@remotion/renderer';
-export declare const humanReadableCodec: (codec: Codec) => "GIF" | "AAC" | "MP3" | "H.264" | "H.264 Matroska" | "H.265" | "ProRes" | "WebM VP8" | "WebM VP9" | "Waveform" | undefined;
+export declare const humanReadableCodec: (codec: Codec) => "AAC" | "MP3" | "GIF" | "H.264" | "H.264 Matroska" | "H.265" | "ProRes" | "WebM VP8" | "WebM VP9" | "Waveform" | undefined;

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

@@ -1,4 +1,4 @@
-import type { AudioCodec, Codec, PixelFormat, ProResProfile, StillImageFormat, VideoImageFormat } from '@remotion/renderer';
+import type { AudioCodec, Codec, PixelFormat, ProResProfile, StillImageFormat, VideoImageFormat, X264Preset } from '@remotion/renderer';
 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';
@@ -15,7 +15,7 @@ export declare const addStillRenderJob: ({ compositionId, outName, imageFormat,
     envVariables: Record<string, string>;
     inputProps: Record<string, unknown>;
 }) => Promise<undefined>;
-export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat, jpegQuality, scale, verbose, codec, concurrency, crf, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, 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, }: {
     compositionId: string;
     outName: string;
     imageFormat: VideoImageFormat;
@@ -30,6 +30,7 @@ export declare const addVideoRenderJob: ({ compositionId, outName, imageFormat,
     muted: boolean;
     enforceAudioTrack: boolean;
     proResProfile: ProResProfile | null;
+    x264Preset: X264Preset | null;
     pixelFormat: PixelFormat;
     audioBitrate: string | null;
     videoBitrate: string | null;

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

@@ -47,7 +47,7 @@ const addStillRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, f
     });
 };
 exports.addStillRenderJob = addStillRenderJob;
-const addVideoRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, scale, verbose, codec, concurrency, crf, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, 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, }) => {
     return callApi('/api/render', {
         compositionId,
         type: 'video',
@@ -64,6 +64,7 @@ const addVideoRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, s
         muted,
         enforceAudioTrack,
         proResProfile,
+        x264Preset,
         pixelFormat,
         audioBitrate,
         videoBitrate,

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

@@ -0,0 +1,8 @@
+import React from 'react';
+type SidebarPanel = 'input-props' | 'renders';
+export declare const persistSelectedPanel: (panel: SidebarPanel) => void;
+export declare const rightSidebarTabs: React.RefObject<{
+    selectRendersPanel: () => void;
+}>;
+export declare const RightPanel: React.FC<{}>;
+export {};

package/dist/editor/components/RightPanel.js

@@ -0,0 +1,112 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RightPanel = exports.rightSidebarTabs = exports.persistSelectedPanel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const ShortcutHint_1 = require("../../preview-server/error-overlay/remotion-overlay/ShortcutHint");
+const colors_1 = require("../helpers/colors");
+const DataEditor_1 = require("./RenderModal/DataEditor");
+const deep_equal_1 = require("./RenderModal/SchemaEditor/deep-equal");
+const RenderQueue_1 = require("./RenderQueue");
+const RendersTab_1 = require("./RendersTab");
+const Tabs_1 = require("./Tabs");
+const container = {
+    height: '100%',
+    width: '100%',
+    position: 'absolute',
+    display: 'flex',
+    flexDirection: 'column',
+};
+const circle = {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+};
+const localStorageKey = 'remotion.sidebarPanel';
+const getSelectedPanel = () => {
+    const panel = localStorage.getItem(localStorageKey);
+    if (panel === 'renders') {
+        return 'renders';
+    }
+    return 'input-props';
+};
+const tabsContainer = {
+    backgroundColor: colors_1.BACKGROUND,
+};
+const persistSelectedPanel = (panel) => {
+    localStorage.setItem(localStorageKey, panel);
+};
+exports.persistSelectedPanel = persistSelectedPanel;
+exports.rightSidebarTabs = (0, react_1.createRef)();
+const RightPanel = () => {
+    const { props, updateProps } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
+    const [saving, setSaving] = (0, react_1.useState)(false);
+    const [panel, setPanel] = (0, react_1.useState)(() => getSelectedPanel());
+    const onCompositionsSelected = (0, react_1.useCallback)(() => {
+        setPanel('input-props');
+        (0, exports.persistSelectedPanel)('input-props');
+    }, []);
+    const onRendersSelected = (0, react_1.useCallback)(() => {
+        setPanel('renders');
+        (0, exports.persistSelectedPanel)('renders');
+    }, []);
+    (0, react_1.useImperativeHandle)(exports.rightSidebarTabs, () => {
+        return {
+            selectRendersPanel: () => {
+                setPanel('renders');
+                (0, exports.persistSelectedPanel)('renders');
+            },
+        };
+    }, []);
+    const { compositions, currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const circleStyle = (0, react_1.useMemo)(() => {
+        const onTabColor = saving ? colors_1.LIGHT_TEXT : 'white';
+        return {
+            ...circle,
+            backgroundColor: panel === 'input-props' ? onTabColor : colors_1.LIGHT_TEXT,
+            cursor: 'help',
+        };
+    }, [panel, saving]);
+    const composition = (0, react_1.useMemo)(() => {
+        for (const comp of compositions) {
+            if (comp.id === currentComposition) {
+                return comp;
+            }
+        }
+        return null;
+    }, [compositions, currentComposition]);
+    const saveToolTip = (0, react_1.useMemo)(() => {
+        return process.env.KEYBOARD_SHORTCUTS_ENABLED
+            ? `Save using ${ShortcutHint_1.cmdOrCtrlCharacter}+S`
+            : 'There are unsaved changes';
+    }, []);
+    const setInputProps = (0, react_1.useCallback)((newProps) => {
+        if (composition === null) {
+            return;
+        }
+        updateProps({
+            id: composition.id,
+            defaultProps: composition.defaultProps,
+            newProps,
+        });
+    }, [composition, updateProps]);
+    const actualProps = (0, react_1.useMemo)(() => {
+        var _a, _b;
+        if (composition === null) {
+            return {};
+        }
+        return (_b = (_a = props[composition.id]) !== null && _a !== void 0 ? _a : composition.defaultProps) !== null && _b !== void 0 ? _b : {};
+    }, [composition, props]);
+    const unsavedChangesExist = (0, react_1.useMemo)(() => {
+        if (composition === null || composition.defaultProps === undefined) {
+            return false;
+        }
+        return !(0, deep_equal_1.deepEqual)(composition.defaultProps, actualProps);
+    }, [actualProps, composition]);
+    if (composition === null) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsx)("div", { style: tabsContainer, children: (0, jsx_runtime_1.jsxs)(Tabs_1.Tabs, { children: [(0, jsx_runtime_1.jsxs)(Tabs_1.Tab, { selected: panel === 'input-props', onClick: onCompositionsSelected, style: { justifyContent: 'space-between' }, children: ["Props", unsavedChangesExist ? ((0, jsx_runtime_1.jsx)("div", { title: saveToolTip, style: circleStyle })) : null] }), (0, jsx_runtime_1.jsx)(RendersTab_1.RendersTab, { onClick: onRendersSelected, selected: panel === 'renders' })] }) }), panel === 'renders' ? ((0, jsx_runtime_1.jsx)(RenderQueue_1.RenderQueue, {})) : ((0, jsx_runtime_1.jsx)(DataEditor_1.DataEditor, { unresolvedComposition: composition, inputProps: actualProps, setInputProps: setInputProps, mayShowSaveButton: true, propsEditType: "default-props", saving: saving, setSaving: setSaving }, composition.id))] }));
+};
+exports.RightPanel = RightPanel;

package/dist/editor/components/SidebarRenderButton.js

@@ -61,6 +61,7 @@ const SidebarRenderButton = ({ composition, visible }) => {
             initialMuted: defaults.muted,
             initialEnforceAudioTrack: defaults.enforceAudioTrack,
             initialProResProfile: defaults.proResProfile,
+            initialx264Preset: defaults.x264Preset,
             initialPixelFormat: defaults.pixelFormat,
             initialAudioBitrate: defaults.audioBitrate,
             initialVideoBitrate: defaults.videoBitrate,

package/dist/editor/helpers/document-title.js

@@ -12,6 +12,7 @@ const setCurrentVideoId = (id) => {
 };
 exports.setCurrentVideoId = setCurrentVideoId;
 const setUnsavedProps = (unsaved) => {
+    window.remotion_unsavedProps = unsaved;
     unsavedProps = unsaved;
 };
 exports.setUnsavedProps = setUnsavedProps;

package/dist/editor/helpers/presets-labels.d.ts

@@ -0,0 +1,2 @@
+import type { X264Preset } from '@remotion/renderer';
+export declare const labelx264Preset: (profile: X264Preset) => "medium" | "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "slow" | "slower" | "veryslow" | "placebo";

package/dist/editor/helpers/presets-labels.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.labelx264Preset = void 0;
+const labelx264Preset = (profile) => {
+    if (profile === 'ultrafast') {
+        return 'ultrafast';
+    }
+    if (profile === 'superfast') {
+        return 'superfast';
+    }
+    if (profile === 'veryfast') {
+        return 'veryfast';
+    }
+    if (profile === 'faster') {
+        return 'faster';
+    }
+    if (profile === 'fast') {
+        return 'fast';
+    }
+    if (profile === 'medium') {
+        return 'medium';
+    }
+    if (profile === 'slow') {
+        return 'slow';
+    }
+    if (profile === 'slower') {
+        return 'slower';
+    }
+    if (profile === 'veryslow') {
+        return 'veryslow';
+    }
+    if (profile === 'placebo') {
+        return 'placebo';
+    }
+    throw new TypeError(`Unknown x264 preset: ${profile}`);
+};
+exports.labelx264Preset = labelx264Preset;

package/dist/editor/state/modals.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 type React from 'react';
 import type { QuickSwitcherMode } from '../components/QuickSwitcher/NoResults';
 import type { RenderType } from '../components/RenderModal/RenderModalAdvanced';
@@ -22,6 +22,7 @@ export type RenderModalState = {
     initialMuted: boolean;
     initialEnforceAudioTrack: boolean;
     initialProResProfile: ProResProfile;
+    initialx264Preset: X264Preset;
     initialPixelFormat: PixelFormat;
     initialVideoBitrate: string | null;
     initialAudioBitrate: string | null;

package/dist/get-cli-options.d.ts

@@ -16,6 +16,7 @@ export declare const getCliOptions: (options: {
     crf: import("@remotion/renderer").Crf | null;
     pixelFormat: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";
     proResProfile: "4444-xq" | "4444" | "hq" | "standard" | "light" | "proxy" | undefined;
+    x264Preset: "medium" | "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "slow" | "slower" | "veryslow" | "placebo" | undefined;
     everyNthFrame: number;
     numberOfGifLoops: import("./config/number-of-gif-loops").Loop;
     stillFrame: number;
@@ -33,5 +34,5 @@ export declare const getCliOptions: (options: {
     videoBitrate: string | null;
     height: number | null;
     width: number | null;
-    configFileImageFormat: "png" | "jpeg" | "none" | undefined;
+    configFileImageFormat: "none" | "png" | "jpeg" | undefined;
 }>;

package/dist/get-cli-options.js

@@ -44,6 +44,10 @@ const getProResProfile = () => {
     const proResProfile = config_1.ConfigInternals.getProResProfile();
     return proResProfile;
 };
+const getx264Preset = () => {
+    const x264Preset = config_1.ConfigInternals.getPresetProfile();
+    return x264Preset;
+};
 const getAndValidateBrowser = async (browserExecutable) => {
     const browser = getBrowser();
     try {
@@ -71,6 +75,7 @@ const getCliOptions = async (options) => {
     const videoBitrate = config_1.ConfigInternals.getVideoBitrate();
     const pixelFormat = config_1.ConfigInternals.getPixelFormat();
     const proResProfile = getProResProfile();
+    const x264Preset = getx264Preset();
     const browserExecutable = config_1.ConfigInternals.getBrowserExecutable();
     const scale = config_1.ConfigInternals.getScale();
     const port = config_1.ConfigInternals.getServerPort();
@@ -99,6 +104,7 @@ const getCliOptions = async (options) => {
         crf,
         pixelFormat,
         proResProfile,
+        x264Preset,
         everyNthFrame,
         numberOfGifLoops,
         stillFrame: config_1.ConfigInternals.getStillFrame(),

package/dist/index.d.ts

@@ -101,6 +101,7 @@ export declare const CliInternals: {
         crf: import("@remotion/renderer").Crf | null;
         pixelFormat: "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";
         proResProfile: "4444-xq" | "4444" | "hq" | "standard" | "light" | "proxy" | undefined;
+        x264Preset: "medium" | "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "slow" | "slower" | "veryslow" | "placebo" | undefined;
         everyNthFrame: number;
         numberOfGifLoops: import("./config/number-of-gif-loops").Loop;
         stillFrame: number;
@@ -118,7 +119,7 @@ export declare const CliInternals: {
         videoBitrate: string | null;
         height: number | null;
         width: number | null;
-        configFileImageFormat: "png" | "jpeg" | "none" | undefined;
+        configFileImageFormat: "none" | "png" | "jpeg" | undefined;
     }>;
     loadConfig: (remotionRoot: string) => Promise<string | null>;
     initializeCli: (remotionRoot: string) => Promise<void>;
@@ -127,8 +128,9 @@ export declare const CliInternals: {
     parsedCli: {
         "browser-executable": import("@remotion/renderer").BrowserExecutable;
         "pixel-format": "yuv420p" | "yuva420p" | "yuv422p" | "yuv444p" | "yuv420p10le" | "yuv422p10le" | "yuv444p10le" | "yuva444p10le";
-        "image-format": "png" | "jpeg" | "pdf" | "webp" | "none";
+        "image-format": "none" | "png" | "jpeg" | "pdf" | "webp";
         "prores-profile": "4444-xq" | "4444" | "hq" | "standard" | "light" | "proxy";
+        "x264-preset": "medium" | "ultrafast" | "superfast" | "veryfast" | "faster" | "fast" | "slow" | "slower" | "veryslow" | "placebo";
         "bundle-cache": string;
         "env-file": string;
         "ignore-certificate-errors": string;
@@ -192,7 +194,7 @@ export declare const CliInternals: {
         downloadName: string | null;
         outName: string | null;
         configImageFormat: "png" | "jpeg" | "pdf" | "webp" | null;
-        cliFlag: "png" | "jpeg" | "pdf" | "webp" | "none" | null;
+        cliFlag: "none" | "png" | "jpeg" | "pdf" | "webp" | null;
         isLambda: boolean;
         fromUi: "png" | "jpeg" | "pdf" | "webp" | null;
     }) => {
@@ -207,8 +209,8 @@ export declare const CliInternals: {
     };
     getVideoImageFormat: ({ codec, uiImageFormat, }: {
         codec: import("@remotion/renderer").CodecOrUndefined;
-        uiImageFormat: "png" | "jpeg" | "none" | null;
-    }) => "png" | "jpeg" | "none";
+        uiImageFormat: "none" | "png" | "jpeg" | null;
+    }) => "none" | "png" | "jpeg";
     printCompositions: (compositions: import("remotion").VideoConfig[]) => void;
     getFinalOutputCodec: ({ cliFlag, configFile, downloadName, outName, uiCodec, }: {
         cliFlag: import("@remotion/renderer").CodecOrUndefined;

package/dist/parse-command-line.d.ts

@@ -1,9 +1,10 @@
-import type { AudioCodec, BrowserExecutable, Codec, OpenGlRenderer, PixelFormat, ProResProfile, StillImageFormat, VideoImageFormat } from '@remotion/renderer';
+import type { AudioCodec, BrowserExecutable, Codec, OpenGlRenderer, PixelFormat, ProResProfile, StillImageFormat, VideoImageFormat, X264Preset } from '@remotion/renderer';
 type CommandLineOptions = {
     ['browser-executable']: BrowserExecutable;
     ['pixel-format']: PixelFormat;
     ['image-format']: VideoImageFormat | StillImageFormat;
     ['prores-profile']: ProResProfile;
+    ['x264-preset']: X264Preset;
     ['bundle-cache']: string;
     ['env-file']: string;
     ['ignore-certificate-errors']: string;

package/dist/parse-command-line.js

@@ -105,6 +105,9 @@ const parseCommandLine = () => {
     if (exports.parsedCli['prores-profile']) {
         config_1.Config.setProResProfile(String(exports.parsedCli['prores-profile']));
     }
+    if (exports.parsedCli['x264-preset']) {
+        config_1.Config.setX264Preset(String(exports.parsedCli['x264-preset']));
+    }
     if (exports.parsedCli.overwrite) {
         config_1.Config.setOverwriteOutput(exports.parsedCli.overwrite);
     }

package/dist/preview-server/dev-middleware/range-parser.d.ts

@@ -11,5 +11,5 @@ type Range = {
 type Ranges = Range[] & {
     type?: string;
 };
-export declare function parseRange(size: number, str: string | string[]): -1 | Ranges | -2;
+export declare function parseRange(size: number, str: string | string[]): -1 | -2 | Ranges;
 export {};

package/dist/preview-server/error-overlay/react-overlay/listen-to-runtime-errors.js

@@ -42,6 +42,7 @@ const crashWithFrames = (crash) => (error) => {
     if (didHookOrderChange && !justRefreshedBecauseOfHooks) {
         // eslint-disable-next-line no-console
         console.log('Hook order changed. Reloading app...');
+        window.remotion_unsavedProps = false;
         window.location.reload();
     }
     else {

package/dist/preview-server/hot-middleware/process-update.d.ts

@@ -3,10 +3,5 @@
  * https://github.com/webpack-contrib/webpack-hot-middleware#readme
  * and rewritten in TypeScript. This file is MIT licensed
  */
-/**
- * Based heavily on https://github.com/webpack/webpack/blob/
- *  c0afdf9c6abc1dd70707c594e473802a566f7b6e/hot/only-dev-server.js
- * Original copyright Tobias Koppers @sokra (MIT license)
- */
 import type { HotMiddlewareOptions, ModuleMap } from './types';
 export declare const processUpdate: (hash: string | undefined, moduleMap: ModuleMap, options: HotMiddlewareOptions) => void;

package/dist/preview-server/hot-middleware/process-update.js

@@ -7,6 +7,12 @@
  */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.processUpdate = void 0;
+/**
+ * Based heavily on https://github.com/webpack/webpack/blob/
+ *  c0afdf9c6abc1dd70707c594e473802a566f7b6e/hot/only-dev-server.js
+ * Original copyright Tobias Koppers @sokra (MIT license)
+ */
+const NotificationCenter_1 = require("../../editor/components/Notifications/NotificationCenter");
 if (!__webpack_module__.hot) {
     throw new Error('[Fast refresh] Hot Module Replacement is disabled.');
 }
@@ -128,16 +134,29 @@ const processUpdate = function (hash, moduleMap, options) {
         }
         if (options.warn) {
             console.warn('[Fast refresh] Update check failed: ' + (err.stack || err.message));
-            window.location.reload();
+            if (!window.remotion_unsavedProps) {
+                window.location.reload();
+            }
         }
     }
     function performReload() {
+        var _a;
         if (!reload) {
             return;
         }
         if (options.warn)
             console.warn('[Fast refresh] Reloading page');
-        window.location.reload();
+        if (window.remotion_unsavedProps) {
+            (_a = NotificationCenter_1.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
+                id: 'random',
+                content: 'Fast refresh needs to reload the page, but you have unsaved props. Save then reload the page to apply changes.',
+                created: new Date().getMilliseconds(),
+                duration: 1,
+            });
+        }
+        else {
+            window.location.reload();
+        }
     }
 };
 exports.processUpdate = processUpdate;

package/dist/preview-server/render-queue/job.d.ts

@@ -1,4 +1,4 @@
-import type { AudioCodec, Codec, makeCancelSignal, PixelFormat, ProResProfile, StillImageFormat, VideoImageFormat } from '@remotion/renderer';
+import type { AudioCodec, Codec, makeCancelSignal, PixelFormat, ProResProfile, StillImageFormat, VideoImageFormat, X264Preset } from '@remotion/renderer';
 import type { EnumPath } from '../../editor/components/RenderModal/SchemaEditor/extract-enum-json-paths';
 import type { AggregateRenderProgress } from '../../progress-types';
 import type { RequiredChromiumOptions } from '../../required-chromium-options';
@@ -43,6 +43,7 @@ type RenderJobDynamicFields = ({
     muted: boolean;
     enforceAudioTrack: boolean;
     proResProfile: ProResProfile | null;
+    x264Preset: X264Preset | null;
     pixelFormat: PixelFormat;
     audioBitrate: string | null;
     videoBitrate: string | null;
@@ -88,6 +89,7 @@ type AddRenderRequestDynamicFields = {
     muted: boolean;
     enforceAudioTrack: boolean;
     proResProfile: ProResProfile | null;
+    x264Preset: X264Preset | null;
     pixelFormat: PixelFormat;
     audioBitrate: string | null;
     videoBitrate: string | null;

package/dist/preview-server/render-queue/make-retry-payload.js

@@ -4,7 +4,7 @@ exports.makeRetryPayload = void 0;
 const remotion_1 = require("remotion");
 const get_default_video_contexts_1 = require("./get-default-video-contexts");
 const makeRetryPayload = (job) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d;
     const defaults = window.remotion_renderDefaults;
     if (!defaults) {
         throw new Error('defaults not set');
@@ -33,6 +33,7 @@ const makeRetryPayload = (job) => {
             initialMuted: defaults.muted,
             initialEnforceAudioTrack: defaults.enforceAudioTrack,
             initialProResProfile: defaults.proResProfile,
+            initialx264Preset: defaults.x264Preset,
             initialPixelFormat: defaults.pixelFormat,
             initialAudioBitrate: defaults.audioBitrate,
             initialVideoBitrate: defaults.videoBitrate,
@@ -74,6 +75,7 @@ const makeRetryPayload = (job) => {
             initialRenderType,
             initialVideoCodecForVideoTab: initialVideoCodec,
             initialProResProfile: (_c = job.proResProfile) !== null && _c !== void 0 ? _c : defaults.proResProfile,
+            initialx264Preset: (_d = job.x264Preset) !== null && _d !== void 0 ? _d : defaults.x264Preset,
             initialPixelFormat: job.pixelFormat,
             initialAudioBitrate: job.audioBitrate,
             initialVideoBitrate: job.videoBitrate,

package/dist/preview-server/render-queue/process-video.js

@@ -5,7 +5,7 @@ const convert_entry_point_to_serve_url_1 = require("../../convert-entry-point-to
 const get_cli_options_1 = require("../../get-cli-options");
 const render_1 = require("../../render-flows/render");
 const processVideoJob = async ({ job, remotionRoot, entryPoint, onProgress, addCleanupCallback, }) => {
-    var _a, _b;
+    var _a, _b, _c;
     if (job.type !== 'video') {
         throw new Error('Expected video job');
     }
@@ -53,6 +53,7 @@ const processVideoJob = async ({ job, remotionRoot, entryPoint, onProgress, addC
         muted: job.muted,
         enforceAudioTrack: job.enforceAudioTrack,
         proResProfile: (_b = job.proResProfile) !== null && _b !== void 0 ? _b : undefined,
+        x264Preset: (_c = job.x264Preset) !== null && _c !== void 0 ? _c : undefined,
         pixelFormat: job.pixelFormat,
         videoBitrate: job.videoBitrate,
         numberOfGifLoops: job.numberOfGifLoops,

package/dist/preview-server/routes/add-render.js

@@ -32,6 +32,7 @@ const handleAddRender = ({ input, entryPoint, remotionRoot, }) => {
                 muted: input.muted,
                 enforceAudioTrack: input.enforceAudioTrack,
                 proResProfile: input.proResProfile,
+                x264Preset: input.x264Preset,
                 pixelFormat: input.pixelFormat,
                 audioBitrate: input.audioBitrate,
                 videoBitrate: input.videoBitrate,

package/dist/preview-server/routes.js

@@ -28,7 +28,7 @@ const static404 = (response) => {
     response.end('The static/ prefix has been changed, this URL is no longer valid.');
 };
 const handleFallback = async ({ remotionRoot, hash, response, getCurrentInputProps, getEnvVariables, publicDir, }) => {
-    var _a, _b;
+    var _a, _b, _c;
     const [edit] = await editorGuess;
     const displayName = (0, open_in_editor_1.getDisplayNameForEditor)(edit ? edit.command : null);
     const defaultJpegQuality = config_1.ConfigInternals.getJpegQuality();
@@ -40,6 +40,7 @@ const handleFallback = async ({ remotionRoot, hash, response, getCurrentInputPro
     const enforceAudioTrack = config_1.ConfigInternals.getEnforceAudioTrack();
     const pixelFormat = config_1.ConfigInternals.getPixelFormat();
     const proResProfile = (_a = config_1.ConfigInternals.getProResProfile()) !== null && _a !== void 0 ? _a : 'hq';
+    const x264Preset = (_b = config_1.ConfigInternals.getPresetProfile()) !== null && _b !== void 0 ? _b : 'medium';
     const audioBitrate = config_1.ConfigInternals.getAudioBitrate();
     const videoBitrate = config_1.ConfigInternals.getVideoBitrate();
     const everyNthFrame = config_1.ConfigInternals.getEveryNthFrame();
@@ -67,7 +68,7 @@ const handleFallback = async ({ remotionRoot, hash, response, getCurrentInputPro
         remotionRoot,
         studioServerCommand: packageManager === 'unknown' ? null : packageManager.startCommand,
         renderQueue: (0, queue_1.getRenderQueue)(),
-        numberOfAudioTags: (_b = parse_command_line_1.parsedCli['number-of-shared-audio-tags']) !== null && _b !== void 0 ? _b : (0, number_of_shared_audio_tags_1.getNumberOfSharedAudioTags)(),
+        numberOfAudioTags: (_c = parse_command_line_1.parsedCli['number-of-shared-audio-tags']) !== null && _c !== void 0 ? _c : (0, number_of_shared_audio_tags_1.getNumberOfSharedAudioTags)(),
         publicFiles: (0, public_folder_1.getFiles)(),
         includeFavicon: true,
         title: 'Remotion Studio',
@@ -84,6 +85,7 @@ const handleFallback = async ({ remotionRoot, hash, response, getCurrentInputPro
             muted,
             enforceAudioTrack,
             proResProfile,
+            x264Preset,
             pixelFormat,
             audioBitrate,
             videoBitrate,

package/dist/render-flows/render.d.ts

@@ -1,7 +1,7 @@
-import type { AudioCodec, Browser, BrowserExecutable, CancelSignal, ChromiumOptions, Codec, Crf, FfmpegOverrideFn, FrameRange, LogLevel, PixelFormat, ProResProfile, VideoImageFormat } from '@remotion/renderer';
+import type { AudioCodec, Browser, BrowserExecutable, CancelSignal, ChromiumOptions, Codec, Crf, FfmpegOverrideFn, FrameRange, LogLevel, PixelFormat, ProResProfile, VideoImageFormat, X264Preset } from '@remotion/renderer';
 import type { Loop } from '../config/number-of-gif-loops';
 import type { JobProgressCallback } from '../preview-server/render-queue/job';
-export declare const renderVideoFlow: ({ remotionRoot, fullEntryPoint, indent, logLevel, browserExecutable, browser, chromiumOptions, scale, shouldOutputImageSequence, publicDir, envVariables, puppeteerTimeout, port, height, width, remainingArgs, compositionIdFromUi, entryPointReason, overwrite, quiet, concurrency, frameRange, everyNthFrame, outputLocationFromUI, jpegQuality, onProgress, addCleanupCallback, cancelSignal, crf, uiCodec, uiImageFormat, ffmpegOverride, audioBitrate, muted, enforceAudioTrack, proResProfile, pixelFormat, videoBitrate, numberOfGifLoops, audioCodec, serializedInputPropsWithCustomSchema, disallowParallelEncoding, }: {
+export declare const renderVideoFlow: ({ remotionRoot, fullEntryPoint, indent, logLevel, browserExecutable, browser, chromiumOptions, scale, shouldOutputImageSequence, publicDir, envVariables, puppeteerTimeout, port, height, width, remainingArgs, compositionIdFromUi, entryPointReason, overwrite, quiet, concurrency, frameRange, everyNthFrame, outputLocationFromUI, jpegQuality, onProgress, addCleanupCallback, cancelSignal, crf, uiCodec, uiImageFormat, ffmpegOverride, audioBitrate, muted, enforceAudioTrack, proResProfile, x264Preset, pixelFormat, videoBitrate, numberOfGifLoops, audioCodec, serializedInputPropsWithCustomSchema, disallowParallelEncoding, }: {
     remotionRoot: string;
     fullEntryPoint: string;
     entryPointReason: string;
@@ -40,6 +40,7 @@ export declare const renderVideoFlow: ({ remotionRoot, fullEntryPoint, indent, l
     muted: boolean;
     enforceAudioTrack: boolean;
     proResProfile: ProResProfile | undefined;
+    x264Preset: X264Preset | undefined;
     pixelFormat: PixelFormat;
     numberOfGifLoops: Loop;
     audioCodec: AudioCodec | null;

package/dist/render-flows/render.js

@@ -47,7 +47,7 @@ const setup_cache_1 = require("../setup-cache");
 const should_use_non_overlaying_logger_1 = require("../should-use-non-overlaying-logger");
 const truthy_1 = require("../truthy");
 const user_passed_output_location_1 = require("../user-passed-output-location");
-const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel, browserExecutable, browser, chromiumOptions, scale, shouldOutputImageSequence, publicDir, envVariables, puppeteerTimeout, port, height, width, remainingArgs, compositionIdFromUi, entryPointReason, overwrite, quiet, concurrency, frameRange, everyNthFrame, outputLocationFromUI, jpegQuality, onProgress, addCleanupCallback, cancelSignal, crf, uiCodec, uiImageFormat, ffmpegOverride, audioBitrate, muted, enforceAudioTrack, proResProfile, pixelFormat, videoBitrate, numberOfGifLoops, audioCodec, serializedInputPropsWithCustomSchema, disallowParallelEncoding, }) => {
+const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel, browserExecutable, browser, chromiumOptions, scale, shouldOutputImageSequence, publicDir, envVariables, puppeteerTimeout, port, height, width, remainingArgs, compositionIdFromUi, entryPointReason, overwrite, quiet, concurrency, frameRange, everyNthFrame, outputLocationFromUI, jpegQuality, onProgress, addCleanupCallback, cancelSignal, crf, uiCodec, uiImageFormat, ffmpegOverride, audioBitrate, muted, enforceAudioTrack, proResProfile, x264Preset, pixelFormat, videoBitrate, numberOfGifLoops, audioCodec, serializedInputPropsWithCustomSchema, disallowParallelEncoding, }) => {
     var _a;
     const downloads = [];
     if (browserExecutable) {
@@ -268,6 +268,7 @@ const renderVideoFlow = async ({ remotionRoot, fullEntryPoint, indent, logLevel,
         overwrite,
         pixelFormat,
         proResProfile,
+        x264Preset,
         jpegQuality: jpegQuality !== null && jpegQuality !== void 0 ? jpegQuality : renderer_1.RenderInternals.DEFAULT_JPEG_QUALITY,
         chromiumOptions,
         timeoutInMilliseconds: puppeteerTimeout,

package/dist/render.js

@@ -25,7 +25,7 @@ const render = async (remotionRoot, args) => {
         log_1.Log.error('--frame flag was passed to the `render` command. This flag only works with the `still` command. Did you mean `--frames`? See reference: https://www.remotion.dev/docs/cli/');
         process.exit(1);
     }
-    const { concurrency, frameRange, shouldOutputImageSequence, overwrite, inputProps, envVariables, jpegQuality, browser, browserExecutable, scale, chromiumOptions, port, everyNthFrame, puppeteerTimeout, publicDir, height, width, crf, ffmpegOverride, audioBitrate, muted, enforceAudioTrack, proResProfile, pixelFormat, videoBitrate, numberOfGifLoops, } = await (0, get_cli_options_1.getCliOptions)({
+    const { concurrency, frameRange, shouldOutputImageSequence, overwrite, inputProps, envVariables, jpegQuality, browser, browserExecutable, scale, chromiumOptions, port, everyNthFrame, puppeteerTimeout, publicDir, height, width, crf, ffmpegOverride, audioBitrate, muted, enforceAudioTrack, proResProfile, x264Preset, pixelFormat, videoBitrate, numberOfGifLoops, } = await (0, get_cli_options_1.getCliOptions)({
         isLambda: false,
         type: 'series',
         remotionRoot,
@@ -75,6 +75,7 @@ const render = async (remotionRoot, args) => {
         muted,
         enforceAudioTrack,
         proResProfile,
+        x264Preset,
         pixelFormat,
         videoBitrate,
         numberOfGifLoops,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remotion/cli",
-  "version": "4.0.21",
+  "version": "4.0.22",
   "description": "CLI for Remotion",
   "main": "dist/index.js",
   "sideEffects": false,
@@ -35,11 +35,11 @@
     "prompts": "2.4.1",
     "semver": "7.5.3",
     "source-map": "0.6.1",
-    "@remotion/media-utils": "4.0.21",
-    "@remotion/player": "4.0.21",
-    "@remotion/bundler": "4.0.21",
-    "@remotion/renderer": "4.0.21",
-    "remotion": "4.0.21"
+    "@remotion/bundler": "4.0.22",
+    "@remotion/media-utils": "4.0.22",
+    "@remotion/renderer": "4.0.22",
+    "@remotion/player": "4.0.22",
+    "remotion": "4.0.22"
   },
   "peerDependencies": {
     "react": ">=16.8.0",
@@ -64,8 +64,8 @@
     "react-dom": "^18.0.0",
     "vitest": "0.31.1",
     "zod": "^3.21.4",
-    "@remotion/zod-types": "4.0.21",
-    "@remotion/tailwind": "4.0.21"
+    "@remotion/zod-types": "4.0.22",
+    "@remotion/tailwind": "4.0.22"
   },
   "keywords": [
     "remotion",