@remotion/studio 4.0.527 → 4.0.529

package/dist/components/RenderQueue/RenderQueueItemCancelButton.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
+import type { CaptionJob } from './caption-job-types';
 import type { AnyRenderJob } from './context';
+import type { VideoMattingJob } from './video-matting-job-types';
 export declare const RenderQueueCancelButton: React.FC<{
-    readonly job: AnyRenderJob;
+    readonly job: AnyRenderJob | CaptionJob | VideoMattingJob;
 }>;

package/dist/components/RenderQueue/RenderQueueItemCancelButton.js

@@ -10,18 +10,19 @@ const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const actions_1 = require("./actions");
 const context_1 = require("./context");
 const RenderQueueCancelButton = ({ job }) => {
-    const isClientJob = (0, context_1.isClientRenderJob)(job);
     const { cancelClientJob } = (0, react_1.useContext)(context_1.RenderQueueContext);
     const onClick = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
-        if (isClientJob) {
+        if (job.type === 'caption' ||
+            job.type === 'video-matting' ||
+            (0, context_1.isClientRenderJob)(job)) {
             cancelClientJob(job.id);
             return;
         }
         (0, actions_1.cancelRenderJob)(job).catch((err) => {
             (0, NotificationCenter_1.showNotification)(`Could not cancel job: ${err.message}`, 2000);
         });
-    }, [job, isClientJob, cancelClientJob]);
+    }, [job, cancelClientJob]);
     const icon = (0, react_1.useMemo)(() => {
         return {
             height: 14,
@@ -31,6 +32,12 @@ const RenderQueueCancelButton = ({ job }) => {
     const renderAction = (0, react_1.useCallback)((color) => {
         return (jsx_runtime_1.jsx("svg", { style: icon, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M367.2 412.5L99.5 144.8C77.1 176.1 64 214.5 64 256c0 106 86 192 192 192c41.5 0 79.9-13.1 111.2-35.5zm45.3-45.3C434.9 335.9 448 297.5 448 256c0-106-86-192-192-192c-41.5 0-79.9 13.1-111.2 35.5L412.5 367.2zM512 256c0 141.4-114.6 256-256 256S0 397.4 0 256S114.6 0 256 0S512 114.6 512 256z" }) }));
     }, [icon]);
-    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Cancel", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": "Cancel render", renderAction: renderAction, onClick: onClick, variant: null }) }));
+    return (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Cancel", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { "aria-label": job.type === 'caption'
+                ? 'Cancel transcription'
+                : job.type === 'video-matting'
+                    ? 'outName' in job
+                        ? 'Cancel background removal'
+                        : 'Cancel video matting'
+                    : 'Cancel render', renderAction: renderAction, onClick: onClick, variant: null }) }));
 };
 exports.RenderQueueCancelButton = RenderQueueCancelButton;

package/dist/components/RenderQueue/RenderQueueOutputName.js

@@ -20,6 +20,6 @@ const RenderQueueOutputName = ({ job }) => {
         }
         return job.outName;
     };
-    return (jsx_runtime_1.jsx("span", { style: style, title: getTitle(), children: job.outName }));
+    return (jsx_runtime_1.jsx("span", { role: "group", style: style, "aria-label": getTitle(), children: job.outName }));
 };
 exports.RenderQueueOutputName = RenderQueueOutputName;

package/dist/components/RenderQueue/RenderQueueProgressMessage.js

@@ -27,6 +27,6 @@ const RenderQueueProgressMessage = ({ job }) => {
     const message = isClientJob
         ? (0, client_render_progress_1.getClientRenderProgressMessage)(job.progress)
         : job.progress.message;
-    return (jsx_runtime_1.jsx("button", { onClick: onClick, type: "button", style: outputLocation, tabIndex: tabIndex, title: message, children: message }));
+    return (jsx_runtime_1.jsx("button", { onClick: onClick, type: "button", style: outputLocation, tabIndex: tabIndex, "aria-label": message, children: message }));
 };
 exports.RenderQueueProgressMessage = RenderQueueProgressMessage;

package/dist/components/RenderQueue/RenderQueueRepeat.d.ts

@@ -1,5 +1,7 @@
 import React from 'react';
+import type { CaptionJob } from './caption-job-types';
 import type { AnyRenderJob } from './context';
