@remotion/web-renderer 4.0.399 → 4.0.401

package/dist/esm/index.mjs

@@ -1,11 +1,43 @@
+var __dispose = Symbol.dispose || /* @__PURE__ */ Symbol.for("Symbol.dispose");
+var __asyncDispose = Symbol.asyncDispose || /* @__PURE__ */ Symbol.for("Symbol.asyncDispose");
+var __using = (stack, value, async) => {
+  if (value != null) {
+    if (typeof value !== "object" && typeof value !== "function")
+      throw TypeError('Object expected to be assigned to "using" declaration');
+    var dispose;
+    if (async)
+      dispose = value[__asyncDispose];
+    if (dispose === undefined)
+      dispose = value[__dispose];
+    if (typeof dispose !== "function")
+      throw TypeError("Object not disposable");
+    stack.push([async, dispose, value]);
+  } else if (async) {
+    stack.push([async]);
+  }
+  return value;
+};
+var __callDispose = (stack, error, hasError) => {
+  var E = typeof SuppressedError === "function" ? SuppressedError : function(e, s, m, _) {
+    return _ = Error(m), _.name = "SuppressedError", _.error = e, _.suppressed = s, _;
+  }, fail = (e) => error = hasError ? new E(e, error, "An error was suppressed during disposal") : (hasError = true, e), next = (it) => {
+    while (it = stack.pop()) {
+      try {
+        var result = it[1] && it[1].call(it[2]);
+        if (it[0])
+          return Promise.resolve(result).then(next, (e) => (fail(e), next()));
+      } catch (e) {
+        fail(e);
+      }
+    }
+    if (hasError)
+      throw error;
+  };
+  return next();
+};
+
 // src/render-media-on-web.tsx
-import {
-  AudioSampleSource,
-  BufferTarget,
-  Output,
-  StreamTarget,
-  VideoSampleSource
-} from "mediabunny";
+import { BufferTarget, StreamTarget } from "mediabunny";
 import { Internals as Internals7 } from "remotion";
 
 // src/add-sample.ts
