@remotion/studio 4.0.465 → 4.0.466

package/dist/components/CompositionSelectorItem.js

@@ -3,18 +3,21 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CompositionSelectorItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const is_composition_still_1 = require("../helpers/is-composition-still");
+const noop_1 = require("../helpers/noop");
 const sidebar_scroll_into_view_1 = require("../helpers/sidebar-scroll-into-view");
 const folder_1 = require("../icons/folder");
 const still_1 = require("../icons/still");
 const video_1 = require("../icons/video");
 const modals_1 = require("../state/modals");
+const composition_menu_items_1 = require("./composition-menu-items");
 const CompositionContextButton_1 = require("./CompositionContextButton");
 const ContextMenu_1 = require("./ContextMenu");
 const layout_1 = require("./layout");
-const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const SidebarRenderButton_1 = require("./SidebarRenderButton");
+const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
 const COMPOSITION_ITEM_HEIGHT = 32;
 const itemStyle = {
     paddingRight: 10,
@@ -103,88 +106,22 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         }
     }, [onClick]);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
+        .previewServerState.type;
+    const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)(item.type === 'composition' ? item.composition.stack : null);
     const contextMenu = (0, react_1.useMemo)(() => {
         if (item.type === 'composition') {
-            return [
-                {
-                    id: 'duplicate',
-                    keyHint: null,
-                    label: `Duplicate...`,
-                    leftItem: null,
-                    onClick: () => {
-                        setSelectedModal({
-                            type: 'duplicate-comp',
-                            compositionId: item.composition.id,
-                            compositionType: item.composition.durationInFrames === 1
-                                ? 'still'
-                                : 'composition',
-                        });
-                    },
-                    quickSwitcherLabel: null,
-                    subMenu: null,
-                    type: 'item',
-                    value: 'duplicate',
-                },
-                {
-                    id: 'rename',
-                    keyHint: null,
-                    label: `Rename...`,
-                    leftItem: null,
-                    onClick: () => {
-                        setSelectedModal({
-                            type: 'rename-comp',
-                            compositionId: item.composition.id,
-                        });
-                    },
-                    quickSwitcherLabel: null,
-                    subMenu: null,
-                    type: 'item',
-                    value: 'rename',
-                },
-                {
-                    id: 'delete',
-                    keyHint: null,
-                    label: `Delete...`,
-                    leftItem: null,
-                    onClick: () => {
-                        setSelectedModal({
-                            type: 'delete-comp',
-                            compositionId: item.composition.id,
-                        });
-                    },
-                    quickSwitcherLabel: null,
-                    subMenu: null,
-                    type: 'item',
-                    value: 'delete',
-                },
-                {
-                    type: 'divider',
-                    id: 'copy-id-divider',
-                },
-                {
-                    id: 'copy-id',
-                    keyHint: null,
-                    label: `Copy ID`,
-                    leftItem: null,
-                    onClick: () => {
-                        navigator.clipboard
-                            .writeText(item.composition.id)
-                            .catch((err) => {
-                            (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 1000);
-                        })
-                            .then(() => {
-                            (0, NotificationCenter_1.showNotification)('Copied to clipboard', 1000);
-                        });
-                    },
-                    quickSwitcherLabel: null,
-                    subMenu: null,
-                    type: 'item',
-                    value: 'remove',
-                },
-            ];
+            return (0, composition_menu_items_1.getCompositionMenuItems)({
+                closeMenu: noop_1.noop,
+                composition: item.composition,
+                connectionStatus,
+                resolvedLocation,
+                setSelectedModal,
+                readOnlyStudio: window.remotion_isReadOnlyStudio,
+            });
         }
         return [];
-    }, [item, setSelectedModal]);
+    }, [connectionStatus, item, resolvedLocation, setSelectedModal]);
     if (item.type === 'folder') {
         return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                 jsx_runtime_1.jsxs("button", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, type: "button", title: item.folderName, children: [item.expanded ? (jsx_runtime_1.jsx(folder_1.ExpandedFolderIcon, { style: iconStyle, color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT })) : (jsx_runtime_1.jsx(folder_1.CollapsedFolderIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsx("div", { style: label, children: item.folderName })

package/dist/components/EditorContent.js

@@ -4,7 +4,6 @@ exports.EditorContent = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
 const MenuToolbar_1 = require("./MenuToolbar");
 const SplitterContainer_1 = require("./Splitter/SplitterContainer");
@@ -20,9 +19,8 @@ const container = {
     height: 0,
 };
 const EditorContent = ({ readOnlyStudio, children }) => {
-    const isStill = (0, is_current_selected_still_1.useIsStill)();
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const showTimeline = canvasContent !== null && !isStill && canvasContent.type === 'composition';
+    const showTimeline = canvasContent !== null && canvasContent.type === 'composition';
     return (jsx_runtime_1.jsxs("div", { style: container, children: [
             jsx_runtime_1.jsx(InitialCompositionLoader_1.InitialCompositionLoader, {}), jsx_runtime_1.jsx(MenuToolbar_1.MenuToolbar, { readOnlyStudio: readOnlyStudio }), jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, children: [
                     jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "flexer", children: children }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { sticky: null, type: "anti-flexer", children: showTimeline ? jsx_runtime_1.jsx(Timeline_1.Timeline, {}) : jsx_runtime_1.jsx(TimelineEmptyState_1.TimelineEmptyState, {}) })

package/dist/components/Menu/MenuItem.d.ts

@@ -1,7 +1,7 @@
 import type { SetStateAction } from 'react';
 import React from 'react';
 import type { ComboboxValue } from '../NewComposition/ComboBox';
-export type MenuId = 'remotion' | 'file' | 'view' | 'install' | 'tools' | 'help';
+export type MenuId = 'remotion' | 'file' | 'view' | 'composition' | 'install' | 'tools' | 'help';
 export type Menu = {
     id: MenuId;
     label: React.ReactNode;

package/dist/components/Modals.js

@@ -26,6 +26,6 @@ const Modals = ({ readOnlyStudio }) => {
         'connected';
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'duplicate-comp' && (jsx_runtime_1.jsx(DuplicateComposition_1.DuplicateComposition, { compositionType: modalContextType.compositionType, compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'delete-comp' && (jsx_runtime_1.jsx(DeleteComposition_1.DeleteComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'rename-comp' && (jsx_runtime_1.jsx(RenameComposition_1.RenameComposition, { compositionId: modalContextType.compositionId })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
                 modalContextType.type === 'server-render' &&
-                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, 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, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && (jsx_runtime_1.jsx(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'install-packages' && (jsx_runtime_1.jsx(InstallPackage_1.InstallPackageModal, { packageManager: modalContextType.packageManager })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode })), process.env.ASK_AI_ENABLED && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
+                (canRender || modalContextType.readOnlyStudio) ? (jsx_runtime_1.jsx(ServerRenderModal_1.RenderModalWithLoader, { readOnlyStudio: (_a = modalContextType.readOnlyStudio) !== null && _a !== void 0 ? _a : false, initialFrame: modalContextType.initialFrame, initialDarkMode: modalContextType.initialDarkMode, compositionId: modalContextType.compositionId, initialVideoImageFormat: modalContextType.initialVideoImageFormat, initialJpegQuality: modalContextType.initialJpegQuality, initialScale: modalContextType.initialScale, initialLogLevel: modalContextType.initialLogLevel, initialOffthreadVideoCacheSizeInBytes: modalContextType.initialOffthreadVideoCacheSizeInBytes, initialOffthreadVideoThreads: modalContextType.initialOffthreadVideoThreads, initialMediaCacheSizeInBytes: modalContextType.initialMediaCacheSizeInBytes, initialConcurrency: modalContextType.initialConcurrency, maxConcurrency: modalContextType.maxConcurrency, minConcurrency: modalContextType.minConcurrency, initialStillImageFormat: modalContextType.initialStillImageFormat, initialMuted: modalContextType.initialMuted, initialEnforceAudioTrack: modalContextType.initialEnforceAudioTrack, initialProResProfile: modalContextType.initialProResProfile, initialx264Preset: modalContextType.initialx264Preset, initialGopSize: modalContextType.initialGopSize, initialPixelFormat: modalContextType.initialPixelFormat, initialAudioBitrate: modalContextType.initialAudioBitrate, initialVideoBitrate: modalContextType.initialVideoBitrate, initialEveryNthFrame: modalContextType.initialEveryNthFrame, initialNumberOfGifLoops: modalContextType.initialNumberOfGifLoops, initialDelayRenderTimeout: modalContextType.initialDelayRenderTimeout, initialEnvVariables: modalContextType.initialEnvVariables, initialDisableWebSecurity: modalContextType.initialDisableWebSecurity, initialGl: modalContextType.initialOpenGlRenderer, initialHeadless: modalContextType.initialHeadless, initialIgnoreCertificateErrors: modalContextType.initialIgnoreCertificateErrors, initialEncodingBufferSize: modalContextType.initialEncodingBufferSize, initialEncodingMaxRate: modalContextType.initialEncodingMaxRate, initialUserAgent: modalContextType.initialUserAgent, initialColorSpace: modalContextType.initialColorSpace, initialMultiProcessOnLinux: modalContextType.initialMultiProcessOnLinux, initialRepro: modalContextType.initialRepro, initialBeep: modalContextType.initialBeep, initialForSeamlessAacConcatenation: modalContextType.initialForSeamlessAacConcatenation, defaultProps: modalContextType.defaultProps, inFrameMark: modalContextType.inFrameMark, outFrameMark: modalContextType.outFrameMark, defaultConfigurationAudioCodec: modalContextType.defaultConfigurationAudioCodec, defaultConfigurationVideoCodec: modalContextType.defaultConfigurationVideoCodec, renderTypeOfLastRender: modalContextType.renderTypeOfLastRender, defaultMetadata: modalContextType.defaulMetadata, initialHardwareAcceleration: modalContextType.initialHardwareAcceleration, initialSampleRate: modalContextType.initialSampleRate, initialChromeMode: modalContextType.initialChromeMode, renderDefaults: modalContextType.renderDefaults })) : null, modalContextType && modalContextType.type === 'render-progress' && (jsx_runtime_1.jsx(RenderStatusModal_1.RenderStatusModal, { jobId: modalContextType.jobId })), modalContextType && modalContextType.type === 'update' && (jsx_runtime_1.jsx(UpdateModal_1.UpdateModal, { info: modalContextType.info, knownBugs: modalContextType.knownBugs })), modalContextType && modalContextType.type === 'install-packages' && (jsx_runtime_1.jsx(InstallPackage_1.InstallPackageModal, { packageManager: modalContextType.packageManager })), modalContextType && modalContextType.type === 'quick-switcher' && (jsx_runtime_1.jsx(QuickSwitcher_1.default, { readOnlyStudio: readOnlyStudio, invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode })), process.env.ASK_AI_ENABLED && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }));
 };
 exports.Modals = Modals;

package/dist/components/NewComposition/MenuContent.js

@@ -19,6 +19,7 @@ const container = {
     marginLeft: 0 - BORDER_SIZE,
     overflowY: 'auto',
     overflowX: 'hidden',
+    scrollbarGutter: 'auto',
     minWidth: 200,
     maxWidth: styles_1.MAX_MENU_WIDTH,
 };

package/dist/components/RenderButton.js

@@ -195,6 +195,7 @@ const RenderButton = ({ readOnlyStudio, }) => {
             initialEnforceAudioTrack: defaults.enforceAudioTrack,
             initialProResProfile: defaults.proResProfile,
             initialx264Preset: defaults.x264Preset,
+            initialGopSize: defaults.gopSize,
             initialPixelFormat: null,
             initialAudioBitrate: defaults.audioBitrate,
             initialVideoBitrate: defaults.videoBitrate,

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

@@ -1,5 +1,4 @@
-import type { ChromeMode, Codec, X264Preset } from '@remotion/renderer';
-import type { HardwareAccelerationOption } from '@remotion/renderer/client';
+import type { ChromeMode } from '@remotion/renderer';
 import type { UiOpenGlOptions } from '@remotion/studio-shared';
 import React from 'react';
 export type RenderType = 'still' | 'video' | 'audio' | 'sequence';
@@ -11,8 +10,6 @@ export declare const RenderModalAdvanced: React.FC<{
     readonly concurrency: number;
     readonly delayRenderTimeout: number;
     readonly setDelayRenderTimeout: React.Dispatch<React.SetStateAction<number>>;
-    readonly disallowParallelEncoding: boolean;
-    readonly setDisallowParallelEncoding: React.Dispatch<React.SetStateAction<boolean>>;
     readonly setDisableWebSecurity: React.Dispatch<React.SetStateAction<boolean>>;
     readonly setIgnoreCertificateErrors: React.Dispatch<React.SetStateAction<boolean>>;
     readonly setHeadless: React.Dispatch<React.SetStateAction<boolean>>;
@@ -23,19 +20,12 @@ export declare const RenderModalAdvanced: React.FC<{
     readonly setOpenGlOption: React.Dispatch<React.SetStateAction<UiOpenGlOptions>>;
     readonly chromeModeOption: ChromeMode;
     readonly setChromeModeOption: React.Dispatch<React.SetStateAction<ChromeMode>>;
-    readonly envVariables: [string, string][];
-    readonly setEnvVariables: React.Dispatch<React.SetStateAction<[string, string][]>>;
-    readonly x264Preset: X264Preset | null;
-    readonly setx264Preset: React.Dispatch<React.SetStateAction<X264Preset>>;
-    readonly hardwareAcceleration: HardwareAccelerationOption;
-    readonly setHardwareAcceleration: React.Dispatch<React.SetStateAction<HardwareAccelerationOption>>;
     readonly offthreadVideoCacheSizeInBytes: number | null;
     readonly setOffthreadVideoCacheSizeInBytes: React.Dispatch<React.SetStateAction<number | null>>;
     readonly mediaCacheSizeInBytes: number | null;
     readonly setMediaCacheSizeInBytes: React.Dispatch<React.SetStateAction<number | null>>;
     readonly offthreadVideoThreads: number | null;
     readonly setOffthreadVideoThreads: React.Dispatch<React.SetStateAction<number | null>>;
-    readonly codec: Codec;
     readonly enableMultiProcessOnLinux: boolean;
     readonly darkMode: boolean;
     readonly setDarkMode: React.Dispatch<React.SetStateAction<boolean>>;

package/dist/components/RenderModal/RenderModalAdvanced.js

@@ -4,7 +4,6 @@ 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 layout_1 = require("../layout");
@@ -14,13 +13,12 @@ const RemInput_1 = require("../NewComposition/RemInput");
 const layout_2 = require("./layout");
 const NumberSetting_1 = require("./NumberSetting");
 const OptionExplainerBubble_1 = require("./OptionExplainerBubble");
-const RenderModalEnvironmentVariables_1 = require("./RenderModalEnvironmentVariables");
 const RenderModalHr_1 = require("./RenderModalHr");
 const container = {
     flex: 1,
     overflowY: 'auto',
 };
-const RenderModalAdvanced = ({ renderMode, maxConcurrency, minConcurrency, setConcurrency, concurrency, delayRenderTimeout, setDelayRenderTimeout, disallowParallelEncoding, setDisallowParallelEncoding, setDisableWebSecurity, setIgnoreCertificateErrors, setHeadless, headless, ignoreCertificateErrors, disableWebSecurity, openGlOption, setOpenGlOption, setEnvVariables, envVariables, setx264Preset, x264Preset, codec, setMediaCacheSizeInBytes, mediaCacheSizeInBytes, offthreadVideoCacheSizeInBytes, setOffthreadVideoCacheSizeInBytes, offthreadVideoThreads, setOffthreadVideoThreads, enableMultiProcessOnLinux, setChromiumMultiProcessOnLinux, setUserAgent, userAgent, beep, setBeep, repro, setRepro, hardwareAcceleration, chromeModeOption, setChromeModeOption, setHardwareAcceleration, darkMode, setDarkMode, }) => {
+const RenderModalAdvanced = ({ renderMode, maxConcurrency, minConcurrency, setConcurrency, concurrency, delayRenderTimeout, setDelayRenderTimeout, setDisableWebSecurity, setIgnoreCertificateErrors, setHeadless, headless, ignoreCertificateErrors, disableWebSecurity, openGlOption, setOpenGlOption, setMediaCacheSizeInBytes, mediaCacheSizeInBytes, offthreadVideoCacheSizeInBytes, setOffthreadVideoCacheSizeInBytes, offthreadVideoThreads, setOffthreadVideoThreads, enableMultiProcessOnLinux, setChromiumMultiProcessOnLinux, setUserAgent, userAgent, beep, setBeep, repro, setRepro, chromeModeOption, setChromeModeOption, darkMode, setDarkMode, }) => {
     const extendedOpenGlOptions = (0, react_1.useMemo)(() => {
         return [
             'angle',
@@ -64,9 +62,6 @@ const RenderModalAdvanced = ({ renderMode, maxConcurrency, minConcurrency, setCo
             return null;
         });
     }, [setUserAgent]);
-    const onDisallowParallelEncodingChanged = (0, react_1.useCallback)((e) => {
-        setDisallowParallelEncoding(e.target.checked);
-    }, [setDisallowParallelEncoding]);
     const onDisableWebSecurityChanged = (0, react_1.useCallback)((e) => {
         setDisableWebSecurity(e.target.checked);
     }, [setDisableWebSecurity]);
@@ -123,37 +118,6 @@ const RenderModalAdvanced = ({ renderMode, maxConcurrency, minConcurrency, setCo
             };
         });
     }, [chromeModeOption, setChromeModeOption]);
-    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,
-                type: 'item',
-                id: option,
-                keyHint: null,
-                leftItem: x264Preset === option ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
-                quickSwitcherLabel: null,
-                subMenu: null,
-                value: option,
-            };
-        });
-    }, [setx264Preset, x264Preset]);
-    const hardwareAccelerationValues = (0, react_1.useMemo)(() => {
-        return client_1.BrowserSafeApis.hardwareAccelerationOptions.map((option) => {
-            return {
-                label: option,
-                onClick: () => setHardwareAcceleration(option),
-                leftItem: hardwareAcceleration === option ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
-                subMenu: null,
-                quickSwitcherLabel: null,
-                type: 'item',
-                id: option,
-                keyHint: null,
-                value: option,
-            };
-        });
-    }, [hardwareAcceleration, setHardwareAcceleration]);
     const changeMediaCacheSizeInBytes = (0, react_1.useCallback)((cb) => {
         setMediaCacheSizeInBytes((prev) => {
             if (prev === null) {
@@ -187,21 +151,11 @@ const RenderModalAdvanced = ({ renderMode, maxConcurrency, minConcurrency, setCo
             return cb;
         });
     }, [setOffthreadVideoThreads]);
-    return (jsx_runtime_1.jsxs("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [renderMode === 'still' ? null : (jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { min: minConcurrency, max: maxConcurrency, step: 1, name: "Concurrency", formatter: (w) => `${w}x`, onValueChanged: setConcurrency, value: concurrency })), renderMode === 'video' && codec === 'h264' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                    jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["x264 Preset",
-                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "x264Option" })
-                        ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: x264Preset, selectedId: x264Preset, values: x264PresetOptions }) })
-                ] })) : null, renderMode === 'video' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                    jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Hardware acceleration",
-                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "hardwareAccelerationOption" })
-                        ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: hardwareAcceleration, selectedId: hardwareAcceleration, values: hardwareAccelerationValues }) })
-                ] })) : null, jsx_runtime_1.jsx(NumberSetting_1.NumberSetting
+    return (jsx_runtime_1.jsxs("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [renderMode === 'still' ? null : (jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { min: minConcurrency, max: maxConcurrency, step: 1, name: "Concurrency", formatter: (w) => `${w}x`, onValueChanged: setConcurrency, value: concurrency })), jsx_runtime_1.jsx(NumberSetting_1.NumberSetting
             // Also appears in packages/renderer/src/validate-puppeteer-timeout.ts
             , { 
                 // Also appears in packages/renderer/src/validate-puppeteer-timeout.ts
-                min: 7000, max: 900000, name: "delayRender() timeout", onValueChanged: setDelayRenderTimeout, formatter: (w) => `${w}ms`, step: 1000, hint: "delayRenderTimeoutInMillisecondsOption", value: delayRenderTimeout }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "No parallel encoding" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: disallowParallelEncoding, onChange: onDisallowParallelEncodingChanged, name: "disallow-parallel-encoding" }) })
-                ] }), renderMode === 'audio' ? null : (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                min: 7000, max: 900000, name: "delayRender() timeout", onValueChanged: setDelayRenderTimeout, formatter: (w) => `${w}ms`, step: 1000, hint: "delayRenderTimeoutInMillisecondsOption", value: delayRenderTimeout }), renderMode === 'audio' ? null : (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                     jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Custom @remotion/media cache size",
                             jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "mediaCacheSizeInBytesOption" })
                         ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: mediaCacheSizeInBytes !== null, onChange: toggleCustomMediaCacheSizeInBytes, name: "media-cache-size" }) })
