@remotion/studio 4.0.482 → 4.0.484

package/dist/components/Timeline/TimelineSelection.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTimelineRowContainsSelection = exports.useTimelineGuideSelection = exports.useTimelineEasingSelection = exports.useTimelineKeyframeSelection = exports.useTimelineRowSelection = exports.useTimelineFocusableItem = exports.useTimelineMarqueeSelectableItem = exports.useTimelineMarqueeSelection = exports.useCurrentTimelineSelectionStateAsRef = exports.TIMELINE_SCRUBBER_ATTR = exports.TIMELINE_MARQUEE_ITEM_ATTR = exports.useTimelineSelection = exports.TimelineSelectionProvider = exports.TimelineSelectableItemsProvider = exports.TimelineSelectAllKeybindings = exports.getTimelineSequenceSelectionKey = exports.getSelectableTimelineItems = exports.getSelectableTimelineSequenceSelections = exports.getTimelineSelectionKey = exports.getTimelineSelectionFromNodePathInfo = exports.TimelineSelectionOrderProvider = exports.getTimelineMarqueeSelection = exports.timelineMarqueeRectsIntersect = exports.getClampedTimelineMarqueePoint = exports.getNormalizedTimelineMarqueeRect = exports.getAvailableTimelineSelectionState = exports.getTimelineSelectionAfterInteraction = exports.EMPTY_TIMELINE_SELECTION_STATE = exports.shouldSelectTimelineRowOnPointerDown = exports.isTimelineSelectionModifierEvent = exports.TIMELINE_TICKS_BACKGROUND = exports.TIMELINE_BACKGROUND = exports.getTimelineSelectedTrackHighlightStyle = exports.getTimelineColor = exports.getTimelineSelectedLabelStyle = exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = exports.TIMELINE_SELECTED_LABEL_TEXT = exports.TIMELINE_SELECTED_LABEL_BACKGROUND = exports.TIMELINE_SELECTED_BACKGROUND = void 0;
+exports.useTimelineRowHighlightBackground = exports.useTimelineRowContainsSelection = exports.useTimelineGuideSelection = exports.useTimelineEasingSelection = exports.useTimelineKeyframeSelection = exports.useTimelineRowSelection = exports.useTimelineFocusableItem = exports.useTimelineMarqueeSelectableItem = exports.useTimelineMarqueeSelection = exports.useCurrentTimelineSelectionStateAsRef = exports.TIMELINE_SCRUBBER_ATTR = exports.TIMELINE_MARQUEE_ITEM_ATTR = exports.useTimelineSelection = exports.TimelineSelectionProvider = exports.TimelineSelectableItemsProvider = exports.TimelineSelectAllKeybindings = exports.getTimelineSequenceSelectionKey = exports.getSelectableTimelineItems = exports.getSelectableTimelineSequenceSelections = exports.getTimelineSelectionKey = exports.getTimelineSelectionFromNodePathInfo = exports.TimelineSelectionOrderProvider = exports.getTimelineMarqueeSelection = exports.timelineMarqueeRectsIntersect = exports.getClampedTimelineMarqueePoint = exports.getNormalizedTimelineMarqueeRect = exports.getAvailableTimelineSelectionState = exports.getTimelineSelectionAfterInteraction = exports.EMPTY_TIMELINE_SELECTION_STATE = exports.shouldSelectTimelineRowOnPointerDown = exports.isTimelineSelectionModifierEvent = exports.TIMELINE_TICKS_BACKGROUND = exports.TIMELINE_BACKGROUND = exports.getTimelineRowHighlightBackground = exports.getTimelineSelectedTrackHighlightStyle = exports.getTimelineColor = exports.getTimelineSelectedLabelStyle = exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = exports.TIMELINE_SELECTED_LABEL_TEXT = exports.TIMELINE_SELECTED_LABEL_BACKGROUND = exports.TIMELINE_SELECTED_BACKGROUND = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
@@ -42,8 +42,8 @@ const getTimelineColor = (selected, subcategory) => {
         : 'rgba(255, 255, 255, 0.8)';
 };
 exports.getTimelineColor = getTimelineColor;
