@remotion/studio 4.0.499 → 4.0.500

package/dist/components/Timeline/TimelineExpandedKeyframeRow.js

@@ -43,6 +43,7 @@ const TimelineKeyframeEasingLine_1 = require("./TimelineKeyframeEasingLine");
 const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
 const row = {
+    overflow: 'hidden',
     position: 'relative',
 };
 const rowSeparator = {

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TimelineHeightContainer: React.NamedExoticComponent<{
-    readonly shown: TrackWithHash[];
+    readonly shown: TimelineTrackData[];
     readonly hasBeenCut: boolean;
     readonly children: React.ReactNode;
 }>;

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TimelineKeyframeTracksProvider: React.FC<{
-    readonly tracks: readonly TrackWithHash[];
+    readonly tracks: readonly TimelineTrackData[];
     readonly children: React.ReactNode;
 }>;
-export declare const useTimelineKeyframeTracks: () => readonly TrackWithHash[];
+export declare const useTimelineKeyframeTracks: () => readonly TimelineTrackData[];

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TimelineList: React.FC<{
-    readonly timeline: TrackWithHash[];
+    readonly timeline: TimelineTrackData[];
 }>;

package/dist/components/Timeline/TimelinePrimitiveFieldValue.js

@@ -17,6 +17,12 @@ const TimelineUvCoordinateField_1 = require("./TimelineUvCoordinateField");
 const inlineWrapper = {
     fontSize: 12,
 };
+const assetInlineWrapper = {
+    ...inlineWrapper,
+    display: 'flex',
+    flex: 1,
+    minWidth: 0,
+};
 const isTimelinePrimitiveFieldInfo = (field) => {
     return field.typeName !== 'array' && field.fieldSchema.type !== 'array';
 };
@@ -60,7 +66,7 @@ const TimelinePrimitiveFieldValue = ({ field, onSave, onDragValueChange, onDragE
         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 }) }));
