@remotion/studio 4.0.503 → 4.0.505

package/dist/components/Menu/MenuItem.js

@@ -9,6 +9,7 @@ const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const react_dom_1 = __importDefault(require("react-dom"));
 const colors_1 = require("../../helpers/colors");
+const hoverable_1 = require("../../helpers/hoverable");
 const pointer_session_1 = require("../../helpers/pointer-session");
 const z_index_1 = require("../../state/z-index");
 const MenuContent_1 = require("../NewComposition/MenuContent");
@@ -17,7 +18,6 @@ const portals_1 = require("./portals");
 const styles_1 = require("./styles");
 const container = {
     fontSize: 13,
-    color: colors_1.WHITE_ALPHA_80,
     paddingLeft: 10,
     paddingRight: 10,
     cursor: 'default',
@@ -28,7 +28,6 @@ const container = {
     border: 'none',
 };
 const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered, onItemQuit, onPreviousMenu, onNextMenu, menu, }) => {
-    const [hovered, setHovered] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
     const size = player_1.PlayerInternals.useElementSize(ref, {
         triggerOnWindowResize: true,
@@ -38,13 +37,20 @@ const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered
     const containerStyle = (0, react_1.useMemo)(() => {
         return {
             ...container,
-            color: hovered || selected ? colors_1.WHITE : colors_1.WHITE_ALPHA_80,
-            backgroundColor: (0, colors_1.getBackgroundFromHoverState)({
-                hovered,
-                selected,
+            ...(0, hoverable_1.hoverableStyle)({
+                idleBackground: (0, colors_1.getBackgroundFromHoverState)({
+                    hovered: false,
+                    selected,
+                }),
+                hoverBackground: (0, colors_1.getBackgroundFromHoverState)({
+                    hovered: true,
+                    selected,
+                }),
+                idleColor: selected ? colors_1.WHITE : colors_1.WHITE_ALPHA_80,
+                hoverColor: colors_1.WHITE,
             }),
         };
-    }, [hovered, selected]);
+    }, [selected]);
     const portalStyle = (0, react_1.useMemo)(() => {
         if (!selected || !size) {
             return null;
@@ -55,13 +61,11 @@ const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered
             top: size.top + size.height,
         };
     }, [selected, size]);
+    // Not for styling (which is done via CSS :hover), but for switching
+    // between menus when a menu is already open.
     const onPointerEnter = (0, react_1.useCallback)(() => {
         onItemHovered(id);
-        setHovered(true);
     }, [id, onItemHovered]);
-    const onPointerLeave = (0, react_1.useCallback)(() => {
-        setHovered(false);
-    }, []);
     const onPointerDown = (0, react_1.useCallback)((e) => {
         // Prevent deselection of currently selected items
         e.stopPropagation();
@@ -105,7 +109,7 @@ const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered
         };
     }, [size]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("button", { ref: ref, role: "button", tabIndex: tabIndex, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onPointerDown: onPointerDown, onClick: onClick, style: containerStyle, type: "button", className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, children: itemName }), portalStyle
+            jsx_runtime_1.jsx("button", { ref: ref, role: "button", tabIndex: tabIndex, onPointerEnter: onPointerEnter, onPointerDown: onPointerDown, onClick: onClick, style: containerStyle, type: "button", className: `${is_menu_item_1.MENU_INITIATOR_CLASSNAME} ${hoverable_1.HOVERABLE_CLASS_NAME}`, children: itemName }), portalStyle
                 ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { className: "css-reset", style: outerStyle, children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onItemQuit, onOutsideClick: onItemQuit, children: jsx_runtime_1.jsx("div", { style: portalStyle, onPointerDown: onMenuPointerDown, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: onPreviousMenu, onPreviousMenu: onNextMenu, values: menu.items, onHide: onItemQuit, leaveLeftSpace: menu.leaveLeftPadding, preselectIndex: false, topItemCanBeUnselected: true, fixedHeight: null }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));
 };

package/dist/components/MenuBuildIndicator.d.ts

@@ -1,2 +1,4 @@
 import React from 'react';
-export declare const MenuBuildIndicator: React.FC;
+export declare const MenuBuildIndicator: React.FC<{
+    readonly mobileLayout: boolean;
+}>;

package/dist/components/MenuBuildIndicator.js

@@ -3,12 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuBuildIndicator = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const client_id_1 = require("../helpers/client-id");
-const get_git_menu_item_1 = require("../helpers/get-git-menu-item");
-const open_in_editor_1 = require("../helpers/open-in-editor");
+const colors_1 = require("../helpers/colors");
+const InspectorOpenInEditor_1 = require("./InspectorOpenInEditor");
 const layout_1 = require("./layout");
 const MenuCompositionName_1 = require("./MenuCompositionName");
-const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const Spinner_1 = require("./Spinner");
 const cwd = {
     fontSize: 13,
@@ -27,60 +25,15 @@ const noSpinner = {
     position: 'relative',
     width: spinnerSize,
 };
-const projectNameLinkBase = {
-    color: 'inherit',
-    textDecoration: 'none',
-    cursor: 'pointer',
-    fontSize: 'inherit',
-    textUnderlineOffset: 2,
-};
-const projectNameLink = {
-    ...projectNameLinkBase,
-};
-const projectNameLinkHovered = {
-    ...projectNameLinkBase,
-    textDecoration: 'underline',
-};
-const MenuBuildIndicator = () => {
+const MenuBuildIndicator = ({ mobileLayout }) => {
     const [isBuilding, setIsBuilding] = (0, react_1.useState)(false);
-    const [projectNameHovered, setProjectNameHovered] = (0, react_1.useState)(false);
-    const ctx = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).previewServerState;
-    const showEditorLink = window.remotion_editorName && ctx.type === 'connected';
-    const showGitLink = !showEditorLink && Boolean(window.remotion_gitSource);
-    const handleProjectNameClick = (0, react_1.useCallback)(async () => {
-        if (showEditorLink) {
-            await (0, open_in_editor_1.openInEditor)({
-                originalFileName: `${window.remotion_cwd}`,
-                originalLineNumber: 1,
-                originalColumnNumber: 1,
-                originalFunctionName: null,
-                originalScriptCode: null,
-            }, null)
-                .then(({ success }) => {
-                if (!success) {
-                    (0, NotificationCenter_1.showNotification)(`Could not open ${window.remotion_editorName}`, 2000);
-                }
-            })
-                .catch((err) => {
-                // eslint-disable-next-line no-console
-                console.error(err);
-                (0, NotificationCenter_1.showNotification)(`Could not open ${window.remotion_editorName}`, 2000);
-            });
-        }
-        else if (showGitLink) {
-            window.open((0, get_git_menu_item_1.getGitSourceBranchUrl)(window.remotion_gitSource), '_blank');
-        }
-    }, [showEditorLink, showGitLink]);
-    const projectNameTitle = (0, react_1.useMemo)(() => {
-        if (showEditorLink) {
-            return `Open in ${window.remotion_editorName}`;
-        }
-        if (showGitLink) {
-            return `Open ${(0, get_git_menu_item_1.getGitSourceName)(window.remotion_gitSource)} Repo`;
-        }
-        return undefined;
-    }, [showEditorLink, showGitLink]);
-    const isClickable = showEditorLink || showGitLink;
+    const folderLocation = (0, react_1.useMemo)(() => {
+        return {
+            source: window.remotion_cwd,
+            line: 1,
+            column: 1,
+        };
+    }, []);
     (0, react_1.useEffect)(() => {
         window.remotion_isBuilding = () => {
             setIsBuilding(true);
@@ -93,7 +46,9 @@ const MenuBuildIndicator = () => {
             window.remotion_finishedBuilding = undefined;
         };
     }, []);
-    return (jsx_runtime_1.jsxs("div", { style: cwd, title: window.remotion_cwd, children: [isClickable ? jsx_runtime_1.jsx(layout_1.Spacing, { x: 2 }) : null, isBuilding ? (jsx_runtime_1.jsx("div", { style: spinner, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize }) })) : (jsx_runtime_1.jsx("div", { style: noSpinner })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), isClickable ? (jsx_runtime_1.jsx("a", { style: projectNameHovered ? projectNameLinkHovered : projectNameLink, title: projectNameTitle, onClick: handleProjectNameClick, onPointerEnter: () => setProjectNameHovered(true), onPointerLeave: () => setProjectNameHovered(false), children: window.remotion_projectName })) : (window.remotion_projectName), jsx_runtime_1.jsx(MenuCompositionName_1.MenuCompositionName, {})
-        ] }));
+    return (jsx_runtime_1.jsxs("div", { style: cwd, title: window.remotion_cwd, children: [
+            jsx_runtime_1.jsx(layout_1.Spacing, { x: mobileLayout ? 0.5 : 2 }), window.remotion_projectName, jsx_runtime_1.jsx(MenuCompositionName_1.MenuCompositionName, {}), jsx_runtime_1.jsx(InspectorOpenInEditor_1.InspectorOpenInEditor, { location: folderLocation }), mobileLayout ? null : jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), mobileLayout ? (isBuilding ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx("div", { style: spinner, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize, color: colors_1.WHITE_ALPHA_80 }) })
+                ] })) : null) : isBuilding ? (jsx_runtime_1.jsx("div", { style: spinner, children: jsx_runtime_1.jsx(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize, color: colors_1.WHITE_ALPHA_80 }) })) : (jsx_runtime_1.jsx("div", { style: noSpinner }))] }));
 };
 exports.MenuBuildIndicator = MenuBuildIndicator;

