@remotion/studio 4.0.489 → 4.0.491

package/dist/components/Timeline/TimelineEffectPropItem.js

@@ -6,7 +6,6 @@ const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
-const modals_1 = require("../../state/modals");
 const call_api_1 = require("../call-api");
 const ContextMenu_1 = require("../ContextMenu");
 const call_add_keyframe_1 = require("./call-add-keyframe");
@@ -14,9 +13,8 @@ const get_animation_item_selection_for_frame_1 = require("./get-animation-item-s
 const get_timeline_keyframes_1 = require("./get-timeline-keyframes");
 const save_effect_prop_1 = require("./save-effect-prop");
 const save_prop_queue_1 = require("./save-prop-queue");
-const timeline_field_row_layout_1 = require("./timeline-field-row-layout");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
-const TimelineFieldLabel_1 = require("./TimelineFieldLabel");
+const TimelineFieldRowContent_1 = require("./TimelineFieldRowContent");
 const TimelineKeyframeControls_1 = require("./TimelineKeyframeControls");
 const TimelineKeyframedValue_1 = require("./TimelineKeyframedValue");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
@@ -214,9 +212,8 @@ const TimelineEffectPropValue = ({ field, nodePath, validatedLocation, sourceFra
 exports.TimelineEffectPropValue = TimelineEffectPropValue;
 const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, keyframeDisplayOffset, keyframeControlsMode = 'timeline', }) => {
     var _a;
-    var _b, _c;
+    var _b;
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
@@ -227,11 +224,10 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
     const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
     const sourceFrame = timelinePosition - keyframeDisplayOffset;
     const style = (0, react_1.useMemo)(() => {
-        return {
-            ...fieldRowBase,
-            height: field.rowHeight,
-        };
-    }, [field.rowHeight]);
+        return field.typeName === 'text-content'
+            ? fieldRowBase
+            : { ...fieldRowBase, height: field.rowHeight };
+    }, [field.rowHeight, field.typeName]);
     const effectStatus = (0, react_1.useMemo)(() => remotion_1.Internals.getEffectPropStatusesCtx({
         propStatuses,
         nodePath,
@@ -302,33 +298,8 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
         setPropStatuses,
         validatedLocation.source,
     ]);
-    const onOpenKeyframeSettings = (0, react_1.useCallback)(() => {
-        var _a;
-        if (propStatus === null || !isKeyframedStatus(propStatus)) {
-            return;
-        }
-        setSelectedModal({
-            type: 'keyframe-settings',
-            fileName: validatedLocation.source,
-            nodePath,
-            fieldKey: field.key,
-            fieldLabel: (_a = field.description) !== null && _a !== void 0 ? _a : field.key,
-            status: propStatus,
-            schema: field.effectSchema,
-            effectIndex: field.effectIndex,
-        });
-    }, [
-        field.description,
-        field.effectIndex,
-        field.effectSchema,
-        field.key,
-        nodePath,
-        propStatus,
-        setSelectedModal,
-        validatedLocation.source,
-    ]);
     const contextMenuValues = (0, react_1.useMemo)(() => {
-        const values = [
+        return [
             {
                 type: 'item',
                 id: 'reset-effect-field',
@@ -342,28 +313,7 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
                 value: 'reset-effect-field',
             },
         ];
-        if (propStatus !== null && isKeyframedStatus(propStatus)) {
-            values.push({
-                type: 'item',
-                id: 'keyframe-settings-effect-field',
-                keyHint: null,
-                label: 'Keyframe settings...',
-                leftItem: null,
-                disabled: previewServerState.type !== 'connected',
-                onClick: onOpenKeyframeSettings,
-                quickSwitcherLabel: null,
-                subMenu: null,
-                value: 'keyframe-settings-effect-field',
-            });
-        }
-        return values;
-    }, [
-        canShowReset,
-        onOpenKeyframeSettings,
-        onReset,
-        previewServerState,
-        propStatus,
-    ]);
+    }, [canShowReset, onReset]);
     const seekToDisplayFrame = (0, react_1.useCallback)((frame) => {
         setFrame((current) => {
             const next = { ...current, [videoConfig.id]: frame };
@@ -440,9 +390,7 @@ const TimelineEffectPropItem = ({ field, validatedLocation, rowDepth, nodePath,
         sourceFrame,
         validatedLocation.source,
     ]);
-    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: (_c = field.description) !== null && _c !== void 0 ? _c : field.key }), jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: jsx_runtime_1.jsx(exports.TimelineEffectPropValue, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, sourceFrame: sourceFrame }) })
-        ] }));
+    const row = (jsx_runtime_1.jsx(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(TimelineFieldRowContent_1.TimelineFieldRowContent, { field: field, rowDepth: rowDepth, selected: selection.selected, children: jsx_runtime_1.jsx(exports.TimelineEffectPropValue, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, sourceFrame: sourceFrame }) }) }));
     return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selection.selectable ? selection.onSelect : null, children: row }));
 };
 exports.TimelineEffectPropItem = TimelineEffectPropItem;

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

