@remotion/studio 4.0.521 → 4.0.523

package/dist/components/RenderQueue/CaptionQueueItem.js

@@ -0,0 +1,129 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CaptionQueueItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const url_state_1 = require("../../helpers/url-state");
+const InlineAction_1 = require("../InlineAction");
+const layout_1 = require("../layout");
+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 SuccessIcon_1 = require("./SuccessIcon");
+const container = {
+    padding: 12,
+    display: 'flex',
+    flexDirection: 'row',
+    paddingBottom: 10,
+    paddingRight: 4,
+    marginBottom: 1,
+    marginLeft: 4,
+    borderRadius: 4,
+    width: 'calc(100% - 4px)',
+};
+const title = {
+    fontSize: 13,
+    lineHeight: 1,
+};
+const right = {
+    flex: 1,
+    display: 'flex',
+    flexDirection: 'column',
+    overflow: 'hidden',
+};
+const subtitleContainer = {
+    maxWidth: '100%',
+    flex: 1,
+    display: 'flex',
+    overflow: 'hidden',
+};
+const subtitle = {
+    ...item_style_1.renderQueueItemSubtitleStyle,
+    cursor: 'default',
+};
+const statusIcon = {
+    height: CircularProgress_1.RENDER_STATUS_INDICATOR_SIZE,
+    width: CircularProgress_1.RENDER_STATUS_INDICATOR_SIZE,
+};
+const removeIcon = {
+    height: 16,
+    color: colors_1.CURRENT_COLOR,
+};
+const CaptionJobStatus = ({ job }) => {
+    if (job.status === 'running') {
+        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') {
+        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" }) }));
+};
+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 containerStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...container,
+            backgroundColor: (0, colors_1.getBackgroundFromHoverState)({
+                hovered: isHoverable && hovered,
+                selected,
+            }),
+            userSelect: 'none',
+            WebkitUserSelect: 'none',
+        };
+    }, [hovered, isHoverable, selected]);
+    const onPointerEnter = (0, react_1.useCallback)(() => {
+        setHovered(true);
+    }, []);
+    const onPointerLeave = (0, react_1.useCallback)(() => {
+        setHovered(false);
+    }, []);
+    const scrollCurrentIntoView = (0, react_1.useCallback)(() => {
+        var _a;
+        (_a = document
+            .querySelector(`.${item_style_1.RENDER_QUEUE_ITEM_SELECTED_CLASSNAME}`)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
+    }, []);
+    const onClick = (0, react_1.useCallback)(() => {
+        if (job.status !== 'done') {
+            return;
+        }
+        selectAsset(job.outName);
+        (0, url_state_1.pushUrl)(`/assets/${job.outName}`);
+    }, [job, selectAsset]);
+    (0, react_1.useEffect)(() => {
+        if (selected) {
+            scrollCurrentIntoView();
+        }
+    }, [scrollCurrentIntoView, selected]);
+    const onRemove = (0, react_1.useCallback)((event) => {
+        event.stopPropagation();
+        removeCaptionJob(job.id);
+    }, [job.id, removeCaptionJob]);
+    const renderRemoveAction = (0, react_1.useCallback)((color) => {
+        return (jsx_runtime_1.jsx("svg", { style: removeIcon, viewBox: "0 0 320 512", children: jsx_runtime_1.jsx("path", { fill: color, d: "M310.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L160 210.7 54.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L114.7 256 9.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 301.3 265.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L205.3 256 310.6 150.6z" }) }));
+    }, []);
+    const message = (0, react_1.useMemo)(() => {
+        if (job.status === 'idle') {
+            return 'Queued for transcription';
+        }
+        if (job.status === 'running') {
+            return job.progress.message;
+        }
+        if (job.status === 'failed') {
+            return job.error.message;
+        }
+        return job.outName;
+    }, [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(InlineAction_1.InlineAction, { renderAction: renderRemoveAction, onClick: onRemove, title: "Remove", variant: null }))] }));
+};
+exports.CaptionQueueItem = CaptionQueueItem;

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

@@ -0,0 +1 @@
+export declare const CaptionQueueProcessor: React.FC;

package/dist/components/RenderQueue/CaptionQueueProcessor.js