@@ -250,7 +204,7 @@ const RenderModalAdvanced = ({ renderMode, maxConcurrency, minConcurrency, setCo
                     jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Beep when finished ",
                             jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "beepOnFinishOption" })
                         ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: beep, onChange: onPlayBeepSound, name: "beep-when-finished" }) })
-                ] }), jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), jsx_runtime_1.jsx(RenderModalEnvironmentVariables_1.RenderModalEnvironmentVariables, { envVariables: envVariables, setEnvVariables: setEnvVariables })
+                ] })
         ] }));
 };
 exports.RenderModalAdvanced = RenderModalAdvanced;

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

@@ -0,0 +1,37 @@
+import type { ColorSpace, Codec, PixelFormat, X264Preset } from '@remotion/renderer';
+import type { HardwareAccelerationOption } from '@remotion/renderer/client';
+import React from 'react';
+import type { ComboboxValue } from '../NewComposition/ComboBox';
+import type { RenderType } from './RenderModalAdvanced';
+declare const qualityControlModes: readonly ["crf", "bitrate"];
+export type QualityControl = (typeof qualityControlModes)[number];
+export declare const RenderModalEncoding: React.FC<{
+    readonly renderMode: RenderType;
+    readonly codec: Codec;
+    readonly qualityControlType: QualityControl | null;
+    readonly setQualityControl: React.Dispatch<React.SetStateAction<QualityControl>>;
+    readonly shouldDisplayQualityControlPicker: boolean;
+    readonly crf: number | null;
+    readonly minCrf: number;
+    readonly maxCrf: number;
+    readonly setCrf: React.Dispatch<React.SetStateAction<number>>;
+    readonly customTargetVideoBitrate: string;
+    readonly setCustomTargetVideoBitrateValue: React.Dispatch<React.SetStateAction<string>>;
+    readonly encodingBufferSize: string | null;
+    readonly setEncodingBufferSize: React.Dispatch<React.SetStateAction<string | null>>;
+    readonly encodingMaxRate: string | null;
+    readonly setEncodingMaxRate: React.Dispatch<React.SetStateAction<string | null>>;
+    readonly pixelFormat: PixelFormat;
+    readonly pixelFormatOptions: ComboboxValue[];
+    readonly colorSpace: ColorSpace;
+    readonly setColorSpace: React.Dispatch<React.SetStateAction<ColorSpace>>;
+    readonly x264Preset: X264Preset | null;
+    readonly setx264Preset: React.Dispatch<React.SetStateAction<X264Preset>>;
+    readonly gopSize: number | null;
+    readonly setGopSize: React.Dispatch<React.SetStateAction<number | null>>;
+    readonly hardwareAcceleration: HardwareAccelerationOption;
+    readonly setHardwareAcceleration: React.Dispatch<React.SetStateAction<HardwareAccelerationOption>>;
+    readonly disallowParallelEncoding: boolean;
+    readonly setDisallowParallelEncoding: React.Dispatch<React.SetStateAction<boolean>>;
+}>;
+export {};

