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

package/dist/editor/components/PlaybackRateSelector.js

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

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

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

package/dist/editor/components/Preview.js

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

package/dist/editor/components/PreviewToolbar.js

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

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

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

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

@@ -5,8 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
+const film_1 = require("../../icons/film");
 const still_1 = require("../../icons/still");
-const video_1 = require("../../icons/video");
 const layout_1 = require("../layout");
 const container = {
     paddingLeft: 16,
@@ -62,8 +62,6 @@ const QuickSwitcherResult = ({ result, selected }) => {
             commandCtrlKey: false,
             event: 'keydown',
             preventDefault: true,
-            // Input will be focused while sleection
-            triggerIfInputFieldFocused: true,
         });
         return () => {
             binding.unregister();
@@ -98,7 +96,7 @@ const QuickSwitcherResult = ({ result, selected }) => {
             fontSize: 15,
         };
     }, [hovered, result.type, selected]);
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: style, onClick: result.onSelected, children: [result.type === 'composition' ? (result.compositionType === 'still' ? ((0, jsx_runtime_1.jsx)(still_1.StillIcon, { color: selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle })) : ((0, jsx_runtime_1.jsx)(video_1.FilmIcon, { color: selected ? 'white' : colors_1.LIGHT_TEXT, style: iconStyle }))) : null, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: labelContainer, children: result.type === 'search-result' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: labelStyle, 
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: style, onClick: result.onSelected, children: [result.type === 'composition' ? (result.compositionType === 'still' ? ((0, jsx_runtime_1.jsx)(still_1.StillIcon, { style: iconStyle })) : ((0, jsx_runtime_1.jsx)(film_1.FilmIcon, { style: iconStyle }))) : null, (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 1 }), (0, jsx_runtime_1.jsx)("div", { style: labelContainer, children: result.type === 'search-result' ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: labelStyle, 
                             // eslint-disable-next-line react/no-danger
                             dangerouslySetInnerHTML: {
                                 __html: result.titleLine,

package/dist/editor/components/QuickSwitcher/algolia-search.d.ts

@@ -1,2 +1,29 @@
 import type { TQuickSwitcherResult } from './QuickSwitcherResult';
+declare type Levels = 'lvl0' | 'lvl1' | 'lvl2' | 'lvl3' | 'lvl4' | 'lvl5' | 'lvl6';
+export declare type Match = {
+    value: string;
+    matchLevel: 'none' | 'partial' | 'full';
+};
+declare type DynamicHit = {
+    type: 'content';
+    _highlightResult: {
+        content: Match;
+        hierarchy: Record<Levels, Match>;
+    };
+} | {
+    type: Levels;
+    _highlightResult: {
+        hierarchy: Record<Levels, Match>;
+    };
+};
+declare type Hit = {
+    url: string;
+    hierarchy: Record<Levels, string | null>;
+    objectID: string;
+} & DynamicHit;
 export declare const algoliaSearch: (query: string) => Promise<TQuickSwitcherResult[]>;
+export declare const splitMatchIntoTitleAndSubtitle: (match: Hit) => {
+    title: string;
+    subtitle: string;
+};
+export {};

package/dist/editor/components/QuickSwitcher/algolia-search.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.algoliaSearch = void 0;
+exports.splitMatchIntoTitleAndSubtitle = exports.algoliaSearch = void 0;
 const truthy_1 = require("../../../truthy");
 const ALGOLIA_API_KEY = '3e42dbd4f895fe93ff5cf40d860c4a85';
 const ALGOLIA_APPLICATION_ID = 'PLSDUOL1CA';
@@ -31,7 +31,7 @@ const algoliaSearch = async (query) => {
         var _a;
         const entries = Object.values(hit._highlightResult.hierarchy);
         const result = (_a = entries.find((value) => value.matchLevel === 'full')) !== null && _a !== void 0 ? _a : entries.find((value) => value.matchLevel === 'partial');
-        const { subtitle, title } = splitMatchIntoTitleAndSubtitle(hit);
+        const { subtitle, title } = (0, exports.splitMatchIntoTitleAndSubtitle)(hit);
         if (!result) {
             return null;
         }
@@ -60,3 +60,4 @@ const splitMatchIntoTitleAndSubtitle = (match) => {
         .join(' • ');
     return { title, subtitle };
 };
+exports.splitMatchIntoTitleAndSubtitle = splitMatchIntoTitleAndSubtitle;

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

@@ -1,5 +1,6 @@
 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 = void 0;
+exports.SizeSelector = exports.getUniqueSizes = exports.getPreviewSizeLabel = exports.commonPreviewSizes = 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");
-const commonPreviewSizes = [
+exports.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, ...commonPreviewSizes];
+    const customPreviewSizes = [size, ...exports.commonPreviewSizes];
     const uniqueSizes = [];
     customPreviewSizes.forEach((p) => {
         if (!uniqueSizes.find((s) => s.size === p.size)) {

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

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

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

@@ -1,17 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SplitterHandle = void 0;
+exports.SplitterHandle = exports.SPLITTER_HANDLE_SIZE = 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");
-const SPLITTER_HANDLE_SIZE = 3;
+exports.SPLITTER_HANDLE_SIZE = 3;
 const containerRow = {
-    height: SPLITTER_HANDLE_SIZE,
+    height: exports.SPLITTER_HANDLE_SIZE,
     cursor: 'row-resize',
 };
 const containerColumn = {
-    width: SPLITTER_HANDLE_SIZE,
+    width: exports.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 - SPLITTER_HANDLE_SIZE));
+                        (width - exports.SPLITTER_HANDLE_SIZE));
                 }
                 return ((e.clientY - context.isDragging.current.y) /
-                    (height - SPLITTER_HANDLE_SIZE));
+                    (height - exports.SPLITTER_HANDLE_SIZE));
             })();
             const newFlex = context.flexValue + change;
             if (clamp) {
@@ -75,7 +75,7 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
             if (context.isDragging.current) {
                 const val = getNewValue(e, true);
                 context.setFlexValue(val);
-                if (allowToCollapse === 'left') {
+                if (allowToCollapse) {
                     const unclamped = getNewValue(e, false);
                     if (unclamped < context.minFlex / 2) {
                         cleanup();
@@ -83,14 +83,6 @@ const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
                         setLastPointerUp(Date.now());
                     }
                 }
-                if (allowToCollapse === 'right') {
-                    const unclamped = 1 - getNewValue(e, false);
-                    if (unclamped < (1 - context.maxFlex) / 2) {
-                        cleanup();
-                        onCollapse();
-                        setLastPointerUp(Date.now());
-                    }
-                }
             }
         };
         const cleanup = () => {

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

@@ -4,7 +4,7 @@ exports.MaxTimelineTracksReached = exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = e
 const jsx_runtime_1 = require("react/jsx-runtime");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 exports.MAX_TIMELINE_TRACKS = typeof process.env.MAX_TIMELINE_TRACKS === 'undefined'
-    ? 90
+    ? 15
     : Number(process.env.MAX_TIMELINE_TRACKS);
 exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = 24;
 const container = {

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

@@ -86,6 +86,6 @@ const Timeline = () => {
     if (!videoConfig) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)("div", { ref: timeline_refs_1.timelineVerticalScroll, style: container, className: "css-reset", children: (0, jsx_runtime_1.jsx)("div", { style: inner, children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)(TimelineList_1.TimelineList, { dispatchStateChange: dispatch, viewState: state, timeline: shown }) }), (0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsxs)(TimelineScrollable_1.TimelineScrollable, { children: [(0, jsx_runtime_1.jsx)(TimelineTracks_1.TimelineTracks, { viewState: state, timeline: shown, fps: videoConfig.fps, hasBeenCut: hasBeenCut }), (0, jsx_runtime_1.jsx)(TimelineInOutPointer_1.TimelineInOutPointer, {}), (0, jsx_runtime_1.jsx)(TimelineDragHandler_1.TimelineDragHandler, {}), (0, jsx_runtime_1.jsx)(TimelineSlider_1.TimelineSlider, {}), (0, jsx_runtime_1.jsx)(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {})] }) })] }) }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { ref: timeline_refs_1.timelineVerticalScroll, style: container, className: "css-reset", children: (0, jsx_runtime_1.jsx)("div", { style: inner, children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", children: (0, jsx_runtime_1.jsx)(TimelineList_1.TimelineList, { dispatchStateChange: dispatch, viewState: state, timeline: shown }) }), (0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: false }), (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", children: (0, jsx_runtime_1.jsxs)(TimelineScrollable_1.TimelineScrollable, { children: [(0, jsx_runtime_1.jsx)(TimelineTracks_1.TimelineTracks, { viewState: state, timeline: shown, fps: videoConfig.fps, hasBeenCut: hasBeenCut }), (0, jsx_runtime_1.jsx)(TimelineInOutPointer_1.TimelineInOutPointer, {}), (0, jsx_runtime_1.jsx)(TimelineDragHandler_1.TimelineDragHandler, {}), (0, jsx_runtime_1.jsx)(TimelineSlider_1.TimelineSlider, {}), (0, jsx_runtime_1.jsx)(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {})] }) })] }) }) }));
 };
 exports.Timeline = Timeline;