-const getTimelineSelectedTrackHighlightStyle = (timelineWidth) => ({
-    backgroundColor: exports.TIMELINE_SELECTED_BACKGROUND,
+const getTimelineSelectedTrackHighlightStyle = (timelineWidth, backgroundColor = exports.TIMELINE_SELECTED_BACKGROUND) => ({
+    backgroundColor,
     bottom: 0,
     left: -timeline_layout_1.TIMELINE_PADDING,
     pointerEvents: 'none',
@@ -52,6 +52,12 @@ const getTimelineSelectedTrackHighlightStyle = (timelineWidth) => ({
     width: timelineWidth,
 });
 exports.getTimelineSelectedTrackHighlightStyle = getTimelineSelectedTrackHighlightStyle;
+const getTimelineRowHighlightBackground = ({ showSelectedBackground, selected, containsSelection, }) => {
+    return showSelectedBackground && (selected || containsSelection)
+        ? exports.TIMELINE_SELECTED_BACKGROUND
+        : undefined;
+};
+exports.getTimelineRowHighlightBackground = getTimelineRowHighlightBackground;
 exports.TIMELINE_BACKGROUND = '#0F1113';
 exports.TIMELINE_TICKS_BACKGROUND = colors_1.BACKGROUND;
 const isTimelineSelectionModifierEvent = ({ shiftKey, metaKey, ctrlKey, }) => {
@@ -1043,3 +1049,13 @@ const useTimelineRowContainsSelection = (nodePathInfo) => {
     return containsSelection(nodePathInfo);
 };
 exports.useTimelineRowContainsSelection = useTimelineRowContainsSelection;
+const useTimelineRowHighlightBackground = (nodePathInfo) => {
+    const { selected } = (0, exports.useTimelineRowSelection)(nodePathInfo);
+    const containsSelection = (0, exports.useTimelineRowContainsSelection)(nodePathInfo);
+    return (0, exports.getTimelineRowHighlightBackground)({
+        showSelectedBackground: true,
+        selected,
+        containsSelection,
+    });
+};
+exports.useTimelineRowHighlightBackground = useTimelineRowHighlightBackground;

package/dist/components/Timeline/TimelineSequence.js

@@ -154,10 +154,10 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
     // 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
-    var _a, _b;
-    var _c, _d, _e, _f, _g;
+    var _a, _b, _c;
+    var _d, _e, _f, _g, _h, _j;
     const video = remotion_1.Internals.useVideo();
-    const maxMediaDuration = (0, use_max_media_duration_1.useMaxMediaDuration)(s, (_c = video === null || video === void 0 ? void 0 : video.fps) !== null && _c !== void 0 ? _c : 30);
+    const maxMediaDuration = (0, use_max_media_duration_1.useMaxMediaDuration)(s, (_d = video === null || video === void 0 ? void 0 : video.fps) !== null && _d !== void 0 ? _d : 30);
     const effectiveMaxMediaDuration = s.loopDisplay ? null : maxMediaDuration;
     const originalLocation = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)(s.getStack);
     const validatedLocation = (0, react_1.useMemo)(() => {
@@ -174,7 +174,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
         };
     }, [originalLocation]);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
-    const nodePath = (_d = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _d !== void 0 ? _d : null;
+    const nodePath = (_e = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _e !== void 0 ? _e : null;
     const propStatusesForOverride = (0, react_1.useMemo)(() => {
         return nodePath
             ? remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)
@@ -182,6 +182,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
     }, [propStatuses, nodePath]);
     const durationCanUpdate = Boolean(((_a = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.durationInFrames) === null || _a === void 0 ? void 0 : _a.status) === 'static');
     const fromCanUpdate = Boolean(((_b = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.from) === null || _b === void 0 ? void 0 : _b.status) === 'static');
+    const trimBeforeCanUpdate = Boolean(((_c = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.trimBefore) === null || _c === void 0 ? void 0 : _c.status) === 'static');
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
@@ -291,7 +292,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
         sequenceFrameOffset,
         setPropStatuses,
         timelinePosition,
-        validatedSource: (_e = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) !== null && _e !== void 0 ? _e : null,
+        validatedSource: (_f = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) !== null && _f !== void 0 ? _f : null,
     });
     const contextMenuValues = (0, react_1.useMemo)(() => {
         if (!previewConnected) {
@@ -312,7 +313,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
             originalLocation,
             selectAsset,
             sequence: s,
-            sourceActions: [freezeFrameMenuItem],
+            sourceActions: freezeFrameMenuItem ? [freezeFrameMenuItem] : [],
         });
     }, [
         assetLinkInfo,
@@ -340,7 +341,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
     const { onPointerDown: onMoveDragPointerDown } = (0, TimelineSequenceRightEdgeDragHandle_1.useTimelineSequenceFromDrag)({
         nodePathInfo,
         windowWidth,
-        timelineDurationInFrames: (_f = video === null || video === void 0 ? void 0 : video.durationInFrames) !== null && _f !== void 0 ? _f : 1,
+        timelineDurationInFrames: (_g = video === null || video === void 0 ? void 0 : video.durationInFrames) !== null && _g !== void 0 ? _g : 1,
     });
     if (!video) {
         throw new TypeError('Expected video config');
@@ -391,10 +392,21 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
         nodePath !== null &&
         validatedLocation !== null &&
         durationCanUpdate;
+    const showLeftEdgeDragHandle = (s.type === 'sequence' ||
+        s.type === 'image' ||
+        s.type === 'audio' ||
+        s.type === 'video') &&
+        !s.isInsideSeries &&
+        nodePath !== null &&
+        validatedLocation !== null &&
+        Boolean(s.controls) &&
+        fromCanUpdate &&
+        durationCanUpdate &&
+        trimBeforeCanUpdate;
     if (maxMediaDuration === null && !s.loopDisplay) {
         return null;
     }
-    const sequence = (jsx_runtime_1.jsxs(TimelineSequenceCurrentFrame, { s: s, displayDurationInFrames: displayDurationInFrames, premountWidth: premountWidth, postmountWidth: postmountWidth, style: style, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset, fromCanUpdate: fromCanUpdate, frozenFrame: frozenFrame, onMoveDragPointerDown: onMoveDragPointerDown, 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, frozenMediaFrame: s.frozenMediaFrame })) : 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 })), showRightEdgeDragHandle && nodePathInfo && validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceRightEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_g = video.durationInFrames) !== null && _g !== void 0 ? _g : 1 })) : null] }));
+    const sequence = (jsx_runtime_1.jsxs(TimelineSequenceCurrentFrame, { s: s, displayDurationInFrames: displayDurationInFrames, premountWidth: premountWidth, postmountWidth: postmountWidth, style: style, nodePathInfo: nodePathInfo, sequenceFrameOffset: sequenceFrameOffset, fromCanUpdate: fromCanUpdate, frozenFrame: frozenFrame, onMoveDragPointerDown: onMoveDragPointerDown, 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, frozenMediaFrame: s.frozenMediaFrame })) : 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 })), showLeftEdgeDragHandle && nodePathInfo && validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceLeftEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_h = video.durationInFrames) !== null && _h !== void 0 ? _h : 1 })) : null, showRightEdgeDragHandle && nodePathInfo && validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceRightEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_j = video.durationInFrames) !== null && _j !== void 0 ? _j : 1 })) : null] }));
     return previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: onContextMenuOpen, children: sequence })) : (sequence);
 };
 exports.TimelineSequence = react_1.default.memo(TimelineSequenceFn);

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -78,6 +78,19 @@ const effectDropHighlight = {
     outlineOffset: -1,
 };
 const SEQUENCE_REORDER_MIME_TYPE = 'application/remotion-sequence-reorder';