@@ -0,0 +1,110 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 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 processJob = (0, react_1.useCallback)(async (job) => {
+        let captionCount = null;
+        let processingError = null;
+        try {
+            updateCaptionJobProgress(job.id, {
+                message: 'Checking WebGPU support...',
+                value: 0,
+            });
+            const support = await (0, whisper_webgpu_1.canUseWhisperWebGpu)();
+            if (!support.supported) {
+                throw new Error(support.detailedReason);
+            }
+            updateCaptionJobProgress(job.id, {
+                message: `Checking ${job.model}...`,
+                value: 0.02,
+            });
+            await (0, whisper_webgpu_1.clearStaleModels)();
+            await (0, load_model_for_job_1.loadModelForJob)({
+                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),
+                }),
+                updateProgress: (progress) => updateCaptionJobProgress(job.id, progress),
+            });
+            updateCaptionJobProgress(job.id, {
+                message: `Preparing ${job.displayName}...`,
+                value: 0.3,
+            });
+            const channelWaveform = await (0, resample_media_to_16_khz_1.resampleMediaTo16Khz)({
+                src: job.src,
+                audioStreamIndex: job.audioStreamIndex,
+                requestInit: job.requestInit,
+                onProgress: (progress) => {
+                    updateCaptionJobProgress(job.id, {
+                        message: `Preparing ${job.displayName}...`,
+                        value: 0.3 + progress * 0.2,
+                    });
+                },
+            });
+            updateCaptionJobProgress(job.id, {
+                message: `Transcribing ${job.displayName}...`,
+                value: 0.5,
+            });
+            const transcription = await (0, whisper_webgpu_1.transcribe)({
+                channelWaveform,
+                model: job.model,
+                task: job.task,
+                chunkLengthInSeconds: job.chunkLengthInSeconds,
+                strideLengthInSeconds: job.strideLengthInSeconds,
+                forceFullSequences: job.forceFullSequences,
+                doSample: job.doSample,
+                temperature: job.temperature,
+                topK: job.topK,
+                repetitionPenalty: job.repetitionPenalty,
+                noRepeatNgramSize: job.noRepeatNgramSize,
+                ...(job.language === null ? {} : { language: job.language }),
+            });
+            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,
+            });
+            captionCount = captions.length;
+        }
+        catch (error) {
+            processingError =
+                error instanceof Error ? error : new Error(String(error));
+        }
+        try {
+            await (0, whisper_webgpu_1.disposeWhisperModel)({ model: job.model });
+        }
+        catch (_a) {
+            // The pipeline is removed from the in-memory registry before disposal.
+            // A cleanup failure should not hide a successfully written caption file.
+        }
+        if (processingError) {
+            markCaptionJobFailed(job.id, processingError);
+        }
+        else {
+            markCaptionJobDone(job.id, captionCount !== null && captionCount !== void 0 ? captionCount : 0);
+        }
+    }, [markCaptionJobDone, markCaptionJobFailed, updateCaptionJobProgress]);
+    (0, react_1.useEffect)(() => {
+        setProcessCaptionJobCallback(processJob);
+        return () => setProcessCaptionJobCallback(null);
+    }, [processJob, setProcessCaptionJobCallback]);
+    return null;
+};
+exports.CaptionQueueProcessor = CaptionQueueProcessor;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const CaptionQueueProcessorLoader: React.FC;

package/dist/components/RenderQueue/CaptionQueueProcessorLoader.js

@@ -0,0 +1,54 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CaptionQueueProcessorLoader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const OptionalPackageModal_1 = require("../OptionalPackageModal");
+const whisper_webgpu_capability_1 = require("../Transcription/whisper-webgpu-capability");
+const context_1 = require("./context");
+const LazyCaptionQueueProcessor = react_1.default.lazy(async () => {
+    const { CaptionQueueProcessor } = await Promise.resolve().then(() => __importStar(require('./CaptionQueueProcessor')));
+    return { default: CaptionQueueProcessor };
+});
+const CaptionQueueProcessorLoader = () => {
+    const { captionJobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
+    const installed = (0, OptionalPackageModal_1.useOptionalPackageInstalled)(whisper_webgpu_capability_1.WHISPER_WEBGPU_PACKAGE);
+    if (!installed || captionJobs.length === 0) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx(react_1.Suspense, { fallback: null, children: jsx_runtime_1.jsx(LazyCaptionQueueProcessor, {}) }));
+};
+exports.CaptionQueueProcessorLoader = CaptionQueueProcessorLoader;

package/dist/components/RenderQueue/RenderQueueCopyToClipboard.js

@@ -5,7 +5,8 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const colors_1 = require("../../helpers/colors");
 const get_asset_metadata_1 = require("../../helpers/get-asset-metadata");
