@remotion/studio 4.0.505 → 4.0.507

package/dist/components/Timeline/TimelineSequence.js

@@ -39,21 +39,19 @@ const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
-const format_file_location_1 = require("../../helpers/format-file-location");
 const get_sequence_double_click_action_1 = require("../../helpers/get-sequence-double-click-action");
 const get_timeline_sequence_layout_1 = require("../../helpers/get-timeline-sequence-layout");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const is_video_with_last_frame_hold_1 = require("../../helpers/is-video-with-last-frame-hold");
-const open_in_editor_1 = require("../../helpers/open-in-editor");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const use_max_media_duration_1 = require("../../helpers/use-max-media-duration");
+const modals_1 = require("../../state/modals");
 const AudioWaveform_1 = require("../AudioWaveform");
 const call_api_1 = require("../call-api");
 const ConfirmationDialog_1 = require("../ConfirmationDialog");
 const ContextMenu_1 = require("../ContextMenu");
 const InitialCompositionLoader_1 = require("../InitialCompositionLoader");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
-const use_default_editor_info_1 = require("../use-default-editor-info");
 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");
@@ -68,7 +66,7 @@ const TimelineSequenceFrame_1 = require("./TimelineSequenceFrame");
 const TimelineSequenceRightEdgeDragHandle_1 = require("./TimelineSequenceRightEdgeDragHandle");
 const TimelineVideoInfo_1 = require("./TimelineVideoInfo");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
