@remotion/cli 4.0.0-alpha4 → 4.0.0-alpha5

package/dist/editor/components/NewComposition/RemInput.d.ts

@@ -1,5 +1,17 @@
+import type { PropsWithChildren } from 'react';
 import React from 'react';
-declare type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+export declare type RemInputStatus = 'error' | 'warning' | 'ok';
+declare type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
+    status: RemInputStatus;
+    rightAlign: boolean;
+};
+export declare const INPUT_HORIZONTAL_PADDING = 8;
+export declare const RightAlignInput: React.FC<PropsWithChildren>;
 export declare const inputBaseStyle: React.CSSProperties;
-export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "key" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+export declare const getInputBorderColor: ({ status, isFocused, isHovered, }: {
+    status: 'error' | 'warning' | 'ok';
+    isFocused: boolean;
+    isHovered: boolean;
+}) => "hsla(0, 0%, 100%, 0.15)" | "rgba(0, 0, 0, 0.6)" | "rgba(255, 255, 255, 0.05)" | "#ff3232" | "#f1c40f";
+export declare const RemotionInput: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | "rightAlign" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
 export {};

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

@@ -1,18 +1,36 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.RemotionInput = exports.inputBaseStyle = void 0;
+exports.RemotionInput = exports.getInputBorderColor = exports.inputBaseStyle = exports.RightAlignInput = exports.INPUT_HORIZONTAL_PADDING = 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");
+exports.INPUT_HORIZONTAL_PADDING = 8;
+const aligner = {
+    marginRight: -exports.INPUT_HORIZONTAL_PADDING,
+};
+const RightAlignInput = ({ children }) => {
+    return (0, jsx_runtime_1.jsx)("div", { style: aligner, children: children });
+};
+exports.RightAlignInput = RightAlignInput;
 exports.inputBaseStyle = {
-    padding: '8px 10px',
+    padding: `${exports.INPUT_HORIZONTAL_PADDING}px 10px`,
     color: 'white',
     borderStyle: 'solid',
     borderWidth: 1,
     fontSize: 14,
 };
-const RemInputForwardRef = (props, ref) => {
+const getInputBorderColor = ({ status, isFocused, isHovered, }) => status === 'warning'
+    ? colors_1.WARNING_COLOR
+    : status === 'error'
+        ? colors_1.FAIL_COLOR
+        : isFocused
+            ? colors_1.SELECTED_BACKGROUND
+            : isHovered
+                ? colors_1.INPUT_BORDER_COLOR_HOVERED
+                : colors_1.INPUT_BORDER_COLOR_UNHOVERED;
+exports.getInputBorderColor = getInputBorderColor;
+const RemInputForwardRef = ({ status, rightAlign, ...props }, ref) => {
     const [isFocused, setIsFocused] = (0, react_1.useState)(false);
     const [isHovered, setIsHovered] = (0, react_1.useState)(false);
     const inputRef = (0, react_1.useRef)(null);
@@ -23,14 +41,11 @@ const RemInputForwardRef = (props, ref) => {
             backgroundColor: colors_1.INPUT_BACKGROUND,
             ...exports.inputBaseStyle,
             width: '100%',
-            borderColor: isFocused
-                ? colors_1.SELECTED_BACKGROUND
-                : isHovered
-                    ? colors_1.INPUT_BORDER_COLOR_HOVERED
-                    : colors_1.INPUT_BORDER_COLOR_UNHOVERED,
+            borderColor: (0, exports.getInputBorderColor)({ isFocused, isHovered, status }),
+            textAlign: rightAlign ? 'right' : 'left',
             ...((_a = props.style) !== null && _a !== void 0 ? _a : {}),
         };
-    }, [isFocused, isHovered, props.style]);
+    }, [isFocused, isHovered, rightAlign, props.style, status]);
     (0, react_1.useImperativeHandle)(ref, () => {
         return inputRef.current;
     }, []);

