@remotion/cli 3.0.29 → 3.1.0

package/dist/chalk/symbols.d.ts

@@ -0,0 +1,111 @@
+declare const isHyper: boolean;
+declare const isWindows: boolean;
+declare const isLinux: boolean;
+declare const common: {
+    ballotDisabled: string;
+    ballotOff: string;
+    ballotOn: string;
+    bullet: string;
+    bulletWhite: string;
+    fullBlock: string;
+    heart: string;
+    identicalTo: string;
+    line: string;
+    mark: string;
+    middot: string;
+    minus: string;
+    multiplication: string;
+    obelus: string;
+    pencilDownRight: string;
+    pencilRight: string;
+    pencilUpRight: string;
+    percent: string;
+    pilcrow2: string;
+    pilcrow: string;
+    plusMinus: string;
+    question: string;
+    section: string;
+    starsOff: string;
+    starsOn: string;
+    upDownArrow: string;
+};
+declare const windows: {
+    check: string;
+    cross: string;
+    ellipsisLarge: string;
+    ellipsis: string;
+    info: string;
+    questionSmall: string;
+    pointer: string;
+    pointerSmall: string;
+    radioOff: string;
+    radioOn: string;
+    warning: string;
+    ballotDisabled: string;
+    ballotOff: string;
+    ballotOn: string;
+    bullet: string;
+    bulletWhite: string;
+    fullBlock: string;
+    heart: string;
+    identicalTo: string;
+    line: string;
+    mark: string;
+    middot: string;
+    minus: string;
+    multiplication: string;
+    obelus: string;
+    pencilDownRight: string;
+    pencilRight: string;
+    pencilUpRight: string;
+    percent: string;
+    pilcrow2: string;
+    pilcrow: string;
+    plusMinus: string;
+    question: string;
+    section: string;
+    starsOff: string;
+    starsOn: string;
+    upDownArrow: string;
+};
+declare const other: {
+    ballotCross: string;
+    check: string;
+    cross: string;
+    ellipsisLarge: string;
+    ellipsis: string;
+    info: string;
+    questionFull: string;
+    questionSmall: string;
+    pointer: string;
+    pointerSmall: string;
+    radioOff: string;
+    radioOn: string;
+    warning: string;
+    ballotDisabled: string;
+    ballotOff: string;
+    ballotOn: string;
+    bullet: string;
+    bulletWhite: string;
+    fullBlock: string;
+    heart: string;
+    identicalTo: string;
+    line: string;
+    mark: string;
+    middot: string;
+    minus: string;
+    multiplication: string;
+    obelus: string;
+    pencilDownRight: string;
+    pencilRight: string;
+    pencilUpRight: string;
+    percent: string;
+    pilcrow2: string;
+    pilcrow: string;
+    plusMinus: string;
+    question: string;
+    section: string;
+    starsOff: string;
+    starsOn: string;
+    upDownArrow: string;
+};

package/dist/chalk/symbols.js

@@ -0,0 +1,75 @@
+'use strict';
+const isHyper = typeof process !== 'undefined' && process.env.TERM_PROGRAM === 'Hyper';
+const isWindows = typeof process !== 'undefined' && process.platform === 'win32';
+const isLinux = typeof process !== 'undefined' && process.platform === 'linux';
+const common = {
+    ballotDisabled: '☒',
+    ballotOff: '☐',
+    ballotOn: '☑',
+    bullet: '•',
+    bulletWhite: '◦',
+    fullBlock: '█',
+    heart: '❤',
+    identicalTo: '≡',
+    line: '─',
+    mark: '※',
+    middot: '·',
+    minus: '－',
+    multiplication: '×',
+    obelus: '÷',
+    pencilDownRight: '✎',
+    pencilRight: '✏',
+    pencilUpRight: '✐',
+    percent: '%',
+    pilcrow2: '❡',
+    pilcrow: '¶',
+    plusMinus: '±',
+    question: '?',
+    section: '§',
+    starsOff: '☆',
+    starsOn: '★',
+    upDownArrow: '↕',
+};
+const windows = {
+    ...common,
+    check: '√',
+    cross: '×',
+    ellipsisLarge: '...',
+    ellipsis: '...',
+    info: 'i',
+    questionSmall: '?',
+    pointer: '>',
+    pointerSmall: '»',
+    radioOff: '( )',
+    radioOn: '(*)',
+    warning: '‼',
+};
+const other = {
+    ...common,
+    ballotCross: '✘',
+    check: '✔',
+    cross: '✖',
+    ellipsisLarge: '⋯',
+    ellipsis: '…',
+    info: 'ℹ',
+    questionFull: '？',
+    questionSmall: '﹖',
+    pointer: isLinux ? '▸' : '❯',
+    pointerSmall: isLinux ? '‣' : '›',
+    radioOff: '◯',
+    radioOn: '◉',
+    warning: '⚠',
+};
+module.exports = isWindows && !isHyper ? windows : other;
+Reflect.defineProperty(module.exports, 'common', {
+    enumerable: false,
+    value: common,
+});
+Reflect.defineProperty(module.exports, 'windows', {
+    enumerable: false,
+    value: windows,
+});
+Reflect.defineProperty(module.exports, 'other', {
+    enumerable: false,
+    value: other,
+});

