@remotion/cli 4.0.0-preload.13 → 4.0.0-spawn.13

package/dist/editor/components/MenuToolbar.js

@@ -8,6 +8,7 @@ const checkerboard_1 = require("../state/checkerboard");
 const modals_1 = require("../state/modals");
 const preview_size_1 = require("../state/preview-size");
 const rich_timeline_1 = require("../state/rich-timeline");
+const sidebar_1 = require("../state/sidebar");
 const timeline_ref_1 = require("../state/timeline-ref");
 const layout_1 = require("./layout");
 const MenuItem_1 = require("./Menu/MenuItem");
@@ -44,6 +45,7 @@ const MenuToolbar = () => {
     const { checkerboard, setCheckerboard } = (0, react_1.useContext)(checkerboard_1.CheckerboardContext);
     const { richTimeline, setRichTimeline } = (0, react_1.useContext)(rich_timeline_1.RichTimelineContext);
     const { size, setSize } = (0, react_1.useContext)(preview_size_1.PreviewSizeContext);
+    const { setSidebarCollapsedState, sidebarCollapsedState } = (0, react_1.useContext)(sidebar_1.SidebarContext);
     const itemClicked = (0, react_1.useCallback)((itemId) => {
         setSelected(itemId);
     }, [setSelected]);
@@ -59,7 +61,7 @@ const MenuToolbar = () => {
         return [
             {
                 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" }, void 0) }, void 0) }, void 0)),
+                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" }) }) })),
                 leaveLeftPadding: false,
                 items: [
                     {
@@ -162,7 +164,7 @@ const MenuToolbar = () => {
                                 id: String(newSize),
                                 keyHint: null,
                                 label: (0, SizeSelector_1.getPreviewSizeLabel)(newSize),
-                                leftItem: String(newSize) === String(size) ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}, void 0) : null,
+                                leftItem: String(newSize) === String(size) ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
                                 onClick: () => {
                                     close();
                                     setSize(() => newSize);
@@ -173,6 +175,65 @@ const MenuToolbar = () => {
                             })),
                         },
                     },
+                    {
+                        id: 'timeline-divider',
+                        type: 'divider',
+                    },
+                    {
+                        id: 'left-sidebar',
+                        label: 'Sidebar',
+                        keyHint: null,
+                        type: 'item',
+                        value: 'preview-size',
+                        leftItem: null,
+                        subMenu: {
+                            leaveLeftSpace: true,
+                            preselectIndex: 0,
+                            items: [
+                                {
+                                    id: 'sidebar-responsive',
+                                    keyHint: null,
+                                    label: 'Responsive',
+                                    leftItem: sidebarCollapsedState === 'responsive' ? ((0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {})) : null,
+                                    onClick: () => {
+                                        setSidebarCollapsedState('responsive');
+                                    },
+                                    subMenu: null,
+                                    type: 'item',
+                                    value: 'responsive',
+                                },
+                                {
+                                    id: 'sidebar-expanded',
+                                    keyHint: null,
+                                    label: 'Expanded',
+                                    leftItem: sidebarCollapsedState === 'expanded' ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
+                                    onClick: () => {
+                                        setSidebarCollapsedState('expanded');
+                                    },
+                                    subMenu: null,
+                                    type: 'item',
+                                    value: 'expanded',
+                                },
+                                {
+                                    id: 'sidebar-collapsed',
+                                    keyHint: null,
+                                    label: 'Collapsed',
+                                    leftItem: sidebarCollapsedState === 'collapsed' ? ((0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {})) : null,
+                                    onClick: () => {
+                                        setSidebarCollapsedState('collapsed');
+                                    },
+                                    subMenu: null,
+                                    type: 'item',
+                                    value: 'collapsed',
+                                },
+                            ],
+                        },
+                        onClick: () => undefined,
+                    },
+                    {
+                        id: 'timeline-divider',
+                        type: 'divider',
+                    },
                     {
                         id: 'checkerboard',
                         keyHint: 'T',
@@ -183,7 +244,7 @@ const MenuToolbar = () => {
                         },
                         type: 'item',
                         value: 'checkerboard',
-                        leftItem: checkerboard ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}, void 0) : null,
+                        leftItem: checkerboard ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
                         subMenu: null,
                     },
                     {
@@ -200,7 +261,7 @@ const MenuToolbar = () => {
                         },
                         type: 'item',
                         value: 'rich-timeline',
-                        leftItem: richTimeline ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}, void 0) : null,
+                        leftItem: richTimeline ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
                         subMenu: null,
                     },
                     {
@@ -391,7 +452,9 @@ const MenuToolbar = () => {
         setCheckerboard,
         setRichTimeline,
         setSelectedModal,
+        setSidebarCollapsedState,
         setSize,
+        sidebarCollapsedState,
         size,
     ]);
     const menus = (0, react_1.useMemo)(() => {
@@ -421,6 +484,6 @@ const MenuToolbar = () => {
     }, [setSelected]);
     return ((0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", className: "css-reset", style: row, children: [structure.map((s) => {
                 return ((0, jsx_runtime_1.jsx)(MenuItem_1.MenuItem, { selected: selected === s.id, onItemSelected: itemClicked, onItemHovered: itemHovered, id: s.id, label: s.label, onItemQuit: onItemQuit, menu: s, onPreviousMenu: onPreviousMenu, onNextMenu: onNextMenu, leaveLeftPadding: s.leaveLeftPadding }, s.id));
-            }), (0, jsx_runtime_1.jsx)(UpdateCheck_1.UpdateCheck, {}, void 0), (0, jsx_runtime_1.jsx)("div", { style: flex }, void 0), (0, jsx_runtime_1.jsx)("div", { style: cwd, title: window.remotion_cwd, children: window.remotion_projectName }, void 0)] }, void 0));
+            }), (0, jsx_runtime_1.jsx)(UpdateCheck_1.UpdateCheck, {}), (0, jsx_runtime_1.jsx)("div", { style: flex }), (0, jsx_runtime_1.jsx)("div", { style: cwd, title: window.remotion_cwd, children: window.remotion_projectName })] }));
 };
 exports.MenuToolbar = MenuToolbar;