package/dist/components/MenuCompositionName.js

@@ -4,13 +4,7 @@ exports.MenuCompositionName = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
-const get_file_manager_name_1 = require("../helpers/get-file-manager-name");
-const open_in_editor_1 = require("../helpers/open-in-editor");
-const NotificationCenter_1 = require("./Notifications/NotificationCenter");
-const actions_1 = require("./RenderQueue/actions");
-const use_resolved_stack_1 = require("./Timeline/use-resolved-stack");
 const baseStyle = {
     color: 'inherit',
     textDecoration: 'none',
@@ -22,14 +16,6 @@ const compositionNameStyle = {
     ...baseStyle,
     cursor: 'default',
 };
-const clickableStyle = {
-    ...baseStyle,
-    cursor: 'pointer',
-};
-const clickableHoveredStyle = {
-    ...clickableStyle,
-    textDecoration: 'underline',
-};
 const slashStyle = {
     color: colors_1.LIGHT_TEXT,
     marginInline: 4,
@@ -37,12 +23,8 @@ const slashStyle = {
     top: 1,
 };
 const MenuCompositionName = () => {
-    var _a, _b;
+    var _a;
     const { canvasContent, compositions } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx)
-        .previewServerState.type;
-    const [opening, setOpening] = (0, react_1.useState)(false);
-    const [hovered, setHovered] = (0, react_1.useState)(false);
     const composition = (0, react_1.useMemo)(() => {
         var _a;
         if (canvasContent === null || canvasContent.type !== 'composition') {
@@ -51,54 +33,12 @@ const MenuCompositionName = () => {
         return ((_a = compositions.find((c) => c.id === canvasContent.compositionId)) !== null && _a !== void 0 ? _a : null);
     }, [canvasContent, compositions]);
     const asset = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'asset' ? canvasContent.asset : null;
-    const resolvedLocation = (0, use_resolved_stack_1.useResolvedStack)((_a = composition === null || composition === void 0 ? void 0 : composition.stack) !== null && _a !== void 0 ? _a : null);
-    const fileManagerName = (0, get_file_manager_name_1.getFileManagerName)(window.remotion_fileSystemPlatform);
-    const canOpenComposition = resolvedLocation &&
-        window.remotion_editorName &&
-        connectionStatus === 'connected';
-    const canOpenAsset = asset !== null &&
-        window.remotion_publicFolderExists !== null &&
-        connectionStatus === 'connected';
-    const canOpen = canOpenComposition || canOpenAsset;
-    const handleClick = (0, react_1.useCallback)(async () => {
-        if (!canOpen || opening) {
-            return;
-        }
-        setOpening(true);
-        try {
-            if (asset !== null && window.remotion_publicFolderExists !== null) {
-                await (0, actions_1.openInFileExplorer)({
-                    directory: `${window.remotion_publicFolderExists}/${asset}`,
-                });
-            }
-            else if (resolvedLocation) {
-                await (0, open_in_editor_1.openOriginalPositionInEditor)(resolvedLocation, null);
-            }
-        }
-        catch (err) {
-            (0, NotificationCenter_1.showNotification)(err.message, 2000);
-        }
-        finally {
-            setOpening(false);
-        }
-    }, [asset, canOpen, opening, resolvedLocation]);
     if (!composition && asset === null) {
         return null;
     }
-    const name = (_b = composition === null || composition === void 0 ? void 0 : composition.id) !== null && _b !== void 0 ? _b : asset;
-    const title = composition
-        ? canOpenComposition
-            ? `Open in ${window.remotion_editorName}`
-            : composition.id
-        : canOpenAsset
-            ? `Show in ${fileManagerName}`
-            : (asset !== null && asset !== void 0 ? asset : undefined);
+    const name = (_a = composition === null || composition === void 0 ? void 0 : composition.id) !== null && _a !== void 0 ? _a : asset;
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx("span", { style: slashStyle, children: "/" }), jsx_runtime_1.jsx("a", { style: canOpen && !opening
-                    ? hovered
-                        ? clickableHoveredStyle
-                        : clickableStyle
-                    : compositionNameStyle, title: title, onClick: handleClick, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: name })
+            jsx_runtime_1.jsx("span", { style: slashStyle, children: "/" }), jsx_runtime_1.jsx("span", { style: compositionNameStyle, children: name })
         ] }));
 };
 exports.MenuCompositionName = MenuCompositionName;