package/dist/editor/components/Timeline/TimelineCollapseToggle.d.ts

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

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

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineCollapseToggle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../helpers/colors");
 const container = {
     height: 10,
     width: 10,
@@ -9,10 +10,10 @@ const container = {
     justifyContent: 'center',
     alignItems: 'center',
 };
-const Icon = ({ color, ...props }) => {
-    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 8 10", ...props, style: { height: 10, width: 8 }, children: (0, jsx_runtime_1.jsx)("path", { d: "M 0 0 L 8 5 L 0 10 z", fill: color }) }));
+const Icon = (props) => {
+    return ((0, jsx_runtime_1.jsx)("svg", { viewBox: "0 0 8 10", ...props, style: { height: 10, width: 8 }, children: (0, jsx_runtime_1.jsx)("path", { d: "M 0 0 L 8 5 L 0 10 z", fill: colors_1.LIGHT_COLOR }) }));
 };
-const TimelineCollapseToggle = ({ collapsed, color }) => {
-    return ((0, jsx_runtime_1.jsx)("div", { style: collapsed ? container : { ...container, transform: 'rotate(90deg)' }, children: (0, jsx_runtime_1.jsx)(Icon, { color: color }) }));
+const TimelineCollapseToggle = ({ collapsed }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { style: collapsed ? container : { ...container, transform: 'rotate(90deg)' }, children: (0, jsx_runtime_1.jsx)(Icon, {}) }));
 };
 exports.TimelineCollapseToggle = TimelineCollapseToggle;

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

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineListItem = exports.TOTAL_TIMELINE_LAYER_LEFT_PADDING = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 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");
@@ -99,6 +98,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", { 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 })] }));
+    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, { 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/TimelineScrollable.js

@@ -4,7 +4,6 @@ exports.TimelineScrollable = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
-const is_menu_item_1 = require("../Menu/is-menu-item");
 const timeline_refs_1 = require("./timeline-refs");
 const outer = {
     width: '100%',
@@ -21,6 +20,6 @@ const TimelineScrollable = ({ children }) => {
             minHeight: '100%',
         };
     }, []);
-    return ((0, jsx_runtime_1.jsx)("div", { ref: timeline_refs_1.scrollableRef, style: outer, className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, children: (0, jsx_runtime_1.jsx)("div", { style: containerStyle, children: children }) }));
+    return ((0, jsx_runtime_1.jsx)("div", { ref: timeline_refs_1.scrollableRef, style: outer, children: (0, jsx_runtime_1.jsx)("div", { style: containerStyle, children: children }) }));
 };
 exports.TimelineScrollable = TimelineScrollable;

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

