@remotion/studio 4.0.526 → 4.0.528

package/dist/components/RenderModal/DataEditor.js

@@ -274,6 +274,9 @@ const DataEditor = ({ unresolvedComposition, defaultProps, setDefaultProps, prop
     if (!unresolvedComposition.defaultProps) {
         return jsx_runtime_1.jsx(SchemaErrorMessages_1.NoDefaultProps, { mode: schemaErrorMode });
     }
+    // <Composition> normalizes omitted defaultProps to an empty object.
+    // Avoid rendering field editors with undefined values in that case.
+    const emptyDefaultPropsAreInvalid = Object.keys(defaultProps).length === 0 && !zodValidationResult.success;
     const shouldRenderControlRow = !hideModeControls || (!hideWarningButton && warnings.length > 0);
     const shouldRenderWarningMessages = showWarning && warnings.length > 0;
     const compactLayout = layout === 'inspector';
@@ -284,6 +287,6 @@ const DataEditor = ({ unresolvedComposition, defaultProps, setDefaultProps, prop
                                 jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: warning.message, align: "flex-start", type: "warning", size: compactLayout ? 'compact' : 'default', action: warning.resolveLink ? (jsx_runtime_1.jsx("a", { href: warning.resolveLink, target: "_blank", rel: "noopener noreferrer", style: compactLayout
                                             ? compactResolveLinkStyle
                                             : resolveLinkStyle, children: "Resolve" })) : null })] }, warning.id)))
-                        : null] })) : null, mode === 'schema' ? (jsx_runtime_1.jsx(SchemaEditor_1.SchemaEditor, { value: defaultProps, setValue: setDefaultProps, schema: schema, scrollableContainer: !compactLayout, contentInset: compactLayout ? InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING : undefined, errorMode: schemaErrorMode })) : (jsx_runtime_1.jsx(RenderModalJSONPropsEditor_1.RenderModalJSONPropsEditor, { value: defaultProps !== null && defaultProps !== void 0 ? defaultProps : {}, setValue: jsonEditorSetValue, onSave: onSave, serializedJSON: serializedJSON, defaultProps: unresolvedComposition.defaultProps, schema: schema, compositionId: unresolvedComposition.id, layout: layout }))] }));
+                        : null] })) : null, mode === 'schema' ? (emptyDefaultPropsAreInvalid ? (jsx_runtime_1.jsx(SchemaErrorMessages_1.InvalidDefaultProps, { zodValidationResult: zodValidationResult })) : (jsx_runtime_1.jsx(SchemaEditor_1.SchemaEditor, { value: defaultProps, setValue: setDefaultProps, schema: schema, scrollableContainer: !compactLayout, contentInset: compactLayout ? InspectorPanelLayout_1.INSPECTOR_PANEL_HORIZONTAL_PADDING : undefined, errorMode: schemaErrorMode }))) : (jsx_runtime_1.jsx(RenderModalJSONPropsEditor_1.RenderModalJSONPropsEditor, { value: defaultProps !== null && defaultProps !== void 0 ? defaultProps : {}, setValue: jsonEditorSetValue, onSave: onSave, serializedJSON: serializedJSON, defaultProps: unresolvedComposition.defaultProps, schema: schema, compositionId: unresolvedComposition.id, layout: layout }))] }));
 };
 exports.DataEditor = DataEditor;

package/dist/components/RenderModal/SchemaEditor/create-zod-values.js