package/dist/components/MenuToolbar.js

@@ -3,11 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuToolbar = 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 browser_studio_operations_1 = require("../helpers/browser-studio-operations");
 const client_id_1 = require("../helpers/client-id");
 const colors_1 = require("../helpers/colors");
 const mobile_layout_1 = require("../helpers/mobile-layout");
+const use_keybinding_1 = require("../helpers/use-keybinding");
 const use_menu_structure_1 = require("../helpers/use-menu-structure");
+const search_1 = require("../icons/search");
+const modals_1 = require("../state/modals");
+const InlineAction_1 = require("./InlineAction");
 const layout_1 = require("./layout");
 const menu_toolbar_height_1 = require("./menu-toolbar-height");
 const MenuItem_1 = require("./Menu/MenuItem");
@@ -34,6 +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 browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
     const canUndoAndRedo = !readOnlyStudio ||
         (previewServerState.type === 'connected' &&
@@ -104,11 +110,25 @@ const MenuToolbar = ({ readOnlyStudio }) => {
         // Prevent deselection of currently selected items
         e.stopPropagation();
     }, []);
+    const openQuickSwitcher = (0, react_1.useCallback)(() => {
+        setSelectedModal({
+            type: 'quick-switcher',
+            mode: 'compositions',
+            invocationTimestamp: Date.now(),
+            assetSelection: null,
+            compositionSelection: null,
+        });
+    }, [setSelectedModal]);
+    const renderSearchIcon = (0, react_1.useCallback)((color) => {
+        return jsx_runtime_1.jsx(search_1.SearchIcon, { color: color, width: 18, height: 18 });
+    }, []);
+    const searchTooltip = (0, use_keybinding_1.areKeyboardShortcutsDisabled)()
+        ? 'Quick Switcher'
+        : `Quick Switcher (${ShortcutHint_1.cmdOrCtrlCharacter}+K)`;
     return (jsx_runtime_1.jsxs(layout_1.Row, { align: "center", className: "css-reset", style: row, onPointerDown: onPointerDown, children: [
-            jsx_runtime_1.jsxs("div", { style: fixedWidthLeft, children: [
-                    jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControl, { side: "left" }), structure.map((s) => {
+            jsx_runtime_1.jsxs("div", { style: fixedWidthLeft, children: [mobileLayout ? (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: openQuickSwitcher, renderAction: renderSearchIcon, title: searchTooltip })) : (jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControl, { side: "left" })), structure.map((s) => {
                         return (jsx_runtime_1.jsx(MenuItem_1.MenuItem, { selected: selected === s.id, onItemSelected: itemClicked, onItemHovered: itemHovered, id: s.id, label: s.label, onItemQuit: onItemQuit, menu: s, onPreviousMenu: onPreviousMenu, onNextMenu: onNextMenu, leaveLeftPadding: s.leaveLeftPadding }, s.id));
-                    }), readOnlyStudio ? null : jsx_runtime_1.jsx(UpdateCheck_1.UpdateCheck, {})] }), jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsx(MenuBuildIndicator_1.MenuBuildIndicator, {}), jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsxs("div", { style: fixedWidthRight, children: [canUndoAndRedo ? jsx_runtime_1.jsx(UndoRedoButtons_1.UndoRedoButtons, {}) : null, jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControl, { side: "right" })
+                    }), readOnlyStudio || browserStudioOperations ? null : jsx_runtime_1.jsx(UpdateCheck_1.UpdateCheck, {})] }), mobileLayout ? null : jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsx(MenuBuildIndicator_1.MenuBuildIndicator, { mobileLayout: mobileLayout }), jsx_runtime_1.jsx("div", { style: flex }), jsx_runtime_1.jsxs("div", { style: fixedWidthRight, children: [canUndoAndRedo ? jsx_runtime_1.jsx(UndoRedoButtons_1.UndoRedoButtons, {}) : null, jsx_runtime_1.jsx(SidebarCollapserControls_1.SidebarCollapserControl, { side: "right" })
                 ] })
         ] }));
 };

