@remotion/cli 3.0.12 → 3.0.16

package/dist/compositions.js

@@ -27,13 +27,13 @@ const max = (arr) => {
 const listCompositionsCommand = async () => {
     const file = parse_command_line_1.parsedCli._[1];
     if (!file) {
-        log_1.Log.error('The compositions command requires you to specify a root file. For example');
+        log_1.Log.error('The `compositions` command requires you to specify a root file. For example');
         log_1.Log.error('  npx remotion compositions src/index.tsx');
         log_1.Log.error('See https://www.remotion.dev/docs/register-root for more information.');
         process.exit(1);
     }
     const fullPath = path_1.default.join(process.cwd(), file);
-    (0, get_config_file_name_1.loadConfig)();
+    await (0, get_config_file_name_1.loadConfig)();
     const { browserExecutable, ffmpegExecutable, chromiumOptions, envVariables, inputProps, puppeteerTimeout, port, } = await (0, get_cli_options_1.getCliOptions)({ isLambda: false, type: 'get-compositions' });
     const bundled = await (0, setup_cache_1.bundleOnCli)(fullPath, ['bundling']);
     const compositions = await (0, renderer_1.getCompositions)(bundled, {

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const CollapsedCompositionSelector: React.FC<{
+    onExpand: () => void;
+}>;

package/dist/editor/components/CollapsedCompositionSelector.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CollapsedCompositionSelector = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../helpers/colors");
+const caret_1 = require("../icons/caret");
+const z_index_1 = require("../state/z-index");
+const CollapsedCompositionSelector = ({ onExpand }) => {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    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',
+            borderRight: '2px solid black',
+            cursor: 'pointer',
+            color: 'white',
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            paddingLeft: 7,
+            paddingRight: 4,
+            backgroundColor: (0, colors_1.getBackgroundFromHoverState)({
+                hovered,
+                selected: false,
+            }),
+            appearance: 'none',
+            WebkitAppearance: 'none',
+        };
+    }, [hovered]);
+    return ((0, jsx_runtime_1.jsx)("button", { style: style, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, type: "button", role: "button", tabIndex: tabIndex, onClick: onExpand, children: (0, jsx_runtime_1.jsx)(caret_1.CaretRight, {}) }));
+};
+exports.CollapsedCompositionSelector = CollapsedCompositionSelector;

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

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

package/dist/editor/components/CompositionManager.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 CompositionSelector_1 = require("./CompositionSelector");
+const FramePersistor_1 = require("./FramePersistor");
+const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
+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);
+    return (c) => {
+        var _a;
+        (_a = TimelineInOutToggle_1.inOutHandles.current) === null || _a === void 0 ? void 0 : _a.setMarks((0, marks_1.loadMarks)(c.id, c.durationInFrames));
+        window.history.pushState({}, 'Preview', `/${c.id}`);
+        const frame = (0, FramePersistor_1.getFrameForComposition)(c.id);
+        const frameInBounds = Math.min(c.durationInFrames - 1, frame);
+        setCurrentFrame(frameInBounds);
+        setCurrentComposition(c.id);
+        const { folderName, parentFolderName } = c;
+        if (folderName !== null) {
+            setFoldersExpanded((ex) => {
+                const keysToExpand = (0, CompositionSelector_1.getKeysToExpand)(folderName, parentFolderName);
+                const newState = {
+                    ...ex,
+                };
+                for (const key of keysToExpand) {
+                    newState[key] = true;
+                }
+                return newState;
+            });
+        }
+    };
+};
+exports.useSelectComposition = useSelectComposition;
+const InitialCompositionLoader = () => {
+    const { compositions, currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const selectComposition = (0, exports.useSelectComposition)();
+    (0, react_1.useEffect)(() => {
+        if (currentComposition) {
+            return;
+        }
+        const compositionFromUrl = (0, FramePersistor_1.getCurrentCompositionFromUrl)();
+        if (compositionFromUrl) {
+            const exists = compositions.find((c) => c.id === compositionFromUrl);
+            if (exists) {
+                selectComposition(exists);
+                return;
+            }
+        }
+        if (compositions.length > 0) {
+            selectComposition(compositions[0]);
+        }
+    }, [compositions, currentComposition, selectComposition]);
+    return null;
+};
+exports.InitialCompositionLoader = InitialCompositionLoader;

package/dist/editor/components/CompositionSelector.js

@@ -6,12 +6,10 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const create_folder_tree_1 = require("../helpers/create-folder-tree");
 const persist_open_folders_1 = require("../helpers/persist-open-folders");
-const marks_1 = require("../state/marks");
 const z_index_1 = require("../state/z-index");
 const CompositionSelectorItem_1 = require("./CompositionSelectorItem");
 const CurrentComposition_1 = require("./CurrentComposition");
-const FramePersistor_1 = require("./FramePersistor");
-const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
+const InitialCompositionLoader_1 = require("./InitialCompositionLoader");
 const container = {
     borderRight: '1px solid black',
     position: 'absolute',
@@ -34,32 +32,10 @@ const getKeysToExpand = (initialFolderName, parentFolderName, initial = []) => {
 };
 exports.getKeysToExpand = getKeysToExpand;
 const CompositionSelector = () => {
-    const { compositions, setCurrentComposition, currentComposition, folders } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { compositions, currentComposition, folders } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const [foldersExpanded, setFoldersExpanded] = (0, react_1.useState)((0, persist_open_folders_1.loadExpandedFolders)());
     const { tabIndex } = (0, z_index_1.useZIndex)();
-    const setCurrentFrame = remotion_1.Internals.Timeline.useTimelineSetFrame();
-    const selectComposition = (0, react_1.useCallback)((c) => {
-        var _a;
-        (_a = TimelineInOutToggle_1.inOutHandles.current) === null || _a === void 0 ? void 0 : _a.setMarks((0, marks_1.loadMarks)(c.id, c.durationInFrames));
-        window.history.pushState({}, 'Preview', `/${c.id}`);
-        const frame = (0, FramePersistor_1.getFrameForComposition)(c.id);
-        const frameInBounds = Math.min(c.durationInFrames - 1, frame);
-        setCurrentFrame(frameInBounds);
-        setCurrentComposition(c.id);
-        const { folderName, parentFolderName } = c;
-        if (folderName !== null) {
-            setFoldersExpanded((ex) => {
-                const keysToExpand = (0, exports.getKeysToExpand)(folderName, parentFolderName);
-                const newState = {
-                    ...ex,
-                };
-                for (const key of keysToExpand) {
-                    newState[key] = true;
-                }
-                return newState;
-            });
-        }
-    }, [setCurrentComposition, setCurrentFrame]);
+    const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const toggleFolder = (0, react_1.useCallback)((folderName, parentName) => {
         setFoldersExpanded((p) => {
             var _a;
@@ -73,22 +49,6 @@ const CompositionSelector = () => {
             return foldersExpandedState;
         });
     }, []);
-    (0, react_1.useEffect)(() => {
-        if (currentComposition) {
-            return;
-        }
-        const compositionFromUrl = (0, FramePersistor_1.getCurrentCompositionFromUrl)();
-        if (compositionFromUrl) {
-            const exists = compositions.find((c) => c.id === compositionFromUrl);
-            if (exists) {
-                selectComposition(exists);
-                return;
-            }
-        }
-        if (compositions.length > 0) {
-            selectComposition(compositions[0]);
-        }
-    }, [compositions, currentComposition, selectComposition]);
     const items = (0, react_1.useMemo)(() => {
         return (0, create_folder_tree_1.createFolderTree)(compositions, folders, foldersExpanded);
     }, [compositions, folders, foldersExpanded]);

package/dist/editor/components/Editor.js

@@ -11,12 +11,14 @@ 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 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 z_index_1 = require("../state/z-index");
 const EditorContent_1 = require("./EditorContent");
 const FramePersistor_1 = require("./FramePersistor");
@@ -113,9 +115,9 @@ const Editor = () => {
     if (!Root) {
         throw new Error('Root has not been registered. ');
     }
-    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)(remotion_1.Internals.Timeline.TimelineInOutContext.Provider, { value: timelineInOutContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.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)(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: [(0, jsx_runtime_1.jsx)(Root, {}), (0, jsx_runtime_1.jsx)(FramePersistor_1.FramePersistor, {}), (0, jsx_runtime_1.jsx)(EditorContent_1.EditorContent, {}), (0, jsx_runtime_1.jsx)(GlobalKeybindings_1.GlobalKeybindings, {})] }), 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)(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)(remotion_1.Internals.Timeline.TimelineInOutContext.Provider, { value: timelineInOutContextValue, children: (0, jsx_runtime_1.jsx)(remotion_1.Internals.Timeline.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: [(0, jsx_runtime_1.jsx)(Root, {}), (0, jsx_runtime_1.jsx)(FramePersistor_1.FramePersistor, {}), (0, jsx_runtime_1.jsx)(EditorContent_1.EditorContent, {}), (0, jsx_runtime_1.jsx)(GlobalKeybindings_1.GlobalKeybindings, {})] }), 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, {}))] }) }) }) }) }) }) }) }) }) }) }) }) }) }));
 };
 exports.Editor = Editor;

