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

package/dist/editor/components/Canvas.js

@@ -4,8 +4,16 @@ exports.Canvas = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
+const smooth_zoom_1 = require("../../smooth-zoom");
 const colors_1 = require("../helpers/colors");
+const get_effective_translation_1 = require("../helpers/get-effective-translation");
+const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
+const use_keybinding_1 = require("../helpers/use-keybinding");
+const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
+const preview_size_1 = require("../state/preview-size");
+const layout_1 = require("./layout");
 const Preview_1 = require("./Preview");
+const ResetZoomButton_1 = require("./ResetZoomButton");
 const container = {
     flex: 1,
     display: 'flex',
@@ -13,12 +21,201 @@ const container = {
     position: 'relative',
     backgroundColor: colors_1.BACKGROUND,
 };
+const resetZoom = {
+    position: 'absolute',
+    top: layout_1.SPACING_UNIT * 2,
+    right: layout_1.SPACING_UNIT * 2,
+};
+const ZOOM_PX_FACTOR = 0.003;
 const Canvas = () => {
+    const dimensions = (0, is_current_selected_still_1.useDimensions)();
     const ref = (0, react_1.useRef)(null);
+    const { setSize, size: previewSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
+    const { editorZoomGestures } = (0, react_1.useContext)(editor_zoom_gestures_1.EditorZoomGesturesContext);
+    const keybindings = (0, use_keybinding_1.useKeybinding)();
     const size = player_1.PlayerInternals.useElementSize(ref, {
         triggerOnWindowResize: false,
         shouldApplyCssTransforms: true,
     });
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, style: container, children: size ? (0, jsx_runtime_1.jsx)(Preview_1.VideoPreview, { canvasSize: size }) : null }));
+    const isFit = previewSize.size === 'auto';
+    const onWheel = (0, react_1.useCallback)((e) => {
+        if (!editorZoomGestures) {
+            return;
+        }
+        if (!size) {
+            return;
+        }
+        if (!dimensions) {
+            return;
+        }
+        const wantsToZoom = e.ctrlKey || e.metaKey;
+        if (!wantsToZoom && isFit) {
+            return;
+        }
+        e.preventDefault();
+        setSize((prevSize) => {
+            const scale = player_1.PlayerInternals.calculateScale({
+                canvasSize: size,
+                compositionHeight: dimensions.height,
+                compositionWidth: dimensions.width,
+                previewSize: prevSize.size,
+            });
+            // Zoom in/out
+            if (wantsToZoom) {
+                const oldSize = prevSize.size === 'auto' ? scale : prevSize.size;
+                const smoothened = (0, smooth_zoom_1.smoothenZoom)(oldSize);
+                const added = smoothened + e.deltaY * ZOOM_PX_FACTOR;
+                const unsmoothened = (0, smooth_zoom_1.unsmoothenZoom)(added);
+                const { centerX, centerY } = (0, get_effective_translation_1.getCenterPointWhileScrolling)({
+                    size,
+                    clientX: e.clientX,
+                    clientY: e.clientY,
+                    compositionWidth: dimensions.width,
+                    compositionHeight: dimensions.height,
+                    scale,
+                    translation: prevSize.translation,
+                });
+                const zoomDifference = unsmoothened - oldSize;
+                const uvCoordinatesX = centerX / dimensions.width;
+                const uvCoordinatesY = centerY / dimensions.height;
+                const correctionLeft = -uvCoordinatesX * (zoomDifference * dimensions.width) +
+                    (1 - uvCoordinatesX) * zoomDifference * dimensions.width;
+                const correctionTop = -uvCoordinatesY * (zoomDifference * dimensions.height) +
+                    (1 - uvCoordinatesY) * zoomDifference * dimensions.height;
+                return {
+                    translation: (0, get_effective_translation_1.getEffectiveTranslation)({
+                        translation: {
+                            x: prevSize.translation.x - correctionLeft / 2,
+                            y: prevSize.translation.y - correctionTop / 2,
+                        },
+                        canvasSize: size,
+                        compositionHeight: dimensions.height,
+                        compositionWidth: dimensions.width,
+                        scale,
+                    }),
+                    size: unsmoothened,
+                };
+            }
+            const effectiveTranslation = (0, get_effective_translation_1.getEffectiveTranslation)({
+                translation: prevSize.translation,
+                canvasSize: size,
+                compositionHeight: dimensions.height,
+                compositionWidth: dimensions.width,
+                scale,
+            });
+            // Pan
+            return {
+                ...prevSize,
+                translation: (0, get_effective_translation_1.getEffectiveTranslation)({
+                    translation: {
+                        x: effectiveTranslation.x + e.deltaX,
+                        y: effectiveTranslation.y + e.deltaY,
+                    },
+                    canvasSize: size,
+                    compositionHeight: dimensions.height,
+                    compositionWidth: dimensions.width,
+                    scale,
+                }),
+            };
+        });
+    }, [editorZoomGestures, dimensions, isFit, setSize, size]);
+    (0, react_1.useEffect)(() => {
+        const { current } = ref;
+        if (!current) {
+            return;
+        }
+        current.addEventListener('wheel', onWheel, { passive: false });
+        return () => 
+        // @ts-expect-error
+        current.removeEventListener('wheel', onWheel, {
+            passive: false,
+        });
+    }, [onWheel]);
+    const onReset = (0, react_1.useCallback)(() => {
+        setSize(() => {
+            return {
+                translation: {
+                    x: 0,
+                    y: 0,
+                },
+                size: 'auto',
+            };
+        });
+    }, [setSize]);
+    const onZoomIn = (0, react_1.useCallback)(() => {
+        if (!dimensions) {
+            return;
+        }
+        if (!size) {
+            return;
+        }
+        setSize((prevSize) => {
+            const scale = player_1.PlayerInternals.calculateScale({
+                canvasSize: size,
+                compositionHeight: dimensions.height,
+                compositionWidth: dimensions.width,
+                previewSize: prevSize.size,
+            });
+            return {
+                translation: {
+                    x: 0,
+                    y: 0,
+                },
+                size: Math.min(smooth_zoom_1.MAX_ZOOM, scale * 2),
+            };
+        });
+    }, [dimensions, setSize, size]);
+    const onZoomOut = (0, react_1.useCallback)(() => {
+        if (!dimensions) {
+            return;
+        }
+        if (!size) {
+            return;
+        }
+        setSize((prevSize) => {
+            const scale = player_1.PlayerInternals.calculateScale({
+                canvasSize: size,
+                compositionHeight: dimensions.height,
+                compositionWidth: dimensions.width,
+                previewSize: prevSize.size,
+            });
+            return {
+                translation: {
+                    x: 0,
+                    y: 0,
+                },
+                size: Math.max(smooth_zoom_1.MIN_ZOOM, scale / 2),
+            };
+        });
+    }, [dimensions, setSize, size]);
+    (0, react_1.useEffect)(() => {
+        const resetBinding = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: '0',
+            commandCtrlKey: false,
+            callback: onReset,
+            preventDefault: true,
+        });
+        const zoomIn = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: '+',
+            commandCtrlKey: false,
+            callback: onZoomIn,
+            preventDefault: true,
+        });
+        const zoomOut = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: '-',
+            commandCtrlKey: false,
+            callback: onZoomOut,
+            preventDefault: true,
+        });
+        return () => {
+            resetBinding.unregister();
+            zoomIn.unregister();
+            zoomOut.unregister();
+        };
+    }, [keybindings, onReset, onZoomIn, onZoomOut]);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: container, children: [size ? (0, jsx_runtime_1.jsx)(Preview_1.VideoPreview, { canvasSize: size }) : null, isFit ? null : ((0, jsx_runtime_1.jsx)("div", { style: resetZoom, className: "css-reset", children: (0, jsx_runtime_1.jsx)(ResetZoomButton_1.ResetZoomButton, { onClick: onReset }) }))] }));
 };
 exports.Canvas = Canvas;

