@remotion/studio 4.0.522 → 4.0.524

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 };