package/dist/editor/components/EditorContent.js

@@ -8,11 +8,12 @@ const SplitterElement_1 = require("./Splitter/SplitterElement");
 const SplitterHandle_1 = require("./Splitter/SplitterHandle");
 const Timeline_1 = require("./Timeline/Timeline");
 const TopPanel_1 = require("./TopPanel");
+const noop = () => undefined;
 const EditorContent = () => {
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     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, {}), (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: false, 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/InitialCompositionLoader.d.ts

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

package/dist/editor/components/InitialCompositionLoader.js

@@ -0,0 +1,60 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 CompositionSelector_1 = require("./CompositionSelector");
+const FramePersistor_1 = require("./FramePersistor");
+const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
+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);
+    return (c) => {
+        var _a;
+        (_a = TimelineInOutToggle_1.inOutHandles.current) === null || _a === void 0 ? void 0 : _a.setMarks((0, marks_1.loadMarks)(c.id, c.durationInFrames));
+        window.history.pushState({}, 'Preview', `/${c.id}`);
+        const frame = (0, FramePersistor_1.getFrameForComposition)(c.id);
+        const frameInBounds = Math.min(c.durationInFrames - 1, frame);
+        setCurrentFrame(frameInBounds);
+        setCurrentComposition(c.id);
+        const { folderName, parentFolderName } = c;
+        if (folderName !== null) {
+            setFoldersExpanded((ex) => {
+                const keysToExpand = (0, CompositionSelector_1.getKeysToExpand)(folderName, parentFolderName);
+                const newState = {
+                    ...ex,
+                };
+                for (const key of keysToExpand) {
+                    newState[key] = true;
+                }
+                return newState;
+            });
+        }
+    };
+};
+exports.useSelectComposition = useSelectComposition;
+const InitialCompositionLoader = () => {
+    const { compositions, currentComposition } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const selectComposition = (0, exports.useSelectComposition)();
+    (0, react_1.useEffect)(() => {
+        if (currentComposition) {
+            return;
+        }
+        const compositionFromUrl = (0, FramePersistor_1.getCurrentCompositionFromUrl)();
+        if (compositionFromUrl) {
+            const exists = compositions.find((c) => c.id === compositionFromUrl);
+            if (exists) {
+                selectComposition(exists);
+                return;
+            }
+        }
+        if (compositions.length > 0) {
+            selectComposition(compositions[0]);
+        }
+    }, [compositions, currentComposition, selectComposition]);
+    return null;
+};
+exports.InitialCompositionLoader = InitialCompositionLoader;

