@remotion/studio 4.0.526 → 4.0.528

package/dist/esm/{VideoMattingModal-05vpczks.mjs → VideoMattingModal-5bz2s4rs.mjs}

@@ -3,16 +3,15 @@ import {
 } from "./index-7tt71e8n.mjs";
 import {
   RenderModalOutputName
-} from "./index-x40wwfmt.mjs";
+} from "./index-c2wabcdt.mjs";
 import {
   Button,
   Checkmark,
   Combobox,
   DismissableModal,
+  GearIcon,
   ModalHeader,
-  ModelsIcon,
   RenderModalHr,
-  SeparationIcon,
   SetSelectedModalContext,
   SidebarContext,
   VerticalTab,
@@ -25,17 +24,20 @@ import {
   rightRow,
   useStaticFiles,
   validatePublicOutputName
-} from "./index-bs39wngg.mjs";
+} from "./index-x6r9bn12.mjs";
+import"./index-dh3zk2hv.mjs";
 import {
   RenderQueueContext
-} from "./index-9x6e1dq0.mjs";
-import"./index-eb5txqp6.mjs";
-import"./index-cw0pnpg5.mjs";
+} from "./index-hqxc6tzp.mjs";
+import"./index-s6qya2gg.mjs";
+import"./index-dfy1t576.mjs";
+import"./index-t7tbt980.mjs";
 import {
   Models
-} from "./index-5bfxbpca.mjs";
-import"./index-g7k2dvar.mjs";
+} from "./index-8nt6a0mw.mjs";
+import"./index-t7xnxdf8.mjs";
 import {
+  ModelsIcon,
   VERTICAL_SCROLLBAR_CLASSNAME,
   ValidationMessage,
   buttonStyle,
@@ -48,11 +50,12 @@ import {
   leftSidebar,
   optionsPanel,
   outerModalStyle
-} from "./index-cdy8v54v.mjs";
+} from "./index-890dd9b3.mjs";
+import"./index-qve7mdfp.mjs";
 import"./index-5zrb1ft4.mjs";
 import {
   BLUE_DISABLED
-} from "./index-k426ye99.mjs";
+} from "./index-wqc43mw0.mjs";
 import"./index-rcv7qkt5.mjs";
 
 // src/components/VideoMatting/VideoMattingModal.tsx
