@remotion/studio 4.0.464 → 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/CodemodFooter.d.ts

@@ -3,6 +3,7 @@ import React from 'react';
 export declare const CodemodFooter: React.FC<{
     readonly valid: boolean;
     readonly codemod: RecastCodemod;
+    readonly stack: string | null;
     readonly loadingNotification: React.ReactNode;
     readonly successNotification: React.ReactNode;
     readonly errorNotification: string;

package/dist/components/NewComposition/CodemodFooter.js

@@ -4,33 +4,25 @@ exports.CodemodFooter = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const ShortcutHint_1 = require("../../error-overlay/remotion-overlay/ShortcutHint");
+const resolved_stack_to_symbolicated_1 = require("../../helpers/resolved-stack-to-symbolicated");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const modals_1 = require("../../state/modals");
 const layout_1 = require("../layout");
 const ModalButton_1 = require("../ModalButton");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const actions_1 = require("../RenderQueue/actions");
+const use_resolved_stack_1 = require("../Timeline/use-resolved-stack");
 const DiffPreview_1 = require("./DiffPreview");
-const CodemodFooter = ({ codemod, valid, loadingNotification, successNotification, errorNotification, genericSubmitLabel, submitLabel, onSuccess, }) => {
+const CodemodFooter = ({ codemod, stack, valid, loadingNotification, successNotification, errorNotification, genericSubmitLabel, submitLabel, onSuccess, }) => {
+    var _a;
     const [submitting, setSubmitting] = (0, react_1.useState)(false);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const [codemodStatus, setCanApplyCodemod] = (0, react_1.useState)({
         type: 'loading',
     });
-    const [projectInfo, setProjectInfo] = (0, react_1.useState)(null);
-    (0, react_1.useEffect)(() => {
-        const controller = new AbortController();
-        (0, actions_1.getProjectInfo)(controller.signal)
-            .then((info) => {
-            setProjectInfo(info.projectInfo);
-        })
-            .catch((err) => {
-            (0, NotificationCenter_1.showNotification)(`Could not get project info: ${err.message}. Unable to duplicate composition`, 3000);
-        });
-        return () => {
-            controller.abort();
-        };
-    }, []);
+    const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)(stack);
+    const symbolicatedStack = (0, react_1.useMemo)(() => (0, resolved_stack_to_symbolicated_1.resolvedStackToSymbolicated)(resolvedLocation), [resolvedLocation]);
+    const relativeFilePath = (_a = symbolicatedStack === null || symbolicatedStack === void 0 ? void 0 : symbolicatedStack.originalFileName) !== null && _a !== void 0 ? _a : null;
     const trigger = (0, react_1.useCallback)(() => {
         setSubmitting(true);
         setSelectedModal(null);
@@ -38,6 +30,7 @@ const CodemodFooter = ({ codemod, valid, loadingNotification, successNotificatio
         (0, actions_1.applyCodemod)({
             codemod,
             dryRun: false,
+            symbolicatedStack,
             signal: new AbortController().signal,
         })
             .then(() => {
@@ -54,11 +47,13 @@ const CodemodFooter = ({ codemod, valid, loadingNotification, successNotificatio
         onSuccess,
         setSelectedModal,
         successNotification,
+        symbolicatedStack,
     ]);
     const getCanApplyCodemod = (0, react_1.useCallback)(async (signal) => {
         const res = await (0, actions_1.applyCodemod)({
             codemod,
             dryRun: true,
+            symbolicatedStack,
             signal,
         });
         if (res.success) {
@@ -70,8 +65,25 @@ const CodemodFooter = ({ codemod, valid, loadingNotification, successNotificatio
                 error: res.reason,
             });
         }
-    }, [codemod]);
+    }, [codemod, symbolicatedStack]);
     (0, react_1.useEffect)(() => {
+        if (!stack) {
+            setCanApplyCodemod({
+                type: 'fail',
+                error: 'Could not determine where this composition is defined',
+            });
+            return;
+        }
+        if (!(0, use_resolved_stack_1.hasResolvedStack)(stack)) {
+            return;
+        }
+        if (!symbolicatedStack) {
+            setCanApplyCodemod({
+                type: 'fail',
+                error: 'Could not resolve the source location of this composition',
+            });
+            return;
+        }
         const abortController = new AbortController();
         let aborted = false;
         getCanApplyCodemod(abortController.signal)
@@ -80,16 +92,16 @@ const CodemodFooter = ({ codemod, valid, loadingNotification, successNotificatio
             if (aborted) {
                 return;
             }
-            (0, NotificationCenter_1.showNotification)(`Cannot duplicate composition: ${err.message}`, 3000);
+            (0, NotificationCenter_1.showNotification)(`${errorNotification}: ${err.message}`, 3000);
         });
         return () => {
             aborted = true;
             abortController.abort();
         };
-    }, [getCanApplyCodemod]);
+    }, [errorNotification, getCanApplyCodemod, stack, symbolicatedStack]);
     const disabled = !valid ||
         submitting ||
-        projectInfo === null ||
+        symbolicatedStack === null ||
         codemodStatus.type !== 'success';
     const { registerKeybinding } = (0, use_keybinding_1.useKeybinding)();
     (0, react_1.useEffect)(() => {
@@ -100,7 +112,7 @@ const CodemodFooter = ({ codemod, valid, loadingNotification, successNotificatio
             callback() {
                 trigger();
             },
-            commandCtrlKey: true,
+            commandCtrlKey: false,
             key: 'Enter',
             event: 'keydown',
             preventDefault: true,
@@ -112,9 +124,9 @@ const CodemodFooter = ({ codemod, valid, loadingNotification, successNotificatio
         };
     }, [disabled, registerKeybinding, trigger, valid]);
     return (jsx_runtime_1.jsxs(layout_1.Row, { align: "center", children: [
-            jsx_runtime_1.jsx(DiffPreview_1.CodemodDiffPreview, { status: codemodStatus }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(layout_1.Spacing, { block: true, x: 2 }), jsx_runtime_1.jsxs(ModalButton_1.ModalButton, { onClick: trigger, disabled: disabled, children: [projectInfo && projectInfo.relativeRootFile
-                        ? submitLabel({ relativeRootPath: projectInfo.relativeRootFile })
-                        : genericSubmitLabel, jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: true })
+            jsx_runtime_1.jsx(DiffPreview_1.CodemodDiffPreview, { status: codemodStatus }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(layout_1.Spacing, { block: true, x: 2 }), jsx_runtime_1.jsxs(ModalButton_1.ModalButton, { onClick: trigger, disabled: disabled, children: [relativeFilePath
+                        ? submitLabel({ relativeRootPath: relativeFilePath })
+                        : genericSubmitLabel, jsx_runtime_1.jsx(ShortcutHint_1.ShortcutHint, { keyToPress: "\u21B5", cmdOrCtrl: false })
                 ] })
         ] }));
 };

package/dist/components/NewComposition/DeleteComposition.js

@@ -16,11 +16,13 @@ const content = {
     minWidth: 500,
 };
 const DeleteCompositionLoaded = ({ compositionId }) => {
+    var _a;
     const context = (0, react_1.useContext)(ResolveCompositionBeforeModal_1.ResolvedCompositionContext);
     if (!context) {
         throw new Error('Resolved composition context');
     }
     const { unresolved } = context;
+    const compositionStack = (_a = unresolved.stack) !== null && _a !== void 0 ? _a : null;
     const codemod = (0, react_1.useMemo)(() => {
         return {
             type: 'delete-composition',
@@ -36,7 +38,7 @@ const DeleteCompositionLoaded = ({ compositionId }) => {
                             jsx_runtime_1.jsx("br", {}),
                             "The associated ",
                             jsx_runtime_1.jsx("code", { style: styles_1.inlineCodeSnippet, children: "component" }),
-                            " will remain in your code."] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { errorNotification: `Could not delete composition`, loadingNotification: 'Deleting', successNotification: `Deleted ${unresolved.id}`, genericSubmitLabel: `Delete`, submitLabel: ({ relativeRootPath }) => `Delete from ${relativeRootPath}`, codemod: codemod, valid: true, onSuccess: null }) })
+                            " will remain in your code."] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { errorNotification: `Could not delete composition`, loadingNotification: 'Deleting', successNotification: `Deleted ${unresolved.id}`, genericSubmitLabel: `Delete`, submitLabel: ({ relativeRootPath }) => `Delete from ${relativeRootPath}`, codemod: codemod, stack: compositionStack, valid: true, onSuccess: null }) })
                 ] })
         ] }));
 };

