@remotion/studio 4.0.468 → 4.0.470

package/dist/components/Timeline/TimelineSequence.js

@@ -44,21 +44,32 @@ const use_max_media_duration_1 = require("../../helpers/use-max-media-duration")
 const AudioWaveform_1 = require("../AudioWaveform");
 const LoopedTimelineIndicators_1 = require("./LoopedTimelineIndicators");
 const TimelineImageInfo_1 = require("./TimelineImageInfo");
+const TimelineSelection_1 = require("./TimelineSelection");
 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 IMAGE_GRADIENT = 'linear-gradient(to top, #2980b9, #3498db)';
-const TimelineSequenceFn = ({ s }) => {
+const TimelineSequenceFn = ({ s, nodePathInfo }) => {
     const windowWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
     if (windowWidth === null) {
         return null;
     }
-    return jsx_runtime_1.jsx(TimelineSequenceInner, { windowWidth: windowWidth, s: s });
+    return (jsx_runtime_1.jsx(TimelineSequenceInner, { windowWidth: windowWidth, s: s, nodePathInfo: nodePathInfo }));
 };
-const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidth, postmountWidth, style, children, }) => {
+const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidth, postmountWidth, style, children, nodePathInfo, }) => {
     var _a, _b;
+    const { onSelect, selectable } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const onPointerDown = (0, react_1.useCallback)((e) => {
+        if (e.button === 0) {
+            e.stopPropagation();
+            onSelect({
+                shiftKey: e.shiftKey,
+                toggleKey: e.metaKey || e.ctrlKey,
+            });
+        }
+    }, [onSelect]);
     const frame = (0, remotion_1.useCurrentFrame)();
     const relativeFrame = frame - s.from;
     const relativeFrameWithPremount = relativeFrame + ((_a = s.premountDisplay) !== null && _a !== void 0 ? _a : 0);
@@ -75,9 +86,10 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidt
         return {
             ...style,
             opacity: isInRange ? 1 : 0.5,
+            ...(TimelineSelection_1.TIMELINE_TOP_DRAG ? { cursor: 'pointer' } : {}),
         };
     }, [isInRange, style]);