package/dist/editor/components/ModalContainer.js

@@ -20,6 +20,6 @@ const panel = {
     color: 'white',
 };
 const ModalContainer = ({ children, onEscape, onOutsideClick }) => {
-    return ((0, jsx_runtime_1.jsx)("div", { className: "css-reset", style: backgroundOverlay, role: "dialog", "aria-modal": "true", children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onOutsideClick: onOutsideClick, onEscape: onEscape, children: (0, jsx_runtime_1.jsx)("div", { style: panel, children: children }, void 0) }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("div", { className: "css-reset", style: backgroundOverlay, role: "dialog", "aria-modal": "true", children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onOutsideClick: onOutsideClick, onEscape: onEscape, children: (0, jsx_runtime_1.jsx)("div", { style: panel, children: children }) }) }));
 };
 exports.ModalContainer = ModalContainer;

package/dist/editor/components/ModalHeader.js

@@ -23,6 +23,6 @@ const NewCompHeader = ({ title }) => {
     const onPress = (0, react_1.useCallback)(() => {
         setSelectedModal(null);
     }, [setSelectedModal]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { children: title }, void 0), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}, void 0), (0, jsx_runtime_1.jsx)(CancelButton_1.CancelButton, { style: icon, onPress: onPress }, void 0)] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("div", { children: title }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(CancelButton_1.CancelButton, { style: icon, onPress: onPress })] }));
 };
 exports.NewCompHeader = NewCompHeader;

package/dist/editor/components/MuteToggle.js

@@ -19,6 +19,6 @@ const MuteToggle = ({ muted, setMuted }) => {
     if (isStill) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: muted ? (0, jsx_runtime_1.jsx)(media_volume_1.VolumeOffIcon, {}, void 0) : (0, jsx_runtime_1.jsx)(media_volume_1.VolumeOnIcon, {}, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { title: accessibilityLabel, "aria-label": accessibilityLabel, onClick: onClick, children: muted ? (0, jsx_runtime_1.jsx)(media_volume_1.VolumeOffIcon, {}) : (0, jsx_runtime_1.jsx)(media_volume_1.VolumeOnIcon, {}) }));
 };
 exports.MuteToggle = MuteToggle;

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