package/dist/chalk/utilities.d.ts

@@ -0,0 +1,2 @@
+export declare function stringReplaceAll(string: string, substring: string, replacer: string): string;
+export declare function stringEncaseCRLFWithFirstIndex(string: string, prefix: string, postfix: string, index: number): string;

package/dist/chalk/utilities.js

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.stringEncaseCRLFWithFirstIndex = exports.stringReplaceAll = void 0;
+function stringReplaceAll(string, substring, replacer) {
+    let index = string.indexOf(substring);
+    if (index === -1) {
+        return string;
+    }
+    const substringLength = substring.length;
+    let endIndex = 0;
+    let returnValue = '';
+    do {
+        returnValue += string.slice(endIndex, index) + substring + replacer;
+        endIndex = index + substringLength;
+        index = string.indexOf(substring, endIndex);
+    } while (index !== -1);
+    returnValue += string.slice(endIndex);
+    return returnValue;
+}
+exports.stringReplaceAll = stringReplaceAll;
+function stringEncaseCRLFWithFirstIndex(string, prefix, postfix, index) {
+    let endIndex = 0;
+    let returnValue = '';
+    do {
+        const gotCR = string[index - 1] === '\r';
+        returnValue +=
+            string.slice(endIndex, gotCR ? index - 1 : index) +
+                prefix +
+                (gotCR ? '\r\n' : '\n') +
+                postfix;
+        endIndex = index + 1;
+        index = string.indexOf('\n', endIndex);
+    } while (index !== -1);
+    returnValue += string.slice(endIndex);
+    return returnValue;
+}
+exports.stringEncaseCRLFWithFirstIndex = stringEncaseCRLFWithFirstIndex;

package/dist/compositions.js

