@remotion/cli 4.0.113 → 4.0.115

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

@@ -1,104 +0,0 @@
-"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

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

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

@@ -1,77 +0,0 @@
-"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

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

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

@@ -1,26 +0,0 @@
-"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

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

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

@@ -1,64 +0,0 @@
-"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

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

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

@@ -1,32 +0,0 @@
-"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

@@ -1,5 +0,0 @@
-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

@@ -1,79 +0,0 @@
-"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

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

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

@@ -1,14 +0,0 @@
-"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

@@ -1,5 +0,0 @@
-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

@@ -1,166 +0,0 @@
-"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

@@ -1,8 +0,0 @@
-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

@@ -1,37 +0,0 @@
-"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

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