@remotion/studio 4.0.505 → 4.0.507

package/dist/components/MenuBuildIndicator.js

@@ -15,6 +15,7 @@ const cwd = {
     alignItems: 'center',
     justifyContent: 'center',
     userSelect: 'none',
+    whiteSpace: 'nowrap',
 };
 const spinnerSize = 14;
 const spinner = {

package/dist/components/MenuToolbar.js

@@ -39,7 +39,7 @@ const flex = {
 const MenuToolbar = ({ readOnlyStudio }) => {
     const [selected, setSelected] = (0, react_1.useState)(null);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
     const canUndoAndRedo = !readOnlyStudio ||
         (previewServerState.type === 'connected' &&

package/dist/components/ModalFooter.d.ts

@@ -2,4 +2,5 @@ import React from 'react';
 export declare const ModalFooterContainer: React.FC<{
     readonly children: React.ReactNode;
     readonly style?: React.CSSProperties;
+    readonly noBorder?: boolean;
 }>;

package/dist/components/ModalFooter.js

@@ -10,7 +10,11 @@ const content = {
     fontSize: 13,
     minWidth: 500,
 };
-const ModalFooterContainer = ({ children, style }) => {
-    return (jsx_runtime_1.jsx("div", { style: { ...content, ...style, borderTop: colors_1.BORDER_BLACK }, children: children }));
+const ModalFooterContainer = ({ children, noBorder, style }) => {
+    return (jsx_runtime_1.jsx("div", { style: {
+            ...content,
+            ...style,
+            borderTop: noBorder ? undefined : colors_1.BORDER_BLACK,
+        }, children: children }));
 };
 exports.ModalFooterContainer = ModalFooterContainer;

package/dist/components/ModalHeader.js

@@ -24,7 +24,7 @@ const icon = {
     width: 20,
 };
 const ModalHeader = ({ title, onClose }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const onPress = (0, react_1.useCallback)(() => {
         setSelectedModal(null);
     }, [setSelectedModal]);

package/dist/components/Modals.js

@@ -12,8 +12,6 @@ const studio_runtime_config_1 = require("../helpers/studio-runtime-config");
 const modals_1 = require("../state/modals");
 const z_index_1 = require("../state/z-index");
 const AskAiModal_1 = require("./AskAiModal");
-const ConfigureDefaultEditorModal_1 = require("./ConfigureDefaultEditorModal");
-const ConfigureLicenseModal_1 = require("./ConfigureLicenseModal");
 const ConfirmationDialog_1 = require("./ConfirmationDialog");
 const EffectPickerModal_1 = require("./EffectPickerModal");
 const InstallPackage_1 = require("./InstallPackage");
@@ -31,16 +29,29 @@ const QuickSwitcher_1 = __importDefault(require("./QuickSwitcher/QuickSwitcher")
 const RenderStatusModal_1 = require("./RenderModal/RenderStatusModal");
 const ServerRenderModal_1 = require("./RenderModal/ServerRenderModal");
 const WebRenderModal_1 = require("./RenderModal/WebRenderModal");
+const SettingsModal_1 = require("./SettingsModal");
 const SvgImportDialog_1 = require("./SvgImportDialog");
 const UpdateModal_1 = require("./UpdateModal/UpdateModal");
 const Modals = ({ readOnlyStudio }) => {
     var _a;
-    const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const modalContextType = (0, react_1.useContext)(modals_1.SelectedModalContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { currentZIndex } = (0, z_index_1.useZIndex)();
-    const canRender = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState.type ===
-        'connected';
-    return react_dom_1.default.createPortal(jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'new-folder' && (jsx_runtime_1.jsx(NewFolder_1.NewFolder, { parentName: modalContextType.parentName, stack: modalContextType.stack })), 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 === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'configure-license' && (jsx_runtime_1.jsx(ConfigureLicenseModal_1.ConfigureLicenseModal, { initialPublicLicenseKey: modalContextType.initialPublicLicenseKey })), modalContextType &&
-                modalContextType.type === 'configure-default-editor' && (jsx_runtime_1.jsx(ConfigureDefaultEditorModal_1.ConfigureDefaultEditorModal, {})), modalContextType && modalContextType.type === 'web-render' && (jsx_runtime_1.jsx(WebRenderModal_1.WebRenderModalWithLoader, { ...modalContextType })), modalContextType &&
+    const { previewServerState, subscribeToEvent } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const canRender = previewServerState.type === 'connected';
+    (0, react_1.useEffect)(() => {
+        return subscribeToEvent('license-key-install-request', (event) => {
+            if (event.type !== 'license-key-install-request') {
+                return;
+            }
+            setSelectedModal({
+                type: 'settings',
+                initialTab: 'license',
+                initialPublicLicenseKey: event.licenseKey,
+            });
+        });
+    }, [setSelectedModal, subscribeToEvent]);
+    return react_dom_1.default.createPortal(jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [modalContextType && modalContextType.type === 'new-comp' && (jsx_runtime_1.jsx(NewComposition_1.NewComposition, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'new-folder' && (jsx_runtime_1.jsx(NewFolder_1.NewFolder, { parentName: modalContextType.parentName, stack: modalContextType.stack })), 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 === 'delete-folder' && (jsx_runtime_1.jsx(DeleteFolder_1.DeleteFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-folder' && (jsx_runtime_1.jsx(RenameFolder_1.RenameFolder, { folderName: modalContextType.folderName, parentName: modalContextType.parentName, stack: modalContextType.stack })), modalContextType && modalContextType.type === 'rename-static-file' && (jsx_runtime_1.jsx(RenameStaticFile_1.RenameStaticFileModal, { relativePath: modalContextType.relativePath })), modalContextType && modalContextType.type === 'input-props-override' && (jsx_runtime_1.jsx(OverrideInputProps_1.OverrideInputPropsModal, {})), modalContextType && modalContextType.type === 'settings' && (jsx_runtime_1.jsx(SettingsModal_1.SettingsModal, { initialTab: modalContextType.initialTab, initialPublicLicenseKey: modalContextType.initialPublicLicenseKey }, `${modalContextType.initialTab}-${modalContextType.initialPublicLicenseKey}`)), 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, 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, assetSelection: modalContextType.assetSelection, compositionSelection: modalContextType.compositionSelection })), modalContextType && modalContextType.type === 'add-effect' && (jsx_runtime_1.jsx(EffectPickerModal_1.EffectPickerModal, { state: modalContextType })), modalContextType && modalContextType.type === 'confirmation-dialog' && (jsx_runtime_1.jsx(ConfirmationDialog_1.ConfirmationDialog, { state: modalContextType })), modalContextType && modalContextType.type === 'svg-import-dialog' && (jsx_runtime_1.jsx(SvgImportDialog_1.SvgImportDialog, { state: modalContextType })), (0, studio_runtime_config_1.getStudioAskAIEnabled)() && jsx_runtime_1.jsx(AskAiModal_1.AskAiModal, {})] }), 
     // Modals must be above overlays opened from the editor, such as the

package/dist/components/ModalsProvider.js

@@ -5,13 +5,12 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const modals_1 = require("../state/modals");
 const ModalsProvider = ({ children }) => {
-    const [modalContextType, setModalContextType] = (0, react_1.useState)(null);
-    const modalsContext = (0, react_1.useMemo)(() => {
+    const [selectedModal, setSelectedModal] = (0, react_1.useState)(null);
+    const setSelectedModalContext = (0, react_1.useMemo)(() => {
         return {
-            selectedModal: modalContextType,
-            setSelectedModal: setModalContextType,
+            setSelectedModal,
         };
-    }, [modalContextType]);
-    return (jsx_runtime_1.jsx(modals_1.ModalsContext.Provider, { value: modalsContext, children: children }));
+    }, []);
+    return (jsx_runtime_1.jsx(modals_1.SetSelectedModalContext.Provider, { value: setSelectedModalContext, children: jsx_runtime_1.jsx(modals_1.SelectedModalContext.Provider, { value: selectedModal, children: children }) }));
 };
 exports.ModalsProvider = ModalsProvider;

package/dist/components/NewComposition/CodemodFooter.js

@@ -24,7 +24,7 @@ const CodemodFooterPresentation = ({ codemodStatus, disabled, genericSubmitLabel
 const CodemodFooter = ({ codemod, stack, valid, loadingNotification, successNotification, errorNotification, genericSubmitLabel, submitLabel, onSuccess, fallbackToRootFile = false, applyCodemod, }) => {
     var _a;
     const [submitting, setSubmitting] = (0, react_1.useState)(false);
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const [codemodStatus, setCanApplyCodemod] = (0, react_1.useState)({
         type: 'loading',
     });

package/dist/components/NewComposition/ComboBox.d.ts

@@ -4,6 +4,11 @@ type DividerItem = {
     type: 'divider';
     id: string;
 };
+type SectionHeaderItem = {
+    type: 'section-header';
+    id: string;
+    label: string;
+};
 export type SubMenu = {
     preselectIndex: number | false;
     leaveLeftSpace: boolean;
@@ -21,7 +26,7 @@ export type SelectionItem = {
     quickSwitcherLabel: string | null;
     disabled?: boolean;
 };
-export type ComboboxValue = DividerItem | SelectionItem;
+export type ComboboxValue = DividerItem | SectionHeaderItem | SelectionItem;
 export declare const Combobox: React.FC<{
     readonly values: ComboboxValue[];
     readonly selectedId: string | number;

package/dist/components/NewComposition/DismissableModal.js

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const modals_1 = require("../../state/modals");
 const ModalContainer_1 = require("../ModalContainer");
 const DismissableModal = ({ children, panelStyle }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const onQuit = (0, react_1.useCallback)(() => {
         setSelectedModal(null);
     }, [setSelectedModal]);

package/dist/components/NewComposition/MenuContent.js

@@ -8,7 +8,9 @@ const mobile_layout_1 = require("../../helpers/mobile-layout");
 const studio_runtime_config_1 = require("../../helpers/studio-runtime-config");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
 const is_menu_item_1 = require("../Menu/is-menu-item");
+const menu_tree_context_1 = require("../Menu/menu-tree-context");
 const MenuDivider_1 = require("../Menu/MenuDivider");
+const MenuSectionHeader_1 = require("../Menu/MenuSectionHeader");
 const MenuSubItem_1 = require("../Menu/MenuSubItem");
 const styles_1 = require("../Menu/styles");
 const menu_typeahead_1 = require("./menu-typeahead");
@@ -27,6 +29,9 @@ const container = {
 const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMenu, leaveLeftSpace, topItemCanBeUnselected, fixedHeight, }) => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const containerRef = (0, react_1.useRef)(null);
+    const inheritedMenuTreeId = (0, react_1.useContext)(menu_tree_context_1.MenuTreeContext);
+    const localMenuTreeId = (0, react_1.useRef)((0, menu_tree_context_1.getNextMenuTreeId)());
+    const menuTreeId = inheritedMenuTreeId !== null && inheritedMenuTreeId !== void 0 ? inheritedMenuTreeId : localMenuTreeId.current;
     const isMobileLayout = (0, mobile_layout_1.useMobileLayout)();
     const [subMenuActivated, setSubMenuActivated] = (0, react_1.useState)(false);
     const typeaheadQueryRef = (0, react_1.useRef)('');
@@ -51,7 +56,7 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
         }
     }, []);
     const isItemSelectable = (0, react_1.useCallback)((v) => {
-        return v.type !== 'divider' && !v.disabled;
+        return v.type === 'item' && !v.disabled;
     }, []);
     const onArrowUp = (0, react_1.useCallback)(() => {
         setSelectedItem((prevItem) => {
@@ -98,8 +103,8 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
         if (!item) {
             throw new Error('cannot find item');
         }
-        if (item.type === 'divider') {
-            throw new Error('cannot find divider');
+        if (item.type !== 'item') {
+            throw new Error('cannot select non-interactive menu item');
         }
         if (item.disabled) {
             return;
@@ -118,8 +123,8 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
         if (!item) {
             throw new Error('cannot find item');
         }
-        if (item.type === 'divider') {
-            throw new Error('cannot find divider');
+        if (item.type !== 'item') {
+            throw new Error('cannot select non-interactive menu item');
         }
         if (!item.subMenu) {
             return onNextMenu();
@@ -282,8 +287,8 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
             // Can happen if resizing the window
             return;
         }
-        if (item.type === 'divider') {
-            throw new Error('should not select divider');
+        if (item.type !== 'item') {
+            throw new Error('should not select non-interactive menu item');
         }
         if (!item.subMenu && subMenuActivated) {
             setSubMenuActivated(false);
@@ -303,18 +308,21 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
         current.addEventListener('pointerleave', onPointerLeave);
         return () => current.removeEventListener('pointerleave', onPointerLeave);
     }, [onHide, subMenuActivated]);
-    return (jsx_runtime_1.jsx("div", { ref: containerRef, style: containerWithHeight, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: values.map((item) => {
-            if (item.type === 'divider') {
-                return jsx_runtime_1.jsx(MenuDivider_1.MenuDivider, {}, item.id);
-            }
-            const onClick = (id, e) => {
-                item.onClick(id, e);
-                if (item.subMenu) {
-                    return null;
+    return (jsx_runtime_1.jsx(menu_tree_context_1.MenuTreeContext.Provider, { value: menuTreeId, children: jsx_runtime_1.jsx("div", { ref: containerRef, "data-remotion-menu-tree-id": menuTreeId, style: containerWithHeight, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: values.map((item) => {
+                if (item.type === 'divider') {
+                    return jsx_runtime_1.jsx(MenuDivider_1.MenuDivider, {}, item.id);
+                }
+                if (item.type === 'section-header') {
+                    return (jsx_runtime_1.jsx(MenuSectionHeader_1.MenuSectionHeader, { children: item.label }, item.id));
                 }
-                onHide();
-            };
-            return (jsx_runtime_1.jsx(MenuSubItem_1.MenuSubItem, { selected: item.id === selectedItem, onActionChosen: onClick, onItemSelected: onItemSelected, label: item.label, id: item.id, keyHint: item.keyHint, leaveLeftSpace: leaveLeftSpace, leftItem: item.leftItem, subMenu: item.subMenu, onQuitMenu: onHide, onNextMenu: onNextMenu, subMenuActivated: subMenuActivated, setSubMenuActivated: setSubMenuActivated, disabled: item.disabled }, item.id));
-        }) }));
+                const onClick = (id, e) => {
+                    item.onClick(id, e);
+                    if (item.subMenu) {
+                        return null;
+                    }
+                    onHide();
+                };
+                return (jsx_runtime_1.jsx(MenuSubItem_1.MenuSubItem, { selected: item.id === selectedItem, onActionChosen: onClick, onItemSelected: onItemSelected, label: item.label, id: item.id, keyHint: item.keyHint, leaveLeftSpace: leaveLeftSpace, leftItem: item.leftItem, subMenu: item.subMenu, onQuitMenu: onHide, onNextMenu: onNextMenu, subMenuActivated: subMenuActivated, setSubMenuActivated: setSubMenuActivated, disabled: item.disabled }, item.id));
+            }) }) }));
 };
 exports.MenuContent = MenuContent;

package/dist/components/NewComposition/RenameStaticFile.js

@@ -23,7 +23,7 @@ const content = {
     minWidth: 500,
 };
 const RenameStaticFileModal = ({ relativePath }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const staticFiles = (0, use_static_files_1.useStaticFiles)();
     const [newName, setNewName] = (0, react_1.useState)(() => (0, use_rename_static_file_1.getStaticFileBaseName)(relativePath));
     const [submitting, setSubmitting] = (0, react_1.useState)(false);

package/dist/components/NewComposition/menu-typeahead.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.findTypeaheadMenuItem = void 0;
 const getLabelToMatch = (value) => {
-    if (value.type === 'divider' || value.disabled) {
+    if (value.type !== 'item' || value.disabled) {
         return null;
     }
     if (typeof value.label === 'string') {
@@ -19,7 +19,7 @@ const findTypeaheadMenuItem = ({ query, values, }) => {
         const label = getLabelToMatch(value);
         return label ? label.toLowerCase().startsWith(normalizedQuery) : false;
     });
-    if (!matched || matched.type === 'divider') {
+    if (!matched || matched.type !== 'item') {
         return null;
     }
     return matched.id;

package/dist/components/OverrideInputProps.js

@@ -51,7 +51,7 @@ const Inner = () => {
         }
         return null;
     });
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const valid = (0, react_1.useMemo)(() => {
         if (!value)
             return true;

package/dist/components/PlayPause.js

@@ -30,7 +30,8 @@ const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted,
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
     const [showBufferIndicator, setShowBufferState] = (0, react_1.useState)(false);
-    const { playing, play, pause, pauseAndReturnToPlayStart, frameBack, seek, frameForward, emitter, getCurrentFrame, } = player_1.PlayerInternals.usePlayer();
+    const { play, pause, pauseAndReturnToPlayStart, frameBack, seek, frameForward, emitter, getCurrentFrame, } = player_1.PlayerInternals.usePlayerMethods();
+    const [playing] = remotion_1.Internals.Timeline.usePlayingState();
     player_1.PlayerInternals.usePlayback({
         loop,
         playbackRate,

package/dist/components/PlaybackKeyboardShortcutsManager.js

@@ -6,10 +6,11 @@ const react_1 = require("react");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
-    const { play, pause, playing } = player_1.PlayerInternals.usePlayer();
+    const { play, pause, isPlaying } = player_1.PlayerInternals.usePlayerMethods();
     const onJKey = (0, react_1.useCallback)(() => {
+        const wasPlaying = isPlaying();
         setPlaybackRate((prevPlaybackRate) => {
-            if (!playing) {
+            if (!wasPlaying) {
                 return -1;
             }
             if (prevPlaybackRate > -1) {
@@ -21,14 +22,15 @@ const PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
             return -4;
         });
         play();
-    }, [play, playing, setPlaybackRate]);
+    }, [isPlaying, play, setPlaybackRate]);
     const onKKey = (0, react_1.useCallback)(() => {
         setPlaybackRate(1);
         pause();
     }, [pause, setPlaybackRate]);
     const onLKey = (0, react_1.useCallback)(() => {
+        const wasPlaying = isPlaying();
         setPlaybackRate((prevPlaybackRate) => {
-            if (!playing) {
+            if (!wasPlaying) {
                 return 1;
             }
             if (prevPlaybackRate < 1) {
@@ -40,7 +42,7 @@ const PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
             return 4;
         });
         play();
-    }, [play, playing, setPlaybackRate]);
+    }, [isPlaying, play, setPlaybackRate]);
     (0, react_1.useEffect)(() => {
         const jKey = keybindings.registerKeybinding({
             event: 'keydown',

package/dist/components/Preview.js

@@ -69,6 +69,24 @@ const VideoPreview = ({ canvasSize, contentDimensions, canvasContent, assetMetad
 exports.VideoPreview = VideoPreview;
 const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent, assetMetadata }) => {
     const { size: previewSize } = (0, react_1.useContext)(remotion_1.Internals.PreviewSizeContext);
+    const [canvasHovered, setCanvasHovered] = (0, react_1.useState)(false);
+    const compositionContainerRef = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const compositionContainer = compositionContainerRef.current;
+        if (compositionContainer === null) {
+            setCanvasHovered(false);
+            return;
+        }
+        const onPointerEnter = () => setCanvasHovered(true);
+        const onPointerLeave = () => setCanvasHovered(false);
+        setCanvasHovered(compositionContainer.matches(':hover'));
+        compositionContainer.addEventListener('pointerenter', onPointerEnter);
+        compositionContainer.addEventListener('pointerleave', onPointerLeave);
+        return () => {
+            compositionContainer.removeEventListener('pointerenter', onPointerEnter);
+            compositionContainer.removeEventListener('pointerleave', onPointerLeave);
+        };
+    }, [canvasContent.type]);
     const { centerX, centerY, yCorrection, xCorrection, scale } = (0, react_1.useMemo)(() => {
         if (contentDimensions === 'none') {
             return {
@@ -129,8 +147,8 @@ const CompWhenItHasDimensions = ({ contentDimensions, canvasSize, canvasContent,
     if (canvasContent.type === 'output-blob') {
         return (jsx_runtime_1.jsx("div", { style: outer, children: jsx_runtime_1.jsx(RenderPreview_1.RenderPreview, { path: canvasContent.displayName, assetMetadata: assetMetadata, getBlob: canvasContent.getBlob }) }));
     }
-    return (jsx_runtime_1.jsxs("div", { className: "remotion-studio-composition-container", style: outer, children: [
-            jsx_runtime_1.jsx(PortalContainer, { contentDimensions: contentDimensions, scale: scale, xCorrection: xCorrection, yCorrection: yCorrection }), jsx_runtime_1.jsx(SelectedOutlineOverlay_1.SelectedOutlineOverlay, { compositionHeight: contentDimensions.height, compositionWidth: contentDimensions.width, scale: scale, translationX: previewSize.translation.x, translationY: previewSize.translation.y })
+    return (jsx_runtime_1.jsxs("div", { ref: compositionContainerRef, className: "remotion-studio-composition-container", style: outer, children: [
+            jsx_runtime_1.jsx(PortalContainer, { contentDimensions: contentDimensions, scale: scale, xCorrection: xCorrection, yCorrection: yCorrection }), jsx_runtime_1.jsx(SelectedOutlineOverlay_1.SelectedOutlineOverlay, { canvasHovered: canvasHovered, compositionHeight: contentDimensions.height, compositionWidth: contentDimensions.width, scale: scale, translationX: previewSize.translation.x, translationY: previewSize.translation.y })
         ] }));
 };
 const PortalContainer = ({ scale, xCorrection, yCorrection, contentDimensions }) => {
@@ -154,13 +172,20 @@ const PortalContainer = ({ scale, xCorrection, yCorrection, contentDimensions })
         xCorrection,
         yCorrection,
     ]);
-    (0, react_1.useEffect)(() => {
+    (0, react_1.useLayoutEffect)(() => {
         const { current } = portalContainer;
         current === null || current === void 0 ? void 0 : current.appendChild(remotion_1.Internals.portalNode());
         return () => {
-            current === null || current === void 0 ? void 0 : current.removeChild(remotion_1.Internals.portalNode());
+            const portalNode = remotion_1.Internals.portalNode();
+            if (current && portalNode.parentNode === current) {
+                current.removeChild(portalNode);
+                remotion_1.Internals.setPortalNodeCurrentScale(1);
+            }
         };
     }, []);
+    (0, react_1.useLayoutEffect)(() => {
+        remotion_1.Internals.setPortalNodeCurrentScale(scale);
+    }, [scale]);
     const onPointerDown = (0, react_1.useCallback)((event) => {
         if (!(0, should_clear_selection_on_pointer_down_1.shouldClearSelectionOnPointerDown)(event)) {
             return;

package/dist/components/PreviewToolbarOverflowButton.js

@@ -18,6 +18,7 @@ const clickButton = (id) => {
     (_a = document.getElementById(id)) === null || _a === void 0 ? void 0 : _a.click();
 };
 const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLoop, showCompositionControls, playbackRate, setPlaybackRate, loop, setLoop, }) => {
+    const keyboardShortcutsDisabled = (0, use_keybinding_1.areKeyboardShortcutsDisabled)();
     const { checkerboard, setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
     const { editorShowOutlines, setEditorShowOutlines } = (0, react_1.useContext)(editor_outlines_1.EditorShowOutlinesContext);
     const { items: previewSizeItems, selectedId: selectedPreviewSize, zoomable, } = (0, SizeSelector_1.usePreviewSizeMenuItems)();
@@ -88,7 +89,7 @@ const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLo
                 label: 'Transparency as checkerboard',
                 value: 'checkerboard',
                 onClick: () => setCheckerboard((current) => !current),
-                keyHint: (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : 'T',
+                keyHint: keyboardShortcutsDisabled ? null : 'T',
                 leftItem: checkerboard ? jsx_runtime_1.jsx(Checkmark_1.Checkmark, {}) : null,
                 subMenu: null,
                 quickSwitcherLabel: null,
@@ -112,7 +113,7 @@ const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLo
                 label: 'Fullscreen',
                 value: 'fullscreen',
                 onClick: () => clickButton('fullscreen-toggle'),
-                keyHint: (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : 'F',
+                keyHint: keyboardShortcutsDisabled ? null : 'F',
                 leftItem: null,
                 subMenu: null,
                 quickSwitcherLabel: null,
@@ -135,6 +136,7 @@ const PreviewToolbarOverflowButton = ({ showFullscreen, showPlaybackRate, showLo
         setEditorShowOutlines,
         setLoop,
         zoomable,
+        keyboardShortcutsDisabled,
     ]);
     if (values.length === 0) {
         return null;

package/dist/components/QuickSwitcher/ExplorerQuickSwitcherTrigger.js

@@ -30,7 +30,7 @@ const shortcutLabel = {
     opacity: 0.6,
 };
 const ExplorerQuickSwitcherTrigger = ({ mode, showShortcut, tabIndex }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const openQuickSwitcher = (0, react_1.useCallback)(() => {
         setSelectedModal({
             type: 'quick-switcher',

package/dist/components/QuickSwitcher/QuickSwitcherContent.js

@@ -125,7 +125,7 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp, readOnlyStudio
     const closeMenu = (0, react_1.useCallback)(() => undefined, []);
     const actions = (0, use_menu_structure_1.useMenuStructure)(closeMenu, readOnlyStudio);
     const [docResults, setDocResults] = (0, react_1.useState)({ type: 'initial' });
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const mode = assetSelection !== null
         ? 'assets'

package/dist/components/RenderButton.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 export type RenderType = 'server-render' | 'client-render' | 'render-command';
-export declare const RenderButton: React.FC<{
+export declare const RenderButton: React.NamedExoticComponent<{
     readonly readOnlyStudio: boolean;
-    readonly size?: 'default' | 'compact';
-    readonly narrow?: boolean;
+    readonly size?: "compact" | "default" | undefined;
+    readonly narrow?: boolean | undefined;
 }>;

package/dist/components/RenderButton.js

@@ -1,4 +1,37 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -6,7 +39,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const react_dom_1 = __importDefault(require("react-dom"));
 const remotion_1 = require("remotion");
 const client_id_1 = require("../helpers/client-id");
@@ -117,9 +150,9 @@ const getInitialRenderType = (readOnlyStudio) => {
     }
     return 'server-render';
 };
-const RenderButton = ({ readOnlyStudio, size: controlSize = 'default', narrow = false }) => {
+const RenderButtonInner = ({ readOnlyStudio, size: controlSize = 'default', narrow = false }) => {
     const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const [preferredRenderType, setPreferredRenderType] = (0, react_1.useState)(() => getInitialRenderType(readOnlyStudio));
     const [dropdownOpened, setDropdownOpened] = (0, react_1.useState)(false);
     const [hovered, setHovered] = (0, react_1.useState)(false);
@@ -193,8 +226,10 @@ const RenderButton = ({ readOnlyStudio, size: controlSize = 'default', narrow =
         };
     }, [controlSize]);
     const video = remotion_1.Internals.useVideo();
-    const { getCurrentFrame } = player_1.PlayerInternals.usePlayer();
+    const { getCurrentFrame } = player_1.PlayerInternals.usePlayerMethods();
     const { props } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
+    // Read the frame when the modal opens instead of subscribing this button to
+    // every timeline position update.
     const openServerRenderModal = (0, react_1.useCallback)((copyCommandOnly) => {
         var _a;
         var _b, _c;
@@ -258,7 +293,7 @@ const RenderButton = ({ readOnlyStudio, size: controlSize = 'default', narrow =
             initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes,
             renderDefaults: defaults,
         });
-    }, [video, setSelectedModal, getCurrentFrame, props, inFrame, outFrame]);
+    }, [video, setSelectedModal, props, inFrame, outFrame, getCurrentFrame]);
     const openClientRenderModal = (0, react_1.useCallback)(() => {
         var _a;
         if (!video) {
@@ -292,7 +327,7 @@ const RenderButton = ({ readOnlyStudio, size: controlSize = 'default', narrow =
             initialMediaCacheSizeInBytes: defaults.mediaCacheSizeInBytes,
             initialPageResponsiveness: 'medium',
         });
-    }, [video, setSelectedModal, getCurrentFrame, props, inFrame, outFrame]);
+    }, [video, setSelectedModal, props, inFrame, outFrame, getCurrentFrame]);
     const onClick = (0, react_1.useCallback)(() => {
         if (renderType === 'render-command') {
             openServerRenderModal(true);
@@ -469,4 +504,4 @@ const RenderButton = ({ readOnlyStudio, size: controlSize = 'default', narrow =
                 ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHideDropdown, onEscape: onHideDropdown, children: jsx_runtime_1.jsx("div", { style: portalStyle, onPointerDown: onMenuPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: () => { }, onPreviousMenu: () => { }, values: dropdownValues, onHide: onHideDropdown, leaveLeftSpace: false, preselectIndex: dropdownValues.findIndex((v) => v.id === renderType), topItemCanBeUnselected: false, fixedHeight: derivedMaxHeight }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };
-exports.RenderButton = RenderButton;
+exports.RenderButton = react_1.default.memo(RenderButtonInner);

package/dist/components/RenderModal/RenderStatusModal.js

@@ -41,7 +41,7 @@ const buttonRow = {
     justifyContent: 'flex-end',
 };
 const RenderStatusModal = ({ jobId, }) => {
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { jobs, removeClientJob, cancelClientJob } = (0, react_1.useContext)(context_1.RenderQueueContext);
     const job = jobs.find((j) => j.id === jobId);
     if (!job) {

package/dist/components/RenderModal/SchemaEditor/ZodEnumEditor.d.ts

@@ -8,4 +8,5 @@ export declare const ZodEnumEditor: React.FC<{
     readonly value: string;
     readonly setValue: UpdaterFunction<string>;
     readonly onRemove: null | (() => void);
+    readonly mayPad: boolean;
 }>;

package/dist/components/RenderModal/SchemaEditor/ZodEnumEditor.js

@@ -14,7 +14,7 @@ const ZodFieldValidation_1 = require("./ZodFieldValidation");
 const container = {
     width: '100%',
 };
-const ZodEnumEditor = ({ schema, jsonPath, setValue, value, onRemove }) => {
+const ZodEnumEditor = ({ schema, jsonPath, setValue, value, onRemove, mayPad }) => {
     const onChange = (0, react_2.useCallback)((updater, { shouldSave }) => {
         setValue(updater, { shouldSave });
     }, [setValue]);
@@ -38,7 +38,7 @@ const ZodEnumEditor = ({ schema, jsonPath, setValue, value, onRemove }) => {
         });
     }, [enumValues, onChange, value]);
     const zodValidation = (0, react_1.useMemo)(() => (0, zod_schema_type_1.zodSafeParse)(schema, value), [schema, value]);
-    return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: true, children: [
+    return (jsx_runtime_1.jsxs(Fieldset_1.Fieldset, { shouldPad: mayPad, children: [
             jsx_runtime_1.jsx(SchemaLabel_1.SchemaLabel, { handleClick: null, jsonPath: jsonPath, onRemove: onRemove, valid: zodValidation.success, suffix: null }), jsx_runtime_1.jsx("div", { style: isRoot ? undefined : container, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: comboBoxValues, selectedId: value, title: value, size: "small" }) }), jsx_runtime_1.jsx(ZodFieldValidation_1.ZodFieldValidation, { path: jsonPath, zodValidation: zodValidation })
         ] }));
 };