@remotion/cli 4.0.0-webhook.26 → 4.0.0

package/dist/editor/components/Checkbox.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const Checkmark_1 = require("../icons/Checkmark");
+const size = 20;
+const background = {
+    height: size,
+    width: size,
+    position: 'relative',
+};
+const box = {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    position: 'absolute',
+    height: size,
+    width: size,
+    top: 0,
+    left: 0,
+    pointerEvents: 'none',
+    color: 'white',
+};
+const Checkbox = ({ checked, onChange, disabled, name }) => {
+    const input = (0, react_1.useMemo)(() => {
+        return {
+            appearance: 'none',
+            background: disabled ? 'transparent' : colors_1.INPUT_BACKGROUND,
+            border: '1px solid ' + colors_1.INPUT_BORDER_COLOR_UNHOVERED,
+            height: size,
+            width: size,
+            top: 0,
+            left: 0,
+            position: 'absolute',
+            margin: 0,
+        };
+    }, [disabled]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: background, children: [(0, jsx_runtime_1.jsx)("input", { style: input, type: 'checkbox', checked: checked, onChange: onChange, disabled: disabled, name: name }), (0, jsx_runtime_1.jsx)("div", { style: box, children: checked ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null })] }));
+};
+exports.Checkbox = Checkbox;

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

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

package/dist/editor/components/CheckerboardProvider.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CheckerboardProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const checkerboard_1 = require("../state/checkerboard");
+const CheckerboardProvider = ({ children }) => {
+    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 checkerboardCtx = (0, react_1.useMemo)(() => {
+        return {
+            checkerboard,
+            setCheckerboard,
+        };
+    }, [checkerboard, setCheckerboard]);
+    return ((0, jsx_runtime_1.jsx)(checkerboard_1.CheckerboardContext.Provider, { value: checkerboardCtx, children: children }));
+};
+exports.CheckerboardProvider = CheckerboardProvider;

package/dist/editor/components/CompositionSelector.js

