@remotion/cli 4.0.0-oops.3 → 4.0.0-prefetch.7

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

@@ -145,7 +145,7 @@ const NewComposition = (props) => {
                 type: 'item',
                 value: frameRate,
                 keyHint: null,
-                leftItem: String(frameRate) === selectedFrameRate ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}, void 0) : null,
+                leftItem: String(frameRate) === selectedFrameRate ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
                 subMenu: null,
             };
         });
@@ -177,7 +177,7 @@ const NewComposition = (props) => {
             },
         ];
     }, [onTypeChanged]);
-    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "New composition" }, void 0), (0, jsx_runtime_1.jsxs)("div", { style: panelContent, children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 3 }, void 0), (0, jsx_runtime_1.jsxs)("form", { children: [(0, jsx_runtime_1.jsxs)("label", { children: [(0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Type" }, void 0), (0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.inputArea, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Type of composition", style: comboBoxStyle, values: typeValues, selectedId: type }, void 0) }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }, void 0), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Name" }, void 0), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: name, onChange: onNameChange, type: "text", placeholder: "Composition name" }, void 0), compNameErrMessage ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: compNameErrMessage }, void 0)) : null] }, void 0)] }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }, void 0), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Width" }, void 0), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: size.width, placeholder: "Width (px)", onChange: onWidthChanged, name: "width", step: 2, min: 2, max: 100000000, onValueChange: onWidthDirectlyChanged }, void 0), compWidthErrMessage ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: compWidthErrMessage }, void 0)) : null] }, void 0)] }, void 0) }, void 0) }, void 0), (0, jsx_runtime_1.jsx)("div", {}, void 0), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }, void 0), (0, jsx_runtime_1.jsx)("div", {}, void 0), (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Height" }, void 0), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: size.height, onChange: onHeightChanged, placeholder: "Height (px)", name: "height", step: 2, min: 2, max: 100000000, onValueChange: onHeightDirectlyChanged }, void 0), compHeightErrMessage ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: compHeightErrMessage }, void 0)) : null] }, void 0)] }, void 0) }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(NewCompAspectRatio_1.NewCompAspectRatio, { width: Number(size.width), height: Number(size.height), aspectRatioLocked: lockedAspectRatio, setAspectRatioLocked: setAspectRatioLocked }, void 0) }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)("div", {}, void 0), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }, void 0), type === 'composition' ? ((0, jsx_runtime_1.jsx)(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, fps: selectedFrameRate, setDurationInFrames: setDurationInFrames }, void 0)) : null, (0, jsx_runtime_1.jsx)("div", {}, void 0), (0, jsx_runtime_1.jsx)("br", {}, void 0), (0, jsx_runtime_1.jsx)("div", {}, void 0), type === 'composition' ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", {}, void 0), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }, void 0), (0, jsx_runtime_1.jsxs)("label", { children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Framerate" }, void 0), (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Framerate", style: comboBoxStyle, values: items, selectedId: selectedFrameRate }, void 0)] }, void 0)] }, void 0)) : null] }, void 0)] }, void 0), (0, jsx_runtime_1.jsxs)("div", { style: panelRight, children: [(0, jsx_runtime_1.jsx)("pre", { style: pre, children: (0, NewCompCode_1.getNewCompositionCode)({
+    return ((0, jsx_runtime_1.jsxs)(ModalContainer_1.ModalContainer, { onOutsideClick: onQuit, onEscape: onQuit, children: [(0, jsx_runtime_1.jsx)(ModalHeader_1.NewCompHeader, { title: "New composition" }), (0, jsx_runtime_1.jsxs)("div", { style: panelContent, children: [(0, jsx_runtime_1.jsxs)("div", { style: left, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 3 }), (0, jsx_runtime_1.jsxs)("form", { children: [(0, jsx_runtime_1.jsxs)("label", { children: [(0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Type" }), (0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.inputArea, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Type of composition", style: comboBoxStyle, values: typeValues, selectedId: type }) })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Name" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { value: name, onChange: onNameChange, type: "text", placeholder: "Composition name" }), compNameErrMessage ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: compNameErrMessage })) : null] })] })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Width" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: size.width, placeholder: "Width (px)", onChange: onWidthChanged, name: "width", step: 2, min: 2, max: 100000000, onValueChange: onWidthDirectlyChanged }), compWidthErrMessage ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: compWidthErrMessage })) : null] })] }) }) }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("label", { children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Height" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: size.height, onChange: onHeightChanged, placeholder: "Height (px)", name: "height", step: 2, min: 2, max: 100000000, onValueChange: onHeightDirectlyChanged }), compHeightErrMessage ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: compHeightErrMessage })) : null] })] }) })] }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(NewCompAspectRatio_1.NewCompAspectRatio, { width: Number(size.width), height: Number(size.height), aspectRatioLocked: lockedAspectRatio, setAspectRatioLocked: setAspectRatioLocked }) })] }), (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), type === 'composition' ? ((0, jsx_runtime_1.jsx)(NewCompDuration_1.NewCompDuration, { durationInFrames: durationInFrames, fps: selectedFrameRate, setDurationInFrames: setDurationInFrames })) : null, (0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)("br", {}), (0, jsx_runtime_1.jsx)("div", {}), type === 'composition' ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", {}), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 1 }), (0, jsx_runtime_1.jsxs)("label", { children: [(0, jsx_runtime_1.jsx)("div", { style: new_comp_layout_1.leftLabel, children: "Framerate" }), (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: "Framerate", style: comboBoxStyle, values: items, selectedId: selectedFrameRate })] })] })) : null] })] }), (0, jsx_runtime_1.jsxs)("div", { style: panelRight, children: [(0, jsx_runtime_1.jsx)("pre", { style: pre, children: (0, NewCompCode_1.getNewCompositionCode)({
                                     type,
                                     durationInFrames: Number(durationInFrames),
                                     fps: Number(selectedFrameRate),
@@ -185,7 +185,7 @@ const NewComposition = (props) => {
                                     width: Number(size.width),
                                     name,
                                     raw: false,
-                                }) }, void 0), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", style: copyRowStyle, children: [(0, jsx_runtime_1.jsx)(CopyHint_1.CopyHint, {}, void 0), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}, void 0), (0, jsx_runtime_1.jsx)(CopyButton_1.CopyButton, { label: "Copy code", labelWhenCopied: "Copied!", textToCopy: (0, NewCompCode_1.getNewCompositionCode)({
+                                }) }), (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", style: copyRowStyle, children: [(0, jsx_runtime_1.jsx)(CopyHint_1.CopyHint, {}), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(CopyButton_1.CopyButton, { label: "Copy code", labelWhenCopied: "Copied!", textToCopy: (0, NewCompCode_1.getNewCompositionCode)({
                                             type,
                                             durationInFrames: Number(durationInFrames),
                                             fps: Number(selectedFrameRate),
@@ -193,6 +193,6 @@ const NewComposition = (props) => {
                                             width: Number(size.width),
                                             name,
                                             raw: true,
-                                        }) }, void 0)] }, void 0)] }, void 0)] }, void 0)] }, void 0));
+                                        }) })] })] })] })] }));
 };
 exports.default = NewComposition;

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

