@remotion/studio 4.0.527 → 4.0.529

package/dist/components/TimelineInOutToggle.js

@@ -242,7 +242,7 @@ const TimelineInOutPointToggle = () => {
         };
     }, [confId, onInMark, onInOutClear, onOutMark]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "In point", shortcut: shortcutsDisabled ? null : inShortcut, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": "In point", "aria-description": "Right click to clear", "aria-keyshortcuts": shortcutsDisabled ? undefined : inAriaShortcut || undefined, style: buttonStyle, onClick: onInMark, onContextMenu: clearInMark, disabled: !videoConfig || isFirstFrame, children: (color) => (jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? color : colors_1.BLUE, style: style })) }) }), jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Out point", shortcut: shortcutsDisabled ? null : outShortcut, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { title: "", "aria-label": "Out point", "aria-description": "Right click to clear", "aria-keyshortcuts": shortcutsDisabled ? undefined : outAriaShortcut || undefined, style: buttonStyle, onClick: onOutMark, onContextMenu: clearOutMark, disabled: !videoConfig || isLastFrame, children: (color) => (jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? color : colors_1.BLUE, style: style })) }) })
+            jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "In point", shortcut: shortcutsDisabled ? null : inShortcut, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "In point", "aria-description": "Right click to clear", "aria-keyshortcuts": shortcutsDisabled ? undefined : inAriaShortcut || undefined, style: buttonStyle, onClick: onInMark, onContextMenu: clearInMark, disabled: !videoConfig || isFirstFrame, children: (color) => (jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineInPointer, { color: inFrame === null ? color : colors_1.BLUE, style: style })) }) }), jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Out point", shortcut: shortcutsDisabled ? null : outShortcut, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(ControlButton_1.ControlButton, { "aria-label": "Out point", "aria-description": "Right click to clear", "aria-keyshortcuts": shortcutsDisabled ? undefined : outAriaShortcut || undefined, style: buttonStyle, onClick: onOutMark, onContextMenu: clearOutMark, disabled: !videoConfig || isLastFrame, children: (color) => (jsx_runtime_1.jsx(timelineInOutPointer_1.TimelineOutPointer, { color: outFrame === null ? color : colors_1.BLUE, style: style })) }) })
         ] }));
 };
 exports.TimelineInOutPointToggle = TimelineInOutPointToggle;

package/dist/components/Transcription/Models.js