package/dist/editor/components/KeyboardShortcutsModal.js

@@ -48,6 +48,6 @@ const KeyboardShortcuts = () => {
     const onQuit = (0, react_1.useCallback)(() => {
         setSelectedModal(null);
     }, [setSelectedModal]);
-    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onEscape: onQuit, onOutsideClick: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "Keyboard shortcuts" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { style: container, children: [(0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second back" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}) }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Previous frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Space" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Pause" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}) }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Next frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second forward" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "J" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Reverse playback" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "K" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Pause" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "L" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Speed up" })] })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 8 }), (0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Navigation" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "N" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "New composition" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "T" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle checkerboard transparency" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "?" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Show keyboard shortcuts" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback range" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "I" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set In Point" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "O" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set Out Point" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "X" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Clear In/Out Points" })] })] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onEscape: onQuit, onOutsideClick: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "Keyboard shortcuts" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { style: container, children: [(0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second back" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowLeft, {}) }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Previous frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Space" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Pause" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}) }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Next frame" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ShiftIcon, {}) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.3 }), (0, jsx_runtime_1.jsx)("kbd", { style: key, children: (0, jsx_runtime_1.jsx)(keys_1.ArrowRight, {}) })] }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "1 second forward" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "A" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Jump to beginning" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "E" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Jump to end" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "J" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Reverse playback" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "K" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Pause" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "L" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Play / Speed up" })] })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 8 }), (0, jsx_runtime_1.jsxs)(layout_1.Column, { children: [(0, jsx_runtime_1.jsx)("div", { style: title, children: "Navigation" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "N" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "New composition" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "T" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Toggle checkerboard transparency" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "?" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Show keyboard shortcuts" })] }), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", { style: title, children: "Playback range" }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "I" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set In Point" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "O" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Set Out Point" })] }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: shortLeft, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "X" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Clear In/Out Points" })] })] })] })] }));
 };
 exports.KeyboardShortcuts = KeyboardShortcuts;

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