+const getSequenceNameSaveAction = ({ editedName, currentDisplayName, fallbackDisplayName, hasStaticNameProp, }) => {
+    if (!hasStaticNameProp &&
+        (editedName === '' || editedName === fallbackDisplayName)) {
+        return { type: 'noop' };
+    }
+    if (hasStaticNameProp && editedName === currentDisplayName) {
+        return { type: 'noop' };
+    }
+    return {
+        type: 'save',
+        defaultValue: editedName === '' ? JSON.stringify('') : null,
+    };
+};
 let currentSequenceDrag = null;
 const TimelineSequenceExpandArrow = ({ disabled, isExpanded, nodePathInfo, onToggleExpand, sequence }) => {
     const { filteredTree } = (0, use_timeline_expanded_tree_1.useTimelineExpandedTree)({
@@ -150,9 +163,9 @@ const getDestinationIndex = ({ fromIndex, insertionIndex, }) => {
     return insertionIndex > fromIndex ? insertionIndex - 1 : insertionIndex;
 };
 const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset, sequenceFrameOffset, trackIndex, }) => {
-    var _a, _b, _c;
-    var _d, _e, _f;
-    const nodePath = (_d = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _d !== void 0 ? _d : null;
+    var _a, _b, _c, _d;
+    var _e, _f, _g, _h;
+    const nodePath = (_e = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _e !== void 0 ? _e : null;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
@@ -190,7 +203,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
     }, [originalLocation]);
     const canDeleteFromSource = Boolean(nodePath && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source));
     const nodePathKey = (0, react_1.useMemo)(() => nodePath ? remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath) : null, [nodePath]);
