@remotion/studio 4.0.526 → 4.0.528

package/dist/components/Timeline/use-expanded-track-keyframe-rows.js

@@ -62,7 +62,7 @@ const getNodeCanEditEasing = ({ node, nodePath, propStatuses, }) => {
     return ((effectPropStatus === null || effectPropStatus === void 0 ? void 0 : effectPropStatus.status) === 'keyframed' &&
         (0, studio_shared_1.canEditEasingForInterpolationFunction)(effectPropStatus.interpolationFunction));
 };
-const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayOffset, }) => {
+const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayOffset, keyframePlaybackRate, }) => {
     const { getIsExpanded } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksGetterContext);
     const { propStatuses } = (0, react_1.useContext)(remotion_1.Internals.VisualModePropStatusesContext);
     const { getDragOverrides, getEffectDragOverrides } = (0, react_1.useContext)(remotion_1.Internals.VisualModeDragOverridesContext);
@@ -123,6 +123,7 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
             nodePath: nodePathInfo.sequenceSubscriptionKey,
             propStatuses,
             keyframeDisplayOffset,
+            keyframePlaybackRate,
             getDragOverrides,
             getEffectDragOverrides,
             timelinePosition: (0, imperative_state_1.getCurrentFrame)(),
@@ -132,6 +133,7 @@ const useExpandedTrackKeyframeRows = ({ sequence, nodePathInfo, keyframeDisplayO
         getDragOverrides,
         getEffectDragOverrides,
         keyframeDisplayOffset,
+        keyframePlaybackRate,
         nodePathInfo.sequenceSubscriptionKey,
         propStatuses,
     ]);

package/dist/components/Timeline/use-sequence-freeze-frame-menu-item.js

@@ -12,10 +12,14 @@ const isSequenceVisibleAtTimelinePosition = ({ sequence, timelinePosition, }) =>
 };
 exports.isSequenceVisibleAtTimelinePosition = isSequenceVisibleAtTimelinePosition;
 const calculateSequenceFreezeFrame = ({ sequence, sequenceFrameOffset, timelinePosition, }) => {
-    const rawFreezeFrame = Math.round(timelinePosition - sequence.from + sequenceFrameOffset);
-    const minFrame = sequenceFrameOffset;
+    const rawFreezeFrame = (timelinePosition - sequence.from) * sequence.sequencePlaybackRate +
+        sequenceFrameOffset;
+    const minFrame = (Math.ceil(sequence.from) - sequence.from) * sequence.sequencePlaybackRate +
+        sequenceFrameOffset;
     const maxFrame = Number.isFinite(sequence.duration)
-        ? Math.max(minFrame, sequence.duration + sequenceFrameOffset - 1)
+        ? Math.max(minFrame, (Math.ceil(sequence.from + sequence.duration) - 1 - sequence.from) *
+            sequence.sequencePlaybackRate +
+            sequenceFrameOffset)
         : Infinity;
     return Math.min(Math.max(minFrame, rawFreezeFrame), maxFrame);
 };

package/dist/components/Timeline/use-timeline-keyframe-drag.js

