@remotion/studio 4.0.506 → 4.0.508

package/dist/components/Timeline/TimelineRotationField.js

@@ -7,16 +7,35 @@ const InputDragger_1 = require("../NewComposition/InputDragger");
 const timeline_field_utils_1 = require("./timeline-field-utils");
 const timeline_rotation_field_utils_1 = require("./timeline-rotation-field-utils");
 const timeline_rotation_utils_1 = require("./timeline-rotation-utils");
+const Transform3DModeContext_1 = require("./Transform3DModeContext");
+const containerStyle = {
+    alignItems: 'center',
+    display: 'flex',
+    gap: 4,
+};
+const compactDraggerStyle = {
+    paddingBottom: 2,
+    paddingLeft: 2,
+    paddingRight: 2,
+    paddingTop: 2,
+};
+const ROTATION_LABELS = ['X', 'Y', 'Z'];
 const TimelineRotationField = ({ field, effectiveValue, propStatus, onSave, onDragValueChange, onDragEnd, }) => {
     var _a, _b;
     const [dragValue, setDragValue] = (0, react_1.useState)(null);
+    const [dragRotation, setDragRotation] = (0, react_1.useState)(null);
+    const transform3DMode = (0, react_1.useContext)(Transform3DModeContext_1.Transform3DModeContext);
     const isCssRotation = field.fieldSchema.type === 'rotation-css';
-    const degrees = (0, react_1.useMemo)(() => {
-        if (isCssRotation) {
-            return (0, timeline_rotation_utils_1.parseCssRotationToDegrees)(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0deg'));
-        }
-        return typeof effectiveValue === 'number' ? effectiveValue : 0;
-    }, [effectiveValue, isCssRotation]);
+    const cssRotation = (0, react_1.useMemo)(() => isCssRotation
+        ? (0, timeline_rotation_utils_1.parseCssRotationToEuler)(String(effectiveValue !== null && effectiveValue !== void 0 ? effectiveValue : '0deg'))
+        : [0, 0, 0], [effectiveValue, isCssRotation]);
+    const show3D = isCssRotation &&
+        (transform3DMode || cssRotation[0] !== 0 || cssRotation[1] !== 0);
+    const degrees = isCssRotation
+        ? cssRotation[2]
+        : typeof effectiveValue === 'number'
+            ? effectiveValue
+            : 0;
     const configuredStep = field.fieldSchema.type === 'rotation-css' ||
         field.fieldSchema.type === 'rotation-degrees'
         ? field.fieldSchema.step
@@ -32,11 +51,13 @@ const TimelineRotationField = ({ field, effectiveValue, propStatus, onSave, onDr
         defaultDecimalPlaces: 1,
         step: configuredStep,
     }), [configuredStep]);
-    const serializeValue = (0, react_1.useCallback)((value) => {
-        return isCssRotation
-            ? (0, timeline_rotation_utils_1.serializeCssRotation)(value, decimalPlaces)
-            : (0, timeline_field_utils_1.normalizeTimelineNumber)(value);
-    }, [decimalPlaces, isCssRotation]);
+    const serializeValue = (0, react_1.useCallback)((value) => isCssRotation
+        ? (0, timeline_rotation_utils_1.serializeCssRotation)(value, decimalPlaces)
+        : (0, timeline_field_utils_1.normalizeTimelineNumber)(value), [decimalPlaces, isCssRotation]);
+    const serializeRotation = (0, react_1.useCallback)((rotation) => (0, timeline_rotation_utils_1.serializeCssRotationFromEuler)({
+        rotation,
+        decimalPlaces: Math.max(6, decimalPlaces),
+    }), [decimalPlaces]);
     const onValueChange = (0, react_1.useCallback)((newVal) => {
         setDragValue(newVal);
         onDragValueChange(serializeValue(newVal));
@@ -73,6 +94,57 @@ const TimelineRotationField = ({ field, effectiveValue, propStatus, onSave, onDr
             value: v,
         });
     }, [decimalPlaces, field.fieldSchema]);
-    return (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragValue !== null && dragValue !== void 0 ? dragValue : degrees, style: timeline_field_utils_1.draggerStyle, status: "ok", small: true, onValueChange: onValueChange, onValueChangeEnd: onValueChangeEnd, onTextChange: onTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false }));
+    const onRotationValueChange = (0, react_1.useCallback)((rotationIndex, newValue) => {
+        const nextRotation = [...(dragRotation !== null && dragRotation !== void 0 ? dragRotation : cssRotation)];
+        nextRotation[rotationIndex] = newValue;
+        setDragRotation(nextRotation);
+        onDragValueChange(serializeRotation(nextRotation));
+    }, [cssRotation, dragRotation, onDragValueChange, serializeRotation]);
+    const onRotationValueChangeEnd = (0, react_1.useCallback)((rotationIndex, newValue) => {
+        const nextRotation = [...(dragRotation !== null && dragRotation !== void 0 ? dragRotation : cssRotation)];
+        nextRotation[rotationIndex] = newValue;
+        const newRotation = serializeRotation(nextRotation);
+        const clearDragState = () => {
+            setDragRotation(null);
+            onDragEnd();
+        };
+        if (newRotation !== propStatus.codeValue) {
+            onSave(newRotation).finally(clearDragState);
+        }
+        else {
+            clearDragState();
+        }
+    }, [
+        cssRotation,
+        dragRotation,
+        onDragEnd,
+        onSave,
+        propStatus.codeValue,
+        serializeRotation,
+    ]);
+    const onRotationTextChange = (0, react_1.useCallback)((rotationIndex, newValue) => {
+        const parsed = Number(newValue);
+        if (Number.isNaN(parsed)) {
+            return;
+        }
+        const nextRotation = [...(dragRotation !== null && dragRotation !== void 0 ? dragRotation : cssRotation)];
+        nextRotation[rotationIndex] = parsed;
+        const newRotation = serializeRotation(nextRotation);
+        if (newRotation !== propStatus.codeValue) {
+            setDragRotation(nextRotation);
+            onSave(newRotation).finally(() => setDragRotation(null));
+        }
+    }, [
+        cssRotation,
+        dragRotation,
+        onSave,
+        propStatus.codeValue,
+        serializeRotation,
+    ]);
+    const angleDragger = (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragValue !== null && dragValue !== void 0 ? dragValue : degrees, style: timeline_field_utils_1.draggerStyle, status: "ok", small: true, onValueChange: onValueChange, onValueChangeEnd: onValueChangeEnd, onTextChange: onTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false, "aria-label": isCssRotation ? 'Rotation Z' : 'Rotation angle' }));
+    if (show3D) {
+        return (jsx_runtime_1.jsx("span", { style: containerStyle, children: ROTATION_LABELS.map((rotationLabel, rotationIndex) => (jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: (dragRotation !== null && dragRotation !== void 0 ? dragRotation : cssRotation)[rotationIndex], buttonStyle: compactDraggerStyle, status: "ok", small: true, onValueChange: (newValue) => onRotationValueChange(rotationIndex, newValue), onValueChangeEnd: (newValue) => onRotationValueChangeEnd(rotationIndex, newValue), onTextChange: (newValue) => onRotationTextChange(rotationIndex, newValue), min: -Infinity, max: Infinity, step: step, formatter: formatter, rightAlign: false, "aria-label": `Rotation ${rotationLabel}` }, rotationLabel))) }));
+    }
+    return angleDragger;
 };
 exports.TimelineRotationField = TimelineRotationField;