@@ -7,11 +7,13 @@ const react_1 = require("react");
 const remotion_1 = require("remotion");
 const get_timeline_sequence_layout_1 = require("../../helpers/get-timeline-sequence-layout");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
+const rich_timeline_1 = require("../../state/rich-timeline");
 const AudioWaveform_1 = require("../AudioWaveform");
+const Thumbnail_1 = require("../Thumbnail");
 const LoopedTimelineIndicators_1 = require("./LoopedTimelineIndicators");
 const timeline_refs_1 = require("./timeline-refs");
 const TimelineVideoInfo_1 = require("./TimelineVideoInfo");
-const SEQUENCE_GRADIENT = 'var(--blue)';
+const SEQUENCE_GRADIENT = 'linear-gradient(to bottom, #3697e1, #348AC7 60%)';
 const AUDIO_GRADIENT = 'linear-gradient(rgb(16 171 58), rgb(43 165 63) 60%)';
 const VIDEO_GRADIENT = 'linear-gradient(to top, #8e44ad, #9b59b6)';
 const TimelineSequence = ({ s, fps }) => {
@@ -20,6 +22,7 @@ const TimelineSequence = ({ s, fps }) => {
         triggerOnWindowResize: false,
         shouldApplyCssTransforms: true,
     });
+    const { richTimeline } = (0, react_1.useContext)(rich_timeline_1.RichTimelineContext);
     const windowWidth = (_a = size === null || size === void 0 ? void 0 : size.width) !== null && _a !== void 0 ? _a : 0;
     // If a duration is 1, it is essentially a still and it should have width 0
     // Some compositions may not be longer than their media duration,
