@remotion/studio 4.0.522 → 4.0.524

package/dist/esm/VideoMattingModal-b0r7e60n.mjs

@@ -0,0 +1,374 @@
+import {
+  useModelCacheStatus
+} from "./index-7tt71e8n.mjs";
+import {
+  RenderModalOutputName
+} from "./index-1b9skrrd.mjs";
+import {
+  Button,
+  Checkmark,
+  Combobox,
+  DismissableModal,
+  ModalHeader,
+  ModelsIcon,
+  RenderModalHr,
+  SeparationIcon,
+  SetSelectedModalContext,
+  SidebarContext,
+  VerticalTab,
+  getDefaultOutputBaseName,
+  input,
+  label,
+  optionRow,
+  optionsSidebarTabs,
+  persistSelectedOptionsSidebarPanel,
+  rightRow,
+  useStaticFiles,
+  validatePublicOutputName
+} from "./index-c37kme2v.mjs";
+import {
+  RenderQueueContext
+} from "./index-9x6e1dq0.mjs";
+import"./index-9qtvmwtx.mjs";
+import"./index-cw0pnpg5.mjs";
+import {
+  Models
+} from "./index-wbmp5srk.mjs";
+import"./index-2j3d1g81.mjs";
+import {
+  VERTICAL_SCROLLBAR_CLASSNAME,
+  ValidationMessage,
+  buttonStyle,
+  container,
+  flexer,
+  horizontalLayout,
+  horizontalTab,
+  icon,
+  iconContainer,
+  leftSidebar,
+  optionsPanel,
+  outerModalStyle
+} from "./index-yfrysr5f.mjs";
+import"./index-5zrb1ft4.mjs";
+import {
+  BLUE_DISABLED
+} from "./index-k426ye99.mjs";
+import"./index-rcv7qkt5.mjs";
+
+// src/components/VideoMatting/VideoMattingModal.tsx
+import { formatBytes } from "@remotion/studio-shared";
+import {
+  canUseVideoMatting,
+  getAvailableModels,
+  isVideoMattingModelCached
+} from "@remotion/video-matting";
+import {
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MODELS = getAvailableModels();
+var controlStyle = { width: 330, maxWidth: "100%" };
+var panelStyle = {
+  ...optionsPanel,
+  flexDirection: "column",
+  paddingTop: 16
+};
+var modalStyle = {
+  ...outerModalStyle,
+  height: "auto",
+  maxHeight: "calc(100vh - 40px)",
+  minHeight: outerModalStyle.height,
+  outline: "none"
+};
+var modalLayout = {
+  ...horizontalLayout,
+  flex: "1 1 auto"
+};
+var hiddenPanel = { display: "none" };
+var validationStyle = { padding: "0 16px 8px" };
+var makeOptions = ({
+  items,
+  selected,
+  setSelected
+}) => items.map(({ id, label: optionLabel }) => ({
+  type: "item",
+  id,
+  value: id,
+  label: optionLabel,
+  leftItem: id === selected ? /* @__PURE__ */ jsx(Checkmark, {}) : null,
+  keyHint: null,
+  quickSwitcherLabel: null,
+  subMenu: null,
+  disabled: false,
+  onClick: () => setSelected(id)
+}));
+var VideoMattingModal = ({
+  displayName,
+  src
+}) => {
+  const [tab, setTab] = useState("separate");
+  const isModelCached = useCallback((selectedModel) => isVideoMattingModelCached({ model: selectedModel }), []);
+  const cachedModels = useModelCacheStatus({
+    isModelCached,
+    models: MODELS,
+    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 [videoBitrate, setVideoBitrate] = useState("very-high");
+  const [support, setSupport] = useState({ type: "checking" });
+  const staticFiles = useStaticFiles();
+  const { addVideoMattingJob, videoMattingJobs } = useContext(RenderQueueContext);
+  const { setSelectedModal } = useContext(SetSelectedModalContext);
+  const { setSidebarCollapsedState } = useContext(SidebarContext);
+  useEffect(() => {
+    let cancelled = false;
+    setSupport({ type: "checking" });
+    canUseVideoMatting({ model }).then((result) => {
+      if (!cancelled) {
+        setSupport(result.supported ? { type: "supported" } : { type: "unsupported", message: result.detailedReason });
+      }
+    });
+    return () => {
+      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 modelOptions = useMemo(() => makeOptions({
+    items: MODELS.map((item) => ({
+      id: item.name,
+      label: `${item.name} · ${formatBytes(item.webGpuDownloadSize)}${cachedModels.has(item.name) ? " · Downloaded" : ""}`
+    })),
+    selected: model,
+    setSelected: setModel
+  }), [cachedModels, model]);
+  const audioOptions = useMemo(() => makeOptions({
+    items: [
+      { id: "base", label: "Background layer" },
+      { id: "foreground", label: "Foreground layer" },
+      { id: "both", label: "Both layers" },
+      { id: "none", label: "No audio" }
+    ],
+    selected: audio,
+    setSelected: setAudio
+  }), [audio]);
+  const qualityOptions = useMemo(() => makeOptions({
+    items: ["very-low", "low", "medium", "high", "very-high"].map((id) => ({
+      id,
+      label: id.split("-").map((part) => part[0].toUpperCase() + part.slice(1)).join(" ")
+    })),
+    selected: videoBitrate,
+    setSelected: setVideoBitrate
+  }), [videoBitrate]);
+  const submit = useCallback(() => {
+    if (!canSubmit)
+      return;
+    addVideoMattingJob({
+      src,
+      displayName,
+      baseOutName,
+      foregroundOutName,
+      model,
+      audio,
+      videoBitrate
+    });
+    setSidebarCollapsedState({ left: null, right: "expanded" });
+    persistSelectedOptionsSidebarPanel("renders");
+    optionsSidebarTabs.current?.selectRendersPanel();
+    setSelectedModal(null);
+  }, [
+    addVideoMattingJob,
+    audio,
+    baseOutName,
+    canSubmit,
+    displayName,
+    foregroundOutName,
+    model,
+    setSelectedModal,
+    setSidebarCollapsedState,
+    src,
+    videoBitrate
+  ]);
+  return /* @__PURE__ */ jsx(DismissableModal, {
+    ariaLabel: `Track matting ${displayName}`,
+    children: /* @__PURE__ */ jsxs("div", {
+      style: modalStyle,
+      children: [
+        /* @__PURE__ */ jsx(ModalHeader, {
+          title: `Track matting ${displayName}`
+        }),
+        /* @__PURE__ */ jsxs("div", {
+          style: container,
+          children: [
+            /* @__PURE__ */ jsx("div", {
+              style: flexer
+            }),
+            /* @__PURE__ */ jsx(Button, {
+              disabled: !canSubmit,
+              onClick: submit,
+              title: support.type === "unsupported" ? support.message : undefined,
+              style: {
+                ...buttonStyle,
+                backgroundColor: canSubmit ? buttonStyle.backgroundColor : BLUE_DISABLED
+              },
+              children: "Separate"
+            })
+          ]
+        }),
+        /* @__PURE__ */ jsxs("div", {
+          style: modalLayout,
+          children: [
+            /* @__PURE__ */ jsxs("div", {
+              style: leftSidebar,
+              children: [
+                /* @__PURE__ */ jsx(VerticalTab, {
+                  autoFocus: true,
+                  onClick: () => setTab("separate"),
+                  renderIcon: (color) => /* @__PURE__ */ jsx("div", {
+                    style: iconContainer,
+                    children: /* @__PURE__ */ jsx(SeparationIcon, {
+                      color,
+                      style: icon
+                    })
+                  }),
+                  selected: tab === "separate",
+                  style: horizontalTab,
+                  children: "Separate"
+                }),
+                /* @__PURE__ */ jsx(VerticalTab, {
+                  onClick: () => setTab("models"),
+                  renderIcon: (color) => /* @__PURE__ */ jsx("div", {
+                    style: iconContainer,
+                    children: /* @__PURE__ */ jsx(ModelsIcon, {
+                      color,
+                      style: icon
+                    })
+                  }),
+                  selected: tab === "models",
+                  style: horizontalTab,
+                  children: "Models"
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsxs("div", {
+              style: tab === "separate" ? 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,
+                  inputStyle: input,
+                  label: "Foreground output in public/",
+                  onValueChange: (event) => setForegroundOutName(event.target.value),
+                  outName: foregroundOutName,
+                  validationMessage: foregroundError
+                }),
+                /* @__PURE__ */ jsx(RenderModalHr, {}),
+                /* @__PURE__ */ jsxs("div", {
+                  style: optionRow,
+                  children: [
+                    /* @__PURE__ */ jsx("div", {
+                      style: label,
+                      children: "Model"
+                    }),
+                    /* @__PURE__ */ jsx("div", {
+                      style: rightRow,
+                      children: /* @__PURE__ */ jsx(Combobox, {
+                        values: modelOptions,
+                        selectedId: model,
+                        title: "Model",
+                        style: controlStyle
+                      })
+                    })
+                  ]
+                }),
+                support.type === "unsupported" ? /* @__PURE__ */ jsx("div", {
+                  style: validationStyle,
+                  children: /* @__PURE__ */ jsx(ValidationMessage, {
+                    align: "flex-end",
+                    message: support.message,
+                    type: "error"
+                  })
+                }) : null,
+                /* @__PURE__ */ jsxs("div", {
+                  style: optionRow,
+                  children: [
+                    /* @__PURE__ */ jsx("div", {
+                      style: label,
+                      children: "Audio"
+                    }),
+                    /* @__PURE__ */ jsx("div", {
+                      style: rightRow,
+                      children: /* @__PURE__ */ jsx(Combobox, {
+                        values: audioOptions,
+                        selectedId: audio,
+                        title: "Audio",
+                        style: controlStyle
+                      })
+                    })
+                  ]
+                }),
+                /* @__PURE__ */ jsxs("div", {
+                  style: optionRow,
+                  children: [
+                    /* @__PURE__ */ jsx("div", {
+                      style: label,
+                      children: "Video quality"
+                    }),
+                    /* @__PURE__ */ jsx("div", {
+                      style: rightRow,
+                      children: /* @__PURE__ */ jsx(Combobox, {
+                        values: qualityOptions,
+                        selectedId: String(videoBitrate),
+                        title: "Video quality",
+                        style: controlStyle
+                      })
+                    })
+                  ]
+                })
+              ]
+            }),
+            /* @__PURE__ */ jsx(Models, {
+              description: `Models are downloaded automatically when needed.
+You can also manage the browser cache here.`,
+              indent: true,
+              visible: tab === "models"
+            })
+          ]
+        })
+      ]
+    })
+  });
+};
+export {
+  VideoMattingModal
+};

package/dist/esm/VideoMattingQueueProcessor-t1hgm2rm.mjs

@@ -0,0 +1,109 @@
+import {
+  loadModelForJob
+} from "./index-v4tr1bft.mjs";
+import {
+  RenderQueueContext
+} from "./index-9x6e1dq0.mjs";
+import {
+  writeStaticFile
+} from "./index-cw0pnpg5.mjs";
+import"./index-rcv7qkt5.mjs";
+
+// src/components/RenderQueue/VideoMattingQueueProcessor.tsx
+import {
+  canUseVideoMatting,
+  disposeVideoMattingModel,
+  isVideoMattingModelCached,
+  loadVideoMattingModel,
+  separateVideoLayers
+} from "@remotion/video-matting";
+import { useCallback, useContext, useEffect } from "react";
+var VideoMattingQueueProcessor = () => {
+  const {
+    markVideoMattingJobDone,
+    markVideoMattingJobFailed,
+    setProcessVideoMattingJobCallback,
+    updateVideoMattingJobProgress
+  } = useContext(RenderQueueContext);
+  const processJob = useCallback(async (job) => {
+    let outputs = null;
+    let processingError = null;
+    try {
+      updateVideoMattingJobProgress(job.id, {
+        detail: null,
+        message: "Checking WebGPU support...",
+        value: 0
+      });
+      const support = await canUseVideoMatting({ model: job.model });
+      if (!support.supported) {
+        throw new Error(support.detailedReason);
+      }
+      await loadModelForJob({
+        model: job.model,
+        progressStart: 0,
+        progressSpan: 0.2,
+        isModelCached: (model) => isVideoMattingModelCached({ model }),
+        loadModel: (model, onProgress) => loadVideoMattingModel({
+          model,
+          onProgress: (progress) => onProgress(progress.progress)
+        }),
+        updateProgress: (progress) => updateVideoMattingJobProgress(job.id, {
+          ...progress,
+          detail: null
+        })
+      });
+      outputs = await separateVideoLayers({
+        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...",
+            value: 0.2 + (progress.progress ?? 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) => writeStaticFile({ contents, filePath: job.baseOutName })),
+        foreground.arrayBuffer().then((contents) => writeStaticFile({ contents, filePath: job.foregroundOutName }))
+      ]);
+    } catch (error) {
+      processingError = error instanceof Error ? error : new Error(String(error));
+    }
+    try {
+      await Promise.all([
+        outputs?.base.dispose(),
+        outputs?.foreground.dispose()
+      ]);
+      await disposeVideoMattingModel({ model: job.model });
+    } catch {}
+    if (processingError) {
+      markVideoMattingJobFailed(job.id, processingError);
+    } else {
+      markVideoMattingJobDone(job.id);
+    }
+  }, [
+    markVideoMattingJobDone,
+    markVideoMattingJobFailed,
+    updateVideoMattingJobProgress
+  ]);
+  useEffect(() => {
+    setProcessVideoMattingJobCallback(processJob);
+    return () => setProcessVideoMattingJobCallback(null);
+  }, [processJob, setProcessVideoMattingJobCallback]);
+  return null;
+};
+export {
+  VideoMattingQueueProcessor
+};

package/dist/esm/index-1b9skrrd.mjs

@@ -0,0 +1,142 @@
+import {
+  ExpandedFolderIconSolid,
+  RemotionInput,
+  getFileManagerName,
+  label,
+  optionRow,
+  rightRow,
+  showNotification
+} from "./index-c37kme2v.mjs";
+import {
+  openInFileExplorer
+} from "./index-9qtvmwtx.mjs";
+import {
+  getBrowserStudioOperations
+} from "./index-cw0pnpg5.mjs";
+import {
+  Column,
+  InlineAction,
+  Spacing,
+  ValidationMessage
+} from "./index-yfrysr5f.mjs";
+import {
+  WHITE
+} from "./index-k426ye99.mjs";
+
+// src/components/RenderModal/RenderModalOutputName.tsx
+import { useCallback } from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+var existsMessageStyle = {
+  display: "inline-flex",
+  alignItems: "center",
+  minWidth: 0,
+  fontFamily: "sans-serif",
+  fontSize: 13,
+  lineHeight: "18px",
+  color: WHITE,
+  whiteSpace: "nowrap"
+};
+var openIconStyle = {
+  width: 12,
+  height: 12,
+  flexShrink: 0
+};
+var outputNameRow = {
+  ...optionRow,
+  columnGap: 16
+};
+var outputNameInputContainer = {
+  flex: 1,
+  minWidth: 0,
+  maxWidth: 280
+};
+var RenderModalOutputName = ({
+  ariaLabel,
+  existingOutputPath,
+  existence,
+  inputStyle,
+  outName,
+  onValueChange,
+  validationMessage,
+  label: labelText
+}) => {
+  const openExistingOutput = useCallback(() => {
+    openInFileExplorer({ directory: existingOutputPath ?? outName }).catch((err) => {
+      showNotification(`Could not open file: ${err.message}`, 2000);
+    });
+  }, [existingOutputPath, outName]);
+  const renderOpenIcon = useCallback((color) => {
+    return /* @__PURE__ */ jsx(ExpandedFolderIconSolid, {
+      style: openIconStyle,
+      color
+    });
+  }, []);
+  const fileManagerName = getFileManagerName(window.remotion_fileSystemPlatform);
+  const isBrowserStudio = getBrowserStudioOperations() !== null;
+  return /* @__PURE__ */ jsxs("div", {
+    style: outputNameRow,
+    children: [
+      /* @__PURE__ */ jsx(Column, {
+        children: /* @__PURE__ */ jsx("div", {
+          style: label,
+          children: labelText
+        })
+      }),
+      /* @__PURE__ */ jsx("div", {
+        style: rightRow,
+        children: /* @__PURE__ */ jsxs("div", {
+          style: outputNameInputContainer,
+          children: [
+            /* @__PURE__ */ jsx(RemotionInput, {
+              "aria-label": ariaLabel ?? undefined,
+              status: validationMessage ? "error" : existence ? "warning" : "ok",
+              style: inputStyle,
+              type: "text",
+              value: outName,
+              onChange: onValueChange,
+              rightAlign: true
+            }),
+            validationMessage ? /* @__PURE__ */ jsxs(Fragment, {
+              children: [
+                /* @__PURE__ */ jsx(Spacing, {
+                  y: 1,
+                  block: true
+                }),
+                /* @__PURE__ */ jsx(ValidationMessage, {
+                  align: "flex-end",
+                  message: validationMessage,
+                  type: "error"
+                })
+              ]
+            }) : existence ? /* @__PURE__ */ jsxs(Fragment, {
+              children: [
+                /* @__PURE__ */ jsx(Spacing, {
+                  y: 1,
+                  block: true
+                }),
+                /* @__PURE__ */ jsx(ValidationMessage, {
+                  align: "flex-end",
+                  message: /* @__PURE__ */ jsxs("span", {
+                    style: existsMessageStyle,
+                    children: [
+                      isBrowserStudio ? null : /* @__PURE__ */ jsx(InlineAction, {
+                        variant: null,
+                        onClick: openExistingOutput,
+                        renderAction: renderOpenIcon,
+                        title: `Open in ${fileManagerName}`
+                      }),
+                      "Exists, will be overwritten"
+                    ]
+                  }),
+                  type: "warning"
+                })
+              ]
+            }) : null
+          ]
+        })
+      })
+    ]
+  });
+};
+
+export { RenderModalOutputName };