+import type { VideoMattingJob } from './video-matting-job-types';
 export declare const RenderQueueRepeatItem: React.FC<{
-    readonly job: AnyRenderJob;
+    readonly job: AnyRenderJob | CaptionJob | VideoMattingJob;
 }>;

package/dist/components/RenderQueue/RenderQueueRepeat.js

@@ -11,10 +11,27 @@ const InlineAction_1 = require("../InlineAction");
 const context_1 = require("./context");
 const RenderQueueRepeatItem = ({ job }) => {
     const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
-    const isClientJob = (0, context_1.isClientRenderJob)(job);
     const onClick = (0, react_1.useCallback)((e) => {
         e.stopPropagation();
-        if (isClientJob) {
+        if (job.type === 'caption') {
+            setSelectedModal({
+                type: 'transcribe',
+                src: job.src,
+                displayName: job.displayName,
+                audioStreamIndex: job.audioStreamIndex,
+                requestInit: job.requestInit,
+                target: job.target,
+            });
+        }
+        else if (job.type === 'video-matting') {
+            setSelectedModal({
+                type: 'video-matting',
+                src: job.src,
+                displayName: job.displayName,
+                target: job.target,
+            });
+        }
+        else if ((0, context_1.isClientRenderJob)(job)) {
             const retryPayload = (0, retry_payload_1.makeClientRetryPayload)(job);
             setSelectedModal(retryPayload);
         }
@@ -22,7 +39,7 @@ const RenderQueueRepeatItem = ({ job }) => {
             const retryPayload = (0, retry_payload_1.makeRetryPayload)(job);
             setSelectedModal(retryPayload);
         }
-    }, [job, isClientJob, setSelectedModal]);
+    }, [job, setSelectedModal]);
     const icon = (0, react_1.useMemo)(() => {
         return {
             height: 12,

package/dist/components/RenderQueue/VideoMattingQueueItem.js

@@ -14,6 +14,10 @@ const use_select_asset_1 = require("../use-select-asset");
 const CircularProgress_1 = require("./CircularProgress");
 const context_1 = require("./context");
 const item_style_1 = require("./item-style");
+const QueueJobError_1 = require("./QueueJobError");
+const RenderQueueCancelledMessage_1 = require("./RenderQueueCancelledMessage");
+const RenderQueueItemCancelButton_1 = require("./RenderQueueItemCancelButton");
+const RenderQueueRepeat_1 = require("./RenderQueueRepeat");
 const SuccessIcon_1 = require("./SuccessIcon");
 const container = {
     borderRadius: 4,
@@ -50,12 +54,12 @@ const ellipsisIconStyle = {
     style: { height: 12 },
 };
 const Status = ({ job }) => {
-    if (job.status === 'running') {
-        return (jsx_runtime_1.jsx("div", { style: statusIcon, role: "progressbar", "aria-label": "Video matting progress", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(job.progress.value * 100), "aria-valuetext": job.progress.message, children: jsx_runtime_1.jsx(CircularProgress_1.CircularProgress, { progress: Math.max(0.07, job.progress.value) }) }));
+    if (job.status === 'running' || job.status === 'saving') {
+        return (jsx_runtime_1.jsx("div", { style: statusIcon, role: "progressbar", "aria-label": "Background removal progress", "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(job.progress.value * 100), "aria-valuetext": job.progress.message, children: jsx_runtime_1.jsx(CircularProgress_1.CircularProgress, { progress: Math.max(0.07, job.progress.value) }) }));
     }
     if (job.status === 'done')
         return jsx_runtime_1.jsx(SuccessIcon_1.SuccessIcon, {});
-    if (job.status === 'failed')
+    if (job.status === 'failed' || job.status === 'cancelled')
         return (jsx_runtime_1.jsx("svg", { style: statusIcon, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: colors_1.FAIL_COLOR, d: "M0 160V352L160 512H352L512 352V160L352 0H160L0 160zm353.9 32-64 64 64 64L320 353.9l-64-64-64 64L158.1 320l64-64-64-64L192 158.1l64 64 64-64z" }) }));
     return (jsx_runtime_1.jsx("svg", { style: statusIcon, viewBox: "0 0 512 512", children: jsx_runtime_1.jsx("path", { fill: colors_1.LIGHT_TEXT, d: "M256 512C114.6 512 0 397.4 0 256S114.6 0 256 0s256 114.6 256 256-114.6 256-256 256zM232 120v136c0 8 4 15.5 10.7 20l96 64 26.6-39.9-85.3-56.9V120z" }) }));
 };
@@ -74,50 +78,41 @@ const VideoMattingQueueItem = ({ job, selected }) => {
         WebkitUserSelect: 'none',
     }), [done, hovered, selected]);
     const messages = job.status === 'idle'
-        ? ['Queued for video matting']
-        : job.status === 'running'
+        ? ['Queued for background removal']
+        : job.status === 'running' || job.status === 'saving'
             ? [job.progress.message, job.progress.detail].filter((message) => message !== null)
             : job.status === 'failed'
                 ? [job.error.message]
-                : [job.baseOutName, job.foregroundOutName];
+                : job.status === 'cancelled'
+                    ? ['Cancelled']
+                    : [job.outName];
     const tooltip = messages.join('\n');
     const revealAsset = (0, react_1.useCallback)((assetName) => {
         selectAsset(assetName);
         (0, url_state_1.pushUrl)(`/assets/${assetName}`);
     }, [selectAsset]);
+    const outputName = job.outName;
     const onClick = (0, react_1.useCallback)(() => {
         if (!done)
             return;
-        revealAsset(job.foregroundOutName);
-    }, [done, job.foregroundOutName, revealAsset]);
+        revealAsset(outputName);
+    }, [done, outputName, revealAsset]);
     const revealItems = (0, react_1.useMemo)(() => {
         return [
             {
                 disabled: false,
-                id: 'reveal-foreground',
+                id: 'reveal-output',
                 keyHint: null,
-                label: 'Reveal foreground',
+                label: 'Reveal output',
                 leftItem: null,
-                onClick: () => revealAsset(job.foregroundOutName),
+                onClick: () => revealAsset(outputName),
                 quickSwitcherLabel: null,
                 subMenu: null,
                 type: 'item',
-                value: 'reveal-foreground',
-            },
-            {
-                disabled: false,
-                id: 'reveal-background',
-                keyHint: null,
-                label: 'Reveal background',
-                leftItem: null,
-                onClick: () => revealAsset(job.baseOutName),
-                quickSwitcherLabel: null,
-                subMenu: null,
-                type: 'item',
-                value: 'reveal-background',
+                value: 'reveal-output',
             },
         ];
-    }, [job.baseOutName, job.foregroundOutName, revealAsset]);
+    }, [outputName, revealAsset]);
     const onRemove = (0, react_1.useCallback)((event) => {
         event.stopPropagation();
         removeVideoMattingJob(job.id);
@@ -125,7 +120,9 @@ const VideoMattingQueueItem = ({ job, selected }) => {
     const renderRemove = (0, react_1.useCallback)((color) => (jsx_runtime_1.jsx("svg", { style: removeIcon, viewBox: "0 0 320 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M310.6 150.6 205.3 256l105.3 105.4-45.3 45.3L160 301.3 54.6 406.6 9.4 361.4 114.7 256 9.4 150.6l45.2-45.2L160 210.7l105.3-105.3z" }) })), []);
     return (jsx_runtime_1.jsxs(layout_1.Row, { "data-render-queue-item": job.id, style: style, align: "center", onClick: onClick, onPointerEnter: () => setHovered(true), onPointerLeave: () => setHovered(false), children: [
             jsx_runtime_1.jsx(Status, { job: job }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), jsx_runtime_1.jsxs("div", { style: right, children: [
-                    jsx_runtime_1.jsx("div", { style: title, children: job.displayName }), jsx_runtime_1.jsx("div", { style: subtitles, title: tooltip, children: messages.map((message) => (jsx_runtime_1.jsx("span", { style: subtitle, children: message }, message))) })
-                ] }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), done ? (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Reveal video layer", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { renderAction: (color) => (jsx_runtime_1.jsx(ellipsis_1.EllipsisIcon, { fill: color, svgProps: ellipsisIconStyle })), "aria-label": "Reveal video layer", values: revealItems, variant: null }) })) : null, job.status === 'running' ? null : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Clear", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderRemove, onClick: onRemove, "aria-label": "Clear", variant: null }) }))] }));
+                    jsx_runtime_1.jsx("div", { style: title, children: job.displayName }), jsx_runtime_1.jsx("div", { role: "group", style: subtitles, "aria-label": tooltip, children: job.status === 'cancelled' ? (jsx_runtime_1.jsx(RenderQueueCancelledMessage_1.RenderQueueCancelledMessage, {})) : job.status === 'failed' ? (jsx_runtime_1.jsx(QueueJobError_1.QueueJobError, { error: job.error, modalTitle: "Background removal failed" })) : (messages.map((message) => (jsx_runtime_1.jsx("span", { style: subtitle, children: message }, message)))) })
+                ] }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), done ? (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Reveal output", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineDropdown_1.InlineDropdown, { renderAction: (color) => (jsx_runtime_1.jsx(ellipsis_1.EllipsisIcon, { fill: color, svgProps: ellipsisIconStyle })), "aria-label": "Reveal output", values: revealItems, variant: null }) })) : null, job.status === 'done' ||
+                job.status === 'failed' ||
+                job.status === 'cancelled' ? (jsx_runtime_1.jsx(RenderQueueRepeat_1.RenderQueueRepeatItem, { job: job })) : null, job.status === 'running' ? (jsx_runtime_1.jsx(RenderQueueItemCancelButton_1.RenderQueueCancelButton, { job: job })) : job.status === 'saving' ? null : (jsx_runtime_1.jsx(ActionTooltip_1.ActionTooltip, { label: "Clear", shortcut: null, delay: 800, dismissOnClick: true, children: jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderRemove, onClick: onRemove, "aria-label": "Clear", variant: null }) }))] }));
 };
 exports.VideoMattingQueueItem = VideoMattingQueueItem;