-    const parentId = (_e = sequence.parent) !== null && _e !== void 0 ? _e : null;
+    const parentId = (_f = sequence.parent) !== null && _f !== void 0 ? _f : null;
     const canReorderSequence = previewConnected &&
         Boolean(nodePath && nodePathKey && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source)) &&
         (nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.numberOfSequencesWithThisNodePath) === 1;
@@ -437,17 +450,6 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         }
         toggleTrack(nodePathInfo);
     }, [nodePathInfo, toggleTrack]);
-    const onShowInEditorDoubleClick = (0, react_1.useCallback)((e) => {
-        if (!canOpenInEditor) {
-            return;
-        }
-        if ((0, TimelineSelection_1.isTimelineSelectionModifierEvent)(e)) {
-            e.stopPropagation();
-            return;
-        }
-        e.stopPropagation();
-        openInEditor();
-    }, [canOpenInEditor, openInEditor]);
     const propStatusesForOverride = (0, react_1.useMemo)(() => {
         return nodePath
             ? remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)
@@ -464,14 +466,26 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         const effective = (propStatus !== null && propStatus !== void 0 ? propStatus : runtimeValue);
         return effective !== null && effective !== void 0 ? effective : false;
     }, [codeHiddenStatus, (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.currentRuntimeValueDotNotation]);
