@remotion/studio 4.0.527 → 4.0.528

package/dist/components/RenderQueue/CaptionQueueProcessor.js

@@ -11,16 +11,19 @@ const resample_media_to_16_khz_1 = require("../Transcription/resample-media-to-1
 const context_1 = require("./context");
 const load_model_for_job_1 = require("./load-model-for-job");
 const CaptionQueueProcessor = () => {
-    const { updateCaptionJobProgress, markCaptionJobDone, markCaptionJobFailed, setProcessCaptionJobCallback, } = (0, react_1.useContext)(context_1.RenderQueueContext);
+    const { updateCaptionJobProgress, markCaptionJobDone, markCaptionJobFailed, markCaptionJobCancelled, markCaptionJobSaving, getAbortController, setProcessCaptionJobCallback, } = (0, react_1.useContext)(context_1.RenderQueueContext);
     const processJob = (0, react_1.useCallback)(async (job) => {
+        const { signal } = getAbortController(job.id);
         let captionCount = null;
         let processingError = null;
         try {
+            signal.throwIfAborted();
             updateCaptionJobProgress(job.id, {
                 message: 'Checking WebGPU support...',
                 value: 0,
             });
             const support = await (0, whisper_webgpu_1.canUseWhisperWebGpu)();
+            signal.throwIfAborted();
             if (!support.supported) {
                 throw new Error(support.detailedReason);
             }
@@ -29,15 +32,21 @@ const CaptionQueueProcessor = () => {
                 value: 0.02,
             });
             await (0, whisper_webgpu_1.clearStaleModels)();
+            signal.throwIfAborted();
             await (0, load_model_for_job_1.loadModelForJob)({
+                signal,
                 model: job.model,
                 progressStart: 0.03,
                 progressSpan: 0.27,
                 isModelCached: (model) => (0, whisper_webgpu_1.isWhisperModelCached)({ model }),
-                loadModel: (model, onProgress) => (0, whisper_webgpu_1.loadWhisperModel)({
-                    model,
-                    onProgress: (progress) => onProgress(progress.progress),
-                }),
+                loadModel: async (model, onProgress) => {
+                    await (0, whisper_webgpu_1.downloadWhisperModel)({
+                        signal,
+                        model,
+                        onProgress: (progress) => onProgress(progress.progress),
+                    });
+                    await (0, whisper_webgpu_1.loadWhisperModel)({ model, signal });
+                },
                 updateProgress: (progress) => updateCaptionJobProgress(job.id, progress),
             });
             updateCaptionJobProgress(job.id, {
@@ -45,6 +54,7 @@ const CaptionQueueProcessor = () => {
                 value: 0.3,
             });
             const channelWaveform = await (0, resample_media_to_16_khz_1.resampleMediaTo16Khz)({
+                signal,
                 src: job.src,
                 audioStreamIndex: job.audioStreamIndex,
                 requestInit: job.requestInit,
@@ -60,6 +70,7 @@ const CaptionQueueProcessor = () => {
                 value: 0.5,
             });
             const transcription = await (0, whisper_webgpu_1.transcribe)({
+                signal,
                 channelWaveform,
                 model: job.model,
                 task: job.task,
@@ -76,6 +87,8 @@ const CaptionQueueProcessor = () => {
             const { captions } = (0, whisper_webgpu_1.toCaptions)({
                 whisperWebGpuOutput: transcription,
             });
+            signal.throwIfAborted();
+            markCaptionJobSaving(job.id);
             if (job.target === null) {
                 updateCaptionJobProgress(job.id, {
                     message: `Saving ${job.outName}...`,
@@ -121,13 +134,23 @@ const CaptionQueueProcessor = () => {
             // The pipeline is removed from the in-memory registry before disposal.
             // A cleanup failure should not hide a successfully written caption file.
         }
-        if (processingError) {
+        if (signal.aborted) {
+            markCaptionJobCancelled(job.id);
+        }
+        else if (processingError) {
             markCaptionJobFailed(job.id, processingError);
         }
         else {
             markCaptionJobDone(job.id, captionCount !== null && captionCount !== void 0 ? captionCount : 0);
         }
-    }, [markCaptionJobDone, markCaptionJobFailed, updateCaptionJobProgress]);
+    }, [
+        getAbortController,
+        markCaptionJobCancelled,
+        markCaptionJobDone,
+        markCaptionJobFailed,
+        markCaptionJobSaving,
+        updateCaptionJobProgress,
+    ]);
     (0, react_1.useEffect)(() => {
         setProcessCaptionJobCallback(processJob);
         return () => setProcessCaptionJobCallback(null);

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const QueueJobError: React.FC<{
+    readonly error: {
+        message: string;
+        stack: string | undefined;
+    };
+    readonly modalTitle: string;
+}>;

package/dist/components/RenderQueue/QueueJobError.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QueueJobError = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const modals_1 = require("../../state/modals");
+const item_style_1 = require("./item-style");
+const errorStyle = {
+    ...item_style_1.renderQueueItemSubtitleStyle,
+};
+const QueueJobError = ({ error, modalTitle }) => {
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
+    const onClick = (0, react_1.useCallback)((event) => {
+        var _a;
+        event.stopPropagation();
+        setSelectedModal({
+            type: 'queue-job-error',
+            title: modalTitle,
+            error: { message: error.message, stack: (_a = error.stack) !== null && _a !== void 0 ? _a : null },
+        });
+    }, [error, modalTitle, setSelectedModal]);
+    return (jsx_runtime_1.jsx("button", { onClick: onClick, type: "button", style: errorStyle, title: error.message, children: error.message }));
+};
+exports.QueueJobError = QueueJobError;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare const QueueJobErrorModal: React.FC<{
+    readonly title: string;
+    readonly error: {
+        message: string;
+        stack: string | null;
+    };
+}>;

package/dist/components/RenderQueue/QueueJobErrorModal.js

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.QueueJobErrorModal = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const CopyStackTrace_1 = require("../../error-overlay/remotion-overlay/CopyStackTrace");
+const colors_1 = require("../../helpers/colors");
+const modals_1 = require("../../state/modals");
+const Button_1 = require("../Button");
+const layout_1 = require("../layout");
+const is_menu_item_1 = require("../Menu/is-menu-item");
+const ModalContainer_1 = require("../ModalContainer");
+const ModalHeader_1 = require("../ModalHeader");
+const container = {
+    padding: 20,
+    maxWidth: 900,
+    paddingTop: 0,
+};
+const codeBlock = {
+    backgroundColor: colors_1.RENDER_STATUS_BACKGROUND,
+    whiteSpace: 'pre',
+    padding: 12,
+    borderRadius: 4,
+    fontFamily: 'monospace',
+    overflow: 'auto',
+    maxHeight: 300,
+};
+const description = {
+    color: colors_1.LIGHT_TEXT,
+    fontFamily: 'sans-serif',
+    fontSize: 14,
+    lineHeight: 1.5,
+    margin: 0,
+    marginBottom: 12,
+    marginTop: 16,
+};
+const spacer = {
+    height: layout_1.SPACING_UNIT,
+    width: layout_1.SPACING_UNIT,
+};
+const buttonRow = {
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'flex-end',
+};
+const QueueJobErrorModal = ({ title, error }) => {
+    var _a;
+    const { setSelectedModal } = (0, react_1.useContext)(modals_1.SetSelectedModalContext);
+    const onClose = (0, react_1.useCallback)(() => {
+        setSelectedModal(null);
+    }, [setSelectedModal]);
+    const errorDetails = ((_a = error.stack) === null || _a === void 0 ? void 0 : _a.split('\n')[0].includes(error.message))
+        ? error.stack
+        : [error.message, error.stack].filter(Boolean).join('\n');
+    return (jsx_runtime_1.jsxs(ModalContainer_1.ModalContainer, { ariaLabel: title, onOutsideClick: onClose, onEscape: onClose, children: [
+            jsx_runtime_1.jsx(ModalHeader_1.ModalHeader, { title: title }), jsx_runtime_1.jsxs("div", { style: container, children: [
+                    jsx_runtime_1.jsx("p", { style: description, children: "The job failed because of the following error:" }), jsx_runtime_1.jsx("div", { className: is_menu_item_1.HORIZONTAL_SCROLLBAR_CLASSNAME, style: codeBlock, children: errorDetails }), jsx_runtime_1.jsx("div", { style: spacer }), jsx_runtime_1.jsxs("div", { style: buttonRow, children: [
+                            jsx_runtime_1.jsx(CopyStackTrace_1.CopyStackTrace, { errorText: errorDetails }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(Button_1.Button, { onClick: onClose, children: "Close" })
+                        ] })
+                ] })
+        ] }));
+};
+exports.QueueJobErrorModal = QueueJobErrorModal;

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/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", { style: subtitles, title: 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;