@@ -35,7 +35,7 @@ const listCompositionsCommand = async () => {
     const fullPath = path_1.default.join(process.cwd(), file);
     await (0, get_config_file_name_1.loadConfig)();
     const { browserExecutable, ffmpegExecutable, ffprobeExecutable, 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 bundled = await (0, setup_cache_1.bundleOnCli)({ fullPath, steps: ['bundling'] });
     const compositions = await (0, renderer_1.getCompositions)(bundled, {
         browserExecutable,
         ffmpegExecutable,
@@ -46,12 +46,18 @@ const listCompositionsCommand = async () => {
         timeoutInMilliseconds: puppeteerTimeout,
         port,
     });
-    log_1.Log.info();
-    log_1.Log.info('The following compositions are available:');
-    log_1.Log.info();
+    if (!(0, parse_command_line_1.quietFlagProvided)()) {
+        log_1.Log.info();
+        log_1.Log.info('The following compositions are available:');
+        log_1.Log.info();
+    }
     const firstColumnLength = max(compositions.map(({ id }) => id.length)) + 4;
     const secondColumnLength = 8;
     const thirdColumnLength = 15;
+    if ((0, parse_command_line_1.quietFlagProvided)()) {
+        log_1.Log.info(compositions.map((c) => c.id).join(' '));
+        return;
+    }
     log_1.Log.info(`${'Composition'.padEnd(firstColumnLength, ' ')}${'FPS'.padEnd(secondColumnLength)}${'Dimensions'.padEnd(thirdColumnLength, ' ')}Duration`);
     log_1.Log.info(compositions
         .map((comp) => {

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/CopyButton.js

@@ -32,7 +32,7 @@ const labelStyle = {
 const CopyButton = ({ textToCopy, label, labelWhenCopied }) => {
     const [copied, setCopied] = (0, react_1.useState)(false);
     const onClick = (0, react_1.useCallback)(() => {
-        (0, copy_text_1.copyCmd)(textToCopy);
+        (0, copy_text_1.copyText)(textToCopy);
         setCopied(Date.now());
     }, [textToCopy]);
     (0, react_1.useEffect)(() => {

package/dist/editor/components/Editor.js

@@ -26,6 +26,7 @@ const GlobalKeybindings_1 = require("./GlobalKeybindings");
 const KeyboardShortcutsModal_1 = require("./KeyboardShortcutsModal");
 const NewComposition_1 = __importDefault(require("./NewComposition/NewComposition"));
 const NoRegisterRoot_1 = require("./NoRegisterRoot");
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
 const UpdateModal_1 = require("./UpdateModal/UpdateModal");
 const background = {
     backgroundColor: colors_1.BACKGROUND,
@@ -129,7 +130,7 @@ const Editor = () => {
         });
         return () => cleanup();
     }, [Root, waitForRoot]);
-    return ((0, jsx_runtime_1.jsx)(keybindings_1.KeybindingContextProvider, { children: (0, jsx_runtime_1.jsx)(rich_timeline_1.RichTimelineContext.Provider, { value: richTimelineCtx, children: (0, jsx_runtime_1.jsx)(checkerboard_1.CheckerboardContext.Provider, { value: checkerboardCtx, children: (0, jsx_runtime_1.jsx)(preview_size_1.PreviewSizeContext.Provider, { value: previewSizeCtx, children: (0, jsx_runtime_1.jsx)(modals_1.ModalsContext.Provider, { value: modalsContext, children: (0, jsx_runtime_1.jsx)(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: [Root === null ? null : (0, jsx_runtime_1.jsx)(Root, {}), (0, jsx_runtime_1.jsx)(FramePersistor_1.FramePersistor, {}), Root === null ? ((0, jsx_runtime_1.jsx)(NoRegisterRoot_1.NoRegisterRoot, {})) : ((0, jsx_runtime_1.jsx)(EditorContent_1.EditorContent, {})), (0, jsx_runtime_1.jsx)(GlobalKeybindings_1.GlobalKeybindings, {})] }), 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.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: [Root === null ? null : (0, jsx_runtime_1.jsx)(Root, {}), (0, jsx_runtime_1.jsxs)(remotion_1.Internals.CanUseRemotionHooksProvider, { children: [(0, jsx_runtime_1.jsx)(FramePersistor_1.FramePersistor, {}), Root === null ? ((0, jsx_runtime_1.jsx)(NoRegisterRoot_1.NoRegisterRoot, {})) : ((0, jsx_runtime_1.jsx)(EditorContent_1.EditorContent, {})), (0, jsx_runtime_1.jsx)(GlobalKeybindings_1.GlobalKeybindings, {})] })] }), (0, jsx_runtime_1.jsx)(NotificationCenter_1.NotificationCenter, {}), modalContextType &&
                                                                     modalContextType.type === 'new-comp' && ((0, jsx_runtime_1.jsx)(NewComposition_1.default, { initialCompType: modalContextType.compType })), modalContextType &&
                                                                     modalContextType.type === 'update' && ((0, jsx_runtime_1.jsx)(UpdateModal_1.UpdateModal, { info: modalContextType.info })), modalContextType &&
                                                                     modalContextType.type === 'shortcuts' && ((0, jsx_runtime_1.jsx)(KeyboardShortcutsModal_1.KeyboardShortcuts, {}))] }) }) }) }) }) }) }) }) }) }) }) }) }) }));

package/dist/editor/components/GlobalKeybindings.js