@@ -102,7 +102,7 @@ const getTimelineSelectionsAfterEasingKeyframeDrag = ({ delta, selections, targe
 exports.getTimelineSelectionsAfterEasingKeyframeDrag = getTimelineSelectionsAfterEasingKeyframeDrag;
 const getCodeValueForTarget = ({ propStatuses, nodePath, }) => propStatuses[remotion_1.Internals.makeSequencePropsSubscriptionKey(nodePath)];
 const getTimelineKeyframeDragTarget = ({ propStatuses, displayFrame, nodePathInfo, overrideIdsToNodePaths, sequences, }) => {
-    var _a, _b, _c;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
     const field = (0, parse_keyframe_field_from_node_path_1.parseKeyframeFieldFromNodePath)(nodePathInfo.auxiliaryKeys);
     if (field === null) {
         return null;
@@ -132,11 +132,16 @@ const getTimelineKeyframeDragTarget = ({ propStatuses, displayFrame, nodePathInf
         if ((effectPropStatus === null || effectPropStatus === void 0 ? void 0 : effectPropStatus.status) !== 'keyframed') {
             return null;
         }
-        const effectSourceFrame = displayFrame -
-            (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+        const effectSourceFrame = (0, get_timeline_keyframes_1.getKeyframeSourceFrame)({
+            displayFrame,
+            propStatus: effectPropStatus,
+            keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
                 propStatus: effectPropStatus,
                 keyframeDisplayOffset: (_b = track === null || track === void 0 ? void 0 : track.keyframeDisplayOffset) !== null && _b !== void 0 ? _b : 0,
-            });
+                keyframePlaybackRate: (_c = track === null || track === void 0 ? void 0 : track.keyframePlaybackRate) !== null && _c !== void 0 ? _c : 1,
+            }),
+            keyframePlaybackRate: (_d = track === null || track === void 0 ? void 0 : track.keyframePlaybackRate) !== null && _d !== void 0 ? _d : 1,
+        });
         if (!effectPropStatus.keyframes.some((keyframe) => keyframe.frame === effectSourceFrame)) {
             return null;
         }
@@ -151,17 +156,23 @@ const getTimelineKeyframeDragTarget = ({ propStatuses, displayFrame, nodePathInf
             propStatus: effectPropStatus,
             schema: effect.schema,
             sourceFrame: effectSourceFrame,
+            keyframePlaybackRate: (_e = track === null || track === void 0 ? void 0 : track.keyframePlaybackRate) !== null && _e !== void 0 ? _e : 1,
         };
     }
     const sequencePropStatus = sequenceStatus.props[field.fieldKey];
     if ((sequencePropStatus === null || sequencePropStatus === void 0 ? void 0 : sequencePropStatus.status) !== 'keyframed') {
         return null;
     }
-    const sourceFrame = displayFrame -
-        (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
+    const sourceFrame = (0, get_timeline_keyframes_1.getKeyframeSourceFrame)({
+        displayFrame,
+        propStatus: sequencePropStatus,
+        keyframeDisplayOffset: (0, get_timeline_keyframes_1.getKeyframeDisplayOffset)({
             propStatus: sequencePropStatus,
-            keyframeDisplayOffset: (_c = track === null || track === void 0 ? void 0 : track.keyframeDisplayOffset) !== null && _c !== void 0 ? _c : 0,
-        });
+            keyframeDisplayOffset: (_f = track === null || track === void 0 ? void 0 : track.keyframeDisplayOffset) !== null && _f !== void 0 ? _f : 0,
+            keyframePlaybackRate: (_g = track === null || track === void 0 ? void 0 : track.keyframePlaybackRate) !== null && _g !== void 0 ? _g : 1,
+        }),
+        keyframePlaybackRate: (_h = track === null || track === void 0 ? void 0 : track.keyframePlaybackRate) !== null && _h !== void 0 ? _h : 1,
+    });
     if (!sequencePropStatus.keyframes.some((keyframe) => keyframe.frame === sourceFrame)) {
         return null;
     }
@@ -175,6 +186,7 @@ const getTimelineKeyframeDragTarget = ({ propStatuses, displayFrame, nodePathInf
         propStatus: sequencePropStatus,
         schema: sequence.controls.schema,
         sourceFrame,
+        keyframePlaybackRate: (_j = track === null || track === void 0 ? void 0 : track.keyframePlaybackRate) !== null && _j !== void 0 ? _j : 1,
     };
 };
 const getTargetGroupKey = (target) => {
@@ -196,10 +208,11 @@ const groupTargets = (targets) => {
     }
     return [...groups.values()];
 };
-const getMovesForGroup = ({ group, delta, }) => group.map((target) => ({
+const getMoveForTarget = (target, delta) => ({
     fromFrame: target.sourceFrame,
-    toFrame: target.sourceFrame + delta,
-}));
+    toFrame: (0, get_timeline_keyframes_1.resolveKeyframeSourceFrame)(target.sourceFrame + delta * target.keyframePlaybackRate, target.propStatus),
+});
+const getMovesForGroup = ({ group, delta, }) => group.map((target) => getMoveForTarget(target, delta));
 const canMoveTimelineKeyframeDragTargets = ({ targets, delta, }) => groupTargets(targets).every((group) => {
     const [first] = group;
     if (!first) {
@@ -422,8 +435,7 @@ const useTimelineKeyframeDrag = ({ frame, nodePathInfo, onSelect, selectable, se
                     fileName: target.fileName,
                     nodePath: target.nodePath,
                     fieldKey: target.fieldKey,
-                    fromFrame: target.sourceFrame,
-                    toFrame: target.sourceFrame + lastDelta,
+                    ...getMoveForTarget(target, lastDelta),
                     schema: target.schema,
                 })),
                 effectKeyframes: targets
@@ -433,8 +445,7 @@ const useTimelineKeyframeDrag = ({ frame, nodePathInfo, onSelect, selectable, se
                     nodePath: target.nodePath,
                     effectIndex: target.effectIndex,
                     fieldKey: target.fieldKey,
-                    fromFrame: target.sourceFrame,
-                    toFrame: target.sourceFrame + lastDelta,
+                    ...getMoveForTarget(target, lastDelta),
                     schema: target.schema,
                 })),
                 setPropStatuses,
@@ -629,8 +640,7 @@ const useTimelineEasingKeyframeDrag = ({ onSelect, selectable, selected, selecti
                     fileName: target.fileName,
                     nodePath: target.nodePath,
                     fieldKey: target.fieldKey,
-                    fromFrame: target.sourceFrame,
-                    toFrame: target.sourceFrame + lastDelta,
+                    ...getMoveForTarget(target, lastDelta),
                     schema: target.schema,
                 })),
                 effectKeyframes: targets
@@ -640,8 +650,7 @@ const useTimelineEasingKeyframeDrag = ({ onSelect, selectable, selected, selecti
                     nodePath: target.nodePath,
                     effectIndex: target.effectIndex,
                     fieldKey: target.fieldKey,
-                    fromFrame: target.sourceFrame,
-                    toFrame: target.sourceFrame + lastDelta,
+                    ...getMoveForTarget(target, lastDelta),
                     schema: target.schema,
                 })),
                 setPropStatuses,

package/dist/components/TimelineCombobox.js

@@ -20,6 +20,7 @@ const label = {
     textAlign: 'left',
     textOverflow: 'ellipsis',
     userSelect: 'none',
+    WebkitUserSelect: 'none',
     whiteSpace: 'nowrap',
 };
 const TimelineCombobox = ({ values, selectedId, title, tooltipDelay, labelWidth = 32, renderLeftItem, unhoveredIconColor = colors_1.LIGHT_TEXT, }) => {

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

@@ -280,7 +280,7 @@ const AdvancedSettings = ({ chunkLengthInSeconds, doSample, forceFullSequences,
                             title: 'Learn more about No-repeat n-gram size',
                         }, min: 0, name: "No-repeat n-gram size", onValueChanged: setNoRepeatNgramSize, step: 1, value: noRepeatNgramSize })] }), decodingValidationMessage ? (jsx_runtime_1.jsx("div", { id: TRANSCRIPTION_DECODING_MESSAGE_ID, "aria-live": "polite", style: { padding: '0 16px' }, children: jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { align: "flex-end", message: decodingValidationMessage, type: "error" }) })) : null] }));
 };