@@ -54,6 +54,6 @@ const RemInputForwardRef = (props, ref) => {
             current.removeEventListener('mouseleave', onMouseLeave);
         };
     }, [inputRef]);
-    return (0, jsx_runtime_1.jsx)("input", { ref: inputRef, tabIndex: tabIndex, ...props, style: style }, void 0);
+    return (0, jsx_runtime_1.jsx)("input", { ref: inputRef, tabIndex: tabIndex, ...props, style: style });
 };
 exports.RemotionInput = (0, react_1.forwardRef)(RemInputForwardRef);

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

@@ -21,6 +21,6 @@ const ToggleAspectRatio = ({ aspectRatioLocked, setAspectRatioLocked }) => {
     const onClick = (0, react_1.useCallback)(() => {
         setAspectRatioLocked(!aspectRatioLocked);
     }, [aspectRatioLocked, setAspectRatioLocked]);
-    return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onClick, style: buttonStyle, children: aspectRatioLocked ? ((0, jsx_runtime_1.jsx)(lock_1.LockIcon, { style: iconStyle }, void 0)) : ((0, jsx_runtime_1.jsx)(lock_1.UnlockIcon, { style: iconStyle }, void 0)) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: onClick, style: buttonStyle, children: aspectRatioLocked ? ((0, jsx_runtime_1.jsx)(lock_1.LockIcon, { style: iconStyle })) : ((0, jsx_runtime_1.jsx)(lock_1.UnlockIcon, { style: iconStyle })) }));
 };
 exports.ToggleAspectRatio = ToggleAspectRatio;

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

@@ -4,7 +4,7 @@ exports.ValidationMessage = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 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" }, void 0) }, void 0));
+    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 style = {
     width: 11,
@@ -18,6 +18,6 @@ const label = {
     flex: 1,
 };
 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" }, void 0), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }, void 0), (0, jsx_runtime_1.jsx)("div", { style: label, children: message }, void 0)] }, void 0) }, void 0));
+    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 })] }) }));
 };
 exports.ValidationMessage = ValidationMessage;