@@ -8,7 +8,7 @@ const ModelManager_1 = require("../ModelManager");
 const AVAILABLE_MODELS = (0, whisper_webgpu_1.getAvailableModels)();
 const Models = ({ description, indent, visible }) => {
     const isModelCached = (0, react_1.useCallback)((model) => (0, whisper_webgpu_1.isWhisperModelCached)({ model }), []);
-    const loadModel = (0, react_1.useCallback)((model, onProgress) => (0, whisper_webgpu_1.loadWhisperModel)({
+    const loadModel = (0, react_1.useCallback)((model, onProgress) => (0, whisper_webgpu_1.downloadWhisperModel)({
         model,
         onProgress: (progress) => onProgress(progress.progress),
     }), []);

package/dist/components/Transcription/TranscriptionModal.js

@@ -134,7 +134,7 @@ const openIconStyle = {
     flexShrink: 0,
 };
 const TranscriptionSettingLabel = ({ children, inputId, name }) => {
-    return (jsx_runtime_1.jsxs("div", { style: layout_2.label, children: [inputId === null ? (name) : (jsx_runtime_1.jsx("label", { htmlFor: inputId, style: nestedLabelStyle, children: name })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InfoBubble_1.InfoBubble, { title: `Learn more about ${name}`, children: jsx_runtime_1.jsx("div", { style: tooltipContent, children: children }) })
+    return (jsx_runtime_1.jsxs("div", { style: layout_2.label, children: [inputId === null ? (name) : (jsx_runtime_1.jsx("label", { htmlFor: inputId, style: nestedLabelStyle, children: name })), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(InfoBubble_1.InfoBubble, { "aria-label": `Learn more about ${name}`, children: jsx_runtime_1.jsx("div", { style: tooltipContent, children: children }) })
         ] }));
 };
 const ModelSettings = ({ cachedModels, selectedLanguage, selectedModel, selectedTask, setSelectedLanguage, setSelectedModel, setSelectedTask, supportState, }) => {
@@ -214,11 +214,11 @@ const ModelSettings = ({ cachedModels, selectedLanguage, selectedModel, selected
     }, [selectedModelInfo.supportsTranslation, setSelectedTask]);
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
             jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Whisper model" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: modelOptions, selectedId: selectedModel, title: "Whisper model", style: controlStyle }) })
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Whisper model" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: modelOptions, selectedId: selectedModel, "aria-label": "Whisper model", style: controlStyle }) })
                 ] }), selectedModelInfo.multilingual ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Spoken language" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: languageOptions, selectedId: selectedLanguage, title: "Spoken language", style: controlStyle }) })
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Spoken language" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: languageOptions, selectedId: selectedLanguage, "aria-label": "Spoken language", style: controlStyle }) })
                 ] })) : null, selectedModelInfo.supportsTranslation ? (jsx_runtime_1.jsxs("div", { style: layout_2.optionRow, children: [
-                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Task" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: taskOptions, selectedId: effectiveTask, title: "Task", style: controlStyle }) })
+                    jsx_runtime_1.jsx("div", { style: layout_2.label, children: "Task" }), jsx_runtime_1.jsx("div", { style: layout_2.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: taskOptions, selectedId: effectiveTask, "aria-label": "Task", style: controlStyle }) })
                 ] })) : null, effectiveTask === 'translate' ? (jsx_runtime_1.jsx("div", { id: TRANSCRIPTION_TASK_MESSAGE_ID, "aria-live": "polite", style: taskMessageRow, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: "Word timings may be less accurate when translating to English.", type: "warning" }) })) : null, supportState.type === 'unsupported' ? (jsx_runtime_1.jsx("div", { style: { padding: '0 16px' }, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: supportState.message, type: "error" }) })) : null] }));
 };
 const OutputSettings = ({ exists, onOutNameChange, outName, validationMessage }) => {
@@ -246,7 +246,7 @@ const OutputSettings = ({ exists, onOutNameChange, outName, validationMessage })
                         jsx_runtime_1.jsx(RemInput_1.RemotionInput, { "aria-label": "Caption output file", "aria-describedby": validationMessage || exists
                                 ? TRANSCRIPTION_OUTPUT_MESSAGE_ID
                                 : undefined, "aria-invalid": validationMessage ? true : undefined, status: validationMessage ? 'error' : exists ? 'warning' : 'ok', style: layout_2.input, type: "text", value: outName, onChange: onOutNameChange, rightAlign: true }), validationMessage || exists ? (jsx_runtime_1.jsxs("div", { id: TRANSCRIPTION_OUTPUT_MESSAGE_ID, "aria-live": "polite", children: [
-                                jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: validationMessage !== null && validationMessage !== void 0 ? validationMessage : (jsx_runtime_1.jsxs("span", { style: existsMessageStyle, children: [isBrowserStudio ? null : (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: openExistingOutput, renderAction: renderOpenIcon, title: `Open in ${fileManagerName}`, variant: null })), "Exists, will be overwritten"] })), type: validationMessage ? 'error' : 'warning' })] })) : null] }) })
+                                jsx_runtime_1.jsx(layout_1.Spacing, { y: 1, block: true }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: validationMessage !== null && validationMessage !== void 0 ? validationMessage : (jsx_runtime_1.jsxs("span", { style: existsMessageStyle, children: [isBrowserStudio ? null : (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { onClick: openExistingOutput, renderAction: renderOpenIcon, "aria-label": `Open in ${fileManagerName}`, variant: null })), "Exists, will be overwritten"] })), type: validationMessage ? 'error' : 'warning' })] })) : null] }) })
         ] }));
 };
 const AdvancedSettings = ({ chunkLengthInSeconds, doSample, forceFullSequences, noRepeatNgramSize, repetitionPenalty, setChunkLengthInSeconds, setDoSample, setForceFullSequences, setNoRepeatNgramSize, setRepetitionPenalty, setStrideLengthInSeconds, setTemperature, setTopK, strideLengthInSeconds, temperature, topK, decodingValidationMessage, validationMessage, }) => {
@@ -324,7 +324,9 @@ const TranscriptionModal = ({ audioStreamIndex, displayName, requestInit, src, t
     }, []);
     const normalizedOutName = outName.normalize('NFC').toLowerCase();
     const queuedOutputExists = captionJobs.some((job) => job.target === null &&
-        (job.status === 'idle' || job.status === 'running') &&
+        (job.status === 'idle' ||
+            job.status === 'running' ||
+            job.status === 'saving') &&
         job.outName.normalize('NFC').toLowerCase() === normalizedOutName);
     const outputValidationMessage = target === null
         ? ((_a = (0, caption_output_name_1.validateCaptionOutputName)(outName)) !== null && _a !== void 0 ? _a : (queuedOutputExists
@@ -418,7 +420,7 @@ const TranscriptionModal = ({ audioStreamIndex, displayName, requestInit, src, t
     const title = target === null ? `Transcribe ${displayName}` : 'Generate captions';
     return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { ariaLabel: title, children: jsx_runtime_1.jsxs("div", { style: transcriptionModalStyle, children: [
                 jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: title }), jsx_runtime_1.jsxs("div", { style: render_modals_1.container, children: [
-                        jsx_runtime_1.jsx("div", { style: render_modals_1.flexer }), jsx_runtime_1.jsx(Button_1.Button, { onClick: onAddToQueue, disabled: !canTranscribe, title: transcribeDisabledReason, style: {
+                        jsx_runtime_1.jsx("div", { style: render_modals_1.flexer }), jsx_runtime_1.jsx(Button_1.Button, { onClick: onAddToQueue, disabled: !canTranscribe, "aria-label": transcribeDisabledReason, style: {
                                 ...render_modals_1.buttonStyle,
                                 backgroundColor: canTranscribe
                                     ? render_modals_1.buttonStyle.backgroundColor

package/dist/components/Transcription/resample-media-to-16-khz.d.ts

@@ -1,6 +1,7 @@
-export declare const resampleMediaTo16Khz: ({ src, audioStreamIndex, requestInit, onProgress, }: {
+export declare const resampleMediaTo16Khz: ({ src, audioStreamIndex, requestInit, onProgress, signal, }: {
     readonly src: string;
     readonly audioStreamIndex: number | null;
     readonly requestInit: Omit<RequestInit, "signal"> | null;
     readonly onProgress: (progress: number) => void;
+    readonly signal: AbortSignal;
 }) => Promise<Float32Array<ArrayBufferLike>>;

package/dist/components/Transcription/resample-media-to-16-khz.js

@@ -3,13 +3,22 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.resampleMediaTo16Khz = void 0;
 const whisper_webgpu_1 = require("@remotion/whisper-webgpu");
 const mediabunny_1 = require("mediabunny");
-const resampleMediaTo16Khz = async ({ src, audioStreamIndex, requestInit, onProgress, }) => {
+const resampleMediaTo16Khz = async ({ src, audioStreamIndex, requestInit, onProgress, signal, }) => {
     var _a, _b;
+    signal.throwIfAborted();
     const input = new mediabunny_1.Input({
         formats: mediabunny_1.ALL_FORMATS,
         source: new mediabunny_1.UrlSource(src, requestInit === null ? {} : { requestInit }),
     });
     const waveformChunks = [];
+    let conversion = null;
+    let cancellation = null;
+    const onAbort = () => {
+        var _a;
+        cancellation = (_a = conversion === null || conversion === void 0 ? void 0 : conversion.cancel().catch(() => undefined)) !== null && _a !== void 0 ? _a : null;
+        input.dispose();
+    };
+    signal.addEventListener('abort', onAbort, { once: true });
     try {
         onProgress(0);
         const audioTracks = await input.getAudioTracks();
@@ -29,7 +38,8 @@ const resampleMediaTo16Khz = async ({ src, audioStreamIndex, requestInit, onProg
             format: new mediabunny_1.WavOutputFormat(),
             target: new mediabunny_1.NullTarget(),
         });
-        const conversion = await mediabunny_1.Conversion.init({
+        signal.throwIfAborted();
+        conversion = await mediabunny_1.Conversion.init({
             input,
             output,
             tracks: 'all',
@@ -43,6 +53,7 @@ const resampleMediaTo16Khz = async ({ src, audioStreamIndex, requestInit, onProg
                     forceTranscode: true,
                     numberOfChannels: 1,
                     process: (sample) => {
+                        signal.throwIfAborted();
                         const floats = new Float32Array(sample.allocationSize({ format: 'f32', planeIndex: 0 }) /
                             Float32Array.BYTES_PER_ELEMENT);
                         sample.copyTo(floats, { format: 'f32', planeIndex: 0 });
@@ -57,14 +68,21 @@ const resampleMediaTo16Khz = async ({ src, audioStreamIndex, requestInit, onProg
                 };
             },
         });
+        signal.throwIfAborted();
         if (!conversion.isValid) {
             throw new Error('The audio track cannot be decoded in this browser. Try converting the media to WAV first.');
         }
         conversion.onProgress = (progress) => onProgress(progress);
         await conversion.execute();
+        signal.throwIfAborted();
         onProgress(1);
     }
     finally {
+        signal.removeEventListener('abort', onAbort);
+        await cancellation;
+        if (signal.aborted && conversion && cancellation === null) {
+            await conversion.cancel().catch(() => undefined);
+        }
         input.dispose();
     }
     const waveformLength = waveformChunks.reduce((maximum, chunk) => Math.max(maximum, chunk.startFrame + chunk.waveform.length), 0);

package/dist/components/UndoRedoButtons.js

@@ -130,7 +130,7 @@ const UndoRedoButtons = () => {
         return null;
     }
     return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
-            jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onUndo, renderAction: renderUndo, title: undoTooltip, disabled: !canUndo, unhoveredColor: colors_1.WHITE_ALPHA_80 }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onRedo, renderAction: renderRedo, title: redoTooltip, disabled: !canRedo, unhoveredColor: colors_1.WHITE_ALPHA_80 })
+            jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onUndo, renderAction: renderUndo, "aria-label": undoTooltip, disabled: !canUndo, unhoveredColor: colors_1.WHITE_ALPHA_80 }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onRedo, renderAction: renderRedo, "aria-label": redoTooltip, disabled: !canRedo, unhoveredColor: colors_1.WHITE_ALPHA_80 })
         ] }));
 };
 exports.UndoRedoButtons = UndoRedoButtons;

package/dist/components/UpdatesSettings.js

@@ -5,6 +5,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../helpers/colors");
 const copy_text_1 = require("../helpers/copy-text");
+const studio_css_variables_1 = require("../helpers/studio-css-variables");
 const use_copy_feedback_1 = require("../helpers/use-copy-feedback");
 const copy_1 = require("../icons/copy");
 const InlineAction_1 = require("./InlineAction");
@@ -127,6 +128,7 @@ const RenderedReleaseNotes = ({ release }) => {
             return null;
         }
         return `<!doctype html><html><head><base href="https://github.com/remotion-dev/remotion/" target="_blank"><style>
+			${studio_css_variables_1.studioCssVariables}
 			:root { color-scheme: dark; }
 			html, body { overflow: hidden; }
 			body { background: ${colors_1.BACKGROUND}; color: ${colors_1.LIGHT_TEXT}; font-family: sans-serif; font-size: 13px; line-height: 1.5; margin: 0; overflow-wrap: anywhere; }
@@ -169,7 +171,7 @@ const RenderedReleaseNotes = ({ release }) => {
             jsx_runtime_1.jsxs("div", { style: releaseNotesTitle, children: ["v", release.version, formattedReleaseDate === null
                         ? null
                         : ` \u2013\u00a0${formattedReleaseDate}`] }), document === null ? (jsx_runtime_1.jsxs("div", { style: text, children: ["Release notes could not be loaded.", ' ', jsx_runtime_1.jsx("a", { style: link, target: "_blank", href: `https://github.com/remotion-dev/remotion/releases/tag/v${release.version}`, children: "View them on GitHub" }),
-                    "."] })) : (jsx_runtime_1.jsx("iframe", { ref: frameRef, onLoad: onLoad, sandbox: "allow-popups allow-popups-to-escape-sandbox allow-same-origin", scrolling: "no", srcDoc: document, style: { ...releaseNotesFrame, height }, title: `Release notes for Remotion v${release.version}` }))] }));
+                    "."] })) : (jsx_runtime_1.jsx("iframe", { ref: frameRef, onLoad: onLoad, sandbox: "allow-popups allow-popups-to-escape-sandbox allow-same-origin", scrolling: "no", srcDoc: document, style: { ...releaseNotesFrame, height }, "aria-label": `Release notes for Remotion v${release.version}` }))] }));
 };
 const UpdatesSettings = () => {
     const { remotionSkillsInfo } = (0, SettingsContext_1.useSettings)();
@@ -261,7 +263,7 @@ const UpdatesSettings = () => {
     return (jsx_runtime_1.jsxs("div", { style: container, children: [info.updateAvailable ? (jsx_runtime_1.jsx("div", { style: title, children: "A new Remotion update is available." })) : null, info.updateAvailable && info.packageManager !== 'unknown' ? (jsx_runtime_1.jsx("div", { children: jsx_runtime_1.jsxs(ModalButton_1.ModalButton, { onClick: onUpgrade, children: ["Upgrade to v", info.latestVersion] }) })) : null, upgradeError ? (jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: upgradeError, type: "error", align: "flex-start" })) : null, hasKnownBugs && info.updateAvailable ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsxs("div", { style: title, children: ["The currently installed version v", info.currentVersion, " has the following known bugs:"] }), jsx_runtime_1.jsx(KnownBugs_1.KnownBugs, { bugs: knownBugs !== null && knownBugs !== void 0 ? knownBugs : [] }), jsx_runtime_1.jsx("div", { style: { height: '20px' } }), jsx_runtime_1.jsxs("div", { style: text, children: ["Or run the following ", updateActionType, ":"] })
                 ] })) : info.updateAvailable ? (jsx_runtime_1.jsxs("div", { style: titleBeforeCommand, children: ["You can also run the following ", updateActionType, ":"] })) : (jsx_runtime_1.jsxs("div", { style: titleBeforeCommand, children: ["Your Remotion Agent Skills are out of date. Run the following", ' ', updateActionType, ":"] })), jsx_runtime_1.jsxs("div", { style: commandField, children: [
-                    jsx_runtime_1.jsx("pre", { style: code, children: updateAction }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onClick, renderAction: renderCopyAction, title: "Copy command" })
+                    jsx_runtime_1.jsx("pre", { style: code, children: updateAction }), jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, onClick: onClick, renderAction: renderCopyAction, "aria-label": "Copy command" })
                 ] }), info.updateAvailable ? (jsx_runtime_1.jsxs("div", { style: text, children: ["You", "'re", " currently running Remotion v", info.currentVersion, "."] })) : null, info.updateAvailable ? ((releaseNotes === null || releaseNotes === void 0 ? void 0 : releaseNotes.currentVersion) === info.currentVersion &&
                 releaseNotes.latestVersion === info.latestVersion ? (releaseNotes.releases.length === 0 ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
                     jsx_runtime_1.jsxs("div", { style: releaseNotesTitle, children: ["v", info.latestVersion] }), jsx_runtime_1.jsxs("div", { style: text, children: ["Release notes could not be loaded.", ' ', jsx_runtime_1.jsx("a", { style: link, target: "_blank", href: "https://github.com/remotion-dev/remotion/releases", children: "View them on GitHub" }),

package/dist/components/VideoMatting/Models.js

@@ -8,7 +8,7 @@ const ModelManager_1 = require("../ModelManager");
 const AVAILABLE_MODELS = (0, video_matting_1.getAvailableModels)();
 const Models = ({ description, indent, visible }) => {
     const isModelCached = (0, react_1.useCallback)((model) => (0, video_matting_1.isVideoMattingModelCached)({ model }), []);
-    const loadModel = (0, react_1.useCallback)((model, onProgress) => (0, video_matting_1.loadVideoMattingModel)({
+    const loadModel = (0, react_1.useCallback)((model, onProgress) => (0, video_matting_1.downloadVideoMattingModel)({
         model,
         onProgress: (progress) => onProgress(progress.progress),
     }), []);

package/dist/components/VideoMatting/VideoMattingModal.js

@@ -7,8 +7,8 @@ const video_matting_1 = require("@remotion/video-matting");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const Checkmark_1 = require("../../icons/Checkmark");
+const gear_1 = require("../../icons/gear");
 const models_1 = require("../../icons/models");
-const separation_1 = require("../../icons/separation");
 const modals_1 = require("../../state/modals");
 const sidebar_1 = require("../../state/sidebar");
 const Button_1 = require("../Button");
@@ -61,9 +61,9 @@ const makeOptions = ({ items, selected, setSelected, }) => items.map(({ id, labe
     disabled: false,
     onClick: () => setSelected(id),
 }));
-const VideoMattingModal = ({ displayName, src, }) => {
-    var _a, _b;
-    const [tab, setTab] = (0, react_1.useState)('separate');
+const VideoMattingModal = ({ displayName, src, target, }) => {
+    var _a;
+    const [tab, setTab] = (0, react_1.useState)('remove');
     const isModelCached = (0, react_1.useCallback)((selectedModel) => (0, video_matting_1.isVideoMattingModelCached)({ model: selectedModel }), []);
     const cachedModels = (0, use_model_cache_status_1.useModelCacheStatus)({
         isModelCached,
@@ -71,10 +71,9 @@ const VideoMattingModal = ({ displayName, src, }) => {
         refreshKey: tab,
     });
     const baseName = (0, react_1.useMemo)(() => (0, public_output_name_1.getDefaultOutputBaseName)(src, displayName, 'video'), [displayName, src]);
-    const [baseOutName, setBaseOutName] = (0, react_1.useState)(`${baseName}-base.webm`);
-    const [foregroundOutName, setForegroundOutName] = (0, react_1.useState)(`${baseName}-foreground.webm`);
-    const [model, setModel] = (0, react_1.useState)('ben2-base');
-    const [audio, setAudio] = (0, react_1.useState)('base');
+    const [outName, setOutName] = (0, react_1.useState)(`${baseName}-no-background.webm`);
+    const [model, setModel] = (0, react_1.useState)('modnet');
+    const [audio, setAudio] = (0, react_1.useState)('keep');
     const [videoBitrate, setVideoBitrate] = (0, react_1.useState)('very-high');
     const [support, setSupport] = (0, react_1.useState)({ type: 'checking' });
     const staticFiles = (0, use_static_files_1.useStaticFiles)();
@@ -95,31 +94,18 @@ const VideoMattingModal = ({ displayName, src, }) => {
             cancelled = true;
         };
     }, [model]);
-    const normalizedBase = baseOutName.normalize('NFC').toLowerCase();
-    const normalizedForeground = foregroundOutName.normalize('NFC').toLowerCase();
-    const duplicateOutput = normalizedBase === normalizedForeground;
+    const normalizedOutput = outName.normalize('NFC').toLowerCase();
     const queuedOutputs = new Set(videoMattingJobs
-        .filter((job) => job.status === 'idle' || job.status === 'running')
-        .flatMap((job) => [job.baseOutName, job.foregroundOutName])
+        .filter((job) => job.status === 'idle' ||
+        job.status === 'running' ||
+        job.status === 'saving')
+        .map((job) => job.outName)
         .map((name) => name.normalize('NFC').toLowerCase()));
-    const baseError = (_a = (0, public_output_name_1.validatePublicOutputName)({ extension: '.webm', outName: baseOutName })) !== null && _a !== void 0 ? _a : (duplicateOutput
-        ? 'Base and foreground outputs must be different'
-        : queuedOutputs.has(normalizedBase)
-            ? 'Another video matting job is using this output file'
-            : null);
-    const foregroundError = (_b = (0, public_output_name_1.validatePublicOutputName)({
-        extension: '.webm',
-        outName: foregroundOutName,
-    })) !== null && _b !== void 0 ? _b : (duplicateOutput
-        ? 'Base and foreground outputs must be different'
-        : queuedOutputs.has(normalizedForeground)
-            ? 'Another video matting job is using this output file'
-            : null);
-    const baseExists = staticFiles.some((file) => file.name.normalize('NFC').toLowerCase() === normalizedBase);
-    const foregroundExists = staticFiles.some((file) => file.name.normalize('NFC').toLowerCase() === normalizedForeground);
-    const canSubmit = support.type === 'supported' &&
-        baseError === null &&
-        foregroundError === null;
+    const outputError = (_a = (0, public_output_name_1.validatePublicOutputName)({ extension: '.webm', outName })) !== null && _a !== void 0 ? _a : (queuedOutputs.has(normalizedOutput)
+        ? 'Another background removal job is using this output file'
+        : null);
+    const outputExists = staticFiles.some((file) => file.name.normalize('NFC').toLowerCase() === normalizedOutput);
+    const canSubmit = support.type === 'supported' && outputError === null;
     const modelOptions = (0, react_1.useMemo)(() => makeOptions({
         items: MODELS.map((item) => ({
             id: item.name,
@@ -130,9 +116,7 @@ const VideoMattingModal = ({ displayName, src, }) => {
     }), [cachedModels, model]);
     const audioOptions = (0, react_1.useMemo)(() => makeOptions({
         items: [
-            { id: 'base', label: 'Background layer' },
-            { id: 'foreground', label: 'Foreground layer' },
-            { id: 'both', label: 'Both layers' },
+            { id: 'keep', label: 'Keep original audio' },
             { id: 'none', label: 'No audio' },
         ],
         selected: audio,
@@ -156,11 +140,11 @@ const VideoMattingModal = ({ displayName, src, }) => {
         addVideoMattingJob({
             src,
             displayName,
-            baseOutName,
-            foregroundOutName,
+            outName,
             model,
             audio,
             videoBitrate,
+            target,
         });
         setSidebarCollapsedState({ left: null, right: 'expanded' });
         (0, OptionsPanel_1.persistSelectedOptionsSidebarPanel)('renders');
@@ -169,36 +153,35 @@ const VideoMattingModal = ({ displayName, src, }) => {
     }, [
         addVideoMattingJob,
         audio,
-        baseOutName,
         canSubmit,
         displayName,
-        foregroundOutName,
+        outName,
         model,
         setSelectedModal,
         setSidebarCollapsedState,
         src,
+        target,
         videoBitrate,
     ]);
-    return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { ariaLabel: `Track matting ${displayName}`, children: jsx_runtime_1.jsxs("div", { style: modalStyle, children: [
-                jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Track matting ${displayName}` }), jsx_runtime_1.jsxs("div", { style: render_modals_1.container, children: [
-                        jsx_runtime_1.jsx("div", { style: render_modals_1.flexer }), jsx_runtime_1.jsx(Button_1.Button, { disabled: !canSubmit, onClick: submit, title: support.type === 'unsupported' ? support.message : undefined, style: {
+    const title = `Remove background from ${displayName}`;
+    return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { ariaLabel: title, children: jsx_runtime_1.jsxs("div", { style: modalStyle, children: [
+                jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: title }), jsx_runtime_1.jsxs("div", { style: render_modals_1.container, children: [
+                        jsx_runtime_1.jsx("div", { style: render_modals_1.flexer }), jsx_runtime_1.jsx(Button_1.Button, { disabled: !canSubmit, onClick: submit, "aria-label": support.type === 'unsupported' ? support.message : undefined, style: {
                                 ...render_modals_1.buttonStyle,
                                 backgroundColor: canSubmit
                                     ? render_modals_1.buttonStyle.backgroundColor
                                     : colors_1.BLUE_DISABLED,
-                            }, children: "Separate" })
+                            }, children: "Remove background" })
                     ] }), jsx_runtime_1.jsxs("div", { style: modalLayout, children: [
-                        jsx_runtime_1.jsxs("div", { style: render_modals_1.leftSidebar, children: [jsx_runtime_1.jsx(vertical_1.VerticalTab, { autoFocus: true, onClick: () => setTab('separate'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(separation_1.SeparationIcon, { color: color, style: render_modals_1.icon }) })), selected: tab === 'separate', style: render_modals_1.horizontalTab, children: "Separate" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { onClick: () => setTab('models'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(models_1.ModelsIcon, { color: color, style: render_modals_1.icon }) })), selected: tab === 'models', style: render_modals_1.horizontalTab, children: "Models" })] }), jsx_runtime_1.jsxs("div", { style: tab === 'separate' ? panelStyle : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
-                                jsx_runtime_1.jsx(RenderModalOutputName_1.RenderModalOutputName, { ariaLabel: "Base video output file", existingOutputPath: window.remotion_publicFolderExists
-                                        ? `${window.remotion_publicFolderExists}/${baseOutName}`
-                                        : null, existence: baseExists, inputStyle: layout_1.input, label: "Base output in public/", onValueChange: (event) => setBaseOutName(event.target.value), outName: baseOutName, validationMessage: baseError }), jsx_runtime_1.jsx(RenderModalOutputName_1.RenderModalOutputName, { ariaLabel: "Foreground video output file", existingOutputPath: window.remotion_publicFolderExists
-                                        ? `${window.remotion_publicFolderExists}/${foregroundOutName}`
-                                        : null, existence: foregroundExists, inputStyle: layout_1.input, label: "Foreground output in public/", onValueChange: (event) => setForegroundOutName(event.target.value), outName: foregroundOutName, validationMessage: foregroundError }), jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), jsx_runtime_1.jsxs("div", { style: layout_1.optionRow, children: [
-                                        jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Model" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: modelOptions, selectedId: model, title: "Model", style: controlStyle }) })
+                        jsx_runtime_1.jsxs("div", { style: render_modals_1.leftSidebar, children: [jsx_runtime_1.jsx(vertical_1.VerticalTab, { autoFocus: true, onClick: () => setTab('remove'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(gear_1.GearIcon, { color: color, style: render_modals_1.icon }) })), selected: tab === 'remove', style: render_modals_1.horizontalTab, children: "General" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { onClick: () => setTab('models'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(models_1.ModelsIcon, { color: color, style: render_modals_1.icon }) })), selected: tab === 'models', style: render_modals_1.horizontalTab, children: "Models" })] }), jsx_runtime_1.jsxs("div", { style: tab === 'remove' ? panelStyle : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
+                                jsx_runtime_1.jsx(RenderModalOutputName_1.RenderModalOutputName, { ariaLabel: "Video output file", existingOutputPath: window.remotion_publicFolderExists
+                                        ? `${window.remotion_publicFolderExists}/${outName}`
+                                        : null, existence: outputExists, inputStyle: layout_1.input, label: "Output in public/", onValueChange: (event) => setOutName(event.target.value), outName: outName, validationMessage: outputError }), jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), jsx_runtime_1.jsxs("div", { style: layout_1.optionRow, children: [
+                                        jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Model" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: modelOptions, selectedId: model, "aria-label": "Model", style: controlStyle }) })
                                     ] }), support.type === 'unsupported' ? (jsx_runtime_1.jsx("div", { style: validationStyle, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: support.message, type: "error" }) })) : null, jsx_runtime_1.jsxs("div", { style: layout_1.optionRow, children: [
-                                        jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Audio" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: audioOptions, selectedId: audio, title: "Audio", style: controlStyle }) })
+                                        jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Audio" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: audioOptions, selectedId: audio, "aria-label": "Audio", style: controlStyle }) })
                                     ] }), jsx_runtime_1.jsxs("div", { style: layout_1.optionRow, children: [
-                                        jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Video quality" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: qualityOptions, selectedId: String(videoBitrate), title: "Video quality", style: controlStyle }) })
+                                        jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Video quality" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: qualityOptions, selectedId: String(videoBitrate), "aria-label": "Video quality", style: controlStyle }) })
                                     ] })
                             ] }), jsx_runtime_1.jsx(Models_1.Models, { description: 'Models are downloaded automatically when needed.\nYou can also manage the browser cache here.', indent: true, visible: tab === 'models' })
                     ] })

package/dist/components/VideoMatting/VideoMattingModalWithOptionalPackage.js

@@ -42,5 +42,5 @@ const LazyVideoMattingModal = react_1.default.lazy(async () => {
     const { VideoMattingModal } = await Promise.resolve().then(() => __importStar(require('./VideoMattingModal')));
     return { default: VideoMattingModal };
 });
-const VideoMattingModalWithOptionalPackage = ({ state }) => (jsx_runtime_1.jsx(OptionalPackageModal_1.OptionalPackageModal, { ariaLabel: "Install video matting package", packageName: video_matting_capability_1.VIDEO_MATTING_PACKAGE, title: "Track matting", children: jsx_runtime_1.jsx(react_1.Suspense, { fallback: null, children: jsx_runtime_1.jsx(LazyVideoMattingModal, { ...state }) }) }));
+const VideoMattingModalWithOptionalPackage = ({ state }) => (jsx_runtime_1.jsx(OptionalPackageModal_1.OptionalPackageModal, { ariaLabel: "Install video matting package to remove background", packageName: video_matting_capability_1.VIDEO_MATTING_PACKAGE, title: "Remove background", children: jsx_runtime_1.jsx(react_1.Suspense, { fallback: null, children: jsx_runtime_1.jsx(LazyVideoMattingModal, { ...state }) }) }));
 exports.VideoMattingModalWithOptionalPackage = VideoMattingModalWithOptionalPackage;

package/dist/components/WebMcp.js

@@ -489,9 +489,9 @@ const WebMcp = () => {
                 },
             }, { signal: controller.signal }),
             modelContext.registerTool({
-                name: 'separate_video_layers',
-                title: 'Separate Studio video layers',
-                description: 'Separate a video asset from the public folder into background and foreground WebM files and add the work to the Jobs queue. If assetPath is omitted, the asset currently open in Studio is used.',
+                name: 'remove_video_background',
+                title: 'Remove video background',
+                description: 'Remove the background from a video asset in the public folder and add the work to the Jobs queue. If assetPath is omitted, the asset currently open in Studio is used.',
                 inputSchema: {
                     type: 'object',
                     properties: {
@@ -499,13 +499,9 @@ const WebMcp = () => {
                             type: 'string',
                             description: 'Optional path relative to public/. Defaults to the asset currently open in Studio.',
                         },
-                        baseOutputPath: {
-                            type: 'string',
-                            description: 'Optional background output path relative to public/.',
-                        },
-                        foregroundOutputPath: {
+                        outputPath: {
                             type: 'string',
-                            description: 'Optional foreground output path relative to public/.',
+                            description: 'Optional transparent video output path relative to public/.',
                         },
                         model: {
                             type: 'string',
@@ -513,8 +509,8 @@ const WebMcp = () => {
                         },
                         audio: {
                             type: 'string',
-                            enum: ['base', 'foreground', 'both', 'none'],
-                            default: 'base',
+                            enum: ['keep', 'none'],
+                            default: 'keep',
                         },
                         videoBitrate: {
                             oneOf: [
@@ -532,7 +528,7 @@ const WebMcp = () => {
                 annotations: { readOnlyHint: false },
                 execute: async (input) => {
                     var _a;
-                    var _b, _c, _d, _e, _f, _g, _h;
+                    var _b, _c, _d, _e, _f;
                     if (!(0, OptionalPackageModal_1.isOptionalPackageInstalled)(video_matting_capability_1.VIDEO_MATTING_PACKAGE)) {
                         return missingOptionalPackageResult(video_matting_capability_1.VIDEO_MATTING_PACKAGE);
                     }
@@ -542,7 +538,7 @@ const WebMcp = () => {
                         staticFiles: staticFilesRef.current,
                     });
                     if ((0, get_preview_file_type_1.getPreviewFileType)(assetPath) !== 'video') {
-                        throw new Error('The separation asset must be a video.');
+                        throw new Error('The input asset must be a video.');
                     }
                     const videoMatting = await Promise.resolve().then(() => __importStar(require('@remotion/video-matting')));
                     const modelName = (_b = input.model) !== null && _b !== void 0 ? _b : 'ben2-base';
@@ -555,12 +551,9 @@ const WebMcp = () => {
                     if (!model) {
                         throw new Error(`Unknown video matting model: ${modelName}.`);
                     }
-                    const audio = (_c = input.audio) !== null && _c !== void 0 ? _c : 'base';
-                    if (audio !== 'base' &&
-                        audio !== 'foreground' &&
-                        audio !== 'both' &&
-                        audio !== 'none') {
-                        throw new Error('audio must be base, foreground, both, or none.');
+                    const audio = (_c = input.audio) !== null && _c !== void 0 ? _c : 'keep';
+                    if (audio !== 'keep' && audio !== 'none') {
+                        throw new Error('audio must be keep or none.');
                     }
                     const videoBitrate = (_d = input.videoBitrate) !== null && _d !== void 0 ? _d : 'very-high';
                     if ((typeof videoBitrate !== 'number' ||
@@ -576,39 +569,28 @@ const WebMcp = () => {
                     const src = (0, remotion_1.staticFile)(assetPath);
                     const displayName = (_e = assetPath.split('/').at(-1)) !== null && _e !== void 0 ? _e : assetPath;
                     const baseName = (0, public_output_name_1.getDefaultOutputBaseName)(src, displayName, 'video');
-                    const baseOutputPath = (_f = input.baseOutputPath) !== null && _f !== void 0 ? _f : `${baseName}-base.webm`;
-                    const foregroundOutputPath = (_g = input.foregroundOutputPath) !== null && _g !== void 0 ? _g : `${baseName}-foreground.webm`;
-                    if (typeof baseOutputPath !== 'string' ||
-                        typeof foregroundOutputPath !== 'string') {
-                        throw new Error('Output paths must be strings.');
+                    const outputPath = (_f = input.outputPath) !== null && _f !== void 0 ? _f : `${baseName}-no-background.webm`;
+                    if (typeof outputPath !== 'string') {
+                        throw new Error('Output path must be a string.');
                     }
-                    const baseError = (0, public_output_name_1.validatePublicOutputName)({
-                        extension: '.webm',
-                        outName: baseOutputPath,
-                    });
-                    const foregroundError = (0, public_output_name_1.validatePublicOutputName)({
+                    const outputError = (0, public_output_name_1.validatePublicOutputName)({
                         extension: '.webm',
-                        outName: foregroundOutputPath,
+                        outName: outputPath,
                     });
-                    if (baseError !== null || foregroundError !== null) {
-                        throw new Error((_h = baseError !== null && baseError !== void 0 ? baseError : foregroundError) !== null && _h !== void 0 ? _h : 'Invalid output path.');
-                    }
-                    if (baseOutputPath.normalize('NFC').toLowerCase() ===
-                        foregroundOutputPath.normalize('NFC').toLowerCase()) {
-                        throw new Error('Background and foreground outputs must be different.');
+                    if (outputError !== null) {
+                        throw new Error(outputError);
                     }
                     const jobId = addVideoMattingJob({
                         audio,
-                        baseOutName: baseOutputPath,
                         displayName,
-                        foregroundOutName: foregroundOutputPath,
+                        outName: outputPath,
                         model,
                         src,
+                        target: null,
                         videoBitrate,
                     });
                     return {
-                        baseOutputPath,
-                        foregroundOutputPath,
+                        outputPath,
                         jobId,
                         success: true,
                     };

package/dist/components/composition-drop-preview.js

@@ -14,6 +14,7 @@ const snapCompositionDropPosition = ({ compositionDimensions, destinationDimensi
         key: 'composition-drop-preview',
         dimensions: compositionDimensions,
         uncroppedPoints: null,
+        path: null,
         points: [
             { x: left * scale, y: top * scale },
             { x: right * scale, y: top * scale },

package/dist/components/effect-drag-and-drop.d.ts

@@ -1,18 +1,26 @@
 import { type EffectDragData } from '@remotion/studio-protocol';
 import { type EffectDefinition } from '@remotion/studio-shared';
-import type { SequencePropsSubscriptionKey } from 'remotion';
+import type { SequenceNodePathInfo } from '../helpers/get-timeline-sequence-sort-key';
 export declare const hasEffectDragType: (dataTransfer: DataTransfer) => boolean;
 export declare const hasExplicitEffectDragType: (dataTransfer: DataTransfer) => boolean;
 export declare const getEffectDragData: (dataTransfer: DataTransfer) => EffectDragData | null;
-export declare const addEffectFromDragData: ({ clientId, dragData, fileName, nodePath, }: {
+export declare const addEffectFromDragData: ({ clientId, dragData, fileName, nodePathInfo, selectItems, }: {
     readonly clientId: string;
     readonly dragData: EffectDragData;
     readonly fileName: string;
-    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly selectItems: (items: readonly import("@remotion/canvas").CanvasSelectionItem[], options?: {
+        readonly reveal?: boolean | undefined;
+        readonly revealInInspector?: boolean | undefined;
+    } | undefined) => void;
 }) => Promise<void>;
-export declare const addEffectToSequence: ({ clientId, effect, fileName, nodePath, }: {
+export declare const addEffectToSequence: ({ clientId, effect, fileName, nodePathInfo, selectItems, }: {
     readonly clientId: string;
     readonly effect: EffectDefinition;
     readonly fileName: string;
-    readonly nodePath: SequencePropsSubscriptionKey;
+    readonly nodePathInfo: SequenceNodePathInfo;
+    readonly selectItems: (items: readonly import("@remotion/canvas").CanvasSelectionItem[], options?: {
+        readonly reveal?: boolean | undefined;
+        readonly revealInInspector?: boolean | undefined;
+    } | undefined) => void;
 }) => Promise<void>;

package/dist/components/effect-drag-and-drop.js

@@ -22,16 +22,17 @@ const getEffectDragData = (dataTransfer) => {
     return (parsed === null || parsed === void 0 ? void 0 : parsed.type) === 'effect' ? parsed.data : null;
 };
 exports.getEffectDragData = getEffectDragData;
-const addEffectFromDragData = ({ clientId, dragData, fileName, nodePath, }) => {
+const addEffectFromDragData = ({ clientId, dragData, fileName, nodePathInfo, selectItems, }) => {
     return (0, exports.addEffectToSequence)({
         clientId,
         effect: dragData.effect,
         fileName,
-        nodePath,
+        nodePathInfo,
+        selectItems,
     });
 };
 exports.addEffectFromDragData = addEffectFromDragData;
-const addEffectToSequence = async ({ clientId, effect, fileName, nodePath, }) => {
+const addEffectToSequence = async ({ clientId, effect, fileName, nodePathInfo, selectItems, }) => {
     try {
         const requiredPackage = (0, studio_shared_1.getRequiredPackageForEffectImportPath)(effect.importPath);
         if ((0, browser_studio_operations_1.getBrowserStudioEffectOperations)() === null) {
@@ -39,7 +40,7 @@ const addEffectToSequence = async ({ clientId, effect, fileName, nodePath, }) =>
         }
         const result = await (0, effect_operations_api_1.addEffect)({
             fileName,
-            sequenceNodePath: nodePath,
+            sequenceNodePath: nodePathInfo.sequenceSubscriptionKey,
             effectName: effect.name,
             effectImportPath: effect.importPath,
             effectConfig: effect.config,
@@ -47,7 +48,21 @@ const addEffectToSequence = async ({ clientId, effect, fileName, nodePath, }) =>
         });
         if (!result.success) {
             (0, NotificationCenter_1.showNotification)(result.reason, 4000);
+            return;
         }
+        selectItems([
+            {
+                type: 'sequence-effect',
+                nodePathInfo: {
+                    ...nodePathInfo,
+                    sequenceSubscriptionKey: {
+                        ...nodePathInfo.sequenceSubscriptionKey,
+                        nodePath: result.insertedEffect.nodePath,
+                    },
+                },
+                i: result.insertedEffect.effectIndex,
+            },
+        ], { revealInInspector: true });
     }
     catch (err) {
         (0, NotificationCenter_1.showNotification)(err.message, 4000);