@remotion/studio 4.0.527 → 4.0.528

package/dist/esm/{CaptionQueueProcessor-npa6szn1.mjs → CaptionQueueProcessor-nr7hjcga.mjs}

@@ -1,22 +1,20 @@
 import {
   loadModelForJob
-} from "./index-v4tr1bft.mjs";
+} from "./index-09txs1bj.mjs";
 import {
   installRequiredPackages
-} from "./index-21hxsfaa.mjs";
+} from "./index-dh3zk2hv.mjs";
 import {
   RenderQueueContext
-} from "./index-9x6e1dq0.mjs";
-import {
-  callApi
-} from "./index-r1gr3j3a.mjs";
+} from "./index-hqxc6tzp.mjs";
 import {
+  callApi,
   getBrowserStudioOperations,
   writeStaticFile
-} from "./index-cw0pnpg5.mjs";
-import"./index-9xxg6218.mjs";
+} from "./index-dfy1t576.mjs";
+import"./index-qve7mdfp.mjs";
 import"./index-5zrb1ft4.mjs";
-import"./index-k426ye99.mjs";
+import"./index-wqc43mw0.mjs";
 import"./index-rcv7qkt5.mjs";
 
 // src/components/RenderQueue/CaptionQueueProcessor.tsx
@@ -24,6 +22,7 @@ import {
   canUseWhisperWebGpu,
   clearStaleModels,
   disposeWhisperModel,
+  downloadWhisperModel,
   isWhisperModelCached,
   loadWhisperModel,
   toCaptions,
@@ -46,13 +45,24 @@ var resampleMediaTo16Khz = async ({
   src,
   audioStreamIndex,
   requestInit,
-  onProgress
+  onProgress,
+  signal
 }) => {
+  signal.throwIfAborted();
   const input = new Input({
     formats: ALL_FORMATS,
     source: new UrlSource(src, requestInit === null ? {} : { requestInit })
   });
   const waveformChunks = [];
+  let conversion = null;
+  let cancellation = null;
+  const onAbort = () => {
+    cancellation = conversion?.cancel().catch(() => {
+      return;
+    }) ?? null;
+    input.dispose();
+  };
+  signal.addEventListener("abort", onAbort, { once: true });
   try {
     onProgress(0);
     const audioTracks = await input.getAudioTracks();
@@ -68,7 +78,8 @@ var resampleMediaTo16Khz = async ({
       format: new WavOutputFormat,
       target: new NullTarget
     });
-    const conversion = await Conversion.init({
+    signal.throwIfAborted();
+    conversion = await Conversion.init({
       input,
       output,
       tracks: "all",
@@ -82,6 +93,7 @@ var resampleMediaTo16Khz = async ({
           forceTranscode: true,
           numberOfChannels: 1,
           process: (sample) => {
+            signal.throwIfAborted();
             const floats = new Float32Array(sample.allocationSize({ format: "f32", planeIndex: 0 }) / Float32Array.BYTES_PER_ELEMENT);
             sample.copyTo(floats, { format: "f32", planeIndex: 0 });
             waveformChunks.push({
@@ -95,13 +107,22 @@ var resampleMediaTo16Khz = async ({
         };
       }
     });
+    signal.throwIfAborted();
     if (!conversion.isValid) {
       throw new Error("The audio track cannot be decoded in this browser. Try converting the media to WAV first.");
     }
     conversion.onProgress = (progress) => onProgress(progress);
     await conversion.execute();
+    signal.throwIfAborted();
     onProgress(1);
   } finally {
+    signal.removeEventListener("abort", onAbort);
+    await cancellation;
+    if (signal.aborted && conversion && cancellation === null) {
+      await conversion.cancel().catch(() => {
+        return;
+      });
+    }
     input.dispose();
   }
   const waveformLength = waveformChunks.reduce((maximum, chunk) => Math.max(maximum, chunk.startFrame + chunk.waveform.length), 0);
@@ -123,17 +144,23 @@ var CaptionQueueProcessor = () => {
     updateCaptionJobProgress,
     markCaptionJobDone,
     markCaptionJobFailed,
+    markCaptionJobCancelled,
+    markCaptionJobSaving,
+    getAbortController,
     setProcessCaptionJobCallback
   } = useContext(RenderQueueContext);
   const processJob = useCallback(async (job) => {
+    const { signal } = getAbortController(job.id);
     let captionCount = null;
     let processingError = null;
     try {
+      signal.throwIfAborted();
       updateCaptionJobProgress(job.id, {
         message: "Checking WebGPU support...",
         value: 0
       });
       const support = await canUseWhisperWebGpu();
+      signal.throwIfAborted();
       if (!support.supported) {
         throw new Error(support.detailedReason);
       }
@@ -142,15 +169,21 @@ var CaptionQueueProcessor = () => {
         value: 0.02
       });
       await clearStaleModels();
+      signal.throwIfAborted();
       await loadModelForJob({
+        signal,
         model: job.model,
         progressStart: 0.03,
         progressSpan: 0.27,
         isModelCached: (model) => isWhisperModelCached({ model }),
-        loadModel: (model, onProgress) => loadWhisperModel({
-          model,
-          onProgress: (progress) => onProgress(progress.progress)
-        }),
+        loadModel: async (model, onProgress) => {
+          await downloadWhisperModel({
+            signal,
+            model,
+            onProgress: (progress) => onProgress(progress.progress)
+          });
+          await loadWhisperModel({ model, signal });
+        },
         updateProgress: (progress) => updateCaptionJobProgress(job.id, progress)
       });
       updateCaptionJobProgress(job.id, {
@@ -158,6 +191,7 @@ var CaptionQueueProcessor = () => {
         value: 0.3
       });
       const channelWaveform = await resampleMediaTo16Khz({
+        signal,
         src: job.src,
         audioStreamIndex: job.audioStreamIndex,
         requestInit: job.requestInit,
@@ -173,6 +207,7 @@ var CaptionQueueProcessor = () => {
         value: 0.5
       });
       const transcription = await transcribe({
+        signal,
         channelWaveform,
         model: job.model,
         task: job.task,
@@ -189,6 +224,8 @@ var CaptionQueueProcessor = () => {
       const { captions } = toCaptions({
         whisperWebGpuOutput: transcription
       });
+      signal.throwIfAborted();
+      markCaptionJobSaving(job.id);
       if (job.target === null) {
         updateCaptionJobProgress(job.id, {
           message: `Saving ${job.outName}...`,
@@ -225,12 +262,21 @@ var CaptionQueueProcessor = () => {
     try {
       await disposeWhisperModel({ model: job.model });
     } catch {}
-    if (processingError) {
+    if (signal.aborted) {
+      markCaptionJobCancelled(job.id);
+    } else if (processingError) {
       markCaptionJobFailed(job.id, processingError);
     } else {
       markCaptionJobDone(job.id, captionCount ?? 0);
     }
-  }, [markCaptionJobDone, markCaptionJobFailed, updateCaptionJobProgress]);
+  }, [
+    getAbortController,
+    markCaptionJobCancelled,
+    markCaptionJobDone,
+    markCaptionJobFailed,
+    markCaptionJobSaving,
+    updateCaptionJobProgress
+  ]);
   useEffect(() => {
     setProcessCaptionJobCallback(processJob);
     return () => setProcessCaptionJobCallback(null);

package/dist/esm/LazyModels-ajkn7fs3.mjs

@@ -0,0 +1,12 @@
+import {
+  Models
+} from "./index-9q9w8v9p.mjs";
+import"./index-t7xnxdf8.mjs";
+import"./index-890dd9b3.mjs";
+import"./index-qve7mdfp.mjs";
+import"./index-5zrb1ft4.mjs";
+import"./index-wqc43mw0.mjs";
+import"./index-rcv7qkt5.mjs";
+export {
+  Models as default
+};

package/dist/esm/LazyModels-g1g7cf4e.mjs

@@ -0,0 +1,12 @@
+import {
+  Models
+} from "./index-8nt6a0mw.mjs";
+import"./index-t7xnxdf8.mjs";
+import"./index-890dd9b3.mjs";
+import"./index-qve7mdfp.mjs";
+import"./index-5zrb1ft4.mjs";
+import"./index-wqc43mw0.mjs";
+import"./index-rcv7qkt5.mjs";
+export {
+  Models as default
+};

package/dist/esm/{TranscriptionModal-79m5wgcj.mjs → TranscriptionModal-e18bzbkb.mjs}

@@ -2,11 +2,10 @@ import {
   useModelCacheStatus
 } from "./index-7tt71e8n.mjs";
 import {
-  GearIcon,
   NumberSetting,
   getDefaultCaptionOutputName,
   validateCaptionOutputName
-} from "./index-vxwg66ar.mjs";
+} from "./index-xac20sv4.mjs";
 import {
   Button,
   Checkbox,
@@ -14,9 +13,9 @@ import {
   Combobox,
   DismissableModal,
   ExpandedFolderIconSolid,
+  GearIcon,
   InfoBubble,
   ModalHeader,
-  ModelsIcon,
   RemotionInput,
   RenderModalHr,
   SetSelectedModalContext,
@@ -31,26 +30,27 @@ import {
   persistSelectedOptionsSidebarPanel,
   rightRow,
   useStaticFiles
-} from "./index-ppspzgn9.mjs";
+} from "./index-x6r9bn12.mjs";
 import {
   showNotification
-} from "./index-21hxsfaa.mjs";
+} from "./index-dh3zk2hv.mjs";
 import {
   RenderQueueContext
-} from "./index-9x6e1dq0.mjs";
+} from "./index-hqxc6tzp.mjs";
 import {
   openInFileExplorer
-} from "./index-e855w59j.mjs";
-import"./index-r1gr3j3a.mjs";
+} from "./index-s6qya2gg.mjs";
 import {
   getBrowserStudioOperations
-} from "./index-cw0pnpg5.mjs";
+} from "./index-dfy1t576.mjs";
+import"./index-t7tbt980.mjs";
 import {
   Models
-} from "./index-614tdz2q.mjs";
-import"./index-r0ejh5sy.mjs";
+} from "./index-9q9w8v9p.mjs";
+import"./index-t7xnxdf8.mjs";
 import {
   InlineAction,
+  ModelsIcon,
   Spacing,
   VERTICAL_SCROLLBAR_CLASSNAME,
   ValidationMessage,
@@ -64,14 +64,14 @@ import {
   leftSidebar,
   optionsPanel,
   outerModalStyle
-} from "./index-5t2dwxsk.mjs";
-import"./index-9xxg6218.mjs";
+} from "./index-890dd9b3.mjs";
+import"./index-qve7mdfp.mjs";
 import"./index-5zrb1ft4.mjs";
 import {
   BLUE_DISABLED,
   LIGHT_TEXT,
   WHITE
-} from "./index-k426ye99.mjs";
+} from "./index-wqc43mw0.mjs";
 import"./index-rcv7qkt5.mjs";
 
 // src/components/Transcription/TranscriptionModal.tsx
@@ -816,7 +816,7 @@ var TranscriptionModal = ({
     };
   }, []);
   const normalizedOutName = outName.normalize("NFC").toLowerCase();
-  const queuedOutputExists = captionJobs.some((job) => job.target === null && (job.status === "idle" || job.status === "running") && job.outName.normalize("NFC").toLowerCase() === normalizedOutName);
+  const queuedOutputExists = captionJobs.some((job) => job.target === null && (job.status === "idle" || job.status === "running" || job.status === "saving") && job.outName.normalize("NFC").toLowerCase() === normalizedOutName);
   const outputValidationMessage = target === null ? validateCaptionOutputName(outName) ?? (queuedOutputExists ? "Another caption job is already using this output file" : null) : null;
   const exists = staticFiles.some((file) => file.name.normalize("NFC").toLowerCase() === normalizedOutName);
   const chunkValidationMessage = strideLengthInSeconds * 2 >= chunkLengthInSeconds ? "Stride length must be less than half of chunk length" : null;

package/dist/esm/{VideoMattingModal-31pew0xj.mjs → VideoMattingModal-5bz2s4rs.mjs}

@@ -3,16 +3,15 @@ import {
 } from "./index-7tt71e8n.mjs";
 import {
   RenderModalOutputName
-} from "./index-s7qa3xbw.mjs";
+} from "./index-c2wabcdt.mjs";
 import {
   Button,
   Checkmark,
   Combobox,
   DismissableModal,
+  GearIcon,
   ModalHeader,
-  ModelsIcon,
   RenderModalHr,
-  SeparationIcon,
   SetSelectedModalContext,
   SidebarContext,
   VerticalTab,
@@ -25,19 +24,20 @@ import {
   rightRow,
   useStaticFiles,
   validatePublicOutputName
-} from "./index-ppspzgn9.mjs";
-import"./index-21hxsfaa.mjs";
+} from "./index-x6r9bn12.mjs";
+import"./index-dh3zk2hv.mjs";
 import {
   RenderQueueContext
-} from "./index-9x6e1dq0.mjs";
-import"./index-e855w59j.mjs";
-import"./index-r1gr3j3a.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-ac5550e7.mjs";
-import"./index-r0ejh5sy.mjs";
+} from "./index-8nt6a0mw.mjs";
+import"./index-t7xnxdf8.mjs";
 import {
+  ModelsIcon,
   VERTICAL_SCROLLBAR_CLASSNAME,
   ValidationMessage,
   buttonStyle,
@@ -50,12 +50,12 @@ import {
   leftSidebar,
   optionsPanel,
   outerModalStyle
-} from "./index-5t2dwxsk.mjs";
-import"./index-9xxg6218.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
@@ -111,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,
@@ -121,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();
@@ -143,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,
@@ -165,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,
@@ -187,11 +178,11 @@ var VideoMattingModal = ({
     addVideoMattingJob({
       src,
       displayName,
-      baseOutName,
-      foregroundOutName,
+      outName,
       model,
       audio,
-      videoBitrate
+      videoBitrate,
+      target
     });
     setSidebarCollapsedState({ left: null, right: "expanded" });
     persistSelectedOptionsSidebarPanel("renders");
@@ -200,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,
@@ -232,7 +224,7 @@ var VideoMattingModal = ({
                 ...buttonStyle,
                 backgroundColor: canSubmit ? buttonStyle.backgroundColor : BLUE_DISABLED
               },
-              children: "Separate"
+              children: "Remove background"
             })
           ]
         }),
@@ -244,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"),
@@ -272,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", {