@@ -108,9 +111,10 @@ var makeOptions = ({
 }));
 var VideoMattingModal = ({
   displayName,
-  src
+  src,
+  target
 }) => {
-  const [tab, setTab] = useState("separate");
+  const [tab, setTab] = useState("remove");
   const isModelCached = useCallback((selectedModel) => isVideoMattingModelCached({ model: selectedModel }), []);
   const cachedModels = useModelCacheStatus({
     isModelCached,
@@ -118,10 +122,9 @@ var VideoMattingModal = ({
     refreshKey: tab
   });
   const baseName = useMemo(() => getDefaultOutputBaseName(src, displayName, "video"), [displayName, src]);
-  const [baseOutName, setBaseOutName] = useState(`${baseName}-base.webm`);
-  const [foregroundOutName, setForegroundOutName] = useState(`${baseName}-foreground.webm`);
-  const [model, setModel] = useState("ben2-base");
-  const [audio, setAudio] = useState("base");
+  const [outName, setOutName] = useState(`${baseName}-no-background.webm`);
+  const [model, setModel] = useState("modnet");
+  const [audio, setAudio] = useState("keep");
   const [videoBitrate, setVideoBitrate] = useState("very-high");
   const [support, setSupport] = useState({ type: "checking" });
   const staticFiles = useStaticFiles();
@@ -140,18 +143,11 @@ var VideoMattingModal = ({
       cancelled = true;
     };
   }, [model]);
-  const normalizedBase = baseOutName.normalize("NFC").toLowerCase();
-  const normalizedForeground = foregroundOutName.normalize("NFC").toLowerCase();
-  const duplicateOutput = normalizedBase === normalizedForeground;
-  const queuedOutputs = new Set(videoMattingJobs.filter((job) => job.status === "idle" || job.status === "running").flatMap((job) => [job.baseOutName, job.foregroundOutName]).map((name) => name.normalize("NFC").toLowerCase()));
-  const baseError = validatePublicOutputName({ extension: ".webm", outName: baseOutName }) ?? (duplicateOutput ? "Base and foreground outputs must be different" : queuedOutputs.has(normalizedBase) ? "Another video matting job is using this output file" : null);
-  const foregroundError = validatePublicOutputName({
-    extension: ".webm",
-    outName: foregroundOutName
-  }) ?? (duplicateOutput ? "Base and foreground outputs must be different" : queuedOutputs.has(normalizedForeground) ? "Another video matting job is using this output file" : null);
-  const baseExists = staticFiles.some((file) => file.name.normalize("NFC").toLowerCase() === normalizedBase);
-  const foregroundExists = staticFiles.some((file) => file.name.normalize("NFC").toLowerCase() === normalizedForeground);
-  const canSubmit = support.type === "supported" && baseError === null && foregroundError === null;
+  const normalizedOutput = outName.normalize("NFC").toLowerCase();
+  const queuedOutputs = new Set(videoMattingJobs.filter((job) => job.status === "idle" || job.status === "running" || job.status === "saving").map((job) => job.outName).map((name) => name.normalize("NFC").toLowerCase()));
+  const outputError = validatePublicOutputName({ extension: ".webm", outName }) ?? (queuedOutputs.has(normalizedOutput) ? "Another background removal job is using this output file" : null);
+  const outputExists = staticFiles.some((file) => file.name.normalize("NFC").toLowerCase() === normalizedOutput);
+  const canSubmit = support.type === "supported" && outputError === null;
   const modelOptions = useMemo(() => makeOptions({
     items: MODELS.map((item) => ({
       id: item.name,
@@ -162,9 +158,7 @@ var VideoMattingModal = ({
   }), [cachedModels, model]);
   const audioOptions = useMemo(() => makeOptions({
     items: [
-      { id: "base", label: "Background layer" },
-      { id: "foreground", label: "Foreground layer" },
-      { id: "both", label: "Both layers" },
+      { id: "keep", label: "Keep original audio" },
       { id: "none", label: "No audio" }
     ],
     selected: audio,
@@ -184,11 +178,11 @@ var VideoMattingModal = ({
     addVideoMattingJob({
       src,
       displayName,
-      baseOutName,
-      foregroundOutName,
+      outName,
       model,
       audio,
-      videoBitrate
+      videoBitrate,
+      target
     });
     setSidebarCollapsedState({ left: null, right: "expanded" });
     persistSelectedOptionsSidebarPanel("renders");
@@ -197,23 +191,24 @@ var VideoMattingModal = ({
   }, [
     addVideoMattingJob,
     audio,
-    baseOutName,
     canSubmit,
     displayName,
-    foregroundOutName,
+    outName,
     model,
     setSelectedModal,
     setSidebarCollapsedState,
     src,
+    target,
     videoBitrate
   ]);
+  const title = `Remove background from ${displayName}`;
   return /* @__PURE__ */ jsx(DismissableModal, {
-    ariaLabel: `Track matting ${displayName}`,
+    ariaLabel: title,
     children: /* @__PURE__ */ jsxs("div", {
       style: modalStyle,
       children: [
         /* @__PURE__ */ jsx(ModalHeader, {
-          title: `Track matting ${displayName}`
+          title
         }),
         /* @__PURE__ */ jsxs("div", {
           style: container,
@@ -229,7 +224,7 @@ var VideoMattingModal = ({
                 ...buttonStyle,
                 backgroundColor: canSubmit ? buttonStyle.backgroundColor : BLUE_DISABLED
               },
-              children: "Separate"
+              children: "Remove background"
             })
           ]
         }),
@@ -241,17 +236,17 @@ var VideoMattingModal = ({
               children: [
                 /* @__PURE__ */ jsx(VerticalTab, {
                   autoFocus: true,
-                  onClick: () => setTab("separate"),
+                  onClick: () => setTab("remove"),
                   renderIcon: (color) => /* @__PURE__ */ jsx("div", {
                     style: iconContainer,
-                    children: /* @__PURE__ */ jsx(SeparationIcon, {
+                    children: /* @__PURE__ */ jsx(GearIcon, {
                       color,
                       style: icon
                     })
                   }),
-                  selected: tab === "separate",
+                  selected: tab === "remove",
                   style: horizontalTab,
-                  children: "Separate"
+                  children: "General"
                 }),
                 /* @__PURE__ */ jsx(VerticalTab, {
                   onClick: () => setTab("models"),
@@ -269,28 +264,18 @@ var VideoMattingModal = ({
               ]
             }),
             /* @__PURE__ */ jsxs("div", {
-              style: tab === "separate" ? panelStyle : hiddenPanel,
+              style: tab === "remove" ? panelStyle : hiddenPanel,
               className: VERTICAL_SCROLLBAR_CLASSNAME,
               children: [
                 /* @__PURE__ */ jsx(RenderModalOutputName, {
-                  ariaLabel: "Base video output file",
-                  existingOutputPath: window.remotion_publicFolderExists ? `${window.remotion_publicFolderExists}/${baseOutName}` : null,
-                  existence: baseExists,
-                  inputStyle: input,
-                  label: "Base output in public/",
-                  onValueChange: (event) => setBaseOutName(event.target.value),
-                  outName: baseOutName,
-                  validationMessage: baseError
-                }),
-                /* @__PURE__ */ jsx(RenderModalOutputName, {
-                  ariaLabel: "Foreground video output file",
-                  existingOutputPath: window.remotion_publicFolderExists ? `${window.remotion_publicFolderExists}/${foregroundOutName}` : null,
-                  existence: foregroundExists,
+                  ariaLabel: "Video output file",
+                  existingOutputPath: window.remotion_publicFolderExists ? `${window.remotion_publicFolderExists}/${outName}` : null,
+                  existence: outputExists,
                   inputStyle: input,
-                  label: "Foreground output in public/",
-                  onValueChange: (event) => setForegroundOutName(event.target.value),
-                  outName: foregroundOutName,
-                  validationMessage: foregroundError
+                  label: "Output in public/",
+                  onValueChange: (event) => setOutName(event.target.value),
+                  outName,
+                  validationMessage: outputError
                 }),
                 /* @__PURE__ */ jsx(RenderModalHr, {}),
                 /* @__PURE__ */ jsxs("div", {

package/dist/esm/{VideoMattingQueueProcessor-t1hgm2rm.mjs → VideoMattingQueueProcessor-4tkj0f4k.mjs}

@@ -1,99 +1,142 @@
 import {
   loadModelForJob
-} from "./index-v4tr1bft.mjs";
+} from "./index-09txs1bj.mjs";
 import {
   RenderQueueContext
-} from "./index-9x6e1dq0.mjs";
+} from "./index-hqxc6tzp.mjs";
 import {
+  callApi,
+  getBrowserStudioOperations,
   writeStaticFile
-} from "./index-cw0pnpg5.mjs";
+} from "./index-dfy1t576.mjs";
 import"./index-rcv7qkt5.mjs";
 
 // src/components/RenderQueue/VideoMattingQueueProcessor.tsx
 import {
   canUseVideoMatting,
   disposeVideoMattingModel,
+  downloadVideoMattingModel,
   isVideoMattingModelCached,
   loadVideoMattingModel,
-  separateVideoLayers
+  VideoMattingInternals
 } from "@remotion/video-matting";
 import { useCallback, useContext, useEffect } from "react";
 var VideoMattingQueueProcessor = () => {
   const {
     markVideoMattingJobDone,
     markVideoMattingJobFailed,
+    markVideoMattingJobCancelled,
+    markVideoMattingJobSaving,
+    getAbortController,
     setProcessVideoMattingJobCallback,
     updateVideoMattingJobProgress
   } = useContext(RenderQueueContext);
   const processJob = useCallback(async (job) => {
-    let outputs = null;
+    const { signal } = getAbortController(job.id);
+    let output = null;
     let processingError = null;
     try {
+      signal.throwIfAborted();
       updateVideoMattingJobProgress(job.id, {
         detail: null,
         message: "Checking WebGPU support...",
         value: 0
       });
       const support = await canUseVideoMatting({ model: job.model });
+      signal.throwIfAborted();
       if (!support.supported) {
         throw new Error(support.detailedReason);
       }
       await loadModelForJob({
+        signal,
         model: job.model,
         progressStart: 0,
         progressSpan: 0.2,
         isModelCached: (model) => isVideoMattingModelCached({ model }),
-        loadModel: (model, onProgress) => loadVideoMattingModel({
-          model,
-          onProgress: (progress) => onProgress(progress.progress)
-        }),
+        loadModel: async (model, onProgress) => {
+          await downloadVideoMattingModel({
+            signal,
+            model,
+            onProgress: (progress) => onProgress(progress.progress)
+          });
+          await loadVideoMattingModel({ model, signal });
+        },
         updateProgress: (progress) => updateVideoMattingJobProgress(job.id, {
           ...progress,
           detail: null
         })
       });
-      outputs = await separateVideoLayers({
+      const mattingOptions = {
+        signal,
         src: job.src,
         model: job.model,
-        audio: job.audio,
         videoBitrate: job.videoBitrate,
         onProgress: (progress) => {
           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...",
+            message: progress.stage === "finalizing" ? "Finalizing video..." : "Removing background...",
             value: 0.2 + (progress.progress ?? 1) * 0.65
           });
         }
+      };
+      output = await VideoMattingInternals.removeVideoBackground({
+        ...mattingOptions,
+        audio: job.audio
       });
+      if (output === null) {
+        throw new Error("Video matting produced no output.");
+      }
+      signal.throwIfAborted();
       updateVideoMattingJobProgress(job.id, {
         detail: null,
-        message: "Saving video layers...",
+        message: "Saving video...",
         value: 0.88
       });
-      const [base, foreground] = await Promise.all([
-        outputs.base.getBlob(),
-        outputs.foreground.getBlob()
-      ]);
-      await Promise.all([
-        base.arrayBuffer().then((contents) => writeStaticFile({ contents, filePath: job.baseOutName })),
-        foreground.arrayBuffer().then((contents) => writeStaticFile({ contents, filePath: job.foregroundOutName }))
-      ]);
+      const video = await output.video.getBlob();
+      signal.throwIfAborted();
+      markVideoMattingJobSaving(job.id);
+      await video.arrayBuffer().then((contents) => writeStaticFile({ contents, filePath: job.outName }));
+      if (job.target !== null) {
+        updateVideoMattingJobProgress(job.id, {
+          detail: null,
+          message: "Replacing video source...",
+          value: 0.97
+        });
+        const browserStudioOperations = getBrowserStudioOperations();
+        const request = {
+          fileName: job.target.fileName,
+          nodePath: job.target.nodePath.nodePath,
+          src: job.outName
+        };
+        const replaceSource = browserStudioOperations?.replaceVideoSource;
+        if (browserStudioOperations && !replaceSource) {
+          throw new Error("Browser Studio cannot replace the video source.");
+        }
+        const response = replaceSource ? await replaceSource(request) : await callApi("/api/replace-video-source", request);
+        if (!response.success) {
+          throw new Error(response.reason);
+        }
+      }
     } catch (error) {
       processingError = error instanceof Error ? error : new Error(String(error));
     }
+    if (output) {
+      await Promise.allSettled([output.video.dispose()]);
+    }
     try {
-      await Promise.all([
-        outputs?.base.dispose(),
-        outputs?.foreground.dispose()
-      ]);
       await disposeVideoMattingModel({ model: job.model });
     } catch {}
-    if (processingError) {
+    if (signal.aborted) {
+      markVideoMattingJobCancelled(job.id);
+    } else if (processingError) {
       markVideoMattingJobFailed(job.id, processingError);
     } else {
       markVideoMattingJobDone(job.id);
     }
   }, [
+    getAbortController,
+    markVideoMattingJobCancelled,
+    markVideoMattingJobSaving,
     markVideoMattingJobDone,
     markVideoMattingJobFailed,
     updateVideoMattingJobProgress

package/dist/esm/{index-v4tr1bft.mjs → index-09txs1bj.mjs}

@@ -3,18 +3,23 @@ var loadModelForJob = async ({
   isModelCached,
   loadModel,
   model,
+  signal,
   progressSpan,
   progressStart,
   updateProgress
 }) => {
+  signal.throwIfAborted();
   const cached = await isModelCached(model);
+  signal.throwIfAborted();
   await loadModel(model, (progress) => {
+    signal.throwIfAborted();
     const percentage = progress === null ? "" : ` ${Math.round(progress * 100)}%`;
     updateProgress({
       message: `${cached ? "Loading" : "Downloading"} ${model}${percentage}`,
       value: progressStart + (progress ?? 0) * progressSpan
     });
   });
+  signal.throwIfAborted();
 };
 
 export { loadModelForJob };

package/dist/esm/{index-4dsz9035.mjs → index-5ycb9e9q.mjs}

@@ -1,9 +1,7 @@
 import {
-  callApi
-} from "./index-eb5txqp6.mjs";
-import {
+  callApi,
   getBrowserStudioOperations
-} from "./index-cw0pnpg5.mjs";
+} from "./index-dfy1t576.mjs";
 
 // src/api/pause.ts
 import { Internals } from "remotion";