package/dist/editor/components/CheckboardToggle.js

@@ -3,9 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckboardToggle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const truthy_1 = require("../../truthy");
+const use_keybinding_1 = require("../helpers/use-keybinding");
 const checkerboard_1 = require("../state/checkerboard");
 const ControlButton_1 = require("./ControlButton");
-const accessibilityLabel = 'Show transparency as checkerboard (T)';
+const accessibilityLabel = [
+    'Show transparency as checkerboard',
+    (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? null : '(T)',
+]
+    .filter(truthy_1.truthy)
+    .join(' ');
 const CheckboardToggle = () => {
     const { checkerboard, setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
     const onClick = (0, react_1.useCallback)(() => {

package/dist/editor/components/CopyButton.js

@@ -3,29 +3,16 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CopyButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const colors_1 = require("../helpers/colors");
+const Button_1 = require("../../preview-server/error-overlay/remotion-overlay/Button");
 const copy_text_1 = require("../helpers/copy-text");
 const layout_1 = require("./layout");
 const iconStyle = {
     width: 16,
     height: 16,
     color: 'white',
+    verticalAlign: 'sub',
 };
 const copyIcon = ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "far", "data-icon": "clipboard", className: "svg-inline--fa fa-clipboard fa-w-12", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 384 512", style: iconStyle, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm144 418c0 3.3-2.7 6-6 6H54c-3.3 0-6-2.7-6-6V118c0-3.3 2.7-6 6-6h42v36c0 6.6 5.4 12 12 12h168c6.6 0 12-5.4 12-12v-36h42c3.3 0 6 2.7 6 6z" }) }));