@@ -3,4 +3,5 @@ export declare const TimelineFieldLabel: React.FC<{
     readonly rowDepth: number;
     readonly selected: boolean;
     readonly label: string;
+    readonly stacked?: boolean;
 }>;

package/dist/components/Timeline/TimelineFieldLabel.js

@@ -4,6 +4,7 @@ exports.TimelineFieldLabel = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
+const timeline_layout_1 = require("../../helpers/timeline-layout");
 const timeline_field_row_layout_1 = require("./timeline-field-row-layout");
 const TimelineSelection_1 = require("./TimelineSelection");
 const fieldNameBase = {
@@ -16,12 +17,13 @@ const fieldNameBase = {
     flex: 1,
     minWidth: 0,
 };
-const TimelineFieldLabel = ({ rowDepth, selected, label }) => {
+const TimelineFieldLabel = ({ rowDepth, selected, label, stacked = false }) => {
     const labelRowStyle = (0, react_1.useMemo)(() => ({
         ...(0, timeline_field_row_layout_1.getTimelineFieldLabelRowStyle)(rowDepth),
         ...(0, TimelineSelection_1.getTimelineSelectedLabelStyle)(selected, true),
+        ...(stacked ? { flex: `0 0 ${timeline_layout_1.SCHEMA_FIELD_ROW_HEIGHT}px` } : null),
         alignSelf: 'stretch',
-    }), [rowDepth, selected]);
+    }), [rowDepth, selected, stacked]);
     const fieldNameStyle = (0, react_1.useMemo)(() => ({
         ...fieldNameBase,
         color: (0, TimelineSelection_1.getTimelineColor)(selected, true),

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { SchemaFieldInfo } from '../../helpers/timeline-layout';
+export declare const TimelineFieldRowContent: React.FC<{
+    readonly field: SchemaFieldInfo;
+    readonly rowDepth: number;
+    readonly selected: boolean;
+    readonly children: React.ReactNode;
+}>;

package/dist/components/Timeline/TimelineFieldRowContent.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineFieldRowContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const timeline_field_row_layout_1 = require("./timeline-field-row-layout");
+const TimelineFieldLabel_1 = require("./TimelineFieldLabel");
+const TimelineFieldRowContent = ({ field, rowDepth, selected, children }) => {
+    var _a;
+    const label = (jsx_runtime_1.jsx(TimelineFieldLabel_1.TimelineFieldLabel, { rowDepth: rowDepth, selected: selected, label: (_a = field.description) !== null && _a !== void 0 ? _a : field.key, stacked: field.typeName === 'text-content' }));
+    const value = jsx_runtime_1.jsx("div", { style: timeline_field_row_layout_1.timelineFieldValueColumnStyle, children: children });
+    if (field.typeName === 'text-content') {
+        return (jsx_runtime_1.jsxs("div", { style: timeline_field_row_layout_1.timelineStackedFieldContentStyle, children: [label, value] }));
+    }
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [label, value] }));
+};
+exports.TimelineFieldRowContent = TimelineFieldRowContent;

package/dist/components/Timeline/TimelinePrimitiveFieldValue.js

@@ -55,7 +55,7 @@ const TimelinePrimitiveFieldValue = ({ field, onSave, onDragValueChange, onDragE
         return (jsx_runtime_1.jsx("span", { style: inlineWrapper, children: jsx_runtime_1.jsx(TimelineEnumField_1.TimelineEnumField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }) }));
     }
     if (field.typeName === 'text-content') {
-        return (jsx_runtime_1.jsx("span", { style: inlineWrapper, children: jsx_runtime_1.jsx(TimelineTextContentField_1.TimelineTextContentField, { effectiveValue: effectiveValue, field: field, nodePath: scaleLockNodePath, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }) }));
+        return (jsx_runtime_1.jsx(TimelineTextContentField_1.TimelineTextContentField, { effectiveValue: effectiveValue, field: field, nodePath: scaleLockNodePath, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }));
     }
     if (field.typeName === 'font-family') {
         return (jsx_runtime_1.jsx("span", { style: inlineWrapper, children: jsx_runtime_1.jsx(TimelineFontFamilyField_1.TimelineFontFamilyField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }) }));

