@remotion/studio 4.0.521 → 4.0.523

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;
 };

package/dist/components/RenderQueue/context.js

@@ -52,6 +52,8 @@ exports.RenderQueueContext = react_1.default.createContext({
     jobs: [],
     serverJobs: [],
     clientJobs: [],
+    captionJobs: [],
+    videoMattingJobs: [],
     addClientStillJob: noopString,
     addClientVideoJob: noopString,
     updateClientJobProgress: noop,
@@ -62,6 +64,18 @@ exports.RenderQueueContext = react_1.default.createContext({
     removeClientJob: noop,
     cancelClientJob: noop,
     setProcessJobCallback: noop,
+    addCaptionJob: noopString,
+    updateCaptionJobProgress: noop,
+    markCaptionJobDone: noop,
+    markCaptionJobFailed: noop,
+    removeCaptionJob: noop,
+    setProcessCaptionJobCallback: noop,
+    addVideoMattingJob: noopString,
+    updateVideoMattingJobProgress: noop,
+    markVideoMattingJobDone: noop,
+    markVideoMattingJobFailed: noop,
+    removeVideoMattingJob: noop,
+    setProcessVideoMattingJobCallback: noop,
     getAbortController: () => new AbortController(),
     getCompositionForJob: () => undefined,
 });
@@ -70,15 +84,85 @@ const RenderQueueContextProvider = ({ children }) => {
     var _a;
     const [serverJobs, setServerJobs] = (0, react_1.useState)((_a = window.remotion_initialRenderQueue) !== null && _a !== void 0 ? _a : []);
     const [clientJobs, setClientJobs] = (0, react_1.useState)(restorePersistedClientRenders);
+    const [captionJobs, setCaptionJobs] = (0, react_1.useState)([]);
+    const [videoMattingJobs, setVideoMattingJobs] = (0, react_1.useState)([]);
+    const hasActiveLocalJob = clientJobs.some((job) => job.status === 'idle' ||
+        job.status === 'running' ||
+        job.status === 'saving') ||
+        captionJobs.some((job) => job.status === 'idle' || job.status === 'running') ||
+        videoMattingJobs.some((job) => job.status === 'idle' || job.status === 'running');
     const [currentlyProcessing, setCurrentlyProcessing] = (0, react_1.useState)(null);
+    const lastLocalJobStartedAt = (0, react_1.useRef)(clientJobs.reduce((latest, job) => Math.max(latest, job.startedAt), 0));
     const processJobCallbackRef = (0, react_1.useRef)(null);
-    // Process next job when state changes
+    const processCaptionJobCallbackRef = (0, react_1.useRef)(null);
+    const processVideoMattingJobCallbackRef = (0, react_1.useRef)(null);
+    const [processorCallbacksVersion, setProcessorCallbacksVersion] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        if (!hasActiveLocalJob) {
+            return;
+        }
+        const preventClose = (event) => {
+            event.preventDefault();
+            event.returnValue = '';
+        };
+        window.addEventListener('beforeunload', preventClose);
+        return () => window.removeEventListener('beforeunload', preventClose);
+    }, [hasActiveLocalJob]);
+    const getLocalJobStartedAt = (0, react_1.useCallback)(() => {
+        const startedAt = Math.max(Date.now(), lastLocalJobStartedAt.current + 1);
+        lastLocalJobStartedAt.current = startedAt;
+        return startedAt;
+    }, []);
+    // Process the next local job when state changes. Server renders have their own
+    // queue and are intentionally independent from browser-local work.
     (0, react_1.useEffect)(() => {
         if (currentlyProcessing) {
             return;
         }
-        const nextJob = clientJobs.find((job) => job.status === 'idle');
-        if (!nextJob || !processJobCallbackRef.current) {
+        const nextJob = [...clientJobs, ...captionJobs, ...videoMattingJobs]
+            .filter((job) => job.status === 'idle')
+            .sort((a, b) => a.startedAt - b.startedAt)[0];
+        if (!nextJob) {
+            return;
+        }
+        if (nextJob.type === 'caption') {
+            if (!processCaptionJobCallbackRef.current) {
+                return;
+            }
+            setCurrentlyProcessing(nextJob.id);
+            setCaptionJobs((prev) => prev.map((job) => job.id === nextJob.id
+                ? {
+                    ...job,
+                    status: 'running',
+                    progress: {
+                        message: 'Starting transcription...',
+                        value: 0,
+                    },
+                }
+                : job));
+            processCaptionJobCallbackRef.current(nextJob);
+            return;
+        }
+        if (nextJob.type === 'video-matting') {
+            if (!processVideoMattingJobCallbackRef.current) {
+                return;
+            }
+            setCurrentlyProcessing(nextJob.id);
+            setVideoMattingJobs((prev) => prev.map((job) => job.id === nextJob.id
+                ? {
+                    ...job,
+                    status: 'running',
+                    progress: {
+                        detail: null,
+                        message: 'Starting video matting...',
+                        value: 0,
+                    },
+                }
+                : job));
+            processVideoMattingJobCallbackRef.current(nextJob);
+            return;
+        }
+        if (!processJobCallbackRef.current) {
             return;
         }
         setCurrentlyProcessing(nextJob.id);
@@ -96,31 +180,37 @@ const RenderQueueContextProvider = ({ children }) => {
             }
             : job));
         processJobCallbackRef.current(nextJob);
-    }, [clientJobs, currentlyProcessing]);
+    }, [
+        captionJobs,
+        clientJobs,
+        currentlyProcessing,
+        processorCallbacksVersion,
+        videoMattingJobs,
+    ]);
     const addClientStillJob = (0, react_1.useCallback)((params, compositionRef) => {
         const id = (0, client_render_queue_1.generateJobId)();
         (0, client_render_queue_1.registerCompositionForJob)(id, compositionRef);
         const newJob = {
             ...params,
             id,
-            startedAt: Date.now(),
+            startedAt: getLocalJobStartedAt(),
             status: 'idle',
         };
         setClientJobs((prev) => [...prev, newJob]);
         return id;
-    }, []);
+    }, [getLocalJobStartedAt]);
     const addClientVideoJob = (0, react_1.useCallback)((params, compositionRef) => {
         const id = (0, client_render_queue_1.generateJobId)();
         (0, client_render_queue_1.registerCompositionForJob)(id, compositionRef);
         const newJob = {
             ...params,
             id,
-            startedAt: Date.now(),
+            startedAt: getLocalJobStartedAt(),
             status: 'idle',
         };
         setClientJobs((prev) => [...prev, newJob]);
         return id;
-    }, []);
+    }, [getLocalJobStartedAt]);
     const updateClientJobProgress = (0, react_1.useCallback)((jobId, progress) => {
         setClientJobs((prev) => prev.map((job) => job.id === jobId
             ? { ...job, status: 'running', progress }
@@ -135,7 +225,7 @@ const RenderQueueContextProvider = ({ children }) => {
         (0, client_render_queue_1.deleteAbortController)(jobId);
         (0, client_render_queue_1.cleanupCompositionForJob)(jobId);
         setClientJobs((prev) => prev.map((job) => job.id === jobId ? { ...job, status: 'done', metadata, getBlob } : job));
-        setCurrentlyProcessing(null);
+        setCurrentlyProcessing((current) => (current === jobId ? null : current));
     }, []);
     const markClientJobFailed = (0, react_1.useCallback)((jobId, error) => {
         (0, client_render_queue_1.deleteAbortController)(jobId);
@@ -147,7 +237,7 @@ const RenderQueueContextProvider = ({ children }) => {
                 error: { message: error.message, stack: error.stack },
             }
             : job));
-        setCurrentlyProcessing(null);
+        setCurrentlyProcessing((current) => (current === jobId ? null : current));
     }, []);
     const markClientJobCancelled = (0, react_1.useCallback)((jobId) => {
         (0, client_render_queue_1.deleteAbortController)(jobId);
@@ -158,7 +248,7 @@ const RenderQueueContextProvider = ({ children }) => {
                 status: 'cancelled',
             }
             : job));
-        setCurrentlyProcessing(null);
+        setCurrentlyProcessing((current) => (current === jobId ? null : current));
     }, []);
     const removeClientJob = (0, react_1.useCallback)((jobId) => {
         setClientJobs((prev) => {
@@ -176,6 +266,101 @@ const RenderQueueContextProvider = ({ children }) => {
     }, []);
     const setProcessJobCallback = (0, react_1.useCallback)((callback) => {
         processJobCallbackRef.current = callback;
+        setProcessorCallbacksVersion((version) => version + 1);
+    }, []);
+    const addCaptionJob = (0, react_1.useCallback)((params) => {
+        const id = `caption-${Date.now()}-${Math.random()
+            .toString(36)
+            .substring(2, 11)}`;
+        const newJob = {
+            ...params,
+            id,
+            type: 'caption',
+            startedAt: getLocalJobStartedAt(),
+            status: 'idle',
+        };
+        setCaptionJobs((prev) => [...prev, newJob]);
+        return id;
+    }, [getLocalJobStartedAt]);
+    const updateCaptionJobProgress = (0, react_1.useCallback)((jobId, progress) => {
+        setCaptionJobs((prev) => prev.map((job) => job.id === jobId
+            ? { ...job, status: 'running', progress }
+            : job));
+    }, []);
+    const markCaptionJobDone = (0, react_1.useCallback)((jobId, captionCount) => {
+        setCaptionJobs((prev) => prev.map((job) => job.id === jobId
+            ? { ...job, status: 'done', captionCount }
+            : job));
+        setCurrentlyProcessing((current) => (current === jobId ? null : current));
+    }, []);
+    const markCaptionJobFailed = (0, react_1.useCallback)((jobId, error) => {
+        setCaptionJobs((prev) => prev.map((job) => job.id === jobId
+            ? {
+                ...job,
+                status: 'failed',
+                error: { message: error.message, stack: error.stack },
+            }
+            : job));
+        setCurrentlyProcessing((current) => (current === jobId ? null : current));
+    }, []);
+    const removeCaptionJob = (0, react_1.useCallback)((jobId) => {
+        setCaptionJobs((prev) => {
+            const jobToRemove = prev.find((job) => job.id === jobId);
+            if ((jobToRemove === null || jobToRemove === void 0 ? void 0 : jobToRemove.status) === 'running') {
+                return prev;
+            }
+            return prev.filter((job) => job.id !== jobId);
+        });
+    }, []);
+    const setProcessCaptionJobCallback = (0, react_1.useCallback)((callback) => {
+        processCaptionJobCallbackRef.current = callback;
+        setProcessorCallbacksVersion((version) => version + 1);
+    }, []);
+    const addVideoMattingJob = (0, react_1.useCallback)((params) => {
+        const id = `video-matting-${Date.now()}-${Math.random()
+            .toString(36)
+            .substring(2, 11)}`;
+        setVideoMattingJobs((prev) => [
+            ...prev,
+            {
+                ...params,
+                id,
+                type: 'video-matting',
+                startedAt: getLocalJobStartedAt(),
+                status: 'idle',
+            },
+        ]);
+        return id;
+    }, [getLocalJobStartedAt]);
+    const updateVideoMattingJobProgress = (0, react_1.useCallback)((jobId, progress) => {
+        setVideoMattingJobs((prev) => prev.map((job) => job.id === jobId ? { ...job, status: 'running', progress } : job));
+    }, []);
+    const markVideoMattingJobDone = (0, react_1.useCallback)((jobId) => {
+        setVideoMattingJobs((prev) => prev.map((job) => (job.id === jobId ? { ...job, status: 'done' } : job)));
+        setCurrentlyProcessing((current) => (current === jobId ? null : current));
+    }, []);
+    const markVideoMattingJobFailed = (0, react_1.useCallback)((jobId, error) => {
+        setVideoMattingJobs((prev) => prev.map((job) => job.id === jobId
+            ? {
+                ...job,
+                status: 'failed',
+                error: { message: error.message, stack: error.stack },
+            }
+            : job));
+        setCurrentlyProcessing((current) => (current === jobId ? null : current));
+    }, []);
+    const removeVideoMattingJob = (0, react_1.useCallback)((jobId) => {
+        setVideoMattingJobs((prev) => {
+            const jobToRemove = prev.find((job) => job.id === jobId);
+            if ((jobToRemove === null || jobToRemove === void 0 ? void 0 : jobToRemove.status) === 'running') {
+                return prev;
+            }
+            return prev.filter((job) => job.id !== jobId);
+        });
+    }, []);
+    const setProcessVideoMattingJobCallback = (0, react_1.useCallback)((callback) => {
+        processVideoMattingJobCallbackRef.current = callback;
+        setProcessorCallbacksVersion((version) => version + 1);
     }, []);
     (0, react_1.useImperativeHandle)(exports.renderJobsRef, () => ({
         updateRenderJobs: (newJobs) => {
@@ -207,6 +392,8 @@ const RenderQueueContextProvider = ({ children }) => {
             jobs: [...serverJobs, ...clientJobs].sort((a, b) => a.startedAt - b.startedAt),
             serverJobs,
             clientJobs,
+            captionJobs,
+            videoMattingJobs,
             addClientStillJob,
             addClientVideoJob,
             updateClientJobProgress,
@@ -217,12 +404,26 @@ const RenderQueueContextProvider = ({ children }) => {
             removeClientJob,
             cancelClientJob,
             setProcessJobCallback,
+            addCaptionJob,
+            updateCaptionJobProgress,
+            markCaptionJobDone,
+            markCaptionJobFailed,
+            removeCaptionJob,
+            setProcessCaptionJobCallback,
+            addVideoMattingJob,
+            updateVideoMattingJobProgress,
+            markVideoMattingJobDone,
+            markVideoMattingJobFailed,
+            removeVideoMattingJob,
+            setProcessVideoMattingJobCallback,
             getAbortController: client_render_queue_1.getAbortController,
             getCompositionForJob: client_render_queue_1.getCompositionForJob,
         };
     }, [
         serverJobs,
         clientJobs,
+        captionJobs,
+        videoMattingJobs,
         addClientStillJob,
         addClientVideoJob,
         updateClientJobProgress,
@@ -233,6 +434,18 @@ const RenderQueueContextProvider = ({ children }) => {
         removeClientJob,
         cancelClientJob,
         setProcessJobCallback,
+        addCaptionJob,
+        updateCaptionJobProgress,
+        markCaptionJobDone,
+        markCaptionJobFailed,
+        removeCaptionJob,
+        setProcessCaptionJobCallback,
+        addVideoMattingJob,
+        updateVideoMattingJobProgress,
+        markVideoMattingJobDone,
+        markVideoMattingJobFailed,
+        removeVideoMattingJob,
+        setProcessVideoMattingJobCallback,
     ]);
     return (jsx_runtime_1.jsx(exports.RenderQueueContext.Provider, { value: value, children: children }));
 };

package/dist/components/RenderQueue/index.js

@@ -40,10 +40,14 @@ const remotion_1 = require("remotion");
 const colors_1 = require("../../helpers/colors");
 const layout_1 = require("../layout");
 const is_menu_item_1 = require("../Menu/is-menu-item");
+const caption_job_types_1 = require("./caption-job-types");
+const CaptionQueueItem_1 = require("./CaptionQueueItem");
 const context_1 = require("./context");
 const RenderQueueItem_1 = require("./RenderQueueItem");
+const video_matting_job_types_1 = require("./video-matting-job-types");
+const VideoMattingQueueItem_1 = require("./VideoMattingQueueItem");
 const errorExplanation = {
-    fontSize: 14,
+    fontSize: 13,
     color: colors_1.LIGHT_TEXT,
     fontFamily: 'sans-serif',
     lineHeight: 1.5,
@@ -66,10 +70,11 @@ const renderQueue = {
     paddingBottom: 4,
 };
 const RenderQueue = () => {
-    const { jobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
+    const { jobs, captionJobs, videoMattingJobs } = (0, react_1.useContext)(context_1.RenderQueueContext);
     const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
-    const previousJobCount = react_1.default.useRef(jobs.length);
-    const jobCount = jobs.length;
+    const allJobs = (0, react_1.useMemo)(() => [...jobs, ...captionJobs, ...videoMattingJobs].sort((a, b) => a.startedAt - b.startedAt), [jobs, captionJobs, videoMattingJobs]);
+    const previousJobCount = react_1.default.useRef(allJobs.length);
+    const jobCount = allJobs.length;
     const divRef = react_1.default.useRef(null);
     (0, react_1.useEffect)(() => {
         if (!divRef.current) {
@@ -89,22 +94,41 @@ const RenderQueue = () => {
             return -1;
         }
         if (canvasContent.type === 'output') {
-            for (let i = 0; i < jobs.length; i++) {
-                const job = jobs[i];
+            for (let i = 0; i < allJobs.length; i++) {
+                const job = allJobs[i];
+                if ((0, caption_job_types_1.isCaptionJob)(job) || (0, video_matting_job_types_1.isVideoMattingJob)(job)) {
+                    continue;
+                }
                 if (job.status === 'done' && canvasContent.path === `/${job.outName}`) {
                     return i;
                 }
             }
         }
+        if (canvasContent.type === 'asset') {
+            for (let i = 0; i < allJobs.length; i++) {
+                const job = allJobs[i];
+                if ((0, caption_job_types_1.isCaptionJob)(job) &&
+                    job.status === 'done' &&
+                    canvasContent.asset === job.outName) {
+                    return i;
+                }
+                if ((0, video_matting_job_types_1.isVideoMattingJob)(job) &&
+                    job.status === 'done' &&
+                    (canvasContent.asset === job.baseOutName ||
+                        canvasContent.asset === job.foregroundOutName)) {
+                    return i;
+                }
+            }
+        }
         return -1;
-    }, [canvasContent, jobs]);
+    }, [allJobs, canvasContent]);
     if (jobCount === 0) {
         return (jsx_runtime_1.jsxs("div", { style: explainer, children: [
-                jsx_runtime_1.jsx(layout_1.Spacing, { y: 5 }), jsx_runtime_1.jsx("div", { style: errorExplanation, children: "No renders in the queue." }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2, block: true })
+                jsx_runtime_1.jsx(layout_1.Spacing, { y: 5 }), jsx_runtime_1.jsx("div", { style: errorExplanation, children: "Renders, transcriptions and video matting jobs will show up here." }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2, block: true })
             ] }));
     }
-    return (jsx_runtime_1.jsx("div", { ref: divRef, style: renderQueue, className: ['css-reset', is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME].join(' '), children: jobs.map((j, index) => {
-            return (jsx_runtime_1.jsx(RenderQueueItem_1.RenderQueueItem, { selected: selectedJob === index, job: j }, j.id));
+    return (jsx_runtime_1.jsx("div", { ref: divRef, style: renderQueue, className: ['css-reset', is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME].join(' '), children: allJobs.map((job, index) => {
+            return (0, caption_job_types_1.isCaptionJob)(job) ? (jsx_runtime_1.jsx(CaptionQueueItem_1.CaptionQueueItem, { job: job, selected: selectedJob === index }, job.id)) : (0, video_matting_job_types_1.isVideoMattingJob)(job) ? (jsx_runtime_1.jsx(VideoMattingQueueItem_1.VideoMattingQueueItem, { job: job, selected: selectedJob === index }, job.id)) : (jsx_runtime_1.jsx(RenderQueueItem_1.RenderQueueItem, { selected: selectedJob === index, job: job }, job.id));
         }) }));
 };
 exports.RenderQueue = RenderQueue;

package/dist/components/RenderQueue/item-style.d.ts

@@ -1,2 +1,3 @@
 import type React from 'react';
+export declare const RENDER_QUEUE_ITEM_SELECTED_CLASSNAME = "__remotion_selected_classname";
 export declare const renderQueueItemSubtitleStyle: React.CSSProperties;

package/dist/components/RenderQueue/item-style.js

@@ -1,8 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.renderQueueItemSubtitleStyle = void 0;
+exports.renderQueueItemSubtitleStyle = exports.RENDER_QUEUE_ITEM_SELECTED_CLASSNAME = void 0;
 const colors_1 = require("../../helpers/colors");
 const layout_1 = require("../layout");
+exports.RENDER_QUEUE_ITEM_SELECTED_CLASSNAME = '__remotion_selected_classname';
 exports.renderQueueItemSubtitleStyle = {
     fontSize: 13,
     color: colors_1.LIGHT_TEXT,

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

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

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

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

package/dist/components/RenderQueue/video-matting-job-types.d.ts

@@ -0,0 +1,38 @@
+import type { VideoLayerAudio, VideoMattingBitrate, VideoMattingModel } from '@remotion/video-matting';
+export type VideoMattingJobProgress = {
+    detail: string | null;
+    message: string;
+    value: number;
+};
+type VideoMattingJobStatus = {
+    status: 'idle';
+} | {
+    status: 'running';
+    progress: VideoMattingJobProgress;
+} | {
+    status: 'done';
+} | {
+    status: 'failed';
+    error: {
+        message: string;
+        stack: string | undefined;
+    };
+};
+export type AddVideoMattingJobParams = {
+    src: string;
+    displayName: string;
+    baseOutName: string;
+    foregroundOutName: string;
+    model: VideoMattingModel;
+    audio: VideoLayerAudio;
+    videoBitrate: VideoMattingBitrate;
+};
+export type VideoMattingJob = AddVideoMattingJobParams & {
+    id: string;
+    type: 'video-matting';
+    startedAt: number;
+} & VideoMattingJobStatus;
+export declare const isVideoMattingJob: (job: {
+    type: string;
+}) => job is VideoMattingJob;
+export {};

package/dist/components/RenderQueue/video-matting-job-types.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isVideoMattingJob = void 0;
+const isVideoMattingJob = (job) => job.type === 'video-matting';
+exports.isVideoMattingJob = isVideoMattingJob;