package/dist/components/RenderModal/RenderModalEncoding.js

@@ -0,0 +1,165 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RenderModalEncoding = 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 layout_1 = require("../layout");
+const is_menu_item_1 = require("../Menu/is-menu-item");
+const ComboBox_1 = require("../NewComposition/ComboBox");
+const RemInput_1 = require("../NewComposition/RemInput");
+const SegmentedControl_1 = require("../SegmentedControl");
+const CrfSetting_1 = require("./CrfSetting");
+const layout_2 = require("./layout");
+const NumberSetting_1 = require("./NumberSetting");
+const OptionExplainerBubble_1 = require("./OptionExplainerBubble");
+const RenderModalHr_1 = require("./RenderModalHr");
+const qualityControlModes = ['crf', 'bitrate'];
+const container = {
+    flex: 1,
+    overflowY: 'auto',
+};
+const RenderModalEncoding = ({ renderMode, codec, qualityControlType, setQualityControl, shouldDisplayQualityControlPicker, crf, minCrf, maxCrf, setCrf, customTargetVideoBitrate, setCustomTargetVideoBitrateValue, encodingBufferSize, setEncodingBufferSize, encodingMaxRate, setEncodingMaxRate, pixelFormat, pixelFormatOptions, colorSpace, setColorSpace, x264Preset, setx264Preset, gopSize, setGopSize, hardwareAcceleration, setHardwareAcceleration, disallowParallelEncoding, setDisallowParallelEncoding, }) => {
+    const colorSpaceOptions = (0, react_1.useMemo)(() => {
+        return client_1.BrowserSafeApis.validColorSpaces.map((option) => {
+            return {
+                label: option,
+                onClick: () => setColorSpace(option),
+                key: option,
+                id: option,
+                keyHint: null,
+                leftItem: colorSpace === option ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                type: 'item',
+                value: option,
+            };
+        });
+    }, [colorSpace, setColorSpace]);
+    const qualityControlOptions = (0, react_1.useMemo)(() => {
+        return qualityControlModes.map((option) => {
+            return {
+                label: option === 'crf' ? 'CRF' : 'Bitrate',
+                onClick: () => setQualityControl(option),
+                key: option,
+                selected: qualityControlType === option,
+            };
+        });
+    }, [qualityControlType, setQualityControl]);
+    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,
+                type: 'item',
+                id: option,
+                keyHint: null,
+                leftItem: x264Preset === option ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: option,
+            };
+        });
+    }, [setx264Preset, x264Preset]);
+    const hardwareAccelerationValues = (0, react_1.useMemo)(() => {
+        return client_1.BrowserSafeApis.hardwareAccelerationOptions.map((option) => {
+            return {
+                label: option,
+                onClick: () => setHardwareAcceleration(option),
+                leftItem: hardwareAcceleration === option ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
+                subMenu: null,
+                quickSwitcherLabel: null,
+                type: 'item',
+                id: option,
+                keyHint: null,
+                value: option,
+            };
+        });
+    }, [hardwareAcceleration, setHardwareAcceleration]);
+    const toggleCustomGopSize = (0, react_1.useCallback)(() => {
+        setGopSize((previous) => {
+            if (previous === null) {
+                return 120;
+            }
+            return null;
+        });
+    }, [setGopSize]);
+    const changeGopSize = (0, react_1.useCallback)((cb) => {
+        setGopSize((prev) => {
+            if (prev === null) {
+                throw new TypeError('Expected previous value');
+            }
+            if (typeof cb === 'function') {
+                return cb(prev);
+            }
+            return cb;
+        });
+    }, [setGopSize]);
+    const onTargetVideoBitrateChanged = (0, react_1.useCallback)((e) => {
+        setCustomTargetVideoBitrateValue(e.target.value);
+    }, [setCustomTargetVideoBitrateValue]);
+    const onEncodingBufferSizeToggled = (0, react_1.useCallback)((e) => {
+        setEncodingBufferSize(e.target.checked ? '10000k' : null);
+    }, [setEncodingBufferSize]);
+    const onEncodingMaxRateToggled = (0, react_1.useCallback)((e) => {
+        setEncodingMaxRate(e.target.checked ? '5000k' : null);
+    }, [setEncodingMaxRate]);
+    const onEncodingBufferSizeChanged = (0, react_1.useCallback)((e) => {
+        setEncodingBufferSize(e.target.value);
+    }, [setEncodingBufferSize]);
+    const onEncodingMaxRateChanged = (0, react_1.useCallback)((e) => {
+        setEncodingMaxRate(e.target.value);
+    }, [setEncodingMaxRate]);
+    const onDisallowParallelEncodingChanged = (0, react_1.useCallback)((e) => {
+        setDisallowParallelEncoding(e.target.checked);
+    }, [setDisallowParallelEncoding]);
+    return (jsx_runtime_1.jsxs("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [shouldDisplayQualityControlPicker && renderMode === 'video' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Quality control" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: qualityControlOptions, needsWrapping: true }) })
+                ] })) : null, qualityControlType === 'crf' &&
+                renderMode === 'video' &&
+                crf !== null ? (jsx_runtime_1.jsx(CrfSetting_1.CrfSetting, { crf: crf, min: minCrf, max: maxCrf, setCrf: setCrf, option: "crfOption" })) : null, qualityControlType === 'bitrate' && renderMode === 'video' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                    jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Target video bitrate",
+                            jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "videoBitrateOption" })
+                        ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { style: layout_2.input, value: customTargetVideoBitrate, onChange: onTargetVideoBitrateChanged, status: "ok", rightAlign: true }) }) })
+                ] })) : null, renderMode === 'video' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                            jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Custom FFmpeg -bufsize",
+                                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "encodingBufferSizeOption" })
+                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: encodingBufferSize !== null, onChange: onEncodingBufferSizeToggled, name: "encoding-buffer-size" }) })
+                        ] }), encodingBufferSize === null ? null : (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                            jsx_runtime_1.jsx("div", { style: layout_2.label, children: "-bufsize value" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { style: layout_2.input, value: encodingBufferSize, onChange: onEncodingBufferSizeChanged, status: "ok", rightAlign: true }) }) })
+                        ] })), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                            jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Custom FFmpeg -maxrate",
+                                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "encodingMaxRateOption" })
+                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: encodingMaxRate !== null, onChange: onEncodingMaxRateToggled, name: "encoding-max-rate" }) })
+                        ] }), encodingMaxRate === null ? null : (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                            jsx_runtime_1.jsx("div", { style: layout_2.label, children: "-maxrate value" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { style: layout_2.input, value: encodingMaxRate, onChange: onEncodingMaxRateChanged, status: "ok", rightAlign: true }) }) })
+                        ] })), jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                            jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Pixel format" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: pixelFormatOptions, selectedId: pixelFormat, title: "Pixel Format" }) })
+                        ] }), jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                            jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Color space",
+                                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "colorSpaceOption" })
+                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: colorSpaceOptions, selectedId: colorSpace, title: "Color Space" }) })
+                        ] }), jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), codec === 'h264' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                            jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["x264 Preset",
+                                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "x264Option" })
+                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: x264Preset, selectedId: x264Preset, values: x264PresetOptions }) })
+                        ] })) : null, codec !== 'gif' ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                            jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Custom GOP size",
+                                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "gopSizeOption" })
+                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: gopSize !== null, onChange: toggleCustomGopSize, name: "custom-gop-size" }) })
+                        ] })) : null, codec !== 'gif' && gopSize !== null ? (jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { min: 1, max: 10000, step: 1, name: "GOP size", formatter: (value) => `${value} frames`, onValueChanged: changeGopSize, value: gopSize })) : null, jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                            jsx_runtime_1.jsxs("div", { style: layout_2.label, children: ["Hardware acceleration",
+                                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(OptionExplainerBubble_1.OptionExplainerBubble, { id: "hardwareAccelerationOption" })
+                                ] }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { title: hardwareAcceleration, selectedId: hardwareAcceleration, values: hardwareAccelerationValues }) })
+                        ] })
+                ] })) : null, renderMode === 'still' ? null : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [renderMode === 'video' ? jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}) : null, jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
+                            jsx_runtime_1.jsx("div", { style: layout_2.label, children: "No parallel encoding" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: disallowParallelEncoding, onChange: onDisallowParallelEncodingChanged, name: "disallow-parallel-encoding" }) })
+                        ] })
+                ] }))] }));
+};
+exports.RenderModalEncoding = RenderModalEncoding;

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