-const clipboard_1 = require("../../icons/clipboard");
+const use_copy_feedback_1 = require("../../helpers/use-copy-feedback");
+const copy_1 = require("../../icons/copy");
 const InlineAction_1 = require("../InlineAction");
 const NotificationCenter_1 = require("../Notifications/NotificationCenter");
 const revealIconStyle = {
@@ -29,9 +30,10 @@ const supportsCopyingToClipboard = (job) => {
 };
 exports.supportsCopyingToClipboard = supportsCopyingToClipboard;
 const RenderQueueCopyToClipboard = ({ job }) => {
+    const { copied, markCopied } = (0, use_copy_feedback_1.useCopyFeedback)();
     const renderCopyAction = (0, react_1.useCallback)((color) => {
-        return jsx_runtime_1.jsx(clipboard_1.ClipboardIcon, { style: revealIconStyle, color: color });
-    }, []);
+        return jsx_runtime_1.jsx(copy_1.CopyIcon, { copied: copied, style: revealIconStyle, color: color });
+    }, [copied]);
     const onClick = (0, react_1.useCallback)(async (e) => {
         e.stopPropagation();
         try {
@@ -47,12 +49,13 @@ const RenderQueueCopyToClipboard = ({ job }) => {
                     [contentType]: blob,
                 }),
             ]);
+            markCopied();
             (0, NotificationCenter_1.showNotification)('Copied to clipboard!', 1000);
         }
         catch (err) {
             (0, NotificationCenter_1.showNotification)(`Could not copy to clipboard: ${err.message}`, 2000);
         }
-    }, [job.outName]);
+    }, [job.outName, markCopied]);
     return (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { variant: null, title: "Copy to clipboard", renderAction: renderCopyAction, onClick: onClick }));
 };
 exports.RenderQueueCopyToClipboard = RenderQueueCopyToClipboard;

package/dist/components/RenderQueue/RenderQueueItem.js

@@ -10,6 +10,7 @@ const url_state_1 = require("../../helpers/url-state");
 const layout_1 = require("../layout");
 const client_side_render_types_1 = require("./client-side-render-types");
 const context_1 = require("./context");
+const item_style_1 = require("./item-style");
 const RenderQueueCancelledMessage_1 = require("./RenderQueueCancelledMessage");
 const RenderQueueCopyToClipboard_1 = require("./RenderQueueCopyToClipboard");
 const RenderQueueDownloadItem_1 = require("./RenderQueueDownloadItem");
@@ -50,7 +51,6 @@ const subtitle = {
     display: 'flex',
     overflow: 'hidden',
 };