package/dist/components/Timeline/TimelineScaleField.js

@@ -10,11 +10,16 @@ const InputDragger_1 = require("../NewComposition/InputDragger");
 const timeline_field_display_utils_1 = require("./timeline-field-display-utils");
 const timeline_field_utils_1 = require("./timeline-field-utils");
 const TimelineLayerEye_1 = require("./TimelineLayerEye");
+const Transform3DModeContext_1 = require("./Transform3DModeContext");
 const leftDraggerStyle = {
+    paddingBottom: 2,
     paddingLeft: 0,
+    paddingTop: 2,
 };
 const rightDraggerStyle = {
+    paddingBottom: 2,
     paddingRight: 0,
+    paddingTop: 2,
 };
 const containerStyle = {
     alignItems: 'center',
@@ -82,9 +87,12 @@ const TimelineScaleField = ({ field, propStatus, effectiveValue, onSave, onDragV
     var _a, _b;
     const [dragX, setDragX] = (0, react_1.useState)(null);
     const [dragY, setDragY] = (0, react_1.useState)(null);
+    const [dragZ, setDragZ] = (0, react_1.useState)(null);
     const dragStartRef = (0, react_1.useRef)(null);
     const { getScaleLockState, setScaleLockState } = (0, react_1.useContext)(scale_lock_1.ScaleLockContext);
+    const transform3DMode = (0, react_1.useContext)(Transform3DModeContext_1.Transform3DModeContext);
     const [codeX, codeY, codeZ] = (0, react_1.useMemo)(() => no_react_1.NoReactInternals.parseScaleValue(effectiveValue), [effectiveValue]);
+    const show3D = transform3DMode || codeZ !== 1;
     const defaultLinked = codeX === codeY;
     const linked = getScaleLockState({
         nodePath: scaleLockNodePath,
@@ -111,9 +119,9 @@ const TimelineScaleField = ({ field, propStatus, effectiveValue, onSave, onDragV
         }
         return dragStartRef.current;
     }, [codeX, codeY, dragX, dragY]);
-    const serialize = (0, react_1.useCallback)((x, y) => {
-        return no_react_1.NoReactInternals.serializeScaleValue([x, y, codeZ]);
-    }, [codeZ]);
+    const serialize = (0, react_1.useCallback)((x, y, z = dragZ !== null && dragZ !== void 0 ? dragZ : codeZ) => {
+        return no_react_1.NoReactInternals.serializeScaleValue([x, y, z]);
+    }, [codeZ, dragZ]);
     const onXChange = (0, react_1.useCallback)((newVal) => {
         if (linked) {
             const [baseX, baseY] = getDragStart();
@@ -161,6 +169,7 @@ const TimelineScaleField = ({ field, propStatus, effectiveValue, onSave, onDragV
             dragStartRef.current = null;
             setDragX(null);
             setDragY(null);
+            setDragZ(null);
             onDragEnd();
         };
         if (!valuesEqual(newScale, propStatus.codeValue)) {
@@ -204,6 +213,7 @@ const TimelineScaleField = ({ field, propStatus, effectiveValue, onSave, onDragV
                 dragStartRef.current = null;
                 setDragX(null);
                 setDragY(null);
+                setDragZ(null);
             });
         }
     }, [codeX, codeY, dragY, linked, max, min, onSave, propStatus, serialize]);
@@ -254,6 +264,7 @@ const TimelineScaleField = ({ field, propStatus, effectiveValue, onSave, onDragV
             dragStartRef.current = null;
             setDragX(null);
             setDragY(null);
+            setDragZ(null);
             onDragEnd();
         };
         if (!valuesEqual(newScale, propStatus.codeValue)) {
@@ -297,6 +308,7 @@ const TimelineScaleField = ({ field, propStatus, effectiveValue, onSave, onDragV
                 dragStartRef.current = null;
                 setDragX(null);
                 setDragY(null);
+                setDragZ(null);
             });
         }
     }, [codeX, codeY, dragX, linked, max, min, onSave, propStatus, serialize]);
@@ -307,8 +319,50 @@ const TimelineScaleField = ({ field, propStatus, effectiveValue, onSave, onDragV
             linked: !linked,
         });
     }, [field.key, linked, scaleLockNodePath, setScaleLockState]);
+    const onZChange = (0, react_1.useCallback)((newVal) => {
+        setDragZ(newVal);
+        onDragValueChange(serialize(dragX !== null && dragX !== void 0 ? dragX : codeX, dragY !== null && dragY !== void 0 ? dragY : codeY, newVal));
+    }, [codeX, codeY, dragX, dragY, onDragValueChange, serialize]);
+    const onZChangeEnd = (0, react_1.useCallback)((newVal) => {
+        const newScale = serialize(dragX !== null && dragX !== void 0 ? dragX : codeX, dragY !== null && dragY !== void 0 ? dragY : codeY, newVal);
+        const clearDragState = () => {
+            dragStartRef.current = null;
+            setDragX(null);
+            setDragY(null);
+            setDragZ(null);
+            onDragEnd();
+        };
+        if (!valuesEqual(newScale, propStatus.codeValue)) {
+            onSave(newScale).finally(clearDragState);
+        }
+        else {
+            clearDragState();
+        }
+    }, [
+        codeX,
+        codeY,
+        dragX,
+        dragY,
+        onDragEnd,
+        onSave,
+        propStatus.codeValue,
+        serialize,
+    ]);
+    const onZTextChange = (0, react_1.useCallback)((newVal) => {
+        const parsed = Number(newVal);
+        if (Number.isNaN(parsed)) {
+            return;
+        }
+        const newScale = serialize(dragX !== null && dragX !== void 0 ? dragX : codeX, dragY !== null && dragY !== void 0 ? dragY : codeY, parsed);
+        if (!valuesEqual(newScale, propStatus.codeValue)) {
+            setDragZ(parsed);
+            onSave(newScale).finally(() => setDragZ(null));
+        }
+    }, [codeX, codeY, dragX, dragY, onSave, propStatus.codeValue, serialize]);
     return (jsx_runtime_1.jsxs("span", { style: containerStyle, children: [
-            jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : codeX, style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false, allowStepMismatch: true }), jsx_runtime_1.jsx("div", { style: gapStyle }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : codeY, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false, allowStepMismatch: true }), jsx_runtime_1.jsx(LinkToggle, { linked: linked, onToggle: onToggleLink })
+            jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragX !== null && dragX !== void 0 ? dragX : codeX, buttonStyle: leftDraggerStyle, style: leftDraggerStyle, status: "ok", small: true, onValueChange: onXChange, onValueChangeEnd: onXChangeEnd, onTextChange: onXTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false, allowStepMismatch: true, "aria-label": "Scale X" }), jsx_runtime_1.jsx("div", { style: gapStyle }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragY !== null && dragY !== void 0 ? dragY : codeY, buttonStyle: rightDraggerStyle, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onYChange, onValueChangeEnd: onYChangeEnd, onTextChange: onYTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false, allowStepMismatch: true, "aria-label": "Scale Y" }), show3D ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsx("div", { style: gapStyle }), jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: dragZ !== null && dragZ !== void 0 ? dragZ : codeZ, buttonStyle: rightDraggerStyle, style: rightDraggerStyle, status: "ok", small: true, onValueChange: onZChange, onValueChangeEnd: onZChangeEnd, onTextChange: onZTextChange, min: min, max: max, step: step, formatter: formatter, rightAlign: false, allowStepMismatch: true, "aria-label": "Scale Z" })
+                ] })) : null, jsx_runtime_1.jsx(LinkToggle, { linked: linked, onToggle: onToggleLink })
         ] }));
 };
 exports.TimelineScaleField = TimelineScaleField;

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