@@ -1,37 +1,16 @@
-import type { ColorSpace, PixelFormat, StillImageFormat, VideoImageFormat } from '@remotion/renderer';
+import type { StillImageFormat, VideoImageFormat } from '@remotion/renderer';
 import React from 'react';
-import type { ComboboxValue } from '../NewComposition/ComboBox';
 import type { SegmentedControlItem } from '../SegmentedControl';
 import type { RenderType } from './RenderModalAdvanced';
-declare const qualityControlModes: readonly ["crf", "bitrate"];
-export type QualityControl = (typeof qualityControlModes)[number];
 export declare const RenderModalPicture: React.FC<{
     readonly renderMode: RenderType;
     readonly scale: number;
     readonly setScale: React.Dispatch<React.SetStateAction<number>>;
-    readonly pixelFormat: PixelFormat;
-    readonly colorSpace: ColorSpace;
-    readonly setColorSpace: React.Dispatch<React.SetStateAction<ColorSpace>>;
     readonly imageFormatOptions: SegmentedControlItem[];
-    readonly setQualityControl: React.Dispatch<React.SetStateAction<QualityControl>>;
-    readonly qualityControlType: QualityControl | null;
     readonly videoImageFormat: VideoImageFormat;
     readonly stillImageFormat: StillImageFormat;
     readonly setJpegQuality: React.Dispatch<React.SetStateAction<number>>;
     readonly jpegQuality: number;
-    readonly maxCrf: number;
-    readonly minCrf: number;
-    readonly setCrf: React.Dispatch<React.SetStateAction<number>>;
-    readonly setCustomTargetVideoBitrateValue: React.Dispatch<React.SetStateAction<string>>;
-    readonly crf: number | null;
-    readonly customTargetVideoBitrate: string;
-    readonly shouldDisplayQualityControlPicker: boolean;
-    readonly pixelFormatOptions: ComboboxValue[];
-    readonly encodingBufferSize: string | null;
-    readonly setEncodingBufferSize: React.Dispatch<React.SetStateAction<string | null>>;
-    readonly encodingMaxRate: string | null;
-    readonly setEncodingMaxRate: React.Dispatch<React.SetStateAction<string | null>>;
     readonly compositionWidth: number;
     readonly compositionHeight: number;
 }>;
-export {};