@remotion/studio 4.0.80

package/dist/components/Timeline/TimelineListItem.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineListItem = 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 TimelineLayerEye_1 = require("./TimelineLayerEye");
+const TimelineStack_1 = require("./TimelineStack");
+const SPACING = 5;
+const outer = {
+    height: timeline_layout_1.TIMELINE_LAYER_HEIGHT + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
+    color: 'white',
+    fontFamily: 'Arial, Helvetica, sans-serif',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    wordBreak: 'break-all',
+    textAlign: 'left',
+    paddingLeft: SPACING,
+    borderBottom: `1px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
+};
+const space = {
+    width: SPACING,
+    flexShrink: 0,
+};
+const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
+    const { hidden, setHidden } = (0, react_1.useContext)(remotion_1.Internals.SequenceVisibilityToggleContext);
+    const padder = (0, react_1.useMemo)(() => {
+        return {
+            width: Number(SPACING * 1.5) * nestedDepth,
+            flexShrink: 0,
+        };
+    }, [nestedDepth]);
+    const isItemHidden = (0, react_1.useMemo)(() => {
+        var _a;
+        return (_a = hidden[sequence.id]) !== null && _a !== void 0 ? _a : false;
+    }, [hidden, sequence.id]);
+    const onToggleVisibility = (0, react_1.useCallback)((type) => {
+        setHidden((prev) => {
+            return {
+                ...prev,
+                [sequence.id]: type !== 'enable',
+            };
+        });
+    }, [sequence.id, setHidden]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsx)(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility }), (0, jsx_runtime_1.jsx)("div", { style: padder }), sequence.parent && nestedDepth > 0 ? (0, jsx_runtime_1.jsx)("div", { style: space }) : null, (0, jsx_runtime_1.jsx)(TimelineStack_1.TimelineStack, { sequence: sequence, isCompact: isCompact })] }));
+};
+exports.TimelineListItem = TimelineListItem;

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

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

package/dist/components/Timeline/TimelinePlayCursorSyncer.js

@@ -0,0 +1,86 @@
+"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;
+    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 { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
+    const { zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
+    const compositionId = canvasContent && canvasContent.type === 'composition'
+        ? canvasContent.compositionId
+        : null;
+    const zoom = compositionId
+        ? (_a = zoomMap[compositionId]) !== null && _a !== void 0 ? _a : timeline_zoom_1.TIMELINE_MIN_ZOOM
+        : null;
+    if (zoom && video) {
+        (0, imperative_state_1.setCurrentFrame)(timelinePosition);
+        (0, imperative_state_1.setCurrentZoom)(zoom);
+        (0, imperative_state_1.setCurrentDuration)(video.durationInFrames);
+        (0, imperative_state_1.setCurrentFps)(video.fps);
+    }
+    const playing = (_b = timelineContext.playing) !== null && _b !== void 0 ? _b : 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/components/Timeline/TimelineScrollable.d.ts

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

package/dist/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/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/components/Timeline/TimelineSequence.js

@@ -0,0 +1,77 @@
+"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 TimelineSequenceFrame_1 = require("./TimelineSequenceFrame");
+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 frame = (0, remotion_1.useCurrentFrame)();
+    const relativeFrame = frame - s.from;
+    const roundedFrame = Math.round(relativeFrame * 100) / 100;
+    const isInRange = relativeFrame >= 0 && relativeFrame < s.duration;
+    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: 2,
+            position: 'absolute',
+            height: timeline_layout_1.TIMELINE_LAYER_HEIGHT,
+            marginLeft,
+            width,
+            color: 'white',
+            overflow: 'hidden',
+            opacity: isInRange ? 1 : 0.5,
+        };
+    }, [isInRange, 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.type !== 'audio' &&
+                s.type !== 'video' &&
+                s.loopDisplay === undefined &&
+                isInRange ? ((0, jsx_runtime_1.jsx)("div", { style: {
+                    paddingLeft: 5,
+                    height: '100%',
+                    display: 'flex',
+                    alignItems: 'center',
+                }, children: (0, jsx_runtime_1.jsx)(TimelineSequenceFrame_1.TimelineSequenceFrame, { roundedFrame: roundedFrame }) })) : null] }, s.id));
+};

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

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

package/dist/components/Timeline/TimelineSequenceFrame.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineSequenceFrame = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const relativeFrameStyle = {
+    fontSize: 11,
+    fontFamily: 'Arial, Helvetica, sans-serif',
+    color: 'white',
+    opacity: 0.5,
+};
+const TimelineSequenceFrame = ({ roundedFrame }) => {
+    return (0, jsx_runtime_1.jsx)("div", { style: relativeFrameStyle, children: roundedFrame });
+};
+exports.TimelineSequenceFrame = TimelineSequenceFrame;

package/dist/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/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: '100vh',
+    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/components/Timeline/TimelineSliderHandle.d.ts

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

package/dist/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", 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/components/Timeline/TimelineStack/get-stack.d.ts

@@ -0,0 +1 @@
+export declare const getOriginalLocationFromStack: (stack: string) => Promise<import("../../../error-overlay/react-overlay/utils/get-source-map").OriginalPosition | null>;

package/dist/components/Timeline/TimelineStack/get-stack.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOriginalLocationFromStack = void 0;
+const source_map_1 = require("source-map");
+const get_source_map_1 = require("../../../error-overlay/react-overlay/utils/get-source-map");
+const get_location_of_sequence_1 = require("../../../helpers/get-location-of-sequence");
+const waiters = [];
+const sourceMapConsumerCache = {};
+const isCreating = {};
+const getSourceMapCache = async (fileName) => {
+    if (sourceMapConsumerCache[fileName]) {
+        return sourceMapConsumerCache[fileName];
+    }
+    if (isCreating[fileName]) {
+        return new Promise((resolve) => {
+            waiters.push({
+                id: String(Math.random()),
+                forFileName: fileName,
+                resolve,
+            });
+        });
+    }
+    isCreating[fileName] = true;
+    const res = await fetch(`${fileName}.map`);
+    const json = await res.json();
+    const map = await new Promise((resolve) => {
+        source_map_1.SourceMapConsumer.with(json, null, (consumer) => {
+            resolve(consumer);
+        });
+    });
+    waiters.filter((w) => {
+        if (w.forFileName === fileName) {
+            w.resolve(map);
+            return false;
+        }
+        return true;
+    });
+    sourceMapConsumerCache[fileName] = map;
+    isCreating[fileName] = false;
+    return map;
+};
+const getOriginalLocationFromStack = async (stack) => {
+    const location = (0, get_location_of_sequence_1.getLocationOfSequence)(stack);
+    if (!location) {
+        return null;
+    }
+    const map = await getSourceMapCache(location.fileName);
+    const originalPosition = (0, get_source_map_1.getOriginalPosition)(map, location.lineNumber, location.columnNumber);
+    return originalPosition;
+};
+exports.getOriginalLocationFromStack = getOriginalLocationFromStack;

package/dist/components/Timeline/TimelineStack/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { TSequence } from 'remotion';
+export declare const TimelineStack: React.FC<{
+    isCompact: boolean;
+    sequence: TSequence;
+}>;

package/dist/components/Timeline/TimelineStack/index.js

@@ -0,0 +1,145 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineStack = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const source_map_1 = require("source-map");
+const source_map_endpoint_1 = require("../../../error-overlay/react-overlay/utils/source-map-endpoint");
+const colors_1 = require("../../../helpers/colors");
+const open_in_editor_1 = require("../../../helpers/open-in-editor");
+const InitialCompositionLoader_1 = require("../../InitialCompositionLoader");
+const layout_1 = require("../../layout");
+const NotificationCenter_1 = require("../../Notifications/NotificationCenter");
+const Spinner_1 = require("../../Spinner");
+const get_stack_1 = require("./get-stack");
+const source_attribution_1 = require("./source-attribution");
+// @ts-expect-error
+source_map_1.SourceMapConsumer.initialize({
+    'lib/mappings.wasm': source_map_endpoint_1.SOURCE_MAP_ENDPOINT,
+});
+const TimelineStack = ({ isCompact, sequence }) => {
+    const [originalLocation, setOriginalLocation] = (0, react_1.useState)(null);
+    const [stackHovered, setStackHovered] = (0, react_1.useState)(false);
+    const [titleHovered, setTitleHovered] = (0, react_1.useState)(false);
+    const [opening, setOpening] = (0, react_1.useState)(false);
+    const selectAsset = (0, InitialCompositionLoader_1.useSelectAsset)();
+    const assetPath = (0, react_1.useMemo)(() => {
+        if (sequence.type !== 'video' && sequence.type !== 'audio') {
+            return null;
+        }
+        const isStatic = sequence.src.startsWith(window.remotion_staticBase);
+        if (!isStatic) {
+            return null;
+        }
+        const relativePath = sequence.src.replace(window.remotion_staticBase + '/', '');
+        return relativePath;
+    }, [sequence]);
+    const navigateToAsset = (0, react_1.useCallback)((asset) => {
+        selectAsset(asset);
+        window.history.pushState({}, 'Studio', `/assets/${asset}`);
+    }, [selectAsset]);
+    const openEditor = (0, react_1.useCallback)(async (location) => {
+        if (!window.remotion_editorName) {
+            return;
+        }
+        setOpening(true);
+        try {
+            await (0, open_in_editor_1.openInEditor)({
+                originalColumnNumber: location.column,
+                originalFileName: location.source,
+                originalFunctionName: null,
+                originalLineNumber: location.line,
+                originalScriptCode: null,
+            });
+        }
+        catch (err) {
+            (0, NotificationCenter_1.sendErrorNotification)(err.message);
+        }
+        finally {
+            setOpening(false);
+        }
+    }, []);
+    const onClickTitle = (0, react_1.useCallback)(() => {
+        if (assetPath) {
+            navigateToAsset(assetPath);
+            return;
+        }
+        if (!originalLocation) {
+            return;
+        }
+        openEditor(originalLocation);
+    }, [assetPath, navigateToAsset, openEditor, originalLocation]);
+    const onClickStack = (0, react_1.useCallback)(() => {
+        if (!originalLocation) {
+            return;
+        }
+        openEditor(originalLocation);
+    }, [openEditor, originalLocation]);
+    (0, react_1.useEffect)(() => {
+        if (!sequence.stack) {
+            return;
+        }
+        (0, get_stack_1.getOriginalLocationFromStack)(sequence.stack)
+            .then((frame) => {
+            setOriginalLocation(frame);
+        })
+            .catch((err) => {
+            // eslint-disable-next-line no-console
+            console.error('Could not get original location of Sequence', err);
+        });
+    }, [sequence.stack]);
+    const onStackPointerEnter = (0, react_1.useCallback)(() => {
+        setStackHovered(true);
+    }, []);
+    const onStackPointerLeave = (0, react_1.useCallback)(() => {
+        setStackHovered(false);
+    }, []);
+    const onTitlePointerEnter = (0, react_1.useCallback)(() => {
+        setTitleHovered(true);
+    }, []);
+    const onTitlePointerLeave = (0, react_1.useCallback)(() => {
+        setTitleHovered(false);
+    }, []);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            fontSize: 12,
+            color: opening
+                ? colors_1.VERY_LIGHT_TEXT
+                : stackHovered
+                    ? colors_1.LIGHT_TEXT
+                    : colors_1.VERY_LIGHT_TEXT,
+            marginLeft: 10,
+            cursor: 'pointer',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            whiteSpace: 'nowrap',
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+            flexShrink: 100000,
+        };
+    }, [stackHovered, opening]);
+    const hoverable = (originalLocation && isCompact) ||
+        (assetPath && window.remotion_editorName);
+    const textStyle = (0, react_1.useMemo)(() => {
+        const hoverEffect = titleHovered && hoverable;
+        return {
+            fontSize: 12,
+            whiteSpace: 'nowrap',
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+            lineHeight: 1,
+            color: opening && isCompact ? colors_1.VERY_LIGHT_TEXT : colors_1.LIGHT_COLOR,
+            userSelect: 'none',
+            borderBottom: hoverEffect ? '1px solid #fff' : 'none',
+            cursor: hoverEffect ? 'pointer' : undefined,
+        };
+    }, [hoverable, isCompact, opening, titleHovered]);
+    const text = sequence.displayName.length > 1000
+        ? sequence.displayName.slice(0, 1000) + '...'
+        : sequence.displayName;
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { onPointerEnter: onTitlePointerEnter, onPointerLeave: onTitlePointerLeave, title: originalLocation
+                    ? (0, source_attribution_1.getOriginalSourceAttribution)(originalLocation)
+                    : text || '<Sequence>', style: textStyle, onClick: onClickTitle, children: text || '<Sequence>' }), isCompact || !originalLocation ? null : ((0, jsx_runtime_1.jsx)("div", { onPointerEnter: onStackPointerEnter, onPointerLeave: onStackPointerLeave, onClick: onClickStack, style: style, children: (0, source_attribution_1.getOriginalSourceAttribution)(originalLocation) })), opening ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(Spinner_1.Spinner, { duration: 0.5, size: 12 })] })) : null] }));
+};
+exports.TimelineStack = TimelineStack;

package/dist/components/Timeline/TimelineStack/source-attribution.d.ts

@@ -0,0 +1,2 @@
+import type { OriginalPosition } from '../../../error-overlay/react-overlay/utils/get-source-map';
+export declare const getOriginalSourceAttribution: (originalLocation: OriginalPosition) => string;

package/dist/components/Timeline/TimelineStack/source-attribution.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getOriginalSourceAttribution = void 0;
+const getOriginalSourceAttribution = (originalLocation) => {
+    if (!originalLocation.source) {
+        return '';
+    }
+    const split = originalLocation.source.split('/');
+    const last = split[split.length - 1];
+    if (last.startsWith('index')) {
+        const lastTwo = split[split.length - 2];
+        return `${lastTwo}/${last}:${originalLocation.line}`;
+    }
+    return `${last}:${originalLocation.line}`;
+};
+exports.getOriginalSourceAttribution = getOriginalSourceAttribution;

package/dist/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;