@remotion/cli 4.0.0-alpha.4 → 4.0.0-alpha10

package/dist/editor/components/EditorContexts.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorContexts = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const client_id_1 = require("../helpers/client-id");
+const folders_1 = require("../state/folders");
+const highest_z_index_1 = require("../state/highest-z-index");
+const keybindings_1 = require("../state/keybindings");
+const preview_size_1 = require("../state/preview-size");
+const sidebar_1 = require("../state/sidebar");
+const CheckerboardProvider_1 = require("./CheckerboardProvider");
+const get_zod_if_possible_1 = require("./get-zod-if-possible");
+const MediaVolumeProvider_1 = require("./MediaVolumeProvider");
+const ModalsProvider_1 = require("./ModalsProvider");
+const PlayerEmitterContext_1 = require("./PlayerEmitterContext");
+const context_1 = require("./RenderQueue/context");
+const SetTimelineInOutProvider_1 = require("./SetTimelineInOutProvider");
+const ZoomGesturesProvider_1 = require("./ZoomGesturesProvider");
+const EditorContexts = ({ children }) => {
+    return ((0, jsx_runtime_1.jsx)(get_zod_if_possible_1.ZodProvider, { children: (0, jsx_runtime_1.jsx)(client_id_1.PreviewServerConnection, { children: (0, jsx_runtime_1.jsx)(context_1.RenderQueueContextProvider, { children: (0, jsx_runtime_1.jsx)(keybindings_1.KeybindingContextProvider, { children: (0, jsx_runtime_1.jsx)(CheckerboardProvider_1.CheckerboardProvider, { children: (0, jsx_runtime_1.jsx)(ZoomGesturesProvider_1.ZoomGesturesProvider, { children: (0, jsx_runtime_1.jsx)(preview_size_1.PreviewSizeProvider, { children: (0, jsx_runtime_1.jsx)(ModalsProvider_1.ModalsProvider, { children: (0, jsx_runtime_1.jsx)(MediaVolumeProvider_1.MediaVolumeProvider, { children: (0, jsx_runtime_1.jsx)(PlayerEmitterContext_1.PlayerEmitterContext, { children: (0, jsx_runtime_1.jsx)(sidebar_1.SidebarContextProvider, { children: (0, jsx_runtime_1.jsx)(folders_1.FolderContextProvider, { children: (0, jsx_runtime_1.jsx)(highest_z_index_1.HighestZIndexProvider, { children: (0, jsx_runtime_1.jsx)(SetTimelineInOutProvider_1.SetTimelineInOutProvider, { children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }));
+};
+exports.EditorContexts = EditorContexts;

package/dist/editor/components/GlobalKeybindings.js

@@ -20,6 +20,22 @@ const GlobalKeybindings = () => {
                 });
             },
             commandCtrlKey: false,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+        });
+        const cmdKKey = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'k',
+            callback: () => {
+                setSelectedModal({
+                    type: 'quick-switcher',
+                    mode: 'compositions',
+                    invocationTimestamp: Date.now(),
+                });
+            },
+            triggerIfInputFieldFocused: true,
+            commandCtrlKey: true,
+            preventDefault: true,
         });
         const cKey = keybindings.registerKeybinding({
             event: 'keypress',
@@ -28,21 +44,28 @@ const GlobalKeybindings = () => {
                 setCheckerboard((c) => !c);
             },
             commandCtrlKey: true,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const questionMark = keybindings.registerKeybinding({
             event: 'keypress',
             key: '?',
             callback: () => {
                 setSelectedModal({
-                    type: 'shortcuts',
+                    type: 'quick-switcher',
+                    mode: 'docs',
+                    invocationTimestamp: Date.now(),
                 });
             },
             commandCtrlKey: false,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         return () => {
             nKey.unregister();
             cKey.unregister();
             questionMark.unregister();
+            cmdKKey.unregister();
         };
     }, [keybindings, setCheckerboard, setSelectedModal]);
     return null;

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

@@ -1,4 +1,4 @@
 import type React from 'react';
-import type { TComposition } from 'remotion';
-export declare const useSelectComposition: () => (c: TComposition, push: boolean) => void;
+import type { AnyComposition } from 'remotion';
+export declare const useSelectComposition: () => (c: AnyComposition, push: boolean) => void;
 export declare const InitialCompositionLoader: React.FC;

package/dist/editor/components/InitialCompositionLoader.js

@@ -5,23 +5,36 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const folders_1 = require("../state/folders");
 const marks_1 = require("../state/marks");
+const timeline_zoom_1 = require("../state/timeline-zoom");
 const CompositionSelector_1 = require("./CompositionSelector");
 const FramePersistor_1 = require("./FramePersistor");
+const timeline_scroll_logic_1 = require("./Timeline/timeline-scroll-logic");
 const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
+const ZoomPersistor_1 = require("./ZoomPersistor");
 const useSelectComposition = () => {
     const setCurrentFrame = remotion_1.Internals.Timeline.useTimelineSetFrame();
     const { setCurrentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const { setFoldersExpanded } = (0, react_1.useContext)(folders_1.FolderContext);
+    const { setZoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
     return (c, push) => {
         var _a;
         (_a = TimelineInOutToggle_1.inOutHandles.current) === null || _a === void 0 ? void 0 : _a.setMarks((0, marks_1.loadMarks)(c.id, c.durationInFrames));
         if (push) {
-            window.history.pushState({}, 'Preview', `/${c.id}`);
+            window.history.pushState({}, 'Studio', `/${c.id}`);
         }
         const frame = (0, FramePersistor_1.getFrameForComposition)(c.id);
+        const zoom = (0, ZoomPersistor_1.getZoomForComposition)(c.id);
         const frameInBounds = Math.min(c.durationInFrames - 1, frame);
         setCurrentFrame(frameInBounds);
         setCurrentComposition(c.id);
+        setZoom(() => zoom);
+        setTimeout(() => {
+            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+                direction: 'center',
+                frame,
+                durationInFrames: c.durationInFrames,
+            });
+        });
         const { folderName, parentFolderName } = c;
         if (folderName !== null) {
             setFoldersExpanded((ex) => {

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare type RenderInlineAction = (color: string) => React.ReactNode;
+export declare const InlineAction: React.FC<{
+    onClick: React.MouseEventHandler<HTMLAnchorElement>;
+    disabled?: boolean;
+    renderAction: RenderInlineAction;
+}>;

package/dist/editor/components/InlineAction.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InlineAction = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const z_index_1 = require("../state/z-index");
+const InlineAction = ({ renderAction, onClick, disabled }) => {
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        setHovered(true);
+    }, []);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHovered(false);
+    }, []);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            border: 'none',
+            background: disabled
+                ? 'transparent'
+                : (0, colors_1.getBackgroundFromHoverState)({ hovered, selected: false }),
+            height: 24,
+            width: 24,
+            display: 'inline-flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            borderRadius: 3,
+            pointerEvents: disabled ? 'none' : 'auto',
+        };
+    }, [disabled, hovered]);
+    return ((0, jsx_runtime_1.jsx)("a", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, style: style, tabIndex: tabIndex, children: renderAction(hovered ? 'white' : colors_1.LIGHT_TEXT) }));
+};
+exports.InlineAction = InlineAction;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const KeyboardShortcutsExplainer: React.FC;

package/dist/editor/components/KeyboardShortcutsExplainer.js

@@ -0,0 +1,57 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.KeyboardShortcutsExplainer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ShortcutHint_1 = require("../../preview-server/error-overlay/remotion-overlay/ShortcutHint");
+const colors_1 = require("../helpers/colors");
+const use_keybinding_1 = require("../helpers/use-keybinding");
+const keys_1 = require("../icons/keys");
+const layout_1 = require("./layout");
+const left = {
+    width: 85,
+    paddingTop: 8,
+    paddingBottom: 8,
+};
+const key = {
+    background: colors_1.INPUT_BACKGROUND,
+    padding: '3px 6px',
+    color: 'white',
+    borderRadius: 3,
+    border: '1px solid ' + colors_1.INPUT_BORDER_COLOR_UNHOVERED,
+    borderBottomWidth: 3,
+    fontSize: 14,
+    fontFamily: 'monospace',
+};
+const right = {
+    fontSize: 14,
+    color: '#eee',
+};
+const container = {
+    paddingLeft: 20,
+    paddingRight: 40,
+    paddingTop: 10,
+    paddingBottom: 10,
+};
+const title = {
+    fontWeight: 'bold',
+    color: 'white',
+    fontSize: 14,
+    marginBottom: 10,
+};
+const keyboardShortcutsDisabled = {
+    padding: 12,
+    width: '100%',
+    fontSize: 14,
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+};
+const ul = {
+    marginTop: 0,
+    marginBottom: 0,
+};
+const li = {
+    fontSize: 14,
+};
+const KeyboardShortcutsExplainer = () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? ((0, jsx_runtime_1.jsxs)("div", { style: keyboardShortcutsDisabled, children: ["Keyboard shortcuts disabled either due to:", (0, jsx_runtime_1.jsxs)("ul", { style: ul, children: [(0, jsx_runtime_1.jsx)("li", { style: li, children: "a) --disable-keyboard-shortcuts being passed" }), (0, jsx_runtime_1.jsx)("li", { style: li, children: "b) Config.Preview.setKeyboardShortcutsEnabled(false) being set or" }), (0, jsx_runtime_1.jsx)("li", { style: li, children: " c) a Remotion version mismatch." })] })] })) : null, (0, jsx_runtime_1.jsxs)(layout_1.Row, { style: container, children: [(0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second back" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}) }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Previous frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Space" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Pause" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}) }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Next frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second forward" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "A" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Jump to beginning" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "E" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Jump to end" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "J" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Reverse playback" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "K" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Pause" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "L" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Speed up" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Enter" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Pause & return to playback start" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Sidebar" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "B" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle left sidebar" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "J" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle right sidebar" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "G" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle both sidebars" })] }), (0, jsx_runtime_1.jsx)("br", {})] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 8 }), (0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Navigation" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "N" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "New composition" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "R" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Render composition" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "T" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle checkerboard transparency" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "?" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Show keyboard shortcuts" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: ShortcutHint_1.cmdOrCtrlCharacter }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "K" })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Quick Switcher" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback range" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "I" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set In Point" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "O" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set Out Point" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "X" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Clear In/Out Points" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Zoom" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "+" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Zoom in" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "-" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Zoom out" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "0" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Reset zoom" })] })] })] })] }));
+};
+exports.KeyboardShortcutsExplainer = KeyboardShortcutsExplainer;

package/dist/editor/components/LoopToggle.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LoopToggle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
 const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const loop_1 = require("../state/loop");
 const ControlButton_1 = require("./ControlButton");
@@ -18,6 +19,6 @@ const LoopToggle = ({ loop, setLoop }) => {
     if (isStill) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 512 512", style: { width: 18, height: 18 }, children: (0, jsx_runtime_1.jsx)("path", { fill: loop ? 'var(--blue)' : 'white', d: "M493.544 181.463c11.956 22.605 18.655 48.4 18.452 75.75C511.339 345.365 438.56 416 350.404 416H192v47.495c0 22.475-26.177 32.268-40.971 17.475l-80-80c-9.372-9.373-9.372-24.569 0-33.941l80-80C166.138 271.92 192 282.686 192 304v48h158.875c52.812 0 96.575-42.182 97.12-94.992.155-15.045-3.17-29.312-9.218-42.046-4.362-9.185-2.421-20.124 4.8-27.284 4.745-4.706 8.641-8.555 11.876-11.786 11.368-11.352 30.579-8.631 38.091 5.571zM64.005 254.992c.545-52.81 44.308-94.992 97.12-94.992H320v47.505c0 22.374 26.121 32.312 40.971 17.465l80-80c9.372-9.373 9.372-24.569 0-33.941l-80-80C346.014 16.077 320 26.256 320 48.545V96H161.596C73.44 96 .661 166.635.005 254.788c-.204 27.35 6.495 53.145 18.452 75.75 7.512 14.202 26.723 16.923 38.091 5.57 3.235-3.231 7.13-7.08 11.876-11.786 7.22-7.16 9.162-18.098 4.8-27.284-6.049-12.735-9.374-27.001-9.219-42.046z" }) }) }));
+    return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: (0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 512 512", style: { width: 18, height: 18 }, children: (0, jsx_runtime_1.jsx)("path", { fill: loop ? colors_1.BLUE : 'white', d: "M493.544 181.463c11.956 22.605 18.655 48.4 18.452 75.75C511.339 345.365 438.56 416 350.404 416H192v47.495c0 22.475-26.177 32.268-40.971 17.475l-80-80c-9.372-9.373-9.372-24.569 0-33.941l80-80C166.138 271.92 192 282.686 192 304v48h158.875c52.812 0 96.575-42.182 97.12-94.992.155-15.045-3.17-29.312-9.218-42.046-4.362-9.185-2.421-20.124 4.8-27.284 4.745-4.706 8.641-8.555 11.876-11.786 11.368-11.352 30.579-8.631 38.091 5.571zM64.005 254.992c.545-52.81 44.308-94.992 97.12-94.992H320v47.505c0 22.374 26.121 32.312 40.971 17.465l80-80c9.372-9.373 9.372-24.569 0-33.941l-80-80C346.014 16.077 320 26.256 320 48.545V96H161.596C73.44 96 .661 166.635.005 254.788c-.204 27.35 6.495 53.145 18.452 75.75 7.512 14.202 26.723 16.923 38.091 5.57 3.235-3.231 7.13-7.08 11.876-11.786 7.22-7.16 9.162-18.098 4.8-27.284-6.049-12.735-9.374-27.001-9.219-42.046z" }) }) }));
 };
 exports.LoopToggle = LoopToggle;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const MediaVolumeProvider: React.FC<{
+    children: React.ReactNode;
+}>;

package/dist/editor/components/MediaVolumeProvider.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MediaVolumeProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const mute_1 = require("../state/mute");
+const MediaVolumeProvider = ({ children }) => {
+    const [mediaMuted, setMediaMuted] = (0, react_1.useState)(() => (0, mute_1.loadMuteOption)());
+    const [mediaVolume, setMediaVolume] = (0, react_1.useState)(1);
+    const mediaVolumeContextValue = (0, react_1.useMemo)(() => {
+        return {
+            mediaMuted,
+            mediaVolume,
+        };
+    }, [mediaMuted, mediaVolume]);
+    const setMediaVolumeContextValue = (0, react_1.useMemo)(() => {
+        return {
+            setMediaMuted,
+            setMediaVolume,
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(remotion_1.Internals.MediaVolumeContext.Provider, { value: mediaVolumeContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.SetMediaVolumeContext.Provider, { value: setMediaVolumeContextValue, children: children }) }));
+};
+exports.MediaVolumeProvider = MediaVolumeProvider;

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

@@ -1,3 +1,4 @@
+import type { SetStateAction } from 'react';
 import React from 'react';
 import type { ComboboxValue } from '../NewComposition/ComboBox';
 export declare type MenuId = 'remotion' | 'file' | 'view' | 'tools' | 'help';
@@ -11,7 +12,7 @@ export declare const MenuItem: React.FC<{
     label: React.ReactNode;
     id: MenuId;
     selected: boolean;
-    onItemSelected: (id: MenuId) => void;
+    onItemSelected: (s: SetStateAction<string | null>) => void;
     onItemHovered: (id: MenuId) => void;
     onItemQuit: () => void;
     onPreviousMenu: () => void;

package/dist/editor/components/Menu/MenuItem.js

@@ -11,6 +11,7 @@ const react_dom_1 = __importDefault(require("react-dom"));
 const colors_1 = require("../../helpers/colors");
 const z_index_1 = require("../../state/z-index");
 const MenuContent_1 = require("../NewComposition/MenuContent");
+const is_menu_item_1 = require("./is-menu-item");
 const portals_1 = require("./portals");
 const styles_1 = require("./styles");
 const container = {
@@ -58,9 +59,25 @@ const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered
     const onPointerLeave = (0, react_1.useCallback)(() => {
         setHovered(false);
     }, []);
-    const onClick = (0, react_1.useCallback)(() => {
+    const onPointerDown = (0, react_1.useCallback)(() => {
         onItemSelected(id);
-        document.activeElement.blur();
+        window.addEventListener('pointerup', (e) => {
+            if (!(0, is_menu_item_1.isMenuItem)(e.target)) {
+                onItemQuit();
+            }
+        }, {
+            once: true,
+        });
+    }, [id, onItemQuit, onItemSelected]);
+    const onClick = (0, react_1.useCallback)((e) => {
+        e.stopPropagation();
+        const isKeyboardInitiated = e.detail === 0;
+        if (!isKeyboardInitiated) {
+            return;
+        }
+        onItemSelected((p) => {
+            return p === null ? id : null;
+        });
     }, [id, onItemSelected]);
     const outerStyle = (0, react_1.useMemo)(() => {
         var _a, _b;
@@ -69,8 +86,8 @@ const MenuItem = ({ label: itemName, selected, id, onItemSelected, onItemHovered
             top: ((_a = size === null || size === void 0 ? void 0 : size.top) !== null && _a !== void 0 ? _a : 0) + ((_b = size === null || size === void 0 ? void 0 : size.height) !== null && _b !== void 0 ? _b : 0),
         };
     }, [size]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("button", { ref: ref, role: "button", tabIndex: tabIndex, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, style: containerStyle, type: "button", children: itemName }), portalStyle
-                ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { className: "css-reset", style: outerStyle, children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: onItemQuit, onOutsideClick: onItemQuit, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, children: (0, jsx_runtime_1.jsx)(MenuContent_1.MenuContent, { onNextMenu: onPreviousMenu, onPreviousMenu: onNextMenu, values: menu.items, onHide: onItemQuit, leaveLeftSpace: menu.leaveLeftPadding, preselectIndex: false, topItemCanBeUnselected: true }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, 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
+                ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { className: "css-reset", style: outerStyle, children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: onItemQuit, onOutsideClick: onItemQuit, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, children: (0, 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] }));
 };
 exports.MenuItem = MenuItem;

package/dist/editor/components/Menu/MenuSubItem.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import type { SubMenu } from '../NewComposition/ComboBox';
-export declare const MENU_SUBMENU_BUTTON_CLASS_NAME = "remotion-submenu-button";
 export declare type SubMenuActivated = false | 'with-mouse' | 'without-mouse';
 export declare const MenuSubItem: React.FC<{
     label: React.ReactNode;

package/dist/editor/components/Menu/MenuSubItem.js

@@ -3,15 +3,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MenuSubItem = exports.MENU_SUBMENU_BUTTON_CLASS_NAME = void 0;
+exports.MenuSubItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 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 use_keybinding_1 = require("../../helpers/use-keybinding");
 const caret_1 = require("../../icons/caret");
 const z_index_1 = require("../../state/z-index");
 const layout_1 = require("../layout");
+const is_menu_item_1 = require("./is-menu-item");
 const portals_1 = require("./portals");
 const styles_1 = require("./styles");
 const SubMenu_1 = require("./SubMenu");
@@ -22,9 +24,12 @@ const container = {
     paddingRight: 8,
     cursor: 'default',
 };
-exports.MENU_SUBMENU_BUTTON_CLASS_NAME = 'remotion-submenu-button';
 const labelStyle = {
     fontSize: 13,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    flex: 1,
 };
 const keyHintCss = {
     flexDirection: 'row',
@@ -52,7 +57,7 @@ const MenuSubItem = ({ label, leaveLeftSpace, leftItem, onActionChosen, id, sele
             backgroundColor: selected ? colors_1.CLEAR_HOVER : 'transparent',
         };
     }, [selected]);
-    const onClick = (0, react_1.useCallback)(() => {
+    const onItemTriggered = (0, react_1.useCallback)(() => {
         onActionChosen(id);
     }, [id, onActionChosen]);
     const onPointerEnter = (0, react_1.useCallback)(() => {
@@ -84,7 +89,16 @@ const MenuSubItem = ({ label, leaveLeftSpace, leftItem, onActionChosen, id, sele
         }, 100);
         return () => clearTimeout(hi);
     }, [hovered, selected, setSubMenuActivated, subMenu]);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: style, onClick: onClick, children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { children: [leaveLeftSpace ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: leftSpace, children: leftItem }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 })] })) : null, (0, jsx_runtime_1.jsx)("div", { style: labelStyle, children: label }), " ", (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), subMenu ? (0, jsx_runtime_1.jsx)(caret_1.CaretRight, {}) : null, keyHint ? (0, jsx_runtime_1.jsx)("span", { style: keyHintCss, children: keyHint }) : null, portalStyle && subMenu
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (selected) {
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+                // block is vertical alignment, inline is horizontal alignment. So we use "block"
+                block: 'nearest',
+            });
+        }
+    }, [selected]);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: style, onPointerUp: onItemTriggered, role: "button", className: is_menu_item_1.MENU_ITEM_CLASSNAME, children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [leaveLeftSpace ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: leftSpace, children: leftItem }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 })] })) : null, (0, jsx_runtime_1.jsx)("div", { style: labelStyle, ...{ title: typeof label === 'string' ? label : undefined }, children: label }), ' ', (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), subMenu ? (0, jsx_runtime_1.jsx)(caret_1.CaretRight, {}) : null, keyHint && !(0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? ((0, jsx_runtime_1.jsx)("span", { style: keyHintCss, children: keyHint })) : null, portalStyle && subMenu
                     ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(SubMenu_1.SubMenuComponent, { onQuitFullMenu: onQuitMenu, subMenu: subMenu, onQuitSubMenu: onQuitSubmenu, portalStyle: portalStyle, subMenuActivated: subMenuActivated }), (0, portals_1.getPortal)(currentZIndex))
                     : null] }) }));
 };

