@remotion/cli 4.0.111 → 4.0.113

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

@@ -0,0 +1,128 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+const SPLITTER_HANDLE_SIZE = 3;
+const containerRow = {
+    height: SPLITTER_HANDLE_SIZE,
+    cursor: 'row-resize',
+};
+const containerColumn = {
+    width: SPLITTER_HANDLE_SIZE,
+    cursor: 'col-resize',
+};
+const SplitterHandle = ({ allowToCollapse, onCollapse }) => {
+    const context = (0, react_1.useContext)(SplitterContext_1.SplitterContext);
+    if (!context) {
+        throw new Error('Cannot find splitter context');
+    }
+    const [lastPointerUp, setLastPointerUp] = (0, react_1.useState)(() => Date.now());
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        if (context.isDragging.current) {
+            return;
+        }
+        if (!context.domRect) {
+            return;
+        }
+        const { current } = ref;
+        if (!current) {
+            return;
+        }
+        const getNewValue = (e, clamp) => {
+            if (!context.isDragging.current) {
+                throw new Error('cannot get value if not dragging');
+            }
+            if (!context.domRect) {
+                throw new Error('domRect is not mounted');
+            }
+            const { width, height } = context.domRect;
+            const change = (() => {
+                if (context.orientation === 'vertical') {
+                    return ((e.clientX - context.isDragging.current.x) /
+                        (width - SPLITTER_HANDLE_SIZE));
+                }
+                return ((e.clientY - context.isDragging.current.y) /
+                    (height - SPLITTER_HANDLE_SIZE));
+            })();
+            const newFlex = context.flexValue + change;
+            if (clamp) {
+                return Math.min(context.maxFlex, Math.max(context.minFlex, newFlex));
+            }
+            return newFlex;
+        };
+        const onPointerDown = (e) => {
+            var _a;
+            if (e.button !== 0) {
+                return;
+            }
+            context.isDragging.current = {
+                x: e.clientX,
+                y: e.clientY,
+            };
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.classList.add('remotion-splitter-active');
+            window.addEventListener('pointerup', (ev) => {
+                if (!context.isDragging.current) {
+                    return;
+                }
+                context.persistFlex(getNewValue(ev, true));
+                cleanup();
+                setLastPointerUp(Date.now());
+            }, { once: true });
+            window.addEventListener('pointermove', onPointerMove);
+        };
+        const onPointerMove = (e) => {
+            if (context.isDragging.current) {
+                const val = getNewValue(e, true);
+                context.setFlexValue(val);
+                if (allowToCollapse === 'left') {
+                    const unclamped = getNewValue(e, false);
+                    if (unclamped < context.minFlex / 2) {
+                        cleanup();
+                        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 = () => {
+            var _a;
+            context.isDragging.current = false;
+            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.classList.remove('remotion-splitter-active');
+            current.removeEventListener('pointerdown', onPointerDown);
+            window.removeEventListener('pointermove', onPointerMove);
+            player_1.PlayerInternals.updateAllElementsSizes();
+        };
+        current.addEventListener('pointerdown', onPointerDown);
+        return () => {
+            if (!context.isDragging.current) {
+                cleanup();
+            }
+        };
+    }, [
+        allowToCollapse,
+        context,
+        context.domRect,
+        context.flexValue,
+        lastPointerUp,
+        onCollapse,
+    ]);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, className: [
+            'remotion-splitter',
+            context.orientation === 'horizontal'
+                ? 'remotion-splitter-horizontal'
+                : 'remotion-splitter-vertical',
+        ].join(' '), style: context.orientation === 'horizontal' ? containerRow : containerColumn }));
+};
+exports.SplitterHandle = SplitterHandle;

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { AssetMetadata } from '../helpers/get-asset-metadata';
+export declare const StaticFilePreview: React.FC<{
+    currentAsset: string;
+    assetMetadata: AssetMetadata | null;
+}>;