@@ -12,7 +12,6 @@ const CompositionSelectorItem_1 = require("./CompositionSelectorItem");
 const CurrentComposition_1 = require("./CurrentComposition");
 const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
 const container = {
-    borderRight: '1px solid black',
     position: 'absolute',
     height: '100%',
     width: '100%',
@@ -20,8 +19,7 @@ const container = {
     backgroundColor: colors_1.BACKGROUND,
 };
 const list = {
-    padding: 5,
-    height: 'calc(100% - 100px)',
+    height: 'calc(100% - 80px)',
     overflowY: 'auto',
 };
 const getKeysToExpand = (initialFolderName, parentFolderName, initial = []) => {
@@ -54,7 +52,7 @@ const CompositionSelector = () => {
     const items = (0, react_1.useMemo)(() => {
         return (0, create_folder_tree_1.createFolderTree)(compositions, folders, foldersExpanded);
     }, [compositions, folders, foldersExpanded]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(CurrentComposition_1.CurrentComposition, {}), (0, jsx_runtime_1.jsx)("div", { style: list, children: items.map((c) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(CurrentComposition_1.CurrentComposition, {}), (0, jsx_runtime_1.jsx)("div", { className: "__remotion-vertical-scrollbar", style: list, children: items.map((c) => {
                     return ((0, jsx_runtime_1.jsx)(CompositionSelectorItem_1.CompositionSelectorItem, { level: 0, currentComposition: currentComposition, selectComposition: selectComposition, toggleFolder: toggleFolder, tabIndex: tabIndex, item: c }, c.key + c.type));
                 }) })] }));
 };

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import type { TComposition } from 'remotion';
-export declare type CompositionSelectorItemType = {
+import type { AnyComposition } from 'remotion';
+export type CompositionSelectorItemType = {
     key: string;
     type: 'composition';
-    composition: TComposition<unknown>;
+    composition: AnyComposition;
 } | {
     key: string;
     type: 'folder';
@@ -16,7 +16,7 @@ export declare const CompositionSelectorItem: React.FC<{
     item: CompositionSelectorItemType;
     currentComposition: string | null;
     tabIndex: number;
-    selectComposition: (c: TComposition, push: boolean) => void;
+    selectComposition: (c: AnyComposition, push: boolean) => void;
     toggleFolder: (folderName: string, parentName: string | null) => void;
     level: number;
 }>;

package/dist/editor/components/CompositionSelectorItem.js

@@ -5,12 +5,14 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const is_composition_still_1 = require("../helpers/is-composition-still");
-const film_1 = require("../icons/film");
 const folder_1 = require("../icons/folder");
 const still_1 = require("../icons/still");
+const video_1 = require("../icons/video");
 const layout_1 = require("./layout");
+const SidebarRenderButton_1 = require("./SidebarRenderButton");
+const COMPOSITION_ITEM_HEIGHT = 32;
 const itemStyle = {
-    paddingRight: 8,
+    paddingRight: 10,
     paddingTop: 6,
     paddingBottom: 6,
     fontSize: 13,
@@ -24,10 +26,21 @@ const itemStyle = {
     width: '100%',
     textAlign: 'left',
     backgroundColor: colors_1.BACKGROUND,
+    height: COMPOSITION_ITEM_HEIGHT,
+};
+const labelStyle = {
+    textAlign: 'left',
+    textDecoration: 'none',
+    fontSize: 13,
+    flex: 1,
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
 };
 const iconStyle = {
     width: 18,
     height: 18,
+    flexShrink: 0,
 };
 const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, selectComposition, toggleFolder, }) => {
     const selected = (0, react_1.useMemo)(() => {
@@ -53,10 +66,15 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
                 : selected
                     ? colors_1.SELECTED_BACKGROUND
                     : 'transparent',
-            color: selected || hovered ? 'white' : colors_1.LIGHT_TEXT,
-            paddingLeft: 8 + level * 8,
+            paddingLeft: 12 + level * 8,
         };
     }, [hovered, level, selected]);
+    const label = (0, react_1.useMemo)(() => {
+        return {
+            ...labelStyle,
+            color: selected || hovered ? 'white' : colors_1.LIGHT_TEXT,
+        };
+    }, [hovered, selected]);
     const onClick = (0, react_1.useCallback)((evt) => {
         evt.preventDefault();
         if (item.type === 'composition') {
@@ -67,12 +85,12 @@ const CompositionSelectorItem = ({ item, level, currentComposition, tabIndex, se
         }
     }, [item, selectComposition, toggleFolder]);
     if (item.type === 'folder') {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, type: "button", children: [item.expanded ? ((0, jsx_runtime_1.jsx)(folder_1.ExpandedFolderIcon, { style: iconStyle })) : ((0, jsx_runtime_1.jsx)(folder_1.CollapsedFolderIcon, { style: iconStyle })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), item.folderName] }), item.expanded
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, type: "button", title: item.folderName, children: [item.expanded ? ((0, jsx_runtime_1.jsx)(folder_1.ExpandedFolderIcon, { style: iconStyle, color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT })) : ((0, jsx_runtime_1.jsx)(folder_1.CollapsedFolderIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: item.folderName })] }), item.expanded
                     ? item.items.map((childItem) => {
                         return ((0, jsx_runtime_1.jsx)(exports.CompositionSelectorItem, { currentComposition: currentComposition, selectComposition: selectComposition, item: childItem, tabIndex: tabIndex, level: level + 1, toggleFolder: toggleFolder }, childItem.key + childItem.type));
                     })
                     : null] }));
     }
-    return ((0, jsx_runtime_1.jsxs)("button", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, type: "button", children: [(0, is_composition_still_1.isCompositionStill)(item.composition) ? ((0, jsx_runtime_1.jsx)(still_1.StillIcon, { style: iconStyle })) : ((0, jsx_runtime_1.jsx)(film_1.FilmIcon, { style: iconStyle })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), item.composition.id] }));
+    return ((0, jsx_runtime_1.jsx)(layout_1.Row, { align: "center", children: (0, jsx_runtime_1.jsxs)("button", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, tabIndex: tabIndex, onClick: onClick, type: "button", title: item.composition.id, children: [(0, is_composition_still_1.isCompositionStill)(item.composition) ? ((0, jsx_runtime_1.jsx)(still_1.StillIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })) : ((0, jsx_runtime_1.jsx)(video_1.FilmIcon, { color: hovered || selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: item.composition.id }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(SidebarRenderButton_1.SidebarRenderButton, { visible: hovered, composition: item.composition }) })] }) }));
 };
 exports.CompositionSelectorItem = CompositionSelectorItem;

package/dist/editor/components/CurrentComposition.js

@@ -2,19 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CurrentComposition = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const is_composition_still_1 = require("../helpers/is-composition-still");
 const render_frame_1 = require("../state/render-frame");