package/dist/components/Timeline/TimelineRowChrome.js

@@ -19,9 +19,11 @@ const leftChromeStyle = {
 };
 const keyframeControlsColumnBaseStyle = {
     alignItems: 'center',
+    boxSizing: 'border-box',
     display: 'flex',
     flexShrink: 0,
     justifyContent: 'flex-start',
+    paddingLeft: timeline_row_layout_1.TIMELINE_ROW_BASE_PADDING,
 };
 const TimelineRowChrome = ({ depth, eye, keyframeControls, arrow, children, style, selected, selectable, selectionItem, onSelect, showSelectedBackground, containsSelection, outerHeight, onDragLeave, onDragOver, onDrop, onDoubleClick, }) => {
     const ref = (0, react_1.useRef)(null);

package/dist/components/Timeline/TimelineSequence.js

@@ -390,9 +390,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
             overflow: 'hidden',
         };
     }, [marginLeft, s.type, width]);
-    const showRightEdgeDragHandle = (s.type === 'sequence' || s.type === 'image') &&
-        !s.loopDisplay &&
-        !s.isInsideSeries &&
+    const showRightEdgeDragHandle = (0, TimelineSequenceRightEdgeDragHandle_1.isTimelineSequenceDurationDraggable)(s) &&
         nodePath !== null &&
         validatedLocation !== null &&
         durationCanUpdate;
@@ -410,7 +408,7 @@ const TimelineSequenceInner = ({ s, windowWidth, nodePathInfo, sequenceFrameOffs
     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 })), 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] }));
+    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, startMediaFrom: s.startMediaFrom, mediaFrameAtSequenceZero: s.mediaFrameAtSequenceZero, sequenceFrameOffset: sequenceFrameOffset, 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