package/dist/editor/components/Menu/SubMenu.js

@@ -9,6 +9,6 @@ const SubMenuComponent = ({ portalStyle, subMenuActivated, subMenu, onQuitFullMe
     return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: onQuitFullMenu, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, className: "css-reset", children: (0, jsx_runtime_1.jsx)(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: onQuitSubMenu, values: subMenu.items, onHide: noop_1.noop, leaveLeftSpace: subMenu.leaveLeftSpace, preselectIndex: subMenuActivated === 'without-mouse' &&
                     typeof subMenu.preselectIndex === 'number'
                     ? subMenu.preselectIndex
-                    : false, topItemCanBeUnselected: false }) }) }));
+                    : false, topItemCanBeUnselected: false, fixedHeight: null }) }) }));
 };
 exports.SubMenuComponent = SubMenuComponent;

package/dist/editor/components/Menu/is-menu-item.d.ts

@@ -0,0 +1,5 @@
+export declare const MENU_INITIATOR_CLASSNAME = "__remotion-preview-menu-initiator";
+export declare const MENU_ITEM_CLASSNAME = "__remotion-preview-menu-item";
+export declare const HORIZONTAL_SCROLLBAR_CLASSNAME = "__remotion-horizontal-scrollbar";
+export declare const VERTICAL_SCROLLBAR_CLASSNAME = "__remotion-vertical-scrollbar";
+export declare const isMenuItem: (el: HTMLElement) => boolean;