package/dist/editor/components/NewComposition/RemInputTypeColor.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { RemInputStatus } from './RemInput';
+declare type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement> & {
+    status: RemInputStatus;
+};
+export declare const RemInputTypeColor: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | keyof React.InputHTMLAttributes<HTMLInputElement>> & React.RefAttributes<HTMLInputElement>>;
+export {};

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

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RemInputTypeColor = 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 RemInput_1 = require("./RemInput");
+const inputBaseStyle = {
+    padding: 0,
+    borderStyle: 'solid',
+    borderWidth: 1,
+};
+const RemInputTypeColorForwardRef = ({ status, ...props }, ref) => {
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const inputRef = (0, react_1.useRef)(null);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const style = (0, react_1.useMemo)(() => {
+        var _a;
+        return {
+            backgroundColor: colors_1.INPUT_BACKGROUND,
+            ...inputBaseStyle,
+            borderColor: (0, RemInput_1.getInputBorderColor)({ isFocused, isHovered, status }),
+            ...((_a = props.style) !== null && _a !== void 0 ? _a : {}),
+        };
+    }, [isFocused, isHovered, props.style, status]);
+    (0, react_1.useImperativeHandle)(ref, () => {
+        return inputRef.current;
+    }, []);
+    (0, react_1.useEffect)(() => {
+        if (!inputRef.current) {
+            return;
+        }
+        const { current } = inputRef;
+        const onFocus = () => setIsFocused(true);
+        const onBlur = () => setIsFocused(false);
+        const onMouseEnter = () => setIsHovered(true);
+        const onMouseLeave = () => setIsHovered(false);
+        current.addEventListener('focus', onFocus);
+        current.addEventListener('blur', onBlur);
+        current.addEventListener('mouseenter', onMouseEnter);
+        current.addEventListener('mouseleave', onMouseLeave);
+        return () => {
+            current.removeEventListener('focus', onFocus);
+            current.removeEventListener('blur', onBlur);
+            current.removeEventListener('mouseenter', onMouseEnter);
+            current.removeEventListener('mouseleave', onMouseLeave);
+        };
+    }, [inputRef]);
+    return ((0, jsx_runtime_1.jsx)("input", { ref: inputRef, type: "color", tabIndex: tabIndex, ...props, style: style }));
+};
+exports.RemInputTypeColor = (0, react_1.forwardRef)(RemInputTypeColorForwardRef);