package/dist/components/NewComposition/DiffPreview.js

@@ -11,7 +11,7 @@ const CodemodDiffPreview = ({ status }) => {
         return (jsx_runtime_1.jsx("span", { style: { color: colors_1.FAIL_COLOR, fontSize: 13, lineHeight: 1.2 }, children: status.error }));
     }
     return (jsx_runtime_1.jsxs("div", { style: { lineHeight: 1.2 }, children: [
-            jsx_runtime_1.jsx("span", { style: { color: colors_1.LIGHT_TEXT, fontSize: 13, lineHeight: 1.2 }, children: "This will edit your Root file." }), jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsxs("span", { style: { color: colors_1.BLUE, fontSize: 13, lineHeight: 1.2 }, children: [status.diff.additions, " addition", status.diff.additions === 1 ? '' : 's', ","] }), ' ', jsx_runtime_1.jsxs("span", { style: {
+            jsx_runtime_1.jsx("span", { style: { color: colors_1.LIGHT_TEXT, fontSize: 13, lineHeight: 1.2 }, children: "This will edit your codebase." }), jsx_runtime_1.jsx("br", {}), jsx_runtime_1.jsxs("span", { style: { color: colors_1.BLUE, fontSize: 13, lineHeight: 1.2 }, children: [status.diff.additions, " addition", status.diff.additions === 1 ? '' : 's', ","] }), ' ', jsx_runtime_1.jsxs("span", { style: {
                     color: colors_1.SELECTED_GUIDE,
                     fontSize: 13,
                     lineHeight: 1.2,

package/dist/components/NewComposition/DuplicateComposition.js

@@ -29,11 +29,13 @@ const comboBoxStyle = {
     width: 190,
 };
 const DuplicateCompositionLoaded = ({ initialType }) => {
+    var _a;
     const context = (0, react_1.useContext)(ResolveCompositionBeforeModal_1.ResolvedCompositionContext);
     if (!context) {
         throw new Error('Resolved composition context');
     }
     const { resolved, unresolved } = context;
+    const compositionStack = (_a = unresolved.stack) !== null && _a !== void 0 ? _a : null;
     const [initialCompType] = (0, react_1.useState)(initialType);
     const hadDimensionsDefined = unresolved.width && unresolved.height;
     const hadFpsDefined = unresolved.fps !== undefined;
@@ -199,7 +201,7 @@ const DuplicateCompositionLoaded = ({ initialType }) => {
                                         ] })
                                 ] })) : null, type === 'composition' && hadDurationDefined ? (jsx_runtime_1.jsx(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, setDurationInFrames: setDurationInFrames })) : null, type === 'composition' && hadFpsDefined ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
                                     jsx_runtime_1.jsx("div", { style: layout_2.label, children: "FPS" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: selectedFrameRate, onTextChange: onTextFpsChange, placeholder: "Frame rate (fps)", name: "fps", min: 1, required: true, status: "ok", max: 240, step: 0.01, onValueChange: onFpsChange, rightAlign: false }) })
-                                ] })) : null] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Duplicating...', errorNotification: 'Could not duplicate composition', successNotification: `Duplicated ${unresolved.id} as ${newId}`, genericSubmitLabel: 'Duplicate', submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, valid: valid, onSuccess: onDuplicateSuccess }) })
+                                ] })) : null] }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Duplicating...', errorNotification: 'Could not duplicate composition', successNotification: `Duplicated ${unresolved.id} as ${newId}`, genericSubmitLabel: 'Duplicate', submitLabel: ({ relativeRootPath }) => `Add to ${relativeRootPath}`, codemod: codemod, stack: compositionStack, valid: valid, onSuccess: onDuplicateSuccess }) })
                 ] })
         ] }));
 };

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/NewComposition/RenameComposition.js