-const TranscriptionModal = ({ audioStreamIndex, displayName, requestInit, src, }) => {
+const TranscriptionModal = ({ audioStreamIndex, displayName, requestInit, src, target, }) => {
     var _a, _b, _c;
     const [tab, setTab] = (0, react_1.useState)('transcribe');
     const isModelCached = (0, react_1.useCallback)((model) => (0, whisper_webgpu_1.isWhisperModelCached)({ model }), []);
@@ -323,11 +323,16 @@ const TranscriptionModal = ({ audioStreamIndex, displayName, requestInit, src, }
         };
     }, []);
     const normalizedOutName = outName.normalize('NFC').toLowerCase();
-    const queuedOutputExists = captionJobs.some((job) => (job.status === 'idle' || job.status === 'running') &&
+    const queuedOutputExists = captionJobs.some((job) => job.target === null &&
+        (job.status === 'idle' ||
+            job.status === 'running' ||
+            job.status === 'saving') &&
         job.outName.normalize('NFC').toLowerCase() === normalizedOutName);
-    const outputValidationMessage = (_a = (0, caption_output_name_1.validateCaptionOutputName)(outName)) !== null && _a !== void 0 ? _a : (queuedOutputExists
-        ? 'Another caption job is already using this output file'
-        : null);
+    const outputValidationMessage = target === null
+        ? ((_a = (0, caption_output_name_1.validateCaptionOutputName)(outName)) !== null && _a !== void 0 ? _a : (queuedOutputExists
+            ? 'Another caption job is already using this output file'
+            : null))
+        : null;
     const exists = staticFiles.some((file) => file.name.normalize('NFC').toLowerCase() === normalizedOutName);
     const chunkValidationMessage = strideLengthInSeconds * 2 >= chunkLengthInSeconds
         ? 'Stride length must be less than half of chunk length'
@@ -371,7 +376,8 @@ const TranscriptionModal = ({ audioStreamIndex, displayName, requestInit, src, }
             displayName,
             audioStreamIndex,
             requestInit,
-            outName,
+            outName: target === null ? outName : 'Basic captions',
+            target,
             model: selectedModel,
             language: modelInfo.multilingual ? selectedLanguage : null,
             task: modelInfo.supportsTranslation ? selectedTask : 'transcribe',
@@ -398,6 +404,7 @@ const TranscriptionModal = ({ audioStreamIndex, displayName, requestInit, src, }
         forceFullSequences,
         noRepeatNgramSize,
         outName,
+        target,
         repetitionPenalty,
         requestInit,
         src,
@@ -410,17 +417,17 @@ const TranscriptionModal = ({ audioStreamIndex, displayName, requestInit, src, }
         temperature,
         topK,
     ]);
-    return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { ariaLabel: `Transcribe ${displayName}`, children: jsx_runtime_1.jsxs("div", { style: transcriptionModalStyle, children: [
-                jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: `Transcribe ${displayName}` }), jsx_runtime_1.jsxs("div", { style: render_modals_1.container, children: [
+    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: {
                                 ...render_modals_1.buttonStyle,
                                 backgroundColor: canTranscribe
                                     ? render_modals_1.buttonStyle.backgroundColor
                                     : colors_1.BLUE_DISABLED,
-                            }, children: "Transcribe" })
+                            }, children: target === null ? 'Transcribe' : 'Generate captions' })
                     ] }), jsx_runtime_1.jsxs("div", { style: transcriptionLayout, children: [
-                        jsx_runtime_1.jsxs("div", { style: render_modals_1.leftSidebar, children: [jsx_runtime_1.jsx(vertical_1.VerticalTab, { autoFocus: true, style: render_modals_1.horizontalTab, selected: tab === 'transcribe', onClick: () => setTab('transcribe'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(transcription_1.TranscriptionIcon, { color: color, style: render_modals_1.icon }) })), children: "Transcribe" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'models', 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 }) })), children: "Models" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), 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 }) })), children: "Advanced" })] }), jsx_runtime_1.jsxs("div", { style: tab === 'transcribe' ? settingsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [
-                                jsx_runtime_1.jsx(OutputSettings, { exists: exists, onOutNameChange: onOutNameChange, outName: outName, validationMessage: outputValidationMessage }), jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}), jsx_runtime_1.jsx(ModelSettings, { cachedModels: cachedModels, selectedLanguage: selectedLanguage, selectedModel: selectedModel, selectedTask: selectedTask, setSelectedLanguage: setSelectedLanguage, setSelectedModel: setSelectedModel, setSelectedTask: setSelectedTask, supportState: supportState })
+                        jsx_runtime_1.jsxs("div", { style: render_modals_1.leftSidebar, children: [jsx_runtime_1.jsx(vertical_1.VerticalTab, { autoFocus: true, style: render_modals_1.horizontalTab, selected: tab === 'transcribe', onClick: () => setTab('transcribe'), renderIcon: (color) => (jsx_runtime_1.jsx("div", { style: render_modals_1.iconContainer, children: jsx_runtime_1.jsx(transcription_1.TranscriptionIcon, { color: color, style: render_modals_1.icon }) })), children: "Transcribe" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'models', 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 }) })), children: "Models" }), jsx_runtime_1.jsx(vertical_1.VerticalTab, { style: render_modals_1.horizontalTab, selected: tab === 'advanced', onClick: () => setTab('advanced'), 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 }) })), children: "Advanced" })] }), jsx_runtime_1.jsxs("div", { style: tab === 'transcribe' ? settingsPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: [target === null ? (jsx_runtime_1.jsx(OutputSettings, { exists: exists, onOutNameChange: onOutNameChange, outName: outName, validationMessage: outputValidationMessage })) : null, target === null ? jsx_runtime_1.jsx(RenderModalHr_1.RenderModalHr, {}) : null, jsx_runtime_1.jsx(ModelSettings, { cachedModels: cachedModels, selectedLanguage: selectedLanguage, selectedModel: selectedModel, selectedTask: selectedTask, setSelectedLanguage: setSelectedLanguage, setSelectedModel: setSelectedModel, setSelectedTask: setSelectedTask, supportState: supportState })
                             ] }), jsx_runtime_1.jsx("div", { style: tab === 'advanced' ? advancedPanel : hiddenPanel, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsx(AdvancedSettings, { chunkLengthInSeconds: chunkLengthInSeconds, decodingValidationMessage: decodingValidationMessage, doSample: doSample, forceFullSequences: forceFullSequences, noRepeatNgramSize: noRepeatNgramSize, repetitionPenalty: repetitionPenalty, setChunkLengthInSeconds: setChunkLengthInSeconds, setDoSample: setDoSample, setForceFullSequences: setForceFullSequences, setNoRepeatNgramSize: setNoRepeatNgramSize, setRepetitionPenalty: setRepetitionPenalty, setStrideLengthInSeconds: setStrideLengthInSeconds, setTemperature: setTemperature, setTopK: setTopK, strideLengthInSeconds: strideLengthInSeconds, temperature: temperature, topK: topK, validationMessage: chunkValidationMessage }) }), 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/Transcription/TranscriptionModalWithOptionalWhisper.js

