@remotion/studio 4.0.490 → 4.0.492

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/TimelineKeyframeControls.js

@@ -114,6 +114,7 @@ const resolveKeyframeControlTarget = ({ nodePathInfo, tracks, propStatuses, getD
         getEffectDragOverrides,
         propStatuses,
         includeTextContent: false,
+        includeSourceControls: false,
     });
     const fieldNode = findFieldNode(tree, (0, timeline_node_path_key_1.timelineNodePathInfoToKey)(nodePathInfo));
     if (fieldNode === null || fieldNode.field === null) {

package/dist/components/Timeline/TimelinePrimitiveFieldValue.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelinePrimitiveFieldValue = exports.isTimelinePrimitiveFieldInfo = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const TimelineAssetField_1 = require("./TimelineAssetField");
 const TimelineBooleanField_1 = require("./TimelineBooleanField");
 const TimelineColorField_1 = require("./TimelineColorField");
 const TimelineEnumField_1 = require("./TimelineEnumField");
@@ -55,11 +56,14 @@ 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 }) }));
     }
+    if (field.typeName === 'asset') {
+        return (jsx_runtime_1.jsx("span", { style: inlineWrapper, children: jsx_runtime_1.jsx(TimelineAssetField_1.TimelineAssetField, { effectiveValue: effectiveValue, field: field, onDragEnd: onDragEnd, onDragValueChange: onDragValueChange, onSave: onSave, propStatus: propStatus }) }));
+    }
     throw new Error(`Unsupported field type: ${field.typeName}`);
 };
 exports.TimelinePrimitiveFieldValue = TimelinePrimitiveFieldValue;

package/dist/components/Timeline/TimelineRowChrome.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const Padder_1 = require("./Padder");
 const timeline_row_layout_1 = require("./timeline-row-layout");
+const TimelineRowLayoutContext_1 = require("./TimelineRowLayoutContext");
 const TimelineSelection_1 = require("./TimelineSelection");
 const rowBase = {
     alignItems: 'stretch',
@@ -25,19 +26,22 @@ const keyframeControlsColumnBaseStyle = {
 };
 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);