package/dist/editor/components/NewComposition/new-comp-layout.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export declare const leftLabel: React.CSSProperties;
 export declare const inputArea: React.CSSProperties;
 export declare const rightLabel: React.CSSProperties;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const NoRegisterRoot: React.FC;

package/dist/editor/components/NoRegisterRoot.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NoRegisterRoot = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const label = {
+    fontSize: 13,
+    color: 'white',
+    fontFamily: 'Arial, Helvetica, sans-serif',
+};
+const container = {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    flex: 1,
+    flexDirection: 'column',
+    textAlign: 'center',
+    lineHeight: 1.5,
+};
+const link = {
+    color: 'white',
+    textDecoration: 'none',
+    borderBottom: '1px solid',
+};
+const NoRegisterRoot = () => {
+    const [show, setShow] = (0, react_1.useState)(() => false);
+    (0, react_1.useEffect)(() => {
+        // Only show after 2 seconds so there is no flicker when the load is really fast
+        const timeout = setTimeout(() => {
+            setShow(true);
+        }, 2000);
+        return () => {
+            clearTimeout(timeout);
+        };
+    }, []);
+    if (!show) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { style: label, children: "Waiting for registerRoot() to get called." }), (0, jsx_runtime_1.jsxs)("div", { style: label, children: ["Learn more:", ' ', (0, jsx_runtime_1.jsx)("a", { target: '_blank', style: link, href: "https://www.remotion.dev/docs/register-root", children: "remotion.dev/docs/register-root" })] })] }));
+};
+exports.NoRegisterRoot = NoRegisterRoot;

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", { className: "css-reset", 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 {};

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

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NotificationCenter = exports.notificationCenter = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const Notification_1 = require("./Notification");
+const container = {
+    position: 'absolute',
+    justifyContent: 'center',
+    alignItems: 'center',
+    display: 'flex',
+    width: '100%',
+    flexDirection: 'column',
+    paddingTop: 20,
+    pointerEvents: 'none',
+    backgroundColor: 'transparent',
+};
+exports.notificationCenter = (0, react_1.createRef)();
+const NotificationCenter = () => {
+    const [notifications, setNotifications] = (0, react_1.useState)([]);
+    const onRemove = (0, react_1.useCallback)((id) => {
+        setNotifications((not) => {
+            return not.filter((n) => n.id !== id);
+        });
+    }, []);
+    const addNotification = (0, react_1.useCallback)((notification) => {
+        setNotifications((previousNotifications) => {
+            return [...previousNotifications, notification];
+        });
+    }, []);
+    (0, react_1.useImperativeHandle)(exports.notificationCenter, () => {
+        return {
+            addNotification,
+        };
+    });
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: notifications.map((n) => {
+            return ((0, jsx_runtime_1.jsx)(Notification_1.Notification, { created: n.created, duration: n.duration, id: n.id, onRemove: onRemove, children: n.content }, n.id));
+        }) }));
+};
+exports.NotificationCenter = NotificationCenter;

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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ServerDisconnected = exports.serverDisconnectedRef = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const container = {
+    position: 'fixed',
+    justifyContent: 'flex-end',
+    alignItems: 'flex-start',
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    flexDirection: 'column',
+    padding: 30,
+    pointerEvents: 'none',
+    backgroundColor: 'transparent',
+    fontFamily: 'SF Pro, Arial, Helvetica, sans-serif',
+};
+const message = {
+    backgroundColor: '#e74c3c',
+    color: 'white',
+    paddingLeft: 20,
+    paddingRight: 20,
+    paddingTop: 12,
+    paddingBottom: 12,
+    borderRadius: 4,
+    boxShadow: '0 2px 4px rgba(0, 0, 0, 0.4)',
+    lineHeight: 1.5,
+};
+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) {
+        return null;
+    }
+    if (pageIsGoingToReload) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, className: "css-reset", children: (0, jsx_runtime_1.jsxs)("div", { style: message, children: ["The preview server has disconnected. ", (0, jsx_runtime_1.jsx)("br", {}), window.remotion_previewServerCommand ? ((0, jsx_runtime_1.jsxs)("span", { children: ["Run", ' ', (0, jsx_runtime_1.jsx)("code", { style: inlineCode, children: window.remotion_previewServerCommand }), ' ', "to run it again."] })) : ((0, jsx_runtime_1.jsx)("span", { children: "Fast refresh will not work." }))] }) }));
+};
+exports.ServerDisconnected = ServerDisconnected;

package/dist/editor/components/PlayPause.js