package/dist/components/RenderQueue/VideoMattingQueueProcessor.js

@@ -4,41 +4,51 @@ exports.VideoMattingQueueProcessor = void 0;
 const video_matting_1 = require("@remotion/video-matting");
 const react_1 = require("react");
 const write_static_file_1 = require("../../api/write-static-file");
+const browser_studio_operations_1 = require("../../helpers/browser-studio-operations");
+const call_api_1 = require("../call-api");
 const context_1 = require("./context");
 const load_model_for_job_1 = require("./load-model-for-job");
 const VideoMattingQueueProcessor = () => {
-    const { markVideoMattingJobDone, markVideoMattingJobFailed, setProcessVideoMattingJobCallback, updateVideoMattingJobProgress, } = (0, react_1.useContext)(context_1.RenderQueueContext);
+    const { markVideoMattingJobDone, markVideoMattingJobFailed, markVideoMattingJobCancelled, markVideoMattingJobSaving, getAbortController, setProcessVideoMattingJobCallback, updateVideoMattingJobProgress, } = (0, react_1.useContext)(context_1.RenderQueueContext);
     const processJob = (0, react_1.useCallback)(async (job) => {
-        let outputs = null;
+        const { signal } = getAbortController(job.id);
+        let output = null;
         let processingError = null;
         try {
+            signal.throwIfAborted();
             updateVideoMattingJobProgress(job.id, {
                 detail: null,
                 message: 'Checking WebGPU support...',
                 value: 0,
             });
             const support = await (0, video_matting_1.canUseVideoMatting)({ model: job.model });
+            signal.throwIfAborted();
             if (!support.supported) {
                 throw new Error(support.detailedReason);
             }
             await (0, load_model_for_job_1.loadModelForJob)({
+                signal,
                 model: job.model,
                 progressStart: 0,
                 progressSpan: 0.2,
                 isModelCached: (model) => (0, video_matting_1.isVideoMattingModelCached)({ model }),
-                loadModel: (model, onProgress) => (0, video_matting_1.loadVideoMattingModel)({
-                    model,
-                    onProgress: (progress) => onProgress(progress.progress),
-                }),
+                loadModel: async (model, onProgress) => {
+                    await (0, video_matting_1.downloadVideoMattingModel)({
+                        signal,
+                        model,
+                        onProgress: (progress) => onProgress(progress.progress),
+                    });
+                    await (0, video_matting_1.loadVideoMattingModel)({ model, signal });
+                },
                 updateProgress: (progress) => updateVideoMattingJobProgress(job.id, {
                     ...progress,
                     detail: null,
                 }),
             });
-            outputs = await (0, video_matting_1.separateVideoLayers)({
+            const mattingOptions = {
+                signal,
                 src: job.src,
                 model: job.model,
-                audio: job.audio,
                 videoBitrate: job.videoBitrate,
                 onProgress: (progress) => {
                     var _a;
@@ -47,51 +57,81 @@ const VideoMattingQueueProcessor = () => {
                             ? `Processed ${progress.processedFrames} ${progress.processedFrames === 1 ? 'frame' : 'frames'}`
                             : `Processed ${progress.processedFrames} ${progress.processedFrames === 1 ? 'frame' : 'frames'} · ${Math.round(progress.progress * 100)}%`,
                         message: progress.stage === 'finalizing'
-                            ? 'Finalizing video layers...'
-                            : 'Separating foreground...',
+                            ? 'Finalizing video...'
+                            : 'Removing background...',
                         value: 0.2 + ((_a = progress.progress) !== null && _a !== void 0 ? _a : 1) * 0.65,
                     });
                 },
+            };
+            output = await video_matting_1.VideoMattingInternals.removeVideoBackground({
+                ...mattingOptions,
+                audio: job.audio,
             });
+            if (output === null) {
+                throw new Error('Video matting produced no output.');
+            }
+            signal.throwIfAborted();
             updateVideoMattingJobProgress(job.id, {
                 detail: null,
-                message: 'Saving video layers...',
+                message: 'Saving video...',
                 value: 0.88,
             });
-            const [base, foreground] = await Promise.all([
-                outputs.base.getBlob(),
-                outputs.foreground.getBlob(),
-            ]);
-            await Promise.all([
-                base
-                    .arrayBuffer()
-                    .then((contents) => (0, write_static_file_1.writeStaticFile)({ contents, filePath: job.baseOutName })),
-                foreground
-                    .arrayBuffer()
-                    .then((contents) => (0, write_static_file_1.writeStaticFile)({ contents, filePath: job.foregroundOutName })),
-            ]);
+            const video = await output.video.getBlob();
+            signal.throwIfAborted();
+            markVideoMattingJobSaving(job.id);
+            await video
+                .arrayBuffer()
+                .then((contents) => (0, write_static_file_1.writeStaticFile)({ contents, filePath: job.outName }));
+            if (job.target !== null) {
+                updateVideoMattingJobProgress(job.id, {
+                    detail: null,
+                    message: 'Replacing video source...',
+                    value: 0.97,
+                });
+                const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+                const request = {
+                    fileName: job.target.fileName,
+                    nodePath: job.target.nodePath.nodePath,
+                    src: job.outName,
+                };
+                const replaceSource = browserStudioOperations === null || browserStudioOperations === void 0 ? void 0 : browserStudioOperations.replaceVideoSource;
+                if (browserStudioOperations && !replaceSource) {
+                    throw new Error('Browser Studio cannot replace the video source.');
+                }
+                const response = replaceSource
+                    ? await replaceSource(request)
+                    : await (0, call_api_1.callApi)('/api/replace-video-source', request);
+                if (!response.success) {
+                    throw new Error(response.reason);
+                }
+            }
         }
         catch (error) {
             processingError =
                 error instanceof Error ? error : new Error(String(error));
         }
+        if (output) {
+            await Promise.allSettled([output.video.dispose()]);
+        }
         try {
-            await Promise.all([
-                outputs === null || outputs === void 0 ? void 0 : outputs.base.dispose(),
-                outputs === null || outputs === void 0 ? void 0 : outputs.foreground.dispose(),
-            ]);
             await (0, video_matting_1.disposeVideoMattingModel)({ model: job.model });
         }
         catch (_a) {
             // Cleanup errors must not hide successfully written outputs.
         }
-        if (processingError) {
+        if (signal.aborted) {
+            markVideoMattingJobCancelled(job.id);
+        }
+        else if (processingError) {
             markVideoMattingJobFailed(job.id, processingError);
         }
         else {
             markVideoMattingJobDone(job.id);
         }
     }, [
+        getAbortController,
+        markVideoMattingJobCancelled,
+        markVideoMattingJobSaving,
         markVideoMattingJobDone,
         markVideoMattingJobFailed,
         updateVideoMattingJobProgress,

package/dist/components/RenderQueue/caption-job-types.d.ts

@@ -7,7 +7,9 @@ export type CaptionJobProgress = {
 type CaptionJobStatus = {
     status: 'idle';
 } | {
-    status: 'running';
+    status: 'cancelled';
+} | {
+    status: 'running' | 'saving';
     progress: CaptionJobProgress;
 } | {
     status: 'done';

package/dist/components/RenderQueue/context.d.ts

@@ -32,12 +32,16 @@ type RenderQueueContextType = {
     updateCaptionJobProgress: (jobId: string, progress: CaptionJobProgress) => void;
     markCaptionJobDone: (jobId: string, captionCount: number) => void;
     markCaptionJobFailed: (jobId: string, error: Error) => void;
+    markCaptionJobCancelled: (jobId: string) => void;
+    markCaptionJobSaving: (jobId: string) => void;
     removeCaptionJob: (jobId: string) => void;
     setProcessCaptionJobCallback: (callback: ((job: CaptionJob) => Promise<void>) | null) => void;
     addVideoMattingJob: (params: AddVideoMattingJobParams) => string;
     updateVideoMattingJobProgress: (jobId: string, progress: VideoMattingJobProgress) => void;
     markVideoMattingJobDone: (jobId: string) => void;
     markVideoMattingJobFailed: (jobId: string, error: Error) => void;
+    markVideoMattingJobCancelled: (jobId: string) => void;
+    markVideoMattingJobSaving: (jobId: string) => void;
     removeVideoMattingJob: (jobId: string) => void;
     setProcessVideoMattingJobCallback: (callback: ((job: VideoMattingJob) => Promise<void>) | null) => void;
     getAbortController: (jobId: string) => AbortController;

package/dist/components/RenderQueue/context.js

@@ -68,12 +68,16 @@ exports.RenderQueueContext = react_1.default.createContext({
     updateCaptionJobProgress: noop,
     markCaptionJobDone: noop,
     markCaptionJobFailed: noop,
+    markCaptionJobCancelled: noop,
+    markCaptionJobSaving: noop,
     removeCaptionJob: noop,
     setProcessCaptionJobCallback: noop,
     addVideoMattingJob: noopString,
     updateVideoMattingJobProgress: noop,
     markVideoMattingJobDone: noop,
     markVideoMattingJobFailed: noop,
+    markVideoMattingJobCancelled: noop,
+    markVideoMattingJobSaving: noop,
     removeVideoMattingJob: noop,
     setProcessVideoMattingJobCallback: noop,
     getAbortController: () => new AbortController(),
@@ -89,8 +93,12 @@ const RenderQueueContextProvider = ({ children }) => {
     const hasActiveLocalJob = clientJobs.some((job) => job.status === 'idle' ||
         job.status === 'running' ||
         job.status === 'saving') ||
-        captionJobs.some((job) => job.status === 'idle' || job.status === 'running') ||
-        videoMattingJobs.some((job) => job.status === 'idle' || job.status === 'running');
+        captionJobs.some((job) => job.status === 'idle' ||
+            job.status === 'running' ||
+            job.status === 'saving') ||
+        videoMattingJobs.some((job) => job.status === 'idle' ||
+            job.status === 'running' ||
+            job.status === 'saving');
     const [currentlyProcessing, setCurrentlyProcessing] = (0, react_1.useState)(null);
     const lastLocalJobStartedAt = (0, react_1.useRef)(clientJobs.reduce((latest, job) => Math.max(latest, job.startedAt), 0));
     const processJobCallbackRef = (0, react_1.useRef)(null);
@@ -154,7 +162,9 @@ const RenderQueueContextProvider = ({ children }) => {
                     status: 'running',
                     progress: {
                         detail: null,
-                        message: 'Starting video matting...',
+                        message: 'outName' in job
+                            ? 'Starting background removal...'
+                            : 'Starting video matting...',
                         value: 0,
                     },
                 }
@@ -283,17 +293,20 @@ const RenderQueueContextProvider = ({ children }) => {
         return id;
     }, [getLocalJobStartedAt]);
     const updateCaptionJobProgress = (0, react_1.useCallback)((jobId, progress) => {
-        setCaptionJobs((prev) => prev.map((job) => job.id === jobId
-            ? { ...job, status: 'running', progress }
+        setCaptionJobs((prev) => prev.map((job) => job.id === jobId &&
+            (job.status === 'running' || job.status === 'saving')
+            ? { ...job, progress }
             : job));
     }, []);
     const markCaptionJobDone = (0, react_1.useCallback)((jobId, captionCount) => {
+        (0, client_render_queue_1.deleteAbortController)(jobId);
         setCaptionJobs((prev) => prev.map((job) => job.id === jobId
             ? { ...job, status: 'done', captionCount }
             : job));
         setCurrentlyProcessing((current) => (current === jobId ? null : current));
     }, []);
     const markCaptionJobFailed = (0, react_1.useCallback)((jobId, error) => {
+        (0, client_render_queue_1.deleteAbortController)(jobId);
         setCaptionJobs((prev) => prev.map((job) => job.id === jobId
             ? {
                 ...job,
@@ -303,12 +316,24 @@ const RenderQueueContextProvider = ({ children }) => {
             : job));
         setCurrentlyProcessing((current) => (current === jobId ? null : current));
     }, []);
+    const markCaptionJobCancelled = (0, react_1.useCallback)((jobId) => {
+        (0, client_render_queue_1.deleteAbortController)(jobId);
+        setCaptionJobs((prev) => prev.map((job) => job.id === jobId ? { ...job, status: 'cancelled' } : job));
+        setCurrentlyProcessing((current) => (current === jobId ? null : current));
+    }, []);
+    const markCaptionJobSaving = (0, react_1.useCallback)((jobId) => {
+        setCaptionJobs((prev) => prev.map((job) => job.id === jobId && job.status === 'running'
+            ? { ...job, status: 'saving' }
+            : job));
+    }, []);
     const removeCaptionJob = (0, react_1.useCallback)((jobId) => {
         setCaptionJobs((prev) => {
             const jobToRemove = prev.find((job) => job.id === jobId);
-            if ((jobToRemove === null || jobToRemove === void 0 ? void 0 : jobToRemove.status) === 'running') {
+            if ((jobToRemove === null || jobToRemove === void 0 ? void 0 : jobToRemove.status) === 'running' ||
+                (jobToRemove === null || jobToRemove === void 0 ? void 0 : jobToRemove.status) === 'saving') {
                 return prev;
             }
+            (0, client_render_queue_1.deleteAbortController)(jobId);
             return prev.filter((job) => job.id !== jobId);
         });
     }, []);
@@ -333,13 +358,18 @@ const RenderQueueContextProvider = ({ children }) => {
         return id;
     }, [getLocalJobStartedAt]);
     const updateVideoMattingJobProgress = (0, react_1.useCallback)((jobId, progress) => {
-        setVideoMattingJobs((prev) => prev.map((job) => job.id === jobId ? { ...job, status: 'running', progress } : job));
+        setVideoMattingJobs((prev) => prev.map((job) => job.id === jobId &&
+            (job.status === 'running' || job.status === 'saving')
+            ? { ...job, progress }
+            : job));
     }, []);
     const markVideoMattingJobDone = (0, react_1.useCallback)((jobId) => {
+        (0, client_render_queue_1.deleteAbortController)(jobId);
         setVideoMattingJobs((prev) => prev.map((job) => (job.id === jobId ? { ...job, status: 'done' } : job)));
         setCurrentlyProcessing((current) => (current === jobId ? null : current));
     }, []);
     const markVideoMattingJobFailed = (0, react_1.useCallback)((jobId, error) => {
+        (0, client_render_queue_1.deleteAbortController)(jobId);
         setVideoMattingJobs((prev) => prev.map((job) => job.id === jobId
             ? {
                 ...job,
@@ -349,12 +379,24 @@ const RenderQueueContextProvider = ({ children }) => {
             : job));
         setCurrentlyProcessing((current) => (current === jobId ? null : current));
     }, []);
+    const markVideoMattingJobCancelled = (0, react_1.useCallback)((jobId) => {
+        (0, client_render_queue_1.deleteAbortController)(jobId);
+        setVideoMattingJobs((prev) => prev.map((job) => job.id === jobId ? { ...job, status: 'cancelled' } : job));
+        setCurrentlyProcessing((current) => (current === jobId ? null : current));
+    }, []);
+    const markVideoMattingJobSaving = (0, react_1.useCallback)((jobId) => {
+        setVideoMattingJobs((prev) => prev.map((job) => job.id === jobId && job.status === 'running'
+            ? { ...job, status: 'saving' }
+            : job));
+    }, []);
     const removeVideoMattingJob = (0, react_1.useCallback)((jobId) => {
         setVideoMattingJobs((prev) => {
             const jobToRemove = prev.find((job) => job.id === jobId);
-            if ((jobToRemove === null || jobToRemove === void 0 ? void 0 : jobToRemove.status) === 'running') {
+            if ((jobToRemove === null || jobToRemove === void 0 ? void 0 : jobToRemove.status) === 'running' ||
+                (jobToRemove === null || jobToRemove === void 0 ? void 0 : jobToRemove.status) === 'saving') {
                 return prev;
             }
+            (0, client_render_queue_1.deleteAbortController)(jobId);
             return prev.filter((job) => job.id !== jobId);
         });
     }, []);
@@ -408,12 +450,16 @@ const RenderQueueContextProvider = ({ children }) => {
             updateCaptionJobProgress,
             markCaptionJobDone,
             markCaptionJobFailed,
+            markCaptionJobCancelled,
+            markCaptionJobSaving,
             removeCaptionJob,
             setProcessCaptionJobCallback,
             addVideoMattingJob,
             updateVideoMattingJobProgress,
             markVideoMattingJobDone,
             markVideoMattingJobFailed,
+            markVideoMattingJobCancelled,
+            markVideoMattingJobSaving,
             removeVideoMattingJob,
             setProcessVideoMattingJobCallback,
             getAbortController: client_render_queue_1.getAbortController,
@@ -438,12 +484,16 @@ const RenderQueueContextProvider = ({ children }) => {
         updateCaptionJobProgress,
         markCaptionJobDone,
         markCaptionJobFailed,
+        markCaptionJobCancelled,
+        markCaptionJobSaving,
         removeCaptionJob,
         setProcessCaptionJobCallback,
         addVideoMattingJob,
         updateVideoMattingJobProgress,
         markVideoMattingJobDone,
         markVideoMattingJobFailed,
+        markVideoMattingJobCancelled,
+        markVideoMattingJobSaving,
         removeVideoMattingJob,
         setProcessVideoMattingJobCallback,
     ]);

package/dist/components/RenderQueue/index.js

@@ -115,8 +115,7 @@ const RenderQueue = () => {
                 }
                 if ((0, video_matting_job_types_1.isVideoMattingJob)(job) &&
                     job.status === 'done' &&
-                    (canvasContent.asset === job.baseOutName ||
-                        canvasContent.asset === job.foregroundOutName)) {
+                    canvasContent.asset === job.outName) {
                     return i;
                 }
             }
@@ -125,7 +124,7 @@ const RenderQueue = () => {
     }, [allJobs, canvasContent]);
     if (jobCount === 0) {
         return (jsx_runtime_1.jsxs("div", { style: explainer, children: [
-                jsx_runtime_1.jsx(layout_1.Spacing, { y: 5 }), jsx_runtime_1.jsx("div", { style: errorExplanation, children: "Renders, transcriptions and video matting jobs will show up here." }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2, block: true })
+                jsx_runtime_1.jsx(layout_1.Spacing, { y: 5 }), jsx_runtime_1.jsx("div", { style: errorExplanation, children: "Renders, transcriptions and background removal jobs will show up here." }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2, block: true })
             ] }));
     }
     return (jsx_runtime_1.jsx("div", { ref: divRef, style: renderQueue, className: ['css-reset', is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME].join(' '), children: allJobs.map((job, index) => {

package/dist/components/RenderQueue/load-model-for-job.d.ts

@@ -1,7 +1,8 @@
-export declare const loadModelForJob: <Model extends string>({ isModelCached, loadModel, model, progressSpan, progressStart, updateProgress, }: {
+export declare const loadModelForJob: <Model extends string>({ isModelCached, loadModel, model, signal, progressSpan, progressStart, updateProgress, }: {
     isModelCached: (model: Model) => Promise<boolean>;
     loadModel: (model: Model, onProgress: (progress: number | null) => void) => Promise<unknown>;
     model: Model;
+    signal: AbortSignal;
     progressSpan: number;
     progressStart: number;
     updateProgress: (progress: {

package/dist/components/RenderQueue/load-model-for-job.js

@@ -1,14 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.loadModelForJob = void 0;
-const loadModelForJob = async ({ isModelCached, loadModel, model, progressSpan, progressStart, updateProgress, }) => {
+const loadModelForJob = async ({ isModelCached, loadModel, model, signal, progressSpan, progressStart, updateProgress, }) => {
+    signal.throwIfAborted();
     const cached = await isModelCached(model);
+    signal.throwIfAborted();
     await loadModel(model, (progress) => {
+        signal.throwIfAborted();
         const percentage = progress === null ? '' : ` ${Math.round(progress * 100)}%`;
         updateProgress({
             message: `${cached ? 'Loading' : 'Downloading'} ${model}${percentage}`,
             value: progressStart + (progress !== null && progress !== void 0 ? progress : 0) * progressSpan,
         });
     });
+    signal.throwIfAborted();
 };
 exports.loadModelForJob = loadModelForJob;