@@ -55,6 +58,15 @@ const TimelineSequence = ({ s, fps }) => {
             overflow: 'hidden',
         };
     }, [marginLeft, s.type, width]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: style, title: s.displayName, children: [s.type === 'audio' ? ((0, jsx_runtime_1.jsx)(AudioWaveform_1.AudioWaveform, { src: s.src, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, fps: fps, volume: s.volume, setMaxMediaDuration: setMaxMediaDuration, playbackRate: s.playbackRate })) : null, s.type === 'video' ? (0, jsx_runtime_1.jsx)(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src }) : null, s.showLoopTimesInTimeline === undefined ? null : ((0, jsx_runtime_1.jsx)(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.showLoopTimesInTimeline }))] }, s.id));
+    const row = (0, react_1.useMemo)(() => {
+        return {
+            flexDirection: 'row',
+            display: 'flex',
+            borderRadius: 5,
+            overflow: 'hidden',
+        };
+    }, []);
+    const thumbnailWidth = timeline_layout_1.TIMELINE_LAYER_HEIGHT * (video.width / video.height);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: style, title: s.displayName, children: [(0, jsx_runtime_1.jsx)("div", { style: row, children: richTimeline && s.type === 'sequence' ? ((0, jsx_runtime_1.jsx)(Thumbnail_1.Thumbnail, { targetHeight: timeline_layout_1.TIMELINE_LAYER_HEIGHT, targetWidth: thumbnailWidth, composition: video, frameToDisplay: Math.floor(s.from + s.duration / 2) })) : null }), s.type === 'audio' ? ((0, jsx_runtime_1.jsx)(AudioWaveform_1.AudioWaveform, { src: s.src, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, fps: fps, volume: s.volume, setMaxMediaDuration: setMaxMediaDuration, playbackRate: s.playbackRate })) : null, s.type === 'video' ? (0, jsx_runtime_1.jsx)(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src }) : null, s.showLoopTimesInTimeline === undefined ? null : ((0, jsx_runtime_1.jsx)(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.showLoopTimesInTimeline }))] }, s.id));
 };
 exports.TimelineSequence = TimelineSequence;

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