package/dist/editor/components/NewComposition/RemTextarea.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare type Props = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement> & {
+    status: 'error' | 'warning' | 'ok';
+};
+export declare const inputBaseStyle: React.CSSProperties;
+export declare const RemTextarea: React.ForwardRefExoticComponent<Pick<Props, "key" | "status" | keyof React.InputHTMLAttributes<HTMLTextAreaElement>> & React.RefAttributes<HTMLTextAreaElement>>;
+export {};

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

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RemTextarea = exports.inputBaseStyle = 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 is_menu_item_1 = require("../Menu/is-menu-item");
+const RemInput_1 = require("../NewComposition/RemInput");
+exports.inputBaseStyle = {
+    padding: `${RemInput_1.INPUT_HORIZONTAL_PADDING}px 10px`,
+    color: 'white',
+    borderStyle: 'solid',
+    borderWidth: 1,
+    fontSize: 14,
+    resize: 'none',
+    overflowX: 'hidden',
+};
+const RemTextareaFRFunction = ({ status, ...props }, ref) => {
+    const [isFocused, setIsFocused] = (0, react_1.useState)(false);
+    const [isHovered, setIsHovered] = (0, react_1.useState)(false);
+    const inputRef = (0, react_1.useRef)(null);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    (0, react_1.useImperativeHandle)(ref, () => {
+        return inputRef.current;
+    }, []);
+    const style = (0, react_1.useMemo)(() => {
+        var _a;
+        return {
+            backgroundColor: colors_1.INPUT_BACKGROUND,
+            ...exports.inputBaseStyle,
+            width: '100%',
+            borderColor: (0, RemInput_1.getInputBorderColor)({ isFocused, isHovered, status }),
+            ...((_a = props.style) !== null && _a !== void 0 ? _a : {}),
+        };
+    }, [isFocused, isHovered, props.style, status]);
+    (0, react_1.useEffect)(() => {
+        if (!inputRef.current) {
+            return;
+        }
+        const { current } = inputRef;
+        const onFocus = () => setIsFocused(true);
+        const onBlur = () => setIsFocused(false);
+        const onMouseEnter = () => setIsHovered(true);
+        const onMouseLeave = () => setIsHovered(false);
+        const onKeyDown = (e) => {
+            if (!inputRef.current) {
+                return;
+            }
+            if (inputRef.current !== document.activeElement) {
+                return;
+            }
+            if (e.code === 'Tab') {
+                e.preventDefault();
+                // Always match up with value in JSON.stringify(content, null, 2)
+                document.execCommand('insertText', false, ' '.repeat(2));
+            }
+            if (e.code === 'Enter') {
+                e.preventDefault();
+                const { selectionStart, selectionEnd, value } = inputRef.current;
+                if (selectionStart !== selectionEnd) {
+                    return;
+                }
+                let prevNewline = selectionStart;
+                for (let i = selectionStart - 1; i >= 0; i--) {
+                    if (value[i] === '\n') {
+                        break;
+                    }
+                    prevNewline = i;
+                }
+                const currentLine = value.substring(prevNewline, selectionStart);
+                const trimmed = currentLine.trim();
+                const difference = currentLine.length - trimmed.length;
+                document.execCommand('insertText', false, '\n' + ' '.repeat(difference));
+            }
+        };
+        current.addEventListener('focus', onFocus);
+        current.addEventListener('blur', onBlur);
+        current.addEventListener('mouseenter', onMouseEnter);
+        current.addEventListener('mouseleave', onMouseLeave);
+        current.addEventListener('keydown', onKeyDown);
+        return () => {
+            current.removeEventListener('focus', onFocus);
+            current.removeEventListener('blur', onBlur);
+            current.removeEventListener('mouseenter', onMouseEnter);
+            current.removeEventListener('mouseleave', onMouseLeave);
+            current.removeEventListener('keydown', onKeyDown);
+        };
+    }, [inputRef]);
+    return ((0, jsx_runtime_1.jsx)("textarea", { ref: inputRef, tabIndex: tabIndex, ...props, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, style: style }));
+};
+exports.RemTextarea = (0, react_1.forwardRef)(RemTextareaFRFunction);

package/dist/editor/components/NewComposition/ValidationMessage.d.ts

@@ -1,4 +1,6 @@
 import React from 'react';
 export declare const ValidationMessage: React.FC<{
     message: string;
+    align: 'flex-start' | 'flex-end';
+    type: 'warning' | 'error';
 }>;

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

@@ -2,22 +2,32 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ValidationMessage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
 const layout_1 = require("../layout");