@@ -535,18 +535,17 @@ const TimelineSequenceItem = ({ nestedDepth, sequence, nodePathInfo, keyframeDis
         codeHiddenStatus !== undefined &&
         codeHiddenStatus !== null &&
         codeHiddenStatus.status === 'static';
-    const onSequenceDoubleClick = (0, react_1.useCallback)((e) => {
+    const onShowInEditorDoubleClick = (0, react_1.useCallback)((e) => {
+        if (!canOpenInEditor) {
+            return;
+        }
         if ((0, TimelineSelection_1.isTimelineSelectionModifierEvent)(e)) {
             e.stopPropagation();
             return;
         }
         e.stopPropagation();
-        if (canRenameThisSequence) {
-            setIsRenaming(true);
-            return;
-        }
         openInEditor();
-    }, [canRenameThisSequence, openInEditor]);
+    }, [canOpenInEditor, openInEditor]);
     const canRenameSelectedSequence = canRenameThisSequence &&
         selected &&
         selectedItems.length === 1 &&
@@ -766,9 +765,7 @@ 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: !previewInteractive, 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: [
+    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: !previewInteractive, 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, 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 }),
                         " ",

package/dist/components/Timeline/TimelineSequenceName.js

@@ -66,9 +66,7 @@ const TimelineSequenceName = ({ displayName, fallbackDisplayName, selected, cont
             return;
         }
         input.focus();
-        const basenameIndex = editableDisplayName.lastIndexOf('.');
-        const selectionEnd = basenameIndex > 0 ? basenameIndex : editableDisplayName.length;
-        input.setSelectionRange(0, selectionEnd);
+        input.select();
     }, [editableDisplayName, editing]);
     const save = (0, react_1.useCallback)(() => {
         onSaveName(draftName).catch(() => undefined);

package/dist/components/Timeline/TimelineSequencePropItem.js

@@ -6,14 +6,12 @@ const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const remotion_1 = require("remotion");
 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");
-const TimelineFieldLabel_1 = require("./TimelineFieldLabel");
+const TimelineFieldRowContent_1 = require("./TimelineFieldRowContent");
 const TimelineKeyframeControls_1 = require("./TimelineKeyframeControls");
 const TimelineKeyframedValue_1 = require("./TimelineKeyframedValue");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
@@ -161,12 +159,11 @@ const TimelineSequenceKeyframedValue = ({ field, fileName, nodePath, schema, pro
 };
 exports.TimelineSequenceKeyframedValue = TimelineSequenceKeyframedValue;
 const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath, nodePathInfo, schema, keyframeDisplayOffset, keyframeControlsMode = 'timeline', }) => {
-    var _a, _b;
+    var _a;
     const { propStatuses: visualModePropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     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();
@@ -192,11 +189,10 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
                 keyframable,
             })) ? (jsx_runtime_1.jsx(TimelineKeyframeControls_1.TimelineKeyframeControls, { fieldKey: field.key, propStatus: propStatus, nodePath: nodePath, fileName: validatedLocation.source, keyframeDisplayOffset: keyframeDisplayOffset, defaultValue: field.fieldSchema.default, dragOverrideValue: dragOverrideValue, schema: schema, effectIndex: null, nodePathInfo: nodePathInfo, mode: keyframeControlsMode })) : null;
     const style = (0, react_1.useMemo)(() => {
-        return {
-            ...fieldRowBase,
-            height: field.rowHeight,
-        };
-    }, [field.rowHeight]);
+        return field.typeName === 'text-content'
+            ? fieldRowBase
+            : { ...fieldRowBase, height: field.rowHeight };
+    }, [field.rowHeight, field.typeName]);
     const canResetToDefault = (0, react_1.useMemo)(() => {
         if (!propStatus || propStatus.status === 'computed') {
             return false;
@@ -251,32 +247,8 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
         validatedLocation.source,
         propStatus,
     ]);
-    const onOpenKeyframeSettings = (0, react_1.useCallback)(() => {
-        var _a;
-        if (propStatus === null || !isKeyframedStatus(propStatus)) {
-            return;
-        }
-        setSelectedModal({
-            type: 'keyframe-settings',
-            fileName: validatedLocation.source,
-            nodePath,
-            fieldKey: field.key,
-            fieldLabel: (_a = field.description) !== null && _a !== void 0 ? _a : field.key,
-            status: propStatus,
-            schema,
-            effectIndex: null,
-        });
-    }, [
-        propStatus,
-        field.description,
-        field.key,
-        nodePath,
-        schema,
-        setSelectedModal,
-        validatedLocation.source,
-    ]);
     const contextMenuValues = (0, react_1.useMemo)(() => {
-        const values = [
+        return [
             {
                 type: 'item',
                 id: 'reset-sequence-field',
@@ -290,28 +262,7 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
                 value: 'reset-sequence-field',
             },
         ];
-        if (propStatus !== null && isKeyframedStatus(propStatus)) {
-            values.push({
-                type: 'item',
-                id: 'keyframe-settings-sequence-field',
-                keyHint: null,
-                label: 'Keyframe settings...',
-                leftItem: null,
-                disabled: previewServerState.type !== 'connected',
-                onClick: onOpenKeyframeSettings,
-                quickSwitcherLabel: null,
-                subMenu: null,
-                value: 'keyframe-settings-sequence-field',
-            });
-        }
-        return values;
-    }, [
-        canShowReset,
-        propStatus,
-        onOpenKeyframeSettings,
-        onReset,
-        previewServerState,
-    ]);
+    }, [canShowReset, onReset]);
     const seekToDisplayFrame = (0, react_1.useCallback)((frame) => {
         setFrame((current) => {
             const next = { ...current, [videoConfig.id]: frame };
@@ -389,8 +340,8 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
     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, 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 }) }))] }));
+    const fieldValue = isKeyframedStatus(propStatus) ? (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(Value, { field: field, nodePath: nodePath, validatedLocation: validatedLocation, schema: schema, propStatus: propStatus })) : (jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineNonEditableStatus, { propStatus: propStatus }));
+    const row = (jsx_runtime_1.jsx(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(TimelineFieldRowContent_1.TimelineFieldRowContent, { field: field, rowDepth: rowDepth, selected: selection.selected, children: fieldValue }) }));
     return (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selection.selectable ? selection.onSelect : null, children: row }));
 };
 exports.TimelineSequencePropItem = TimelineSequencePropItem;

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