@@ -339,7 +371,7 @@ async function createScaffold({
   return {
     delayRenderScope,
     div,
-    cleanupScaffold: () => {
+    [Symbol.dispose]: () => {
       root.unmount();
       div.remove();
       cleanupCSS();
@@ -366,6 +398,11 @@ var getRealFrameRange = (durationInFrames, frameRange) => {
   return frameRange;
 };
 
+// src/get-audio-sample-source.ts
+import {
+  AudioSampleSource
+} from "mediabunny";
+
 // src/get-audio-encoding-config.ts
 import {
   canEncodeAudio,
@@ -389,10 +426,31 @@ var getDefaultAudioEncodingConfig = async () => {
   return null;
 };
 
+// src/get-audio-sample-source.ts
+var addAudioSampleSource = async ({
+  muted,
+  output
+}) => {
+  if (muted) {
+    return null;
+  }
+  const defaultAudioEncodingConfig = await getDefaultAudioEncodingConfig();
+  if (!defaultAudioEncodingConfig) {
+    throw new Error("No default audio encoding config found");
+  }
+  const audioSampleSource = new AudioSampleSource(defaultAudioEncodingConfig);
+  output.addAudioTrack(audioSampleSource);
+  return { audioSampleSource, [Symbol.dispose]: () => audioSampleSource.close() };
+};
+
 // src/internal-state.ts
 var makeInternalState = () => {
   let drawnPrecomposedPixels = 0;
   let precomposedTextures = 0;
+  let waitForReadyTime = 0;
+  let addSampleTime = 0;
+  let createFrameTime = 0;
+  let audioMixingTime = 0;
   const helperCanvasState = {
     current: null
   };
@@ -407,10 +465,50 @@ var makeInternalState = () => {
       precomposedTextures++;
     },
     helperCanvasState,
-    cleanup: () => {
+    [Symbol.dispose]: () => {
       if (helperCanvasState.current) {
         helperCanvasState.current.cleanup();
       }
+    },
+    getWaitForReadyTime: () => waitForReadyTime,
+    addWaitForReadyTime: (time) => {
+      waitForReadyTime += time;
+    },
+    getAddSampleTime: () => addSampleTime,
+    addAddSampleTime: (time) => {
+      addSampleTime += time;
+    },
+    getCreateFrameTime: () => createFrameTime,
+    addCreateFrameTime: (time) => {
+      createFrameTime += time;
+    },
+    getAudioMixingTime: () => audioMixingTime,
+    addAudioMixingTime: (time) => {
+      audioMixingTime += time;
+    }
+  };
+};
+
+// src/mediabunny-cleanups.ts
+import { Output, VideoSampleSource } from "mediabunny";
+var makeOutputWithCleanup = (options) => {
+  const output = new Output(options);
+  return {
+    output,
+    [Symbol.dispose]: () => {
+      if (output.state === "finalized" || output.state === "canceled") {
+        return;
+      }
+      output.cancel();
+    }
+  };
+};
+var makeVideoSampleSourceCleanup = (encodingConfig) => {
+  const videoSampleSource = new VideoSampleSource(encodingConfig);
+  return {
+    videoSampleSource,
+    [Symbol.dispose]: () => {
+      videoSampleSource.close();
     }
   };
 };
@@ -1264,12 +1362,12 @@ var calculateTransforms = ({
   if (!elementComputedStyle) {
     throw new Error("Element computed style not found");
   }
-  const needs3DTransformViaWebGL = !totalMatrix.is2D;
+  const needs3DTransformViaWebGL = !totalMatrix.isIdentity;
   const needsMaskImage = maskImageInfo !== null;
   return {
     dimensions,
     totalMatrix,
-    reset: () => {
+    [Symbol.dispose]: () => {
       for (const reset of toReset) {
         reset();
       }
@@ -1561,7 +1659,9 @@ var drawBackground = async ({
   element,
   logLevel,
   internalState,
-  computedStyle
+  computedStyle,
+  offsetLeft: parentOffsetLeft,
+  offsetTop: parentOffsetTop
 }) => {
   let contextToDraw = context;
   const originalCompositeOperation = context.globalCompositeOperation;
@@ -1583,7 +1683,7 @@ var drawBackground = async ({
     element.style.webkitBackgroundClip = "initial";
     const drawn = await getClippedBackground({
       element,
-      boundingRect,
+      boundingRect: new DOMRect(boundingRect.left + parentOffsetLeft, boundingRect.top + parentOffsetTop, boundingRect.width, boundingRect.height),
       logLevel,
       internalState
     });
@@ -1612,7 +1712,7 @@ var drawBackground = async ({
   if (backgroundColor && backgroundColor !== "transparent" && !(backgroundColor.startsWith("rgba") && (backgroundColor.endsWith(", 0)") || backgroundColor.endsWith(",0")))) {
     const originalFillStyle = contextToDraw.fillStyle;
     contextToDraw.fillStyle = backgroundColor;
-    contextToDraw.fillRect(boundingRect.left - offsetLeft, boundingRect.top - offsetLeft, boundingRect.width, boundingRect.height);
+    contextToDraw.fillRect(boundingRect.left - offsetLeft, boundingRect.top - offsetTop, boundingRect.width, boundingRect.height);
     contextToDraw.fillStyle = originalFillStyle;
   }
   finish();
@@ -2228,7 +2328,9 @@ var drawElement = async ({
     element,
     logLevel,
     internalState,
-    computedStyle
+    computedStyle,
+    offsetLeft: parentRect.left,
+    offsetTop: parentRect.top
   });
   await draw({ dimensions: rect, computedStyle, contextToDraw: context });
   finishBorderRadius();
@@ -2650,116 +2752,113 @@ var processNode = async ({
   internalState,
   rootElement
 }) => {
-  const {
-    totalMatrix,
-    reset,
-    dimensions,
-    opacity,
-    computedStyle,
-    precompositing
-  } = calculateTransforms({
-    element,
-    rootElement
-  });
-  if (opacity === 0) {
-    reset();
-    return { type: "skip-children" };
-  }
-  if (dimensions.width <= 0 || dimensions.height <= 0) {
-    reset();
-    return { type: "continue", cleanupAfterChildren: null };
-  }
-  const rect = new DOMRect(dimensions.left - parentRect.x, dimensions.top - parentRect.y, dimensions.width, dimensions.height);
-  if (precompositing.needsPrecompositing) {
-    const start = Date.now();
-    let precomposeRect = null;
-    if (precompositing.needsMaskImage) {
-      precomposeRect = getWiderRectAndExpand({
-        firstRect: precomposeRect,
-        secondRect: getPrecomposeRectForMask(element)
-      });
-    }
-    if (precompositing.needs3DTransformViaWebGL) {
-      precomposeRect = getWiderRectAndExpand({
-        firstRect: precomposeRect,
-        secondRect: getPrecomposeRectFor3DTransform({
-          element,
-          parentRect,
-          matrix: totalMatrix
-        })
-      });
-    }
-    if (!precomposeRect) {
-      throw new Error("Precompose rect not found");
+  let __stack = [];
+  try {
+    const transforms = __using(__stack, calculateTransforms({
+      element,
+      rootElement
+    }), 0);
+    const { opacity, computedStyle, totalMatrix, dimensions, precompositing } = transforms;
+    if (opacity === 0) {
+      return { type: "skip-children" };
     }
-    if (precomposeRect.width <= 0 || precomposeRect.height <= 0) {
-      return { type: "continue", cleanupAfterChildren: null };
+    if (computedStyle.backfaceVisibility === "hidden" && totalMatrix.m33 < 0) {
+      return { type: "skip-children" };
     }
-    if (!doRectsIntersect(precomposeRect, parentRect)) {
+    if (dimensions.width <= 0 || dimensions.height <= 0) {
       return { type: "continue", cleanupAfterChildren: null };
     }
-    const { tempCanvas, tempContext } = await precomposeDOMElement({
-      boundingRect: precomposeRect,
-      element,
-      logLevel,
-      internalState
-    });
-    let drawable = tempCanvas;
-    const rectAfterTransforms = roundToExpandRect(transformDOMRect({
-      rect: precomposeRect,
-      matrix: totalMatrix
-    }));
-    if (precompositing.needsMaskImage) {
-      handleMask({
-        gradientInfo: precompositing.needsMaskImage,
-        rect,
-        precomposeRect,
-        tempContext
-      });
-    }
-    if (precompositing.needs3DTransformViaWebGL) {
-      const t = handle3dTransform({
-        matrix: totalMatrix,
-        precomposeRect,
-        tempCanvas: drawable,
-        rectAfterTransforms,
-        internalState
-      });
-      if (t) {
-        drawable = t;
+    const rect = new DOMRect(dimensions.left - parentRect.x, dimensions.top - parentRect.y, dimensions.width, dimensions.height);
+    if (precompositing.needsPrecompositing) {
+      const start = Date.now();
+      let precomposeRect = null;
+      if (precompositing.needsMaskImage) {
+        precomposeRect = getWiderRectAndExpand({
+          firstRect: precomposeRect,
+          secondRect: getPrecomposeRectForMask(element)
+        });
       }
-    }
-    const previousTransform = context.getTransform();
-    if (drawable) {
-      context.setTransform(new DOMMatrix);
-      context.drawImage(drawable, 0, drawable.height - rectAfterTransforms.height, rectAfterTransforms.width, rectAfterTransforms.height, rectAfterTransforms.left - parentRect.x, rectAfterTransforms.top - parentRect.y, rectAfterTransforms.width, rectAfterTransforms.height);
-      context.setTransform(previousTransform);
-      Internals5.Log.trace({
+      if (precompositing.needs3DTransformViaWebGL) {
+        precomposeRect = getWiderRectAndExpand({
+          firstRect: precomposeRect,
+          secondRect: getPrecomposeRectFor3DTransform({
+            element,
+            parentRect,
+            matrix: totalMatrix
+          })
+        });
+      }
+      if (!precomposeRect) {
+        throw new Error("Precompose rect not found");
+      }
+      if (precomposeRect.width <= 0 || precomposeRect.height <= 0) {
+        return { type: "continue", cleanupAfterChildren: null };
+      }
+      if (!doRectsIntersect(precomposeRect, parentRect)) {
+        return { type: "continue", cleanupAfterChildren: null };
+      }
+      const { tempCanvas, tempContext } = await precomposeDOMElement({
+        boundingRect: precomposeRect,
+        element,
         logLevel,
-        tag: "@remotion/web-renderer"
-      }, `Transforming element in 3D - canvas size: ${precomposeRect.width}x${precomposeRect.height} - compose: ${Date.now() - start}ms`);
-      internalState.addPrecompose({
-        canvasWidth: precomposeRect.width,
-        canvasHeight: precomposeRect.height
+        internalState
       });
+      let drawable = tempCanvas;
+      const rectAfterTransforms = roundToExpandRect(transformDOMRect({
+        rect: precomposeRect,
+        matrix: totalMatrix
+      }));
+      if (precompositing.needsMaskImage) {
+        handleMask({
+          gradientInfo: precompositing.needsMaskImage,
+          rect,
+          precomposeRect,
+          tempContext
+        });
+      }
+      if (precompositing.needs3DTransformViaWebGL) {
+        drawable = handle3dTransform({
+          matrix: totalMatrix,
+          precomposeRect,
+          tempCanvas: drawable,
+          rectAfterTransforms,
+          internalState
+        });
+      }
+      const previousTransform = context.getTransform();
+      if (drawable) {
+        context.setTransform(new DOMMatrix);
+        context.drawImage(drawable, 0, drawable.height - rectAfterTransforms.height, rectAfterTransforms.width, rectAfterTransforms.height, rectAfterTransforms.left - parentRect.x, rectAfterTransforms.top - parentRect.y, rectAfterTransforms.width, rectAfterTransforms.height);
+        context.setTransform(previousTransform);
+        Internals5.Log.trace({
+          logLevel,
+          tag: "@remotion/web-renderer"
+        }, `Transforming element in 3D - canvas size: ${precomposeRect.width}x${precomposeRect.height} - compose: ${Date.now() - start}ms - helper canvas: ${drawable.width}x${drawable.height}`);
+        internalState.addPrecompose({
+          canvasWidth: precomposeRect.width,
+          canvasHeight: precomposeRect.height
+        });
+      }
+      return { type: "skip-children" };
     }
-    reset();
-    return { type: "skip-children" };
+    const { cleanupAfterChildren } = await drawElement({
+      rect,
+      computedStyle,
+      context,
+      draw,
+      opacity,
+      totalMatrix,
+      parentRect,
+      logLevel,
+      element,
+      internalState
+    });
+    return { type: "continue", cleanupAfterChildren };
+  } catch (_catch) {
+    var _err = _catch, _hasErr = 1;
+  } finally {
+    __callDispose(__stack, _err, _hasErr);
   }
-  const { cleanupAfterChildren } = await drawElement({
-    rect,
-    computedStyle,
-    context,
-    draw,
-    opacity,
-    totalMatrix,
-    parentRect,
-    logLevel,
-    element,
-    internalState
-  });
-  reset();
-  return { type: "continue", cleanupAfterChildren };
 };
 
 // src/drawing/text/draw-text.ts
@@ -2820,6 +2919,33 @@ var getCollapsedText = (span) => {
 };
 
 // src/drawing/text/find-line-breaks.text.ts
+var cannotStartLine = (segment) => {
+  if (segment.length === 0)
+    return false;
+  const firstChar = segment[0];
+  const forbiddenLineStarts = [
+    ".",
+    ",",
+    ";",
+    ":",
+    "!",
+    "?",
+    ")",
+    "]",
+    "}",
+    '"',
+    "'",
+    '"',
+    `'`,
+    "»",
+    "…",
+    "‥",
+    "·",
+    "%",
+    "‰"
+  ];
+  return forbiddenLineStarts.includes(firstChar);
+};
 function findLineBreaks(span, rtl) {
   const textNode = span.childNodes[0];
   const originalText = textNode.textContent;
@@ -2851,12 +2977,25 @@ function findLineBreaks(span, rtl) {
     if (previousRect && previousRect.height !== 0 && Math.abs(currentHeight - previousRect.height) > 2) {
       const offsetHorizontal = rtl ? previousRect.right - originalRect.right : previousRect.left - originalRect.left;
       const shouldCollapse = !computedStyle.whiteSpaceCollapse.includes("preserve");
+      let textForPreviousLine = currentLine;
+      let textForNewLine = wordsToAdd;
+      if (cannotStartLine(word)) {
+        const currentLineSegments = Array.from(segmenter.segment(currentLine)).map((s) => s.segment);
+        let lastWordIndex = currentLineSegments.length - 1;
+        while (lastWordIndex >= 0 && currentLineSegments[lastWordIndex].trim() === "") {
+          lastWordIndex--;
+        }
+        if (lastWordIndex >= 0) {
+          textForPreviousLine = currentLineSegments.slice(0, lastWordIndex).join("");
+          textForNewLine = currentLineSegments.slice(lastWordIndex).join("") + wordsToAdd;
+        }
+      }
       lines.push({
-        text: shouldCollapse ? currentLine.trim() : currentLine,
+        text: shouldCollapse ? textForPreviousLine.trim() : textForPreviousLine,
         height: currentHeight - previousRect.height,
         offsetHorizontal
       });
-      currentLine = wordsToAdd;
+      currentLine = textForNewLine;
     } else {
       currentLine += wordsToAdd;
     }
@@ -3203,9 +3342,10 @@ var waitForReady = ({
   timeoutInMilliseconds,
   scope,
   signal,
-  apiName
+  apiName,
+  internalState
 }) => {
-  const start = Date.now();
+  const start = performance.now();
   const { promise, resolve, reject } = withResolvers();
   let cancelled = false;
   const check = () => {
@@ -3214,20 +3354,24 @@ var waitForReady = ({
     }
     if (signal?.aborted) {
       cancelled = true;
+      internalState?.addWaitForReadyTime(performance.now() - start);
       reject(new Error(`${apiName}() was cancelled`));
       return;
     }
     if (scope.remotion_renderReady === true) {
+      internalState?.addWaitForReadyTime(performance.now() - start);
       resolve();
       return;
     }
     if (scope.remotion_cancelledError !== undefined) {
       cancelled = true;
+      internalState?.addWaitForReadyTime(performance.now() - start);
       reject(scope.remotion_cancelledError);
       return;
     }
-    if (Date.now() - start > timeoutInMilliseconds + 3000) {
+    if (performance.now() - start > timeoutInMilliseconds + 3000) {
       cancelled = true;
+      internalState?.addWaitForReadyTime(performance.now() - start);
       reject(new Error(Object.values(scope.remotion_delayRenderTimeouts).map((d) => d.label).join(", ")));
       return;
     }
@@ -3299,226 +3443,228 @@ var internalRenderMediaOnWeb = async ({
   licenseKey,
   muted
 }) => {
-  const outputTarget = userDesiredOutputTarget === null ? await canUseWebFsWriter() ? "web-fs" : "arraybuffer" : userDesiredOutputTarget;
-  if (outputTarget === "web-fs") {
-    await cleanupStaleOpfsFiles();
-  }
-  const cleanupFns = [];
-  const format = containerToMediabunnyContainer(container);
-  if (codec && !format.getSupportedCodecs().includes(codecToMediabunnyCodec(codec))) {
-    return Promise.reject(new Error(`Codec ${codec} is not supported for container ${container}`));
-  }
-  const resolved = await Internals7.resolveVideoConfig({
-    calculateMetadata: composition.calculateMetadata ?? null,
-    signal: signal ?? new AbortController().signal,
-    defaultProps: composition.defaultProps ?? {},
-    inputProps: inputProps ?? {},
-    compositionId: composition.id,
-    compositionDurationInFrames: composition.durationInFrames ?? null,
-    compositionFps: composition.fps ?? null,
-    compositionHeight: composition.height ?? null,
-    compositionWidth: composition.width ?? null
-  });
-  const realFrameRange = getRealFrameRange(resolved.durationInFrames, frameRange);
-  if (signal?.aborted) {
-    return Promise.reject(new Error("renderMediaOnWeb() was cancelled"));
-  }
-  const { delayRenderScope, div, cleanupScaffold, timeUpdater, collectAssets } = await createScaffold({
-    width: resolved.width,
-    height: resolved.height,
-    fps: resolved.fps,
-    durationInFrames: resolved.durationInFrames,
-    Component: composition.component,
-    resolvedProps: resolved.props,
-    id: resolved.id,
-    delayRenderTimeoutInMilliseconds,
-    logLevel,
-    mediaCacheSizeInBytes,
-    schema: schema ?? null,
-    audioEnabled: !muted,
-    videoEnabled: true,
-    initialFrame: 0,
-    defaultCodec: resolved.defaultCodec,
-    defaultOutName: resolved.defaultOutName
-  });
-  const internalState = makeInternalState();
-  const artifactsHandler = handleArtifacts();
-  cleanupFns.push(() => {
-    cleanupScaffold();
-  });
-  const webFsTarget = outputTarget === "web-fs" ? await createWebFsTarget() : null;
-  const target = webFsTarget ? new StreamTarget(webFsTarget.stream) : new BufferTarget;
-  const output = new Output({
-    format,
-    target
-  });
+  let __stack2 = [];
   try {
-    if (signal?.aborted) {
-      throw new Error("renderMediaOnWeb() was cancelled");
-    }
-    await waitForReady({
-      timeoutInMilliseconds: delayRenderTimeoutInMilliseconds,
-      scope: delayRenderScope,
-      signal,
-      apiName: "renderMediaOnWeb"
+    const outputTarget = userDesiredOutputTarget === null ? await canUseWebFsWriter() ? "web-fs" : "arraybuffer" : userDesiredOutputTarget;
+    if (outputTarget === "web-fs") {
+      await cleanupStaleOpfsFiles();
+    }
+    const format = containerToMediabunnyContainer(container);
+    if (codec && !format.getSupportedCodecs().includes(codecToMediabunnyCodec(codec))) {
+      return Promise.reject(new Error(`Codec ${codec} is not supported for container ${container}`));
+    }
+    const resolved = await Internals7.resolveVideoConfig({
+      calculateMetadata: composition.calculateMetadata ?? null,
+      signal: signal ?? new AbortController().signal,
+      defaultProps: composition.defaultProps ?? {},
+      inputProps: inputProps ?? {},
+      compositionId: composition.id,
+      compositionDurationInFrames: composition.durationInFrames ?? null,
+      compositionFps: composition.fps ?? null,
+      compositionHeight: composition.height ?? null,
+      compositionWidth: composition.width ?? null
     });
+    const realFrameRange = getRealFrameRange(resolved.durationInFrames, frameRange);
     if (signal?.aborted) {
-      throw new Error("renderMediaOnWeb() was cancelled");
+      return Promise.reject(new Error("renderMediaOnWeb() was cancelled"));
     }
-    cleanupFns.push(() => {
-      if (output.state === "finalized" || output.state === "canceled") {
-        return;
-      }
-      output.cancel();
-    });
-    const videoSampleSource = new VideoSampleSource({
-      codec: codecToMediabunnyCodec(codec),
-      bitrate: typeof videoBitrate === "number" ? videoBitrate : getQualityForWebRendererQuality(videoBitrate),
-      sizeChangeBehavior: "deny",
-      hardwareAcceleration,
-      latencyMode: "quality",
-      keyFrameInterval: keyframeIntervalInSeconds,
-      alpha: transparent ? "keep" : "discard"
-    });
-    cleanupFns.push(() => {
-      videoSampleSource.close();
-    });
-    output.addVideoTrack(videoSampleSource);
-    let audioSampleSource = null;
-    if (!muted) {
-      const defaultAudioEncodingConfig = await getDefaultAudioEncodingConfig();
-      if (!defaultAudioEncodingConfig) {
-        return Promise.reject(new Error("No default audio encoding config found"));
-      }
-      audioSampleSource = new AudioSampleSource(defaultAudioEncodingConfig);
-      cleanupFns.push(() => {
-        audioSampleSource?.close();
-      });
-      output.addAudioTrack(audioSampleSource);
-    }
-    await output.start();
-    if (signal?.aborted) {
-      throw new Error("renderMediaOnWeb() was cancelled");
-    }
-    const progress = {
-      renderedFrames: 0,
-      encodedFrames: 0
-    };
-    const throttledOnProgress = createThrottledProgressCallback(onProgress);
-    for (let frame = realFrameRange[0];frame <= realFrameRange[1]; frame++) {
-      if (signal?.aborted) {
-        throw new Error("renderMediaOnWeb() was cancelled");
-      }
-      timeUpdater.current?.update(frame);
-      await waitForReady({
-        timeoutInMilliseconds: delayRenderTimeoutInMilliseconds,
-        scope: delayRenderScope,
-        signal,
-        apiName: "renderMediaOnWeb"
-      });
-      if (signal?.aborted) {
-        throw new Error("renderMediaOnWeb() was cancelled");
-      }
-      const imageData = await createFrame({
-        div,
-        width: resolved.width,
-        height: resolved.height,
-        logLevel,
-        internalState
-      });
-      if (signal?.aborted) {
-        throw new Error("renderMediaOnWeb() was cancelled");
-      }
-      const assets = collectAssets.current.collectAssets();
-      if (onArtifact) {
-        await artifactsHandler.handle({
-          imageData,
-          frame,
-          assets,
-          onArtifact
+    const scaffold = __using(__stack2, await createScaffold({
+      width: resolved.width,
+      height: resolved.height,
+      fps: resolved.fps,
+      durationInFrames: resolved.durationInFrames,
+      Component: composition.component,
+      resolvedProps: resolved.props,
+      id: resolved.id,
+      delayRenderTimeoutInMilliseconds,
+      logLevel,
+      mediaCacheSizeInBytes,
+      schema: schema ?? null,
+      audioEnabled: !muted,
+      videoEnabled: true,
+      initialFrame: 0,
+      defaultCodec: resolved.defaultCodec,
+      defaultOutName: resolved.defaultOutName
+    }), 0);
+    const { delayRenderScope, div, timeUpdater, collectAssets } = scaffold;
+    const internalState = __using(__stack2, makeInternalState(), 0);
+    const artifactsHandler = handleArtifacts();
+    const webFsTarget = outputTarget === "web-fs" ? await createWebFsTarget() : null;
+    const target = webFsTarget ? new StreamTarget(webFsTarget.stream) : new BufferTarget;
+    const outputWithCleanup = __using(__stack2, makeOutputWithCleanup({
+      format,
+      target
+    }), 0);
+    try {
+      let __stack = [];
+      try {
+        if (signal?.aborted) {
+          throw new Error("renderMediaOnWeb() was cancelled");
+        }
+        await waitForReady({
+          timeoutInMilliseconds: delayRenderTimeoutInMilliseconds,
+          scope: delayRenderScope,
+          signal,
+          apiName: "renderMediaOnWeb",
+          internalState
         });
-      }
-      if (signal?.aborted) {
-        throw new Error("renderMediaOnWeb() was cancelled");
-      }
-      const audio = muted ? null : onlyInlineAudio({ assets, fps: resolved.fps, frame });
-      const timestamp = Math.round((frame - realFrameRange[0]) / resolved.fps * 1e6);
-      const videoFrame = new VideoFrame(imageData, {
-        timestamp
-      });
-      progress.renderedFrames++;
-      throttledOnProgress?.({ ...progress });
-      let frameToEncode = videoFrame;
-      if (onFrame) {
-        const returnedFrame = await onFrame(videoFrame);
         if (signal?.aborted) {
           throw new Error("renderMediaOnWeb() was cancelled");
         }
-        frameToEncode = validateVideoFrame({
-          originalFrame: videoFrame,
-          returnedFrame,
-          expectedWidth: resolved.width,
-          expectedHeight: resolved.height,
-          expectedTimestamp: timestamp
+        const videoSampleSource = __using(__stack, makeVideoSampleSourceCleanup({
+          codec: codecToMediabunnyCodec(codec),
+          bitrate: typeof videoBitrate === "number" ? videoBitrate : getQualityForWebRendererQuality(videoBitrate),
+          sizeChangeBehavior: "deny",
+          hardwareAcceleration,
+          latencyMode: "quality",
+          keyFrameInterval: keyframeIntervalInSeconds,
+          alpha: transparent ? "keep" : "discard"
+        }), 0);
+        outputWithCleanup.output.addVideoTrack(videoSampleSource.videoSampleSource);
+        const audioSampleSource = __using(__stack, await addAudioSampleSource({
+          muted,
+          output: outputWithCleanup.output
+        }), 0);
+        await outputWithCleanup.output.start();
+        if (signal?.aborted) {
+          throw new Error("renderMediaOnWeb() was cancelled");
+        }
+        const progress = {
+          renderedFrames: 0,
+          encodedFrames: 0
+        };
+        const throttledOnProgress = createThrottledProgressCallback(onProgress);
+        for (let frame = realFrameRange[0];frame <= realFrameRange[1]; frame++) {
+          if (signal?.aborted) {
+            throw new Error("renderMediaOnWeb() was cancelled");
+          }
+          timeUpdater.current?.update(frame);
+          await waitForReady({
+            timeoutInMilliseconds: delayRenderTimeoutInMilliseconds,
+            scope: delayRenderScope,
+            signal,
+            apiName: "renderMediaOnWeb",
+            internalState
+          });
+          if (signal?.aborted) {
+            throw new Error("renderMediaOnWeb() was cancelled");
+          }
+          const createFrameStart = performance.now();
+          const imageData = await createFrame({
+            div,
+            width: resolved.width,
+            height: resolved.height,
+            logLevel,
+            internalState
+          });
+          internalState.addCreateFrameTime(performance.now() - createFrameStart);
+          if (signal?.aborted) {
+            throw new Error("renderMediaOnWeb() was cancelled");
+          }
+          const timestamp = Math.round((frame - realFrameRange[0]) / resolved.fps * 1e6);
+          const videoFrame = new VideoFrame(imageData, {
+            timestamp
+          });
+          progress.renderedFrames++;
+          throttledOnProgress?.({ ...progress });
+          let frameToEncode = videoFrame;
+          if (onFrame) {
+            const returnedFrame = await onFrame(videoFrame);
+            if (signal?.aborted) {
+              throw new Error("renderMediaOnWeb() was cancelled");
+            }
+            frameToEncode = validateVideoFrame({
+              originalFrame: videoFrame,
+              returnedFrame,
+              expectedWidth: resolved.width,
+              expectedHeight: resolved.height,
+              expectedTimestamp: timestamp
+            });
+          }
+          const audioCombineStart = performance.now();
+          const assets = collectAssets.current.collectAssets();
+          if (onArtifact) {
+            await artifactsHandler.handle({
+              imageData,
+              frame,
+              assets,
+              onArtifact
+            });
+          }
+          if (signal?.aborted) {
+            throw new Error("renderMediaOnWeb() was cancelled");
+          }
+          const audio = muted ? null : onlyInlineAudio({ assets, fps: resolved.fps, frame });
+          internalState.addAudioMixingTime(performance.now() - audioCombineStart);
+          const addSampleStart = performance.now();
+          await Promise.all([
+            addVideoSampleAndCloseFrame(frameToEncode, videoSampleSource.videoSampleSource),
+            audio && audioSampleSource ? addAudioSample(audio, audioSampleSource.audioSampleSource) : Promise.resolve()
+          ]);
+          internalState.addAddSampleTime(performance.now() - addSampleStart);
+          progress.encodedFrames++;
+          throttledOnProgress?.({ ...progress });
+          if (signal?.aborted) {
+            throw new Error("renderMediaOnWeb() was cancelled");
+          }
+        }
+        onProgress?.({ ...progress });
+        videoSampleSource.videoSampleSource.close();
+        audioSampleSource?.audioSampleSource.close();
+        await outputWithCleanup.output.finalize();
+        Internals7.Log.verbose({ logLevel, tag: "web-renderer" }, `Render timings: waitForReady=${internalState.getWaitForReadyTime().toFixed(2)}ms, createFrame=${internalState.getCreateFrameTime().toFixed(2)}ms, addSample=${internalState.getAddSampleTime().toFixed(2)}ms, audioMixing=${internalState.getAudioMixingTime().toFixed(2)}ms`);
+        if (webFsTarget) {
+          sendUsageEvent({
+            licenseKey: licenseKey ?? null,
+            succeeded: true,
+            apiName: "renderMediaOnWeb"
+          });
+          await webFsTarget.close();
+          return {
+            getBlob: () => {
+              return webFsTarget.getBlob();
+            },
+            internalState
+          };
+        }
+        if (!(target instanceof BufferTarget)) {
+          throw new Error("Expected target to be a BufferTarget");
+        }
+        sendUsageEvent({
+          licenseKey: licenseKey ?? null,
+          succeeded: true,
+          apiName: "renderMediaOnWeb"
         });
+        return {
+          getBlob: () => {
+            if (!target.buffer) {
+              throw new Error("The resulting buffer is empty");
+            }
+            return Promise.resolve(new Blob([target.buffer], { type: getMimeType(container) }));
+          },
+          internalState
+        };
+      } catch (_catch) {
+        var _err = _catch, _hasErr = 1;
+      } finally {
+        __callDispose(__stack, _err, _hasErr);
       }
-      await Promise.all([
-        addVideoSampleAndCloseFrame(frameToEncode, videoSampleSource),
-        audio && audioSampleSource ? addAudioSample(audio, audioSampleSource) : Promise.resolve()
-      ]);
-      progress.encodedFrames++;
-      throttledOnProgress?.({ ...progress });
-      if (signal?.aborted) {
-        throw new Error("renderMediaOnWeb() was cancelled");
+    } catch (err) {
+      if (!signal?.aborted) {
+        sendUsageEvent({
+          succeeded: false,
+          licenseKey: licenseKey ?? null,
+          apiName: "renderMediaOnWeb"
+        }).catch((err2) => {
+          Internals7.Log.error({ logLevel: "error", tag: "web-renderer" }, "Failed to send usage event", err2);
+        });
       }
+      throw err;
     }
-    onProgress?.({ ...progress });
-    videoSampleSource.close();
-    audioSampleSource?.close();
-    await output.finalize();
-    const mimeType = getMimeType(container);
-    if (webFsTarget) {
-      sendUsageEvent({
-        licenseKey: licenseKey ?? null,
-        succeeded: true,
-        apiName: "renderMediaOnWeb"
-      });
-      await webFsTarget.close();
-      return {
-        getBlob: () => {
-          return webFsTarget.getBlob();
-        },
-        internalState
-      };
-    }
-    if (!(target instanceof BufferTarget)) {
-      throw new Error("Expected target to be a BufferTarget");
-    }
-    sendUsageEvent({
-      licenseKey: licenseKey ?? null,
-      succeeded: true,
-      apiName: "renderMediaOnWeb"
-    });
-    return {
-      getBlob: () => {
-        if (!target.buffer) {
-          throw new Error("The resulting buffer is empty");
-        }
-        return Promise.resolve(new Blob([target.buffer], { type: mimeType }));
-      },
-      internalState
-    };
-  } catch (err) {
-    sendUsageEvent({
-      succeeded: false,
-      licenseKey: licenseKey ?? null,
-      apiName: "renderMediaOnWeb"
-    }).catch((err2) => {
-      Internals7.Log.error({ logLevel: "error", tag: "web-renderer" }, "Failed to send usage event", err2);
-    });
-    throw err;
+  } catch (_catch2) {
+    var _err2 = _catch2, _hasErr2 = 1;
   } finally {
-    cleanupFns.forEach((fn) => fn());
+    __callDispose(__stack2, _err2, _hasErr2);
   }
 };
 var renderMediaOnWeb = (options) => {
@@ -3564,83 +3710,91 @@ async function internalRenderStillOnWeb({
   onArtifact,
   licenseKey
 }) {
-  const resolved = await Internals8.resolveVideoConfig({
-    calculateMetadata: composition.calculateMetadata ?? null,
-    signal: signal ?? new AbortController().signal,
-    defaultProps: composition.defaultProps ?? {},
-    inputProps: inputProps ?? {},
-    compositionId: composition.id,
-    compositionDurationInFrames: composition.durationInFrames ?? null,
-    compositionFps: composition.fps ?? null,
-    compositionHeight: composition.height ?? null,
-    compositionWidth: composition.width ?? null
-  });
-  if (signal?.aborted) {
-    return Promise.reject(new Error("renderStillOnWeb() was cancelled"));
-  }
-  const internalState = makeInternalState();
-  const { delayRenderScope, div, cleanupScaffold, collectAssets } = await createScaffold({
-    width: resolved.width,
-    height: resolved.height,
-    delayRenderTimeoutInMilliseconds,
-    logLevel,
-    resolvedProps: resolved.props,
-    id: resolved.id,
-    mediaCacheSizeInBytes,
-    audioEnabled: false,
-    Component: composition.component,
-    videoEnabled: true,
-    durationInFrames: resolved.durationInFrames,
-    fps: resolved.fps,
-    schema: schema ?? null,
-    initialFrame: frame,
-    defaultCodec: resolved.defaultCodec,
-    defaultOutName: resolved.defaultOutName
-  });
-  const artifactsHandler = handleArtifacts();
+  let __stack = [];
   try {
-    if (signal?.aborted) {
-      throw new Error("renderStillOnWeb() was cancelled");
-    }
-    await waitForReady({
-      timeoutInMilliseconds: delayRenderTimeoutInMilliseconds,
-      scope: delayRenderScope,
-      signal,
-      apiName: "renderStillOnWeb"
+    const resolved = await Internals8.resolveVideoConfig({
+      calculateMetadata: composition.calculateMetadata ?? null,
+      signal: signal ?? new AbortController().signal,
+      defaultProps: composition.defaultProps ?? {},
+      inputProps: inputProps ?? {},
+      compositionId: composition.id,
+      compositionDurationInFrames: composition.durationInFrames ?? null,
+      compositionFps: composition.fps ?? null,
+      compositionHeight: composition.height ?? null,
+      compositionWidth: composition.width ?? null
     });
     if (signal?.aborted) {
-      throw new Error("renderStillOnWeb() was cancelled");
+      return Promise.reject(new Error("renderStillOnWeb() was cancelled"));
     }
-    const imageData = await takeScreenshot({
-      div,
+    const internalState = __using(__stack, makeInternalState(), 0);
+    const scaffold = __using(__stack, await createScaffold({
       width: resolved.width,
       height: resolved.height,
-      imageFormat,
+      delayRenderTimeoutInMilliseconds,
       logLevel,
-      internalState
-    });
-    const assets = collectAssets.current.collectAssets();
-    if (onArtifact) {
-      await artifactsHandler.handle({ imageData, frame, assets, onArtifact });
-    }
-    sendUsageEvent({
-      licenseKey: licenseKey ?? null,
-      succeeded: true,
-      apiName: "renderStillOnWeb"
-    });
-    return { blob: imageData, internalState };
-  } catch (err) {
-    sendUsageEvent({
-      succeeded: false,
-      licenseKey: licenseKey ?? null,
-      apiName: "renderStillOnWeb"
-    }).catch((err2) => {
-      Internals8.Log.error({ logLevel: "error", tag: "web-renderer" }, "Failed to send usage event", err2);
-    });
-    throw err;
+      resolvedProps: resolved.props,
+      id: resolved.id,
+      mediaCacheSizeInBytes,
+      audioEnabled: false,
+      Component: composition.component,
+      videoEnabled: true,
+      durationInFrames: resolved.durationInFrames,
+      fps: resolved.fps,
+      schema: schema ?? null,
+      initialFrame: frame,
+      defaultCodec: resolved.defaultCodec,
+      defaultOutName: resolved.defaultOutName
+    }), 0);
+    const { delayRenderScope, div, collectAssets } = scaffold;
+    const artifactsHandler = handleArtifacts();
+    try {
+      if (signal?.aborted) {
+        throw new Error("renderStillOnWeb() was cancelled");
+      }
+      await waitForReady({
+        timeoutInMilliseconds: delayRenderTimeoutInMilliseconds,
+        scope: delayRenderScope,
+        signal,
+        apiName: "renderStillOnWeb",
+        internalState: null
+      });
+      if (signal?.aborted) {
+        throw new Error("renderStillOnWeb() was cancelled");
+      }
+      const imageData = await takeScreenshot({
+        div,
+        width: resolved.width,
+        height: resolved.height,
+        imageFormat,
+        logLevel,
+        internalState
+      });
+      const assets = collectAssets.current.collectAssets();
+      if (onArtifact) {
+        await artifactsHandler.handle({ imageData, frame, assets, onArtifact });
+      }
+      sendUsageEvent({
+        licenseKey: licenseKey ?? null,
+        succeeded: true,
+        apiName: "renderStillOnWeb"
+      });
+      return { blob: imageData, internalState };
+    } catch (err) {
+      if (!signal?.aborted) {
+        sendUsageEvent({
+          succeeded: false,
+          licenseKey: licenseKey ?? null,
+          apiName: "renderStillOnWeb"
+        }).catch((err2) => {
+          Internals8.Log.error({ logLevel: "error", tag: "web-renderer" }, "Failed to send usage event", err2);
+        });
+      }
+      throw err;
+    }
+  } catch (_catch) {
+    var _err = _catch, _hasErr = 1;
   } finally {
-    internalState.cleanup();
-    cleanupScaffold();
+    __callDispose(__stack, _err, _hasErr);
   }
 }
 var renderStillOnWeb = (options) => {