@remotion/cli 4.0.0-alpha.185 → 4.0.0-alpha.217

package/dist/editor/components/RenderQueue/actions.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.canUpdateDefaultProps = exports.updateDefaultProps = exports.cancelRenderJob = exports.removeRenderJob = exports.openInFileExplorer = exports.subscribeToFileExistenceWatcher = exports.unsubscribeFromFileExistenceWatcher = exports.addVideoRenderJob = exports.addStillRenderJob = exports.callApi = void 0;
+exports.canUpdateDefaultProps = exports.updateDefaultProps = exports.cancelRenderJob = exports.removeRenderJob = exports.openInFileExplorer = exports.subscribeToFileExistenceWatcher = exports.unsubscribeFromFileExistenceWatcher = exports.addVideoRenderJob = exports.addStillRenderJob = void 0;
 const date_serialization_1 = require("../RenderModal/SchemaEditor/date-serialization");
 const callApi = (endpoint, body) => {
     return new Promise((resolve, reject) => {
@@ -25,9 +25,8 @@ const callApi = (endpoint, body) => {
         });
     });
 };
-exports.callApi = callApi;
 const addStillRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, frame, scale, verbose, chromiumOptions, delayRenderTimeout, envVariables, inputProps, }) => {
-    return (0, exports.callApi)('/api/render', {
+    return callApi('/api/render', {
         compositionId,
         type: 'still',
         outName,
@@ -44,7 +43,7 @@ const addStillRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, f
 };
 exports.addStillRenderJob = addStillRenderJob;
 const addVideoRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, scale, verbose, codec, concurrency, crf, startFrame, endFrame, muted, enforceAudioTrack, proResProfile, pixelFormat, audioBitrate, videoBitrate, everyNthFrame, numberOfGifLoops, delayRenderTimeout, audioCodec, disallowParallelEncoding, chromiumOptions, envVariables, inputProps, }) => {
-    return (0, exports.callApi)('/api/render', {
+    return callApi('/api/render', {
         compositionId,
         type: 'video',
         outName,
@@ -75,11 +74,11 @@ const addVideoRenderJob = ({ compositionId, outName, imageFormat, jpegQuality, s
 };
 exports.addVideoRenderJob = addVideoRenderJob;
 const unsubscribeFromFileExistenceWatcher = ({ file, clientId, }) => {
-    return (0, exports.callApi)('/api/unsubscribe-from-file-existence', { file, clientId });
+    return callApi('/api/unsubscribe-from-file-existence', { file, clientId });
 };
 exports.unsubscribeFromFileExistenceWatcher = unsubscribeFromFileExistenceWatcher;
 const subscribeToFileExistenceWatcher = async ({ file, clientId, }) => {
-    const { exists } = await (0, exports.callApi)('/api/subscribe-to-file-existence', {
+    const { exists } = await callApi('/api/subscribe-to-file-existence', {
         file,
         clientId,
     });
@@ -90,30 +89,30 @@ const openInFileExplorer = ({ directory }) => {
     const body = {
         directory,
     };
-    return (0, exports.callApi)('/api/open-in-file-explorer', body);
+    return callApi('/api/open-in-file-explorer', body);
 };
 exports.openInFileExplorer = openInFileExplorer;
 const removeRenderJob = (job) => {
-    return (0, exports.callApi)('/api/remove-render', {
+    return callApi('/api/remove-render', {
         jobId: job.id,
     });
 };
 exports.removeRenderJob = removeRenderJob;
 const cancelRenderJob = (job) => {
-    return (0, exports.callApi)('/api/cancel', {
+    return callApi('/api/cancel', {
         jobId: job.id,
     });
 };
 exports.cancelRenderJob = cancelRenderJob;
 const updateDefaultProps = (compositionId, defaultProps) => {
-    return (0, exports.callApi)('/api/update-default-props', {
+    return callApi('/api/update-default-props', {
         compositionId,
         defaultProps: (0, date_serialization_1.serializeJSONWithDate)(defaultProps, undefined),
     });
 };
 exports.updateDefaultProps = updateDefaultProps;
 const canUpdateDefaultProps = (compositionId) => {
-    return (0, exports.callApi)('/api/can-update-default-props', {
+    return callApi('/api/can-update-default-props', {
         compositionId,
     });
 };

package/dist/editor/components/RenderQueue/index.js

@@ -3,15 +3,39 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderQueue = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
+const layout_1 = require("../layout");
 const context_1 = require("./context");
 const RenderQueueItem_1 = require("./RenderQueueItem");
 const separatorStyle = {
     borderBottom: `1px solid ${colors_1.BORDER_COLOR}`,
 };
-// TODO: Handle state where preview server is disconnected
+const errorExplanation = {
+    fontSize: 14,
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    lineHeight: 1.5,
+};
+const explainer = {
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    padding: '0 12px',
+    justifyContent: 'center',
+    alignItems: 'center',
+    textAlign: 'center',
+};
 const RenderQueue = () => {
+    const connectionStatus = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx).type;
     const { jobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
+    const jobCount = jobs.length;
+    if (connectionStatus === 'disconnected') {
+        return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 5 }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "The preview server has disconnected." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true })] }));
+    }
+    if (jobCount === 0) {
+        return ((0, jsx_runtime_1.jsxs)("div", { style: explainer, children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 5 }), (0, jsx_runtime_1.jsx)("div", { style: errorExplanation, children: "No renders in the queue." }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { y: 2, block: true })] }));
+    }
     return ((0, jsx_runtime_1.jsx)("div", { children: jobs.map((j, index) => {
             return ((0, jsx_runtime_1.jsx)("div", { style: index === jobs.length - 1 ? undefined : separatorStyle, children: (0, jsx_runtime_1.jsx)(RenderQueueItem_1.RenderQueueItem, { job: j }) }, j.id));
         }) }));

package/dist/editor/components/RenderToolbarIcon.js

@@ -2,33 +2,45 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.RenderButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const client_1 = require("@remotion/renderer/client");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const get_default_out_name_1 = require("../../get-default-out-name");
+const Button_1 = require("../../preview-server/error-overlay/remotion-overlay/Button");
 const get_default_video_contexts_1 = require("../../preview-server/render-queue/get-default-video-contexts");
 const client_id_1 = require("../helpers/client-id");
 const use_keybinding_1 = require("../helpers/use-keybinding");
 const render_1 = require("../icons/render");
 const modals_1 = require("../state/modals");
-const ControlButton_1 = require("./ControlButton");
+const layout_1 = require("./layout");
+const button = {
+    paddingLeft: 7,
+    paddingRight: 7,
+    paddingTop: 7,
+    paddingBottom: 7,
+};
+const label = {
+    fontSize: 14,
+};
 const RenderButton = () => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const { type } = (0, react_1.useContext)(client_id_1.PreviewServerConnectionCtx);
+    const shortcut = (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? '' : '(R)';
+    const tooltip = type === 'connected'
+        ? 'Export the current composition ' + shortcut
+        : 'Connect to the preview server to render';
     const iconStyle = (0, react_1.useMemo)(() => {
         return {
             style: {
-                height: 18,
+                height: 16,
             },
         };
     }, []);
-    const shortcut = (0, use_keybinding_1.areKeyboardShortcutsDisabled)() ? '' : '(R)';
-    const tooltip = type === 'connected'
-        ? 'Export the current composition ' + shortcut
-        : 'Connect to the preview server to render';
     const video = remotion_1.Internals.useVideo();
     const frame = (0, remotion_1.useCurrentFrame)();
+    const { props } = (0, react_1.useContext)(remotion_1.Internals.EditorPropsContext);
     const onClick = (0, react_1.useCallback)(() => {
-        var _a, _b;
+        var _a, _b, _c;
         if (!video) {
             return null;
         }
@@ -49,7 +61,9 @@ const RenderButton = () => {
             initialVideoImageFormat: defaults.videoImageFormat,
             initialOutName: (0, get_default_out_name_1.getDefaultOutLocation)({
                 compositionName: video.id,
-                defaultExtension: isVideo ? 'mp4' : 'png',
+                defaultExtension: isVideo
+                    ? client_1.BrowserSafeApis.getFileExtensionFromCodec(initialVideoCodec, defaults.audioCodec)
+                    : defaults.stillImageFormat,
                 type: 'asset',
             }),
             initialJpegQuality: defaults.jpegQuality,
@@ -76,11 +90,12 @@ const RenderButton = () => {
             initialOpenGlRenderer: defaults.openGlRenderer,
             initialHeadless: defaults.headless,
             initialIgnoreCertificateErrors: defaults.ignoreCertificateErrors,
+            defaultProps: (_c = props[video.id]) !== null && _c !== void 0 ? _c : video.defaultProps,
         });
-    }, [video, frame, setSelectedModal]);
+    }, [video, setSelectedModal, frame, props]);
     if (!video) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { id: "render-modal-button", disabled: type !== 'connected', title: tooltip, "aria-label": tooltip, onClick: onClick, children: (0, jsx_runtime_1.jsx)(render_1.RenderIcon, { svgProps: iconStyle }) }));
+    return ((0, jsx_runtime_1.jsx)(Button_1.Button, { id: "render-modal-button", title: tooltip, onClick: onClick, buttonContainerStyle: button, children: (0, jsx_runtime_1.jsxs)(layout_1.Row, { align: "center", children: [(0, jsx_runtime_1.jsx)(render_1.RenderIcon, { svgProps: iconStyle }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("span", { style: label, children: "Render" })] }) }));
 };
 exports.RenderButton = RenderButton;

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

@@ -1,4 +1,3 @@
-import type { PropsWithChildren } from 'react';
 import React from 'react';
 export declare type SegmentedControlItem = {
     label: React.ReactNode;
@@ -10,7 +9,3 @@ export declare const SegmentedControl: React.FC<{
     items: SegmentedControlItem[];
     needsWrapping: boolean;
 }>;
-export declare const Item: React.FC<PropsWithChildren<{
-    selected: boolean;
-    onClick: () => void;
-}>>;

package/dist/editor/components/SegmentedControl.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Item = exports.SegmentedControl = void 0;
+exports.SegmentedControl = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
@@ -38,7 +38,7 @@ const SegmentedControl = ({ items, needsWrapping }) => {
         };
     }, [needsWrapping]);
     return ((0, jsx_runtime_1.jsx)("div", { style: controlStyle, children: items.map((i) => {
-            return ((0, jsx_runtime_1.jsx)(exports.Item, { onClick: i.onClick, selected: i.selected, children: i.label }, i.key));
+            return ((0, jsx_runtime_1.jsx)(Item, { onClick: i.onClick, selected: i.selected, children: i.label }, i.key));
         }) }));
 };
 exports.SegmentedControl = SegmentedControl;
@@ -60,4 +60,3 @@ const Item = ({ selected, onClick, children }) => {
     }, [hovered, selected]);
     return ((0, jsx_runtime_1.jsx)("button", { type: "button", onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: itemStyle, tabIndex: tabIndex, onClick: onClick, children: children }));
 };
-exports.Item = Item;

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

@@ -1,6 +1,5 @@
 import type { PreviewSize } from '@remotion/player';
 import React from 'react';
-export declare const commonPreviewSizes: PreviewSize[];
 export declare const getPreviewSizeLabel: (previewSize: PreviewSize) => string;
 export declare const getUniqueSizes: (size: PreviewSize) => PreviewSize[];
 export declare const SizeSelector: React.FC;

package/dist/editor/components/SizeSelector.js

@@ -1,13 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SizeSelector = exports.getUniqueSizes = exports.getPreviewSizeLabel = exports.commonPreviewSizes = void 0;
+exports.SizeSelector = exports.getUniqueSizes = exports.getPreviewSizeLabel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const Checkmark_1 = require("../icons/Checkmark");
 const preview_size_1 = require("../state/preview-size");
 const ControlButton_1 = require("./ControlButton");
 const ComboBox_1 = require("./NewComposition/ComboBox");
-exports.commonPreviewSizes = [
+const commonPreviewSizes = [
     {
         size: 'auto',
         translation: {
@@ -47,7 +47,7 @@ exports.getPreviewSizeLabel = getPreviewSizeLabel;
 const accessibilityLabel = 'Preview Size';
 const comboStyle = { width: 80 };
 const getUniqueSizes = (size) => {
-    const customPreviewSizes = [size, ...exports.commonPreviewSizes];
+    const customPreviewSizes = [size, ...commonPreviewSizes];
     const uniqueSizes = [];
     customPreviewSizes.forEach((p) => {
         if (!uniqueSizes.find((s) => s.size === p.size)) {

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

@@ -14,6 +14,7 @@ const SplitterElement = ({ children, type }) => {
             display: 'flex',
             position: 'relative',
             overflow: 'hidden',
+            flexDirection: 'column',
         };
     }, [context.flexValue, type]);
     return (0, jsx_runtime_1.jsx)("div", { style: style, children: children });

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

@@ -1,5 +1,4 @@
 import React from 'react';
-export declare const SPLITTER_HANDLE_SIZE = 3;
 export declare const SplitterHandle: React.FC<{
     allowToCollapse: 'right' | 'left' | 'none';
     onCollapse: () => void;

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

@@ -1,17 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SplitterHandle = exports.SPLITTER_HANDLE_SIZE = void 0;
+exports.SplitterHandle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const player_1 = require("@remotion/player");
 const react_1 = require("react");
 const SplitterContext_1 = require("./SplitterContext");
-exports.SPLITTER_HANDLE_SIZE = 3;
+const SPLITTER_HANDLE_SIZE = 3;
 const containerRow = {
-    height: exports.SPLITTER_HANDLE_SIZE,
+    height: SPLITTER_HANDLE_SIZE,
     cursor: 'row-resize',
 };
 const containerColumn = {
-    width: exports.SPLITTER_HANDLE_SIZE,
+    width: SPLITTER_HANDLE_SIZE,
     cursor: 'col-resize',
 };
 const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
@@ -43,10 +43,10 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
             const change = (() => {
                 if (context.orientation === 'vertical') {
                     return ((e.clientX - context.isDragging.current.x) /
-                        (width - exports.SPLITTER_HANDLE_SIZE));
+                        (width - SPLITTER_HANDLE_SIZE));
                 }
                 return ((e.clientY - context.isDragging.current.y) /
-                    (height - exports.SPLITTER_HANDLE_SIZE));
+                    (height - SPLITTER_HANDLE_SIZE));
             })();
             const newFlex = context.flexValue + change;
             if (clamp) {

package/dist/editor/components/Tabs/index.d.ts

@@ -3,7 +3,6 @@ export declare const Tabs: React.FC<{
     children: React.ReactNode;
     style?: React.CSSProperties;
 }>;
-export declare const selectorButton: React.CSSProperties;
 export declare const Tab: React.FC<{
     children: React.ReactNode;
     onClick: React.MouseEventHandler<HTMLButtonElement>;

package/dist/editor/components/Tabs/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Tab = exports.selectorButton = exports.Tabs = void 0;
+exports.Tab = exports.Tabs = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
@@ -19,7 +19,7 @@ const Tabs = ({ children, style }) => {
     return (0, jsx_runtime_1.jsx)("div", { style: definiteStyle, children: children });
 };
 exports.Tabs = Tabs;
-exports.selectorButton = {
+const selectorButton = {
     border: 'none',
     flex: 1,
     padding: 8,
@@ -41,7 +41,7 @@ const Tab = ({ children, onClick, style, selected }) => {
     }, []);
     const definiteStyle = (0, react_1.useMemo)(() => {
         return {
-            ...exports.selectorButton,
+            ...selectorButton,
             backgroundColor: selected
                 ? 'transparent'
                 : hovered

package/dist/editor/components/Tabs/vertical.d.ts

@@ -1,9 +1,4 @@
 import React from 'react';
-export declare const VerticalTabs: React.FC<{
-    children: React.ReactNode;
-    style?: React.CSSProperties;
-}>;
-export declare const selectorButton: React.CSSProperties;
 export declare const VerticalTab: React.FC<{
     children: React.ReactNode;
     onClick: React.MouseEventHandler<HTMLButtonElement>;

package/dist/editor/components/Tabs/vertical.js

@@ -1,25 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VerticalTab = exports.selectorButton = exports.VerticalTabs = void 0;
+exports.VerticalTab = 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 tabsContainer = {
-    display: 'flex',
-    flexDirection: 'row',
-};
-const VerticalTabs = ({ children, style }) => {
-    const definiteStyle = (0, react_1.useMemo)(() => {
-        return {
-            ...tabsContainer,
-            ...style,
-        };
-    }, [style]);
-    return (0, jsx_runtime_1.jsx)("div", { style: definiteStyle, children: children });
-};
-exports.VerticalTabs = VerticalTabs;
-exports.selectorButton = {
+const selectorButton = {
     border: 'none',
     flex: 1,
     padding: 8,
@@ -41,7 +27,7 @@ const VerticalTab = ({ children, onClick, style, selected }) => {
     }, []);
     const definiteStyle = (0, react_1.useMemo)(() => {
         return {
-            ...exports.selectorButton,
+            ...selectorButton,
             backgroundColor: selected
                 ? colors_1.SELECTED_BACKGROUND
                 : hovered

package/dist/editor/components/TimeValue.js

@@ -18,14 +18,13 @@ const text = {
 const time = {
     display: 'inline-block',
     fontSize: 18,
+    lineHeight: 1,
 };
 const frameStyle = {
     color: '#ccc',
     fontSize: 10,
     fontWeight: 500,
-};
-const spacer = {
-    width: layout_1.SPACING_UNIT,
+    lineHeight: 1,
 };
 const TimeValue = () => {
     const frame = (0, remotion_1.useCurrentFrame)();
@@ -37,6 +36,6 @@ const TimeValue = () => {
     if (isStill) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: text, children: [(0, jsx_runtime_1.jsx)("div", { style: time, children: (0, render_frame_1.renderFrame)(frame, config.fps) }), ' ', (0, jsx_runtime_1.jsx)("div", { style: spacer }), (0, jsx_runtime_1.jsxs)("div", { style: frameStyle, children: [frame, " ", (0, jsx_runtime_1.jsxs)("span", { style: frameStyle, children: ["(", config.fps, " fps)"] })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: text, children: [(0, jsx_runtime_1.jsx)("div", { style: time, children: (0, render_frame_1.renderFrame)(frame, config.fps) }), " ", (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsxs)("div", { style: frameStyle, children: [frame, " ", (0, jsx_runtime_1.jsxs)("span", { style: frameStyle, children: ["(", config.fps, " fps)"] })] })] }));
 };
 exports.TimeValue = TimeValue;

package/dist/editor/components/Timeline/TimelineListItem.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const z_index_1 = require("../../state/z-index");
+const layout_1 = require("../layout");
 const TimelineCollapseToggle_1 = require("./TimelineCollapseToggle");
 const TimelineSequenceFrame_1 = require("./TimelineSequenceFrame");
 const HOOK_WIDTH = 7;
@@ -17,6 +18,9 @@ const TIMELINE_COLLAPSER_MARGIN_RIGHT = 10;
 exports.TOTAL_TIMELINE_LAYER_LEFT_PADDING = TIMELINE_COLLAPSER_WIDTH + TIMELINE_COLLAPSER_MARGIN_RIGHT + timeline_layout_1.TIMELINE_PADDING;
 const textStyle = {
     fontSize: 13,
+    whiteSpace: 'nowrap',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
 };
 const outer = {
     height: timeline_layout_1.TIMELINE_LAYER_HEIGHT + timeline_layout_1.TIMELINE_BORDER * 2,
@@ -44,14 +48,17 @@ const hook = {
 };
 const space = {
     width: SPACING,
+    flexShrink: 0,
 };
 const smallSpace = {
     width: SPACING * 0.5,
+    flexShrink: 0,
 };
 const collapser = {
     width: TIMELINE_COLLAPSER_WIDTH,
     userSelect: 'none',
     marginRight: TIMELINE_COLLAPSER_MARGIN_RIGHT,
+    flexShrink: 0,
 };
 const collapserButton = {
     ...collapser,
@@ -72,6 +79,7 @@ const TimelineListItem = ({ nestedDepth, sequence, collapsed, beforeDepth, dispa
     const padder = (0, react_1.useMemo)(() => {
         return {
             width: leftOffset * nestedDepth,
+            flexShrink: 0,
         };
     }, [leftOffset, nestedDepth]);
     const toggleCollapse = (0, react_1.useCallback)(() => {
@@ -91,6 +99,6 @@ const TimelineListItem = ({ nestedDepth, sequence, collapsed, beforeDepth, dispa
     const text = sequence.displayName.length > 80
         ? sequence.displayName.slice(0, 80) + '...'
         : sequence.displayName;
-    return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsx)("div", { style: padder }), canCollapse ? ((0, jsx_runtime_1.jsx)("button", { tabIndex: tabIndex, type: "button", style: collapserButton, onClick: toggleCollapse, children: (0, jsx_runtime_1.jsx)(TimelineCollapseToggle_1.TimelineCollapseToggle, { color: colors_1.LIGHT_COLOR, collapsed: collapsed }) })) : ((0, jsx_runtime_1.jsx)("div", { style: collapser })), sequence.parent && nestedDepth > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: smallSpace }), (0, jsx_runtime_1.jsx)("div", { style: hookContainer, children: (0, jsx_runtime_1.jsx)("div", { style: hookStyle }) }), (0, jsx_runtime_1.jsx)("div", { style: space })] })) : null, (0, jsx_runtime_1.jsxs)("div", { style: textStyle, children: [text || 'Untitled', (0, jsx_runtime_1.jsx)(TimelineSequenceFrame_1.TimelineSequenceFrame, { duration: sequence.duration, from: sequence.from })] })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsx)("div", { style: padder }), canCollapse ? ((0, jsx_runtime_1.jsx)("button", { tabIndex: tabIndex, type: "button", style: collapserButton, onClick: toggleCollapse, children: (0, jsx_runtime_1.jsx)(TimelineCollapseToggle_1.TimelineCollapseToggle, { color: colors_1.LIGHT_COLOR, collapsed: collapsed }) })) : ((0, jsx_runtime_1.jsx)("div", { style: collapser })), sequence.parent && nestedDepth > 0 ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: smallSpace }), (0, jsx_runtime_1.jsx)("div", { style: hookContainer, children: (0, jsx_runtime_1.jsx)("div", { style: hookStyle }) }), (0, jsx_runtime_1.jsx)("div", { style: space })] })) : null, (0, jsx_runtime_1.jsxs)("div", { title: text || 'Untitled', style: textStyle, children: [text || 'Untitled', (0, jsx_runtime_1.jsx)(TimelineSequenceFrame_1.TimelineSequenceFrame, { duration: sequence.duration, from: sequence.from })] }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 })] }));
 };
 exports.TimelineListItem = TimelineListItem;

package/dist/editor/components/Timeline/imperative-state.d.ts

@@ -1,7 +1,3 @@
-export declare let currentFrame: number;
-export declare let currentZoom: number;
-export declare let currentDuration: number;
-export declare let currentFps: number;
 export declare const getCurrentZoom: () => number;
 export declare const setCurrentZoom: (z: number) => void;
 export declare const getCurrentFrame: () => number;

package/dist/editor/components/Timeline/imperative-state.js

@@ -1,39 +1,39 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.setCurrentFps = exports.getCurrentFps = exports.setCurrentDuration = exports.getCurrentDuration = exports.setCurrentFrame = exports.getCurrentFrame = exports.setCurrentZoom = exports.getCurrentZoom = exports.currentFps = exports.currentDuration = exports.currentZoom = exports.currentFrame = void 0;
-exports.currentFrame = 0;
-exports.currentZoom = 1;
-exports.currentDuration = 1;
-exports.currentFps = 1;
+exports.setCurrentFps = exports.getCurrentFps = exports.setCurrentDuration = exports.getCurrentDuration = exports.setCurrentFrame = exports.getCurrentFrame = exports.setCurrentZoom = exports.getCurrentZoom = void 0;
+let currentFrame = 0;
+let currentZoom = 1;
+let currentDuration = 1;
+let currentFps = 1;
 const getCurrentZoom = () => {
-    return exports.currentZoom;
+    return currentZoom;
 };
 exports.getCurrentZoom = getCurrentZoom;
 const setCurrentZoom = (z) => {
-    exports.currentZoom = z;
+    currentZoom = z;
 };
 exports.setCurrentZoom = setCurrentZoom;
 const getCurrentFrame = () => {
-    return exports.currentFrame;
+    return currentFrame;
 };
 exports.getCurrentFrame = getCurrentFrame;
 const setCurrentFrame = (f) => {
-    exports.currentFrame = f;
+    currentFrame = f;
 };
 exports.setCurrentFrame = setCurrentFrame;
 const getCurrentDuration = () => {
-    return exports.currentDuration;
+    return currentDuration;
 };
 exports.getCurrentDuration = getCurrentDuration;
 const setCurrentDuration = (d) => {
-    exports.currentDuration = d;
+    currentDuration = d;
 };
 exports.setCurrentDuration = setCurrentDuration;
 const getCurrentFps = () => {
-    return exports.currentFps;
+    return currentFps;
 };
 exports.getCurrentFps = getCurrentFps;
 const setCurrentFps = (d) => {
-    exports.currentFps = d;
+    currentFps = d;
 };
 exports.setCurrentFps = setCurrentFps;

package/dist/editor/components/Timeline/timeline-scroll-logic.d.ts

@@ -24,7 +24,6 @@ export declare const getScrollPositionForCursorOnRightEdge: ({ nextFrame, durati
     nextFrame: number;
     durationInFrames: number;
 }) => number;
-export declare const getFrameIncrement: (durationInFrames: number) => number;
 export declare const getFrameIncrementFromWidth: (durationInFrames: number, width: number) => number;
 export declare const getFrameWhileScrollingRight: ({ durationInFrames, width, }: {
     durationInFrames: number;

package/dist/editor/components/Timeline/timeline-scroll-logic.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.zoomAndPreserveCursor = exports.getFrameFromX = exports.getFrameWhileScrollingRight = exports.getFrameIncrementFromWidth = exports.getFrameIncrement = exports.getScrollPositionForCursorOnRightEdge = exports.getScrollPositionForCursorOnLeftEdge = exports.scrollToTimelineXOffset = exports.ensureFrameIsInViewport = exports.isCursorInViewport = exports.getFrameWhileScrollingLeft = exports.canScrollTimelineIntoDirection = void 0;
+exports.zoomAndPreserveCursor = exports.getFrameFromX = exports.getFrameWhileScrollingRight = exports.getFrameIncrementFromWidth = exports.getScrollPositionForCursorOnRightEdge = exports.getScrollPositionForCursorOnLeftEdge = exports.scrollToTimelineXOffset = exports.ensureFrameIsInViewport = exports.isCursorInViewport = exports.getFrameWhileScrollingLeft = exports.canScrollTimelineIntoDirection = void 0;
 const remotion_1 = require("remotion");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_refs_1 = require("./timeline-refs");
@@ -23,7 +23,7 @@ const calculateFrameWhileScrollingRight = ({ durationInFrames, width, scrollLeft
         extrapolate: 'clamp',
     }) +
         Math.ceil((((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) - timeline_layout_1.TIMELINE_PADDING) /
-            (0, exports.getFrameIncrement)(durationInFrames)));
+            getFrameIncrement(durationInFrames)));
 };
 const getFrameWhileScrollingLeft = ({ durationInFrames, width, }) => {
     var _a, _b;
@@ -145,14 +145,14 @@ const scrollToTimelineXOffset = (scrollPos) => {
 };
 exports.scrollToTimelineXOffset = scrollToTimelineXOffset;
 const getScrollPositionForCursorOnLeftEdge = ({ nextFrame, durationInFrames, }) => {
-    const frameIncrement = (0, exports.getFrameIncrement)(durationInFrames);
+    const frameIncrement = getFrameIncrement(durationInFrames);
     const scrollPos = frameIncrement * nextFrame;
     return scrollPos;
 };
 exports.getScrollPositionForCursorOnLeftEdge = getScrollPositionForCursorOnLeftEdge;
 const getScrollPositionForCursorOnRightEdge = ({ nextFrame, durationInFrames, }) => {
     var _a, _b;
-    const frameIncrement = (0, exports.getFrameIncrement)(durationInFrames);
+    const frameIncrement = getFrameIncrement(durationInFrames);
     const framesRemaining = durationInFrames - 1 - nextFrame;
     const fromRight = framesRemaining * frameIncrement + timeline_layout_1.TIMELINE_PADDING;
     const scrollPos = ((_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) -
@@ -168,7 +168,6 @@ const getFrameIncrement = (durationInFrames) => {
     const width = (_b = (_a = timeline_refs_1.scrollableRef.current) === null || _a === void 0 ? void 0 : _a.scrollWidth) !== null && _b !== void 0 ? _b : 0;
     return (0, exports.getFrameIncrementFromWidth)(durationInFrames, width);
 };
-exports.getFrameIncrement = getFrameIncrement;
 const getFrameIncrementFromWidth = (durationInFrames, width) => {
     return (width - timeline_layout_1.TIMELINE_PADDING * 2) / (durationInFrames - 1);
 };
@@ -209,7 +208,7 @@ const zoomAndPreserveCursor = ({ oldZoom, newZoom, currentFrame, currentDuration
     if (!current) {
         return;
     }
-    const frameIncrement = (0, exports.getFrameIncrement)(currentDurationInFrames);
+    const frameIncrement = getFrameIncrement(currentDurationInFrames);
     const prevCursorPosition = frameIncrement * currentFrame + timeline_layout_1.TIMELINE_PADDING;
     const newCursorPosition = ratio * (prevCursorPosition - timeline_layout_1.TIMELINE_PADDING) + timeline_layout_1.TIMELINE_PADDING;
     current.scrollLeft += newCursorPosition - prevCursorPosition;

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

@@ -1,4 +1,3 @@
 import type React from 'react';
-export declare const persistCurrentZoom: (zoom: number) => void;
 export declare const getZoomForComposition: (composition: string) => number;
 export declare const ZoomPersistor: React.FC;

package/dist/editor/components/ZoomPersistor.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ZoomPersistor = exports.getZoomForComposition = exports.persistCurrentZoom = void 0;
+exports.ZoomPersistor = exports.getZoomForComposition = void 0;
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const timeline_zoom_1 = require("../state/timeline-zoom");
@@ -15,7 +15,6 @@ const persistCurrentZoom = (zoom) => {
     }
     localStorage.setItem(makeKey(currentComposition), String(zoom));
 };
-exports.persistCurrentZoom = persistCurrentZoom;
 const getZoomForComposition = (composition) => {
     const zoom = localStorage.getItem(makeKey(composition));
     return zoom ? Number(zoom) : 0;
@@ -30,7 +29,7 @@ const ZoomPersistor = () => {
         if (!isActive) {
             return;
         }
-        (0, exports.persistCurrentZoom)(zoom);
+        persistCurrentZoom(zoom);
     }, [zoom, isActive, playing]);
     return null;
 };