package/dist/editor/components/Menu/is-menu-item.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isMenuItem = exports.VERTICAL_SCROLLBAR_CLASSNAME = exports.HORIZONTAL_SCROLLBAR_CLASSNAME = exports.MENU_ITEM_CLASSNAME = exports.MENU_INITIATOR_CLASSNAME = void 0;
+exports.MENU_INITIATOR_CLASSNAME = '__remotion-preview-menu-initiator';
+exports.MENU_ITEM_CLASSNAME = '__remotion-preview-menu-item';
+exports.HORIZONTAL_SCROLLBAR_CLASSNAME = '__remotion-horizontal-scrollbar';
+exports.VERTICAL_SCROLLBAR_CLASSNAME = '__remotion-vertical-scrollbar';
+const isMenuItem = (el) => {
+    return Boolean(el.classList.contains(exports.MENU_ITEM_CLASSNAME) ||
+        el.closest(`.${exports.MENU_ITEM_CLASSNAME}`) ||
+        el.classList.contains(exports.MENU_INITIATOR_CLASSNAME) ||
+        el.closest(`.${exports.MENU_INITIATOR_CLASSNAME}`));
+};
+exports.isMenuItem = isMenuItem;

package/dist/editor/components/Menu/styles.d.ts

@@ -1,6 +1,11 @@
 import type React from 'react';
 export declare const MENU_VERTICAL_PADDING = 4;
 export declare const SUBMENU_LEFT_INSET = -8;