@@ -43,6 +43,6 @@ const LazyTranscriptionModal = react_1.default.lazy(async () => {
     return { default: TranscriptionModal };
 });
 const TranscriptionModalWithOptionalWhisper = ({ state }) => {
-    return (jsx_runtime_1.jsx(OptionalPackageModal_1.OptionalPackageModal, { ariaLabel: "Install transcription package", packageName: whisper_webgpu_capability_1.WHISPER_WEBGPU_PACKAGE, title: "Transcribe", children: jsx_runtime_1.jsx(react_1.Suspense, { fallback: null, children: jsx_runtime_1.jsx(LazyTranscriptionModal, { ...state }) }) }));
+    return (jsx_runtime_1.jsx(OptionalPackageModal_1.OptionalPackageModal, { ariaLabel: "Install transcription package", packageName: whisper_webgpu_capability_1.WHISPER_WEBGPU_PACKAGE, title: state.target === null ? 'Transcribe' : 'Generate captions', children: jsx_runtime_1.jsx(react_1.Suspense, { fallback: null, children: jsx_runtime_1.jsx(LazyTranscriptionModal, { ...state }) }) }));
 };
 exports.TranscriptionModalWithOptionalWhisper = TranscriptionModalWithOptionalWhisper;

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/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; }

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,31 +153,30 @@ 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: [
+    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, title: 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.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, title: "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 }) })

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;