-const container = {
-    padding: 10,
-    cursor: 'pointer',
-    fontSize: 14,
-};
-const button = {
-    border: `1px solid ${colors_1.INPUT_BORDER_COLOR_UNHOVERED}`,
-    borderRadius: 4,
-    backgroundColor: colors_1.INPUT_BACKGROUND,
-    appearance: 'none',
-    fontFamily: 'inherit',
-    fontSize: 14,
-    color: 'white',
-};
 const labelStyle = {
     fontSize: 14,
 };
@@ -42,6 +29,6 @@ const CopyButton = ({ textToCopy, label, labelWhenCopied }) => {
         const to = setTimeout(() => setCopied(false), 2000);
         return () => clearTimeout(to);
     }, [copied]);
-    return ((0, jsx_runtime_1.jsx)("button", { onClick: onClick, style: button, type: "button", children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { style: container, children: [copyIcon, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 }), ' ', (0, jsx_runtime_1.jsx)("span", { style: labelStyle, children: copied ? labelWhenCopied : label })] }) }));
+    return ((0, jsx_runtime_1.jsxs)(Button_1.Button, { onClick: onClick, children: [copyIcon, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 }), ' ', (0, jsx_runtime_1.jsx)("span", { style: labelStyle, children: copied ? labelWhenCopied : label })] }));
 };
 exports.CopyButton = CopyButton;

package/dist/editor/components/Editor.js

@@ -5,30 +5,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Editor = void 0;
 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 noop_1 = require("../helpers/noop");
-const checkerboard_1 = require("../state/checkerboard");
-const folders_1 = require("../state/folders");
-const highest_z_index_1 = require("../state/highest-z-index");
-const in_out_1 = require("../state/in-out");
-const keybindings_1 = require("../state/keybindings");
 const modals_1 = require("../state/modals");
-const mute_1 = require("../state/mute");
-const preview_size_1 = require("../state/preview-size");
-const rich_timeline_1 = require("../state/rich-timeline");
-const sidebar_1 = require("../state/sidebar");
+const timeline_zoom_1 = require("../state/timeline-zoom");
 const z_index_1 = require("../state/z-index");
 const EditorContent_1 = require("./EditorContent");
 const FramePersistor_1 = require("./FramePersistor");
 const GlobalKeybindings_1 = require("./GlobalKeybindings");
-const KeyboardShortcutsModal_1 = require("./KeyboardShortcutsModal");
 const NewComposition_1 = __importDefault(require("./NewComposition/NewComposition"));
 const NoRegisterRoot_1 = require("./NoRegisterRoot");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const QuickSwitcher_1 = __importDefault(require("./QuickSwitcher/QuickSwitcher"));
 const UpdateModal_1 = require("./UpdateModal/UpdateModal");