package/dist/components/MobilePanel.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-export default function MobilePanel({ children, onClose, side }: {
+export default function MobilePanel({ children, onClose }: {
     children: React.ReactNode;
     onClose: () => void;
-    side: 'left' | 'right';
 }): React.ReactPortal;

package/dist/components/MobilePanel.js

@@ -26,26 +26,22 @@ const panel = {
     background: colors_1.BACKGROUND,
     boxShadow: colors_1.SHADOW_BLACK,
 };
-const sidebarWidth = {
-    left: 'min(210px, calc(100% - 50px))',
-    right: 'min(245px, calc(100% - 50px))',
-};
-function MobilePanel({ children, onClose, side, }) {
+const sidebarWidth = 'min(290px, calc(100% - 50px))';
+function MobilePanel({ children, onClose, }) {
     const { currentZIndex } = (0, z_index_1.useZIndex)();
     const onOutsideClick = react_1.default.useCallback((target) => {
         var _a;
         const element = target instanceof Element ? target : null;
-        const toggleSelector = `[data-sidebar-toggle="${side}"]`;
+        const toggleSelector = '[data-sidebar-toggle="left"]';
         if ((element === null || element === void 0 ? void 0 : element.closest(toggleSelector)) ||
             ((_a = element === null || element === void 0 ? void 0 : element.closest('button')) === null || _a === void 0 ? void 0 : _a.querySelector(toggleSelector))) {
             return;
         }
         onClose();
-    }, [onClose, side]);
+    }, [onClose]);
     return react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: overlay, children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onClose, onOutsideClick: onOutsideClick, children: jsx_runtime_1.jsx("div", { style: {
                     ...panel,
-                    width: sidebarWidth[side],
-                    left: side === 'left' ? 0 : undefined,
-                    right: side === 'right' ? 0 : undefined,
+                    width: sidebarWidth,
+                    left: 0,
                 }, children: children }) }) }), (0, portals_1.getPortal)(currentZIndex));
 }