@@ -12,6 +12,6 @@ const style = {
 };
 const CancelButton = ({ onPress, ...props }) => {
     const { tabIndex } = (0, z_index_1.useZIndex)();
-    return ((0, jsx_runtime_1.jsx)("button", { tabIndex: tabIndex, style: style, type: "button", onClick: onPress, children: (0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 320 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z" }, void 0) }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("button", { tabIndex: tabIndex, style: style, type: "button", onClick: onPress, children: (0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 320 512", ...props, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z" }) }) }));
 };
 exports.CancelButton = CancelButton;

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

@@ -83,8 +83,8 @@ const Combobox = ({ values, selectedId, style: customStyle, title }) => {
                     : colors_1.INPUT_BORDER_COLOR_UNHOVERED,
         };
     }, [customStyle, hovered, opened]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { ref: ref, title: title, tabIndex: tabIndex, type: "button", style: style, children: [selected.label, " ", (0, jsx_runtime_1.jsx)(layout_1.Flex, {}, void 0), " ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }, void 0), " ", (0, jsx_runtime_1.jsx)(caret_1.CaretDown, {}, void 0)] }, void 0), portalStyle
-                ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { style: styles_1.outerPortal, className: "css-reset", children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, children: (0, jsx_runtime_1.jsx)(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: values.findIndex((v) => v.id === selected.id), topItemCanBeUnselected: false }, void 0) }, void 0) }, void 0) }, void 0), (0, portals_1.getPortal)(currentZIndex))
-                : null] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { ref: ref, title: title, tabIndex: tabIndex, type: "button", style: style, children: [selected.label, " ", (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), " ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), " ", (0, jsx_runtime_1.jsx)(caret_1.CaretDown, {})] }), portalStyle
+                ? react_dom_1.default.createPortal((0, jsx_runtime_1.jsx)("div", { style: styles_1.outerPortal, className: "css-reset", children: (0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onOutsideClick: onHide, onEscape: onHide, children: (0, jsx_runtime_1.jsx)("div", { style: portalStyle, children: (0, jsx_runtime_1.jsx)(MenuContent_1.MenuContent, { onNextMenu: noop_1.noop, onPreviousMenu: noop_1.noop, values: values, onHide: onHide, leaveLeftSpace: true, preselectIndex: values.findIndex((v) => v.id === selected.id), topItemCanBeUnselected: false }) }) }) }), (0, portals_1.getPortal)(currentZIndex))
+                : null] }));
 };
 exports.Combobox = Combobox;

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

@@ -24,6 +24,6 @@ const CopyHint = () => {
     if (!projectInfo || !projectInfo.videoFile) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: style, children: ["Copy this into ", (0, jsx_runtime_1.jsx)("br", {}, void 0), " your", ' ', (0, jsx_runtime_1.jsx)("span", { style: style, title: projectInfo.videoFile, children: projectInfo.relativeVideoFile }, void 0), ' ', "file."] }, void 0));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: style, children: ["Copy this into ", (0, jsx_runtime_1.jsx)("br", {}), " your", ' ', (0, jsx_runtime_1.jsx)("span", { style: style, title: projectInfo.videoFile, children: projectInfo.relativeVideoFile }), ' ', "file."] }));
 };
 exports.CopyHint = CopyHint;

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

@@ -75,8 +75,8 @@ const InputDragger = ({ onValueChange, min: _min, step: _step, value, ...props }
         }
     }, [inputFallback]);
     if (inputFallback) {
-        return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: onBlur, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyPress: onKeyPress, onBlur: onBlur, value: value, min: _min, step: _step, ...props }, void 0) }, void 0));
+        return ((0, jsx_runtime_1.jsx)(z_index_1.HigherZIndex, { onEscape: onBlur, onOutsideClick: noop_1.noop, children: (0, jsx_runtime_1.jsx)(RemInput_1.RemotionInput, { ref: fallbackRef, autoFocus: true, onKeyPress: onKeyPress, onBlur: onBlur, value: value, min: _min, step: _step, ...props }) }));
     }