-    return (jsx_runtime_1.jsxs("div", { style: actualStyle, title: s.displayName, children: [premountWidth ? (jsx_runtime_1.jsx("div", { style: {
+    return (jsx_runtime_1.jsxs("div", { style: actualStyle, title: s.displayName, onPointerDown: selectable ? onPointerDown : undefined, children: [premountWidth ? (jsx_runtime_1.jsx("div", { style: {
                     width: premountWidth,
                     height: '100%',
                     background: `repeating-linear-gradient(
@@ -111,7 +123,7 @@ const TimelineSequenceCurrentFrame = ({ s, displayDurationInFrames, premountWidt
                     alignItems: 'center',
                 }, children: jsx_runtime_1.jsx(TimelineSequenceFrame_1.TimelineSequenceFrame, { premounted: isPremounting, postmounted: isPostmounting ? s.duration - 1 : null, roundedFrame: roundedFrame }) })) : null] }));
 };
-const TimelineSequenceInner = ({ s, windowWidth }) => {
+const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo }) => {
     // 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
@@ -165,6 +177,6 @@ const TimelineSequenceInner = ({ s, windowWidth }) => {
     if (maxMediaDuration === null && !s.loopDisplay) {
         return null;
     }
-    return (jsx_runtime_1.jsxs(TimelineSequenceCurrentFrame, { s: s, displayDurationInFrames: displayDurationInFrames, premountWidth: premountWidth, postmountWidth: postmountWidth, style: style, children: [s.type === 'audio' ? (jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, playbackRate: s.playbackRate, loopDisplay: s.loopDisplay })) : null, s.type === 'video' ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, naturalWidth: naturalWidth, trimBefore: s.startMediaFrom, durationInFrames: s.duration, playbackRate: s.playbackRate, volume: s.volume, doesVolumeChange: s.doesVolumeChange, premountWidth: premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0, postmountWidth: postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0, loopDisplay: s.loopDisplay })) : null, s.type === 'image' ? (jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: width })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes }))] }));
+    return (jsx_runtime_1.jsxs(TimelineSequenceCurrentFrame, { s: s, displayDurationInFrames: displayDurationInFrames, premountWidth: premountWidth, postmountWidth: postmountWidth, style: style, nodePathInfo: nodePathInfo, children: [s.type === 'audio' ? (jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO, doesVolumeChange: s.doesVolumeChange, visualizationWidth: width, startFrom: s.startMediaFrom, durationInFrames: s.duration, volume: s.volume, playbackRate: s.playbackRate, loopDisplay: s.loopDisplay })) : null, s.type === 'video' ? (jsx_runtime_1.jsx(TimelineVideoInfo_1.TimelineVideoInfo, { src: s.src, visualizationWidth: width, naturalWidth: naturalWidth, trimBefore: s.startMediaFrom, durationInFrames: s.duration, playbackRate: s.playbackRate, volume: s.volume, doesVolumeChange: s.doesVolumeChange, premountWidth: premountWidth !== null && premountWidth !== void 0 ? premountWidth : 0, postmountWidth: postmountWidth !== null && postmountWidth !== void 0 ? postmountWidth : 0, loopDisplay: s.loopDisplay })) : null, s.type === 'image' ? (jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: width })) : null, s.loopDisplay === undefined ? null : (jsx_runtime_1.jsx(LoopedTimelineIndicators_1.LoopedTimelineIndicator, { loops: s.loopDisplay.numberOfTimes }))] }));
 };
 exports.TimelineSequence = react_1.default.memo(TimelineSequenceFn);

package/dist/components/Timeline/TimelineSequenceFrame.js

@@ -8,6 +8,7 @@ const relativeFrameStyle = {
     color: 'white',
     opacity: 0.5,
     whiteSpace: 'nowrap',
+    pointerEvents: 'none',
 };
 const TimelineSequenceFrame = ({ roundedFrame, premounted, postmounted }) => {
     return (jsx_runtime_1.jsx("div", { style: relativeFrameStyle, children: premounted

package/dist/components/Timeline/{TimelineListItem.d.ts → TimelineSequenceItem.d.ts}

@@ -1,9 +1,9 @@
 import React from 'react';
 import type { TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
-export declare const TimelineListItem: React.FC<{
+export declare const TimelineSequenceItem: React.FC<{
     readonly sequence: TSequence;
     readonly nestedDepth: number;
-    readonly isCompact: boolean;
     readonly nodePathInfo: SequenceNodePathInfo | null;
+    readonly keyframeDisplayOffset: number;
 }>;

package/dist/components/Timeline/{TimelineListItem.js → TimelineSequenceItem.js}

@@ -1,26 +1,37 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineListItem = void 0;
+exports.TimelineSequenceItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
+const no_react_1 = require("remotion/no-react");
 const client_id_1 = require("../../helpers/client-id");
-const colors_1 = require("../../helpers/colors");
+const format_file_location_1 = require("../../helpers/format-file-location");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const call_api_1 = require("../call-api");
 const ContextMenu_1 = require("../ContextMenu");
 const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
 const save_sequence_prop_1 = require("./save-sequence-prop");
-const timeline_row_layout_1 = require("./timeline-row-layout");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineExpandedSection_1 = require("./TimelineExpandedSection");
+const TimelineItemStack_1 = require("./TimelineItemStack");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const TimelineMediaInfo_1 = require("./TimelineMediaInfo");
 const TimelineRowChrome_1 = require("./TimelineRowChrome");
-const TimelineStack_1 = require("./TimelineStack");
-const use_resolved_stack_react_to_change_1 = require("./use-resolved-stack-react-to-change");
-const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) => {
+const TimelineSelection_1 = require("./TimelineSelection");
+const TimelineSequenceName_1 = require("./TimelineSequenceName");
+const use_open_sequence_in_editor_1 = require("./use-open-sequence-in-editor");
+const labelContainerStyle = {
+    alignItems: 'center',
+    alignSelf: 'stretch',
+    display: 'flex',
+    flexDirection: 'row',
+    minWidth: 0,
+    gap: 4,
+};
+const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset }) => {
     var _a;
     var _b;
     const nodePath = (_b = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _b !== void 0 ? _b : null;
@@ -30,7 +41,14 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
     const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
     const { codeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeCodeValuesContext);
     const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
-    const originalLocation = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)(sequence.getStack);
+    const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
+    const { onSelect, selectable, selected } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const containsSelection = (0, TimelineSelection_1.useTimelineRowContainsSelection)(nodePathInfo);
+    const { canOpenInEditor, openInEditor, originalLocation } = (0, use_open_sequence_in_editor_1.useOpenSequenceInEditor)(sequence);
+    const fileLocation = (0, react_1.useMemo)(() => (0, format_file_location_1.formatFileLocation)({
+        location: originalLocation,
+        root: window.remotion_cwd,
+    }), [originalLocation]);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
         if (!originalLocation ||
@@ -47,35 +65,12 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
     const canDeleteFromSource = Boolean(nodePath && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source));
     const deleteDisabled = (0, react_1.useMemo)(() => !previewConnected || !sequence.controls || !canDeleteFromSource, [previewConnected, sequence.controls, canDeleteFromSource]);
     const duplicateDisabled = deleteDisabled;
-    const onDuplicateSequenceFromSource = (0, react_1.useCallback)(async () => {
-        if (!(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) || !nodePath) {
+    const onDuplicateSequenceFromSource = (0, react_1.useCallback)(() => {
+        if (!(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) || !nodePathInfo) {
             return;
         }
-        if (nodePathInfo && nodePathInfo.numberOfSequencesWithThisNodePath > 1) {
-            const message = 'This sequence is programmatically duplicated ' +
-                nodePathInfo.numberOfSequencesWithThisNodePath +
-                ' times in the code. Duplicating inserts another copy. Continue?';
-            // eslint-disable-next-line no-alert -- native confirm before applying duplicate codemod in .map callbacks
-            if (!window.confirm(message)) {
-                return;
-            }
-        }
-        try {
-            const result = await (0, call_api_1.callApi)('/api/duplicate-jsx-node', {
-                fileName: validatedLocation.source,
-                nodePath: nodePath.nodePath,
-            });
-            if (result.success) {
-                (0, NotificationCenter_1.showNotification)('Duplicated sequence in source file', 2000);
-            }
-            else {
-                (0, NotificationCenter_1.showNotification)(result.reason, 4000);
-            }
-        }
-        catch (err) {
-            (0, NotificationCenter_1.showNotification)(err.message, 4000);
-        }
-    }, [nodePath, validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source, nodePathInfo]);
+        (0, duplicate_selected_timeline_item_1.duplicateSequencesFromSource)([nodePathInfo]).catch(() => undefined);
+    }, [nodePathInfo, validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source]);
     const onDeleteSequenceFromSource = (0, react_1.useCallback)(async () => {
         if (!(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) || !nodePath) {
             return;
@@ -91,8 +86,12 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
         }
         try {
             const result = await (0, call_api_1.callApi)('/api/delete-jsx-node', {
-                fileName: validatedLocation.source,
-                nodePath: nodePath.nodePath,
+                nodes: [
+                    {
+                        fileName: validatedLocation.source,
+                        nodePath: nodePath.nodePath,
+                    },
+                ],
             });
             if (result.success) {
                 (0, NotificationCenter_1.showNotification)('Removed sequence from source file', 2000);
@@ -105,11 +104,97 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
             (0, NotificationCenter_1.showNotification)(err.message, 4000);
         }
     }, [nodePath, validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source, nodePathInfo]);
+    const mediaSrc = sequence.type === 'audio' ||
+        sequence.type === 'video' ||
+        sequence.type === 'image'
+        ? sequence.src
+        : null;
+    const assetLinkInfo = (0, react_1.useMemo)(() => (mediaSrc ? (0, TimelineMediaInfo_1.getTimelineAssetLinkInfo)(mediaSrc) : null), [mediaSrc]);
     const contextMenuValues = (0, react_1.useMemo)(() => {
         if (!previewConnected) {
             return [];
         }
+        const editorName = window.remotion_editorName;
+        const { documentationLink } = sequence;
         return [
+            editorName
+                ? {
+                    type: 'item',
+                    id: 'show-in-editor',
+                    keyHint: null,
+                    label: `Show in ${editorName}`,
+                    leftItem: null,
+                    disabled: !canOpenInEditor,
+                    onClick: () => {
+                        openInEditor();
+                    },
+                    quickSwitcherLabel: null,
+                    subMenu: null,
+                    value: 'show-in-editor',
+                }
+                : null,
+            {
+                type: 'item',
+                id: 'copy-file-location',
+                keyHint: null,
+                label: 'Copy file location',
+                leftItem: null,
+                disabled: !fileLocation,
+                onClick: () => {
+                    if (!fileLocation) {
+                        return;
+                    }
+                    navigator.clipboard
+                        .writeText(fileLocation)
+                        .then(() => {
+                        (0, NotificationCenter_1.showNotification)('Copied file location to clipboard', 1000);
+                    })
+                        .catch((err) => {
+                        (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 1000);
+                    });
+                },
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'copy-file-location',
+            },
+            documentationLink
+                ? {
+                    type: 'item',
+                    id: 'open-component-docs',
+                    keyHint: null,
+                    label: 'Open component docs',
+                    leftItem: null,
+                    disabled: false,
+                    onClick: () => {
+                        window.open(documentationLink, '_blank', 'noopener,noreferrer');
+                    },
+                    quickSwitcherLabel: null,
+                    subMenu: null,
+                    value: 'open-component-docs',
+                }
+                : null,
+            assetLinkInfo
+                ? {
+                    type: 'item',
+                    id: 'show-asset',
+                    keyHint: null,
+                    label: 'Show asset',
+                    leftItem: null,
+                    disabled: false,
+                    onClick: () => {
+                        (0, TimelineMediaInfo_1.openTimelineAssetLink)(assetLinkInfo, setCanvasContent);
+                    },
+                    quickSwitcherLabel: null,
+                    subMenu: null,
+                    value: 'show-asset',
+                }
+                : null,
+            documentationLink
+                ? {
+                    type: 'divider',
+                    id: 'open-component-docs-divider',
+                }
+                : null,
             {
                 type: 'item',
                 id: 'duplicate-sequence',
@@ -144,13 +229,19 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
                 subMenu: null,
                 value: 'delete-sequence',
             },
-        ];
+        ].filter(no_react_1.NoReactInternals.truthy);
     }, [
+        assetLinkInfo,
         deleteDisabled,
         duplicateDisabled,
+        fileLocation,
         onDeleteSequenceFromSource,
         onDuplicateSequenceFromSource,
+        canOpenInEditor,
+        openInEditor,
         previewConnected,
+        sequence,
+        setCanvasContent,
     ]);
     const isExpanded = previewConnected && nodePathInfo !== null && getIsExpanded(nodePathInfo);
     const onToggleExpand = (0, react_1.useCallback)(() => {
@@ -159,6 +250,17 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
         }
         toggleTrack(nodePathInfo);
     }, [nodePathInfo, toggleTrack]);
+    const onShowInEditorDoubleClick = (0, react_1.useCallback)((e) => {
+        if (!TimelineSelection_1.SELECTION_ENABLED || !canOpenInEditor) {
+            return;
+        }
+        if ((0, TimelineSelection_1.isTimelineSelectionModifierEvent)(e)) {
+            e.stopPropagation();
+            return;
+        }
+        e.stopPropagation();
+        openInEditor();
+    }, [canOpenInEditor, openInEditor]);
     const codeValuesForOverride = (0, react_1.useMemo)(() => {
         return nodePath
             ? remotion_1.Internals.getCodeValuesCtx(codeValues, nodePath)
@@ -209,14 +311,7 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
         setCodeValues,
         validatedLocation,
     ]);
-    const outer = (0, react_1.useMemo)(() => {
-        return {
-            height: (0, timeline_layout_1.getTimelineLayerHeight)(sequence.type) + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
-            borderBottom: `1px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
-            display: 'flex',
-            flexDirection: 'column',
-        };
-    }, [sequence.type]);
+    const outerHeight = (0, react_1.useMemo)(() => (0, timeline_layout_1.getTimelineLayerHeight)(sequence.type) + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM, [sequence.type]);
     const inner = (0, react_1.useMemo)(() => {
         return {
             height: timeline_layout_1.TIMELINE_LIST_ITEM_ROW_HEIGHT,
@@ -227,20 +322,6 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
             flexShrink: 0,
         };
     }, []);
-    const mediaInfoStyle = (0, react_1.useMemo)(() => {
-        return {
-            paddingLeft: (0, timeline_row_layout_1.getTimelineRowLeftChromeWidth)(nestedDepth),
-            paddingRight: 8,
-            marginTop: -6,
-            overflow: 'hidden',
-            minHeight: 0,
-        };
-    }, [nestedDepth]);
-    const mediaSrc = sequence.type === 'audio' ||
-        sequence.type === 'video' ||
-        sequence.type === 'image'
-        ? sequence.src
-        : null;
     const hasExpandableContent = Boolean(sequence.controls) || sequence.effects.length > 0;
     const canToggleVisibility = previewConnected &&
         Boolean(sequence.controls) &&
@@ -249,11 +330,15 @@ const TimelineListItem = ({ nestedDepth, sequence, isCompact, nodePathInfo }) =>
         codeHiddenStatus !== undefined &&
         codeHiddenStatus !== null &&
         codeHiddenStatus.canUpdate;
-    const trackRow = (jsx_runtime_1.jsxs("div", { style: outer, children: [jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: hasExpandableContent ? (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: onToggleExpand, label: "track properties", disabled: !previewConnected || nodePathInfo === null })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: inner, children: jsx_runtime_1.jsx(TimelineStack_1.TimelineStack, { sequence: sequence, isCompact: isCompact, originalLocation: originalLocation }) }), mediaSrc ? (jsx_runtime_1.jsx("div", { style: mediaInfoStyle, children: jsx_runtime_1.jsx(TimelineMediaInfo_1.TimelineMediaInfo, { src: mediaSrc, type: sequence.type }) })) : null] }));
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, children: trackRow })) : (trackRow), previewConnected &&
+    const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: hasExpandableContent ? (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: onToggleExpand, label: "track properties", disabled: !previewConnected || nodePathInfo === null })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: inner, selected: selected, selectable: selectable, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: outerHeight, onDoubleClick: TimelineSelection_1.SELECTION_ENABLED && canOpenInEditor
+            ? onShowInEditorDoubleClick
+            : undefined, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [
+                jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { sequence: sequence, selected: selected, containsSelection: containsSelection }), mediaSrc ? jsx_runtime_1.jsx(TimelineMediaInfo_1.TimelineMediaInfo, { src: mediaSrc }) : null, jsx_runtime_1.jsx(TimelineItemStack_1.TimelineItemStack, { originalLocation: originalLocation })
+            ] }) }));
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selectable ? onSelect : null, children: trackRow })) : (trackRow), previewConnected &&
                 isExpanded &&
                 hasExpandableContent &&
                 nodePathInfo &&