+export declare const MAX_MENU_WIDTH = 400;
+export declare const SHADOW_TOWARDS_BOTTOM = "0 2px 8px rgba(0, 0, 0, 0.5)";
+export declare const SHADOW_TOWARDS_TOP = "0 -2px 8px rgba(0, 0, 0, 0.5)";
 export declare const menuContainerTowardsBottom: React.CSSProperties;
 export declare const menuContainerTowardsTop: React.CSSProperties;
+export declare const fullScreenOverlay: React.CSSProperties;
 export declare const outerPortal: React.CSSProperties;
+export declare const inlineCodeSnippet: React.CSSProperties;

package/dist/editor/components/Menu/styles.js

@@ -1,26 +1,38 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.outerPortal = exports.menuContainerTowardsTop = exports.menuContainerTowardsBottom = exports.SUBMENU_LEFT_INSET = exports.MENU_VERTICAL_PADDING = void 0;
+exports.inlineCodeSnippet = exports.outerPortal = exports.fullScreenOverlay = exports.menuContainerTowardsTop = exports.menuContainerTowardsBottom = exports.SHADOW_TOWARDS_TOP = exports.SHADOW_TOWARDS_BOTTOM = exports.MAX_MENU_WIDTH = exports.SUBMENU_LEFT_INSET = exports.MENU_VERTICAL_PADDING = void 0;
 const colors_1 = require("../../helpers/colors");
 exports.MENU_VERTICAL_PADDING = 4;
 exports.SUBMENU_LEFT_INSET = -8;