-const Triangle = (props) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 576 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M248.747 204.705l6.588 112c.373 6.343 5.626 11.295 11.979 11.295h41.37a12 12 0 0 0 11.979-11.295l6.588-112c.405-6.893-5.075-12.705-11.979-12.705h-54.547c-6.903 0-12.383 5.812-11.978 12.705zM330 384c0 23.196-18.804 42-42 42s-42-18.804-42-42 18.804-42 42-42 42 18.804 42 42zm-.423-360.015c-18.433-31.951-64.687-32.009-83.154 0L6.477 440.013C-11.945 471.946 11.118 512 48.054 512H527.94c36.865 0 60.035-39.993 41.577-71.987L329.577 23.985zM53.191 455.002L282.803 57.008c2.309-4.002 8.085-4.002 10.394 0l229.612 397.993c2.308 4-.579 8.998-5.197 8.998H58.388c-4.617.001-7.504-4.997-5.197-8.997z" }) }));
+const WarningTriangle = (props) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 576 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { d: "M248.747 204.705l6.588 112c.373 6.343 5.626 11.295 11.979 11.295h41.37a12 12 0 0 0 11.979-11.295l6.588-112c.405-6.893-5.075-12.705-11.979-12.705h-54.547c-6.903 0-12.383 5.812-11.978 12.705zM330 384c0 23.196-18.804 42-42 42s-42-18.804-42-42 18.804-42 42-42 42 18.804 42 42zm-.423-360.015c-18.433-31.951-64.687-32.009-83.154 0L6.477 440.013C-11.945 471.946 11.118 512 48.054 512H527.94c36.865 0 60.035-39.993 41.577-71.987L329.577 23.985zM53.191 455.002L282.803 57.008c2.309-4.002 8.085-4.002 10.394 0l229.612 397.993c2.308 4-.579 8.998-5.197 8.998H58.388c-4.617.001-7.504-4.997-5.197-8.997z" }) }));
 };
 const style = {
-    width: 11,
-    height: 11,
+    width: 12,
+    height: 12,
+    flexShrink: 0,
 };
 const container = {
-    marginTop: 5,
+    maxWidth: 500,
 };
 const label = {
     fontSize: 13,
-    flex: 1,
+    color: 'white',
+    fontFamily: 'sans-serif',
 };
-const ValidationMessage = ({ message }) => {
-    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)(Triangle, { style: style, color: "#f1c40f" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: message })] }) }));
+const ValidationMessage = ({ message, align, type }) => {
+    const finalStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...style,
+            fill: type === 'warning' ? colors_1.WARNING_COLOR : colors_1.FAIL_COLOR,
+        };
+    }, [type]);
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", justify: align, children: [(0, jsx_runtime_1.jsx)(WarningTriangle, { style: finalStyle }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: label, children: message })] }) }));
 };
 exports.ValidationMessage = ValidationMessage;

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

@@ -9,5 +9,6 @@ declare type TNotificationCenter = {
     addNotification: (notification: TNotification) => void;
 };
 export declare const notificationCenter: React.RefObject<TNotificationCenter>;
+export declare const sendErrorNotification: (content: React.ReactNode) => void;
 export declare const NotificationCenter: React.FC;
 export {};

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.NotificationCenter = exports.notificationCenter = void 0;
+exports.NotificationCenter = exports.sendErrorNotification = exports.notificationCenter = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Notification_1 = require("./Notification");
@@ -16,6 +16,16 @@ const container = {
     backgroundColor: 'transparent',
 };
 exports.notificationCenter = (0, react_1.createRef)();