package/dist/components/MuteToggle.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MuteToggle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
 const media_volume_1 = require("../icons/media-volume");
 const mute_1 = require("../state/mute");
 const ControlButton_1 = require("./ControlButton");
@@ -14,6 +15,6 @@ const MuteToggle = ({ muted, setMuted }) => {
         });
     }, [setMuted]);
     const accessibilityLabel = muted ? 'Unmute video' : 'Mute video';
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: muted ? jsx_runtime_1.jsx(media_volume_1.VolumeOffIcon, {}) : jsx_runtime_1.jsx(media_volume_1.VolumeOnIcon, {}) }));
+    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (color) => muted ? jsx_runtime_1.jsx(media_volume_1.VolumeOffIcon, { color: colors_1.BLUE }) : jsx_runtime_1.jsx(media_volume_1.VolumeOnIcon, { color: color }) }));
 };
 exports.MuteToggle = MuteToggle;

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

@@ -28,5 +28,6 @@ export declare const Combobox: React.FC<{
     readonly style?: React.CSSProperties;
     readonly title: string;
     readonly size?: ComboboxSize;
+    readonly unhoveredIconColor?: string;
 }>;
 export {};

package/dist/components/NewComposition/ComboBox.js

@@ -61,7 +61,7 @@ const smallLabel = {
     fontSize: 11,
     lineHeight: '12px',
 };
-const Combobox = ({ values, selectedId, style: customStyle, title, size: controlSize = 'default', }) => {
+const Combobox = ({ values, selectedId, style: customStyle, title, size: controlSize = 'default', unhoveredIconColor = colors_1.LIGHT_TEXT, }) => {
     const [hovered, setIsHovered] = (0, react_1.useState)(false);
     const [opened, setOpened] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
@@ -206,7 +206,7 @@ const Combobox = ({ values, selectedId, style: customStyle, title, size: control
             ? compactLabel
             : label;
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsxs("button", { ref: ref, title: title, tabIndex: tabIndex, type: "button", style: style, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, children: [selected ? (jsx_runtime_1.jsx("div", { title: typeof selected.label === 'string' ? selected.label : undefined, style: selectedLabelStyle, children: selected === null || selected === void 0 ? void 0 : selected.label })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: controlSize === 'default' ? 1 : 0.5 }), ' ', jsx_runtime_1.jsx(caret_1.CaretDown, { small: controlSize === 'small' })
+            jsx_runtime_1.jsxs("button", { ref: ref, title: title, tabIndex: tabIndex, type: "button", style: style, className: is_menu_item_1.MENU_INITIATOR_CLASSNAME, children: [selected ? (jsx_runtime_1.jsx("div", { title: typeof selected.label === 'string' ? selected.label : undefined, style: selectedLabelStyle, children: selected === null || selected === void 0 ? void 0 : selected.label })) : null, jsx_runtime_1.jsx(layout_1.Spacing, { x: controlSize === 'default' ? 1 : 0.5 }), ' ', jsx_runtime_1.jsx(caret_1.CaretDown, { color: hovered || opened ? colors_1.WHITE : unhoveredIconColor, small: controlSize === 'small' })
                 ] }), portalStyle
                 ? react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: styles_1.fullScreenOverlay, onPointerDown: onOverlayPointerDown, children: jsx_runtime_1.jsx("div", { style: styles_1.outerPortal, className: "css-reset", children: jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: jsx_runtime_1.jsx("div", { style: portalStyle, children: jsx_runtime_1.jsx(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: values.findIndex((v) => selected && v.id === selected.id), topItemCanBeUnselected: false, fixedHeight: derivedMaxHeight }) }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
                 : null] }));

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

@@ -60,8 +60,13 @@ export declare const InputDragger: React.ForwardRefExoticComponent<InputHTMLAttr
     readonly onTextChange: (newVal: string) => void;
     readonly status: RemInputStatus;
     readonly formatter?: ((str: string | number) => string) | undefined;
+    readonly formatterStyle?: React.CSSProperties | undefined;
+    readonly formatterSubtitle?: ((str: string | number) => string) | undefined;
+    readonly formatterSubtitleStyle?: React.CSSProperties | undefined;
+    readonly buttonStyle?: React.CSSProperties | undefined;
     readonly rightAlign: boolean;
     readonly small?: boolean | undefined;
+    readonly allowStepMismatch?: boolean | undefined;
     readonly snapToStep?: boolean | undefined;
     readonly dragDecimalPlaces?: number | undefined;
     readonly dragSensitivity?: number | undefined;

package/dist/components/NewComposition/InputDragger.js

@@ -295,7 +295,7 @@ const deriveInputDraggerValueDiff = ({ dragSensitivity, step, xDistance, }) => {
     return (0, remotion_1.interpolate)(xDistance, [-5, -4, 0, 4, 5], [-step * dragSensitivity, 0, 0, 0, step * dragSensitivity]);
 };
 exports.deriveInputDraggerValueDiff = deriveInputDraggerValueDiff;
-const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), status, rightAlign, small, snapToStep = true, dragDecimalPlaces, dragSensitivity = 1, type: _type, ...props }, ref) => {
+const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min, max: _max, step: _step, value, onTextChange, formatter = (q) => String(q), formatterStyle, formatterSubtitle, formatterSubtitleStyle, buttonStyle, status, rightAlign, small, allowStepMismatch = false, snapToStep = true, dragDecimalPlaces, dragSensitivity = 1, type: _type, ...props }, ref) => {
     const [inputFallback, setInputFallback] = (0, react_1.useState)(false);
     const [dragging, setDragging] = (0, react_1.useState)(false);
     const fallbackRef = (0, react_1.useRef)(null);
@@ -307,6 +307,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
             step: _step,
         });
     }, [_min, _step, snapToStep]);