+exports.MAX_MENU_WIDTH = 400;
 const menuContainer = {
     backgroundColor: colors_1.BACKGROUND,
     position: 'fixed',
     color: 'white',
     userSelect: 'none',
-    minWidth: 200,
 };
+exports.SHADOW_TOWARDS_BOTTOM = '0 2px 8px rgba(0, 0, 0, 0.5)';
+exports.SHADOW_TOWARDS_TOP = '0 -2px 8px rgba(0, 0, 0, 0.5)';
 exports.menuContainerTowardsBottom = {
     ...menuContainer,
-    boxShadow: '0 2px 8px rgba(0, 0, 0, 0.5)',
+    boxShadow: exports.SHADOW_TOWARDS_BOTTOM,
 };
 exports.menuContainerTowardsTop = {
     ...menuContainer,
-    boxShadow: '0 -2px 8px rgba(0, 0, 0, 0.5)',
+    boxShadow: exports.SHADOW_TOWARDS_TOP,
+};
+exports.fullScreenOverlay = {
+    position: 'fixed',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
 };
 exports.outerPortal = {
     position: 'fixed',
-    height: '100%',
-    width: '100%',
+};
+exports.inlineCodeSnippet = {
+    fontSize: 14,
+    color: colors_1.BLUE,
+    fontFamily: 'monospace',
 };