-const rich_timeline_1 = require("../state/rich-timeline");
-const layout_1 = require("./layout");
-const Thumbnail_1 = require("./Thumbnail");
 const container = {
-    minHeight: 100,
+    height: 80,
     display: 'block',
-    borderBottom: '1px solid black',
-    padding: 16,
+    borderBottom: `1px solid ${colors_1.BORDER_COLOR}`,
+    padding: 12,
     color: 'white',
     backgroundColor: colors_1.BACKGROUND,
 };
@@ -38,22 +34,11 @@ const row = {
     lineHeight: '18px',
     backgroundColor: colors_1.BACKGROUND,
 };
-const targetHeight = 60;
-const targetWidth = (targetHeight * 16) / 9;
 const CurrentComposition = () => {
-    const richTimelineContext = (0, react_1.useContext)(rich_timeline_1.RichTimelineContext);
     const video = remotion_1.Internals.useVideo();
-    (0, react_1.useEffect)(() => {
-        if (!video) {
-            document.title = 'Remotion Preview';
-            return;
-        }
-        document.title = `${video.id} / ${window.remotion_projectName} - Remotion Preview`;
-    }, [video]);
     if (!video) {
         return (0, jsx_runtime_1.jsx)("div", { style: container });
     }
-    const frameToDisplay = Math.floor(video.durationInFrames / 2);
-    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsxs)("div", { style: row, children: [richTimelineContext.richTimeline ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Thumbnail_1.Thumbnail, { composition: video, targetHeight: targetHeight, targetWidth: targetWidth, frameToDisplay: frameToDisplay }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 })] })) : null, (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: video.id }), (0, jsx_runtime_1.jsxs)("div", { style: subtitle, children: [video.width, "x", video.height, (0, is_composition_still_1.isCompositionStill)(video) ? null : `, ${video.fps} FPS`] }), (0, is_composition_still_1.isCompositionStill)(video) ? ((0, jsx_runtime_1.jsx)("div", { style: subtitle, children: "Still" })) : ((0, jsx_runtime_1.jsxs)("div", { style: subtitle, children: ["Duration ", (0, render_frame_1.renderFrame)(video.durationInFrames, video.fps)] }))] })] }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)("div", { style: row, children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: video.id }), (0, jsx_runtime_1.jsxs)("div", { style: subtitle, children: [video.width, "x", video.height, (0, is_composition_still_1.isCompositionStill)(video) ? null : `, ${video.fps} FPS`] }), (0, is_composition_still_1.isCompositionStill)(video) ? ((0, jsx_runtime_1.jsx)("div", { style: subtitle, children: "Still" })) : ((0, jsx_runtime_1.jsxs)("div", { style: subtitle, children: ["Duration ", (0, render_frame_1.renderFrame)(video.durationInFrames, video.fps)] }))] }) }) }));
 };
 exports.CurrentComposition = CurrentComposition;

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

@@ -0,0 +1,3 @@
+import type React from 'react';
+export declare const TitleUpdater: React.FC;
+export declare const CurrentCompositionKeybindings: React.FC;

package/dist/editor/components/CurrentCompositionSideEffects.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CurrentCompositionKeybindings = exports.TitleUpdater = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const client_id_1 = require("../helpers/client-id");
+const use_keybinding_1 = require("../helpers/use-keybinding");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const TitleUpdater = () => {
+    const video = remotion_1.Internals.useVideo();
+    (0, react_1.useEffect)(() => {
+        if (!video) {
+            document.title = 'Remotion Studio';
+            return;
+        }
+        document.title = `${video.id} / ${window.remotion_projectName} - Remotion Studio`;
+    }, [video]);
+    return null;
+};
+exports.TitleUpdater = TitleUpdater;
+const CurrentCompositionKeybindings = () => {
+    const keybindings = (0, use_keybinding_1.useKeybinding)();
+    const video = remotion_1.Internals.useVideo();
+    const { type } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
+    const openRenderModal = (0, react_1.useCallback)(() => {
+        if (!video) {
+            return;
+        }
+        if (type !== 'connected') {
+            (0, NotificationCenter_1.sendErrorNotification)('Studio server is offline');
+            return;
+        }
+        const renderButton = document.getElementById('render-modal-button');
+        renderButton.click();
+    }, [type, video]);
+    (0, react_1.useEffect)(() => {
+        const binding = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'r',
+            commandCtrlKey: false,
+            callback: openRenderModal,
+            preventDefault: true,
+            triggerIfInputFieldFocused: false,
+        });
+        return () => {
+            binding.unregister();
+        };
+    }, [keybindings, openRenderModal]);
+    return null;
+};
+exports.CurrentCompositionKeybindings = CurrentCompositionKeybindings;