@@ -4,28 +4,31 @@ exports.PlayPause = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
-const remotion_1 = require("remotion");
 const 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");
 const step_forward_1 = require("../icons/step-forward");
+const in_out_1 = require("../state/in-out");
 const ControlButton_1 = require("./ControlButton");
+const imperative_state_1 = require("./Timeline/imperative-state");
+const timeline_scroll_logic_1 = require("./Timeline/timeline-scroll-logic");
 const forwardBackStyle = {
     height: 16,
-    width: 16,
     color: 'white',
 };
 const PlayPause = ({ playbackRate, loop }) => {
-    var _a;
-    const frame = remotion_1.Internals.Timeline.useTimelinePosition();
-    const video = remotion_1.Internals.useVideo();
+    const { inFrame, outFrame } = (0, in_out_1.useTimelineInOutFramePosition)();
     player_1.PlayerInternals.usePlayback({
         loop,
         playbackRate,
+        moveToBeginningWhenEnded: true,
+        inFrame,
+        outFrame,
     });
-    const { playing, play, pause, frameBack, frameForward, isLastFrame } = player_1.PlayerInternals.usePlayer();
+    const { playing, play, pause, pauseAndReturnToPlayStart, frameBack, seek, frameForward, isLastFrame, isFirstFrame, } = player_1.PlayerInternals.usePlayer();
     const isStill = (0, is_current_selected_still_1.useIsStill)();
     (0, react_1.useEffect)(() => {
         if (isStill) {
@@ -41,49 +44,144 @@ const PlayPause = ({ playbackRate, loop }) => {
         }
         e.preventDefault();
     }, [pause, play, playing]);
-    const videoFps = (_a = video === null || video === void 0 ? void 0 : video.fps) !== null && _a !== void 0 ? _a : null;
-    const onArrowLeft = (0, react_1.useCallback)((e) => {
-        if (!videoFps) {
-            return null;
+    const onEnter = (0, react_1.useCallback)((e) => {
+        if (playing) {
+            pauseAndReturnToPlayStart();
         }
-        frameBack(e.shiftKey ? videoFps : 1);
         e.preventDefault();
-    }, [frameBack, videoFps]);
+    }, [pauseAndReturnToPlayStart, playing]);
+    const onArrowLeft = (0, react_1.useCallback)((e) => {
+        e.preventDefault();
+        if (e.altKey) {
+            seek(0);
+            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+                direction: 'fit-left',
+                durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+                frame: 0,
+            });
+        }
+        else if (e.shiftKey) {
+            frameBack((0, imperative_state_1.getCurrentFps)());
+            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+                direction: 'fit-left',
+                durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+                frame: Math.max(0, (0, imperative_state_1.getCurrentFrame)() - (0, imperative_state_1.getCurrentFps)()),
+            });
+        }
+        else {
+            frameBack(1);
+            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+                direction: 'fit-left',
+                durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+                frame: Math.max(0, (0, imperative_state_1.getCurrentFrame)() - 1),
+            });
+        }
+    }, [frameBack, seek]);
     const onArrowRight = (0, react_1.useCallback)((e) => {
-        if (!videoFps) {
-            return null;
+        if (e.altKey) {
+            seek((0, imperative_state_1.getCurrentDuration)() - 1);
+            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+                direction: 'fit-right',
+                durationInFrames: (0, imperative_state_1.getCurrentDuration)() - 1,
+                frame: (0, imperative_state_1.getCurrentDuration)() - 1,
+            });
+        }
+        else if (e.shiftKey) {
+            frameForward((0, imperative_state_1.getCurrentFps)());
+            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+                direction: 'fit-right',
+                durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+                frame: Math.min((0, imperative_state_1.getCurrentDuration)() - 1, (0, imperative_state_1.getCurrentFrame)() + (0, imperative_state_1.getCurrentFps)()),
+            });
+        }
+        else {
+            frameForward(1);
+            (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+                direction: 'fit-right',
+                durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+                frame: (0, imperative_state_1.getCurrentFrame)() + 1,
+            });
         }
-        frameForward(e.shiftKey ? videoFps : 1);
         e.preventDefault();
-    }, [frameForward, videoFps]);
+    }, [frameForward, seek]);
     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)(() => {
+        seek((0, imperative_state_1.getCurrentDuration)() - 1);
+    }, [seek]);
     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 arrowLeft = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'ArrowLeft',