@@ -8,6 +8,7 @@ export type TimelineSequenceDurationDragTarget = {
     readonly fileName: string;
     readonly initialDuration: number;
     readonly nodePath: SequencePropsSubscriptionKey;
+    readonly schema: InteractivitySchema;
 };
 export type TimelineSequenceLeftEdgeDragTarget = {
     readonly fileName: string;
@@ -32,6 +33,7 @@ type TimelineSequenceKeyframeDragTarget = {
 type TimelineSequenceEffectKeyframeDragTarget = TimelineSequenceKeyframeDragTarget & {
     readonly effectIndex: number;
 };
+export declare const isTimelineSequenceDurationDraggable: (sequence: TSequence) => boolean;
 export declare const getTimelineSequenceDurationDragValue: ({ initialDuration, deltaFrames, }: {
     readonly initialDuration: number;
     readonly deltaFrames: number;

package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TimelineSequenceRightEdgeDragHandle = exports.useTimelineSequenceFromDrag = exports.TimelineSequenceLeftEdgeDragHandle = exports.getTimelineSequenceFromDragTargets = exports.getTimelineSequenceLeftEdgeDragTargets = exports.getTimelineSequenceDurationDragTargets = exports.getTimelineSequenceFromDragKeyframeMoves = exports.getTimelineSequenceFromDragChanges = exports.getTimelineSequenceFromDragValue = exports.getTimelineSequenceDurationDragChanges = exports.getTimelineSequenceLeftEdgeDragChanges = exports.getTimelineSequenceLeftEdgeDragValues = exports.getTimelineSequenceLeftEdgeDragDelta = exports.getTimelineSequenceDurationDragValue = void 0;
+exports.TimelineSequenceRightEdgeDragHandle = exports.useTimelineSequenceFromDrag = exports.TimelineSequenceLeftEdgeDragHandle = exports.getTimelineSequenceFromDragTargets = exports.getTimelineSequenceLeftEdgeDragTargets = exports.getTimelineSequenceDurationDragTargets = exports.getTimelineSequenceFromDragKeyframeMoves = exports.getTimelineSequenceFromDragChanges = exports.getTimelineSequenceFromDragValue = exports.getTimelineSequenceDurationDragChanges = exports.getTimelineSequenceLeftEdgeDragChanges = exports.getTimelineSequenceLeftEdgeDragValues = exports.getTimelineSequenceLeftEdgeDragDelta = exports.getTimelineSequenceDurationDragValue = exports.isTimelineSequenceDurationDraggable = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
@@ -81,12 +81,19 @@ const canUpdateTrimBefore = ({ propStatuses, nodePath, }) => {
     const status = (_b = (_a = remotion_1.Internals.getPropStatusesCtx(propStatuses, nodePath)) === null || _a === void 0 ? void 0 : _a.trimBefore) === null || _b === void 0 ? void 0 : _b.status;
     return status === 'static';
 };
-const isDurationDraggableSequence = (sequence) => {
-    return ((sequence.type === 'sequence' || sequence.type === 'image') &&
+const isTimelineSequenceDurationDraggable = (sequence) => {
+    var _a;
+    const isInteractiveSeriesSequence = ((_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.componentIdentity) ===
+        'dev.remotion.remotion.Series.Sequence';
+    return ((sequence.type === 'sequence' ||
+        sequence.type === 'image' ||
+        sequence.type === 'audio' ||
+        sequence.type === 'video') &&
         !sequence.loopDisplay &&
-        !sequence.isInsideSeries &&
+        (!sequence.isInsideSeries || isInteractiveSeriesSequence) &&
         Boolean(sequence.controls));
 };
+exports.isTimelineSequenceDurationDraggable = isTimelineSequenceDurationDraggable;
 const isLeftEdgeDraggableSequence = (sequence) => {
     return (!sequence.isInsideSeries &&
         Boolean(sequence.controls) &&
@@ -180,7 +187,7 @@ const getTimelineSequenceDurationDragChanges = ({ targets, deltaFrames, }) => {
                 fieldKey: 'durationInFrames',
                 value: nextValue,
                 defaultValue: null,
-                schema: no_react_1.NoReactInternals.sequenceSchema,
+                schema: target.schema,
             },
         ];
     });
@@ -266,19 +273,24 @@ const getTimelineSequenceDurationDragTargets = ({ draggedNodePathInfo, selectedI
         if (!track ||
             !track.nodePathInfo ||
             !originalSequence ||
-            !isDurationDraggableSequence(originalSequence)) {
+            !(0, exports.isTimelineSequenceDurationDraggable)(originalSequence)) {
             return null;
         }
         const nodePath = track.nodePathInfo.sequenceSubscriptionKey;
         if (!canUpdateDurationInFrames({ propStatuses, nodePath })) {
             return null;
         }
+        const { controls } = originalSequence;
+        if (!controls) {
+            return null;
+        }
         const key = (0, studio_shared_1.stringifySequenceSubscriptionKey)(nodePath);
         if (!targets.has(key)) {
             targets.set(key, {
                 fileName: nodePath.absolutePath,
                 initialDuration: originalSequence.duration,
                 nodePath,
+                schema: controls.schema,
             });
         }
     }

package/dist/components/Timeline/TimelineTextContentField.js

@@ -5,6 +5,17 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const RemTextarea_1 = require("../NewComposition/RemTextarea");
 const focus_inspector_field_1 = require("./focus-inspector-field");
+const textAreaStyle = {
+    boxSizing: 'border-box',
+    maxHeight: 160,
+    minHeight: 40,
+    minWidth: 0,
+    overflowY: 'auto',
+    width: '100%',
+    ...{
+        fieldSizing: 'content',
+    },
+};
 const TimelineTextContentField = ({ effectiveValue, field, nodePath, onDragEnd, onDragValueChange, onSave, propStatus, }) => {
     var _a;
     const inputRef = (0, react_1.useRef)(null);
@@ -91,10 +102,6 @@ const TimelineTextContentField = ({ effectiveValue, field, nodePath, onDragEnd,
             event.currentTarget.blur();
         }
     }, []);
-    return (jsx_runtime_1.jsx(RemTextarea_1.RemTextarea, { ref: setInputRef, status: "ok", small: true, defaultValue: currentValue, onBlur: commitPending, onChange: onChange, onKeyDownCapture: onKeyDownCapture, style: {
-            boxSizing: 'border-box',
-            height: 40,
-            width: 160,
-        } }, String((_a = propStatus.codeValue) !== null && _a !== void 0 ? _a : '')));
+    return (jsx_runtime_1.jsx(RemTextarea_1.RemTextarea, { ref: setInputRef, status: "ok", small: true, defaultValue: currentValue, onBlur: commitPending, onChange: onChange, onKeyDownCapture: onKeyDownCapture, style: textAreaStyle }, String((_a = propStatus.codeValue) !== null && _a !== void 0 ? _a : '')));
 };
 exports.TimelineTextContentField = TimelineTextContentField;

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

@@ -4,7 +4,9 @@ export declare const TimelineVideoInfo: React.FC<{
     readonly src: string;
     readonly visualizationWidth: number;
     readonly naturalWidth: number;
-    readonly trimBefore: number;
+    readonly startMediaFrom: number;
+    readonly mediaFrameAtSequenceZero: number | null;
+    readonly sequenceFrameOffset: number;
     readonly durationInFrames: number;
     readonly playbackRate: number;
     readonly volume: string | number;

package/dist/components/Timeline/TimelineVideoInfo.js

@@ -8,6 +8,7 @@ const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const AudioWaveform_1 = require("../AudioWaveform");
+const get_timeline_media_start_frame_1 = require("./get-timeline-media-start-frame");
 const get_timeline_video_info_widths_1 = require("./get-timeline-video-info-widths");
 const timeline_video_filmstrip_times_1 = require("./timeline-video-filmstrip-times");
 const outerStyle = {
@@ -25,11 +26,17 @@ const filmstripContainerStyle = {
     fontFamily: 'Arial, Helvetica',
 };
 const MAX_FROZEN_FRAME_CACHE_DEVIATION = timeline_utils_1.WEBCODECS_TIMESCALE * 0.05;
-const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore, durationInFrames, playbackRate, volume, doesVolumeChange, premountWidth, postmountWidth, loopDisplay, frozenMediaFrame, }) => {
+const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, startMediaFrom, mediaFrameAtSequenceZero, sequenceFrameOffset, durationInFrames, playbackRate, volume, doesVolumeChange, premountWidth, postmountWidth, loopDisplay, frozenMediaFrame, }) => {
     const { fps } = (0, remotion_1.useVideoConfig)();
     const ref = (0, react_1.useRef)(null);
     const [error, setError] = (0, react_1.useState)(null);
     const aspectRatio = (0, react_1.useRef)((0, timeline_utils_1.getAspectRatioFromCache)(src));
+    const mediaStartFrame = (0, get_timeline_media_start_frame_1.getTimelineMediaStartFrame)({
+        startMediaFrom,
+        mediaFrameAtSequenceZero,
+        sequenceFrameOffset,
+        playbackRate,
+    });
     const { mediaVisualizationWidth, mediaNaturalWidth } = (0, react_1.useMemo)(() => {
         return (0, get_timeline_video_info_widths_1.getTimelineVideoInfoWidths)({
             visualizationWidth,
@@ -84,7 +91,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
                 : null;
         };
         const times = (0, timeline_video_filmstrip_times_1.getTimelineVideoFilmstripTimes)({
-            trimBefore,
+            trimBefore: mediaStartFrame,
             durationInFrames,
             playbackRate,
             fps,
@@ -305,9 +312,9 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
         loopDisplay,
         mediaNaturalWidth,
         mediaVisualizationWidth,
+        mediaStartFrame,
         playbackRate,
         src,
-        trimBefore,
     ]);
     const audioWidth = mediaVisualizationWidth;
     const filmstripStyle = (0, react_1.useMemo)(() => {
@@ -325,7 +332,7 @@ const TimelineVideoInfo = ({ src, visualizationWidth, naturalWidth, trimBefore,
         };
     }, [audioWidth, premountWidth]);
     return (jsx_runtime_1.jsxs("div", { style: outerStyle, children: [
-            jsx_runtime_1.jsx("div", { ref: ref, style: filmstripStyle }), jsx_runtime_1.jsx("div", { style: audioStyle, children: jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: src, height: timeline_layout_1.TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT, visualizationWidth: audioWidth, startFrom: trimBefore, durationInFrames: durationInFrames, volume: volume, doesVolumeChange: doesVolumeChange, playbackRate: playbackRate, loopDisplay: loopDisplay }) })
+            jsx_runtime_1.jsx("div", { ref: ref, style: filmstripStyle }), jsx_runtime_1.jsx("div", { style: audioStyle, children: jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: src, height: timeline_layout_1.TIMELINE_VIDEO_INFO_WAVEFORM_HEIGHT, visualizationWidth: audioWidth, startFrom: mediaStartFrame, durationInFrames: durationInFrames, volume: volume, doesVolumeChange: doesVolumeChange, playbackRate: playbackRate, loopDisplay: loopDisplay }) })
         ] }));
 };
 exports.TimelineVideoInfo = TimelineVideoInfo;

package/dist/components/Timeline/delete-selected-timeline-item.js

@@ -88,15 +88,14 @@ const deleteEffects = (effects) => {
                 : effects.length === 1
                     ? 'Removed effects from source file'
                     : 'Removed effects from source files', 2000);
+            return true;
         }
-        else {
-            (0, NotificationCenter_1.showNotification)(result.reason, 4000);
-        }
-        return true;
+        (0, NotificationCenter_1.showNotification)(result.reason, 4000);
+        return false;
     })
         .catch((err) => {
         (0, NotificationCenter_1.showNotification)(err.message, 4000);
-        return true;
+        return false;
     });
 };
 const deleteSelectedTimelineItem = ({ selection, sequences, overrideIdsToNodePaths, setPropStatuses, clientId, confirm, }) => {

package/dist/components/Timeline/effects-clipboard.d.ts

@@ -0,0 +1,14 @@
+import { type EffectClipboardData } from '@remotion/studio-shared';
+export type EffectsClipboardEnvelope = {
+    readonly envelopeVersion: 1;
+    readonly payload: EffectClipboardData;
+    readonly sourceIdentity: string | null;
+    readonly originalEffectIndices: number[];
+};
+export declare const makeEffectsClipboardHtml: (envelope: EffectsClipboardEnvelope) => string;
+export declare const parseEffectsClipboardHtml: (html: string) => EffectsClipboardEnvelope | null;
+export declare const writeEffectsClipboardEnvelope: (envelope: EffectsClipboardEnvelope) => Promise<void>;
+export declare const readClipboardTextAndEffectsEnvelope: (clipboardData: DataTransfer) => {
+    readonly text: string;
+    readonly envelope: EffectsClipboardEnvelope | null;
+};