+    const validationStep = allowStepMismatch ? 'any' : deriveStep;
     const span = (0, react_1.useMemo)(() => ({
         color: dragging ? 'var(--remotion-cli-internals-blue-hovered)' : colors_1.BLUE,
         cursor: 'ew-resize',
@@ -314,7 +315,8 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         WebkitUserSelect: 'none',
         fontSize: small ? 12 : 14,
         fontVariantNumeric: 'tabular-nums',
-    }), [dragging, small]);
+        ...formatterStyle,
+    }), [dragging, formatterStyle, small]);
     const onFocus = (0, react_1.useCallback)(() => {
         if (!small || pointerDownRef.current) {
             return;
@@ -365,7 +367,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         const validation = (0, exports.validateInputDraggerValue)({
             max: _max,
             min: _min,
-            step: deriveStep,
+            step: validationStep,
             value: newValue,
         });
         if (validation.valid) {
@@ -377,7 +379,7 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
             fallbackRef.current.setCustomValidity(validation.message);
             fallbackRef.current.reportValidity();
         }
-    }, [_max, _min, deriveStep, onEscape, onValueChangeEnd]);
+    }, [_max, _min, onEscape, onValueChangeEnd, validationStep]);
     const onInputKeyDown = (0, react_1.useCallback)((e) => {
         var _a;
         if (e.key === 'Enter') {
@@ -482,8 +484,11 @@ const InputDraggerForwardRefFn = ({ onValueChange, onValueChangeEnd, min: _min,
         }
     }, [inputFallback]);
     if (inputFallback) {
-        return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onEscape, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyDown: onInputKeyDown, onBlur: onBlur, onChange: onInputChange, min: _min, max: _max, step: deriveStep, defaultValue: value, status: status, rightAlign: rightAlign, small: small, ...props, type: "text" }) }));
+        return (jsx_runtime_1.jsx(z_index_1.HigherZIndex, { onEscape: onEscape, onOutsideClick: noop_1.noop, children: jsx_runtime_1.jsx(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyDown: onInputKeyDown, onBlur: onBlur, onChange: onInputChange, min: _min, max: _max, step: validationStep, defaultValue: value, status: status, rightAlign: rightAlign, small: small, ...props, type: "text" }) }));
     }