package/dist/editor/components/StaticFilePreview.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StaticFilePreview = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const client_id_1 = require("../helpers/client-id");
+const colors_1 = require("../helpers/colors");
+const FilePreview_1 = require("./FilePreview");
+const Preview_1 = require("./Preview");
+const msgStyle = {
+    fontSize: 13,
+    color: 'white',
+    fontFamily: 'sans-serif',
+    display: 'flex',
+    justifyContent: 'center',
+};
+const errMsgStyle = {
+    ...msgStyle,
+    color: colors_1.LIGHT_TEXT,
+};
+const StaticFilePreview = ({ currentAsset, assetMetadata }) => {
+    const fileType = (0, Preview_1.getPreviewFileType)(currentAsset);
+    const staticFileSrc = (0, remotion_1.staticFile)(currentAsset);
+    const staticFiles = (0, remotion_1.getStaticFiles)();
+    const connectionStatus = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx).type;
+    const exists = staticFiles.find((file) => file.name === currentAsset);
+    if (connectionStatus === 'disconnected') {
+        return (0, jsx_runtime_1.jsx)("div", { style: errMsgStyle, children: "Studio server disconnected" });
+    }
+    if (!exists) {
+        return ((0, jsx_runtime_1.jsxs)("div", { style: errMsgStyle, children: [currentAsset, " does not exist in your public folder."] }));
+    }
+    if (!currentAsset) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(FilePreview_1.FilePreview, { currentAsset: currentAsset, fileType: fileType, src: staticFileSrc, assetMetadata: assetMetadata }));
+};
+exports.StaticFilePreview = StaticFilePreview;

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

@@ -0,0 +1,11 @@
+import React from 'react';
+export declare const Tabs: React.FC<{
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+}>;
+export declare const Tab: React.FC<{
+    children: React.ReactNode;
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
+    style?: React.CSSProperties;
+    selected: boolean;
+}>;

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

@@ -0,0 +1,56 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+const z_index_1 = require("../../state/z-index");
+const tabsContainer = {
+    display: 'flex',
+    flexDirection: 'row',
+};
+const Tabs = ({ children, style }) => {
+    const definiteStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...tabsContainer,
+            ...style,
+        };
+    }, [style]);
+    return (0, jsx_runtime_1.jsx)("div", { style: definiteStyle, children: children });
+};
+exports.Tabs = Tabs;
+const selectorButton = {
+    border: 'none',
+    flex: 1,
+    padding: 8,
+    paddingLeft: 16,
+    display: 'flex',
+    flexDirection: 'row',
+    fontSize: 14,
+    color: 'inherit',
+    alignItems: 'center',
+};
+const Tab = ({ children, onClick, style, selected }) => {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        setHovered(true);
+    }, []);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHovered(false);
+    }, []);
+    const definiteStyle = (0, react_1.useMemo)(() => ({
+        ...selectorButton,
+        backgroundColor: selected
+            ? colors_1.BACKGROUND
+            : hovered
+                ? colors_1.CLEAR_HOVER
+                : colors_1.INPUT_BACKGROUND,
+        color: selected ? 'white' : colors_1.LIGHT_TEXT,
+        borderTop: selected ? '2px solid ' + colors_1.BLUE : '2px solid transparent',
+        boxShadow: selected ? 'none' : undefined,
+        ...style,
+    }), [hovered, selected, style]);
+    return ((0, jsx_runtime_1.jsx)("button", { style: definiteStyle, type: "button", onClick: onClick, tabIndex: tabIndex, onPointerLeave: onPointerLeave, onPointerEnter: onPointerEnter, children: children }));
+};
+exports.Tab = Tab;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare const VerticalTab: React.FC<{
+    children: React.ReactNode;
+    onClick: React.MouseEventHandler<HTMLButtonElement>;
+    style?: React.CSSProperties;
+    selected: boolean;
+}>;

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

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 selectorButton = {
+    border: 'none',
+    flex: 1,
+    padding: 8,
+    paddingLeft: 16,
+    display: 'flex',
+    flexDirection: 'row',
+    fontSize: 14,
+    color: 'inherit',
+    alignItems: 'center',
+};
+const VerticalTab = ({ children, onClick, style, selected }) => {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        setHovered(true);
+    }, []);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHovered(false);
+    }, []);
+    const definiteStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...selectorButton,
+            backgroundColor: selected
+                ? colors_1.SELECTED_BACKGROUND
+                : hovered
+                    ? colors_1.CLEAR_HOVER
+                    : 'transparent',
+            color: selected ? 'white' : colors_1.LIGHT_TEXT,
+            boxShadow: selected ? 'none' : undefined,
+            ...style,
+        };
+    }, [hovered, selected, style]);
+    return ((0, jsx_runtime_1.jsx)("button", { style: definiteStyle, type: "button", onClick: onClick, tabIndex: tabIndex, onPointerLeave: onPointerLeave, onPointerEnter: onPointerEnter, children: children }));
+};
+exports.VerticalTab = VerticalTab;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const TextViewer: React.FC<{
+    src: string;
+}>;