-    return ((0, jsx_runtime_1.jsx)("button", { type: "button", style: style, onClick: onClick, onPointerDown: onPointerDown, children: (0, jsx_runtime_1.jsx)("span", { style: span, children: value }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("button", { type: "button", style: style, onClick: onClick, onPointerDown: onPointerDown, children: (0, jsx_runtime_1.jsx)("span", { style: span, children: value }) }));
 };
 exports.InputDragger = InputDragger;

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

@@ -167,6 +167,6 @@ const MenuContent = ({ onHide, values, preselectIndex, onNextMenu, onPreviousMen
                 item.onClick(item.id);
             };
             return ((0, jsx_runtime_1.jsx)(MenuSubItem_1.MenuSubItem, { selected: item.id === selectedItem, onActionChosen: onClick, onItemSelected: onItemSelected, label: item.label, id: item.id, keyHint: item.keyHint, leaveLeftSpace: leaveLeftSpace, leftItem: item.leftItem, subMenu: item.subMenu, onQuitMenu: onHide, onNextMenu: onNextMenu, subMenuActivated: subMenuActivated, setSubMenuActivated: setSubMenuActivated }, item.id));
-        }) }, void 0));
+        }) }));
 };
 exports.MenuContent = MenuContent;

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

@@ -15,6 +15,6 @@ const container = {
 };
 const NewCompAspectRatio = ({ width, height, aspectRatioLocked, setAspectRatioLocked }) => {
     const pixels = Number(width) * Number(height);
-    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("svg", { width: GUIDE_WIDTH, height: GUIDE_HEIGHT, children: (0, jsx_runtime_1.jsx)("path", { d: `M 0 0 L ${GUIDE_WIDTH} 0 L ${GUIDE_WIDTH} ${GUIDE_HEIGHT} L 0 ${GUIDE_HEIGHT}`, fill: "transparent", strokeWidth: "2", stroke: "rgba(255, 255, 255, 0.2)" }, void 0) }, void 0), (0, jsx_runtime_1.jsx)(ToggleAspectRatio_1.ToggleAspectRatio, { aspectRatioLocked: Boolean(aspectRatioLocked), setAspectRatioLocked: setAspectRatioLocked }, void 0), pixels > 0 ? ((0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.rightLabel, children: ["Aspect ratio ", (0, render_aspect_ratio_1.aspectRatio)(Number(width), Number(height))] }, void 0)) : null] }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)("svg", { width: GUIDE_WIDTH, height: GUIDE_HEIGHT, children: (0, jsx_runtime_1.jsx)("path", { d: `M 0 0 L ${GUIDE_WIDTH} 0 L ${GUIDE_WIDTH} ${GUIDE_HEIGHT} L 0 ${GUIDE_HEIGHT}`, fill: "transparent", strokeWidth: "2", stroke: "rgba(255, 255, 255, 0.2)" }) }), (0, jsx_runtime_1.jsx)(ToggleAspectRatio_1.ToggleAspectRatio, { aspectRatioLocked: Boolean(aspectRatioLocked), setAspectRatioLocked: setAspectRatioLocked }), pixels > 0 ? ((0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.rightLabel, children: ["Aspect ratio ", (0, render_aspect_ratio_1.aspectRatio)(Number(width), Number(height))] })) : null] }) }));
 };
 exports.NewCompAspectRatio = NewCompAspectRatio;

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

@@ -16,6 +16,6 @@ const NewCompDuration = ({ durationInFrames, setDurationInFrames, fps }) => {
         setDurationInFrames(String(newVal));
     }, [setDurationInFrames]);
     const compDurationErrMessage = (0, validate_new_comp_data_1.validateCompositionDuration)(durationInFrames);