@@ -16,7 +16,6 @@ const TimelineSequenceFrame = ({ from, duration }) => {
     const frame = (0, remotion_1.useCurrentFrame)();
     const { fps } = (0, remotion_1.useVideoConfig)();
     const relativeFrame = frame - from;
-    const roundedFrame = Math.round(relativeFrame * 100) / 100;
     const isInRange = relativeFrame >= 0 && relativeFrame < duration;
     if (!isInRange) {
         return null;
@@ -27,6 +26,6 @@ The current time within the sequence.
 Call \`useCurrentFrame()\` within the sequence to get the time programmatically.
 
 Call \`const {durationInFrames} = useVideoConfig()\` to get the duration of the sequence.
-`.trim(), style: relativeFrameStyle, children: [(0, render_frame_1.renderFrame)(relativeFrame, fps), " (", roundedFrame, ")"] }));
+`.trim(), style: relativeFrameStyle, children: [(0, render_frame_1.renderFrame)(relativeFrame, fps), " (", relativeFrame, ")"] }));
 };
 exports.TimelineSequenceFrame = TimelineSequenceFrame;

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

@@ -14,7 +14,6 @@ const container = {
     color: 'black',
     flexDirection: 'row',
     display: 'flex',
-    alignItems: 'center',
 };
 const buttonStyle = {
     fontSize: 24,
@@ -23,6 +22,10 @@ const iconStyle = {
     color: 'white',
     width: 14,
 };
+const slider = {
+    width: 60,
+    accentColor: 'var(--blue)',
+};
 const TimelineZoomControls = () => {
     const { setZoom, zoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
     const { tabIndex } = (0, z_index_1.useZIndex)();
@@ -39,6 +42,6 @@ const TimelineZoomControls = () => {
     if (isStill) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { onClick: onMinusClicked, style: buttonStyle, title: "Zoom out timeline", role: 'ControlButton', type: "button", disabled: timeline_zoom_1.TIMELINE_MIN_ZOOM === zoom, children: (0, jsx_runtime_1.jsx)(minus_1.Minus, { style: iconStyle }) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)("input", { title: `Timeline zoom (${zoom}x)`, alt: `Timeline zoom (${zoom}x)`, type: 'range', min: timeline_zoom_1.TIMELINE_MIN_ZOOM, step: 0.1, value: zoom, max: timeline_zoom_1.TIMELINE_MAX_ZOOM, onChange: onChange, className: "__remotion-timeline-slider", tabIndex: tabIndex }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { onClick: onPlusClicked, style: buttonStyle, title: "Zoom in timeline", role: 'button', type: "button", disabled: timeline_zoom_1.TIMELINE_MAX_ZOOM === zoom, children: (0, jsx_runtime_1.jsx)(plus_1.Plus, { style: iconStyle }) })] }));
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: [(0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { onClick: onMinusClicked, style: buttonStyle, title: "Zoom out timeline", role: 'ControlButton', type: "button", disabled: timeline_zoom_1.TIMELINE_MIN_ZOOM === zoom, children: (0, jsx_runtime_1.jsx)(minus_1.Minus, { style: iconStyle }) }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)("input", { title: `Timeline zoom (${zoom}x)`, alt: `Timeline zoom (${zoom}x)`, type: 'range', min: timeline_zoom_1.TIMELINE_MIN_ZOOM, step: 0.1, value: zoom, max: timeline_zoom_1.TIMELINE_MAX_ZOOM, onChange: onChange, style: slider, tabIndex: tabIndex }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(ControlButton_1.ControlButton, { onClick: onPlusClicked, style: buttonStyle, title: "Zoom in timeline", role: 'button', type: "button", disabled: timeline_zoom_1.TIMELINE_MAX_ZOOM === zoom, children: (0, jsx_runtime_1.jsx)(plus_1.Plus, { style: iconStyle }) })] }));
 };
 exports.TimelineZoomControls = TimelineZoomControls;

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

@@ -1,3 +1,7 @@
+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 = void 0;
-let currentFrame = 0;
-let currentZoom = 1;
-let currentDuration = 1;
-let currentFps = 1;
+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;
 const getCurrentZoom = () => {
-    return currentZoom;
+    return exports.currentZoom;
 };
 exports.getCurrentZoom = getCurrentZoom;
 const setCurrentZoom = (z) => {
-    currentZoom = z;
+    exports.currentZoom = z;
 };
 exports.setCurrentZoom = setCurrentZoom;
 const getCurrentFrame = () => {
-    return currentFrame;
+    return exports.currentFrame;
 };
 exports.getCurrentFrame = getCurrentFrame;
 const setCurrentFrame = (f) => {
-    currentFrame = f;
+    exports.currentFrame = f;
 };
 exports.setCurrentFrame = setCurrentFrame;
 const getCurrentDuration = () => {
-    return currentDuration;
+    return exports.currentDuration;
 };
 exports.getCurrentDuration = getCurrentDuration;
 const setCurrentDuration = (d) => {
-    currentDuration = d;
+    exports.currentDuration = d;
 };
 exports.setCurrentDuration = setCurrentDuration;
 const getCurrentFps = () => {
-    return currentFps;
+    return exports.currentFps;
 };
 exports.getCurrentFps = getCurrentFps;
 const setCurrentFps = (d) => {
-    currentFps = d;
+    exports.currentFps = d;
 };
 exports.setCurrentFps = setCurrentFps;

package/dist/editor/components/Timeline/is-collapsed.js

@@ -9,10 +9,11 @@ const isTrackHidden = (track, allTracks, viewState) => {
     if (!track.sequence.parent) {
         return false;
     }
-    if (!track.canCollapse) {
+    const parent = allTracks.find((t) => t.sequence.id === track.sequence.parent);
+    if (!parent) {
+        // TODO: Tighten up, when toggling rich timeline this case can happen right now
         return false;
     }
-    const parent = allTracks.find((t) => t.sequence.id === track.sequence.parent);
     if ((0, exports.isTrackCollapsed)(parent.hash, viewState)) {
         return true;
     }

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

@@ -24,6 +24,7 @@ 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;