package/dist/editor/components/TextViewer.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TextViewer = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const textStyle = {
+    margin: 14,
+    fontFamily: 'monospace',
+    flex: 1,
+    color: 'white',
+    whiteSpace: 'pre-wrap',
+};
+const TextViewer = ({ src }) => {
+    const [txt, setTxt] = (0, react_1.useState)('');
+    (0, react_1.useEffect)(() => {
+        fetch(src).then(async (res) => {
+            if (!res.ok || !res.body) {
+                return;
+            }
+            const text = await res.text();
+            setTxt(text);
+        });
+    }, [src]);
+    return (0, jsx_runtime_1.jsxs)("div", { style: textStyle, children: [txt, " "] });
+};
+exports.TextViewer = TextViewer;

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

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

package/dist/editor/components/TimeValue.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimeValue = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const remotion_1 = require("remotion");
+const is_current_selected_still_1 = require("../helpers/is-current-selected-still");
+const render_frame_1 = require("../state/render-frame");
+const layout_1 = require("./layout");
+const text = {
+    color: 'white',
+    fontSize: 18,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+    fontVariantNumeric: 'tabular-nums',
+    lineHeight: 1,
+};
+const time = {
+    display: 'inline-block',
+    fontSize: 18,
+    lineHeight: 1,
+};
+const frameStyle = {
+    color: '#ccc',
+    fontSize: 10,
+    fontWeight: 500,
+    lineHeight: 1,
+};
+const TimeValue = () => {
+    const frame = (0, remotion_1.useCurrentFrame)();
+    const config = remotion_1.Internals.useUnsafeVideoConfig();
+    const isStill = (0, is_current_selected_still_1.useIsStill)();
+    if (!config) {
+        return null;
+    }
+    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)(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/LoopedIndicator.d.ts

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

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

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoopedIndicator = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const remotion_1 = require("remotion");
+const width = {
+    width: 30,
+    flexDirection: 'row',
+    display: 'flex',
+    position: 'relative',
+};
+const icon = {
+    height: 14,
+    width: 14,
+};
+const Icon = () => ((0, jsx_runtime_1.jsx)("svg", { "aria-hidden": "true", focusable: "false", "data-prefix": "fas", "data-icon": "repeat", className: "svg-inline--fa fa-repeat fa-w-16", role: "img", xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", style: icon, children: (0, jsx_runtime_1.jsx)("path", { fill: "currentColor", d: "M512 256c0 88.224-71.775 160-160 160H170.067l34.512 32.419c9.875 9.276 10.119 24.883.539 34.464l-10.775 10.775c-9.373 9.372-24.568 9.372-33.941 0l-92.686-92.686c-9.373-9.373-9.373-24.568 0-33.941l92.686-92.686c9.373-9.373 24.568-9.373 33.941 0l10.775 10.775c9.581 9.581 9.337 25.187-.539 34.464L170.067 352H352c52.935 0 96-43.065 96-96 0-13.958-2.996-27.228-8.376-39.204-4.061-9.039-2.284-19.626 4.723-26.633l12.183-12.183c11.499-11.499 30.965-8.526 38.312 5.982C505.814 205.624 512 230.103 512 256zM72.376 295.204C66.996 283.228 64 269.958 64 256c0-52.935 43.065-96 96-96h181.933l-34.512 32.419c-9.875 9.276-10.119 24.883-.539 34.464l10.775 10.775c9.373 9.372 24.568 9.372 33.941 0l92.686-92.686c9.373-9.373 9.373-24.568 0-33.941l-92.686-92.686c-9.373-9.373-24.568-9.373-33.941 0L306.882 29.12c-9.581 9.581-9.337 25.187.539 34.464L341.933 96H160C71.775 96 0 167.776 0 256c0 25.897 6.186 50.376 17.157 72.039 7.347 14.508 26.813 17.481 38.312 5.982l12.183-12.183c7.008-7.008 8.786-17.595 4.724-26.634z" }) }));
+const topLine = {
+    top: 0,
+    height: 5,
+    width: 1,
+    background: 'white',
+};
+const bottomLine = {
+    top: 0,
+    height: 5,
+    width: 1,
+    background: 'white',
+};
+const topContainer = {
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+};
+const centerContainer = {
+    justifyContent: 'center',
+    alignItems: 'center',
+};
+const bottomContainer = {
+    justifyContent: 'flex-end',
+    alignItems: 'center',
+};
+const LoopedIndicator = () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: width, children: [(0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: topContainer, children: (0, jsx_runtime_1.jsx)("div", { style: topLine }) }), (0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: bottomContainer, children: (0, jsx_runtime_1.jsx)("div", { style: bottomLine }) }), (0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: centerContainer, children: (0, jsx_runtime_1.jsx)(Icon, {}) })] }));
+};
+exports.LoopedIndicator = LoopedIndicator;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const LoopedTimelineIndicator: React.FC<{
+    loops: number;
+}>;

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

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LoopedTimelineIndicator = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importDefault(require("react"));
+const remotion_1 = require("remotion");
+const layout_1 = require("../layout");
+const LoopedIndicator_1 = require("./LoopedIndicator");
+const row = {
+    flexDirection: 'row',
+};
+const LoopedTimelineIndicator = ({ loops }) => {
+    return ((0, jsx_runtime_1.jsx)(remotion_1.AbsoluteFill, { style: row, children: new Array(loops).fill(true).map((_l, i) => {
+            return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment
+            // eslint-disable-next-line
+            , { children: [(0, jsx_runtime_1.jsx)(layout_1.Flex, {}), i === loops - 1 ? null : (0, jsx_runtime_1.jsx)(LoopedIndicator_1.LoopedIndicator, {})] }, i));
+        }) }));
+};
+exports.LoopedTimelineIndicator = LoopedTimelineIndicator;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const DEFAULT_TIMELINE_TRACKS = 90;
+export declare const MAX_TIMELINE_TRACKS: number;
+export declare const MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = 24;
+export declare const MaxTimelineTracksReached: React.FC;

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

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MaxTimelineTracksReached = exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = exports.MAX_TIMELINE_TRACKS = exports.DEFAULT_TIMELINE_TRACKS = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+exports.DEFAULT_TIMELINE_TRACKS = 90;
+exports.MAX_TIMELINE_TRACKS = typeof process.env.MAX_TIMELINE_TRACKS === 'undefined'
+    ? exports.DEFAULT_TIMELINE_TRACKS
+    : Number(process.env.MAX_TIMELINE_TRACKS);
+exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT = 24;
+const container = {
+    height: exports.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT,
+    display: 'flex',
+    alignItems: 'center',
+    color: 'rgba(255, 255, 255, 0.6)',
+    fontFamily: 'sans-serif',
+    fontSize: 12,
+    backgroundColor: 'rgba(255, 255, 255, 0.1)',
+    paddingLeft: timeline_layout_1.TIMELINE_PADDING + 5,
+};
+const MaxTimelineTracksReached = () => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: container, children: ["Limited display to ", exports.MAX_TIMELINE_TRACKS, " tracks to sustain performance.", '', "You can change this by setting Config.setMaxTimelineTracks() in your remotion.config.ts file."] }));
+};
+exports.MaxTimelineTracksReached = MaxTimelineTracksReached;

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

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

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