+const sendErrorNotification = (content) => {
+    var _a;
+    (_a = exports.notificationCenter.current) === null || _a === void 0 ? void 0 : _a.addNotification({
+        content,
+        duration: 2000,
+        created: Date.now(),
+        id: String(Math.random()).replace('0.', ''),
+    });
+};
+exports.sendErrorNotification = sendErrorNotification;
 const NotificationCenter = () => {
     const [notifications, setNotifications] = (0, react_1.useState)([]);
     const onRemove = (0, react_1.useCallback)((id) => {

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

@@ -1,6 +1,2 @@
 import React from 'react';
-export declare const serverDisconnectedRef: React.RefObject<{
-    setServerDisconnected: () => void;
-    setServerConnected: () => void;
-}>;
 export declare const ServerDisconnected: React.FC;

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

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ServerDisconnected = exports.serverDisconnectedRef = void 0;
+exports.ServerDisconnected = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const client_id_1 = require("../../helpers/client-id");
 const container = {
     position: 'fixed',
     justifyContent: 'flex-end',
@@ -31,24 +32,13 @@ const inlineCode = {
     fontSize: 16,
     fontFamily: 'monospace',
 };
-exports.serverDisconnectedRef = (0, react_1.createRef)();
 let pageIsGoingToReload = false;
 window.addEventListener('beforeunload', () => {
     pageIsGoingToReload = true;
 });
 const ServerDisconnected = () => {
-    const [serverDisconnected, setServerDisconnected] = (0, react_1.useState)(false);
-    (0, react_1.useImperativeHandle)(exports.serverDisconnectedRef, () => {
-        return {
-            setServerDisconnected: () => {
-                setServerDisconnected(true);
-            },
-            setServerConnected: () => {
-                setServerDisconnected(false);
-            },
-        };
-    }, []);
-    if (!serverDisconnected) {
+    const ctx = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx);
+    if (ctx.type !== 'disconnected') {
         return null;
     }
     if (pageIsGoingToReload) {

package/dist/editor/components/PlayPause.js

@@ -125,6 +125,7 @@ const PlayPause = ({ playbackRate, loop }) => {
             callback: onArrowLeft,
             commandCtrlKey: false,
             preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const arrowRight = keybindings.registerKeybinding({
             event: 'keydown',
@@ -132,6 +133,7 @@ const PlayPause = ({ playbackRate, loop }) => {
             callback: onArrowRight,
             commandCtrlKey: false,
             preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const space = keybindings.registerKeybinding({
             event: 'keydown',
@@ -139,6 +141,7 @@ const PlayPause = ({ playbackRate, loop }) => {
             callback: onSpace,
             commandCtrlKey: false,
             preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const enter = keybindings.registerKeybinding({
             event: 'keydown',
@@ -146,6 +149,7 @@ const PlayPause = ({ playbackRate, loop }) => {
             callback: onEnter,
             commandCtrlKey: false,
             preventDefault: false,
+            triggerIfInputFieldFocused: false,
         });
         const a = keybindings.registerKeybinding({
             event: 'keydown',
@@ -153,6 +157,7 @@ const PlayPause = ({ playbackRate, loop }) => {
             callback: jumpToStart,
             commandCtrlKey: false,
             preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const e = keybindings.registerKeybinding({
             event: 'keydown',
@@ -160,6 +165,7 @@ const PlayPause = ({ playbackRate, loop }) => {
             callback: jumpToEnd,
             commandCtrlKey: false,
             preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         return () => {
             arrowLeft.unregister();

package/dist/editor/components/PlaybackKeyboardShortcutsManager.js

@@ -48,6 +48,7 @@ const PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
             callback: onJKey,
             commandCtrlKey: false,
             preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const kKey = keybindings.registerKeybinding({
             event: 'keydown',
@@ -55,6 +56,7 @@ const PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
             callback: onKKey,
             commandCtrlKey: false,
             preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         const lKey = keybindings.registerKeybinding({
             event: 'keydown',
@@ -62,6 +64,7 @@ const PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
             callback: onLKey,
             commandCtrlKey: false,
             preventDefault: true,
+            triggerIfInputFieldFocused: false,
         });
         return () => {
             jKey.unregister();

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

@@ -1,6 +1,4 @@
 import React from 'react';
-export declare const commonPlaybackRates: number[];
-export declare const getPlaybackRateLabel: (playbackRate: number) => string;
 export declare const PlaybackRateSelector: React.FC<{
     playbackRate: number;
     setPlaybackRate: React.Dispatch<React.SetStateAction<number>>;

package/dist/editor/components/PlaybackRateSelector.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.PlaybackRateSelector = exports.getPlaybackRateLabel = exports.commonPlaybackRates = void 0;
+exports.PlaybackRateSelector = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
@@ -8,13 +8,12 @@ const Checkmark_1 = require("../icons/Checkmark");
 const playbackrate_1 = require("../state/playbackrate");
 const ControlButton_1 = require("./ControlButton");
 const ComboBox_1 = require("./NewComposition/ComboBox");
-exports.commonPlaybackRates = [
+const commonPlaybackRates = [
     -4, -2, -1, -0.5, -0.25, 0.25, 0.5, 1, 2, 4,
 ];
 const getPlaybackRateLabel = (playbackRate) => {
     return `${playbackRate}x`;
 };
-exports.getPlaybackRateLabel = getPlaybackRateLabel;
 const accessibilityLabel = 'Change the playback rate';
 const comboStyle = { width: 80 };
 const PlaybackRateSelector = ({ playbackRate, setPlaybackRate }) => {
@@ -29,10 +28,10 @@ const PlaybackRateSelector = ({ playbackRate, setPlaybackRate }) => {
             type: 'divider',
             id: 'divider',
         };
-        const values = exports.commonPlaybackRates.map((newPlaybackRate) => {
+        const values = commonPlaybackRates.map((newPlaybackRate) => {
             return {
                 id: String(newPlaybackRate),
-                label: (0, exports.getPlaybackRateLabel)(newPlaybackRate),
+                label: getPlaybackRateLabel(newPlaybackRate),
                 onClick: () => {
                     return setPlaybackRate(() => {
                         (0, playbackrate_1.persistPlaybackRate)(newPlaybackRate);
@@ -47,7 +46,7 @@ const PlaybackRateSelector = ({ playbackRate, setPlaybackRate }) => {
                 quickSwitcherLabel: null,
             };
         });
-        const middle = Math.floor(exports.commonPlaybackRates.length / 2);
+        const middle = Math.floor(commonPlaybackRates.length / 2);
         return [...values.slice(0, middle), divider, ...values.slice(middle)];
     }, [playbackRate, setPlaybackRate]);
     if (isStill) {

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

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

package/dist/editor/components/PlayerEmitterContext.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlayerEmitterContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const player_1 = require("@remotion/player");
+const react_1 = require("react");
+const PlayerEmitterContext = ({ children }) => {
+    const [emitter] = (0, react_1.useState)(() => new player_1.PlayerInternals.PlayerEmitter());
+    return ((0, jsx_runtime_1.jsx)(player_1.PlayerInternals.PlayerEventEmitterContext.Provider, { value: emitter, children: children }));
+};
+exports.PlayerEmitterContext = PlayerEmitterContext;

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

@@ -1,6 +1,5 @@
 import type { Size } from '@remotion/player';
 import React from 'react';
-export declare const checkerboardSize = 49;
 export declare const VideoPreview: React.FC<{
     canvasSize: Size;
 }>;

package/dist/editor/components/Preview.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VideoPreview = exports.checkerboardSize = void 0;
+exports.VideoPreview = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
@@ -8,7 +8,7 @@ const remotion_1 = require("remotion");
 const checkerboard_background_1 = require("../helpers/checkerboard-background");
 const checkerboard_1 = require("../state/checkerboard");
 const preview_size_1 = require("../state/preview-size");
-exports.checkerboardSize = 49;
+const checkerboardSize = 49;
 const containerStyle = (options) => {
     return {
         transform: `scale(${options.scale})`,
@@ -20,8 +20,8 @@ const containerStyle = (options) => {
         position: 'absolute',
         backgroundColor: (0, checkerboard_background_1.checkerboardBackgroundColor)(options.checkerboard),
         backgroundImage: (0, checkerboard_background_1.checkerboardBackgroundImage)(options.checkerboard),
-        backgroundSize: (0, checkerboard_background_1.getCheckerboardBackgroundSize)(exports.checkerboardSize) /* Must be a square */,
-        backgroundPosition: (0, checkerboard_background_1.getCheckerboardBackgroundPos)(exports.checkerboardSize) /* Must be half of one side of the square */,
+        backgroundSize: (0, checkerboard_background_1.getCheckerboardBackgroundSize)(checkerboardSize) /* Must be a square */,
+        backgroundPosition: (0, checkerboard_background_1.getCheckerboardBackgroundPos)(checkerboardSize) /* Must be half of one side of the square */,
     };
 };
 const Inner = ({ canvasSize }) => {

package/dist/editor/components/PreviewToolbar.js

@@ -16,7 +16,7 @@ const PlaybackKeyboardShortcutsManager_1 = require("./PlaybackKeyboardShortcutsM
 const PlaybackRatePersistor_1 = require("./PlaybackRatePersistor");
 const PlaybackRateSelector_1 = require("./PlaybackRateSelector");
 const PlayPause_1 = require("./PlayPause");
-const RichTimelineToggle_1 = require("./RichTimelineToggle");
+const RenderButton_1 = require("./RenderButton");
 const SizeSelector_1 = require("./SizeSelector");
 const TimelineZoomControls_1 = require("./Timeline/TimelineZoomControls");
 const TimelineInOutToggle_1 = require("./TimelineInOutToggle");
@@ -45,6 +45,6 @@ const PreviewToolbar = () => {
     const { mediaMuted } = (0, react_1.useContext)(remotion_1.Internals.MediaVolumeContext);
     const { setMediaMuted } = (0, react_1.useContext)(remotion_1.Internals.SetMediaVolumeContext);
     const [loop, setLoop] = (0, react_1.useState)((0, loop_1.loadLoopOption)());
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)("div", { style: padding }), (0, jsx_runtime_1.jsx)(TimelineZoomControls_1.TimelineZoomControls, {})] }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(SizeSelector_1.SizeSelector, {}), (0, jsx_runtime_1.jsx)(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(PlayPause_1.PlayPause, { loop: loop, playbackRate: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }), (0, jsx_runtime_1.jsx)(CheckboardToggle_1.CheckboardToggle, {}), (0, jsx_runtime_1.jsx)(RichTimelineToggle_1.RichTimelineToggle, {}), (0, jsx_runtime_1.jsx)(TimelineInOutToggle_1.TimelineInOutPointToggle, {}), (0, jsx_runtime_1.jsx)(MuteToggle_1.MuteToggle, { muted: mediaMuted, setMuted: setMediaMuted }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), (0, jsx_runtime_1.jsx)("div", { style: padding })] }), (0, jsx_runtime_1.jsx)(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), (0, jsx_runtime_1.jsx)(PlaybackRatePersistor_1.PlaybackRatePersistor, {})] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, className: "css-reset", children: [(0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)("div", { style: padding }), (0, jsx_runtime_1.jsx)(TimelineZoomControls_1.TimelineZoomControls, {})] }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(SizeSelector_1.SizeSelector, {}), (0, jsx_runtime_1.jsx)(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(PlayPause_1.PlayPause, { loop: loop, playbackRate: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }), (0, jsx_runtime_1.jsx)(CheckboardToggle_1.CheckboardToggle, {}), (0, jsx_runtime_1.jsx)(TimelineInOutToggle_1.TimelineInOutPointToggle, {}), (0, jsx_runtime_1.jsx)(MuteToggle_1.MuteToggle, { muted: mediaMuted, setMuted: setMediaMuted }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), (0, jsx_runtime_1.jsx)(RenderButton_1.RenderButton, {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1.5 })] }), (0, jsx_runtime_1.jsx)(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }), (0, jsx_runtime_1.jsx)(PlaybackRatePersistor_1.PlaybackRatePersistor, {})] }));
 };
 exports.PreviewToolbar = PreviewToolbar;

package/dist/editor/components/QuickSwitcher/QuickSwitcherContent.js

@@ -12,14 +12,14 @@ const modals_1 = require("../../state/modals");
 const InitialCompositionLoader_1 = require("../InitialCompositionLoader");
 const KeyboardShortcutsExplainer_1 = require("../KeyboardShortcutsExplainer");
 const layout_1 = require("../layout");
+const is_menu_item_1 = require("../Menu/is-menu-item");
+const RemInput_1 = require("../NewComposition/RemInput");
 const algolia_search_1 = require("./algolia-search");
 const AlgoliaCredit_1 = require("./AlgoliaCredit");
 const fuzzy_search_1 = require("./fuzzy-search");
 const NoResults_1 = require("./NoResults");
 const QuickSwitcherResult_1 = require("./QuickSwitcherResult");
 const input = {
-    padding: 4,
-    border: '2px solid ' + colors_1.INPUT_BORDER_COLOR_UNHOVERED,
     width: '100%',
 };
 const modeSelector = {
@@ -170,6 +170,8 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp }) => {
             commandCtrlKey: false,
             event: 'keydown',
             preventDefault: true,
+            // Will be using the input field while selecting
+            triggerIfInputFieldFocused: true,
         });
         return () => {
             binding.unregister();
@@ -210,6 +212,8 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp }) => {
             commandCtrlKey: false,
             event: 'keydown',
             preventDefault: true,
+            // Will be using the input field while selecting
+            triggerIfInputFieldFocused: true,
         });
         return () => {
             binding.unregister();
@@ -255,6 +259,7 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp }) => {
         if (showKeyboardShortcuts) {
             return {
                 maxHeight: 600,
+                overflowY: 'auto',
             };
         }
         return {
@@ -262,7 +267,7 @@ const QuickSwitcherContent = ({ initialMode, invocationTimestamp }) => {
             height: 300,
         };
     }, [showKeyboardShortcuts]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsxs)("div", { style: modeSelector, children: [(0, jsx_runtime_1.jsx)("button", { onClick: onCompositionsSelected, style: mode === 'compositions' ? modeActive : modeInactive, type: "button", children: "Compositions" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("button", { onClick: onActionsSelected, style: mode === 'commands' ? modeActive : modeInactive, type: "button", children: "Actions" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("button", { onClick: onDocSearchSelected, style: mode === 'docs' ? modeActive : modeInactive, type: "button", children: "Documentation" })] }), (0, jsx_runtime_1.jsxs)("div", { style: content, children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, type: "text", style: input, autoFocus: true, value: state.query, onChange: onTextChange, placeholder: "Search compositions..." }), showKeyboardShortcuts ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), " ", (0, jsx_runtime_1.jsx)(AlgoliaCredit_1.AlgoliaCredit, {})] })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: results, children: showKeyboardShortcuts ? ((0, jsx_runtime_1.jsx)(KeyboardShortcutsExplainer_1.KeyboardShortcutsExplainer, {})) : showSearchLoadingState ? null : resultsArray.length === 0 ? ((0, jsx_runtime_1.jsx)(NoResults_1.QuickSwitcherNoResults, { mode: mode, query: actualQuery })) : (resultsArray.map((result, i) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsxs)("div", { style: modeSelector, children: [(0, jsx_runtime_1.jsx)("button", { onClick: onCompositionsSelected, style: mode === 'compositions' ? modeActive : modeInactive, type: "button", children: "Compositions" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("button", { onClick: onActionsSelected, style: mode === 'commands' ? modeActive : modeInactive, type: "button", children: "Actions" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("button", { onClick: onDocSearchSelected, style: mode === 'docs' ? modeActive : modeInactive, type: "button", children: "Documentation" })] }), (0, jsx_runtime_1.jsxs)("div", { style: content, children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { ref: inputRef, type: "text", style: input, autoFocus: true, status: "ok", value: state.query, onChange: onTextChange, placeholder: "Search compositions...", rightAlign: false }), showKeyboardShortcuts ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }), " ", (0, jsx_runtime_1.jsx)(AlgoliaCredit_1.AlgoliaCredit, {})] })) : null] }), (0, jsx_runtime_1.jsx)("div", { style: results, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: showKeyboardShortcuts ? ((0, jsx_runtime_1.jsx)(KeyboardShortcutsExplainer_1.KeyboardShortcutsExplainer, {})) : showSearchLoadingState ? null : resultsArray.length === 0 ? ((0, jsx_runtime_1.jsx)(NoResults_1.QuickSwitcherNoResults, { mode: mode, query: actualQuery })) : (resultsArray.map((result, i) => {
                     return ((0, jsx_runtime_1.jsx)(QuickSwitcherResult_1.QuickSwitcherResult, { selected: selectedIndexRounded === i, result: result }, result.id));
                 })) })] }));
 };