+const ZoomPersistor_1 = require("./ZoomPersistor");
 const background = {
     backgroundColor: colors_1.BACKGROUND,
     display: 'flex',
@@ -38,89 +30,14 @@ const background = {
     position: 'absolute',
 };
 const Editor = () => {
-    const [emitter] = (0, react_1.useState)(() => new player_1.PlayerInternals.PlayerEmitter());
-    const [size, setSizeState] = (0, react_1.useState)(() => (0, preview_size_1.loadPreviewSizeOption)());
     const [Root, setRoot] = (0, react_1.useState)(() => remotion_1.Internals.getRoot());
+    const { selectedModal: modalContextType } = (0, react_1.useContext)(modals_1.ModalsContext);
     const [waitForRoot] = (0, react_1.useState)(() => {
         if (Root) {
             return 0;
         }
         return (0, remotion_1.delayRender)('Waiting for registerRoot()');
     });
-    const [checkerboard, setCheckerboardState] = (0, react_1.useState)(() => (0, checkerboard_1.loadCheckerboardOption)());
-    const setCheckerboard = (0, react_1.useCallback)((newValue) => {
-        setCheckerboardState((prevState) => {
-            const newVal = newValue(prevState);
-            (0, checkerboard_1.persistCheckerboardOption)(newVal);
-            return newVal;
-        });
-    }, []);
-    const [richTimeline, setRichTimelineState] = (0, react_1.useState)(() => (0, rich_timeline_1.loadRichTimelineOption)());
-    const setRichTimeline = (0, react_1.useCallback)((newValue) => {
-        setRichTimelineState((prevState) => {
-            const newVal = newValue(prevState);
-            (0, rich_timeline_1.persistRichTimelineOption)(newVal);
-            return newVal;
-        });
-    }, []);
-    const setSize = (0, react_1.useCallback)((newValue) => {
-        setSizeState((prevState) => {
-            const newVal = newValue(prevState);
-            (0, preview_size_1.persistPreviewSizeOption)(newVal);
-            return newVal;
-        });
-    }, []);
-    const [inAndOutFrames, setInAndOutFrames] = (0, react_1.useState)({
-        inFrame: null,
-        outFrame: null,
-    });
-    const [mediaMuted, setMediaMuted] = (0, react_1.useState)(() => (0, mute_1.loadMuteOption)());
-    const [mediaVolume, setMediaVolume] = (0, react_1.useState)(1);
-    const [modalContextType, setModalContextType] = (0, react_1.useState)(null);
-    const previewSizeCtx = (0, react_1.useMemo)(() => {
-        return {
-            size,
-            setSize,
-        };
-    }, [setSize, size]);
-    const checkerboardCtx = (0, react_1.useMemo)(() => {
-        return {
-            checkerboard,
-            setCheckerboard,
-        };
-    }, [checkerboard, setCheckerboard]);
-    const richTimelineCtx = (0, react_1.useMemo)(() => {
-        return {
-            richTimeline,
-            setRichTimeline,
-        };
-    }, [richTimeline, setRichTimeline]);
-    const timelineInOutContextValue = (0, react_1.useMemo)(() => {
-        return inAndOutFrames;
-    }, [inAndOutFrames]);
-    const setTimelineInOutContextValue = (0, react_1.useMemo)(() => {
-        return {
-            setInAndOutFrames,
-        };
-    }, []);
-    const mediaVolumeContextValue = (0, react_1.useMemo)(() => {
-        return {
-            mediaMuted,
-            mediaVolume,
-        };
-    }, [mediaMuted, mediaVolume]);
-    const setMediaVolumeContextValue = (0, react_1.useMemo)(() => {
-        return {
-            setMediaMuted,
-            setMediaVolume,
-        };
-    }, []);
-    const modalsContext = (0, react_1.useMemo)(() => {
-        return {
-            selectedModal: modalContextType,
-            setSelectedModal: setModalContextType,
-        };
-    }, [modalContextType]);
     (0, react_1.useEffect)(() => {
         if (Root) {
             return;
@@ -131,9 +48,8 @@ const Editor = () => {
         });
         return () => cleanup();
     }, [Root, waitForRoot]);
-    return ((0, jsx_runtime_1.jsx)(keybindings_1.KeybindingContextProvider, { children: (0, jsx_runtime_1.jsx)(rich_timeline_1.RichTimelineContext.Provider, { value: richTimelineCtx, children: (0, jsx_runtime_1.jsx)(checkerboard_1.CheckerboardContext.Provider, { value: checkerboardCtx, children: (0, jsx_runtime_1.jsx)(preview_size_1.PreviewSizeContext.Provider, { value: previewSizeCtx, children: (0, jsx_runtime_1.jsx)(modals_1.ModalsContext.Provider, { value: modalsContext, children: (0, jsx_runtime_1.jsx)(in_out_1.TimelineInOutContext.Provider, { value: timelineInOutContextValue, children: (0, jsx_runtime_1.jsx)(in_out_1.SetTimelineInOutContext.Provider, { value: setTimelineInOutContextValue, children: (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: (0, jsx_runtime_1.jsx)(player_1.PlayerInternals.PlayerEventEmitterContext.Provider, { value: emitter, 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.jsxs)(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: [(0, jsx_runtime_1.jsxs)("div", { style: background, children: [Root === null ? null : (0, jsx_runtime_1.jsx)(Root, {}), (0, jsx_runtime_1.jsxs)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [(0, jsx_runtime_1.jsx)(FramePersistor_1.FramePersistor, {}), Root === null ? ((0, jsx_runtime_1.jsx)(NoRegisterRoot_1.NoRegisterRoot, {})) : ((0, jsx_runtime_1.jsx)(EditorContent_1.EditorContent, {})), (0, jsx_runtime_1.jsx)(GlobalKeybindings_1.GlobalKeybindings, {})] })] }), (0, jsx_runtime_1.jsx)(NotificationCenter_1.NotificationCenter, {}), modalContextType &&
-                                                                    modalContextType.type === 'new-comp' && ((0, jsx_runtime_1.jsx)(NewComposition_1.default, { initialCompType: modalContextType.compType })), modalContextType &&
-                                                                    modalContextType.type === 'update' && ((0, jsx_runtime_1.jsx)(UpdateModal_1.UpdateModal, { info: modalContextType.info })), modalContextType &&
-                                                                    modalContextType.type === 'shortcuts' && ((0, jsx_runtime_1.jsx)(KeyboardShortcutsModal_1.KeyboardShortcuts, {}))] }) }) }) }) }) }) }) }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsxs)(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: [(0, jsx_runtime_1.jsx)(timeline_zoom_1.TimelineZoomContext, { children: (0, jsx_runtime_1.jsxs)("div", { style: background, children: [Root === null ? null : (0, jsx_runtime_1.jsx)(Root, {}), (0, jsx_runtime_1.jsxs)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [(0, jsx_runtime_1.jsx)(FramePersistor_1.FramePersistor, {}), (0, jsx_runtime_1.jsx)(ZoomPersistor_1.ZoomPersistor, {}), Root === null ? (0, jsx_runtime_1.jsx)(NoRegisterRoot_1.NoRegisterRoot, {}) : (0, jsx_runtime_1.jsx)(EditorContent_1.EditorContent, {}), (0, jsx_runtime_1.jsx)(GlobalKeybindings_1.GlobalKeybindings, {})] }), (0, jsx_runtime_1.jsx)(NotificationCenter_1.NotificationCenter, {}), modalContextType && modalContextType.type === 'quick-switcher' && (
+                        // Quick switcher here because requires timeline zoom ctx
+                        (0, jsx_runtime_1.jsx)(QuickSwitcher_1.default, { invocationTimestamp: modalContextType.invocationTimestamp, initialMode: modalContextType.mode }))] }) }), modalContextType && modalContextType.type === 'new-comp' && ((0, jsx_runtime_1.jsx)(NewComposition_1.default, { initialCompType: modalContextType.compType })), modalContextType && modalContextType.type === 'update' && ((0, jsx_runtime_1.jsx)(UpdateModal_1.UpdateModal, { info: modalContextType.info }))] }));
 };
 exports.Editor = Editor;

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

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