@@ -0,0 +1,92 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Timeline = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const calculate_timeline_1 = require("../../helpers/calculate-timeline");
+const colors_1 = require("../../helpers/colors");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const timeline_ref_1 = require("../../state/timeline-ref");
+const is_menu_item_1 = require("../Menu/is-menu-item");
+const SplitterContainer_1 = require("../Splitter/SplitterContainer");
+const SplitterElement_1 = require("../Splitter/SplitterElement");
+const SplitterHandle_1 = require("../Splitter/SplitterHandle");
+const is_collapsed_1 = require("./is-collapsed");
+const MaxTimelineTracks_1 = require("./MaxTimelineTracks");
+const timeline_refs_1 = require("./timeline-refs");
+const timeline_state_reducer_1 = require("./timeline-state-reducer");
+const TimelineDragHandler_1 = require("./TimelineDragHandler");
+const TimelineInOutPointer_1 = require("./TimelineInOutPointer");
+const TimelineList_1 = require("./TimelineList");
+const TimelinePlayCursorSyncer_1 = require("./TimelinePlayCursorSyncer");
+const TimelineScrollable_1 = require("./TimelineScrollable");
+const TimelineSlider_1 = require("./TimelineSlider");
+const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
+const TimelineTracks_1 = require("./TimelineTracks");
+const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
+const container = {
+    minHeight: '100%',
+    flex: 1,
+    display: 'flex',
+    height: 0,
+    overflowY: 'auto',
+    backgroundColor: colors_1.BACKGROUND,
+};
+const noop = () => undefined;
+const Timeline = () => {
+    var _a;
+    const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
+    const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
+    const [state, dispatch] = (0, react_1.useReducer)(timeline_state_reducer_1.timelineStateReducer, {
+        collapsed: {},
+    });
+    const timeline = (0, react_1.useMemo)(() => {
+        if (!videoConfig) {
+            return [];
+        }
+        return (0, calculate_timeline_1.calculateTimeline)({
+            sequences,
+            sequenceDuration: videoConfig.durationInFrames,
+        });
+    }, [sequences, videoConfig]);
+    (0, react_1.useImperativeHandle)(timeline_ref_1.timelineRef, () => {
+        return {
+            expandAll: () => {
+                dispatch({
+                    type: 'expand-all',
+                    allHashes: timeline.map((t) => t.hash),
+                });
+            },
+            collapseAll: () => {
+                dispatch({
+                    type: 'collapse-all',
+                    allHashes: timeline.map((t) => t.hash),
+                });
+            },
+        };
+    }, [timeline]);
+    const durationInFrames = (_a = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.durationInFrames) !== null && _a !== void 0 ? _a : 0;
+    const filtered = (0, react_1.useMemo)(() => {
+        const withoutHidden = timeline.filter((t) => !(0, is_collapsed_1.isTrackHidden)(t, timeline, state));
+        const withoutAfter = withoutHidden.filter((t) => {
+            return t.sequence.from <= durationInFrames && t.sequence.duration > 0;
+        });
+        return withoutAfter;
+    }, [durationInFrames, state, timeline]);
+    const shown = filtered.slice(0, MaxTimelineTracks_1.MAX_TIMELINE_TRACKS);
+    const hasBeenCut = filtered.length > shown.length;
+    const inner = (0, react_1.useMemo)(() => {
+        return {
+            height: shown.length * (timeline_layout_1.TIMELINE_LAYER_HEIGHT + timeline_layout_1.TIMELINE_BORDER * 2) +
+                (hasBeenCut ? MaxTimelineTracks_1.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT : 0) +
+                TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT,
+            display: 'flex',
+            flex: 1,
+            minHeight: '100%',
+            overflowX: 'hidden',
+        };
+    }, [hasBeenCut, shown.length]);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: timeline_refs_1.timelineVerticalScroll, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: (0, jsx_runtime_1.jsx)(TimelineWidthProvider_1.TimelineWidthProvider, { 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, 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

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

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

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineCollapseToggle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const container = {
+    height: 10,
+    width: 10,
+    display: 'flex',
+    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 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 }) }));
+};
+exports.TimelineCollapseToggle = TimelineCollapseToggle;

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

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