@remotion/studio 4.0.526 → 4.0.528

package/dist/esm/{index-5bfxbpca.mjs → index-8nt6a0mw.mjs}

@@ -1,12 +1,12 @@
 import {
   ModelManager
-} from "./index-g7k2dvar.mjs";
+} from "./index-t7xnxdf8.mjs";
 
 // src/components/VideoMatting/Models.tsx
 import {
+  downloadVideoMattingModel,
   getAvailableModels,
   isVideoMattingModelCached,
-  loadVideoMattingModel,
   removeVideoMattingModel
 } from "@remotion/video-matting";
 import { useCallback } from "react";
@@ -14,7 +14,7 @@ import { jsx } from "react/jsx-runtime";
 var AVAILABLE_MODELS = getAvailableModels();
 var Models = ({ description, indent, visible }) => {
   const isModelCached = useCallback((model) => isVideoMattingModelCached({ model }), []);
-  const loadModel = useCallback((model, onProgress) => loadVideoMattingModel({
+  const loadModel = useCallback((model, onProgress) => downloadVideoMattingModel({
     model,
     onProgress: (progress) => onProgress(progress.progress)
   }), []);

package/dist/esm/{index-5gd8k9yv.mjs → index-9q9w8v9p.mjs}

@@ -1,13 +1,13 @@
 import {
   ModelManager
-} from "./index-g7k2dvar.mjs";
+} from "./index-t7xnxdf8.mjs";
 
 // src/components/Transcription/Models.tsx
 import {
   clearStaleModels,
+  downloadWhisperModel,
   getAvailableModels,
   isWhisperModelCached,
-  loadWhisperModel,
   removeWhisperModel
 } from "@remotion/whisper-webgpu";
 import { useCallback } from "react";
@@ -15,7 +15,7 @@ import { jsx } from "react/jsx-runtime";
 var AVAILABLE_MODELS = getAvailableModels();
 var Models = ({ description, indent, visible }) => {
   const isModelCached = useCallback((model) => isWhisperModelCached({ model }), []);
-  const loadModel = useCallback((model, onProgress) => loadWhisperModel({
+  const loadModel = useCallback((model, onProgress) => downloadWhisperModel({
     model,
     onProgress: (progress) => onProgress(progress.progress)
   }), []);

package/dist/esm/{index-x40wwfmt.mjs → index-c2wabcdt.mjs}

@@ -4,24 +4,26 @@ import {
   getFileManagerName,
   label,
   optionRow,
-  rightRow,
+  rightRow
+} from "./index-x6r9bn12.mjs";
+import {
   showNotification
-} from "./index-bs39wngg.mjs";
+} from "./index-dh3zk2hv.mjs";
 import {
   openInFileExplorer
-} from "./index-eb5txqp6.mjs";
+} from "./index-s6qya2gg.mjs";
 import {
   getBrowserStudioOperations
-} from "./index-cw0pnpg5.mjs";
+} from "./index-dfy1t576.mjs";
 import {
   Column,
   InlineAction,
   Spacing,
   ValidationMessage
-} from "./index-cdy8v54v.mjs";
+} from "./index-890dd9b3.mjs";
 import {
   WHITE
-} from "./index-k426ye99.mjs";
+} from "./index-wqc43mw0.mjs";
 
 // src/components/RenderModal/RenderModalOutputName.tsx
 import { useCallback } from "react";

package/dist/esm/index-dfy1t576.mjs

@@ -0,0 +1,129 @@
+// src/helpers/inserted-element-selection.ts
+var pendingSelection = null;
+var listeners = new Set;
+var requestInsertedElementSelection = (selection) => {
+  pendingSelection = selection;
+  for (const listener of listeners) {
+    listener();
+  }
+};
+var clearInsertedElementSelection = (selection) => {
+  if (pendingSelection !== selection) {
+    return;
+  }
+  pendingSelection = null;
+  for (const listener of listeners) {
+    listener();
+  }
+};
+var subscribeToInsertedElementSelection = (listener) => {
+  listeners.add(listener);
+  return () => listeners.delete(listener);
+};
+var getInsertedElementSelection = () => pendingSelection;
+
+// src/helpers/sequence-node-path-mutations.ts
+var pendingMutations = [];
+var seenMutationIds = new Set;
+var queueSequenceNodePathMutation = (mutation) => {
+  if (seenMutationIds.has(mutation.mutationId)) {
+    return;
+  }
+  seenMutationIds.add(mutation.mutationId);
+  pendingMutations.push(mutation);
+  if (mutation.timelineSelection !== null) {
+    requestInsertedElementSelection({
+      compositionId: mutation.timelineSelection.compositionId,
+      nodePath: {
+        absolutePath: mutation.timelineSelection.absolutePath,
+        nodePath: mutation.timelineSelection.nodePath
+      },
+      notification: null
+    });
+  }
+};
+var queueSequenceNodePathMutationFromApiResponse = (response) => {
+  if (typeof response !== "object" || response === null || !("nodePathMutation" in response)) {
+    return;
+  }
+  const { nodePathMutation } = response;
+  if (typeof nodePathMutation !== "object" || nodePathMutation === null || !("mutationId" in nodePathMutation) || typeof nodePathMutation.mutationId !== "string") {
+    return;
+  }
+  queueSequenceNodePathMutation(nodePathMutation);
+};
+var takePendingSequenceNodePathMutations = () => pendingMutations.splice(0);
+
+// src/components/call-api.ts
+var callApi = (endpoint, body, signal) => {
+  return new Promise((resolve, reject) => {
+    fetch(endpoint, {
+      method: "post",
+      headers: {
+        "content-type": "application/json"
+      },
+      signal,
+      body: JSON.stringify(body)
+    }).then((res) => res.json()).then((data) => {
+      if (data.success) {
+        queueSequenceNodePathMutationFromApiResponse(data.data);
+        resolve(data.data);
+      } else {
+        reject(new Error(data.error));
+      }
+    }).catch((err) => {
+      reject(err);
+    });
+  });
+};
+
+// src/helpers/browser-studio-operations.ts
+var BROWSER_STUDIO_OPERATIONS_READY_EVENT = "remotion-browser-studio-operations-ready";
+var getBrowserStudioOperations = () => {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  return window.remotion_browserStudio ?? null;
+};
+var getBrowserStudioKeyframeOperations = () => getBrowserStudioOperations()?.keyframes ?? null;
+var getBrowserStudioEffectOperations = () => getBrowserStudioOperations()?.effects ?? null;
+var canUseKeyframeOperations = () => !window.remotion_isReadOnlyStudio || getBrowserStudioKeyframeOperations() !== null;
+var canUseEffectOperations = () => !window.remotion_isReadOnlyStudio || getBrowserStudioEffectOperations() !== null;
+var canInstallPackages = () => {
+  const browserStudioOperations = getBrowserStudioOperations();
+  if (browserStudioOperations !== null) {
+    return true;
+  }
+  return !window.remotion_isReadOnlyStudio;
+};
+
+// src/api/write-static-file.ts
+var writeStaticFile = async ({
+  contents,
+  filePath
+}) => {
+  if (filePath.includes("\\")) {
+    return Promise.reject(new Error("File path cannot contain backslashes"));
+  }
+  const browserStudioOperations = getBrowserStudioOperations();
+  if (browserStudioOperations) {
+    return browserStudioOperations.writeStaticFile({ contents, filePath });
+  }
+  if (window.remotion_isReadOnlyStudio) {
+    throw new Error("writeStaticFile() is not available in read-only Studio");
+  }
+  const url = new URL(`${window.remotion_staticBase}/api/add-asset`, window.location.origin);
+  url.search = new URLSearchParams({
+    filePath
+  }).toString();
+  const response = await fetch(url, {
+    method: "POST",
+    body: contents
+  });
+  if (!response.ok) {
+    const jsonResponse = await response.json();
+    throw new Error(jsonResponse.error);
+  }
+};
+
+export { requestInsertedElementSelection, clearInsertedElementSelection, subscribeToInsertedElementSelection, getInsertedElementSelection, queueSequenceNodePathMutation, takePendingSequenceNodePathMutations, callApi, BROWSER_STUDIO_OPERATIONS_READY_EVENT, getBrowserStudioOperations, getBrowserStudioEffectOperations, canUseKeyframeOperations, canUseEffectOperations, canInstallPackages, writeStaticFile };

package/dist/esm/index-dh3zk2hv.mjs

@@ -0,0 +1,220 @@
+import {
+  callApi,
+  getBrowserStudioOperations
+} from "./index-dfy1t576.mjs";
+import {
+  getPortal,
+  useZIndex
+} from "./index-qve7mdfp.mjs";
+import {
+  NOTIFICATION_BACKGROUND,
+  NOTIFICATION_BORDER,
+  NOTIFICATION_SHADOW,
+  TRANSPARENT,
+  WHITE_HEX
+} from "./index-wqc43mw0.mjs";
+
+// src/components/Notifications/NotificationCenter.tsx
+import {
+  createRef,
+  useCallback,
+  useImperativeHandle,
+  useState
+} from "react";
+import ReactDOM from "react-dom";
+
+// src/components/Notifications/Notification.tsx
+import { useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+var notification = {
+  backgroundColor: NOTIFICATION_BACKGROUND,
+  color: WHITE_HEX,
+  fontFamily: "Arial, Helvetica, sans-serif",
+  display: "inline-flex",
+  padding: "6px 14px",
+  borderRadius: 6,
+  fontSize: 13,
+  border: NOTIFICATION_BORDER,
+  boxShadow: NOTIFICATION_SHADOW,
+  marginTop: 3,
+  marginBottom: 3,
+  alignItems: "center"
+};
+var Notification = ({ children, id, duration, created, onRemove }) => {
+  useEffect(() => {
+    if (duration === null) {
+      return;
+    }
+    const timeout = setTimeout(() => {
+      onRemove(id);
+    }, duration - (Date.now() - created));
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [created, duration, id, onRemove]);
+  return /* @__PURE__ */ jsx("div", {
+    className: "css-reset",
+    style: notification,
+    children
+  });
+};
+
+// src/components/Notifications/NotificationCenter.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var container = {
+  position: "absolute",
+  justifyContent: "center",
+  alignItems: "center",
+  display: "flex",
+  width: "100%",
+  flexDirection: "column",
+  paddingTop: 40,
+  pointerEvents: "none",
+  backgroundColor: TRANSPARENT
+};
+var notificationCenter = createRef();
+var showNotification = (content, durationInMs) => {
+  return notificationCenter.current.addNotification({
+    content,
+    duration: durationInMs,
+    created: Date.now(),
+    id: String(Math.random()).replace("0.", "")
+  });
+};
+var NotificationCenter = () => {
+  const [notifications, setNotifications] = useState([]);
+  const { currentZIndex } = useZIndex();
+  const onRemove = useCallback((id) => {
+    setNotifications((not) => {
+      return not.filter((n) => n.id !== id);
+    });
+  }, []);
+  const addNotification = useCallback((notification2) => {
+    setNotifications((previousNotifications) => {
+      return [...previousNotifications, notification2];
+    });
+    return {
+      dismiss: () => {
+        setNotifications((oldNotifications) => {
+          return oldNotifications.filter((notificationToFilter) => notificationToFilter.id !== notification2.id);
+        });
+      },
+      replaceContent: (newContent, durationInMs) => {
+        setNotifications((oldNotifications) => {
+          return oldNotifications.map((notificationToMap) => {
+            if (notificationToMap.id === notification2.id) {
+              return {
+                ...notificationToMap,
+                duration: durationInMs,
+                content: newContent,
+                created: Date.now()
+              };
+            }
+            return notificationToMap;
+          });
+        });
+      }
+    };
+  }, []);
+  useImperativeHandle(notificationCenter, () => {
+    return {
+      addNotification
+    };
+  }, [addNotification]);
+  return ReactDOM.createPortal(/* @__PURE__ */ jsx2("div", {
+    style: container,
+    children: notifications.map((n) => {
+      return /* @__PURE__ */ jsx2(Notification, {
+        created: n.created,
+        duration: n.duration,
+        id: n.id,
+        onRemove,
+        children: n.content
+      }, n.id);
+    })
+  }), getPortal(currentZIndex + 1));
+};
+
+// src/api/install-package.ts
+import { getRemotionEnvironment } from "remotion";
+
+// src/helpers/optional-package-dependencies.ts
+import { extraPackages } from "@remotion/studio-shared";
+var TRANSFORMERS_PACKAGE = "@huggingface/transformers";
+var packagesRequiringTransformers = new Set([
+  "@remotion/whisper-webgpu",
+  "@remotion/video-matting"
+]);
+var withRequiredAuxiliaryPackages = (dependencies) => {
+  if (!dependencies.some((dependency) => packagesRequiringTransformers.has(dependency.name)) || dependencies.some((dependency) => dependency.name === TRANSFORMERS_PACKAGE)) {
+    return [...dependencies];
+  }
+  const transformers = extraPackages.find((pkg) => pkg.name === TRANSFORMERS_PACKAGE);
+  if (!transformers) {
+    throw new Error(`No recommended version found for ${TRANSFORMERS_PACKAGE}`);
+  }
+  return [
+    ...dependencies,
+    { name: transformers.name, version: transformers.version }
+  ];
+};
+
+// src/api/install-package.ts
+var installPackages = async (dependencies) => {
+  if (!getRemotionEnvironment().isStudio) {
+    throw new Error("installPackages() is only available in the Studio");
+  }
+  const dependenciesWithAuxiliaryPackages = withRequiredAuxiliaryPackages(dependencies);
+  const browserStudioOperations = getBrowserStudioOperations();
+  if (browserStudioOperations !== null) {
+    const response = await browserStudioOperations.packageInstallation.installPackages({
+      dependencies: dependenciesWithAuxiliaryPackages
+    });
+    if (!response.success) {
+      const error = new Error(response.reason);
+      error.stack = response.stack;
+      throw error;
+    }
+    return {};
+  }
+  if (window.remotion_isReadOnlyStudio) {
+    throw new Error("installPackages() is not available in Read-Only Studio");
+  }
+  return callApi("/api/install-package", {
+    dependencies: dependenciesWithAuxiliaryPackages
+  });
+};
+
+// src/helpers/install-required-package.ts
+var installQueue = Promise.resolve();
+var uniqueDependencies = (dependencies) => Array.from(new Map(dependencies.map((dependency) => [dependency.name, dependency])).values());
+var getMissingPackages = (dependencies) => {
+  const installedPackages = window.remotion_installedPackages ?? [];
+  return uniqueDependencies(dependencies).filter((dependency) => dependency.version !== null || !installedPackages.includes(dependency.name));
+};
+var addInstalledPackages = (dependencies) => {
+  const installedPackages = window.remotion_installedPackages ?? [];
+  window.remotion_installedPackages = Array.from(new Set([
+    ...installedPackages,
+    ...uniqueDependencies(dependencies).map((dependency) => dependency.name)
+  ]));
+};
+var formatPackageList = (dependencies) => dependencies.length === 1 ? dependencies[0].name : `${dependencies.length} packages`;
+var installRequiredPackages = async (dependencies) => {
+  const runInstall = async () => {
+    const missingPackages = getMissingPackages(dependencies);
+    if (missingPackages.length === 0)
+      return;
+    showNotification(`Installing ${formatPackageList(missingPackages)}...`, 3000);
+    await installPackages(missingPackages);
+    addInstalledPackages(missingPackages);
+    showNotification(`Installed ${formatPackageList(missingPackages)}`, 3000);
+  };
+  const queuedInstall = installQueue.then(runInstall, runInstall);
+  installQueue = queuedInstall.catch(() => {
+    return;
+  });
+  await queuedInstall;
+};
+
+export { showNotification, NotificationCenter, TRANSFORMERS_PACKAGE, withRequiredAuxiliaryPackages, installPackages, getMissingPackages, installRequiredPackages };