@remotion/studio 4.0.521 → 4.0.523

package/dist/esm/index-7tt71e8n.mjs

@@ -0,0 +1,36 @@
+// src/components/use-model-cache-status.ts
+import { useEffect, useState } from "react";
+var useModelCacheStatus = ({
+  isModelCached,
+  models,
+  refreshKey
+}) => {
+  const [cachedModels, setCachedModels] = useState(new Set);
+  useEffect(() => {
+    let cancelled = false;
+    Promise.all(models.map(async ({ name }) => ({
+      cached: await isModelCached(name),
+      name
+    }))).then((results) => {
+      if (!cancelled) {
+        const nextCachedModels = new Set;
+        for (const result of results) {
+          if (result.cached) {
+            nextCachedModels.add(result.name);
+          }
+        }
+        setCachedModels(nextCachedModels);
+      }
+    }).catch(() => {
+      if (!cancelled) {
+        setCachedModels(new Set);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [isModelCached, models, refreshKey]);
+  return cachedModels;
+};
+
+export { useModelCacheStatus };

package/dist/esm/index-9x6e1dq0.mjs

@@ -0,0 +1,428 @@
+// src/components/RenderQueue/context.tsx
+import React, {
+  createRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+
+// src/components/RenderQueue/client-render-queue.ts
+var compositionRegistry = new Map;
+var registerCompositionForJob = (jobId, compositionRef) => {
+  compositionRegistry.set(jobId, compositionRef);
+};
+var getCompositionForJob = (jobId) => {
+  return compositionRegistry.get(jobId);
+};
+var cleanupCompositionForJob = (jobId) => {
+  compositionRegistry.delete(jobId);
+};
+var generateJobId = () => {
+  return `client-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
+};
+var clientJobAbortControllers = new Map;
+var getAbortController = (jobId) => {
+  let controller = clientJobAbortControllers.get(jobId);
+  if (!controller) {
+    controller = new AbortController;
+    clientJobAbortControllers.set(jobId, controller);
+  }
+  return controller;
+};
+var deleteAbortController = (jobId) => {
+  clientJobAbortControllers.delete(jobId);
+};
+var cancelAbortController = (jobId) => {
+  const controller = clientJobAbortControllers.get(jobId);
+  if (controller) {
+    controller.abort();
+  }
+};
+
+// src/components/RenderQueue/context.tsx
+import { jsx } from "react/jsx-runtime";
+var restorePersistedClientRenders = () => {
+  const persisted = window.remotion_initialClientRenders ?? [];
+  return persisted.map((r) => ({ ...r, status: "done" }));
+};
+var isClientRenderJob = (job) => {
+  return job.type === "client-still" || job.type === "client-video";
+};
+var noopString = () => "";
+var noop = () => {
+  return;
+};
+var RenderQueueContext = React.createContext({
+  jobs: [],
+  serverJobs: [],
+  clientJobs: [],
+  captionJobs: [],
+  videoMattingJobs: [],
+  addClientStillJob: noopString,
+  addClientVideoJob: noopString,
+  updateClientJobProgress: noop,
+  markClientJobSaving: noop,
+  markClientJobDone: noop,
+  markClientJobFailed: noop,
+  markClientJobCancelled: noop,
+  removeClientJob: noop,
+  cancelClientJob: noop,
+  setProcessJobCallback: noop,
+  addCaptionJob: noopString,
+  updateCaptionJobProgress: noop,
+  markCaptionJobDone: noop,
+  markCaptionJobFailed: noop,
+  removeCaptionJob: noop,
+  setProcessCaptionJobCallback: noop,
+  addVideoMattingJob: noopString,
+  updateVideoMattingJobProgress: noop,
+  markVideoMattingJobDone: noop,
+  markVideoMattingJobFailed: noop,
+  removeVideoMattingJob: noop,
+  setProcessVideoMattingJobCallback: noop,
+  getAbortController: () => new AbortController,
+  getCompositionForJob: () => {
+    return;
+  }
+});
+var renderJobsRef = createRef();
+var RenderQueueContextProvider = ({ children }) => {
+  const [serverJobs, setServerJobs] = useState(window.remotion_initialRenderQueue ?? []);
+  const [clientJobs, setClientJobs] = useState(restorePersistedClientRenders);
+  const [captionJobs, setCaptionJobs] = useState([]);
+  const [videoMattingJobs, setVideoMattingJobs] = useState([]);
+  const hasActiveLocalJob = clientJobs.some((job) => job.status === "idle" || job.status === "running" || job.status === "saving") || captionJobs.some((job) => job.status === "idle" || job.status === "running") || videoMattingJobs.some((job) => job.status === "idle" || job.status === "running");
+  const [currentlyProcessing, setCurrentlyProcessing] = useState(null);
+  const lastLocalJobStartedAt = useRef(clientJobs.reduce((latest, job) => Math.max(latest, job.startedAt), 0));
+  const processJobCallbackRef = useRef(null);
+  const processCaptionJobCallbackRef = useRef(null);
+  const processVideoMattingJobCallbackRef = useRef(null);
+  const [processorCallbacksVersion, setProcessorCallbacksVersion] = useState(0);
+  useEffect(() => {
+    if (!hasActiveLocalJob) {
+      return;
+    }
+    const preventClose = (event) => {
+      event.preventDefault();
+      event.returnValue = "";
+    };
+    window.addEventListener("beforeunload", preventClose);
+    return () => window.removeEventListener("beforeunload", preventClose);
+  }, [hasActiveLocalJob]);
+  const getLocalJobStartedAt = useCallback(() => {
+    const startedAt = Math.max(Date.now(), lastLocalJobStartedAt.current + 1);
+    lastLocalJobStartedAt.current = startedAt;
+    return startedAt;
+  }, []);
+  useEffect(() => {
+    if (currentlyProcessing) {
+      return;
+    }
+    const nextJob = [...clientJobs, ...captionJobs, ...videoMattingJobs].filter((job) => job.status === "idle").sort((a, b) => a.startedAt - b.startedAt)[0];
+    if (!nextJob) {
+      return;
+    }
+    if (nextJob.type === "caption") {
+      if (!processCaptionJobCallbackRef.current) {
+        return;
+      }
+      setCurrentlyProcessing(nextJob.id);
+      setCaptionJobs((prev) => prev.map((job) => job.id === nextJob.id ? {
+        ...job,
+        status: "running",
+        progress: {
+          message: "Starting transcription...",
+          value: 0
+        }
+      } : job));
+      processCaptionJobCallbackRef.current(nextJob);
+      return;
+    }
+    if (nextJob.type === "video-matting") {
+      if (!processVideoMattingJobCallbackRef.current) {
+        return;
+      }
+      setCurrentlyProcessing(nextJob.id);
+      setVideoMattingJobs((prev) => prev.map((job) => job.id === nextJob.id ? {
+        ...job,
+        status: "running",
+        progress: {
+          detail: null,
+          message: "Starting video matting...",
+          value: 0
+        }
+      } : job));
+      processVideoMattingJobCallbackRef.current(nextJob);
+      return;
+    }
+    if (!processJobCallbackRef.current) {
+      return;
+    }
+    setCurrentlyProcessing(nextJob.id);
+    setClientJobs((prev) => prev.map((job) => job.id === nextJob.id ? {
+      ...job,
+      status: "running",
+      progress: {
+        encodedFrames: 0,
+        totalFrames: 0,
+        doneIn: null,
+        renderEstimatedTime: 0,
+        progress: 0
+      }
+    } : job));
+    processJobCallbackRef.current(nextJob);
+  }, [
+    captionJobs,
+    clientJobs,
+    currentlyProcessing,
+    processorCallbacksVersion,
+    videoMattingJobs
+  ]);
+  const addClientStillJob = useCallback((params, compositionRef) => {
+    const id = generateJobId();
+    registerCompositionForJob(id, compositionRef);
+    const newJob = {
+      ...params,
+      id,
+      startedAt: getLocalJobStartedAt(),
+      status: "idle"
+    };
+    setClientJobs((prev) => [...prev, newJob]);
+    return id;
+  }, [getLocalJobStartedAt]);
+  const addClientVideoJob = useCallback((params, compositionRef) => {
+    const id = generateJobId();
+    registerCompositionForJob(id, compositionRef);
+    const newJob = {
+      ...params,
+      id,
+      startedAt: getLocalJobStartedAt(),
+      status: "idle"
+    };
+    setClientJobs((prev) => [...prev, newJob]);
+    return id;
+  }, [getLocalJobStartedAt]);
+  const updateClientJobProgress = useCallback((jobId, progress) => {
+    setClientJobs((prev) => prev.map((job) => job.id === jobId ? { ...job, status: "running", progress } : job));
+  }, []);
+  const markClientJobSaving = useCallback((jobId) => {
+    setClientJobs((prev) => prev.map((job) => job.id === jobId ? { ...job, status: "saving" } : job));
+  }, []);
+  const markClientJobDone = useCallback((jobId, metadata, getBlob) => {
+    deleteAbortController(jobId);
+    cleanupCompositionForJob(jobId);
+    setClientJobs((prev) => prev.map((job) => job.id === jobId ? { ...job, status: "done", metadata, getBlob } : job));
+    setCurrentlyProcessing((current) => current === jobId ? null : current);
+  }, []);
+  const markClientJobFailed = useCallback((jobId, error) => {
+    deleteAbortController(jobId);
+    cleanupCompositionForJob(jobId);
+    setClientJobs((prev) => prev.map((job) => job.id === jobId ? {
+      ...job,
+      status: "failed",
+      error: { message: error.message, stack: error.stack }
+    } : job));
+    setCurrentlyProcessing((current) => current === jobId ? null : current);
+  }, []);
+  const markClientJobCancelled = useCallback((jobId) => {
+    deleteAbortController(jobId);
+    cleanupCompositionForJob(jobId);
+    setClientJobs((prev) => prev.map((job) => job.id === jobId ? {
+      ...job,
+      status: "cancelled"
+    } : job));
+    setCurrentlyProcessing((current) => current === jobId ? null : current);
+  }, []);
+  const removeClientJob = useCallback((jobId) => {
+    setClientJobs((prev) => {
+      const jobToRemove = prev.find((j) => j.id === jobId);
+      if (jobToRemove?.status === "running") {
+        return prev;
+      }
+      deleteAbortController(jobId);
+      cleanupCompositionForJob(jobId);
+      return prev.filter((job) => job.id !== jobId);
+    });
+  }, []);
+  const cancelClientJob = useCallback((jobId) => {
+    cancelAbortController(jobId);
+  }, []);
+  const setProcessJobCallback = useCallback((callback) => {
+    processJobCallbackRef.current = callback;
+    setProcessorCallbacksVersion((version) => version + 1);
+  }, []);
+  const addCaptionJob = useCallback((params) => {
+    const id = `caption-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
+    const newJob = {
+      ...params,
+      id,
+      type: "caption",
+      startedAt: getLocalJobStartedAt(),
+      status: "idle"
+    };
+    setCaptionJobs((prev) => [...prev, newJob]);
+    return id;
+  }, [getLocalJobStartedAt]);
+  const updateCaptionJobProgress = useCallback((jobId, progress) => {
+    setCaptionJobs((prev) => prev.map((job) => job.id === jobId ? { ...job, status: "running", progress } : job));
+  }, []);
+  const markCaptionJobDone = useCallback((jobId, captionCount) => {
+    setCaptionJobs((prev) => prev.map((job) => job.id === jobId ? { ...job, status: "done", captionCount } : job));
+    setCurrentlyProcessing((current) => current === jobId ? null : current);
+  }, []);
+  const markCaptionJobFailed = useCallback((jobId, error) => {
+    setCaptionJobs((prev) => prev.map((job) => job.id === jobId ? {
+      ...job,
+      status: "failed",
+      error: { message: error.message, stack: error.stack }
+    } : job));
+    setCurrentlyProcessing((current) => current === jobId ? null : current);
+  }, []);
+  const removeCaptionJob = useCallback((jobId) => {
+    setCaptionJobs((prev) => {
+      const jobToRemove = prev.find((job) => job.id === jobId);
+      if (jobToRemove?.status === "running") {
+        return prev;
+      }
+      return prev.filter((job) => job.id !== jobId);
+    });
+  }, []);
+  const setProcessCaptionJobCallback = useCallback((callback) => {
+    processCaptionJobCallbackRef.current = callback;
+    setProcessorCallbacksVersion((version) => version + 1);
+  }, []);
+  const addVideoMattingJob = useCallback((params) => {
+    const id = `video-matting-${Date.now()}-${Math.random().toString(36).substring(2, 11)}`;
+    setVideoMattingJobs((prev) => [
+      ...prev,
+      {
+        ...params,
+        id,
+        type: "video-matting",
+        startedAt: getLocalJobStartedAt(),
+        status: "idle"
+      }
+    ]);
+    return id;
+  }, [getLocalJobStartedAt]);
+  const updateVideoMattingJobProgress = useCallback((jobId, progress) => {
+    setVideoMattingJobs((prev) => prev.map((job) => job.id === jobId ? { ...job, status: "running", progress } : job));
+  }, []);
+  const markVideoMattingJobDone = useCallback((jobId) => {
+    setVideoMattingJobs((prev) => prev.map((job) => job.id === jobId ? { ...job, status: "done" } : job));
+    setCurrentlyProcessing((current) => current === jobId ? null : current);
+  }, []);
+  const markVideoMattingJobFailed = useCallback((jobId, error) => {
+    setVideoMattingJobs((prev) => prev.map((job) => job.id === jobId ? {
+      ...job,
+      status: "failed",
+      error: { message: error.message, stack: error.stack }
+    } : job));
+    setCurrentlyProcessing((current) => current === jobId ? null : current);
+  }, []);
+  const removeVideoMattingJob = useCallback((jobId) => {
+    setVideoMattingJobs((prev) => {
+      const jobToRemove = prev.find((job) => job.id === jobId);
+      if (jobToRemove?.status === "running") {
+        return prev;
+      }
+      return prev.filter((job) => job.id !== jobId);
+    });
+  }, []);
+  const setProcessVideoMattingJobCallback = useCallback((callback) => {
+    processVideoMattingJobCallbackRef.current = callback;
+    setProcessorCallbacksVersion((version) => version + 1);
+  }, []);
+  useImperativeHandle(renderJobsRef, () => ({
+    updateRenderJobs: (newJobs) => {
+      setServerJobs(newJobs);
+    },
+    updateClientRenders: (renders) => {
+      setClientJobs((prev) => {
+        const existingIds = new Set(prev.map((j) => j.id));
+        const updatedPrev = prev.map((job) => {
+          const updated = renders.find((r) => r.id === job.id);
+          if (updated && job.status === "done") {
+            return {
+              ...job,
+              deletedOutputLocation: updated.deletedOutputLocation,
+              metadata: updated.metadata
+            };
+          }
+          return job;
+        });
+        const newJobs = renders.filter((r) => !existingIds.has(r.id)).map((r) => ({ ...r, status: "done" }));
+        return [...updatedPrev, ...newJobs];
+      });
+    }
+  }), []);
+  const value = useMemo(() => {
+    return {
+      jobs: [...serverJobs, ...clientJobs].sort((a, b) => a.startedAt - b.startedAt),
+      serverJobs,
+      clientJobs,
+      captionJobs,
+      videoMattingJobs,
+      addClientStillJob,
+      addClientVideoJob,
+      updateClientJobProgress,
+      markClientJobSaving,
+      markClientJobDone,
+      markClientJobFailed,
+      markClientJobCancelled,
+      removeClientJob,
+      cancelClientJob,
+      setProcessJobCallback,
+      addCaptionJob,
+      updateCaptionJobProgress,
+      markCaptionJobDone,
+      markCaptionJobFailed,
+      removeCaptionJob,
+      setProcessCaptionJobCallback,
+      addVideoMattingJob,
+      updateVideoMattingJobProgress,
+      markVideoMattingJobDone,
+      markVideoMattingJobFailed,
+      removeVideoMattingJob,
+      setProcessVideoMattingJobCallback,
+      getAbortController,
+      getCompositionForJob
+    };
+  }, [
+    serverJobs,
+    clientJobs,
+    captionJobs,
+    videoMattingJobs,
+    addClientStillJob,
+    addClientVideoJob,
+    updateClientJobProgress,
+    markClientJobSaving,
+    markClientJobDone,
+    markClientJobFailed,
+    markClientJobCancelled,
+    removeClientJob,
+    cancelClientJob,
+    setProcessJobCallback,
+    addCaptionJob,
+    updateCaptionJobProgress,
+    markCaptionJobDone,
+    markCaptionJobFailed,
+    removeCaptionJob,
+    setProcessCaptionJobCallback,
+    addVideoMattingJob,
+    updateVideoMattingJobProgress,
+    markVideoMattingJobDone,
+    markVideoMattingJobFailed,
+    removeVideoMattingJob,
+    setProcessVideoMattingJobCallback
+  ]);
+  return /* @__PURE__ */ jsx(RenderQueueContext.Provider, {
+    value,
+    children
+  });
+};
+
+export { isClientRenderJob, RenderQueueContext, renderJobsRef, RenderQueueContextProvider };

package/dist/esm/index-cw0pnpg5.mjs

@@ -0,0 +1,50 @@
+// 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 { BROWSER_STUDIO_OPERATIONS_READY_EVENT, getBrowserStudioOperations, getBrowserStudioEffectOperations, canUseKeyframeOperations, canUseEffectOperations, canInstallPackages, writeStaticFile };

package/dist/esm/index-czwvnn9g.mjs

@@ -0,0 +1,35 @@
+import {
+  ModelManager
+} from "./index-1x7bsdh6.mjs";
+
+// src/components/VideoMatting/Models.tsx
+import {
+  getAvailableModels,
+  isVideoMattingModelCached,
+  loadVideoMattingModel,
+  removeVideoMattingModel
+} from "@remotion/video-matting";
+import { useCallback } from "react";
+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({
+    model,
+    onProgress: (progress) => onProgress(progress.progress)
+  }), []);
+  const removeModel = useCallback((model) => removeVideoMattingModel({ model }), []);
+  return /* @__PURE__ */ jsx(ModelManager, {
+    ariaLabel: "Video matting models",
+    availableModels: AVAILABLE_MODELS,
+    description,
+    indent,
+    isModelCached,
+    loadModel,
+    prepare: null,
+    removeModel,
+    visible
+  });
+};
+
+export { Models };