+    const fallbackDisplayName = (_g = (_b = sequence.controls) === null || _b === void 0 ? void 0 : _b.componentName) !== null && _g !== void 0 ? _g : '<Sequence>';
+    const staticNamePropValue = (codeNameStatus === null || codeNameStatus === void 0 ? void 0 : codeNameStatus.status) === 'static' &&
+        typeof codeNameStatus.codeValue === 'string'
+        ? codeNameStatus.codeValue
+        : null;
+    const hasStaticNameProp = staticNamePropValue !== null;
     const displayName = (0, react_1.useMemo)(() => {
-        if (codeNameStatus &&
-            codeNameStatus.status === 'static' &&
-            typeof codeNameStatus.codeValue === 'string') {
-            return codeNameStatus.codeValue;
+        if (staticNamePropValue !== null) {
+            return staticNamePropValue;
+        }
+        if ((codeNameStatus === null || codeNameStatus === void 0 ? void 0 : codeNameStatus.status) === 'static') {
+            return fallbackDisplayName;
         }
         return sequence.displayName;
-    }, [codeNameStatus, sequence.displayName]);
+    }, [
+        codeNameStatus === null || codeNameStatus === void 0 ? void 0 : codeNameStatus.status,
+        fallbackDisplayName,
+        sequence.displayName,
+        staticNamePropValue,
+    ]);
     const onToggleVisibility = (0, react_1.useCallback)((type) => {
         if (!sequence.controls ||
             !nodePath ||
@@ -548,10 +562,22 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         codeNameStatus !== undefined &&
         codeNameStatus !== null &&
         codeNameStatus.status === 'static';
+    const onSequenceDoubleClick = (0, react_1.useCallback)((e) => {
+        if ((0, TimelineSelection_1.isTimelineSelectionModifierEvent)(e)) {
+            e.stopPropagation();
+            return;
+        }
+        e.stopPropagation();
+        if (canRenameThisSequence) {
+            setIsRenaming(true);
+            return;
+        }
+        openInEditor();
+    }, [canRenameThisSequence, openInEditor]);
     const canRenameSelectedSequence = canRenameThisSequence &&
         selected &&
         selectedItems.length === 1 &&
-        ((_b = selectedItems[0]) === null || _b === void 0 ? void 0 : _b.type) === 'sequence';
+        ((_c = selectedItems[0]) === null || _c === void 0 ? void 0 : _c.type) === 'sequence';
     const onCancelRenaming = (0, react_1.useCallback)(() => {
         setIsRenaming(false);
     }, []);
@@ -564,7 +590,13 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
             setIsRenaming(false);
             return;
         }
-        if (name === displayName) {
+        const action = getSequenceNameSaveAction({
+            editedName: name,
+            currentDisplayName: displayName,
+            fallbackDisplayName,
+            hasStaticNameProp,
+        });
+        if (action.type === 'noop') {
             setIsRenaming(false);
             return;
         }
@@ -575,7 +607,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
                     nodePath,
                     fieldKey: 'name',
                     value: name,
-                    defaultValue: null,
+                    defaultValue: action.defaultValue,
                     schema: sequence.controls.schema,
                 },
             ],
@@ -589,6 +621,8 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
     }, [
         canRenameThisSequence,
         displayName,
+        fallbackDisplayName,
+        hasStaticNameProp,
         nodePath,
         previewServerState,
         sequence.controls,
@@ -639,7 +673,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         sequenceFrameOffset,
         setPropStatuses,
         timelinePosition,
-        validatedSource: (_f = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) !== null && _f !== void 0 ? _f : null,
+        validatedSource: (_h = validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source) !== null && _h !== void 0 ? _h : null,
     });
     const canAddEffect = (nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.supportsEffects) === true &&
         previewServerState.type === 'connected' &&
@@ -718,7 +752,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
                     subMenu: null,
                     value: 'rename-sequence',
                 },
-                freezeFrameMenuItem,
+                ...(freezeFrameMenuItem ? [freezeFrameMenuItem] : []),
             ],
         });
     }, [
@@ -746,7 +780,7 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
     const canDropEffect = previewServerState.type === 'connected' &&
         nodePath !== null &&
         validatedLocation !== null &&
-        ((_c = sequence.controls) === null || _c === void 0 ? void 0 : _c.supportsEffects) === true;
+        ((_d = sequence.controls) === null || _d === void 0 ? void 0 : _d.supportsEffects) === true;
     const sequenceReorderLineStyle = (0, react_1.useMemo)(() => {
         if (!sequenceDropIndicator) {
             return null;
@@ -801,8 +835,10 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
             clientId: previewServerState.clientId,
         });
     }, [canDropEffect, nodePath, previewServerState, validatedLocation]);
-    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 && nodePathInfo !== null ? (jsx_runtime_1.jsx(TimelineSequenceExpandArrow, { disabled: !previewConnected, isExpanded: isExpanded, nodePathInfo: nodePathInfo, onToggleExpand: onToggleExpand, sequence: sequence })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: rowStyle, selected: selected, selectable: selectable, selectionItem: selectionItem, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canOpenInEditor ? onShowInEditorDoubleClick : undefined, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [
-                jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { displayName: displayName, selected: selected, containsSelection: containsSelection, editing: isRenaming, onCancelEditing: onCancelRenaming, onSaveName: onSaveName }), mediaSrc ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+    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 && nodePathInfo !== null ? (jsx_runtime_1.jsx(TimelineSequenceExpandArrow, { disabled: !previewConnected, isExpanded: isExpanded, nodePathInfo: nodePathInfo, onToggleExpand: onToggleExpand, sequence: sequence })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: rowStyle, selected: selected, selectable: selectable, selectionItem: selectionItem, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canRenameThisSequence || canOpenInEditor
+            ? onSequenceDoubleClick
+            : undefined, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [
+                jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { displayName: displayName, fallbackDisplayName: fallbackDisplayName, selected: selected, containsSelection: containsSelection, editing: isRenaming, onCancelEditing: onCancelRenaming, onSaveName: onSaveName }), mediaSrc ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }),
                         " ",
                         jsx_runtime_1.jsx(TimelineMediaInfo_1.TimelineMediaInfo, { src: mediaSrc })

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

