@remotion/studio 4.0.506 → 4.0.507

package/dist/components/Timeline/EasingEditorModal.js

@@ -75,8 +75,9 @@ const SPRING_FALLBACKS = {
     stiffness: DEFAULT_SPRING_EASING.stiffness,
 };
 const inlineContainer = {
-    width: '100%',
     minWidth: 0,
+    paddingBottom: 12,
+    width: '100%',
 };
 const segmentedControlWrapper = {
     display: 'flex',
@@ -85,27 +86,27 @@ const segmentedControlWrapper = {
     padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
 };
 const presetButtonsWrapper = {
-    display: 'flex',
-    flexWrap: 'wrap',
-    gap: 6,
-    justifyContent: 'flex-start',
-    marginBottom: 8,
-    padding: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px`,
+    border: `1px solid ${colors_1.BLACK_ALPHA_60}`,
+    borderRadius: 4,
+    boxSizing: 'border-box',
+    display: 'grid',
+    gridTemplateColumns: 'repeat(4, minmax(0, 1fr))',
+    margin: `0 ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px 8px`,
+    overflow: 'hidden',
 };
 const inspectorPresetButtonsWrapper = {
     ...presetButtonsWrapper,
-    padding: `8px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px 0`,
+    margin: `8px ${InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING}px 0`,
 };
 const presetButtonBase = {
     alignItems: 'center',
-    backgroundColor: colors_1.INPUT_BACKGROUND,
-    border: `1px solid ${colors_1.WHITE_ALPHA_05}`,
-    borderRadius: 4,
+    backgroundColor: colors_1.TRANSPARENT,
+    border: 'none',
     display: 'inline-flex',
     height: 34,
     justifyContent: 'center',
     padding: 0,
-    width: 52,
+    width: '100%',
 };
 const presetPreviewSvgStyle = {
     display: 'block',
@@ -172,7 +173,10 @@ const easingToSpring = (easing) => {
         : DEFAULT_SPRING_EASING;
 };
 const easingToMode = (easing) => {
-    return isSpringEasing(easing) ? 'spring' : 'bezier';
+    if (isSpringEasing(easing)) {
+        return 'spring';
+    }
+    return easing.type === 'step1' ? 'hold' : 'bezier';
 };
 const roundToDecimalPlaces = (value, decimalPlaces) => {
     const factor = 10 ** decimalPlaces;
@@ -243,6 +247,7 @@ const areEasingsEqual = (first, second) => {
     }
     switch (first.type) {
         case 'linear':
+        case 'step1':
             return true;
         case 'spring':
             return (second.type === 'spring' &&
@@ -322,6 +327,8 @@ const getEasingFunction = (easing) => {
     switch (easing.type) {
         case 'linear':
             return remotion_1.Easing.linear;
+        case 'step1':
+            return remotion_1.Easing.step1;
         case 'bezier':
             return remotion_1.Easing.bezier(easing.x1, easing.y1, easing.x2, easing.y2);
         case 'spring':
@@ -338,6 +345,13 @@ const getEasingFunction = (easing) => {
     }
 };
 const getPresetPreviewPath = (easing) => {
+    if (easing.type === 'step1') {
+        const startX = presetPreviewXToSvg(0);
+        const endX = presetPreviewXToSvg(1);
+        const startY = presetPreviewYToSvg(0);
+        const endY = presetPreviewYToSvg(1);
+        return `M ${startX} ${startY} L ${endX} ${startY} L ${endX} ${endY}`;
+    }
     const easingFunction = getEasingFunction(easing);
     const samples = 36;
     const points = [];
@@ -386,18 +400,24 @@ const EasingGraphScaffold = ({ labels }) => {
 };
 const EasingPresetButton = ({ currentEasing, disabled, onClick, preset }) => {
     const selected = areEasingsEqual(currentEasing, preset.easing);
+    const [hovered, setHovered] = (0, react_1.useState)(false);
     const path = (0, react_1.useMemo)(() => getPresetPreviewPath(preset.easing), [preset.easing]);
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        setHovered(true);
+    }, []);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHovered(false);
+    }, []);
     const style = (0, react_1.useMemo)(() => ({
         ...presetButtonBase,
-        backgroundColor: selected ? colors_1.EASING_SELECTED_BACKGROUND : colors_1.INPUT_BACKGROUND,
-        borderColor: selected ? colors_1.BLUE : colors_1.WHITE_ALPHA_05,
-        cursor: disabled ? 'not-allowed' : 'pointer',
+        backgroundColor: selected ? colors_1.INPUT_BACKGROUND : colors_1.TRANSPARENT,
+        cursor: disabled ? 'not-allowed' : undefined,
         opacity: disabled ? 0.45 : 1,
     }), [disabled, selected]);
     const handleClick = (0, react_1.useCallback)(() => {
         onClick(preset.easing);
     }, [onClick, preset.easing]);
-    return (jsx_runtime_1.jsx("button", { type: "button", style: style, title: preset.label, "aria-label": `Apply ${preset.label} easing`, disabled: disabled, onClick: handleClick, children: jsx_runtime_1.jsx("svg", { width: PRESET_PREVIEW_WIDTH, height: PRESET_PREVIEW_HEIGHT, viewBox: `0 0 ${PRESET_PREVIEW_WIDTH} ${PRESET_PREVIEW_HEIGHT}`, style: presetPreviewSvgStyle, "aria-hidden": "true", focusable: false, children: jsx_runtime_1.jsx("path", { d: path, fill: "none", stroke: colors_1.WHITE, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+    return (jsx_runtime_1.jsx("button", { type: "button", style: style, title: preset.label, "aria-label": `Apply ${preset.label} easing`, disabled: disabled, onClick: handleClick, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, children: jsx_runtime_1.jsx("svg", { width: PRESET_PREVIEW_WIDTH, height: PRESET_PREVIEW_HEIGHT, viewBox: `0 0 ${PRESET_PREVIEW_WIDTH} ${PRESET_PREVIEW_HEIGHT}`, style: presetPreviewSvgStyle, "aria-hidden": "true", focusable: false, children: jsx_runtime_1.jsx("path", { d: path, fill: "none", stroke: selected || hovered ? colors_1.WHITE : colors_1.LIGHT_TEXT, strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
 };
 const EasingEditor = ({ state, renderHeader }) => {
     var _a, _b;
@@ -590,7 +610,9 @@ const EasingEditor = ({ state, renderHeader }) => {
         }
         const easing = nextMode === 'spring'
             ? serializeSpring(springRef.current)
-            : serializeBezier(bezierRef.current);
+            : nextMode === 'hold'
+                ? studio_shared_1.HOLD_KEYFRAME_EASING
+                : serializeBezier(bezierRef.current);
         const version = applyLiveEasing(easing);
         commitEasing(easing, version);
     }, [applyLiveEasing, commitEasing, mode, previewServerState.type]);
@@ -605,11 +627,18 @@ const EasingEditor = ({ state, renderHeader }) => {
             commitEasing(serializeSpring(nextSpring), springVersion);
             return;
         }
+        if (easing.type === 'step1') {
+            setMode('hold');
+            const holdVersion = applyLiveEasing(studio_shared_1.HOLD_KEYFRAME_EASING);
+            commitEasing(studio_shared_1.HOLD_KEYFRAME_EASING, holdVersion);
+            return;
+        }
         const nextBezier = easingToBezier(easing);
         setMode('bezier');
         const bezierVersion = setBezierAndPreview(nextBezier);
         commitEasing(serializeBezier(nextBezier), bezierVersion);
     }, [
+        applyLiveEasing,
         commitEasing,
         previewServerState.type,
         setBezierAndPreview,
@@ -709,9 +738,15 @@ const EasingEditor = ({ state, renderHeader }) => {
         }
         return points.join(' ');
     }, [spring]);
+    const holdPath = (0, react_1.useMemo)(() => `M ${startPoint.x} ${startPoint.y} L ${endPoint.x} ${startPoint.y} L ${endPoint.x} ${endPoint.y}`, [endPoint, startPoint]);
     const disabled = previewServerState.type !== 'connected';
     const graphLabels = getEasingGraphLabels(getCurrentEasingUpdates());
-    const currentEasing = (0, react_1.useMemo)(() => mode === 'spring' ? serializeSpring(spring) : serializeBezier(bezier), [bezier, mode, spring]);
+    const currentEasing = (0, react_1.useMemo)(() => {
+        if (mode === 'spring') {
+            return serializeSpring(spring);
+        }
+        return mode === 'hold' ? studio_shared_1.HOLD_KEYFRAME_EASING : serializeBezier(bezier);
+    }, [bezier, mode, spring]);
     const modeItems = (0, react_1.useMemo)(() => {
         return [
             {
@@ -726,12 +761,18 @@ const EasingEditor = ({ state, renderHeader }) => {
                 onClick: () => switchMode('spring'),
                 selected: mode === 'spring',
             },
+            {
+                key: 'hold',
+                label: 'Hold',
+                onClick: () => switchMode('hold'),
+                selected: mode === 'hold',
+            },
         ];
     }, [mode, switchMode]);
     const coordinatesGrid = (0, react_1.useMemo)(() => ({
         ...coordinatesGridBase,
         gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
-        padding: '0 12px 12px',
+        padding: '0 12px',
     }), []);
     const modeSwitcher = (jsx_runtime_1.jsx("div", { style: segmentedControlWrapper, children: jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: modeItems, needsWrapping: false }) }));
     return (jsx_runtime_1.jsxs("div", { style: inlineContainer, children: [renderHeader ? renderHeader(modeItems) : null, jsx_runtime_1.jsx("div", { style: renderHeader ? inspectorPresetButtonsWrapper : presetButtonsWrapper, children: EDITOR_EASING_PRESETS.map((preset) => (jsx_runtime_1.jsx(EasingPresetButton, { currentEasing: currentEasing, disabled: disabled, onClick: applyPreset, preset: preset }, preset.id))) }), mode === 'bezier' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
@@ -748,7 +789,7 @@ const EasingEditor = ({ state, renderHeader }) => {
                                     jsx_runtime_1.jsx("div", { style: coordinateLabel, children: "Y2" }), jsx_runtime_1.jsx("div", { style: coordinateInputWrapper, children: jsx_runtime_1.jsx(InputDragger_1.InputDragger, { type: "number", value: bezier[3], status: "ok", onValueChange: (value) => setCoordinate(1, 'y', value, false), onValueChangeEnd: (value) => setCoordinate(1, 'y', value, true), onTextChange: () => undefined, min: Y_MIN, max: Y_MAX, step: 0.01, formatter: formatNumber, rightAlign: false, style: numberInputStyle, snapToStep: false, disabled: disabled }) })
                                 ] })
                         ] })
-                ] })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                ] })) : mode === 'spring' ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsxs("svg", { width: SVG_WIDTH, height: SVG_HEIGHT, viewBox: `0 0 ${SVG_WIDTH} ${SVG_HEIGHT}`, style: svgStyle, "aria-label": "Spring easing curve", children: [
                             jsx_runtime_1.jsx(EasingGraphScaffold, { labels: graphLabels }), jsx_runtime_1.jsx("path", { d: springPath, fill: "none", stroke: colors_1.BLUE, strokeWidth: 3 }), jsx_runtime_1.jsx("circle", { cx: xToSvg(0), cy: yToSvg(0), r: 4, fill: colors_1.WHITE }), jsx_runtime_1.jsx("circle", { cx: xToSvg(1), cy: yToSvg(1), r: 4, fill: colors_1.WHITE })
                         ] }), modeSwitcher, jsx_runtime_1.jsxs("div", { style: coordinatesGrid, children: [
@@ -766,6 +807,9 @@ const EasingEditor = ({ state, renderHeader }) => {
                                     jsx_runtime_1.jsx("div", { style: coordinateLabel, children: "Allow tail" }), jsx_runtime_1.jsx("div", { style: checkboxWrapper, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: (_b = spring.allowTail) !== null && _b !== void 0 ? _b : false, onChange: setAllowTail, name: "spring-allow-tail", disabled: disabled, variant: "small" }) })
                                 ] })
                         ] })
-                ] }))] }));
+                ] })) : (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
+                    jsx_runtime_1.jsxs("svg", { width: SVG_WIDTH, height: SVG_HEIGHT, viewBox: `0 0 ${SVG_WIDTH} ${SVG_HEIGHT}`, style: svgStyle, "aria-label": "Hold easing curve", children: [
+                            jsx_runtime_1.jsx(EasingGraphScaffold, { labels: graphLabels }), jsx_runtime_1.jsx("path", { d: holdPath, fill: "none", stroke: colors_1.BLUE, strokeWidth: 3 }), jsx_runtime_1.jsx("circle", { cx: startPoint.x, cy: startPoint.y, r: 4, fill: colors_1.WHITE }), jsx_runtime_1.jsx("circle", { cx: endPoint.x, cy: endPoint.y, r: 4, fill: colors_1.WHITE })
+                        ] }), modeSwitcher] }))] }));
 };
 exports.EasingEditor = EasingEditor;

package/dist/components/Timeline/Timeline.js

@@ -45,6 +45,7 @@ const interactivity_enabled_1 = require("../../helpers/interactivity-enabled");
 const is_current_selected_still_1 = require("../../helpers/is-current-selected-still");
 const open_in_editor_1 = require("../../helpers/open-in-editor");
 const studio_runtime_config_1 = require("../../helpers/studio-runtime-config");
+const timeline_node_path_key_1 = require("../../helpers/timeline-node-path-key");
 const call_api_1 = require("../call-api");
 const ContextMenu_1 = require("../ContextMenu");
 const import_assets_1 = require("../import-assets");
@@ -256,13 +257,29 @@ const TimelineInner = () => {
     const filtered = (0, react_1.useMemo)(() => {
         return timeline.filter((t) => (0, should_show_track_in_timeline_1.shouldShowTrackInTimeline)(t, durationInFrames));
     }, [durationInFrames, timeline]);
+    // Keep `filtered` complete so a future toggle can show every programmatic
+    // instance without recalculating the timeline or losing its instance index.
+    const collapsed = (0, react_1.useMemo)(() => {
+        const seenNodePaths = new Set();
+        return filtered.filter((track) => {
+            if (track.nodePathInfo === null) {
+                return true;
+            }
+            const key = (0, timeline_node_path_key_1.timelineSequenceNodePathToKey)(track.nodePathInfo.sequenceSubscriptionKey);
+            if (seenNodePaths.has(key)) {
+                return false;
+            }
+            seenNodePaths.add(key);
+            return true;
+        });
+    }, [filtered]);
     const maxTimelineTracks = (0, studio_runtime_config_1.getStudioMaxTimelineTracks)();
     const shown = (0, react_1.useMemo)(() => {
-        return filtered.length > maxTimelineTracks
-            ? filtered.slice(0, maxTimelineTracks)
-            : filtered;
-    }, [filtered, maxTimelineTracks]);
-    const hasBeenCut = filtered.length > shown.length;
+        return collapsed.length > maxTimelineTracks
+            ? collapsed.slice(0, maxTimelineTracks)
+            : collapsed;
+    }, [collapsed, maxTimelineTracks]);
+    const hasBeenCut = collapsed.length > shown.length;
     return (jsx_runtime_1.jsxs(TimelineContextMenuArea, { children: [sequences.map((sequence) => {
                 if (!(0, should_subscribe_to_sequence_props_1.shouldSubscribeToSequenceProps)(sequence, previewInteractive)) {
                     return null;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const TimelineDuplicateCount: React.FC<{
+    readonly count: number;
+}>;

package/dist/components/Timeline/TimelineDuplicateCount.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TimelineDuplicateCount = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const colors_1 = require("../../helpers/colors");
+const badgeStyle = {
+    alignItems: 'center',
+    border: `1px solid ${colors_1.WHITE_ALPHA_20}`,
+    borderRadius: 4,
+    boxSizing: 'border-box',
+    color: colors_1.WHITE_ALPHA_60,
+    display: 'inline-flex',
+    flexShrink: 0,
+    fontSize: 10,
+    fontWeight: 300,
+    height: 14,
+    justifyContent: 'center',
+    lineHeight: '12px',
+    minWidth: 18,
+    padding: '0 3px',
+    userSelect: 'none',
+    WebkitUserSelect: 'none',
+};
+const TimelineDuplicateCount = ({ count }) => {
+    const label = `${count} other programmatically duplicated ${count === 1 ? 'instance is' : 'instances are'} hidden`;
+    return (jsx_runtime_1.jsxs("span", { style: badgeStyle, title: label, "aria-label": label, children: ["+", count] }));
+};
+exports.TimelineDuplicateCount = TimelineDuplicateCount;

package/dist/components/Timeline/TimelineExpandedKeyframeRow.js

@@ -35,8 +35,8 @@ var __importStar = (this && this.__importStar) || (function () {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineExpandedKeyframeRow = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = __importStar(require("react"));
+const are_sequence_node_path_infos_equal_1 = require("../../helpers/are-sequence-node-path-infos-equal");
 const timeline_layout_1 = require("../../helpers/timeline-layout");
 const get_timeline_easing_segments_1 = require("./get-timeline-easing-segments");
 const TimelineKeyframeDiamond_1 = require("./TimelineKeyframeDiamond");
@@ -71,29 +71,9 @@ const areTimelineExpandedKeyframeRowPropsEqual = (prevProps, nextProps) => {
         prevProps.canEditEasing !== nextProps.canEditEasing ||
         prevProps.showSeparator !== nextProps.showSeparator ||
         prevProps.keyframes.length !== nextProps.keyframes.length ||
-        prevProps.nodePathInfo.index !== nextProps.nodePathInfo.index ||
-        prevProps.nodePathInfo.numberOfSequencesWithThisNodePath !==
-            nextProps.nodePathInfo.numberOfSequencesWithThisNodePath ||
-        prevProps.nodePathInfo.supportsEffects !==
-            nextProps.nodePathInfo.supportsEffects ||
-        (0, studio_shared_1.stringifySequenceSubscriptionKey)(prevProps.nodePathInfo.sequenceSubscriptionKey) !==
-            (0, studio_shared_1.stringifySequenceSubscriptionKey)(nextProps.nodePathInfo.sequenceSubscriptionKey) ||
-        prevProps.nodePathInfo.auxiliaryKeys.length !==
-            nextProps.nodePathInfo.auxiliaryKeys.length) {
+        !(0, are_sequence_node_path_infos_equal_1.areSequenceNodePathInfosEqual)(prevProps.nodePathInfo, nextProps.nodePathInfo)) {
         return false;
     }
-    const prevVideoConfig = prevProps.nodePathInfo.sequenceSubscriptionKey.videoConfigValues;
-    const nextVideoConfig = nextProps.nodePathInfo.sequenceSubscriptionKey.videoConfigValues;
-    if (prevVideoConfig !== nextVideoConfig &&
-        (prevVideoConfig === null ||
-            nextVideoConfig === null ||
-            prevVideoConfig.durationInFrames !== nextVideoConfig.durationInFrames ||
-            prevVideoConfig.fps !== nextVideoConfig.fps ||
-            prevVideoConfig.height !== nextVideoConfig.height ||
-            prevVideoConfig.width !== nextVideoConfig.width)) {
-        return false;
-    }
-    return (prevProps.keyframes.every((keyframe, index) => keyframe.frame === nextProps.keyframes[index].frame) &&
-        prevProps.nodePathInfo.auxiliaryKeys.every((key, index) => key === nextProps.nodePathInfo.auxiliaryKeys[index]));
+    return prevProps.keyframes.every((keyframe, index) => keyframe.frame === nextProps.keyframes[index].frame);
 };
 exports.TimelineExpandedKeyframeRow = react_1.default.memo(TimelineExpandedKeyframeRowUnmemoized, areTimelineExpandedKeyframeRowPropsEqual);

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

@@ -1,8 +1,10 @@
 import React from 'react';
 import type { TSequence } from 'remotion';
 import type { SequenceNodePathInfo } from '../../helpers/get-timeline-sequence-sort-key';
-export declare const TimelineExpandedTrackKeyframes: React.NamedExoticComponent<{
+type TimelineExpandedTrackKeyframesProps = {
     readonly sequence: TSequence;
     readonly nodePathInfo: SequenceNodePathInfo;
     readonly keyframeDisplayOffset: number;
-}>;
+};
+export declare const TimelineExpandedTrackKeyframes: React.NamedExoticComponent<TimelineExpandedTrackKeyframesProps>;
+export {};

package/dist/components/Timeline/TimelineExpandedTrackKeyframes.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TimelineExpandedTrackKeyframes = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importDefault(require("react"));
+const are_sequence_node_path_infos_equal_1 = require("../../helpers/are-sequence-node-path-infos-equal");
 const TimelineExpandedKeyframeRow_1 = require("./TimelineExpandedKeyframeRow");
 const use_expanded_track_keyframe_rows_1 = require("./use-expanded-track-keyframe-rows");
 const TimelineExpandedTrackKeyframesInner = ({ nodePathInfo, sequence, keyframeDisplayOffset }) => {
@@ -16,4 +17,13 @@ const TimelineExpandedTrackKeyframesInner = ({ nodePathInfo, sequence, keyframeD
     });
     return (jsx_runtime_1.jsx("div", { style: { height: expandedHeight }, children: rows.map((row, index) => (jsx_runtime_1.jsx(TimelineExpandedKeyframeRow_1.TimelineExpandedKeyframeRow, { height: row.height, keyframes: row.keyframes, canEditEasing: row.canEditEasing, nodePathInfo: row.nodePathInfo, showSeparator: index > 0 }, row.rowKey))) }));
 };
-exports.TimelineExpandedTrackKeyframes = react_1.default.memo(TimelineExpandedTrackKeyframesInner);
+const areTimelineExpandedTrackKeyframesPropsEqual = (first, second) => {
+    var _a, _b, _c, _d;
+    return (first.keyframeDisplayOffset === second.keyframeDisplayOffset &&
+        ((_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));
+};
+exports.TimelineExpandedTrackKeyframes = react_1.default.memo(TimelineExpandedTrackKeyframesInner, areTimelineExpandedTrackKeyframesPropsEqual);

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