@remotion/studio 4.0.372 → 4.0.374

package/dist/esm/internals.mjs

@@ -17634,7 +17634,7 @@ var loadPlaybackRate = () => {
 
 // src/components/PlaybackRatePersistor.tsx
 var PlaybackRatePersistor = () => {
-  const { setPlaybackRate, playbackRate } = useContext49(Internals40.Timeline.TimelineContext);
+  const { setPlaybackRate, playbackRate } = useContext49(Internals40.TimelineContext);
   useEffect54(() => {
     setPlaybackRate(loadPlaybackRate());
   }, [setPlaybackRate]);
@@ -17943,7 +17943,35 @@ var TimelineZoomControls = () => {
 import ReactDOM8 from "react-dom/client";
 import { Internals as Internals44 } from "remotion";
 import { jsx as jsx176 } from "react/jsx-runtime";
-var compose = ({
+var svgToImageBitmap = (svg) => {
+  const computedStyle = getComputedStyle(svg);
+  const { transform: originalTransform } = computedStyle;
+  svg.style.transform = "none";
+  const svgDimensions = svg.getBoundingClientRect();
+  svg.style.transform = originalTransform;
+  if (svgDimensions.width === 0 || svgDimensions.height === 0) {
+    return Promise.resolve(null);
+  }
+  const svgData = new XMLSerializer().serializeToString(svg);
+  return new Promise((resolve, reject) => {
+    const image = new Image(svgDimensions.width, svgDimensions.height);
+    const url = "data:image/svg+xml;base64," + window.btoa(svgData);
+    image.onload = function() {
+      resolve({
+        image,
+        width: svgDimensions.width,
+        height: svgDimensions.height,
+        left: svgDimensions.left,
+        top: svgDimensions.top
+      });
+    };
+    image.onerror = () => {
+      reject(new Error("Failed to convert SVG to image"));
+    };
+    image.src = url;
+  });
+};
+var compose = async ({
   composables,
   width,
   height
@@ -17954,7 +17982,15 @@ var compose = ({
     throw new Error("Could not get context");
   }
   for (const composable of composables) {
-    context.drawImage(composable, 0, 0);
+    if (composable.type === "canvas") {
+      const boundingClientRect = composable.element.getBoundingClientRect();
+      context.drawImage(composable.element, boundingClientRect.left, boundingClientRect.top);
+    } else if (composable.type === "svg") {
+      const imageBitmap = await svgToImageBitmap(composable.element);
+      if (imageBitmap) {
+        context.drawImage(imageBitmap.image, imageBitmap.left, imageBitmap.top);
+      }
+    }
   }
   return canvas;
 };
@@ -17963,86 +17999,75 @@ var findCanvasElements = (element) => {
   const composables = [];
   Array.from(canvasElements).forEach((canvasElement) => {
     const canvas = canvasElement;
-    composables.push(canvas);
+    composables.push({
+      type: "canvas",
+      element: canvas
+    });
+  });
+  return composables;
+};
+var findSvgElements = (element) => {
+  const svgElements = element.querySelectorAll("svg");
+  const composables = [];
+  Array.from(svgElements).forEach((svgElement) => {
+    const svg = svgElement;
+    composables.push({
+      type: "svg",
+      element: svg
+    });
   });
   return composables;
 };
-var waitForReady = (timeoutInMilliseconds) => {
+var waitForReady = (timeoutInMilliseconds, scope) => {
   const { promise, resolve, reject } = Promise.withResolvers();
   const start = Date.now();
   const interval = setInterval(() => {
-    if (window.remotion_renderReady === true) {
+    if (scope.remotion_renderReady === true) {
       resolve(true);
       clearInterval(interval);
       return;
     }
-    if (window.remotion_cancelledError !== undefined) {
-      reject(window.remotion_cancelledError);
+    if (scope.remotion_cancelledError !== undefined) {
+      reject(scope.remotion_cancelledError);
       clearInterval(interval);
       return;
     }
     if (Date.now() - start > timeoutInMilliseconds + 3000) {
-      reject(new Error(Object.values(window.remotion_delayRenderTimeouts).map((d) => d.label).join(", ")));
+      reject(new Error(Object.values(scope.remotion_delayRenderTimeouts).map((d) => d.label).join(", ")));
       clearInterval(interval);
     }
   }, 50);
   return promise;
 };
-var renderStillOnWeb = async ({
+var COMP_ID = "markup";
+var internalRenderStillOnWeb = async ({
   Component,
   width,
   height,
   fps,
   durationInFrames,
-  frame: frame2
+  frame: frame2,
+  delayRenderTimeoutInMilliseconds,
+  logLevel
 }) => {
   const div = document.createElement("div");
   div.style.display = "flex";
   div.style.backgroundColor = "transparent";
-  div.style.position = "absolute";
+  div.style.position = "fixed";
   div.style.width = `${width}px`;
   div.style.height = `${height}px`;
+  div.style.zIndex = "-9999";
   document.body.appendChild(div);
-  const delayRenderTimeoutInMilliseconds = 1e4;
   if (!ReactDOM8.createRoot) {
     throw new Error("@remotion/web-renderer requires React 18 or higher");
   }
-  const compositionManagerContext = {
-    currentCompositionMetadata: {
-      durationInFrames,
-      fps,
-      height,
-      width,
-      props: {},
-      defaultCodec: null,
-      defaultOutName: null,
-      defaultVideoImageFormat: null,
-      defaultPixelFormat: null,
-      defaultProResProfile: null
-    },
-    folders: [],
-    compositions: [
-      {
-        id: "markup",
-        component: Component,
-        nonce: 0,
-        defaultProps: undefined,
-        folderName: null,
-        parentFolderName: null,
-        schema: null,
-        calculateMetadata: null,
-        durationInFrames,
-        fps,
-        height,
-        width
-      }
-    ],
-    canvasContent: {
-      type: "composition",
-      compositionId: "markup"
-    }
-  };
   const root = ReactDOM8.createRoot(div);
+  const delayRenderScope = {
+    remotion_renderReady: true,
+    remotion_delayRenderTimeouts: {},
+    remotion_puppeteerTimeout: delayRenderTimeoutInMilliseconds,
+    remotion_attempt: 0
+  };
   root.render(/* @__PURE__ */ jsx176(Internals44.RemotionEnvironmentContext, {
     value: {
       isStudio: false,
@@ -18051,54 +18076,80 @@ var renderStillOnWeb = async ({
       isReadOnlyStudio: false,
       isClientSideRendering: true
     },
-    children: /* @__PURE__ */ jsx176(Internals44.RemotionRoot, {
-      audioEnabled: true,
-      videoEnabled: true,
-      logLevel: "info",
-      numberOfAudioTags: 0,
-      onlyRenderComposition: null,
-      currentCompositionMetadata: {
-        props: {},
-        durationInFrames,
-        fps,
-        height,
-        width,
-        defaultCodec: null,
-        defaultOutName: null,
-        defaultVideoImageFormat: null,
-        defaultPixelFormat: null,
-        defaultProResProfile: null
-      },
-      audioLatencyHint: "interactive",
-      children: /* @__PURE__ */ jsx176(Internals44.CanUseRemotionHooks, {
-        value: true,
-        children: /* @__PURE__ */ jsx176(Internals44.CompositionManager.Provider, {
-          value: compositionManagerContext,
-          children: /* @__PURE__ */ jsx176(Component, {})
+    children: /* @__PURE__ */ jsx176(Internals44.DelayRenderContextType.Provider, {
+      value: delayRenderScope,
+      children: /* @__PURE__ */ jsx176(Internals44.CompositionManagerProvider, {
+        initialCanvasContent: {
+          type: "composition",
+          compositionId: COMP_ID
+        },
+        onlyRenderComposition: null,
+        currentCompositionMetadata: {
+          props: {},
+          durationInFrames,
+          fps,
+          height,
+          width,
+          defaultCodec: null,
+          defaultOutName: null,
+          defaultVideoImageFormat: null,
+          defaultPixelFormat: null,
+          defaultProResProfile: null
+        },
+        initialCompositions: [
+          {
+            id: COMP_ID,
+            component: Component,
+            nonce: 0,
+            defaultProps: undefined,
+            folderName: null,
+            parentFolderName: null,
+            schema: null,
+            calculateMetadata: null,
+            durationInFrames,
+            fps,
+            height,
+            width
+          }
+        ],
+        children: /* @__PURE__ */ jsx176(Internals44.RemotionRoot, {
+          audioEnabled: false,
+          videoEnabled: true,
+          logLevel,
+          numberOfAudioTags: 0,
+          audioLatencyHint: "interactive",
+          frameState: {
+            [COMP_ID]: frame2
+          },
+          children: /* @__PURE__ */ jsx176(Internals44.CanUseRemotionHooks, {
+            value: true,
+            children: /* @__PURE__ */ jsx176(Component, {})
+          })
         })
       })
     })
   }));
-  window.remotion_setFrame(frame2, "markup", frame2);
-  await waitForReady(delayRenderTimeoutInMilliseconds);
+  await waitForReady(delayRenderTimeoutInMilliseconds, delayRenderScope);
   const canvasElements = findCanvasElements(div);
-  const composed = compose({
-    composables: canvasElements,
+  const svgElements = findSvgElements(div);
+  const composed = await compose({
+    composables: [...canvasElements, ...svgElements],
     width,
     height
   });
   const imageData = await composed.convertToBlob({
     type: "image/png"
   });
-  const blob = new Blob([imageData], { type: "image/png" });
-  const url = URL.createObjectURL(blob);
-  const a = document.createElement("a");
-  a.href = url;
-  a.download = "composed.png";
-  a.click();
-  URL.revokeObjectURL(url);
   root.unmount();
   div.remove();
+  return imageData;
+};
+var renderStillOnWeb = (options) => {
+  return internalRenderStillOnWeb({
+    ...options,
+    delayRenderTimeoutInMilliseconds: options.delayRenderTimeoutInMilliseconds ?? 30000,
+    logLevel: options.logLevel ?? "info"
+  });
 };
 
 // src/components/WebRender/TriggerWebRender.tsx
@@ -18125,6 +18176,13 @@ var TriggerWebRender = () => {
       fps: video.fps,
       durationInFrames: video.durationInFrames,
       frame: frame2
+    }).then((blob) => {
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = "composed.png";
+      a.click();
+      URL.revokeObjectURL(url);
     });
   }, [video, frame2]);
   return /* @__PURE__ */ jsx177(Button, {
@@ -18187,7 +18245,7 @@ var padding2 = {
   width: TIMELINE_PADDING
 };
 var PreviewToolbar = ({ readOnlyStudio, bufferStateDelayInMilliseconds }) => {
-  const { playbackRate, setPlaybackRate } = useContext53(Internals46.Timeline.TimelineContext);
+  const { playbackRate, setPlaybackRate } = useContext53(Internals46.TimelineContext);
   const { mediaMuted } = useContext53(Internals46.MediaVolumeContext);
   const { setMediaMuted } = useContext53(Internals46.SetMediaVolumeContext);
   const isVideoComposition = useIsVideoComposition();
@@ -20468,7 +20526,7 @@ import { Internals as Internals52 } from "remotion";
 var lastTimelinePositionWhileScrolling = null;
 var TimelinePlayCursorSyncer = () => {
   const video = Internals52.useVideo();
-  const timelineContext = useContext65(Internals52.Timeline.TimelineContext);
+  const timelineContext = useContext65(Internals52.TimelineContext);
   const timelinePosition = Internals52.Timeline.useTimelinePosition();
   const { canvasContent } = useContext65(Internals52.CompositionManager);
   const { zoom: zoomMap } = useContext65(TimelineZoomCtx);
@@ -31823,6 +31881,12 @@ class FlacDemuxer extends Demuxer {
           slice.skip(-1);
           continue;
         }
+        if (nextIsLegit.num - frameHeader.num !== 1) {
+          console.log("skipping", nextIsLegit.num, frameHeader.num);
+          slice.skip(-1);
+          continue;
+        }
+        console.log(frameHeader.num, nextIsLegit.num, slice.filePos);
         return {
           num: frameHeader.num,
           blockSize: frameHeader.blockSize,
@@ -32488,7 +32552,7 @@ class UrlSource extends Source {
     return this._orchestrator.read(start, end);
   }
   async _runWorker(worker) {
-    while (true) {
+    while (!worker.aborted) {
       const existing = this._existingResponses.get(worker);
       this._existingResponses.delete(worker);
       let abortController = existing?.abortController;
@@ -32537,9 +32601,6 @@ class UrlSource extends Source {
             throw error;
           }
         }
-        if (worker.aborted) {
-          break;
-        }
         const { done, value } = readResult;
         if (done) {
           this._orchestrator.forgetWorker(worker);
@@ -32552,9 +32613,6 @@ class UrlSource extends Source {
         this.onread?.(worker.currentPos, worker.currentPos + value.length);
         this._orchestrator.supplyWorkerData(worker, value);
       }
-      if (worker.aborted) {
-        break;
-      }
     }
     worker.running = false;
   }
@@ -32746,7 +32804,7 @@ class ReadOrchestrator {
       currentPos: startPos,
       targetPos,
       running: false,
-      aborted: this.disposed,
+      aborted: false,
       pendingSlices: [],
       age: this.nextAge++
     };
@@ -32785,7 +32843,9 @@ class ReadOrchestrator {
     });
   }
   supplyWorkerData(worker, bytes) {
-    assert(!worker.aborted);
+    if (this.disposed) {
+      return;
+    }
     const start = worker.currentPos;
     const end = start + bytes.length;
     this.insertIntoCache({
@@ -33572,7 +33632,7 @@ import { useVideoConfig as useVideoConfig5 } from "remotion";
 async function extractFrames({
   src,
   timestampsInSeconds,
-  onFrame,
+  onVideoSample,
   signal
 }) {
   const input2 = new Input({
@@ -33613,8 +33673,7 @@ async function extractFrames({
       if (!videoSample) {
         continue;
       }
-      const videoFrame = videoSample.toVideoFrame();
-      onFrame(videoFrame);
+      onVideoSample(videoSample);
     }
   } catch (error) {
     if (error instanceof InputDisposedError) {
@@ -33630,11 +33689,15 @@ async function extractFrames({
 }
 
 // src/helpers/frame-database.ts
-var makeFrameDatabaseKey = (src, timestamp) => `${src}|${timestamp}`;
+var KEY_SEPARATOR = "|";
+var makeFrameDatabaseKey = (src, timestamp) => `${src}${KEY_SEPARATOR}${timestamp}`;
+var getFrameDatabaseKeyPrefix = (src) => {
+  return `${src}${KEY_SEPARATOR}`;
+};
 var frameDatabase = new Map;
 var aspectRatioCache = new Map;
 var getTimestampFromFrameDatabaseKey = (key4) => {
-  const split = key4.split("|");
+  const split = key4.split(KEY_SEPARATOR);
   return Number(split[split.length - 1]);
 };
 var getAspectRatioFromCache = (src) => {
@@ -33655,6 +33718,19 @@ var clearOldFrames = () => {
     frameDatabase.delete(key4);
   }
 };
+var clearFramesForSrc = (src) => {
+  const keysToRemove = [];
+  const prefix = getFrameDatabaseKeyPrefix(src);
+  for (const [key4, frame2] of frameDatabase.entries()) {
+    if (key4.startsWith(prefix)) {
+      frame2.frame.close();
+      keysToRemove.push(key4);
+    }
+  }
+  for (const key4 of keysToRemove) {
+    frameDatabase.delete(key4);
+  }
+};
 
 // src/helpers/resize-video-frame.ts
 var calculateNewDimensionsFromScale = ({
@@ -33796,7 +33872,8 @@ var fillWithCachedFrames = ({
   segmentDuration,
   fromSeconds
 }) => {
-  const keys = Array.from(frameDatabase.keys()).filter((k) => k.startsWith(src));
+  const prefix = getFrameDatabaseKeyPrefix(src);
+  const keys = Array.from(frameDatabase.keys()).filter((k) => k.startsWith(prefix));
   const targets = Array.from(filledSlots.keys());
   for (const timestamp of targets) {
     let bestKey;
@@ -33865,6 +33942,11 @@ var TimelineVideoInfo = ({ src, visualizationWidth, startFrom, durationInFrames
   const ref = useRef37(null);
   const [error, setError] = useState67(null);
   const aspectRatio = useRef37(getAspectRatioFromCache(src));
+  useEffect67(() => {
+    return () => {
+      clearFramesForSrc(src);
+    };
+  }, [src]);
   useEffect67(() => {
     if (error) {
       return;
@@ -33926,7 +34008,8 @@ var TimelineVideoInfo = ({ src, visualizationWidth, startFrom, durationInFrames
         return Array.from(filledSlots.keys()).map((timestamp) => timestamp / WEBCODECS_TIMESCALE);
       },
       src,
-      onFrame: (frame2) => {
+      onVideoSample: (sample) => {
+        const frame2 = sample.toVideoFrame();
         const scale = HEIGHT / frame2.displayHeight * window.devicePixelRatio;
         const transformed = resizeVideoFrame({
           frame: frame2,
@@ -42410,23 +42493,28 @@ var Studio = ({ rootComponent, readOnly }) => {
   useLayoutEffect2(() => {
     injectCSS();
   }, []);
-  return /* @__PURE__ */ jsx274(Internals67.RemotionRoot, {
-    audioEnabled: window.remotion_audioEnabled,
-    videoEnabled: window.remotion_videoEnabled,
-    logLevel: window.remotion_logLevel,
-    numberOfAudioTags: window.remotion_numberOfAudioTags,
+  return /* @__PURE__ */ jsx274(Internals67.CompositionManagerProvider, {
     onlyRenderComposition: null,
     currentCompositionMetadata: null,
-    audioLatencyHint: window.remotion_audioLatencyHint ?? "interactive",
-    children: /* @__PURE__ */ jsxs141(EditorContexts, {
-      readOnlyStudio: readOnly,
-      children: [
-        /* @__PURE__ */ jsx274(Editor, {
-          readOnlyStudio: readOnly,
-          Root: rootComponent
-        }),
-        readOnly ? null : createPortal(/* @__PURE__ */ jsx274(ServerDisconnected, {}), getServerDisconnectedDomElement())
-      ]
+    initialCompositions: [],
+    initialCanvasContent: null,
+    children: /* @__PURE__ */ jsx274(Internals67.RemotionRoot, {
+      frameState: null,
+      audioEnabled: window.remotion_audioEnabled,
+      videoEnabled: window.remotion_videoEnabled,
+      logLevel: window.remotion_logLevel,
+      numberOfAudioTags: window.remotion_numberOfAudioTags,
+      audioLatencyHint: window.remotion_audioLatencyHint ?? "interactive",
+      children: /* @__PURE__ */ jsxs141(EditorContexts, {
+        readOnlyStudio: readOnly,
+        children: [
+          /* @__PURE__ */ jsx274(Editor, {
+            readOnlyStudio: readOnly,
+            Root: rootComponent
+          }),
+          readOnly ? null : createPortal(/* @__PURE__ */ jsx274(ServerDisconnected, {}), getServerDisconnectedDomElement())
+        ]
+      })
     })
   });
 };