@@ -1,6 +1,7 @@
 import React from 'react';
 export declare const TimelineSequenceName: React.FC<{
     readonly displayName: string;
+    readonly fallbackDisplayName: string;
     readonly selected: boolean;
     readonly containsSelection: boolean;
     readonly editing: boolean;

package/dist/components/Timeline/TimelineSequenceName.js

@@ -13,7 +13,7 @@ const getTruncatedDisplayName = (displayName) => {
     }
     return displayName;
 };
-const TimelineSequenceName = ({ displayName, selected, containsSelection, editing, onCancelEditing, onSaveName, }) => {
+const TimelineSequenceName = ({ displayName, fallbackDisplayName, selected, containsSelection, editing, onCancelEditing, onSaveName, }) => {
     const inputRef = (0, react_1.useRef)(null);
     const [draftName, setDraftName] = (0, react_1.useState)(displayName);
     const cancelNextBlurRef = (0, react_1.useRef)(false);
@@ -53,10 +53,11 @@ const TimelineSequenceName = ({ displayName, selected, containsSelection, editin
             WebkitUserSelect: 'text',
         };
     }, [style]);
-    const text = getTruncatedDisplayName(displayName) || '<Sequence>';
+    const editableDisplayName = displayName || fallbackDisplayName;
+    const text = getTruncatedDisplayName(editableDisplayName);
     (0, react_1.useEffect)(() => {
         if (!editing) {
-            setDraftName(displayName);
+            setDraftName(editableDisplayName);
             return;
         }
         const input = inputRef.current;
@@ -64,10 +65,10 @@ const TimelineSequenceName = ({ displayName, selected, containsSelection, editin
             return;
         }
         input.focus();
-        const basenameIndex = displayName.lastIndexOf('.');
-        const selectionEnd = basenameIndex > 0 ? basenameIndex : displayName.length;
+        const basenameIndex = editableDisplayName.lastIndexOf('.');
+        const selectionEnd = basenameIndex > 0 ? basenameIndex : editableDisplayName.length;
         input.setSelectionRange(0, selectionEnd);
-    }, [displayName, editing]);
+    }, [editableDisplayName, editing]);
     const save = (0, react_1.useCallback)(() => {
         onSaveName(draftName).catch(() => undefined);
     }, [draftName, onSaveName]);

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { CanUpdateSequencePropStatusKeyframed, SequencePropsSubscriptionKey, InteractivitySchema } from 'remotion';
+import type { CanUpdateSequencePropStatusKeyframed, InteractivitySchema, SequencePropsSubscriptionKey } 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';

package/dist/components/Timeline/TimelineSequencePropItem.js

@@ -9,6 +9,7 @@ const client_id_1 = require("../../helpers/client-id");
 const modals_1 = require("../../state/modals");
 const ContextMenu_1 = require("../ContextMenu");
 const call_add_keyframe_1 = require("./call-add-keyframe");
+const get_animation_item_selection_for_frame_1 = require("./get-animation-item-selection-for-frame");
 const save_sequence_prop_1 = require("./save-sequence-prop");
 const timeline_field_row_layout_1 = require("./timeline-field-row-layout");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
@@ -19,6 +20,7 @@ const TimelineLayerEye_1 = require("./TimelineLayerEye");
 const TimelineRowChrome_1 = require("./TimelineRowChrome");
 const TimelineSchemaField_1 = require("./TimelineSchemaField");
 const TimelineSelection_1 = require("./TimelineSelection");
+const update_selected_easing_1 = require("./update-selected-easing");
 const fieldRowBase = {};
 const isKeyframedStatus = (status) => {
     return status.status === 'keyframed';
@@ -162,6 +164,9 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const selection = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
+    const { selectItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const setFrame = remotion_1.Internals.useTimelineSetFrame();
+    const videoConfig = (0, remotion_1.useVideoConfig)();
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const sourceFrame = timelinePosition - keyframeDisplayOffset;
     const propStatusesForOverride = remotion_1.Internals.getPropStatusesCtx(visualModePropStatuses, nodePath);
@@ -303,10 +308,84 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
         onReset,
         previewServerState,
     ]);
