@remotion/cli 4.0.0-alpha4 → 4.0.0-alpha6

package/dist/download-progress.js

@@ -2,13 +2,15 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.makeMultiDownloadProgress = exports.getFileSizeDownloadBar = void 0;
 const format_bytes_1 = require("./format-bytes");
+const log_1 = require("./log");
 const make_progress_bar_1 = require("./make-progress-bar");
+const truthy_1 = require("./truthy");
 const getFileSizeDownloadBar = (downloaded) => {
     const desiredLength = (0, make_progress_bar_1.makeProgressBar)(0).length;
     return `[${(0, format_bytes_1.formatBytes)(downloaded).padEnd(desiredLength - 2, ' ')}]`;
 };
 exports.getFileSizeDownloadBar = getFileSizeDownloadBar;
-const makeMultiDownloadProgress = (progresses) => {
+const makeMultiDownloadProgress = (progresses, indent) => {
     if (progresses.length === 0) {
         return null;
     }
@@ -18,21 +20,28 @@ const makeMultiDownloadProgress = (progresses) => {
             ? progress.name.substring(0, 57) + '...'
             : progress.name;
         return [
+            indent ? log_1.INDENT_TOKEN : null,
             `    +`,
             progress.progress
                 ? (0, make_progress_bar_1.makeProgressBar)(progress.progress)
                 : (0, exports.getFileSizeDownloadBar)(progress.downloaded),
             `Downloading ${truncatedFileName}`,
-        ].join(' ');
+        ]
+            .filter(truthy_1.truthy)
+            .join(' ');
     }
     const everyFileHasContentLength = progresses.every((p) => p.totalBytes !== null);
     return [
+        indent ? log_1.INDENT_TOKEN : null,
+        // TODO: Shifted 1 character to the right in v4
         `    +`,
         everyFileHasContentLength
             ? (0, make_progress_bar_1.makeProgressBar)(progresses.reduce((a, b) => a + b.progress, 0) /
                 progresses.length)
             : (0, exports.getFileSizeDownloadBar)(progresses.reduce((a, b) => a + b.downloaded, 0)),
         `Downloading ${progresses.length} files`,
-    ].join(' ');
+    ]
+        .filter(truthy_1.truthy)
+        .join(' ');
 };
 exports.makeMultiDownloadProgress = makeMultiDownloadProgress;

package/dist/editor/components/Canvas.js

@@ -195,6 +195,7 @@ const Canvas = () => {
             commandCtrlKey: false,
             callback: onReset,
             preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const zoomIn = keybindings.registerKeybinding({
             event: 'keydown',
@@ -202,6 +203,7 @@ const Canvas = () => {
             commandCtrlKey: false,
             callback: onZoomIn,
             preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const zoomOut = keybindings.registerKeybinding({
             event: 'keydown',
@@ -209,6 +211,7 @@ const Canvas = () => {
             commandCtrlKey: false,
             callback: onZoomOut,
             preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         return () => {
             resetBinding.unregister();

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const Checkbox: React.FC<{
+    checked: boolean;
+    onChange: React.ChangeEventHandler<HTMLInputElement>;
+    disabled?: boolean;
+}>;

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 }) => {
+    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 }), (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';
+import type { AnyComposition } from 'remotion';
 export declare 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 Preview';
+            return;
+        }
+        document.title = `${video.id} / ${window.remotion_projectName} - Remotion Preview`;
+    }, [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.PreviewServerConnectionCtx);
+    const openRenderModal = (0, react_1.useCallback)(() => {
+        if (!video) {
+            return;
+        }
+        if (type !== 'connected') {
+            (0, NotificationCenter_1.sendErrorNotification)('Preview 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,17 +6,14 @@ 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 NewComposition_1 = __importDefault(require("./NewComposition/NewComposition"));
+const Modals_1 = require("./Modals");
 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,
@@ -31,7 +25,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,8 +41,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 === '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 }))] }));
+    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: [(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, {})] }), (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,97 +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 editor_zoom_gestures_1 = require("../state/editor-zoom-gestures");
+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 [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 }) }) }) }) }) }) }) }) }) }) }) }) }) }));
+    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

@@ -21,6 +21,7 @@ const GlobalKeybindings = () => {
             },
             commandCtrlKey: false,
             preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const cmdKKey = keybindings.registerKeybinding({
             event: 'keydown',
@@ -32,6 +33,7 @@ const GlobalKeybindings = () => {
                     invocationTimestamp: Date.now(),
                 });
             },
+            triggerIfInputFieldFocused: true,
             commandCtrlKey: true,
             preventDefault: true,
         });
@@ -43,6 +45,7 @@ const GlobalKeybindings = () => {
             },
             commandCtrlKey: true,
             preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const questionMark = keybindings.registerKeybinding({
             event: 'keypress',
@@ -56,6 +59,7 @@ const GlobalKeybindings = () => {
             },
             commandCtrlKey: false,
             preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         return () => {
             nKey.unregister();

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/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<HTMLButtonElement>;
+    disabled?: boolean;
+    renderAction: RenderInlineAction;
+}>;

package/dist/editor/components/InlineAction.js

@@ -0,0 +1,31 @@
+"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: (0, colors_1.getBackgroundFromHoverState)({ hovered, selected: false }),
+            height: 24,
+            width: 24,
+            display: 'inline-flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            borderRadius: 3,
+        };
+    }, [hovered]);
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, onClick: onClick, style: style, tabIndex: tabIndex, disabled: disabled, children: renderAction(hovered ? 'white' : colors_1.LIGHT_TEXT) }));
+};
+exports.InlineAction = InlineAction;