@@ -161,6 +161,10 @@ export declare const getTimelineSequenceSelectionKey: (nodePathInfo: SequenceNod
 export declare const TimelineSelectAllKeybindings: React.FC<{
     readonly timeline: readonly TimelineTrackData[];
 }>;
+export declare const getTimelineSequenceSelectionForEscape: (selectedItems: readonly TimelineSelection[]) => {
+    readonly type: "sequence";
+    readonly nodePathInfo: SequenceNodePathInfo;
+} | null;
 export declare const TimelineSelectableItemsProvider: React.FC<{
     readonly children: React.ReactNode;
     readonly timeline: readonly TimelineTrackData[];

package/dist/components/Timeline/TimelineSelection.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTimelineRowHighlightBackground = exports.useTimelineRowContainsSelection = exports.useTimelineGuideSelection = exports.useTimelineEasingSelection = exports.useTimelineKeyframeSelection = exports.useTimelineRowSelection = exports.useTimelineFocusableItem = exports.useTimelineMarqueeSelectableItem = exports.useTimelineMarqueeSelection = exports.useCurrentTimelineSelectionStateAsRef = exports.TIMELINE_SCRUBBER_ATTR = exports.TIMELINE_MARQUEE_ITEM_ATTR = exports.useTimelineSelection = exports.TimelineSelectionProvider = exports.TimelineSelectableItemsProvider = exports.TimelineSelectAllKeybindings = exports.getTimelineSequenceSelectionKey = exports.getSelectableTimelineItems = exports.getSelectableTimelineSequenceSelections = exports.getTimelineSelectionKey = exports.getTimelineSelectionFromNodePathInfo = exports.TimelineSelectionOrderProvider = exports.extendTimelineMarqueeSelection = exports.getTimelineMarqueeSelection = exports.timelineMarqueeRectsIntersect = exports.getClampedTimelineMarqueePoint = exports.getNormalizedTimelineMarqueeRect = exports.getAvailableTimelineSelectionState = exports.getTimelineSelectionAfterInteraction = exports.EMPTY_TIMELINE_SELECTION_STATE = exports.shouldSelectTimelineRowOnPointerDown = exports.isTimelineSelectionModifierEvent = exports.TIMELINE_TICKS_BACKGROUND = exports.TIMELINE_BACKGROUND = exports.getTimelineRowHighlightBackground = exports.getTimelineSelectedTrackHighlightStyle = exports.getTimelineColor = exports.getTimelineSelectedLabelStyle = exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = exports.TIMELINE_SELECTED_LABEL_TEXT = exports.TIMELINE_SELECTED_LABEL_BACKGROUND = exports.TIMELINE_HOVER_BACKGROUND = exports.TIMELINE_SELECTED_BACKGROUND = void 0;
+exports.useTimelineRowHighlightBackground = exports.useTimelineRowContainsSelection = exports.useTimelineGuideSelection = exports.useTimelineEasingSelection = exports.useTimelineKeyframeSelection = exports.useTimelineRowSelection = exports.useTimelineFocusableItem = exports.useTimelineMarqueeSelectableItem = exports.useTimelineMarqueeSelection = exports.useCurrentTimelineSelectionStateAsRef = exports.TIMELINE_SCRUBBER_ATTR = exports.TIMELINE_MARQUEE_ITEM_ATTR = exports.useTimelineSelection = exports.TimelineSelectionProvider = exports.TimelineSelectableItemsProvider = exports.getTimelineSequenceSelectionForEscape = exports.TimelineSelectAllKeybindings = exports.getTimelineSequenceSelectionKey = exports.getSelectableTimelineItems = exports.getSelectableTimelineSequenceSelections = exports.getTimelineSelectionKey = exports.getTimelineSelectionFromNodePathInfo = exports.TimelineSelectionOrderProvider = exports.extendTimelineMarqueeSelection = exports.getTimelineMarqueeSelection = exports.timelineMarqueeRectsIntersect = exports.getClampedTimelineMarqueePoint = exports.getNormalizedTimelineMarqueeRect = exports.getAvailableTimelineSelectionState = exports.getTimelineSelectionAfterInteraction = exports.EMPTY_TIMELINE_SELECTION_STATE = exports.shouldSelectTimelineRowOnPointerDown = exports.isTimelineSelectionModifierEvent = exports.TIMELINE_TICKS_BACKGROUND = exports.TIMELINE_BACKGROUND = exports.getTimelineRowHighlightBackground = exports.getTimelineSelectedTrackHighlightStyle = exports.getTimelineColor = exports.getTimelineSelectedLabelStyle = exports.TIMELINE_SELECTED_LABEL_HORIZONTAL_PADDING = exports.TIMELINE_SELECTED_LABEL_TEXT = exports.TIMELINE_SELECTED_LABEL_BACKGROUND = exports.TIMELINE_HOVER_BACKGROUND = exports.TIMELINE_SELECTED_BACKGROUND = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
@@ -18,6 +18,7 @@ const options_sidebar_tabs_1 = require("../options-sidebar-tabs");
 const get_node_keyframes_1 = require("./get-node-keyframes");
 const get_timeline_easing_segments_1 = require("./get-timeline-easing-segments");
 const imperative_state_1 = require("./imperative-state");
+const parse_keyframe_field_from_node_path_1 = require("./parse-keyframe-field-from-node-path");
 const timeline_expanded_filter_1 = require("./timeline-expanded-filter");
 const timeline_refs_1 = require("./timeline-refs");
 const TimelineClipboardKeybindings_1 = require("./TimelineClipboardKeybindings");
@@ -543,6 +544,42 @@ const TimelineSelectAllKeybindings = ({ timeline }) => {
     return null;
 };
 exports.TimelineSelectAllKeybindings = TimelineSelectAllKeybindings;
+const fieldsSelectingSequenceOnEscape = new Set([
+    'cropLeft',
+    'cropRight',
+    'cropTop',
+    'cropBottom',
+    'style.rotate',
+]);
+const getTimelineSequenceSelectionForEscape = (selectedItems) => {
+    if (selectedItems.length !== 1) {
+        return null;
+    }
+    const [selectedItem] = selectedItems;
+    let fieldKey = null;
+    if (selectedItem.type === 'sequence-prop') {
+        fieldKey = selectedItem.key;
+    }
+    else if (selectedItem.type === 'keyframe' ||
+        selectedItem.type === 'easing') {
+        const field = (0, parse_keyframe_field_from_node_path_1.parseKeyframeFieldFromNodePath)(selectedItem.nodePathInfo.auxiliaryKeys);
+        fieldKey = (field === null || field === void 0 ? void 0 : field.type) === 'sequence' ? field.fieldKey : null;
+    }
+    else {
+        return null;
+    }
+    if (!fieldsSelectingSequenceOnEscape.has(fieldKey !== null && fieldKey !== void 0 ? fieldKey : '')) {
+        return null;
+    }
+    return {
+        type: 'sequence',
+        nodePathInfo: {
+            ...selectedItem.nodePathInfo,
+            auxiliaryKeys: [],
+        },
+    };
+};
+exports.getTimelineSequenceSelectionForEscape = getTimelineSequenceSelectionForEscape;
 const TimelineEscapeKeybindings = () => {
     const keybindings = (0, use_keybinding_1.useKeybinding)();
     const currentSelection = (0, exports.useCurrentTimelineSelectionStateAsRef)();
@@ -551,10 +588,16 @@ const TimelineEscapeKeybindings = () => {
             event: 'keydown',
             key: 'Escape',
             callback: (event) => {
-                const { selectedItems, clearSelection } = currentSelection.current;
+                const { selectedItems, clearSelection, selectItems } = currentSelection.current;
                 if (selectedItems.length === 0) {
                     return;
                 }
+                const sequenceSelection = (0, exports.getTimelineSequenceSelectionForEscape)(selectedItems);
+                if (sequenceSelection) {
+                    selectItems([sequenceSelection]);
+                    event.preventDefault();
+                    return;
+                }
                 clearSelection();
                 event.preventDefault();
             },

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);