@@ -22,11 +22,13 @@ const content = {
     minWidth: 500,
 };
 const RenameCompositionLoaded = () => {
+    var _a;
     const context = (0, react_1.useContext)(ResolveCompositionBeforeModal_1.ResolvedCompositionContext);
     if (!context) {
         throw new Error('Resolved composition context');
     }
-    const { resolved } = context;
+    const { resolved, unresolved } = context;
+    const compositionStack = (_a = unresolved.stack) !== null && _a !== void 0 ? _a : null;
     const { compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const [newId, setName] = (0, react_1.useState)(() => {
         return resolved.result.id;
@@ -55,7 +57,7 @@ const RenameCompositionLoaded = () => {
                                             jsx_runtime_1.jsx(RemInput_1.RemotionInput, { value: newId, onChange: onNameChange, type: "text", autoFocus: true, placeholder: "Composition ID", status: "ok", rightAlign: true }), compNameErrMessage ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                                                     jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-start", message: compNameErrMessage, type: "error" })
                                                 ] })) : null] }) })
-                            ] }) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Renaming...', errorNotification: 'Could not rename composition', successNotification: `Renamed to ${newId}`, genericSubmitLabel: 'Rename', submitLabel: ({ relativeRootPath }) => `Modify ${relativeRootPath}`, codemod: codemod, valid: valid, onSuccess: null }) })
+                            ] }) }), jsx_runtime_1.jsx(ModalFooter_1.ModalFooterContainer, { children: jsx_runtime_1.jsx(CodemodFooter_1.CodemodFooter, { loadingNotification: 'Renaming...', errorNotification: 'Could not rename composition', successNotification: `Renamed to ${newId}`, genericSubmitLabel: 'Rename', submitLabel: ({ relativeRootPath }) => `Modify ${relativeRootPath}`, codemod: codemod, stack: compositionStack, valid: valid, onSuccess: null }) })
                 ] })
         ] }));
 };

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 {};