+            callback: onArrowLeft,
+            commandCtrlKey: false,
+        });
+        const arrowRight = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'ArrowRight',
+            callback: onArrowRight,
+            commandCtrlKey: false,
+        });
+        const space = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: ' ',
+            callback: onSpace,
+            commandCtrlKey: false,
+        });
+        const enter = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'enter',
+            callback: onEnter,
+            commandCtrlKey: false,
+        });
+        const a = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'a',
+            callback: jumpToStart,
+            commandCtrlKey: false,
+        });
+        const e = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'e',
+            callback: jumpToEnd,
+            commandCtrlKey: false,
+        });
         return () => {
             arrowLeft.unregister();
             arrowRight.unregister();
             space.unregister();
+            enter.unregister();
+            a.unregister();
+            e.unregister();
         };
-    }, [keybindings, onArrowLeft, onArrowRight, onSpace]);
+    }, [
+        jumpToEnd,
+        jumpToStart,
+        keybindings,
+        onArrowLeft,
+        onArrowRight,
+        onEnter,
+        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 }, void 0) }, void 0), (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: isFirstFrame, 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: isFirstFrame, 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', onClick: playing ? pause : play, children: playing ? ((0, jsx_runtime_1.jsx)(pause_1.Pause, { style: {
                         height: 14,
                         width: 14,
                         color: 'white',
-                    } }, void 0)) : ((0, jsx_runtime_1.jsx)(play_1.Play, { style: {
+                    } })) : ((0, jsx_runtime_1.jsx)(play_1.Play, { style: {
                         height: 14,
                         width: 14,
                         color: 'white',
-                    } }, void 0)) }, void 0), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": "Step forward one frame", title: "Step forward one frame", disabled: isLastFrame, onClick: oneFrameForward, children: (0, jsx_runtime_1.jsx)(step_forward_1.StepForward, { style: forwardBackStyle }, void 0) }, void 0)] }, void 0));
+                    } })) }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { "aria-label": "Step forward one frame", title: "Step forward one frame", disabled: isLastFrame, onClick: oneFrameForward, children: (0, jsx_runtime_1.jsx)(step_forward_1.StepForward, { style: forwardBackStyle }) })] }));
 };
 exports.PlayPause = PlayPause;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import type React from 'react';
 export declare const PlaybackKeyboardShortcutsManager: React.FC<{
     setPlaybackRate: React.Dispatch<React.SetStateAction<number>>;
 }>;

package/dist/editor/components/PlaybackKeyboardShortcutsManager.js

@@ -12,19 +12,13 @@ const PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
             if (!playing) {
                 return -1;
             }
-            if (prevPlaybackRate > 0) {
+            if (prevPlaybackRate > -1) {
                 return -1;
             }
-            if (prevPlaybackRate === -1) {
+            if (prevPlaybackRate > -2) {
                 return -2;
             }
-            if (prevPlaybackRate === -2) {
-                return -4;
-            }
-            if (prevPlaybackRate === -4) {
-                return -4;
-            }
-            throw new Error('unexpected previous playrate when pressing J: ' + prevPlaybackRate);
+            return -4;
         });
         play();
     }, [play, playing, setPlaybackRate]);
@@ -37,26 +31,35 @@ const PlaybackKeyboardShortcutsManager = ({ setPlaybackRate }) => {
             if (!playing) {
                 return 1;
             }
-            if (prevPlaybackRate < 0) {
+            if (prevPlaybackRate < 1) {
                 return 1;
             }
-            if (prevPlaybackRate === 1) {
+            if (prevPlaybackRate < 2) {
                 return 2;
             }
-            if (prevPlaybackRate === 2) {
-                return 4;
-            }
-            if (prevPlaybackRate === 4) {
-                return 4;
-            }
-            throw new Error('unexpected previous playrate when pressing L: ' + prevPlaybackRate);
+            return 4;
         });
         play();
     }, [play, playing, setPlaybackRate]);
     (0, react_1.useEffect)(() => {
-        const jKey = keybindings.registerKeybinding('keydown', 'j', onJKey);
-        const kKey = keybindings.registerKeybinding('keydown', 'k', onKKey);
-        const lKey = keybindings.registerKeybinding('keydown', 'l', onLKey);
+        const jKey = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'j',
+            callback: onJKey,
+            commandCtrlKey: false,
+        });
+        const kKey = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'k',
+            callback: onKKey,
+            commandCtrlKey: false,
+        });
+        const lKey = keybindings.registerKeybinding({
+            event: 'keydown',
+            key: 'l',
+            callback: onLKey,
+            commandCtrlKey: false,
+        });
         return () => {
             jKey.unregister();
             kKey.unregister();

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

@@ -1,2 +1,2 @@
-import React from 'react';
+import type React from 'react';
 export declare const PlaybackRatePersistor: React.FC;