+        return (jsx_runtime_1.jsx("span", { style: assetInlineWrapper, 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}`);
 };

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

@@ -1,6 +1,6 @@
 import React, { type CSSProperties } from 'react';
 import { type GetDragOverrides, type GetEffectDragOverrides, type PropStatuses } from 'remotion';
-import type { SequenceNodePathInfo, TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+import type { SequenceNodePathInfo, TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
 import { type GetIsExpanded } from '../ExpandedTracksProvider';
 export declare const TIMELINE_SELECTED_BACKGROUND = "#3B3F42";
 export declare const TIMELINE_SELECTED_LABEL_BACKGROUND = "#B0B0B0";
@@ -145,23 +145,23 @@ type TimelineSelectionOptions = {
 };
 export declare const getTimelineSelectionFromNodePathInfo: (nodePathInfo: SequenceNodePathInfo | null) => TimelineSelection | null;
 export declare const getTimelineSelectionKey: (item: TimelineSelection) => string;
-export declare const getSelectableTimelineSequenceSelections: (tracks: readonly Pick<TrackWithHash, "nodePathInfo">[]) => TimelineSelection[];
+export declare const getSelectableTimelineSequenceSelections: (tracks: readonly Pick<TimelineTrackData, "nodePathInfo">[]) => TimelineSelection[];
 export declare const getSelectableTimelineItems: ({ getDragOverrides, getEffectDragOverrides, getIsExpanded, propStatuses, selectedItems, timeline, timelinePosition, }: {
     readonly getDragOverrides: GetDragOverrides;
     readonly getEffectDragOverrides: GetEffectDragOverrides;
     readonly getIsExpanded: GetIsExpanded;
     readonly propStatuses: PropStatuses;
     readonly selectedItems: readonly TimelineSelection[];
-    readonly timeline: readonly TrackWithHash[];
+    readonly timeline: readonly TimelineTrackData[];
     readonly timelinePosition: number;
 }) => TimelineSelection[];
 export declare const getTimelineSequenceSelectionKey: (nodePathInfo: SequenceNodePathInfo) => string;
 export declare const TimelineSelectAllKeybindings: React.FC<{
-    readonly timeline: readonly TrackWithHash[];
+    readonly timeline: readonly TimelineTrackData[];
 }>;
 export declare const TimelineSelectableItemsProvider: React.FC<{
     readonly children: React.ReactNode;
-    readonly timeline: readonly TrackWithHash[];
+    readonly timeline: readonly TimelineTrackData[];
 }>;
 export declare const TimelineSelectionProvider: React.FC<{
     readonly children: React.ReactNode;

package/dist/components/Timeline/TimelineSelection.js

@@ -595,9 +595,9 @@ const TimelineSelectionProvider = ({ children }) => {
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
     const timelineSelectionScope = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition' ? canvasContent.compositionId : null;
     const { expandParentTracks } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
-    const canSelect = (0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
-        previewServerState.type === 'connected' &&
-        !window.remotion_isReadOnlyStudio;
+    const canSelect = (0, interactivity_enabled_1.isStudioSelectionEnabled)() &&
+        (previewServerState.type === 'connected' ||
+            window.remotion_isReadOnlyStudio);
     const [selectedItems, setSelectedItems] = (0, react_1.useState)([]);
     const selectionAnchor = (0, react_1.useRef)(null);
     const selectionScope = (0, react_1.useRef)(null);
@@ -614,7 +614,8 @@ const TimelineSelectionProvider = ({ children }) => {
             setSelectedItems([]);
         }
     }, [canSelect]);
-    const canSelectItem = (0, react_1.useCallback)((_item) => canSelect, [canSelect]);
+    const canSelectItem = (0, react_1.useCallback)((item) => canSelect &&
+        (!window.remotion_isReadOnlyStudio || item.type === 'sequence'), [canSelect]);
     const getCurrentAvailableSelectionState = (0, react_1.useCallback)((currentSelectedItems) => {
         if (selectionScope.current !== timelineSelectionScope) {
             return exports.EMPTY_TIMELINE_SELECTION_STATE;
@@ -867,8 +868,9 @@ const TimelineSelectionProvider = ({ children }) => {
     ]);
     const currentSelection = (0, react_1.useRef)(value);
     currentSelection.current = value;
-    return (jsx_runtime_1.jsx(CurrentTimelineSelectionContext.Provider, { value: currentSelection, children: jsx_runtime_1.jsxs(TimelineSelectionContext.Provider, { value: value, children: [children, jsx_runtime_1.jsx(TimelineEscapeKeybindings, {}), jsx_runtime_1.jsx(TimelineClipboardKeybindings_1.TimelineClipboardKeybindings, {}), jsx_runtime_1.jsx(TimelineDeleteKeybindings_1.TimelineDeleteKeybindings, {})
-            ] }) }));
+    return (jsx_runtime_1.jsx(CurrentTimelineSelectionContext.Provider, { value: currentSelection, children: jsx_runtime_1.jsxs(TimelineSelectionContext.Provider, { value: value, children: [children, jsx_runtime_1.jsx(TimelineEscapeKeybindings, {}), (0, interactivity_enabled_1.isStudioInteractivityEnabled)() ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                        jsx_runtime_1.jsx(TimelineClipboardKeybindings_1.TimelineClipboardKeybindings, {}), jsx_runtime_1.jsx(TimelineDeleteKeybindings_1.TimelineDeleteKeybindings, {})
+                    ] })) : null] }) }));
 };
 exports.TimelineSelectionProvider = TimelineSelectionProvider;
 const useTimelineSelection = () => {

package/dist/components/Timeline/TimelineSequence.js

@@ -341,9 +341,6 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         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) {
-            return [];
-        }
         return (0, get_sequence_context_menu_items_1.getSequenceContextMenuItems)({
             assetLinkInfo,
             canOpenInEditor,
@@ -376,7 +373,6 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         onDuplicateSequenceFromSource,
         openInEditor,
         originalLocation,
-        previewConnected,
         s,
         selectAsset,
     ]);
@@ -462,6 +458,6 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         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, onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, children: [s.type === 'audio' ? (jsx_runtime_1.jsx("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(AudioWaveform_1.AudioWaveform, { src: s.src, height: timeline_layout_1.TIMELINE_LAYER_HEIGHT_AUDIO, doesVolumeChange: s.doesVolumeChange, visualizationWidth: mediaVisualizationLayout.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, extendLastFrame: extendVideoLastFrame })) : null, s.type === 'image' ? (jsx_runtime_1.jsx("div", { style: mediaVisualizationStyle, children: jsx_runtime_1.jsx(TimelineImageInfo_1.TimelineImageInfo, { src: s.src, visualizationWidth: mediaVisualizationLayout.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);
+    return previewConnected || window.remotion_isReadOnlyStudio ? (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

@@ -55,6 +55,7 @@ const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
 const InitialCompositionLoader_1 = require("../InitialCompositionLoader");
 const layout_1 = require("../layout");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const selected_outline_types_1 = require("../selected-outline-types");
 const use_select_asset_1 = require("../use-select-asset");
 const disable_sequence_interactivity_1 = require("./disable-sequence-interactivity");
 const duplicate_selected_timeline_item_1 = require("./duplicate-selected-timeline-item");
@@ -186,7 +187,7 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const { onSelect, selectable, selected, selectionItem } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
-    const { selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
+    const { selectItem, selectedItems } = (0, TimelineSelection_1.useTimelineSelection)();
     const containsSelection = (0, TimelineSelection_1.useTimelineRowContainsSelection)(nodePathInfo);
     const [effectDropHovered, setEffectDropHovered] = (0, react_1.useState)(false);
     const [isRenaming, setIsRenaming] = (0, react_1.useState)(false);
@@ -651,6 +652,29 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
     const canAddEffect = (nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.supportsEffects) === true &&
         previewInteractive &&
         Boolean(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source);
+    const canCrop = (0, react_1.useMemo)(() => {
+        if (!previewInteractive ||
+            !sequence.controls ||
+            !nodePathInfo ||
+            !propStatusesForOverride ||
+            !(validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source)) {
+            return false;
+        }
+        const activeSchema = remotion_1.Internals.flattenActiveSchema(sequence.controls.schema, (key) => {
+            var _a;
+            return (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.currentRuntimeValueDotNotation[key];
+        });
+        return (0, selected_outline_types_1.canEditSelectedOutlineCrop)({
+            schema: activeSchema,
+            propStatuses: propStatusesForOverride,
+        });
+    }, [
+        nodePathInfo,
+        previewInteractive,
+        propStatusesForOverride,
+        sequence.controls,
+        validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
+    ]);
     const onAddEffect = (0, react_1.useCallback)(() => {
         if (!canAddEffect ||
             previewServerState.type !== 'connected' ||
@@ -671,10 +695,20 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
         setSelectedModal,
         validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
     ]);
-    const contextMenuValues = (0, react_1.useMemo)(() => {
-        if (!previewConnected) {
-            return [];
+    const onCrop = (0, react_1.useCallback)(() => {
+        if (!canCrop || !nodePathInfo) {
+            return;
         }
+        selectItem({
+            type: 'sequence-prop',
+            nodePathInfo: {
+                ...nodePathInfo,
+                auxiliaryKeys: ['controls', selected_outline_types_1.cropFieldKeys.left],
+            },
+            key: selected_outline_types_1.cropFieldKeys.left,
+        }, undefined, undefined, { reveal: true });
+    }, [canCrop, nodePathInfo, selectItem]);
+    const contextMenuValues = (0, react_1.useMemo)(() => {
         return (0, get_sequence_context_menu_items_1.getSequenceContextMenuItems)({
             assetLinkInfo,
             canOpenInEditor,
@@ -706,12 +740,24 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
                                 subMenu: null,
                                 value: 'add-effect',
                             },
-                            {
-                                type: 'divider',
-                                id: 'add-effect-divider',
-                            },
                         ]
                         : []),
+                    {
+                        type: 'item',
+                        id: 'crop',
+                        keyHint: null,
+                        label: 'Crop',
+                        leftItem: null,
+                        disabled: !canCrop,
+                        onClick: onCrop,
+                        quickSwitcherLabel: null,
+                        subMenu: null,
+                        value: 'crop',
+                    },
+                    {
+                        type: 'divider',
+                        id: 'crop-divider',
+                    },
                     {
                         type: 'item',
                         id: 'rename-sequence',
@@ -733,6 +779,7 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
     }, [
         assetLinkInfo,
         canAddEffect,
+        canCrop,
         canOpenInEditor,
         canRenameThisSequence,
         deleteDisabled,
@@ -742,13 +789,13 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
         freezeFrameMenuItem,
         nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.supportsEffects,
         onAddEffect,
+        onCrop,
         onDeleteSequenceFromSource,
         onDisableSequenceInteractivity,
         onDuplicateSequenceFromSource,
         onRenameSequence,
         openInEditor,
         originalLocation,
-        previewConnected,
         selectAsset,
         sequence,
     ]);
@@ -818,7 +865,7 @@ const TimelineSequenceItem = ({ children, connectedCompositions, nestedDepth, se
                         jsx_runtime_1.jsx(TimelineMediaInfo_1.TimelineMediaInfo, { src: mediaSrc })
                     ] })) : null] }) }));
     const draggableTrackRow = canHandleSequenceDrag ? (jsx_runtime_1.jsxs("div", { draggable: canReorderSequence, onDragStart: onSequenceDragStart, onDragEnd: onSequenceDragEnd, onDragOver: onSequenceDragOver, onDragLeave: onSequenceDragLeave, onDrop: onSequenceDrop, style: sequenceReorderWrapper, children: [sequenceReorderLineStyle ? (jsx_runtime_1.jsx("div", { style: sequenceReorderLineStyle })) : null, sequenceDropRejection ? (jsx_runtime_1.jsx("div", { style: sequenceReorderRejectionStyle, children: sequenceDropRejection })) : null, trackRow] })) : (trackRow);
-    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [previewConnected ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selectable ? onSelect : null, children: draggableTrackRow })) : (draggableTrackRow), previewConnected &&
+    return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [previewConnected || window.remotion_isReadOnlyStudio ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { values: contextMenuValues, onOpen: selectable ? onSelect : null, children: draggableTrackRow })) : (draggableTrackRow), previewConnected &&
                 (0, interactivity_enabled_1.isStudioInteractivityEnabled)() &&
                 isExpanded &&
                 hasExpandableContent &&

package/dist/components/Timeline/TimelineSequencePropItem.js

@@ -6,9 +6,10 @@ 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 open_in_editor_1 = require("../../helpers/open-in-editor");
 const ContextMenu_1 = require("../ContextMenu");
+const InspectorPanelLayout_1 = require("../InspectorPanelLayout");
 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 TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineFieldRowContent_1 = require("./TimelineFieldRowContent");
@@ -18,8 +19,17 @@ 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 inlineSourceFieldRow = {
+    alignItems: 'stretch',
+    display: 'flex',
+    minWidth: 0,
+    width: '100%',
+};
+const computedSourceFieldRow = {
+    boxSizing: 'border-box',
+    paddingInline: InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING,
+};
 const isKeyframedStatus = (status) => {
     return status.status === 'keyframed';
 };
@@ -167,9 +177,6 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     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);
@@ -267,84 +274,29 @@ const TimelineSequencePropItem = ({ field, validatedLocation, rowDepth, nodePath
             },
         ];
     }, [canShowReset, onReset]);
-    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) {
+        var _a;
+        if (!window.remotion_editorName ||
+            previewServerState.type !== 'connected') {
             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,
-    ]);
+        (0, open_in_editor_1.openOriginalPositionInEditorAtProperty)({
+            originalPosition: validatedLocation,
+            property: (_a = field.key.split('.').at(-1)) !== null && _a !== void 0 ? _a : field.key,
+        }).catch(() => undefined);
+    }, [field.key, previewServerState.type, validatedLocation]);
     if (propStatus === null) {
         return null;
     }
     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 }));
+    if (field.typeName === 'asset' && field.key === 'src') {
+        return (jsx_runtime_1.jsx("div", { style: {
+                ...inlineSourceFieldRow,
+                ...(propStatus.status === 'computed' ? computedSourceFieldRow : null),
+                ...style,
+            }, children: fieldValue }));
+    }
     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 }));
 };

package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js

@@ -107,7 +107,6 @@ const getMinimumSequenceDuration = ({ sequence, sequences, }) => {
         return 1;
     }
     const siblings = (0, sort_by_nonce_history_1.sortItemsByNonceHistory)(sequences.filter((candidate) => candidate.parent === sequence.parent &&
-        candidate.rootId === sequence.rootId &&
         ((0, exports.isTransitionSeriesSequence)(candidate) ||
             isTransitionSeriesTransition(candidate))));
     const sequenceIndex = siblings.findIndex((candidate) => candidate.id === sequence.id);

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TimelineTrack: React.NamedExoticComponent<{
-    readonly track: TrackWithHash;
+    readonly track: TimelineTrackData;
 }>;

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
+import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
 export declare const TimelineTracks: React.NamedExoticComponent<{
-    readonly timeline: TrackWithHash[];
+    readonly timeline: TimelineTrackData[];
     readonly hasBeenCut: boolean;
 }>;

package/dist/components/Timeline/find-track-for-node-path-info.d.ts

@@ -4,4 +4,4 @@ export declare const findTrackForNodePathInfo: ({ sequences, overrideIdsToNodePa
     sequences: TSequence[];
     overrideIdsToNodePaths: OverrideIdToNodePaths;
     nodePathInfo: SequenceNodePathInfo;
-}) => import("../../helpers/get-timeline-sequence-sort-key").TrackWithHash | undefined;
+}) => import("../../helpers/get-timeline-sequence-sort-key").TimelineTrackData | undefined;

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

@@ -145,18 +145,20 @@ const getSequenceContextMenuItems = ({ assetLinkInfo, canOpenInEditor, deleteDis
             }
             : null,
         ...sourceActions,
-        {
-            type: 'item',
-            id: 'disable-interactivity',
-            keyHint: null,
-            label: 'Disable interactivity',
-            leftItem: null,
-            disabled: disableInteractivityDisabled,
-            onClick: onDisableSequenceInteractivity,
-            quickSwitcherLabel: null,
-            subMenu: null,
-            value: 'disable-interactivity',
-        },
+        includeSourceEditItems
+            ? {
+                type: 'item',
+                id: 'disable-interactivity',
+                keyHint: null,
+                label: 'Disable interactivity',
+                leftItem: null,
+                disabled: disableInteractivityDisabled,
+                onClick: onDisableSequenceInteractivity,
+                quickSwitcherLabel: null,
+                subMenu: null,
+                value: 'disable-interactivity',
+            }
+            : null,
         includeSourceEditItems
             ? {
                 type: 'item',

package/dist/components/Timeline/reset-selected-timeline-props.js

@@ -175,18 +175,26 @@ const resetSelectedTimelineProps = ({ selections, sequences, overrideIdsToNodePa
                 : 'Reapply sequence prop',
         }));
     }
-    for (const target of effectPropTargets) {
-        resetPromises.push((0, save_effect_prop_1.saveEffectProp)({
-            type: 'value',
-            fileName: target.fileName,
-            nodePath: target.nodePath,
-            effectIndex: target.effectIndex,
-            fieldKey: target.fieldKey,
-            value: target.value,
-            defaultValue: target.defaultValue,
-            schema: target.schema,
+    if (effectPropTargets.length > 0) {
+        resetPromises.push((0, save_effect_prop_1.saveMultipleEffectProps)({
+            changes: effectPropTargets.map((target) => ({
+                type: 'value',
+                fileName: target.fileName,
+                nodePath: target.nodePath,
+                effectIndex: target.effectIndex,
+                fieldKey: target.fieldKey,
+                value: target.value,
+                defaultValue: target.defaultValue,
+                schema: target.schema,
+            })),
             setPropStatuses,
             clientId,
+            undoLabel: effectPropTargets.length > 1
+                ? 'Reset selected effect props'
+                : 'Reset effect prop',
+            redoLabel: effectPropTargets.length > 1
+                ? 'Reapply selected effect props'
+                : 'Reapply effect prop',
         }));
     }
     return Promise.all(resetPromises).then(() => undefined);

package/dist/components/Timeline/save-effect-prop.d.ts

@@ -20,5 +20,15 @@ type SaveEffectPropEffectParam = SaveEffectPropBase & {
     effectParam: EffectClipboardParam;
 };
 type SaveEffectPropInput = SaveEffectPropValue | SaveEffectPropEffectParam;
+type WithoutSaveContext<T> = T extends unknown ? Omit<T, 'setPropStatuses' | 'clientId'> : never;
+type SaveMultipleEffectPropChange = WithoutSaveContext<SaveEffectPropInput>;
+type SaveMultipleEffectPropsOptions = {
+    changes: SaveMultipleEffectPropChange[];
+    setPropStatuses: SetPropStatuses;
+    clientId: string;
+    undoLabel: string;
+    redoLabel: string;
+};
+export declare const saveMultipleEffectProps: ({ changes, setPropStatuses, clientId, undoLabel, redoLabel, }: SaveMultipleEffectPropsOptions) => Promise<void>;
 export declare const saveEffectProp: (input: SaveEffectPropInput) => Promise<void>;
 export {};

package/dist/components/Timeline/save-effect-prop.js

@@ -1,10 +1,61 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.saveEffectProp = void 0;
+exports.saveEffectProp = exports.saveMultipleEffectProps = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const call_api_1 = require("../call-api");
 const apply_effect_response_to_prop_statuses_1 = require("./apply-effect-response-to-prop-statuses");
 const save_prop_queue_1 = require("./save-prop-queue");
+const saveMultipleEffectProps = ({ changes, setPropStatuses, clientId, undoLabel, redoLabel, }) => {
+    if (changes.length === 0) {
+        return Promise.resolve();
+    }
+    for (const change of changes) {
+        if (change.type === 'effect-param') {
+            continue;
+        }
+        setPropStatuses(change.nodePath, (prev) => (0, studio_shared_1.optimisticUpdateForEffectPropStatuses)({
+            previous: prev,
+            effectIndex: change.effectIndex,
+            fieldKey: change.fieldKey,
+            value: change.value,
+            schema: change.schema,
+        }));
+    }
+    return (0, call_api_1.callApi)('/api/save-multiple-effect-props', {
+        edits: changes.map((change) => change.type === 'effect-param'
+            ? {
+                type: 'effect-param',
+                fileName: change.fileName,
+                sequenceNodePath: change.nodePath,
+                effectIndex: change.effectIndex,
+                key: change.fieldKey,
+                effectParam: change.effectParam,
+                defaultValue: change.defaultValue,
+                schema: change.schema,
+            }
+            : {
+                type: 'value',
+                fileName: change.fileName,
+                sequenceNodePath: change.nodePath,
+                effectIndex: change.effectIndex,
+                key: change.fieldKey,
+                value: JSON.stringify(change.value),
+                defaultValue: change.defaultValue,
+                schema: change.schema,
+            }),
+        clientId,
+        undoLabel,
+        redoLabel,
+    }).then((response) => {
+        for (const result of response.results) {
+            setPropStatuses(result.sequenceNodePath, (prev) => (0, apply_effect_response_to_prop_statuses_1.applyEffectResponseToPropStatuses)({
+                previous: prev,
+                response: result.status,
+            }));
+        }
+    });
+};
+exports.saveMultipleEffectProps = saveMultipleEffectProps;
 const saveEffectProp = (input) => {
     const { fileName, nodePath, effectIndex, fieldKey, defaultValue, schema, setPropStatuses, clientId, } = input;
     return (0, save_prop_queue_1.enqueueSavePropChange)({

package/dist/components/Timeline/should-show-track-in-timeline.d.ts

@@ -1,2 +1,2 @@
-import type { TrackWithHash } from '../../helpers/get-timeline-sequence-sort-key';
-export declare const shouldShowTrackInTimeline: (track: TrackWithHash, durationInFrames: number) => boolean;
+import type { TimelineTrackData } from '../../helpers/get-timeline-sequence-sort-key';
+export declare const shouldShowTrackInTimeline: (track: TimelineTrackData, durationInFrames: number) => boolean;