-    return (jsx_runtime_1.jsx("button", { ref: ref, type: "button", className: '__remotion_input_dragger', style: exports.inputDraggerContainerStyle, onClick: onClick, onFocus: onFocus, onKeyDown: onKeyDown, onPointerDown: onPointerDown, children: jsx_runtime_1.jsx("span", { style: span, children: formatter(value) }) }));
+    return (jsx_runtime_1.jsxs("button", { ref: ref, type: "button", "aria-label": props['aria-label'], className: '__remotion_input_dragger', style: buttonStyle
+            ? { ...exports.inputDraggerContainerStyle, ...buttonStyle }
+            : exports.inputDraggerContainerStyle, onClick: onClick, onFocus: onFocus, onKeyDown: onKeyDown, onPointerDown: onPointerDown, children: [
+            jsx_runtime_1.jsx("span", { style: span, children: formatter(value) }), formatterSubtitle ? (jsx_runtime_1.jsx("span", { style: formatterSubtitleStyle, children: formatterSubtitle(value) })) : null] }));
 };
 exports.InputDragger = react_1.default.forwardRef(InputDraggerForwardRefFn);

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { ComboboxValue } from './ComboBox';
 export declare const MenuContent: React.FC<{
-    readonly values: ComboboxValue[];
+    readonly values: readonly ComboboxValue[];
     readonly onHide: () => void;
     readonly onNextMenu: () => void;
     readonly onPreviousMenu: () => void;

package/dist/components/NewComposition/menu-typeahead.d.ts

@@ -1,5 +1,5 @@
 import type { ComboboxValue } from './ComboBox';
 export declare const findTypeaheadMenuItem: ({ query, values, }: {
     query: string;
-    values: ComboboxValue[];
+    values: readonly ComboboxValue[];
 }) => string | null;

package/dist/components/Notifications/NotificationCenter.js

@@ -1,9 +1,15 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.NotificationCenter = exports.showNotification = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const react_dom_1 = __importDefault(require("react-dom"));
 const colors_1 = require("../../helpers/colors");
+const z_index_1 = require("../../state/z-index");
+const portals_1 = require("../Menu/portals");
 const Notification_1 = require("./Notification");
 const container = {
     position: 'absolute',
@@ -28,6 +34,7 @@ const showNotification = (content, durationInMs) => {
 exports.showNotification = showNotification;
 const NotificationCenter = () => {
     const [notifications, setNotifications] = (0, react_1.useState)([]);
+    const { currentZIndex } = (0, z_index_1.useZIndex)();
     const onRemove = (0, react_1.useCallback)((id) => {
         setNotifications((not) => {
             return not.filter((n) => n.id !== id);
@@ -60,8 +67,11 @@ const NotificationCenter = () => {
             addNotification,
         };
     }, [addNotification]);
-    return (jsx_runtime_1.jsx("div", { style: container, children: notifications.map((n) => {
+    return react_dom_1.default.createPortal(jsx_runtime_1.jsx("div", { style: container, children: notifications.map((n) => {
             return (jsx_runtime_1.jsx(Notification_1.Notification, { created: n.created, duration: n.duration, id: n.id, onRemove: onRemove, children: n.content }, n.id));
-        }) }));
+        }) }), 
+    // Notifications must be above overlays opened from the editor, such as the
+    // floating sidebars used in the mobile layout.
+    (0, portals_1.getPortal)(currentZIndex + 1));
 };
 exports.NotificationCenter = NotificationCenter;

package/dist/components/OutlineToggle.js

@@ -11,10 +11,18 @@ const OutlineToggle = () => {
     const onClick = (0, react_1.useCallback)(() => {
         setEditorShowOutlines((current) => !current);
     }, [setEditorShowOutlines]);
-    const color = editorShowOutlines ? colors_1.BLUE : colors_1.WHITE;
     const accessibilityLabel = editorShowOutlines
         ? 'Hide outlines'
         : 'Show outlines';
-    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: jsx_runtime_1.jsx("svg", { style: { width: 18, height: 18 }, viewBox: "0 0 512 512", fill: color, "aria-hidden": "true", focusable: "false", children: jsx_runtime_1.jsx("path", { d: "M32 119.4C12.9 108.4 0 87.7 0 64 0 28.7 28.7 0 64 0 87.7 0 108.4 12.9 119.4 32l273.1 0c11.1-19.1 31.7-32 55.4-32 35.3 0 64 28.7 64 64 0 23.7-12.9 44.4-32 55.4l0 273.1c19.1 11.1 32 31.7 32 55.4 0 35.3-28.7 64-64 64-23.7 0-44.4-12.9-55.4-32l-273.1 0c-11.1 19.1-31.7 32-55.4 32-35.3 0-64-28.7-64-64 0-23.7 12.9-44.4 32-55.4l0-273.1zm64 0l0 273.1c9.7 5.6 17.8 13.7 23.4 23.4l273.1 0c5.6-9.7 13.7-17.8 23.4-23.4l0-273.1c-9.7-5.6-17.8-13.7-23.4-23.4L119.4 96c-5.6 9.7-13.7 17.8-23.4 23.4z" }) }) }));
+    return (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (color) => {
+            const iconColor = editorShowOutlines ? colors_1.BLUE : color;
+            return (jsx_runtime_1.jsxs("svg", { style: { width: 17, height: 17 }, viewBox: "0 0 512 512", fill: "none", "aria-hidden": "true", focusable: "false", children: [
+                    jsx_runtime_1.jsx("path", { d: "M64 64H448V448H64V64Z", stroke: iconColor, strokeWidth: "36" }), [
+                        [16, 16],
+                        [400, 16],
+                        [16, 400],
+                        [400, 400],
+                    ].map(([x, y]) => (jsx_runtime_1.jsx("rect", { x: x, y: y, width: "96", height: "96", rx: "24", fill: colors_1.BACKGROUND_HEX, stroke: iconColor, strokeWidth: "32" }, `${x}-${y}`)))] }));
+        } }));
 };
 exports.OutlineToggle = OutlineToggle;