-    return ((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: " Duration in frames" }, 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: durationInFrames, onChange: onDurationInFramesChanged, placeholder: "Duration (frames)", name: "durationInFrames", min: 1, step: 1, max: 100000000, onValueChange: onDurationChangedDirectly }, void 0), compDurationErrMessage ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: compDurationErrMessage }, void 0)) : null] }, void 0), (0, jsx_runtime_1.jsxs)("span", { style: new_comp_layout_1.rightLabel, children: [(Number(durationInFrames) / Number(fps)).toFixed(2), "sec"] }, void 0)] }, void 0) }, void 0) }, void 0));
+    return ((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: " Duration in frames" }), (0, jsx_runtime_1.jsxs)("div", { style: new_comp_layout_1.inputArea, children: [(0, jsx_runtime_1.jsx)(InputDragger_1.InputDragger, { type: "number", value: durationInFrames, onChange: onDurationInFramesChanged, placeholder: "Duration (frames)", name: "durationInFrames", min: 1, step: 1, max: 100000000, onValueChange: onDurationChangedDirectly }), compDurationErrMessage ? ((0, jsx_runtime_1.jsx)(ValidationMessage_1.ValidationMessage, { message: compDurationErrMessage })) : null] }), (0, jsx_runtime_1.jsxs)("span", { style: new_comp_layout_1.rightLabel, children: [(Number(durationInFrames) / Number(fps)).toFixed(2), "sec"] })] }) }) }));
 };
 exports.NewCompDuration = NewCompDuration;

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

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

@@ -40,13 +40,13 @@ const PlaybackRateSelector = ({ playbackRate, setPlaybackRate }) => {
                 type: 'item',
                 value: newPlaybackRate,
                 keyHint: null,
-                leftItem: String(playbackRate) === String(newPlaybackRate) ? ((0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}, void 0)) : null,
+                leftItem: String(playbackRate) === String(newPlaybackRate) ? ((0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {})) : null,
                 subMenu: null,
             };
         });
         const middle = Math.floor(exports.commonPlaybackRates.length / 2);
         return [...values.slice(0, middle), divider, ...values.slice(middle)];
     }, [playbackRate, setPlaybackRate]);
-    return ((0, jsx_runtime_1.jsx)("div", { style: style, "aria-label": accessibilityLabel, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: accessibilityLabel, style: comboStyle, selectedId: String(playbackRate), values: items }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("div", { style: style, "aria-label": accessibilityLabel, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: accessibilityLabel, style: comboStyle, selectedId: String(playbackRate), values: items }) }));
 };
 exports.PlaybackRateSelector = PlaybackRateSelector;

package/dist/editor/components/Preview.js

@@ -68,13 +68,13 @@ const Inner = ({ canvasSize }) => {
     ]);
     const Component = video ? video.component : null;
     const inputProps = (0, remotion_1.getInputProps)();
-    return ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(LoadingIndicator_1.Loading, {}, void 0), children: (0, jsx_runtime_1.jsx)("div", { style: outer, children: (0, jsx_runtime_1.jsx)("div", { style: style, children: Component ? ((0, jsx_runtime_1.jsx)(Component, { ...((_a = video === null || video === void 0 ? void 0 : video.defaultProps) !== null && _a !== void 0 ? _a : {}), ...inputProps }, void 0)) : null }, void 0) }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(LoadingIndicator_1.Loading, {}), children: (0, jsx_runtime_1.jsx)("div", { style: outer, children: (0, jsx_runtime_1.jsx)("div", { style: style, children: Component ? ((0, jsx_runtime_1.jsx)(Component, { ...((_a = video === null || video === void 0 ? void 0 : video.defaultProps) !== null && _a !== void 0 ? _a : {}), ...inputProps })) : null }) }) }));
 };
 const VideoPreview = ({ canvasSize }) => {
     const config = remotion_1.Internals.useUnsafeVideoConfig();
     if (!config) {
         return null;
     }
-    return (0, jsx_runtime_1.jsx)(Inner, { canvasSize: canvasSize }, void 0);
+    return (0, jsx_runtime_1.jsx)(Inner, { canvasSize: canvasSize });
 };
 exports.VideoPreview = VideoPreview;

package/dist/editor/components/PreviewToolbar.js

