@remotion/studio 4.0.522 → 4.0.523

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;

package/dist/components/RenderQueue/VideoMattingQueueProcessorLoader.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.VideoMattingQueueProcessorLoader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const OptionalPackageModal_1 = require("../OptionalPackageModal");
+const video_matting_capability_1 = require("../VideoMatting/video-matting-capability");
+const context_1 = require("./context");
+const LazyProcessor = react_1.default.lazy(async () => {
+    const { VideoMattingQueueProcessor } = await Promise.resolve().then(() => __importStar(require('./VideoMattingQueueProcessor')));
+    return { default: VideoMattingQueueProcessor };
+});
+const VideoMattingQueueProcessorLoader = () => {
+    const installed = (0, OptionalPackageModal_1.useOptionalPackageInstalled)(video_matting_capability_1.VIDEO_MATTING_PACKAGE);
+    const { videoMattingJobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
+    if (!installed || videoMattingJobs.length === 0) {
+        return null;
+    }
+    return (jsx_runtime_1.jsx(react_1.Suspense, { fallback: null, children: jsx_runtime_1.jsx(LazyProcessor, {}) }));
+};
+exports.VideoMattingQueueProcessorLoader = VideoMattingQueueProcessorLoader;

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

@@ -0,0 +1,47 @@
+import type { WhisperWebGpuModel, WhisperWebGpuTask } from '@remotion/whisper-webgpu';
+export type CaptionJobProgress = {
+    message: string;
+    value: number;
+};
+type CaptionJobStatus = {
+    status: 'idle';
+} | {
+    status: 'running';
+    progress: CaptionJobProgress;
+} | {
+    status: 'done';
+    captionCount: number;
+} | {
+    status: 'failed';
+    error: {
+        message: string;
+        stack: string | undefined;
+    };
+};
+export type AddCaptionJobParams = {
+    src: string;
+    displayName: string;
+    audioStreamIndex: number | null;
+    requestInit: Omit<RequestInit, 'signal'> | null;
+    outName: string;
+    model: WhisperWebGpuModel;
+    language: string | null;
+    task: WhisperWebGpuTask;
+    chunkLengthInSeconds: number;
+    strideLengthInSeconds: number;
+    forceFullSequences: boolean;
+    doSample: boolean;
+    temperature: number;
+    topK: number;
+    repetitionPenalty: number;
+    noRepeatNgramSize: number;
+};
+export type CaptionJob = AddCaptionJobParams & {
+    id: string;
+    type: 'caption';
+    startedAt: number;
+} & CaptionJobStatus;
+export declare const isCaptionJob: (job: {
+    type: string;
+}) => job is CaptionJob;
+export {};

package/dist/components/RenderQueue/caption-job-types.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isCaptionJob = void 0;
+const isCaptionJob = (job) => {
+    return job.type === 'caption';
+};
+exports.isCaptionJob = isCaptionJob;

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

@@ -1,7 +1,9 @@
 import type { CompletedClientRender, RenderJob } from '@remotion/studio-shared';
 import React from 'react';
+import type { AddCaptionJobParams, CaptionJob, CaptionJobProgress } from './caption-job-types';
 import { type AddClientStillJobParams, type AddClientVideoJobParams, type CompositionRef } from './client-render-queue';
 import type { ClientRenderJob, ClientRenderJobProgress, GetBlobCallback } from './client-side-render-types';
+import type { AddVideoMattingJobParams, VideoMattingJob, VideoMattingJobProgress } from './video-matting-job-types';
 declare global {
     interface Window {
         remotion_initialRenderQueue: RenderJob[] | null;
@@ -14,6 +16,8 @@ type RenderQueueContextType = {
     jobs: AnyRenderJob[];
     serverJobs: RenderJob[];
     clientJobs: ClientRenderJob[];
+    captionJobs: CaptionJob[];
+    videoMattingJobs: VideoMattingJob[];
     addClientStillJob: (params: AddClientStillJobParams, compositionRef: CompositionRef) => string;
     addClientVideoJob: (params: AddClientVideoJobParams, compositionRef: CompositionRef) => string;
     updateClientJobProgress: (jobId: string, progress: ClientRenderJobProgress) => void;
@@ -24,6 +28,18 @@ type RenderQueueContextType = {
     removeClientJob: (jobId: string) => void;
     cancelClientJob: (jobId: string) => void;
     setProcessJobCallback: (callback: ((job: ClientRenderJob) => Promise<void>) | null) => void;
+    addCaptionJob: (params: AddCaptionJobParams) => string;
+    updateCaptionJobProgress: (jobId: string, progress: CaptionJobProgress) => void;
+    markCaptionJobDone: (jobId: string, captionCount: number) => void;
+    markCaptionJobFailed: (jobId: string, error: Error) => 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;
+    removeVideoMattingJob: (jobId: string) => void;
+    setProcessVideoMattingJobCallback: (callback: ((job: VideoMattingJob) => Promise<void>) | null) => void;
     getAbortController: (jobId: string) => AbortController;
     getCompositionForJob: (jobId: string) => CompositionRef | undefined;
 };