-const use_resolved_stack_react_to_change_1 = require("./use-resolved-stack-react-to-change");
+const use_open_sequence_in_apps_1 = require("./use-open-sequence-in-apps");
 const use_sequence_freeze_frame_menu_item_1 = require("./use-sequence-freeze-frame-menu-item");
 const TimelineSequenceFn = ({ s, connectedCompositions, nodePathInfo, sequenceFrameOffset }) => {
     const windowWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
@@ -159,12 +157,12 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     // Some compositions may not be longer than their media duration,
     // if that is the case, it needs to be asynchronously determined
     var _a, _b, _c;
-    var _d, _e, _f, _g, _h;
+    var _d, _e, _f, _g, _h, _j;
     const video = remotion_1.Internals.useVideo();
     const maxMediaDuration = (0, use_max_media_duration_1.useMaxMediaDuration)(s, (_d = video === null || video === void 0 ? void 0 : video.fps) !== null && _d !== void 0 ? _d : 30);
     const effectiveMaxMediaDuration = s.loopDisplay ? null : maxMediaDuration;
     const extendVideoLastFrame = (0, is_video_with_last_frame_hold_1.isVideoWithLastFrameHold)(s);
-    const originalLocation = (0, use_resolved_stack_react_to_change_1.useResolveStackAndReactToChange)(s.getStack);
+    const { canOpenInEditor, canConfigureApps, codingAgentInfo, editorInfo, openInCodingAgent, openInEditor, originalLocation, } = (0, use_open_sequence_in_apps_1.useOpenSequenceInApps)(s);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
         if (!originalLocation ||
@@ -199,25 +197,12 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
     const previewInteractive = previewConnected && (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
-    const editorInfo = (0, use_default_editor_info_1.useDefaultEditorInfo)((0, use_default_editor_info_1.canUseEditorPicker)(previewConnected));
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     const { onSelect, selectable } = (0, TimelineSelection_1.useTimelineRowSelection)(nodePathInfo);
-    const fileLocation = (0, react_1.useMemo)(() => (0, format_file_location_1.formatFileLocation)({
-        location: originalLocation,
-        root: window.remotion_cwd,
-    }), [originalLocation]);
-    const canOpenInEditor = Boolean(window.remotion_editorName && previewConnected && originalLocation);
-    const openInEditor = (0, react_1.useCallback)((editorId) => {
-        if (!canOpenInEditor || !originalLocation) {
-            return;
-        }
-        (0, open_in_editor_1.openOriginalPositionInEditor)(originalLocation, editorId).catch((err) => {
-            (0, NotificationCenter_1.showNotification)(err.message, 2000);
-        });
-    }, [canOpenInEditor, originalLocation]);
     const onSequenceDoubleClick = (0, react_1.useCallback)((e) => {
         if ((0, TimelineSelection_1.isTimelineSelectionModifierEvent)(e)) {
             e.stopPropagation();
@@ -253,7 +238,8 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     const canHandleSequenceDoubleClick = connectedCompositions.length === 1 || canOpenInEditor;
     const canDeleteFromSource = Boolean(nodePath && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source));
     const deleteDisabled = !previewInteractive || !s.controls || !canDeleteFromSource;
-    const duplicateDisabled = deleteDisabled;
+    const isProgrammaticallyDuplicated = ((_f = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.numberOfSequencesWithThisNodePath) !== null && _f !== void 0 ? _f : 1) > 1;
+    const duplicateDisabled = deleteDisabled || isProgrammaticallyDuplicated;
     const disableInteractivityDisabled = !previewInteractive ||
         !s.showInTimeline ||
         !nodePath ||
@@ -346,15 +332,28 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         return (0, get_sequence_context_menu_items_1.getSequenceContextMenuItems)({
             assetLinkInfo: mediaSrc ? (0, timeline_asset_link_1.getTimelineAssetLinkInfo)(mediaSrc) : null,
             canOpenInEditor,
+            codingAgentInfo,
             deleteDisabled,
             disableInteractivityDisabled,
             duplicateDisabled,
             editorInfo,
-            fileLocation,
             includeSourceEditItems: (0, interactivity_enabled_1.isStudioInteractivityEnabled)(),
+            isProgrammaticallyDuplicated,
+            onConfigureApps: canConfigureApps
+                ? () => {
+                    var _a;
+                    var _b;
+                    setSelectedModal({
+                        type: 'settings',
+                        initialTab: 'apps',
+                        initialPublicLicenseKey: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
+                    });
+                }
+                : null,
             onDeleteSequenceFromSource,
             onDisableSequenceInteractivity,
             onDuplicateSequenceFromSource,
+            openInCodingAgent,
             openInEditor,
             originalLocation,
             selectAsset,
@@ -365,17 +364,20 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         });
     }, [
         canOpenInEditor,
+        canConfigureApps,
+        codingAgentInfo,
         deleteDisabled,
         disableInteractivityDisabled,
         duplicateDisabled,
         editorInfo,
-        fileLocation,
+        isProgrammaticallyDuplicated,
         mediaSrc,
         nodePath,
         onSelect,
         onDeleteSequenceFromSource,
         onDisableSequenceInteractivity,
         onDuplicateSequenceFromSource,
+        openInCodingAgent,
         openInEditor,
         originalLocation,
         previewInteractive,
@@ -386,13 +388,14 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
         selectable,
         sequenceFrameOffset,
         setPropStatuses,
+        setSelectedModal,
         validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
     ]);
     const { frozenFrame } = s;
     const { onPointerDown: onMoveDragPointerDown } = (0, TimelineSequenceRightEdgeDragHandle_1.useTimelineSequenceFromDrag)({
         nodePathInfo,
         windowWidth,
-        timelineDurationInFrames: (_f = video === null || video === void 0 ? void 0 : video.durationInFrames) !== null && _f !== void 0 ? _f : 1,
+        timelineDurationInFrames: (_g = video === null || video === void 0 ? void 0 : video.durationInFrames) !== null && _g !== void 0 ? _g : 1,
     });
     if (!video) {
         throw new TypeError('Expected video config');
@@ -464,7 +467,7 @@ const TimelineSequenceInner = ({ s, connectedCompositions, windowWidth, nodePath
     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, 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: (_g = video.durationInFrames) !== null && _g !== void 0 ? _g : 1 })) : null, showRightEdgeDragHandle && nodePathInfo && validatedLocation ? (jsx_runtime_1.jsx(TimelineSequenceRightEdgeDragHandle_1.TimelineSequenceRightEdgeDragHandle, { nodePathInfo: nodePathInfo, windowWidth: windowWidth, timelineDurationInFrames: (_h = video.durationInFrames) !== null && _h !== void 0 ? _h : 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, 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 || window.remotion_isReadOnlyStudio ? (jsx_runtime_1.jsx(ContextMenu_1.ContextMenu, { getItems: getContextMenuItems, children: sequence })) : (sequence);
 };
 exports.TimelineSequence = react_1.default.memo(TimelineSequenceFn);

package/dist/components/Timeline/TimelineSequenceItem.js

@@ -37,14 +37,15 @@ exports.TimelineSequenceItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
+const are_sequence_node_path_infos_equal_1 = require("../../helpers/are-sequence-node-path-infos-equal");
 const client_id_1 = require("../../helpers/client-id");
 const colors_1 = require("../../helpers/colors");
-const format_file_location_1 = require("../../helpers/format-file-location");
 const get_sequence_double_click_action_1 = require("../../helpers/get-sequence-double-click-action");
 const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const studio_runtime_config_1 = require("../../helpers/studio-runtime-config");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const use_keybinding_1 = require("../../helpers/use-keybinding");
+const use_runtime_values_1 = require("../../helpers/use-runtime-values");
 const modals_1 = require("../../state/modals");
 const timeline_sequence_hover_1 = require("../../state/timeline-sequence-hover");
 const call_api_1 = require("../call-api");
@@ -64,6 +65,7 @@ const get_sequence_context_menu_items_1 = require("./get-sequence-context-menu-i
 const imperative_state_1 = require("./imperative-state");
 const save_sequence_prop_1 = require("./save-sequence-prop");
 const timeline_asset_link_1 = require("./timeline-asset-link");
+const TimelineDuplicateCount_1 = require("./TimelineDuplicateCount");
 const TimelineExpandArrowButton_1 = require("./TimelineExpandArrowButton");
 const TimelineExpandedSection_1 = require("./TimelineExpandedSection");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
@@ -71,7 +73,7 @@ const TimelineMediaInfo_1 = require("./TimelineMediaInfo");
 const TimelineRowChrome_1 = require("./TimelineRowChrome");
 const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineSequenceName_1 = require("./TimelineSequenceName");
-const use_open_sequence_in_editor_1 = require("./use-open-sequence-in-editor");
+const use_open_sequence_in_apps_1 = require("./use-open-sequence-in-apps");
 const use_rename_sequence_1 = require("./use-rename-sequence");
 const use_sequence_freeze_frame_menu_item_1 = require("./use-sequence-freeze-frame-menu-item");
 const use_timeline_expanded_tree_1 = require("./use-timeline-expanded-tree");
@@ -94,18 +96,29 @@ const effectDropHighlight = {
 };
 const SEQUENCE_REORDER_MIME_TYPE = 'application/remotion-sequence-reorder';
 let currentSequenceDrag = null;
-const TimelineSequenceExpandArrow = ({ disabled, isExpanded, nodePathInfo, onToggleExpand, sequence }) => {
-    const { filteredTree } = (0, use_timeline_expanded_tree_1.useTimelineExpandedTree)({
+const TimelineSequenceExpandArrowInner = ({ disabled, isExpanded, nodePathInfo, sequence }) => {
+    const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
+    const hasExpandableContent = (0, use_timeline_expanded_tree_1.useTimelineSequenceHasExpandableContent)({
         sequence,
         nodePathInfo,
-        includeTextContent: false,
-        includeSourceControls: false,
     });
-    if (filteredTree.length === 0) {
+    const onToggleExpand = (0, react_1.useCallback)(() => toggleTrack(nodePathInfo), [nodePathInfo, toggleTrack]);
+    if (!hasExpandableContent) {
         return jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {});
     }
     return (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowButton, { isExpanded: isExpanded, onClick: onToggleExpand, label: "track properties", disabled: disabled }));
 };
+const areTimelineSequenceExpandArrowPropsEqual = (first, second) => {
+    var _a, _b, _c, _d;
+    return (first.disabled === second.disabled &&
+        first.isExpanded === second.isExpanded &&
+        ((_a = first.sequence.controls) === null || _a === void 0 ? void 0 : _a.schema) === ((_b = second.sequence.controls) === null || _b === void 0 ? void 0 : _b.schema) &&
+        ((_c = first.sequence.controls) === null || _c === void 0 ? void 0 : _c.runtimeValues) ===
+            ((_d = second.sequence.controls) === null || _d === void 0 ? void 0 : _d.runtimeValues) &&
+        first.sequence.effects === second.sequence.effects &&
+        (0, are_sequence_node_path_infos_equal_1.areSequenceNodePathInfosEqual)(first.nodePathInfo, second.nodePathInfo));
+};
+const TimelineSequenceExpandArrow = react_1.default.memo(TimelineSequenceExpandArrowInner, areTimelineSequenceExpandArrowPropsEqual);
 const sequenceReorderWrapper = {
     position: 'relative',
 };
@@ -175,17 +188,16 @@ const getDestinationIndex = ({ fromIndex, insertionIndex, }) => {
     return insertionIndex > fromIndex ? insertionIndex - 1 : insertionIndex;
 };
 const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDepth, sequence, nodePathInfo, keyframeDisplayOffset, sequenceFrameOffset, siblingIndex, }) => {
-    var _a, _b, _c;
-    var _d, _e;
-    const nodePath = (_d = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _d !== void 0 ? _d : null;
+    var _a, _b;
+    var _c, _d, _e, _f;
+    const nodePath = (_c = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.sequenceSubscriptionKey) !== null && _c !== void 0 ? _c : null;
     const { hovered, onPointerEnter, onPointerLeave } = (0, timeline_sequence_hover_1.useTimelineSequenceHover)(nodePathInfo);
     const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
     const previewConnected = previewServerState.type === 'connected';
     const previewInteractive = previewConnected && (0, interactivity_enabled_1.isStudioInteractivityEnabled)();
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
-    const { toggleTrack } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksSetterContext);
     const { setPropStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModeSettersContext);
-    const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
     const { isHighestContext } = (0, use_keybinding_1.useKeybinding)();
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
     const selectComposition = (0, InitialCompositionLoader_1.useSelectComposition)();
@@ -196,11 +208,7 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
     const [isRenaming, setIsRenaming] = (0, react_1.useState)(false);
     const [sequenceDropIndicator, setSequenceDropIndicator] = (0, react_1.useState)(null);
     const [sequenceDropRejection, setSequenceDropRejection] = (0, react_1.useState)(null);
-    const { canOpenInEditor, editorInfo, openInEditor, originalLocation } = (0, use_open_sequence_in_editor_1.useOpenSequenceInEditor)(sequence);
-    const fileLocation = (0, react_1.useMemo)(() => (0, format_file_location_1.formatFileLocation)({
-        location: originalLocation,
-        root: window.remotion_cwd,
-    }), [originalLocation]);
+    const { canOpenInEditor, canConfigureApps, codingAgentInfo, editorInfo, openInCodingAgent, openInEditor, originalLocation, } = (0, use_open_sequence_in_apps_1.useOpenSequenceInApps)(sequence);
     const validatedLocation = (0, react_1.useMemo)(() => {
         var _a;
         if (!originalLocation ||
@@ -225,6 +233,7 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
     const timelineDisplayName = sequence.displayName === '' && connectedCompositions.length === 1
         ? connectedCompositions[0].id
         : displayName;
+    const numberOfHiddenDuplicates = Math.max(0, ((_d = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.numberOfSequencesWithThisNodePath) !== null && _d !== void 0 ? _d : 1) - 1);
     const canDeleteFromSource = Boolean(nodePath && (validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source));
     const nodePathKey = (0, react_1.useMemo)(() => nodePath ? remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath) : null, [nodePath]);
     const parentId = (_e = sequence.parent) !== null && _e !== void 0 ? _e : null;
@@ -234,7 +243,8 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
     const canHandleSequenceDrag = previewInteractive;
     const confirm = (0, ConfirmationDialog_1.useConfirmationDialog)();
     const deleteDisabled = (0, react_1.useMemo)(() => !previewInteractive || !sequence.controls || !canDeleteFromSource, [previewInteractive, sequence.controls, canDeleteFromSource]);
-    const duplicateDisabled = deleteDisabled;
+    const isProgrammaticallyDuplicated = ((_f = nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.numberOfSequencesWithThisNodePath) !== null && _f !== void 0 ? _f : 1) > 1;
+    const duplicateDisabled = deleteDisabled || isProgrammaticallyDuplicated;
     const disableInteractivityDisabled = !previewInteractive ||
         !sequence.showInTimeline ||
         !nodePath ||
@@ -470,22 +480,15 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
         ? sequence.src
         : null;
     const isExpanded = previewConnected && nodePathInfo !== null && getIsExpanded(nodePathInfo);
-    const onToggleExpand = (0, react_1.useCallback)(() => {
-        if (nodePathInfo === null) {
-            return;
-        }
-        toggleTrack(nodePathInfo);
-    }, [nodePathInfo, toggleTrack]);
     const codeHiddenStatus = propStatusesForOverride === null || propStatusesForOverride === void 0 ? void 0 : propStatusesForOverride.hidden;
+    const runtimeHidden = (0, use_runtime_values_1.useRuntimeValue)(sequence.controls, 'hidden');
     const isItemHidden = (0, react_1.useMemo)(() => {
-        var _a;
         const propStatus = codeHiddenStatus && codeHiddenStatus.status === 'static'
             ? codeHiddenStatus.codeValue
             : undefined;
-        const runtimeValue = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.currentRuntimeValueDotNotation.hidden;
-        const effective = (propStatus !== null && propStatus !== void 0 ? propStatus : runtimeValue);
+        const effective = (propStatus !== null && propStatus !== void 0 ? propStatus : runtimeHidden);
         return effective !== null && effective !== void 0 ? effective : false;
-    }, [codeHiddenStatus, (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.currentRuntimeValueDotNotation]);
+    }, [codeHiddenStatus, runtimeHidden]);
     const onToggleVisibility = (0, react_1.useCallback)((type) => {
         if (!sequence.controls ||
             !nodePath ||
@@ -593,7 +596,7 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
     const canRenameSelectedSequence = canRenameThisSequence &&
         selected &&
         selectedItems.length === 1 &&
-        ((_b = selectedItems[0]) === null || _b === void 0 ? void 0 : _b.type) === 'sequence';
+        ((_a = selectedItems[0]) === null || _a === void 0 ? void 0 : _a.type) === 'sequence';
     const onCancelRenaming = (0, react_1.useCallback)(() => {
         setIsRenaming(false);
     }, []);
@@ -638,29 +641,23 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
     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 canCrop = (0, use_runtime_values_1.useRuntimeValueSelector)({
+        controls: sequence.controls,
+        selector: (runtimeValues) => {
+            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) => runtimeValues[key]);
+            return (0, selected_outline_types_1.canEditSelectedOutlineCrop)({
+                schema: activeSchema,
+                propStatuses: propStatusesForOverride,
+            });
+        },
+    });
     const onAddEffect = (0, react_1.useCallback)(() => {
         if (!canAddEffect ||
             previewServerState.type !== 'connected' ||
@@ -714,15 +711,28 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
         return (0, get_sequence_context_menu_items_1.getSequenceContextMenuItems)({
             assetLinkInfo: mediaSrc ? (0, timeline_asset_link_1.getTimelineAssetLinkInfo)(mediaSrc) : null,
             canOpenInEditor,
+            codingAgentInfo,
             deleteDisabled,
             disableInteractivityDisabled,
             duplicateDisabled,
             editorInfo,
-            fileLocation,
             includeSourceEditItems: (0, interactivity_enabled_1.isStudioInteractivityEnabled)(),
+            isProgrammaticallyDuplicated,
+            onConfigureApps: canConfigureApps
+                ? () => {
+                    var _a;
+                    var _b;
+                    setSelectedModal({
+                        type: 'settings',
+                        initialTab: 'apps',
+                        initialPublicLicenseKey: (_b = (_a = window.remotion_renderDefaults) === null || _a === void 0 ? void 0 : _a.publicLicenseKey) !== null && _b !== void 0 ? _b : null,
+                    });
+                }
+                : null,
             onDeleteSequenceFromSource,
             onDisableSequenceInteractivity,
             onDuplicateSequenceFromSource,
+            openInCodingAgent,
             openInEditor,
             originalLocation,
             selectAsset,
@@ -751,7 +761,7 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
                                 type: 'item',
                                 id: 'crop',
                                 keyHint: null,
-                                label: 'Crop',
+                                label: isProgrammaticallyDuplicated ? 'Crop all' : 'Crop',
                                 leftItem: null,
                                 disabled: false,
                                 onClick: onCrop,
@@ -786,13 +796,15 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
     }, [
         canAddEffect,
         canCrop,
+        canConfigureApps,
         canOpenInEditor,
         canRenameThisSequence,
+        codingAgentInfo,
         deleteDisabled,
         disableInteractivityDisabled,
         duplicateDisabled,
         editorInfo,
-        fileLocation,
+        isProgrammaticallyDuplicated,
         mediaSrc,
         nodePath,
         nodePathInfo === null || nodePathInfo === void 0 ? void 0 : nodePathInfo.supportsEffects,
@@ -803,6 +815,7 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
         onDuplicateSequenceFromSource,
         onRenameSequence,
         onSelect,
+        openInCodingAgent,
         openInEditor,
         originalLocation,
         previewInteractive,
@@ -812,13 +825,14 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
         selectable,
         sequence,
         sequenceFrameOffset,
+        setSelectedModal,
         setPropStatuses,
         validatedLocation === null || validatedLocation === void 0 ? void 0 : validatedLocation.source,
     ]);
     const canDropEffect = previewInteractive &&
         nodePath !== null &&
         validatedLocation !== null &&
-        ((_c = sequence.controls) === null || _c === void 0 ? void 0 : _c.supportsEffects) === true;
+        ((_b = sequence.controls) === null || _b === void 0 ? void 0 : _b.supportsEffects) === true;
     const sequenceReorderLineStyle = (0, react_1.useMemo)(() => {
         if (sequenceDropIndicator !== 'before') {
             return null;
@@ -873,9 +887,11 @@ const TimelineSequenceItemInner = ({ children, connectedCompositions, nestedDept
             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, hovered: hovered, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+    const trackRow = (jsx_runtime_1.jsx(TimelineRowChrome_1.TimelineRowChrome, { depth: nestedDepth, eye: canToggleVisibility ? (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility })) : (jsx_runtime_1.jsx(TimelineLayerEye_1.TimelineLayerEyeSpacer, {})), arrow: hasExpandableContent && nodePathInfo !== null ? (jsx_runtime_1.jsx(TimelineSequenceExpandArrow, { disabled: !previewInteractive, isExpanded: isExpanded, nodePathInfo: nodePathInfo, sequence: sequence })) : (jsx_runtime_1.jsx(TimelineExpandArrowButton_1.TimelineExpandArrowSpacer, {})), style: rowStyle, selected: selected, selectable: selectable, selectionItem: selectionItem, onSelect: onSelect, showSelectedBackground: true, containsSelection: containsSelection, hovered: hovered, outerHeight: outerHeight, onDragLeave: canDropEffect ? onEffectDragLeave : undefined, onDragOver: canDropEffect ? onEffectDragOver : undefined, onDrop: canDropEffect ? onEffectDrop : undefined, onDoubleClick: canHandleSequenceDoubleClick ? onSequenceDoubleClick : undefined, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsxs("div", { style: labelContainerStyle, children: [connectedCompositions.length > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(CompositionOrStillIcon_1.CompositionOrStillIcon, { color: (0, TimelineSelection_1.getTimelineColor)(false, false), composition: connectedCompositions[0], style: connectedCompositionIconStyle }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 })
-                    ] })) : null, jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { displayName: timelineDisplayName, fallbackDisplayName: fallbackDisplayName, selected: selected, containsSelection: containsSelection, editing: isRenaming, onCancelEditing: onCancelRenaming, onSaveName: onSaveName }), mediaSrc ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    ] })) : null, jsx_runtime_1.jsx(TimelineSequenceName_1.TimelineSequenceName, { displayName: timelineDisplayName, fallbackDisplayName: fallbackDisplayName, selected: selected, containsSelection: containsSelection, editing: isRenaming, onCancelEditing: onCancelRenaming, onSaveName: onSaveName }), numberOfHiddenDuplicates > 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                        jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(TimelineDuplicateCount_1.TimelineDuplicateCount, { count: numberOfHiddenDuplicates })
+                    ] })) : null, mediaSrc ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                         jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }),
                         " ",
                         jsx_runtime_1.jsx(TimelineMediaInfo_1.TimelineMediaInfo, { src: mediaSrc })

package/dist/components/Timeline/TimelineSequenceRightEdgeDragHandle.js

@@ -195,7 +195,7 @@ const getTrimBeforePlaybackRate = (sequence) => {
         !playbackRateComponentIdentities.has(componentIdentity)) {
         return 1;
     }
-    const runtimePlaybackRate = (_b = sequence.controls) === null || _b === void 0 ? void 0 : _b.currentRuntimeValueDotNotation.playbackRate;
+    const runtimePlaybackRate = (_b = sequence.controls) === null || _b === void 0 ? void 0 : _b.runtimeValues.getSnapshot().playbackRate;
     return typeof runtimePlaybackRate === 'number' ? runtimePlaybackRate : 1;
 };
 const isFromDraggableSequence = (sequence) => {

package/dist/components/Timeline/TimelineTrack.js

@@ -44,6 +44,7 @@ const TimelineExpandedTrackKeyframes_1 = require("./TimelineExpandedTrackKeyfram
 const TimelineSelection_1 = require("./TimelineSelection");
 const TimelineSequence_1 = require("./TimelineSequence");
 const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
+const emptyConnectedCompositions = [];
 const TimelineTrackUnmemoized = ({ track }) => {
     var _a;
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
@@ -61,7 +62,7 @@ const TimelineTrackUnmemoized = ({ track }) => {
         previewServerConnected &&
         getIsExpanded(track.nodePathInfo);
     return (jsx_runtime_1.jsxs("div", { onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: [
-            jsx_runtime_1.jsxs("div", { style: layerStyle, children: [rowHighlightBackground && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth, rowHighlightBackground) })) : null, jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence, connectedCompositions: (_a = track.connectedCompositions) !== null && _a !== void 0 ? _a : [], nodePathInfo: track.nodePathInfo, sequenceFrameOffset: track.sequenceFrameOffset })
+            jsx_runtime_1.jsxs("div", { style: layerStyle, children: [rowHighlightBackground && timelineWidth !== null ? (jsx_runtime_1.jsx("div", { style: (0, TimelineSelection_1.getTimelineSelectedTrackHighlightStyle)(timelineWidth, rowHighlightBackground) })) : null, jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence, connectedCompositions: (_a = track.connectedCompositions) !== null && _a !== void 0 ? _a : emptyConnectedCompositions, nodePathInfo: track.nodePathInfo, sequenceFrameOffset: track.sequenceFrameOffset })
                 ] }), showExpandedKeyframes && track.nodePathInfo ? (jsx_runtime_1.jsx(TimelineExpandedTrackKeyframes_1.TimelineExpandedTrackKeyframes, { sequence: track.sequence, nodePathInfo: track.nodePathInfo, keyframeDisplayOffset: track.keyframeDisplayOffset })) : null] }));
 };
 exports.TimelineTrack = react_1.default.memo(TimelineTrackUnmemoized);

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

@@ -1,19 +1,22 @@
-import type { EditorPickerId, GetDefaultEditorInfoResponse } from '@remotion/studio-shared';
+import type { EditorPickerId, GetDefaultCodingAgentInfoResponse, GetDefaultEditorInfoResponse } from '@remotion/studio-shared';
 import type { ResolvedStackLocation, TSequence } from 'remotion';
 import type { ComboboxValue } from '../NewComposition/ComboBox';
 import type { TimelineAssetLinkInfo } from './timeline-asset-link';
-export declare const getSequenceContextMenuItems: ({ assetLinkInfo, canOpenInEditor, deleteDisabled, disableInteractivityDisabled, duplicateDisabled, fileLocation, includeSourceEditItems, editorInfo, onDeleteSequenceFromSource, onDisableSequenceInteractivity, onDuplicateSequenceFromSource, openInEditor, originalLocation, selectAsset, sequence, sourceActions, }: {
+export declare const getSequenceContextMenuItems: ({ assetLinkInfo, canOpenInEditor, deleteDisabled, disableInteractivityDisabled, duplicateDisabled, isProgrammaticallyDuplicated, includeSourceEditItems, codingAgentInfo, editorInfo, onConfigureApps, onDeleteSequenceFromSource, onDisableSequenceInteractivity, onDuplicateSequenceFromSource, openInCodingAgent, openInEditor, originalLocation, selectAsset, sequence, sourceActions, }: {
     readonly assetLinkInfo: TimelineAssetLinkInfo | null;
     readonly canOpenInEditor: boolean;
     readonly deleteDisabled: boolean;
     readonly disableInteractivityDisabled: boolean;
     readonly duplicateDisabled: boolean;
-    readonly fileLocation: string | null;
+    readonly isProgrammaticallyDuplicated: boolean;
     readonly includeSourceEditItems: boolean;
+    readonly codingAgentInfo: GetDefaultCodingAgentInfoResponse | null;
     readonly editorInfo: GetDefaultEditorInfoResponse | null;
+    readonly onConfigureApps: (() => void) | null;
     readonly onDeleteSequenceFromSource: () => void;
     readonly onDisableSequenceInteractivity: () => void;
     readonly onDuplicateSequenceFromSource: () => void;
+    readonly openInCodingAgent: (codingAgentId: "claude-code" | "codex" | "copilot" | "cursor", codingAgentName: string, contextForAgents: string | null) => void;
     readonly openInEditor: (editorId: EditorPickerId | null) => void;
     readonly originalLocation: ResolvedStackLocation | null;
     readonly selectAsset: (src: string) => void;