@@ -43,6 +43,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 }, void 0), (0, jsx_runtime_1.jsx)(TimeValue_1.TimeValue, {}, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}, void 0), (0, jsx_runtime_1.jsx)(SizeSelector_1.SizeSelector, {}, void 0), (0, jsx_runtime_1.jsx)(PlaybackRateSelector_1.PlaybackRateSelector, { setPlaybackRate: setPlaybackRate, playbackRate: playbackRate }, void 0), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }, void 0), (0, jsx_runtime_1.jsx)(PlayPause_1.PlayPause, { loop: loop, playbackRate: playbackRate }, void 0), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 2 }, void 0), (0, jsx_runtime_1.jsx)(LoopToggle_1.LoopToggle, { loop: loop, setLoop: setLoop }, void 0), (0, jsx_runtime_1.jsx)(CheckboardToggle_1.CheckboardToggle, {}, void 0), (0, jsx_runtime_1.jsx)(RichTimelineToggle_1.RichTimelineToggle, {}, void 0), (0, jsx_runtime_1.jsx)(TimelineInOutToggle_1.TimelineInOutPointToggle, {}, void 0), (0, jsx_runtime_1.jsx)(MuteToggle_1.MuteToggle, { muted: mediaMuted, setMuted: setMediaMuted }, void 0), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}, void 0), (0, jsx_runtime_1.jsxs)("div", { style: sideContainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}, void 0), (0, jsx_runtime_1.jsx)(FpsCounter_1.FpsCounter, { playbackSpeed: playbackRate }, void 0), (0, jsx_runtime_1.jsx)("div", { style: padding }, void 0)] }, void 0), (0, jsx_runtime_1.jsx)(PlaybackKeyboardShortcutsManager_1.PlaybackKeyboardShortcutsManager, { setPlaybackRate: setPlaybackRate }, void 0), (0, jsx_runtime_1.jsx)(PlaybackRatePersistor_1.PlaybackRatePersistor, {}, void 0)] }, void 0));
+    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)(TimeValue_1.TimeValue, {})] }), (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, {})] }));
 };
 exports.PreviewToolbar = PreviewToolbar;

package/dist/editor/components/RichTimelineToggle.js

@@ -24,6 +24,6 @@ const RichTimelineToggle = () => {
                 width: 16,
                 height: 16,
                 color: richTimeline ? 'var(--blue)' : 'white',
-            } }, void 0) }, void 0));
+            } }) }));
 };
 exports.RichTimelineToggle = RichTimelineToggle;

package/dist/editor/components/SizeSelector.js

@@ -45,11 +45,11 @@ const SizeSelector = () => {
                 type: 'item',
                 value: newSize,
                 keyHint: null,
-                leftItem: String(size) === String(newSize) ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}, void 0) : null,
+                leftItem: String(size) === String(newSize) ? (0, jsx_runtime_1.jsx)(Checkmark_1.Checkmark, {}) : null,
                 subMenu: null,
             };
         });
     }, [setSize, size]);
-    return ((0, jsx_runtime_1.jsx)("div", { style: style, "aria-label": accessibilityLabel, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: accessibilityLabel, style: comboStyle, selectedId: String(size), values: items }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)("div", { style: style, "aria-label": accessibilityLabel, children: (0, jsx_runtime_1.jsx)(ComboBox_1.Combobox, { title: accessibilityLabel, style: comboStyle, selectedId: String(size), values: items }) }));
 };
 exports.SizeSelector = SizeSelector;

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

@@ -62,6 +62,6 @@ const SplitterContainer = ({ orientation, children, defaultFlex, maxFlex, minFle
         orientation,
         persistFlex,
     ]);
-    return ((0, jsx_runtime_1.jsx)(SplitterContext_1.SplitterContext.Provider, { value: value, children: (0, jsx_runtime_1.jsx)("div", { ref: ref, style: orientation === 'horizontal' ? containerColumn : containerRow, children: children }, void 0) }, void 0));
+    return ((0, jsx_runtime_1.jsx)(SplitterContext_1.SplitterContext.Provider, { value: value, children: (0, jsx_runtime_1.jsx)("div", { ref: ref, style: orientation === 'horizontal' ? containerColumn : containerRow, children: children }) }));
 };
 exports.SplitterContainer = SplitterContainer;

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

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

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

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