@@ -10,19 +10,34 @@ const GlobalKeybindings = () => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const { setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
     (0, react_1.useEffect)(() => {
-        const nKey = keybindings.registerKeybinding('keypress', 'n', () => {
-            setSelectedModal({
-                type: 'new-comp',
-                compType: 'composition',
-            });
+        const nKey = keybindings.registerKeybinding({
+            event: 'keypress',
+            key: 'n',
+            callback: () => {
+                setSelectedModal({
+                    type: 'new-comp',
+                    compType: 'composition',
+                });
+            },
+            commandCtrlKey: false,
         });
-        const cKey = keybindings.registerKeybinding('keypress', 't', () => {
-            setCheckerboard((c) => !c);
+        const cKey = keybindings.registerKeybinding({
+            event: 'keypress',
+            key: 't',
+            callback: () => {
+                setCheckerboard((c) => !c);
+            },
+            commandCtrlKey: true,
         });
-        const questionMark = keybindings.registerKeybinding('keypress', '?', () => {
-            setSelectedModal({
-                type: 'shortcuts',
-            });
+        const questionMark = keybindings.registerKeybinding({
+            event: 'keypress',
+            key: '?',
+            callback: () => {
+                setSelectedModal({
+                    type: 'shortcuts',
+                });
+            },
+            commandCtrlKey: false,
         });
         return () => {
             nKey.unregister();

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: "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" })] })] })] })] }));
+    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.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: left, children: (0, jsx_runtime_1.jsx)("kbd", { style: key, children: "Enter" }) }), (0, jsx_runtime_1.jsx)("div", { style: right, children: "Pause & return to playback start" })] })] }), (0, jsx_runtime_1.jsx)(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/MenuItem.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import type { ComboboxValue } from '../NewComposition/ComboBox';
-export declare type MenuId = 'remotion' | 'file' | 'view' | 'help';
+export declare type MenuId = 'remotion' | 'file' | 'view' | 'tools' | 'help';
 export declare type Menu = {
     id: MenuId;
     label: React.ReactNode;

package/dist/editor/components/MenuToolbar.js

@@ -3,6 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MenuToolbar = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const remotion_1 = require("remotion");
+const pick_color_1 = require("../helpers/pick-color");
 const Checkmark_1 = require("../icons/Checkmark");
 const checkerboard_1 = require("../state/checkerboard");
 const modals_1 = require("../state/modals");
@@ -55,7 +57,7 @@ const MenuToolbar = () => {
         setSelected(null);
     }, []);
     const structure = (0, react_1.useMemo)(() => {
-        return [
+        const struct = [
             {
                 id: 'remotion',
                 label: ((0, jsx_runtime_1.jsx)(layout_1.Row, { align: "center", justify: "center", children: (0, jsx_runtime_1.jsx)("svg", { width: ICON_SIZE, height: ICON_SIZE, viewBox: "-100 -100 400 400", style: rotate, children: (0, jsx_runtime_1.jsx)("path", { fill: "#fff", stroke: "#fff", strokeWidth: "100", strokeLinejoin: "round", d: "M 2 172 a 196 100 0 0 0 195 5 A 196 240 0 0 0 100 2.259 A 196 240 0 0 0 2 172 z" }) }) })),
@@ -337,6 +339,25 @@ const MenuToolbar = () => {
                     },
                 ],
             },
+            'EyeDropper' in window
+                ? {
+                    id: 'tools',
+                    label: 'Tools',
+                    leaveLeftPadding: false,
+                    items: [
+                        {
+                            id: 'color-picker',
+                            value: 'color-picker',
+                            label: 'Color Picker',
+                            onClick: () => (0, pick_color_1.pickColor)(),
+                            leftItem: null,
+                            keyHint: null,
+                            subMenu: null,
+                            type: 'item',
+                        },
+                    ],
+                }
+                : null,
             {
                 id: 'help',
                 label: 'Help',
@@ -441,7 +462,8 @@ const MenuToolbar = () => {
                     },
                 ],
             },
-        ];
+        ].filter(remotion_1.Internals.truthy);
+        return struct;
     }, [
         checkerboard,
         close,

package/dist/editor/components/NewComposition/MenuContent.js

@@ -99,13 +99,48 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
         setSubMenuActivated('without-mouse');
     }, [onNextMenu, selectedItem, values]);
     (0, react_1.useEffect)(() => {
-        const escapeBinding = keybindings.registerKeybinding('keydown', 'Escape', onEscape);
-        const rightBinding = keybindings.registerKeybinding('keydown', 'ArrowRight', onArrowRight);
-        const leftBinding = keybindings.registerKeybinding('keydown', 'ArrowLeft', onPreviousMenu);
-        const downBinding = keybindings.registerKeybinding('keydown', 'ArrowDown', onArrowDown);
-        const upBinding = keybindings.registerKeybinding('keydown', 'ArrowUp', onArrowUp);
-        const enterBinding = keybindings.registerKeybinding('keydown', 'Enter', onEnter);
-        const spaceBinding = keybindings.registerKeybinding('keyup', ' ', onEnter);
+        const escapeBinding = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'Escape',
+            callback: onEscape,
+            commandCtrlKey: false,
+        });
+        const rightBinding = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'ArrowRight',
+            commandCtrlKey: false,
+            callback: onArrowRight,
+        });
+        const leftBinding = keybindings.registerKeybinding({
+            event: 'keydown',
+            commandCtrlKey: false,
+            key: 'ArrowLeft',
+            callback: onPreviousMenu,
+        });
+        const downBinding = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'ArrowDown',
+            commandCtrlKey: false,
+            callback: onArrowDown,
+        });
+        const upBinding = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'ArrowUp',
+            callback: onArrowUp,
+            commandCtrlKey: false,
+        });
+        const enterBinding = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'Enter',
+            callback: onEnter,
+            commandCtrlKey: false,
+        });
+        const spaceBinding = keybindings.registerKeybinding({
+            event: 'keyup',
+            key: ' ',
+            callback: onEnter,
+            commandCtrlKey: false,
+        });
         return () => {
             escapeBinding.unregister();
             leftBinding.unregister();

package/dist/editor/components/Notifications/ColorDot.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const ColorDot: React.FC<{
+    color: string;
+}>;

package/dist/editor/components/Notifications/ColorDot.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ColorDot = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const container = {
+    height: 16,
+    width: 16,
+    backgroundColor: 'red',
+    border: '1px solid rgba(255, 255, 255, 0.2)',
+    borderRadius: 8,
+};
+const ColorDot = ({ color }) => {
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...container,
+            backgroundColor: color,
+        };
+    }, [color]);
+    return (0, jsx_runtime_1.jsx)("div", { style: style });
+};
+exports.ColorDot = ColorDot;