@@ -84,7 +84,7 @@ const MenuSubItem = ({ label, leaveLeftSpace, leftItem, onActionChosen, id, sele
         }, 100);
         return () => clearTimeout(hi);
     }, [hovered, selected, setSubMenuActivated, subMenu]);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: style, onClick: onClick, children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { children: [leaveLeftSpace ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: leftSpace, children: leftItem }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 })] })) : null, (0, jsx_runtime_1.jsx)("div", { style: labelStyle, children: label }), " ", (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), subMenu ? (0, jsx_runtime_1.jsx)(caret_1.Caret, {}) : null, keyHint ? (0, jsx_runtime_1.jsx)("span", { style: keyHintCss, children: keyHint }) : null, portalStyle && subMenu
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: style, onClick: onClick, children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { children: [leaveLeftSpace ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: leftSpace, children: leftItem }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 })] })) : null, (0, jsx_runtime_1.jsx)("div", { style: labelStyle, children: label }), " ", (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), subMenu ? (0, jsx_runtime_1.jsx)(caret_1.CaretRight, {}) : null, keyHint ? (0, jsx_runtime_1.jsx)("span", { style: keyHintCss, children: keyHint }) : null, portalStyle && subMenu
                     ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)(SubMenu_1.SubMenuComponent, { onQuitFullMenu: onQuitMenu, subMenu: subMenu, onQuitSubMenu: onQuitSubmenu, portalStyle: portalStyle, subMenuActivated: subMenuActivated }), (0, portals_1.getPortal)(currentZIndex))
                     : null] }) }));
 };

package/dist/editor/components/MenuToolbar.js

@@ -8,6 +8,7 @@ const checkerboard_1 = require("../state/checkerboard");
 const modals_1 = require("../state/modals");
 const preview_size_1 = require("../state/preview-size");
 const rich_timeline_1 = require("../state/rich-timeline");
+const sidebar_1 = require("../state/sidebar");
 const timeline_ref_1 = require("../state/timeline-ref");
 const layout_1 = require("./layout");
 const MenuItem_1 = require("./Menu/MenuItem");
@@ -44,6 +45,7 @@ const MenuToolbar = () => {
     const { checkerboard, setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
     const { richTimeline, setRichTimeline } = (0, react_1.useContext)(rich_timeline_1.RichTimelineContext);
     const { size, setSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
+    const { setSidebarCollapsedState, sidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const itemClicked = (0, react_1.useCallback)((itemId) => {
         setSelected(itemId);
     }, [setSelected]);
@@ -173,6 +175,65 @@ const MenuToolbar = () => {
                             })),
                         },
                     },