package/dist/editor/components/Editor.js

@@ -1,7 +1,4 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Editor = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
@@ -9,18 +6,13 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const colors_1 = require("../helpers/colors");
 const noop_1 = require("../helpers/noop");
-const modals_1 = require("../state/modals");
 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 Modals_1 = require("./Modals");
 const NoRegisterRoot_1 = require("./NoRegisterRoot");
 const NotificationCenter_1 = require("./Notifications/NotificationCenter");
-const UpdateModal_1 = require("./UpdateModal/UpdateModal");
-const ZoomPersistor_1 = require("./ZoomPersistor");
 const background = {
     backgroundColor: colors_1.BACKGROUND,
     display: 'flex',
@@ -31,7 +23,6 @@ const background = {
 };
 const Editor = () => {
     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;
@@ -48,6 +39,6 @@ const Editor = () => {
         });
         return () => cleanup();
     }, [Root, waitForRoot]);
-    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 === '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.jsx)(z_index_1.HigherZIndex, { onEscape: noop_1.noop, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsxs)(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: [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, {})] }), (0, jsx_runtime_1.jsx)(Modals_1.Modals, {})] }) }));
 };
 exports.Editor = Editor;

package/dist/editor/components/EditorContent.js

@@ -14,6 +14,6 @@ const EditorContent = () => {
     if (isStill) {
         return (0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, {});
     }
-    return ((0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, {}) }), (0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: false, onCollapse: noop }), (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(Timeline_1.Timeline, {}) })] }));
+    return ((0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { orientation: "horizontal", id: "top-to-bottom", maxFlex: 0.9, minFlex: 0.2, defaultFlex: 0.75, children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)(TopPanel_1.TopPanel, {}) }), (0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { allowToCollapse: "none", onCollapse: noop }), (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsx)(Timeline_1.Timeline, {}) })] }));
 };
 exports.EditorContent = EditorContent;

package/dist/editor/components/EditorContexts.js

@@ -2,82 +2,21 @@
 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 client_id_1 = require("../helpers/client-id");
 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 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 }) => {
-    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 [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 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)(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 }) }) }) }) }) }) }) }) }) }) }) }) }));
+    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/FramePersistor.d.ts

@@ -1,5 +1,3 @@
 import type React from 'react';
 export declare const getCurrentCompositionFromUrl: () => string;
-export declare const persistCurrentFrame: (frame: number) => void;
-export declare const getFrameForComposition: (composition: string) => number;
 export declare const FramePersistor: React.FC;

package/dist/editor/components/FramePersistor.js

@@ -1,41 +1,21 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FramePersistor = exports.getFrameForComposition = exports.persistCurrentFrame = exports.getCurrentCompositionFromUrl = void 0;
+exports.FramePersistor = exports.getCurrentCompositionFromUrl = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const getCurrentCompositionFromUrl = () => {
     return window.location.pathname.substr(1);
 };
 exports.getCurrentCompositionFromUrl = getCurrentCompositionFromUrl;
-const makeKey = (composition) => {
-    return `remotion.time.${composition}`;
-};
-const persistCurrentFrame = (frame) => {
-    const currentComposition = (0, exports.getCurrentCompositionFromUrl)();
-    if (!currentComposition) {
-        return;
-    }
-    localStorage.setItem(makeKey(currentComposition), String(frame));
-};
-exports.persistCurrentFrame = persistCurrentFrame;
-const getFrameForComposition = (composition) => {
-    const frame = localStorage.getItem(makeKey(composition));
-    return frame ? Number(frame) : 0;
-};
-exports.getFrameForComposition = getFrameForComposition;
 const FramePersistor = () => {
     const [playing] = remotion_1.Internals.Timeline.usePlayingState();
+    const config = (0, remotion_1.useVideoConfig)();
     const frame = remotion_1.Internals.Timeline.useTimelinePosition();
-    const { currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const isActive = currentComposition === (0, exports.getCurrentCompositionFromUrl)();
     (0, react_1.useEffect)(() => {
-        if (!isActive) {
-            return;
-        }
         if (!playing) {
-            (0, exports.persistCurrentFrame)(frame);
+            remotion_1.Internals.persistCurrentFrame(frame, config.id);
         }
-    }, [frame, isActive, playing]);
+    }, [config.id, frame, playing]);
     return null;
 };
 exports.FramePersistor = FramePersistor;

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

@@ -4,37 +4,16 @@ exports.InitialCompositionLoader = exports.useSelectComposition = void 0;
 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);
+    const { setCurrentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     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) => {