@remotion/cli 4.0.111 → 4.0.113

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

@@ -0,0 +1,104 @@
+"use strict";
+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");
+const TimelineCollapseToggle_1 = require("./TimelineCollapseToggle");
+const TimelineSequenceFrame_1 = require("./TimelineSequenceFrame");
+const HOOK_WIDTH = 7;
+const BORDER_BOTTOM_LEFT_RADIUS = 2;
+const SPACING = 5;
+const TIMELINE_LAYER_PADDING = HOOK_WIDTH + SPACING * 1.5;
+const TIMELINE_COLLAPSER_WIDTH = 8;
+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,
+    color: 'white',
+    fontFamily: 'Arial, Helvetica, sans-serif',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingLeft: timeline_layout_1.TIMELINE_PADDING,
+    wordBreak: 'break-all',
+    textAlign: 'left',
+};
+const hookContainer = {
+    height: timeline_layout_1.TIMELINE_LAYER_HEIGHT,
+    width: HOOK_WIDTH,
+    position: 'relative',
+};
+const hook = {
+    borderLeft: '1px solid #555',
+    borderBottom: '1px solid #555',
+    borderBottomLeftRadius: BORDER_BOTTOM_LEFT_RADIUS,
+    width: HOOK_WIDTH,
+    position: 'absolute',
+    bottom: timeline_layout_1.TIMELINE_LAYER_HEIGHT / 2 - 1,
+};
+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,
+    border: 'none',
+    background: 'none',
+};
+const TimelineListItem = ({ nestedDepth, sequence, collapsed, beforeDepth, dispatchStateChange, hash, canCollapse, }) => {
+    const { tabIndex } = (0, z_index_1.useZIndex)();
+    const leftOffset = TIMELINE_LAYER_PADDING;
+    const hookStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...hook,
+            height: timeline_layout_1.TIMELINE_LAYER_HEIGHT +
+                BORDER_BOTTOM_LEFT_RADIUS / 2 -
+                (beforeDepth === nestedDepth ? 2 : 12),
+        };
+    }, [beforeDepth, nestedDepth]);
+    const padder = (0, react_1.useMemo)(() => {
+        return {
+            width: leftOffset * nestedDepth,
+            flexShrink: 0,
+        };
+    }, [leftOffset, nestedDepth]);
+    const toggleCollapse = (0, react_1.useCallback)(() => {
+        if (collapsed) {
+            dispatchStateChange({
+                type: 'expand',
+                hash,
+            });
+        }
+        else {
+            dispatchStateChange({
+                type: 'collapse',
+                hash,
+            });
+        }
+    }, [collapsed, dispatchStateChange, hash]);
+    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 })] }));
+};
+exports.TimelineListItem = TimelineListItem;

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

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

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

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelinePlayCursorSyncer = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const timeline_zoom_1 = require("../../state/timeline-zoom");
+const imperative_state_1 = require("./imperative-state");
+const timeline_refs_1 = require("./timeline-refs");
+const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
+let lastTimelinePositionWhileScrolling = null;
+const TimelinePlayCursorSyncer = () => {
+    var _a, _b, _c;
+    const video = remotion_1.Internals.useVideo();
+    const timelineContext = (0, react_1.useContext)(remotion_1.Internals.Timeline.TimelineContext);
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
+    const { zoom } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
+    (0, imperative_state_1.setCurrentFrame)(timelinePosition);
+    (0, imperative_state_1.setCurrentZoom)(zoom);
+    (0, imperative_state_1.setCurrentDuration)((_a = video === null || video === void 0 ? void 0 : video.durationInFrames) !== null && _a !== void 0 ? _a : 1);
+    (0, imperative_state_1.setCurrentFps)((_b = video === null || video === void 0 ? void 0 : video.fps) !== null && _b !== void 0 ? _b : 1);
+    const playing = (_c = timelineContext.playing) !== null && _c !== void 0 ? _c : false;
+    /**
+     * While playing (forwards or backwards), jump one viewport width to the left or right when the cursor goes out of the viewport.
+     */
+    (0, react_1.useEffect)(() => {
+        if (!video) {
+            return;
+        }
+        if (!playing) {
+            return;
+        }
+        (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+            direction: timelineContext.playbackRate > 0 ? 'page-right' : 'page-left',
+            durationInFrames: video.durationInFrames,
+            frame: timelinePosition,
+        });
+    }, [playing, timelineContext, timelinePosition, video]);
+    /**
+     * Restore state if `enter` is being pressed
+     */
+    (0, react_1.useEffect)(() => {
+        const { current } = timeline_refs_1.scrollableRef;
+        if (!current) {
+            return;
+        }
+        if (playing) {
+            lastTimelinePositionWhileScrolling = {
+                scrollLeft: current.scrollLeft,
+                frame: (0, imperative_state_1.getCurrentFrame)(),
+                zoomLevel: (0, imperative_state_1.getCurrentZoom)(),
+                durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+            };
+        }
+        else if (lastTimelinePositionWhileScrolling !== null) {
+            if ((0, timeline_scroll_logic_1.isCursorInViewport)({
+                frame: (0, imperative_state_1.getCurrentFrame)(),
+                durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+            })) {
+                return;
+            }
+            if (lastTimelinePositionWhileScrolling.zoomLevel === (0, imperative_state_1.getCurrentZoom)() &&
+                lastTimelinePositionWhileScrolling.durationInFrames ===
+                    (0, imperative_state_1.getCurrentDuration)()) {
+                current.scrollLeft = lastTimelinePositionWhileScrolling.scrollLeft;
+            }
+            else {
+                (0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
+                    direction: 'center',
+                    durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
+                    frame: lastTimelinePositionWhileScrolling.frame,
+                });
+            }
+        }
+    }, [playing]);
+    return null;
+};
+exports.TimelinePlayCursorSyncer = TimelinePlayCursorSyncer;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const TimelineScrollable: React.FC<{
+    children: React.ReactNode;
+}>;

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

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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%',
+    height: '100%',
+    overflowX: 'auto',
+    overflowY: 'hidden',
+    position: 'relative',
+    backgroundColor: colors_1.TIMELINE_BACKGROUND,
+};
+const TimelineScrollable = ({ children }) => {
+    const containerStyle = (0, react_1.useMemo)(() => {
+        return {
+            width: '100%',
+            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 }) }));
+};
+exports.TimelineScrollable = TimelineScrollable;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { TSequence } from 'remotion';
+export declare const TimelineSequence: React.FC<{
+    s: TSequence;
+}>;

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

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineSequence = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const colors_1 = require("../../helpers/colors");
+const get_timeline_sequence_layout_1 = require("../../helpers/get-timeline-sequence-layout");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const AudioWaveform_1 = require("../AudioWaveform");
+const LoopedTimelineIndicators_1 = require("./LoopedTimelineIndicators");
+const TimelineVideoInfo_1 = require("./TimelineVideoInfo");
+const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
+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 }) => {
+    const windowWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
+    if (windowWidth === null) {
+        return null;
+    }
+    return (0, jsx_runtime_1.jsx)(Inner, { windowWidth: windowWidth, s: s });
+};
+exports.TimelineSequence = TimelineSequence;
+const Inner = ({ s, windowWidth }) => {
+    // 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,
+    // if that is the case, it needs to be asynchronously determined
+    const [maxMediaDuration, setMaxMediaDuration] = (0, react_1.useState)(Infinity);
+    const video = remotion_1.Internals.useVideo();
+    if (!video) {
+        throw new TypeError('Expected video config');
+    }
+    const { marginLeft, width } = (0, react_1.useMemo)(() => {
+        return (0, get_timeline_sequence_layout_1.getTimelineSequenceLayout)({
+            durationInFrames: s.loopDisplay
+                ? s.loopDisplay.durationInFrames * s.loopDisplay.numberOfTimes
+                : s.duration,
+            startFrom: s.loopDisplay ? s.from + s.loopDisplay.startOffset : s.from,
+            startFromMedia: s.type === 'sequence' ? 0 : s.startMediaFrom,
+            maxMediaDuration,
+            video,
+            windowWidth,
+        });
+    }, [maxMediaDuration, s, video, windowWidth]);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            background: s.type === 'audio'
+                ? AUDIO_GRADIENT
+                : s.type === 'video'
+                    ? VIDEO_GRADIENT
+                    : colors_1.BLUE,
+            border: get_timeline_sequence_layout_1.SEQUENCE_BORDER_WIDTH + 'px solid rgba(255, 255, 255, 0.2)',
+            borderRadius: 4,
+            position: 'absolute',
+            height: timeline_layout_1.TIMELINE_LAYER_HEIGHT,
+            marginTop: 1,
+            marginLeft,
+            width,
+            color: 'white',
+            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, 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.loopDisplay === undefined ? null : ((0, jsx_runtime_1.jsx)(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes }))] }, s.id));
+};

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const TimelineSequenceFrame: React.FC<{
+    from: number;
+    duration: number;
+}>;

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

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineSequenceFrame = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const remotion_1 = require("remotion");
+const render_frame_1 = require("../../state/render-frame");
+const relativeFrameStyle = {
+    fontSize: 12,
+    fontFamily: 'Arial, Helvetica, sans-serif',
+    color: 'white',
+    opacity: 0.6,
+    marginTop: 2,
+    cursor: 'help',
+};
+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;
+    }
+    return ((0, jsx_runtime_1.jsxs)("div", { title: `
+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, ")"] }));
+};
+exports.TimelineSequenceFrame = TimelineSequenceFrame;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const redrawTimelineSliderFast: React.RefObject<{
+    draw: (frame: number, width?: number) => void;
+}>;
+export declare const TimelineSlider: React.FC;

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

@@ -0,0 +1,79 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineSlider = exports.redrawTimelineSliderFast = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timeline-slider");
+const imperative_state_1 = require("./imperative-state");
+const timeline_refs_1 = require("./timeline-refs");
+const TimelineSliderHandle_1 = require("./TimelineSliderHandle");
+const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
+const container = {
+    position: 'absolute',
+    bottom: 0,
+    top: 0,
+    pointerEvents: 'none',
+};
+const line = {
+    height: '100%',
+    width: 1,
+    position: 'fixed',
+    backgroundColor: '#f02c00',
+};
+exports.redrawTimelineSliderFast = (0, react_1.createRef)();
+const TimelineSlider = () => {
+    const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
+    const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
+    if (videoConfig === null || timelineWidth === null) {
+        return null;
+    }
+    return (0, jsx_runtime_1.jsx)(Inner, {});
+};
+exports.TimelineSlider = TimelineSlider;
+const Inner = () => {
+    const videoConfig = (0, remotion_1.useVideoConfig)();
+    const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
+    const ref = (0, react_1.useRef)(null);
+    const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
+    if (timelineWidth === null) {
+        throw new Error('Unexpectedly did not have timeline width');
+    }
+    const style = (0, react_1.useMemo)(() => {
+        const left = (0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(timelinePosition, videoConfig.durationInFrames, timelineWidth);
+        return {
+            ...container,
+            transform: `translateX(${left}px)`,
+        };
+    }, [timelinePosition, videoConfig.durationInFrames, timelineWidth]);
+    (0, react_1.useImperativeHandle)(exports.redrawTimelineSliderFast, () => {
+        return {
+            draw: (frame, width) => {
+                var _a, _b;
+                const { current } = ref;
+                if (!current) {
+                    throw new Error('unexpectedly did not have ref to timelineslider');
+                }
+                current.style.transform = `translateX(${(0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(frame, (0, imperative_state_1.getCurrentDuration)(), (_b = width !== null && width !== void 0 ? width : (_a = timeline_refs_1.sliderAreaRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0)}px)`;
+            },
+        };
+    }, []);
+    (0, react_1.useEffect)(() => {
+        const currentRef = ref.current;
+        if (!currentRef) {
+            return;
+        }
+        const { current } = timeline_refs_1.timelineVerticalScroll;
+        if (!current) {
+            return;
+        }
+        const onScroll = () => {
+            currentRef.style.top = current.scrollTop + 'px';
+        };
+        current.addEventListener('scroll', onScroll);
+        return () => {
+            current.removeEventListener('scroll', onScroll);
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)("div", { ref: ref, style: style, children: [(0, jsx_runtime_1.jsx)("div", { style: line }), (0, jsx_runtime_1.jsx)(TimelineSliderHandle_1.TimelineSliderHandle, {})] }));
+};

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

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

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineSliderHandle = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const container = {
+    width: 20,
+    height: 20,
+    position: 'fixed',
+    marginLeft: -8,
+};
+const TimelineSliderHandle = () => {
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)("svg", { width: 17, viewBox: "0 0 159 212", version: "1.1", children: (0, jsx_runtime_1.jsx)("path", { d: "M17.0234375,1.07763419 L143.355469,1.07763419 C151.63974,1.07763419 158.355469,7.79336295 158.355469,16.0776342 L158.355469,69.390507 C158.355469,73.7938677 156.420655,77.9748242 153.064021,80.8248415 L89.3980057,134.881757 C83.7986799,139.635978 75.5802263,139.635978 69.9809005,134.881757 L6.66764807,81.1243622 C3.0872392,78.0843437 1.0234375,73.6246568 1.0234375,68.9277387 L1.0234375,17.0776342 C1.0234375,8.2410782 8.1868815,1.07763419 17.0234375,1.07763419 Z", fill: "#f02c00" }) }) }));
+};
+exports.TimelineSliderHandle = TimelineSliderHandle;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const TIMELINE_TIME_INDICATOR_HEIGHT = 30;
+export declare const TimelineTimePlaceholders: React.FC;
+export declare const TimelineTimePadding: React.FC;
+export declare const TimelineTimeIndicators: React.FC;

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

@@ -0,0 +1,166 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineTimeIndicators = exports.TimelineTimePadding = exports.TimelineTimePlaceholders = exports.TIMELINE_TIME_INDICATOR_HEIGHT = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const colors_1 = require("../../helpers/colors");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const render_frame_1 = require("../../state/render-frame");
+const TimeValue_1 = require("../TimeValue");
+const timeline_refs_1 = require("./timeline-refs");
+const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
+const TimelineListItem_1 = require("./TimelineListItem");
+const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
+exports.TIMELINE_TIME_INDICATOR_HEIGHT = 30;
+const container = {
+    height: exports.TIMELINE_TIME_INDICATOR_HEIGHT - 4,
+    boxShadow: `0 0 4px ${colors_1.TIMELINE_BACKGROUND}`,
+    position: 'absolute',
+    backgroundColor: colors_1.TIMELINE_BACKGROUND,
+    top: 0,
+    left: 0,
+};
+const tick = {
+    width: 1,
+    backgroundColor: 'rgba(255, 255, 255, 0.15)',
+    height: 20,
+    position: 'absolute',
+};
+const secondTick = {
+    ...tick,
+    height: 15,
+};
+const tickLabel = {
+    fontSize: 12,
+    marginLeft: 8,
+    marginTop: 7,
+    color: colors_1.LIGHT_TEXT,
+};
+const timeValue = {
+    height: exports.TIMELINE_TIME_INDICATOR_HEIGHT,
+    position: 'absolute',
+    top: 0,
+    width: '100%',
+    paddingLeft: TimelineListItem_1.TOTAL_TIMELINE_LAYER_LEFT_PADDING,
+    boxShadow: `0 0 20px ${colors_1.BACKGROUND}`,
+    display: 'flex',
+    alignItems: 'center',
+    background: colors_1.BACKGROUND,
+};
+const TimelineTimePlaceholders = () => {
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const currentRef = ref.current;
+        if (!currentRef) {
+            return;
+        }
+        const { current } = timeline_refs_1.timelineVerticalScroll;
+        if (!current) {
+            return;
+        }
+        const onScroll = () => {
+            currentRef.style.top = current.scrollTop + 'px';
+        };
+        current.addEventListener('scroll', onScroll);
+        return () => {
+            current.removeEventListener('scroll', onScroll);
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, style: timeValue, children: (0, jsx_runtime_1.jsx)(TimeValue_1.TimeValue, {}) }));
+};
+exports.TimelineTimePlaceholders = TimelineTimePlaceholders;
+const TimelineTimePadding = () => {
+    return ((0, jsx_runtime_1.jsx)("div", { style: {
+            height: exports.TIMELINE_TIME_INDICATOR_HEIGHT,
+        } }));
+};
+exports.TimelineTimePadding = TimelineTimePadding;
+const TimelineTimeIndicators = () => {
+    const sliderTrack = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
+    const video = remotion_1.Internals.useVideo();
+    if (sliderTrack === null) {
+        return null;
+    }
+    if (video === null) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(Inner, { durationInFrames: video.durationInFrames, fps: video.fps, windowWidth: sliderTrack }));
+};
+exports.TimelineTimeIndicators = TimelineTimeIndicators;
+const Inner = ({ windowWidth, durationInFrames, fps }) => {
+    const ref = (0, react_1.useRef)(null);
+    (0, react_1.useEffect)(() => {
+        const currentRef = ref.current;
+        if (!currentRef) {
+            return;
+        }
+        const { current } = timeline_refs_1.timelineVerticalScroll;
+        if (!current) {
+            return;
+        }
+        const onScroll = () => {
+            currentRef.style.top = current.scrollTop + 'px';
+        };
+        current.addEventListener('scroll', onScroll);
+        return () => {
+            current.removeEventListener('scroll', onScroll);
+        };
+    }, []);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            ...container,
+            width: windowWidth,
+            overflow: 'hidden',
+        };
+    }, [windowWidth]);
+    const ticks = (0, react_1.useMemo)(() => {
+        const frameInterval = (0, timeline_scroll_logic_1.getFrameIncrementFromWidth)(durationInFrames, windowWidth);
+        const MIN_SPACING_BETWEEN_TICKS_PX = 5;
+        const seconds = Math.floor(durationInFrames / fps);
+        const secondMarkerEveryNth = Math.ceil((MIN_SPACING_BETWEEN_TICKS_PX * fps) / (frameInterval * fps));
+        const frameMarkerEveryNth = Math.ceil(MIN_SPACING_BETWEEN_TICKS_PX / frameInterval);
+        // Big ticks showing for every second
+        const secondTicks = new Array(seconds)
+            .fill(true)
+            .map((_, index) => {
+            return {
+                frame: index * fps,
+                style: {
+                    ...secondTick,
+                    left: frameInterval * index * fps + timeline_layout_1.TIMELINE_PADDING,
+                },
+                showTime: index > 0,
+            };
+        })
+            .filter((_, idx) => idx % secondMarkerEveryNth === 0);
+        const frameTicks = new Array(durationInFrames)
+            .fill(true)
+            .map((_, index) => {
+            return {
+                frame: index,
+                style: {
+                    ...tick,
+                    left: frameInterval * index + timeline_layout_1.TIMELINE_PADDING,
+                    height: index % fps === 0
+                        ? 10
+                        : (index / frameMarkerEveryNth) % 2 === 0
+                            ? 5
+                            : 2,
+                },
+                showTime: false,
+            };
+        })
+            .filter((_, idx) => idx % frameMarkerEveryNth === 0);
+        // Merge and deduplicate ticks
+        const hasTicks = [];
+        return [...secondTicks, ...frameTicks].filter((t) => {
+            const alreadyUsed = hasTicks.find((ht) => ht === t.frame) !== undefined;
+            hasTicks.push(t.frame);
+            return !alreadyUsed;
+        });
+    }, [durationInFrames, fps, windowWidth]);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: ref, style: style, children: ticks.map((t) => {
+            return ((0, jsx_runtime_1.jsx)("div", { style: t.style, children: t.showTime ? ((0, jsx_runtime_1.jsx)("div", { style: tickLabel, children: (0, render_frame_1.renderFrame)(t.frame, fps) })) : null }, t.frame));
+        }) }));
+};

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+import type { TimelineViewState } from './timeline-state-reducer';
+export declare const TimelineTracks: React.FC<{
+    timeline: TrackWithHash[];
+    viewState: TimelineViewState;
+    hasBeenCut: boolean;
+}>;

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

@@ -0,0 +1,37 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineTracks = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
+const is_collapsed_1 = require("./is-collapsed");
+const MaxTimelineTracks_1 = require("./MaxTimelineTracks");
+const TimelineSequence_1 = require("./TimelineSequence");
+const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
+const content = {
+    paddingLeft: timeline_layout_1.TIMELINE_PADDING,
+    paddingRight: timeline_layout_1.TIMELINE_PADDING,
+};
+const timelineContent = {
+    minHeight: '100%',
+};
+const TimelineTracks = ({ timeline, viewState, hasBeenCut }) => {
+    const inner = (0, react_1.useMemo)(() => {
+        return {
+            height: timeline_layout_1.TIMELINE_LAYER_HEIGHT + timeline_layout_1.TIMELINE_BORDER * 2,
+        };
+    }, []);
+    const timelineStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...timelineContent,
+            width: 100 + '%',
+        };
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: timelineStyle, children: [(0, jsx_runtime_1.jsxs)("div", { style: content, children: [(0, jsx_runtime_1.jsx)(TimelineTimeIndicators_1.TimelineTimePadding, {}), timeline.map((track) => {
+                        if ((0, is_collapsed_1.isTrackHidden)(track, timeline, viewState)) {
+                            return null;
+                        }
+                        return ((0, jsx_runtime_1.jsx)("div", { style: inner, children: (0, jsx_runtime_1.jsx)(TimelineSequence_1.TimelineSequence, { s: track.sequence }) }, track.sequence.id));
+                    }), (0, jsx_runtime_1.jsx)(TimelineTimeIndicators_1.TimelineTimeIndicators, {})] }), hasBeenCut ? (0, jsx_runtime_1.jsx)(MaxTimelineTracks_1.MaxTimelineTracksReached, {}) : null] }));
+};
+exports.TimelineTracks = TimelineTracks;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const TimelineVideoInfo: React.FC<{
+    src: string;
+}>;