-const SELECTED_CLASSNAME = '__remotion_selected_classname';
 const RenderQueueItem = ({ job, selected }) => {
     const [hovered, setHovered] = (0, react_1.useState)(false);
     const { setCanvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionSetters);
@@ -78,7 +78,7 @@ const RenderQueueItem = ({ job, selected }) => {
     const scrollCurrentIntoView = (0, react_1.useCallback)(() => {
         var _a;
         (_a = document
-            .querySelector(`.${SELECTED_CLASSNAME}`)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
+            .querySelector(`.${item_style_1.RENDER_QUEUE_ITEM_SELECTED_CLASSNAME}`)) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ behavior: 'smooth' });
     }, []);
     const clientBlobInfo = (0, react_1.useMemo)(() => {
         if (!isClientJob || job.status !== 'done' || !job.getBlob) {
@@ -146,7 +146,7 @@ const RenderQueueItem = ({ job, selected }) => {
         job.status === 'failed' ||
         job.status === 'cancelled') &&
         !((0, context_1.isClientRenderJob)(job) && (0, client_side_render_types_1.isRestoredClientJob)(job));
-    return (jsx_runtime_1.jsxs(layout_1.Row, { "data-render-queue-item": job.id, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: containerStyle, align: "center", onClick: onClick, draggable: canDrag, onDragStart: onDragStart, onDragEnd: onDragEnd, className: selected ? SELECTED_CLASSNAME : undefined, children: [
+    return (jsx_runtime_1.jsxs(layout_1.Row, { "data-render-queue-item": job.id, onPointerEnter: onPointerEnter, onPointerLeave: onPointerLeave, style: containerStyle, align: "center", onClick: onClick, draggable: canDrag, onDragStart: onDragStart, onDragEnd: onDragEnd, className: selected ? item_style_1.RENDER_QUEUE_ITEM_SELECTED_CLASSNAME : undefined, children: [
             jsx_runtime_1.jsx(RenderQueueItemStatus_1.RenderQueueItemStatus, { 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.compositionId }), jsx_runtime_1.jsx("div", { style: subtitle, children: job.status === 'done' ? (jsx_runtime_1.jsx(RenderQueueOutputName_1.RenderQueueOutputName, { job: job })) : job.status === 'failed' ? (jsx_runtime_1.jsx(RenderQueueError_1.RenderQueueError, { job: job })) : job.status === 'running' ? (jsx_runtime_1.jsx(RenderQueueProgressMessage_1.RenderQueueProgressMessage, { job: job })) : job.status === 'saving' ? (jsx_runtime_1.jsx(RenderQueueSavingMessage_1.RenderQueueSavingMessage, {})) : job.status === 'cancelled' ? (jsx_runtime_1.jsx(RenderQueueCancelledMessage_1.RenderQueueCancelledMessage, {})) : null })
                 ] }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 1 }), !isDragging ? (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [canCopyToClipboard ? (jsx_runtime_1.jsx(RenderQueueCopyToClipboard_1.RenderQueueCopyToClipboard, { job: job })) : null, canRepeat ? jsx_runtime_1.jsx(RenderQueueRepeat_1.RenderQueueRepeatItem, { job: job }) : null, job.status === 'running' ? (jsx_runtime_1.jsx(RenderQueueItemCancelButton_1.RenderQueueCancelButton, { job: job })) : isBrowserStudio ? null : (jsx_runtime_1.jsx(RenderQueueRemoveItem_1.RenderQueueRemoveItem, { job: job })), job.status === 'done' ? (clientBlobInfo ? (jsx_runtime_1.jsx(RenderQueueDownloadItem_1.RenderQueueDownloadItem, { job: job })) : isBrowserStudio ? null : (jsx_runtime_1.jsx(RenderQueueOpenInFolder_1.RenderQueueOpenInFinderItem, { job: job }))) : null] })) : null] }));

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

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { VideoMattingJob } from './video-matting-job-types';
+export declare const VideoMattingQueueItem: React.FC<{
+    readonly job: VideoMattingJob;
+    readonly selected: boolean;
+}>;

package/dist/components/RenderQueue/VideoMattingQueueItem.js

@@ -0,0 +1,129 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VideoMattingQueueItem = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const url_state_1 = require("../../helpers/url-state");
+const ellipsis_1 = require("../../icons/ellipsis");
+const InlineAction_1 = require("../InlineAction");
+const InlineDropdown_1 = require("../InlineDropdown");
+const layout_1 = require("../layout");
+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 SuccessIcon_1 = require("./SuccessIcon");
+const container = {
+    borderRadius: 4,
+    display: 'flex',
+    marginBottom: 1,
+    marginLeft: 4,
+    padding: 12,
+    paddingBottom: 10,
+    paddingRight: 4,
+    width: 'calc(100% - 4px)',
+};
+const title = { fontSize: 13, lineHeight: 1 };
+const right = {
+    display: 'flex',
+    flex: 1,
+    flexDirection: 'column',
+    overflow: 'hidden',
+};
+const subtitle = {
+    ...item_style_1.renderQueueItemSubtitleStyle,
+    cursor: 'default',
+};
+const subtitles = {
+    display: 'flex',
+    flexDirection: 'column',
+    overflow: 'hidden',
+};
+const statusIcon = {
+    height: CircularProgress_1.RENDER_STATUS_INDICATOR_SIZE,
+    width: CircularProgress_1.RENDER_STATUS_INDICATOR_SIZE,
+};
+const removeIcon = { color: colors_1.CURRENT_COLOR, height: 16 };
+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 === 'done')
+        return jsx_runtime_1.jsx(SuccessIcon_1.SuccessIcon, {});
+    if (job.status === 'failed')
+        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" }) }));
+};
+const VideoMattingQueueItem = ({ job, selected }) => {
+    const [hovered, setHovered] = (0, react_1.useState)(false);
+    const { removeVideoMattingJob } = (0, react_1.useContext)(context_1.RenderQueueContext);
+    const selectAsset = (0, use_select_asset_1.useSelectAsset)();
+    const done = job.status === 'done';
+    const style = (0, react_1.useMemo)(() => ({
+        ...container,
+        backgroundColor: (0, colors_1.getBackgroundFromHoverState)({
+            hovered: done && hovered,
+            selected,
+        }),
+        userSelect: 'none',
+    }), [done, hovered, selected]);
+    const messages = job.status === 'idle'
+        ? ['Queued for video matting']
+        : job.status === 'running'
+            ? [job.progress.message, job.progress.detail].filter((message) => message !== null)
+            : job.status === 'failed'
+                ? [job.error.message]
+                : [job.baseOutName, job.foregroundOutName];
+    const tooltip = messages.join('\n');
+    const revealAsset = (0, react_1.useCallback)((assetName) => {
+        selectAsset(assetName);
+        (0, url_state_1.pushUrl)(`/assets/${assetName}`);
+    }, [selectAsset]);
+    const onClick = (0, react_1.useCallback)(() => {
+        if (!done)
+            return;
+        revealAsset(job.foregroundOutName);
+    }, [done, job.foregroundOutName, revealAsset]);
+    const revealItems = (0, react_1.useMemo)(() => {
+        return [
+            {
+                disabled: false,
+                id: 'reveal-foreground',
+                keyHint: null,
+                label: 'Reveal foreground',
+                leftItem: null,
+                onClick: () => revealAsset(job.foregroundOutName),
+                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',
+            },
+        ];
+    }, [job.baseOutName, job.foregroundOutName, revealAsset]);
+    const onRemove = (0, react_1.useCallback)((event) => {
+        event.stopPropagation();
+        removeVideoMattingJob(job.id);
+    }, [job.id, removeVideoMattingJob]);
+    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(InlineDropdown_1.InlineDropdown, { renderAction: (color) => (jsx_runtime_1.jsx(ellipsis_1.EllipsisIcon, { fill: color, svgProps: ellipsisIconStyle })), title: "Reveal video layer", values: revealItems, variant: null })) : null, job.status === 'running' ? null : (jsx_runtime_1.jsx(InlineAction_1.InlineAction, { renderAction: renderRemove, onClick: onRemove, title: "Remove", variant: null }))] }));
+};
+exports.VideoMattingQueueItem = VideoMattingQueueItem;

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