package/dist/components/PlayPause.js

@@ -5,7 +5,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
-const colors_1 = require("../helpers/colors");
 const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const jump_to_start_1 = require("../icons/jump-to-start");
@@ -19,22 +18,19 @@ const imperative_state_1 = require("./Timeline/imperative-state");
 const timeline_scroll_logic_1 = require("./Timeline/timeline-scroll-logic");
 const backStyle = {
     height: 18,
-    color: colors_1.WHITE,
 };
 const forwardBackStyle = {
     height: 16,
-    color: colors_1.WHITE,
 };
 const iconButton = {
     height: 14,
     width: 14,
-    color: colors_1.WHITE,
 };
 const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted, hideNavigationControls, }) => {
     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, isLastFrame, isFirstFrame, emitter, getCurrentFrame, } = player_1.PlayerInternals.usePlayer();
+    const { playing, play, pause, pauseAndReturnToPlayStart, frameBack, seek, frameForward, emitter, getCurrentFrame, } = player_1.PlayerInternals.usePlayer();
     player_1.PlayerInternals.usePlayback({
         loop,
         playbackRate,
@@ -198,6 +194,6 @@ const PlayPause = ({ playbackRate, loop, bufferStateDelayInMilliseconds, muted,
             stopped = true;
         };
     }, [bufferStateDelayInMilliseconds, emitter]);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Jump to beginning", title: "Jump to beginning", disabled: !videoConfig || isFirstFrame, onClick: jumpToStart, children: jsx_runtime_1.jsx(jump_to_start_1.JumpToStart, { style: backStyle }) })), hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Step back one frame", title: "Step back one frame", disabled: !videoConfig || isFirstFrame, onClick: oneFrameBack, children: jsx_runtime_1.jsx(step_back_1.StepBack, { style: forwardBackStyle }) })), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": playing ? 'Pause' : 'Play', title: playing ? 'Pause' : 'Play', onClick: playing ? pause : play, disabled: !videoConfig, children: playing ? (showBufferIndicator ? (jsx_runtime_1.jsx(player_1.PlayerInternals.BufferingIndicator, { type: "studio" })) : (jsx_runtime_1.jsx(pause_1.Pause, { style: iconButton }))) : (jsx_runtime_1.jsx(play_1.Play, { style: iconButton })) }), hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Step forward one frame", title: "Step forward one frame", disabled: !videoConfig || isLastFrame, onClick: oneFrameForward, children: jsx_runtime_1.jsx(step_forward_1.StepForward, { style: forwardBackStyle }) }))] }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Jump to beginning", title: "Jump to beginning", disabled: !videoConfig, onClick: jumpToStart, children: (color) => jsx_runtime_1.jsx(jump_to_start_1.JumpToStart, { style: backStyle, color: color }) })), hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Step back one frame", title: "Step back one frame", disabled: !videoConfig, onClick: oneFrameBack, children: (color) => jsx_runtime_1.jsx(step_back_1.StepBack, { style: forwardBackStyle, color: color }) })), jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": playing ? 'Pause' : 'Play', title: playing ? 'Pause' : 'Play', onClick: playing ? pause : play, disabled: !videoConfig, children: (color) => playing ? (showBufferIndicator ? (jsx_runtime_1.jsx(player_1.PlayerInternals.BufferingIndicator, { type: "studio", color: color })) : (jsx_runtime_1.jsx(pause_1.Pause, { style: iconButton, color: color }))) : (jsx_runtime_1.jsx(play_1.Play, { style: iconButton, color: color })) }), hideNavigationControls ? null : (jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Step forward one frame", title: "Step forward one frame", disabled: !videoConfig, onClick: oneFrameForward, children: (color) => jsx_runtime_1.jsx(step_forward_1.StepForward, { style: forwardBackStyle, color: color }) }))] }));
 };
 exports.PlayPause = PlayPause;