+                    {
+                        id: 'timeline-divider',
+                        type: 'divider',
+                    },
+                    {
+                        id: 'left-sidebar',
+                        label: 'Sidebar',
+                        keyHint: null,
+                        type: 'item',
+                        value: 'preview-size',
+                        leftItem: null,
+                        subMenu: {
+                            leaveLeftSpace: true,
+                            preselectIndex: 0,
+                            items: [
+                                {
+                                    id: 'sidebar-responsive',
+                                    keyHint: null,
+                                    label: 'Responsive',
+                                    leftItem: sidebarCollapsedState === 'responsive' ? ((0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {})) : null,
+                                    onClick: () => {
+                                        setSidebarCollapsedState('responsive');
+                                    },
+                                    subMenu: null,
+                                    type: 'item',
+                                    value: 'responsive',
+                                },
+                                {
+                                    id: 'sidebar-expanded',
+                                    keyHint: null,
+                                    label: 'Expanded',
+                                    leftItem: sidebarCollapsedState === 'expanded' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                                    onClick: () => {
+                                        setSidebarCollapsedState('expanded');
+                                    },
+                                    subMenu: null,
+                                    type: 'item',
+                                    value: 'expanded',
+                                },
+                                {
+                                    id: 'sidebar-collapsed',
+                                    keyHint: null,
+                                    label: 'Collapsed',
+                                    leftItem: sidebarCollapsedState === 'collapsed' ? ((0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {})) : null,
+                                    onClick: () => {
+                                        setSidebarCollapsedState('collapsed');
+                                    },
+                                    subMenu: null,
+                                    type: 'item',
+                                    value: 'collapsed',
+                                },
+                            ],
+                        },
+                        onClick: () => undefined,
+                    },
+                    {
+                        id: 'timeline-divider',
+                        type: 'divider',
+                    },
                     {
                         id: 'checkerboard',
                         keyHint: 'T',
@@ -391,7 +452,9 @@ const MenuToolbar = () => {
         setCheckerboard,
         setRichTimeline,
         setSelectedModal,
+        setSidebarCollapsedState,
         setSize,
+        sidebarCollapsedState,
         size,
     ]);
     const menus = (0, react_1.useMemo)(() => {

package/dist/editor/components/PlayPause.js

@@ -7,6 +7,7 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
 const use_keybinding_1 = require("../helpers/use-keybinding");
+const jump_to_start_1 = require("../icons/jump-to-start");
 const pause_1 = require("../icons/pause");
 const play_1 = require("../icons/play");
 const step_back_1 = require("../icons/step-back");
@@ -14,7 +15,6 @@ const step_forward_1 = require("../icons/step-forward");
 const ControlButton_1 = require("./ControlButton");
 const forwardBackStyle = {
     height: 16,
-    width: 16,
     color: 'white',
 };
 const PlayPause = ({ playbackRate, loop }) => {
@@ -25,7 +25,7 @@ const PlayPause = ({ playbackRate, loop }) => {
         loop,
         playbackRate,
     });
-    const { playing, play, pause, frameBack, frameForward, isLastFrame } = player_1.PlayerInternals.usePlayer();
+    const { playing, play, pause, frameBack, seek, frameForward, isLastFrame } = player_1.PlayerInternals.usePlayer();
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     (0, react_1.useEffect)(() => {
         if (isStill) {
@@ -46,37 +46,66 @@ const PlayPause = ({ playbackRate, loop }) => {
         if (!videoFps) {
             return null;
         }
-        frameBack(e.shiftKey ? videoFps : 1);
         e.preventDefault();
-    }, [frameBack, videoFps]);
+        if (e.altKey) {
+            seek(0);
+        }
+        else if (e.shiftKey) {
+            frameBack(videoFps);
+        }
+        else {
+            frameBack(1);
+        }
+    }, [frameBack, seek, videoFps]);
     const onArrowRight = (0, react_1.useCallback)((e) => {
-        if (!videoFps) {
+        if (!video) {
             return null;
         }
-        frameForward(e.shiftKey ? videoFps : 1);
+        if (e.altKey) {
+            seek(video.durationInFrames - 1);
+        }
+        else if (e.shiftKey) {
+            frameForward(video.fps);
+        }
+        else {
+            frameForward(1);
+        }
         e.preventDefault();
-    }, [frameForward, videoFps]);
+    }, [frameForward, seek, video]);
     const oneFrameBack = (0, react_1.useCallback)(() => {
         frameBack(1);
     }, [frameBack]);
     const oneFrameForward = (0, react_1.useCallback)(() => {
         frameForward(1);
     }, [frameForward]);
+    const jumpToStart = (0, react_1.useCallback)(() => {
+        seek(0);
+    }, [seek]);
+    const jumpToEnd = (0, react_1.useCallback)(() => {
+        if (!video) {
+            return;
+        }
+        seek(video.durationInFrames - 1);
+    }, [seek, video]);
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     (0, react_1.useEffect)(() => {
         const arrowLeft = keybindings.registerKeybinding('keydown', 'ArrowLeft', onArrowLeft);
         const arrowRight = keybindings.registerKeybinding('keydown', 'ArrowRight', onArrowRight);
         const space = keybindings.registerKeybinding('keydown', ' ', onSpace);
+        const a = keybindings.registerKeybinding('keydown', 'a', jumpToStart);
+        const e = keybindings.registerKeybinding('keydown', 'e', jumpToEnd);
         return () => {
             arrowLeft.unregister();
             arrowRight.unregister();
             space.unregister();
+            a.unregister();
+            e.unregister();
         };
-    }, [keybindings, onArrowLeft, onArrowRight, onSpace]);
+    }, [jumpToEnd, jumpToStart, keybindings, onArrowLeft, onArrowRight, onSpace]);
     if (isStill) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": "Step back one frame", title: "Step back one frame", disabled: frame === 0, onClick: oneFrameBack, children: (0, jsx_runtime_1.jsx)(step_back_1.StepBack, { style: forwardBackStyle }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": playing ? 'Pause' : 'Play', title: playing ? 'Pause' : 'Play', disabled: !video, onClick: playing ? pause : play, children: playing ? ((0, jsx_runtime_1.jsx)(pause_1.Pause, { style: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": "Jump to beginning", title: "Jump to beginning", disabled: frame === 0, onClick: jumpToStart, children: (0, jsx_runtime_1.jsx)(jump_to_start_1.JumpToStart, { style: forwardBackStyle }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": "Step back one frame", title: "Step back one frame", disabled: frame === 0, onClick: oneFrameBack, children: (0, jsx_runtime_1.jsx)(step_back_1.StepBack, { style: forwardBackStyle }) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": playing ? 'Pause' : 'Play', title: playing ? 'Pause' : 'Play', disabled: !video, onClick: playing ? pause : play, children: playing ? ((0, jsx_runtime_1.jsx)(pause_1.Pause, { style: {
                         height: 14,
                         width: 14,
                         color: 'white',

package/dist/editor/components/Splitter/SplitterElement.js

@@ -8,7 +8,9 @@ const SplitterElement = ({ children, type }) => {
     const context = (0, react_1.useContext)(SplitterContext_1.SplitterContext);
     const style = (0, react_1.useMemo)(() => {
         return {
-            flex: type === 'flexer' ? context.flexValue : 1 - context.flexValue,
+            flex: 
+            // Multiply by 1000 because if flex values don't add up to at least 1, they will not fill up the screen
+            (type === 'flexer' ? context.flexValue : 1 - context.flexValue) * 1000,
             display: 'flex',
             position: 'relative',
         };

package/dist/editor/components/Splitter/SplitterHandle.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
 export declare const SPLITTER_HANDLE_SIZE = 3;
-export declare const SplitterHandle: React.FC;
+export declare const SplitterHandle: React.FC<{
+    allowToCollapse: boolean;
+    onCollapse: () => void;
+}>;