@@ -1,7 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.createZodValues = void 0;
-const colors_1 = require("../../../helpers/colors");
 const zod_schema_type_1 = require("./zod-schema-type");
 const createZodValues = (schema, zodRuntime, zodTypes) => {
     var _a;
@@ -14,7 +13,7 @@ const createZodValues = (schema, zodRuntime, zodTypes) => {
     const description = (0, zod_schema_type_1.getZodSchemaDescription)(schema);
     if (zodTypes) {
         if (description === zodTypes.ZodZypesInternals.REMOTION_COLOR_BRAND) {
-            return colors_1.WHITE_FULL_HEX;
+            return '#ffffff';
         }
         if (description === zodTypes.ZodZypesInternals.REMOTION_TEXTAREA_BRAND) {
             return '';

package/dist/components/RenderModal/WebRenderModalPicture.js

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.WebRenderModalPicture = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const colors_1 = require("../../helpers/colors");
 const Checkbox_1 = require("../Checkbox");
 const ComboBox_1 = require("../NewComposition/ComboBox");
 const layout_1 = require("./layout");
@@ -23,7 +22,7 @@ const WebRenderModalPicture = ({ renderMode, videoBitrate, setVideoBitrate, keyf
                     jsx_runtime_1.jsxs("div", { style: layout_1.optionRow, children: [
                             jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Quality" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(ComboBox_1.Combobox, { values: qualityOptions, selectedId: videoBitrate, title: "Quality" }) })
                         ] }), jsx_runtime_1.jsx(NumberSetting_1.NumberSetting, { name: "Keyframe Interval", formatter: (v) => `${v}s`, min: 1, max: 300, step: 1, value: keyframeIntervalInSeconds, onValueChanged: setKeyframeIntervalInSeconds }), jsx_runtime_1.jsxs("div", { style: layout_1.optionRow, children: [
-                            jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Transparent" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: transparent, onChange: onTransparentChanged, name: colors_1.TRANSPARENT }) })
+                            jsx_runtime_1.jsx("div", { style: layout_1.label, children: "Transparent" }), jsx_runtime_1.jsx("div", { style: layout_1.rightRow, children: jsx_runtime_1.jsx(Checkbox_1.Checkbox, { checked: transparent, onChange: onTransparentChanged, name: "transparent" }) })
                         ] })
                 ] }))] }));
 };

package/dist/components/RenderQueue/CaptionQueueItem.js

@@ -12,6 +12,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 = {
     padding: 12,
@@ -53,13 +57,13 @@ const removeIcon = {
     color: colors_1.CURRENT_COLOR,
 };
 const CaptionJobStatus = ({ job }) => {
-    if (job.status === 'running') {
+    if (job.status === 'running' || job.status === 'saving') {
         return (jsx_runtime_1.jsx("div", { style: statusIcon, role: "progressbar", "aria-label": "Caption job progress", "aria-valuetext": job.progress.message, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": Math.round(job.progress.value * 100), 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 32l-17 17-47 47 47 47 17 17L320 353.9l-17-17-47-47-47 47-17 17L158.1 320l17-17 47-47-47-47-17-17L192 158.1l17 17 47 47 47-47 17-17L353.9 192z" }) }));
     }
     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 0S512 114.6 512 256s-114.6 256-256 256zM232 120V256c0 8 4 15.5 10.7 20l96 64c11 7.4 25.9 4.4 33.3-6.7s4.4-25.9-6.7-33.3L280 243.2V120c0-13.3-10.7-24-24-24s-24 10.7-24 24z" }) }));
@@ -68,7 +72,7 @@ const CaptionQueueItem = ({ job, selected }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const { removeCaptionJob } = (0, react_1.useContext)(context_1.RenderQueueContext);
     const selectAsset = (0, use_select_asset_1.useSelectAsset)();
-    const isHoverable = job.status === 'done';
+    const isHoverable = job.status === 'done' && job.target === null;
     const containerStyle = (0, react_1.useMemo)(() => {
         return {
             ...container,
@@ -95,6 +99,9 @@ const CaptionQueueItem = ({ job, selected }) => {
         if (job.status !== 'done') {
             return;
         }
+        if (job.target !== null) {
+            return;
+        }
         selectAsset(job.outName);
         (0, url_state_1.pushUrl)(`/assets/${job.outName}`);
     }, [job, selectAsset]);
@@ -114,17 +121,22 @@ const CaptionQueueItem = ({ job, selected }) => {
         if (job.status === 'idle') {
             return 'Queued for transcription';
         }
-        if (job.status === 'running') {
+        if (job.status === 'running' || job.status === 'saving') {
             return job.progress.message;
         }
+        if (job.status === 'cancelled') {
+            return 'Cancelled';
+        }
         if (job.status === 'failed') {
             return job.error.message;
         }
-        return job.outName;
+        return job.target === null ? job.outName : 'Captions added to composition';
     }, [job]);
     return (jsx_runtime_1.jsxs(layout_1.Row, { "data-render-queue-item": job.id, style: containerStyle, align: "center", onClick: onClick, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, className: selected ? item_style_1.RENDER_QUEUE_ITEM_SELECTED_CLASSNAME : undefined, children: [
             jsx_runtime_1.jsx(CaptionJobStatus, { 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: subtitleContainer, children: jsx_runtime_1.jsx("span", { style: subtitle, title: message, children: message }) })
-                ] }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), 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: renderRemoveAction, onClick: onRemove, "aria-label": "Clear", variant: null }) }))] }));
+                    jsx_runtime_1.jsx("div", { style: title, children: job.displayName }), jsx_runtime_1.jsx("div", { style: subtitleContainer, 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: "Transcription failed" })) : (jsx_runtime_1.jsx("span", { style: subtitle, title: message, children: message })) })
+                ] }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), 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: renderRemoveAction, onClick: onRemove, "aria-label": "Clear", variant: null }) }))] }));
 };
 exports.CaptionQueueItem = CaptionQueueItem;