@@ -0,0 +1 @@
+export declare const VideoMattingQueueProcessor: React.FC;

package/dist/components/RenderQueue/VideoMattingQueueProcessor.js

@@ -0,0 +1,105 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 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 processJob = (0, react_1.useCallback)(async (job) => {
+        let outputs = null;
+        let processingError = null;
+        try {
+            updateVideoMattingJobProgress(job.id, {
+                detail: null,
+                message: 'Checking WebGPU support...',
+                value: 0,
+            });
+            const support = await (0, video_matting_1.canUseVideoMatting)({ model: job.model });
+            if (!support.supported) {
+                throw new Error(support.detailedReason);
+            }
+            await (0, load_model_for_job_1.loadModelForJob)({
+                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),
+                }),
+                updateProgress: (progress) => updateVideoMattingJobProgress(job.id, {
+                    ...progress,
+                    detail: null,
+                }),
+            });
+            outputs = await (0, video_matting_1.separateVideoLayers)({
+                src: job.src,
+                model: job.model,
+                audio: job.audio,
+                videoBitrate: job.videoBitrate,
+                onProgress: (progress) => {
+                    var _a;
+                    updateVideoMattingJobProgress(job.id, {
+                        detail: progress.stage === 'finalizing'
+                            ? `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...',
+                        value: 0.2 + ((_a = progress.progress) !== null && _a !== void 0 ? _a : 1) * 0.65,
+                    });
+                },
+            });
+            updateVideoMattingJobProgress(job.id, {
+                detail: null,
+                message: 'Saving video layers...',
+                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 })),
+            ]);
+        }
+        catch (error) {
+            processingError =
+                error instanceof Error ? error : new Error(String(error));
+        }
+        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) {
+            markVideoMattingJobFailed(job.id, processingError);
+        }
+        else {
+            markVideoMattingJobDone(job.id);
+        }
+    }, [
+        markVideoMattingJobDone,
+        markVideoMattingJobFailed,
+        updateVideoMattingJobProgress,
+    ]);
+    (0, react_1.useEffect)(() => {
+        setProcessVideoMattingJobCallback(processJob);
+        return () => setProcessVideoMattingJobCallback(null);
+    }, [processJob, setProcessVideoMattingJobCallback]);
+    return null;
+};
+exports.VideoMattingQueueProcessor = VideoMattingQueueProcessor;

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const VideoMattingQueueProcessorLoader: React.FC;