package/dist/editor/components/EditorContexts.js

@@ -0,0 +1,98 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorContexts = void 0;
+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 checkerboard_1 = require("../state/checkerboard");
+const editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
+const folders_1 = require("../state/folders");
+const highest_z_index_1 = require("../state/highest-z-index");
+const in_out_1 = require("../state/in-out");
+const keybindings_1 = require("../state/keybindings");
+const modals_1 = require("../state/modals");
+const mute_1 = require("../state/mute");
+const preview_size_1 = require("../state/preview-size");
+const rich_timeline_1 = require("../state/rich-timeline");
+const sidebar_1 = require("../state/sidebar");
+const EditorContexts = ({ children }) => {
+    const [inAndOutFrames, setInAndOutFrames] = (0, react_1.useState)({
+        inFrame: null,
+        outFrame: null,
+    });
+    const timelineInOutContextValue = (0, react_1.useMemo)(() => {
+        return inAndOutFrames;
+    }, [inAndOutFrames]);
+    const [emitter] = (0, react_1.useState)(() => new player_1.PlayerInternals.PlayerEmitter());
+    const setTimelineInOutContextValue = (0, react_1.useMemo)(() => {
+        return {
+            setInAndOutFrames,
+        };
+    }, []);
+    const [checkerboard, setCheckerboardState] = (0, react_1.useState)(() => (0, checkerboard_1.loadCheckerboardOption)());
+    const setCheckerboard = (0, react_1.useCallback)((newValue) => {
+        setCheckerboardState((prevState) => {
+            const newVal = newValue(prevState);
+            (0, checkerboard_1.persistCheckerboardOption)(newVal);
+            return newVal;
+        });
+    }, []);
+    const [editorZoomGestures, setEditorZoomGesturesState] = (0, react_1.useState)(() => (0, editor_zoom_gestures_1.loadEditorZoomGesturesOption)());
+    const setEditorZoomGestures = (0, react_1.useCallback)((newValue) => {
+        setEditorZoomGesturesState((prevState) => {
+            const newVal = newValue(prevState);
+            (0, editor_zoom_gestures_1.persistEditorZoomGesturesOption)(newVal);
+            return newVal;
+        });
+    }, []);
+    const [richTimeline, setRichTimelineState] = (0, react_1.useState)(() => (0, rich_timeline_1.loadRichTimelineOption)());
+    const setRichTimeline = (0, react_1.useCallback)((newValue) => {
+        setRichTimelineState((prevState) => {
+            const newVal = newValue(prevState);
+            (0, rich_timeline_1.persistRichTimelineOption)(newVal);
+            return newVal;
+        });
+    }, []);
+    const [mediaMuted, setMediaMuted] = (0, react_1.useState)(() => (0, mute_1.loadMuteOption)());
+    const [mediaVolume, setMediaVolume] = (0, react_1.useState)(1);
+    const [modalContextType, setModalContextType] = (0, react_1.useState)(null);
+    const checkerboardCtx = (0, react_1.useMemo)(() => {
+        return {
+            checkerboard,
+            setCheckerboard,
+        };
+    }, [checkerboard, setCheckerboard]);
+    const editorZoomGesturesCtx = (0, react_1.useMemo)(() => {
+        return {
+            editorZoomGestures,
+            setEditorZoomGestures,
+        };
+    }, [editorZoomGestures, setEditorZoomGestures]);
+    const richTimelineCtx = (0, react_1.useMemo)(() => {
+        return {
+            richTimeline,
+            setRichTimeline,
+        };
+    }, [richTimeline, setRichTimeline]);
+    const mediaVolumeContextValue = (0, react_1.useMemo)(() => {
+        return {
+            mediaMuted,
+            mediaVolume,
+        };
+    }, [mediaMuted, mediaVolume]);
+    const setMediaVolumeContextValue = (0, react_1.useMemo)(() => {
+        return {
+            setMediaMuted,
+            setMediaVolume,
+        };
+    }, []);
+    const modalsContext = (0, react_1.useMemo)(() => {
+        return {
+            selectedModal: modalContextType,
+            setSelectedModal: setModalContextType,
+        };
+    }, [modalContextType]);
+    return ((0, jsx_runtime_1.jsx)(keybindings_1.KeybindingContextProvider, { children: (0, jsx_runtime_1.jsx)(rich_timeline_1.RichTimelineContext.Provider, { value: richTimelineCtx, children: (0, jsx_runtime_1.jsx)(checkerboard_1.CheckerboardContext.Provider, { value: checkerboardCtx, children: (0, jsx_runtime_1.jsx)(editor_zoom_gestures_1.EditorZoomGesturesContext.Provider, { value: editorZoomGesturesCtx, children: (0, jsx_runtime_1.jsx)(preview_size_1.PreviewSizeProvider, { children: (0, jsx_runtime_1.jsx)(modals_1.ModalsContext.Provider, { value: modalsContext, children: (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: (0, jsx_runtime_1.jsx)(player_1.PlayerInternals.PlayerEventEmitterContext.Provider, { value: emitter, 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)(in_out_1.TimelineInOutContext.Provider, { value: timelineInOutContextValue, children: (0, jsx_runtime_1.jsx)(in_out_1.SetTimelineInOutContext.Provider, { value: setTimelineInOutContextValue, children: children }) }) }) }) }) }) }) }) }) }) }) }) }) }));
+};
+exports.EditorContexts = EditorContexts;

package/dist/editor/components/GlobalKeybindings.js

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