@remotion/studio 4.0.526 → 4.0.527

package/dist/esm/index-21hxsfaa.mjs

@@ -0,0 +1,239 @@
+import {
+  callApi
+} from "./index-r1gr3j3a.mjs";
+import {
+  getBrowserStudioOperations
+} from "./index-cw0pnpg5.mjs";
+import {
+  useZIndex
+} from "./index-9xxg6218.mjs";
+import {
+  NOTIFICATION_BACKGROUND,
+  NOTIFICATION_BORDER,
+  NOTIFICATION_SHADOW,
+  TRANSPARENT,
+  WHITE_HEX
+} from "./index-k426ye99.mjs";
+
+// src/components/Notifications/NotificationCenter.tsx
+import {
+  createRef,
+  useCallback,
+  useImperativeHandle,
+  useState
+} from "react";
+import ReactDOM from "react-dom";
+
+// src/components/Menu/portals.ts
+var portalIds = [
+  "menuportal-0",
+  "menuportal-1",
+  "menuportal-2",
+  "menuportal-3",
+  "menuportal-4",
+  "menuportal-5"
+];
+var portals = typeof document === "undefined" ? [] : portalIds.map((id) => document.getElementById(id));
+var getPortal = (i) => {
+  const portal = portals[i];
+  if (!portal) {
+    throw new Error(`Expected menu portal ${i} to exist`);
+  }
+  return portal;
+};
+
+// 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 { portals, getPortal, showNotification, NotificationCenter, TRANSFORMERS_PACKAGE, withRequiredAuxiliaryPackages, installPackages, getMissingPackages, installRequiredPackages };