+    const { basePadding, keyframeControlsPadding } = (0, react_1.useContext)(TimelineRowLayoutContext_1.TimelineRowLayoutContext);
     const indentWidth = (0, timeline_row_layout_1.getTimelineRowIndentWidth)(depth);
     (0, TimelineSelection_1.useTimelineFocusableItem)(selectionItem, ref);
     const keyframeControlsColumnStyle = (0, react_1.useMemo)(() => ({
         ...keyframeControlsColumnBaseStyle,
-        width: (0, timeline_row_layout_1.getTimelineRowLeftChromeWidth)(depth),
-    }), [depth]);
+        boxSizing: keyframeControlsPadding === 0 ? undefined : 'border-box',
+        paddingLeft: keyframeControlsPadding,
+        width: (0, timeline_row_layout_1.getTimelineRowLeftChromeWidth)(depth, basePadding),
+    }), [basePadding, depth, keyframeControlsPadding]);
     const chromeColumnStyle = (0, react_1.useMemo)(() => ({
         alignItems: 'center',
         alignSelf: 'stretch',
         display: 'flex',
         flexShrink: 0,
-        paddingLeft: timeline_row_layout_1.TIMELINE_ROW_BASE_PADDING,
-    }), []);
+        paddingLeft: basePadding,
+    }), [basePadding]);
     const onPointerDown = (0, react_1.useCallback)((e) => {
         if (e.button === 0) {
             e.stopPropagation();

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

@@ -0,0 +1,7 @@
+type TimelineRowLayout = {
+    readonly basePadding: number;
+    readonly keyframeControlsPadding: number;
+};
+export declare const INSPECTOR_TIMELINE_ROW_LAYOUT: TimelineRowLayout;
+export declare const TimelineRowLayoutContext: import("react").Context<TimelineRowLayout>;
+export {};

package/dist/components/Timeline/TimelineRowLayoutContext.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineRowLayoutContext = exports.INSPECTOR_TIMELINE_ROW_LAYOUT = void 0;
+const react_1 = require("react");
+const timeline_row_layout_1 = require("./timeline-row-layout");
+exports.INSPECTOR_TIMELINE_ROW_LAYOUT = {
+    basePadding: timeline_row_layout_1.INSPECTOR_ROW_BASE_PADDING,
+    keyframeControlsPadding: 0,
+};
+exports.TimelineRowLayoutContext = (0, react_1.createContext)({
+    basePadding: timeline_row_layout_1.TIMELINE_ROW_BASE_PADDING,
+    keyframeControlsPadding: timeline_row_layout_1.TIMELINE_ROW_BASE_PADDING,
+});

package/dist/components/Timeline/TimelineSelection.js

@@ -407,6 +407,7 @@ const getSelectableTimelineItems = ({ getDragOverrides, getEffectDragOverrides,
             getEffectDragOverrides,
             propStatuses,
             includeTextContent: false,
+            includeSourceControls: false,
         });
         const filteredTree = (0, timeline_expanded_filter_1.filterTimelineExpandedTree)({
             nodes: tree,

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

@@ -88,6 +88,7 @@ const TimelineSequenceExpandArrow = ({ disabled, isExpanded, nodePathInfo, onTog
         sequence,
         nodePathInfo,
         includeTextContent: false,
+        includeSourceControls: false,
     });
     if (filteredTree.length === 0) {
         return jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {});

package/dist/components/Timeline/TimelineSequencePropItem.js

@@ -10,9 +10,8 @@ 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");
@@ -160,7 +159,7 @@ 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);
@@ -190,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;
@@ -342,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;
+};

package/dist/components/Timeline/effects-clipboard.js

@@ -0,0 +1,68 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.readClipboardTextAndEffectsEnvelope = exports.writeEffectsClipboardEnvelope = exports.parseEffectsClipboardHtml = exports.makeEffectsClipboardHtml = void 0;
+const studio_shared_1 = require("@remotion/studio-shared");
+const attribute = 'data-remotion-effects-clipboard';
+const getClipboardLabel = (effects) => effects === 1 ? 'Remotion effect' : `${effects} Remotion effects`;
+const makeEffectsClipboardHtml = (envelope) => `<span ${attribute}="${encodeURIComponent(JSON.stringify(envelope))}">${getClipboardLabel(envelope.payload.effects.length)}</span>`;
+exports.makeEffectsClipboardHtml = makeEffectsClipboardHtml;
+const parseEffectsClipboardHtml = (html) => {
+    const match = html.match(new RegExp(`${attribute}=["']([^"']+)["']`, 'i'));
+    if (!(match === null || match === void 0 ? void 0 : match[1])) {
+        return null;
+    }
+    try {
+        const candidate = JSON.parse(decodeURIComponent(match[1]));
+        if (candidate.envelopeVersion !== 1 ||
+            (candidate.sourceIdentity !== null &&
+                typeof candidate.sourceIdentity !== 'string') ||
+            !Array.isArray(candidate.originalEffectIndices) ||
+            !candidate.originalEffectIndices.every((index) => Number.isInteger(index) && index >= 0)) {
+            return null;
+        }
+        const result = (0, studio_shared_1.parseEffectClipboardDataResult)(JSON.stringify(candidate.payload));
+        if (result.status !== 'valid') {
+            return null;
+        }
+        const originalEffectIndices = candidate.originalEffectIndices;
+        const sourceIdentity = candidate.sourceIdentity;
+        if ((sourceIdentity === null && originalEffectIndices.length !== 0) ||
+            (sourceIdentity !== null &&
+                (originalEffectIndices.length !== result.data.effects.length ||
+                    new Set(originalEffectIndices).size !== originalEffectIndices.length))) {
+            return null;
+        }
+        return {
+            envelopeVersion: 1,
+            payload: result.data,
+            sourceIdentity,
+            originalEffectIndices,
+        };
+    }
+    catch (_a) {
+        return null;
+    }
+};
+exports.parseEffectsClipboardHtml = parseEffectsClipboardHtml;
+const writeEffectsClipboardEnvelope = async (envelope) => {
+    const label = getClipboardLabel(envelope.payload.effects.length);
+    await navigator.clipboard.write([
+        new ClipboardItem({
+            'text/html': new Blob([(0, exports.makeEffectsClipboardHtml)(envelope)], {
+                type: 'text/html',
+            }),
+            'text/plain': new Blob([label], { type: 'text/plain' }),
+        }),
+    ]);
+};
+exports.writeEffectsClipboardEnvelope = writeEffectsClipboardEnvelope;
+const readClipboardTextAndEffectsEnvelope = (clipboardData) => {
+    const html = clipboardData.types.includes('text/html')
+        ? clipboardData.getData('text/html')
+        : '';
+    return {
+        text: clipboardData.getData('text/plain'),
+        envelope: html === '' ? null : (0, exports.parseEffectsClipboardHtml)(html),
+    };
+};
+exports.readClipboardTextAndEffectsEnvelope = readClipboardTextAndEffectsEnvelope;

package/dist/components/Timeline/get-sequence-context-menu-items.js

@@ -21,22 +21,25 @@ const normalizeMenuDividers = (items) => {
     }
     return normalized;
 };
+const interactiveSvgComponentIdentity = 'dev.remotion.remotion.Interactive.Svg';
 const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDisabled, disableInteractivityDisabled, duplicateDisabled, fileLocation, includeSourceEditItems, onDeleteSequenceFromSource, onDisableSequenceInteractivity, onDuplicateSequenceFromSource, openInEditor, originalLocation, selectAsset, sequence, sourceActions = [], }) => {
+    var _a, _b;
     const editorName = window.remotion_editorName;
     const { documentationLink } = sequence;
+    const isInteractiveSvg = ((_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.componentIdentity) === interactiveSvgComponentIdentity;
     const items = [
         editorName
             ? {
                 type: 'item',
-                id: 'show-in-editor',
+                id: 'open-in-editor',
                 keyHint: null,
-                label: `Show in ${editorName}`,
+                label: `Open in ${editorName}`,
                 leftItem: null,
                 disabled: !canOpenInEditor || !originalLocation,
                 onClick: openInEditor,
                 quickSwitcherLabel: null,
                 subMenu: null,
-                value: 'show-in-editor',
+                value: 'open-in-editor',
             }
             : null,
         {
@@ -101,6 +104,40 @@ const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDis
                 id: 'sequence-link-divider',
             }
             : null,
+        isInteractiveSvg
+            ? {
+                type: 'item',
+                id: 'copy-svg',
+                keyHint: null,
+                label: 'Copy SVG',
+                leftItem: null,
+                disabled: !((_b = sequence.refForOutline) === null || _b === void 0 ? void 0 : _b.current),
+                onClick: () => {
+                    var _a;
+                    const svg = (_a = sequence.refForOutline) === null || _a === void 0 ? void 0 : _a.current;
+                    if (!svg) {
+                        return;
+                    }
+                    navigator.clipboard
+                        .writeText(svg.outerHTML)
+                        .then(() => {
+                        (0, NotificationCenter_1.showNotification)('Copied SVG to clipboard', 1000);
+                    })
+                        .catch((err) => {
+                        (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 1000);
+                    });
+                },
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'copy-svg',
+            }
+            : null,
+        isInteractiveSvg
+            ? {
+                type: 'divider',
+                id: 'copy-svg-divider',
+            }
+            : null,
         sourceActions.length > 0
             ? {
                 type: 'divider',

package/dist/components/Timeline/get-timeline-media-start-frame.d.ts

@@ -0,0 +1,6 @@
+export declare const getTimelineMediaStartFrame: ({ startMediaFrom, mediaFrameAtSequenceZero, sequenceFrameOffset, playbackRate, }: {
+    startMediaFrom: number;
+    mediaFrameAtSequenceZero: number | null;
+    sequenceFrameOffset: number;
+    playbackRate: number;
+}) => number;

package/dist/components/Timeline/get-timeline-media-start-frame.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTimelineMediaStartFrame = void 0;
+const no_react_1 = require("remotion/no-react");
+const getTimelineMediaStartFrame = ({ startMediaFrom, mediaFrameAtSequenceZero, sequenceFrameOffset, playbackRate, }) => {
+    if (mediaFrameAtSequenceZero !== null) {
+        return mediaFrameAtSequenceZero + sequenceFrameOffset * playbackRate;
+    }
+    return no_react_1.NoReactInternals.getExpectedMediaFrameUncorrected({
+        frame: sequenceFrameOffset,
+        startFrom: startMediaFrom,
+        playbackRate,
+    });
+};
+exports.getTimelineMediaStartFrame = getTimelineMediaStartFrame;

package/dist/components/Timeline/sequence-props-subscription-store.d.ts

@@ -1,8 +1,8 @@
-import type { SequenceNodePath, InteractivitySchema } from 'remotion';
+import type { SequenceNodePath, InteractivitySchema, VideoConfigValues } from 'remotion';
 import { callApi } from '../call-api';
 type SubscribeResult = Awaited<ReturnType<typeof callApi<'/api/subscribe-to-sequence-props'>>>;
 type ApplyResult = (result: SubscribeResult) => void;
-export declare const acquireSequencePropsSubscription: ({ fileName, line, column, schema, componentIdentity, effects, nodePath, clientId, applyOnce, applyEach, }: {
+export declare const acquireSequencePropsSubscription: ({ fileName, line, column, schema, componentIdentity, effects, nodePath, clientId, applyOnce, applyEach, videoConfigValues, }: {
     fileName: string;
     line: number;
     column: number;
@@ -13,6 +13,7 @@ export declare const acquireSequencePropsSubscription: ({ fileName, line, column
     clientId: string;
     applyOnce: ApplyResult;
     applyEach: ApplyResult;
+    videoConfigValues: VideoConfigValues;
 }) => {
     release: () => void;
 };