package/dist/editor/components/Notifications/Notification.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const Notification: React.FC<{
+    children: React.ReactNode;
+    created: number;
+    duration: number;
+    id: string;
+    onRemove: (id: string) => void;
+}>;

package/dist/editor/components/Notifications/Notification.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Notification = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const notification = {
+    backgroundColor: '#111111',
+    color: 'white',
+    fontFamily: 'Arial, Helvetica, sans-serif',
+    display: 'inline-flex',
+    padding: '8px 14px',
+    borderRadius: 4,
+    fontSize: 15,
+    border: '0.25px solid rgba(255, 255, 255, 0.1)',
+    boxShadow: '0 2px 3px rgba(0, 0, 0, 1)',
+    marginTop: 3,
+    marginBottom: 3,
+    alignItems: 'center',
+};
+const Notification = ({ children, id, duration, created, onRemove }) => {
+    (0, react_1.useEffect)(() => {
+        const timeout = setTimeout(() => {
+            onRemove(id);
+        }, duration - (Date.now() - created));
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, [created, duration, id, onRemove]);
+    return (0, jsx_runtime_1.jsx)("div", { style: notification, children: children });
+};
+exports.Notification = Notification;

package/dist/editor/components/Notifications/NotificationCenter.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+declare type TNotification = {
+    id: string;
+    content: React.ReactNode;
+    created: number;
+    duration: number;
+};
+declare type TNotificationCenter = {
+    addNotification: (notification: TNotification) => void;
+};
+export declare const notificationCenter: React.RefObject<TNotificationCenter>;
+export declare const NotificationCenter: React.FC;
+export {};