+    const seekToDisplayFrame = (0, react_1.useCallback)((frame) => {
+        setFrame((current) => {
+            const next = { ...current, [videoConfig.id]: frame };
+            remotion_1.Internals.persistCurrentFrame(next);
+            return next;
+        });
+    }, [setFrame, videoConfig.id]);
+    const onPropertyDoubleClick = (0, react_1.useCallback)((event) => {
+        if (propStatus === null || propStatus.status === 'computed') {
+            return;
+        }
+        const keyframeSelection = {
+            type: 'keyframe',
+            nodePathInfo,
+            frame: sourceFrame + keyframeDisplayOffset,
+        };
+        if (propStatus.status === 'static') {
+            if (!keyframable || previewServerState.type !== 'connected') {
+                return;
+            }
+            const value = remotion_1.Internals.getEffectiveVisualModeValue({
+                propStatus,
+                dragOverrideValue,
+                frame: sourceFrame,
+                defaultValue: field.fieldSchema.default,
+                shouldResortToDefaultValueIfUndefined: true,
+            });
+            event.stopPropagation();
+            (0, call_add_keyframe_1.callAddSequenceKeyframe)({
+                fileName: validatedLocation.source,
+                nodePath,
+                fieldKey: field.key,
+                sourceFrame,
+                value,
+                schema,
+                setPropStatuses,
+                clientId: previewServerState.clientId,
+            }).catch(() => undefined);
+            selectItems([keyframeSelection], { reveal: true });
+            seekToDisplayFrame(keyframeSelection.frame);
+            return;
+        }
+        const targetSelection = (0, get_animation_item_selection_for_frame_1.getAnimationItemSelectionForSourceFrame)({
+            includeEasings: (0, update_selected_easing_1.canEditEasingForInterpolationFunction)(propStatus.interpolationFunction),
+            keyframeDisplayOffset,
+            keyframes: propStatus.keyframes,
+            nodePathInfo,
+            sourceFrame,
+        });
+        if (targetSelection === null) {
+            return;
+        }
+        event.stopPropagation();
+        selectItems([targetSelection], { reveal: true });
+        if (targetSelection.type === 'keyframe') {
+            seekToDisplayFrame(targetSelection.frame);
+        }
+    }, [
+        dragOverrideValue,
+        field.fieldSchema.default,
+        field.key,
+        keyframeDisplayOffset,
+        keyframable,
+        nodePath,
+        nodePathInfo,
+        previewServerState,
+        propStatus,
+        schema,
+        seekToDisplayFrame,
+        selectItems,
+        setPropStatuses,
+        sourceFrame,
+        validatedLocation.source,
+    ]);
     if (propStatus === null) {
         return null;
     }
-    const row = (jsx_runtime_1.jsxs(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), keyframeControls: keyframeControls, arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: [
+    const row = (jsx_runtime_1.jsxs(TimelineRowChrome_1.TimelineRowChrome, { depth: rowDepth, eye: jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {}), keyframeControls: keyframeControls, arrow: jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {}), style: style, selected: selection.selected, selectable: selection.selectable, selectionItem: selection.selectionItem, onSelect: selection.onSelect, onDoubleClick: onPropertyDoubleClick, showSelectedBackground: true, containsSelection: false, outerHeight: null, children: [
             jsx_runtime_1.jsx(TimelineFieldLabel_1.TimelineFieldLabel, { rowDepth: rowDepth, selected: selection.selected, label: (_b = field.description) !== null && _b !== void 0 ? _b : field.key }), isKeyframedStatus(propStatus) ? (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(exports.TimelineSequenceKeyframedValue, { field: field, fileName: validatedLocation.source, nodePath: nodePath, schema: schema, propStatus: propStatus, sourceFrame: sourceFrame }) })) : propStatus.status === 'static' ? (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, schema: schema, propStatus: propStatus }) })) : (jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineNonEditableStatus, { propStatus: propStatus }) }))] }));
     return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selection.selectable ? selection.onSelect : null, children: row }));
 };

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { OverrideIdToNodePaths, PropStatuses, SequencePropsSubscriptionKey, TSequence } from 'remotion';
+import type { OverrideIdToNodePaths, PropStatuses, SequencePropsSubscriptionKey, TSequence, InteractivitySchema } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
 import { type SaveSequencePropChange } from './save-sequence-prop';
 import { type TimelineSelection } from './TimelineSelection';