package/dist/editor/components/MenuBuildIndicator.js

@@ -3,12 +3,31 @@ 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 layout_1 = require("./layout");
+const OpenEditorButton_1 = require("./OpenEditorButton");
+const Spinner_1 = require("./Spinner");
 const cwd = {
     fontSize: 13,
     opacity: 0.8,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+};
+const spinnerSize = 14;
+const spinner = {
+    position: 'relative',
+    width: spinnerSize,
+    marginTop: 4,
+};
+const noSpinner = {
+    position: 'relative',
+    width: spinnerSize,
 };
 const MenuBuildIndicator = () => {
     const [isBuilding, setIsBuilding] = (0, react_1.useState)(false);
+    const ctx = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const showButton = window.remotion_editorName && ctx.type === 'connected';
     (0, react_1.useEffect)(() => {
         window.remotion_isBuilding = () => {
             setIsBuilding(true);
@@ -21,6 +40,6 @@ const MenuBuildIndicator = () => {
             window.remotion_finishedBuilding = undefined;
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)("div", { style: cwd, title: window.remotion_cwd, children: isBuilding ? 'Building...' : window.remotion_projectName }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: cwd, title: window.remotion_cwd, children: [showButton ? (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }) : null, isBuilding ? ((0, jsx_runtime_1.jsx)("div", { style: spinner, children: (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { duration: 0.5, size: spinnerSize }) })) : ((0, jsx_runtime_1.jsx)("div", { style: noSpinner })), showButton ? (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }) : null, window.remotion_projectName, showButton ? (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }) : null, showButton ? (0, jsx_runtime_1.jsx)(OpenEditorButton_1.OpenEditorButton, {}) : null] }));
 };
 exports.MenuBuildIndicator = MenuBuildIndicator;