package/dist/components/RenderQueue/CaptionQueueProcessor.js

@@ -4,20 +4,26 @@ exports.CaptionQueueProcessor = void 0;
 const whisper_webgpu_1 = require("@remotion/whisper-webgpu");
 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 install_required_package_1 = require("../../helpers/install-required-package");
+const call_api_1 = require("../call-api");
 const resample_media_to_16_khz_1 = require("../Transcription/resample-media-to-16-khz");
 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);
             }
@@ -26,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, {
@@ -42,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,
@@ -57,6 +70,7 @@ const CaptionQueueProcessor = () => {
                 value: 0.5,
             });
             const transcription = await (0, whisper_webgpu_1.transcribe)({
+                signal,
                 channelWaveform,
                 model: job.model,
                 task: job.task,
@@ -73,14 +87,40 @@ const CaptionQueueProcessor = () => {
             const { captions } = (0, whisper_webgpu_1.toCaptions)({
                 whisperWebGpuOutput: transcription,
             });
-            updateCaptionJobProgress(job.id, {
-                message: `Saving ${job.outName}...`,
-                value: 0.95,
-            });
-            await (0, write_static_file_1.writeStaticFile)({
-                contents: JSON.stringify(captions, null, 2),
-                filePath: job.outName,
-            });
+            signal.throwIfAborted();
+            markCaptionJobSaving(job.id);
+            if (job.target === null) {
+                updateCaptionJobProgress(job.id, {
+                    message: `Saving ${job.outName}...`,
+                    value: 0.95,
+                });
+                await (0, write_static_file_1.writeStaticFile)({
+                    contents: JSON.stringify(captions, null, 2),
+                    filePath: job.outName,
+                });
+            }
+            else {
+                updateCaptionJobProgress(job.id, {
+                    message: 'Adding Basic captions...',
+                    value: 0.95,
+                });
+                await (0, install_required_package_1.installRequiredPackages)([
+                    { name: '@remotion/captions', version: null },
+                ]);
+                const request = {
+                    fileName: job.target.fileName,
+                    nodePath: job.target.nodePath.nodePath,
+                    durationInFrames: job.target.durationInFrames,
+                    captions,
+                };
+                const browserStudioOperations = (0, browser_studio_operations_1.getBrowserStudioOperations)();
+                const response = browserStudioOperations
+                    ? await browserStudioOperations.insertBasicCaptions(request)
+                    : await (0, call_api_1.callApi)('/api/insert-basic-captions', request);
+                if (!response.success) {
+                    throw new Error(response.reason);
+                }
+            }
             captionCount = captions.length;
         }
         catch (error) {
@@ -94,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" }) }));
 };
@@ -71,52 +75,44 @@ const VideoMattingQueueItem = ({ job, selected }) => {
             selected,
         }),
         userSelect: 'none',
+        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);
@@ -124,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;