@@ -8,6 +8,14 @@ export type TimelineSequenceDurationDragTarget = {
     readonly initialDuration: number;
     readonly nodePath: SequencePropsSubscriptionKey;
 };
+export type TimelineSequenceLeftEdgeDragTarget = {
+    readonly fileName: string;
+    readonly initialDuration: number;
+    readonly initialFrom: number;
+    readonly initialTrimBefore: number;
+    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly schema: InteractivitySchema;
+};
 export type TimelineSequenceFromDragTarget = {
     readonly fileName: string;
     readonly initialFrom: number;
@@ -17,6 +25,25 @@ export declare const getTimelineSequenceDurationDragValue: ({ initialDuration, d
     readonly initialDuration: number;
     readonly deltaFrames: number;
 }) => number;
+export declare const getTimelineSequenceLeftEdgeDragDelta: ({ initialDuration, initialTrimBefore, deltaFrames, }: {
+    readonly initialDuration: number;
+    readonly initialTrimBefore: number;
+    readonly deltaFrames: number;
+}) => number;
+export declare const getTimelineSequenceLeftEdgeDragValues: ({ initialDuration, initialFrom, initialTrimBefore, deltaFrames, }: {
+    readonly initialDuration: number;
+    readonly initialFrom: number;
+    readonly initialTrimBefore: number;
+    readonly deltaFrames: number;
+}) => {
+    durationInFrames: number;
+    from: number;
+    trimBefore: number;
+};
+export declare const getTimelineSequenceLeftEdgeDragChanges: ({ targets, deltaFrames, }: {
+    readonly targets: readonly TimelineSequenceLeftEdgeDragTarget[];
+    readonly deltaFrames: number;
+}) => SaveSequencePropChange[];
 export declare const getTimelineSequenceDurationDragChanges: ({ targets, deltaFrames, }: {
     readonly targets: readonly TimelineSequenceDurationDragTarget[];
     readonly deltaFrames: number;
@@ -36,6 +63,13 @@ export declare const getTimelineSequenceDurationDragTargets: ({ draggedNodePathI
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
     readonly propStatuses: PropStatuses;
 }) => TimelineSequenceDurationDragTarget[] | null;
+export declare const getTimelineSequenceLeftEdgeDragTargets: ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, }: {
+    readonly draggedNodePathInfo: SequenceNodePathInfo;
+    readonly selectedItems: readonly TimelineSelection[];
+    readonly sequences: TSequence[];
+    readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
+    readonly propStatuses: PropStatuses;
+}) => TimelineSequenceLeftEdgeDragTarget[] | null;
 export declare const getTimelineSequenceFromDragTargets: ({ draggedNodePathInfo, selectedItems, sequences, overrideIdsToNodePaths, propStatuses, }: {
     readonly draggedNodePathInfo: SequenceNodePathInfo;
     readonly selectedItems: readonly TimelineSelection[];
@@ -43,6 +77,11 @@ export declare const getTimelineSequenceFromDragTargets: ({ draggedNodePathInfo,
     readonly overrideIdsToNodePaths: OverrideIdToNodePaths;
     readonly propStatuses: PropStatuses;
 }) => TimelineSequenceFromDragTarget[] | null;
+export declare const TimelineSequenceLeftEdgeDragHandle: React.FC<{
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly windowWidth: number;
+    readonly timelineDurationInFrames: number;
+}>;
 export declare const useTimelineSequenceFromDrag: ({ nodePathInfo, windowWidth, timelineDurationInFrames, }: {
     readonly nodePathInfo: SequenceNodePathInfo | null;
     readonly windowWidth: number;