-                validatedLocation ? (jsx_runtime_1.jsx(TimelineExpandedSection_1.TimelineExpandedSection, { sequence: sequence, validatedLocation: validatedLocation, nodePathInfo: nodePathInfo, nestedDepth: nestedDepth })) : null] }));
+                validatedLocation ? (jsx_runtime_1.jsx(TimelineExpandedSection_1.TimelineExpandedSection, { sequence: sequence, validatedLocation: validatedLocation, nodePathInfo: nodePathInfo, nestedDepth: nestedDepth, keyframeDisplayOffset: keyframeDisplayOffset })) : null] }));
 };
-exports.TimelineListItem = TimelineListItem;
+exports.TimelineSequenceItem = TimelineSequenceItem;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { TSequence } from 'remotion';
+export declare const TimelineSequenceName: React.FC<{
+    readonly sequence: TSequence;
+    readonly selected: boolean;
+    readonly containsSelection: boolean;
+}>;

package/dist/components/Timeline/TimelineSequenceName.js

@@ -0,0 +1,50 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineSequenceName = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const TimelineSelection_1 = require("./TimelineSelection");
+const MAX_DISPLAY_NAME_LENGTH = 1000;
+const getTruncatedDisplayName = (displayName) => {
+    if (displayName.length > MAX_DISPLAY_NAME_LENGTH) {
+        return displayName.slice(0, MAX_DISPLAY_NAME_LENGTH) + '...';
+    }
+    return displayName;
+};
+const TimelineSequenceName = ({ sequence, selected, containsSelection }) => {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const { documentationLink } = sequence;
+    const hoverable = !TimelineSelection_1.SELECTION_ENABLED && documentationLink !== null;
+    const onClick = (0, react_1.useCallback)(() => {
+        if (documentationLink === null) {
+            return;
+        }
+        window.open(documentationLink, '_blank', 'noopener,noreferrer');
+    }, [documentationLink]);
+    const onPointerEnter = (0, react_1.useCallback)(() => setHovered(true), []);
+    const onPointerLeave = (0, react_1.useCallback)(() => setHovered(false), []);
+    const style = (0, react_1.useMemo)(() => {
+        const hoverEffect = hovered && hoverable;
+        return {
+            alignItems: 'center',
+            alignSelf: 'stretch',
+            ...(0, TimelineSelection_1.getTimelineSelectedLabelStyle)(selected, false),
+            display: 'inline-flex',
+            fontSize: 12,
+            whiteSpace: 'nowrap',
+            textOverflow: 'ellipsis',
+            overflow: 'hidden',
+            color: (0, TimelineSelection_1.getTimelineColor)(selected, false),
+            userSelect: 'none',
+            WebkitUserSelect: 'none',
+            textDecoration: hoverEffect ? 'underline' : 'none',
+            cursor: hoverEffect ? 'pointer' : undefined,
+            boxShadow: containsSelection && !selected
+                ? `inset 0 0 0 2px ${TimelineSelection_1.TIMELINE_SELECTED_LABEL_BACKGROUND}`
+                : undefined,
+        };
+    }, [hovered, hoverable, selected, containsSelection]);
+    const text = getTruncatedDisplayName(sequence.displayName) || '<Sequence>';
+    return (jsx_runtime_1.jsx("div", { onPointerEnter: hoverable ? onPointerEnter : undefined, onPointerLeave: hoverable ? onPointerLeave : undefined, title: documentationLink ? `Open documentation: ${documentationLink}` : text, style: style, onClick: hoverable ? onClick : undefined, children: text }));
+};
+exports.TimelineSequenceName = TimelineSequenceName;

package/dist/components/Timeline/{TimelineFieldRow.d.ts → TimelineSequencePropItem.d.ts}

@@ -1,12 +1,14 @@
 import React from 'react';
-import type { SequencePropsSubscriptionKey } from 'remotion';
-import type { SequenceSchema } from 'remotion';
+import type { SequencePropsSubscriptionKey, SequenceSchema } from 'remotion';
 import type { CodePosition } from '../../error-overlay/react-overlay/utils/get-source-map';
+import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
-export declare const TimelineFieldRow: React.FC<{
+export declare const TimelineSequencePropItem: React.FC<{
     readonly field: SchemaFieldInfo;
     readonly validatedLocation: CodePosition;
     readonly rowDepth: number;
     readonly nodePath: SequencePropsSubscriptionKey;
+    readonly nodePathInfo: SequenceNodePathInfo;
     readonly schema: SequenceSchema;
+    readonly keyframeDisplayOffset: number;
 }>;