@remotion/web-renderer 4.0.486 → 4.0.488

package/dist/compose.d.ts

@@ -1,4 +1,4 @@
-export declare const compose: ({ element, context, logLevel, parentRect, internalState, onlyBackgroundClipText, scale, }: {
+export declare const compose: ({ element, context, logLevel, parentRect, internalState, onlyBackgroundClipText, scale, waitForPageResponsiveness, }: {
     element: HTMLElement | SVGElement;
     context: OffscreenCanvasRenderingContext2D;
     logLevel: "error" | "info" | "trace" | "verbose" | "warn";
@@ -23,4 +23,5 @@ export declare const compose: ({ element, context, logLevel, parentRect, interna
     };
     onlyBackgroundClipText: boolean;
     scale: number;
+    waitForPageResponsiveness: (() => Promise<void>) | null;
 }) => Promise<void>;

package/dist/drawing/process-node.d.ts

@@ -5,7 +5,7 @@ export type ProcessNodeReturnValue = {
 } | {
     type: 'skip-children';
 };
-export declare const processNode: ({ element, context, draw, logLevel, parentRect, internalState, rootElement, scale, }: {
+export declare const processNode: ({ element, context, draw, logLevel, parentRect, internalState, rootElement, scale, waitForPageResponsiveness, }: {
     element: HTMLElement | SVGElement;
     context: OffscreenCanvasRenderingContext2D;
     draw: DrawFn;
@@ -31,4 +31,5 @@ export declare const processNode: ({ element, context, draw, logLevel, parentRec
     };
     rootElement: HTMLElement | SVGElement;
     scale: number;
+    waitForPageResponsiveness: (() => Promise<void>) | null;
 }) => Promise<ProcessNodeReturnValue>;

package/dist/drawing/text/handle-text-node.d.ts

@@ -1,5 +1,5 @@
 import type { ProcessNodeReturnValue } from '../process-node';
-export declare const handleTextNode: ({ node, context, logLevel, parentRect, internalState, rootElement, onlyBackgroundClipText, scale, }: {
+export declare const handleTextNode: ({ node, context, logLevel, parentRect, internalState, rootElement, onlyBackgroundClipText, scale, waitForPageResponsiveness, }: {
     node: Text;
     context: OffscreenCanvasRenderingContext2D;
     logLevel: "error" | "info" | "trace" | "verbose" | "warn";
@@ -25,4 +25,5 @@ export declare const handleTextNode: ({ node, context, logLevel, parentRect, int
     rootElement: HTMLElement | SVGElement;
     onlyBackgroundClipText: boolean;
     scale: number;
+    waitForPageResponsiveness: (() => Promise<void>) | null;
 }) => Promise<ProcessNodeReturnValue>;

package/dist/esm/index.mjs

@@ -1248,6 +1248,53 @@ var makeVideoSampleSourceCleanup = (encodingConfig) => {
   };
 };
 
+// src/page-responsiveness.ts
+var PRESET_INTERVALS = {
+  low: 100,
+  medium: 33,
+  high: 16
+};
+var resolvePageResponsivenessInterval = (pageResponsiveness) => {
+  if (pageResponsiveness === "disabled") {
+    return null;
+  }
+  if (pageResponsiveness === "low" || pageResponsiveness === "medium" || pageResponsiveness === "high") {
+    return PRESET_INTERVALS[pageResponsiveness];
+  }
+  if (typeof pageResponsiveness === "number") {
+    if (Number.isNaN(pageResponsiveness)) {
+      throw new Error("`pageResponsiveness` should not be NaN, but is NaN");
+    }
+    if (!Number.isFinite(pageResponsiveness)) {
+      throw new Error(`"pageResponsiveness" must be finite, but is ${pageResponsiveness}`);
+    }
+    if (pageResponsiveness <= 0) {
+      throw new Error(`"pageResponsiveness" must be greater than 0, but is ${pageResponsiveness}`);
+    }
+    return pageResponsiveness;
+  }
+  throw new Error(`"pageResponsiveness" must be one of "disabled", "low", "medium", "high", or a number, but got ${JSON.stringify(pageResponsiveness)}`);
+};
+var createPageResponsivenessController = ({
+  intervalInMilliseconds,
+  now,
+  wait
+}) => {
+  let lastYieldAt = now();
+  return {
+    waitIfNeeded: async () => {
+      if (intervalInMilliseconds === null) {
+        return;
+      }
+      if (now() - lastYieldAt < intervalInMilliseconds) {
+        return;
+      }
+      await wait();
+      lastYieldAt = now();
+    }
+  };
+};
+
 // src/render-operations-queue.ts
 var onlyOneRenderAtATimeQueue = {
   ref: Promise.resolve()
@@ -2045,6 +2092,38 @@ var filterRequiresPrecompositing = (filter) => {
   }
   return null;
 };
+var isReplacedElement = (element) => {
+  return element instanceof HTMLImageElement || element instanceof HTMLVideoElement || element instanceof HTMLCanvasElement || element instanceof HTMLIFrameElement || element instanceof HTMLInputElement || element instanceof HTMLTextAreaElement || element instanceof HTMLSelectElement || element instanceof HTMLObjectElement || element instanceof HTMLEmbedElement;
+};
+var canApplyCssTransforms = ({
+  element,
+  computedStyle
+}) => {
+  if (element instanceof SVGElement) {
+    return true;
+  }
+  if (computedStyle.display !== "inline") {
+    return true;
+  }
+  return isReplacedElement(element);
+};
+var makeTransformResetter = (element) => {
+  const { transform, scale, rotate } = element.style;
+  return (hasApplicableTransformCssValue) => {
+    if (hasApplicableTransformCssValue) {
+      element.style.transform = "none";
+      element.style.scale = "none";
+      element.style.rotate = "none";
+    }
+    return () => {
+      if (hasApplicableTransformCssValue) {
+        element.style.transform = transform;
+        element.style.scale = scale;
+        element.style.rotate = rotate;
+      }
+    };
+  };
+};
 var getInternalTransformOrigin = (transform) => {
   const centerX = transform.boundingClientRect.width / 2;
   const centerY = transform.boundingClientRect.height / 2;
@@ -2099,21 +2178,21 @@ var calculateTransforms = ({
         }
       });
     }
-    if (hasAnyTransformCssValue(computedStyle) || parent === element) {
-      const toParse = hasTransformCssValue(computedStyle) ? computedStyle.transform : undefined;
+    const hasApplicableTransformCssValue = canApplyCssTransforms({ computedStyle, element: parent }) && hasAnyTransformCssValue(computedStyle);
+    if (hasApplicableTransformCssValue || parent === element) {
+      const toParse = hasApplicableTransformCssValue && hasTransformCssValue(computedStyle) ? computedStyle.transform : undefined;
       const matrix = new DOMMatrix(toParse);
-      const { transform, scale, rotate } = parent.style;
+      const resetTransforms = makeTransformResetter(parent);
+      const { scale, rotate } = parent.style;
       const additionalMatrices = [];
-      if (rotate !== "" && rotate !== "none") {
+      if (hasApplicableTransformCssValue && rotate !== "" && rotate !== "none") {
         additionalMatrices.push(new DOMMatrix(`rotate(${rotate})`));
       }
-      if (scale !== "" && scale !== "none") {
+      if (hasApplicableTransformCssValue && scale !== "" && scale !== "none") {
         additionalMatrices.push(new DOMMatrix(`scale(${scale})`));
       }
       additionalMatrices.push(matrix);
-      parent.style.transform = "none";
-      parent.style.scale = "none";
-      parent.style.rotate = "none";
+      const cleanup = resetTransforms(hasApplicableTransformCssValue);
       transforms.push({
         element: parent,
         transformOrigin: computedStyle.transformOrigin,
@@ -2122,9 +2201,7 @@ var calculateTransforms = ({
       });
       const parentRef = parent;
       toReset.push(() => {
-        parentRef.style.transform = transform;
-        parentRef.style.scale = scale;
-        parentRef.style.rotate = rotate;
+        cleanup();
         parentRef.style.transition = originalTransition;
       });
     } else {
@@ -2727,7 +2804,8 @@ var drawBackground = async ({
         logLevel,
         internalState,
         scale,
-        onlyBackgroundClipText: true
+        onlyBackgroundClipText: true,
+        waitForPageResponsiveness: null
       });
       onlyBackgroundClipText.setTransform(new DOMMatrix().scale(scale, scale));
       element.style.backgroundClip = originalBackgroundClip;
@@ -3921,7 +3999,8 @@ var processNode = async ({
   parentRect,
   internalState,
   rootElement,
-  scale
+  scale,
+  waitForPageResponsiveness
 }) => {
   let __stack = [];
   try {
@@ -3985,8 +4064,12 @@ var processNode = async ({
         logLevel,
         internalState,
         scale,
-        onlyBackgroundClipText: false
+        onlyBackgroundClipText: false,
+        waitForPageResponsiveness
       });
+      if (waitForPageResponsiveness !== null) {
+        await waitForPageResponsiveness();
+      }
       let drawable = tempContext.canvas;
       const rectAfterTransforms = roundToExpandRect(scaleRect({
         scale,
@@ -4003,6 +4086,9 @@ var processNode = async ({
           tempContext,
           scale
         });
+        if (waitForPageResponsiveness !== null) {
+          await waitForPageResponsiveness();
+        }
       }
       if (precompositing.needs3DTransformViaWebGL) {
         const t = handle3dTransform({
@@ -4016,6 +4102,9 @@ var processNode = async ({
         if (t) {
           drawable = t;
         }
+        if (waitForPageResponsiveness !== null) {
+          await waitForPageResponsiveness();
+        }
       }
       const previousTransform = context.getTransform();
       context.setTransform(new DOMMatrix);
@@ -4032,6 +4121,9 @@ var processNode = async ({
         drawPrecomposedCanvas();
       }
       context.setTransform(previousTransform);
+      if (waitForPageResponsiveness !== null) {
+        await waitForPageResponsiveness();
+      }
       Internals6.Log.trace({
         logLevel,
         tag: "@remotion/web-renderer"
@@ -4459,7 +4551,8 @@ var handleTextNode = async ({
   internalState,
   rootElement,
   onlyBackgroundClipText,
-  scale
+  scale,
+  waitForPageResponsiveness
 }) => {
   const span = document.createElement("span");
   const parent = node.parentNode;
@@ -4476,7 +4569,8 @@ var handleTextNode = async ({
     parentRect,
     internalState,
     rootElement,
-    scale
+    scale,
+    waitForPageResponsiveness
   });
   parent.insertBefore(node, span);
   parent.removeChild(span);
@@ -4492,7 +4586,8 @@ var walkOverNode = ({
   internalState,
   rootElement,
   onlyBackgroundClipText,
-  scale
+  scale,
+  waitForPageResponsiveness
 }) => {
   if (node instanceof HTMLElement || node instanceof SVGElement) {
     return processNode({
@@ -4503,7 +4598,8 @@ var walkOverNode = ({
       parentRect,
       internalState,
       rootElement,
-      scale
+      scale,
+      waitForPageResponsiveness
     });
   }
   if (node instanceof Text) {
@@ -4515,7 +4611,8 @@ var walkOverNode = ({
       internalState,
       rootElement,
       onlyBackgroundClipText,
-      scale
+      scale,
+      waitForPageResponsiveness
     });
   }
   throw new Error("Unknown node type");
@@ -4542,7 +4639,8 @@ var compose = async ({
   parentRect,
   internalState,
   onlyBackgroundClipText,
-  scale
+  scale,
+  waitForPageResponsiveness
 }) => {
   let __stack = [];
   try {
@@ -4565,7 +4663,8 @@ var compose = async ({
         internalState,
         rootElement: element,
         onlyBackgroundClipText,
-        scale
+        scale,
+        waitForPageResponsiveness
       });
       if (val.type === "skip-children") {
         if (!skipToNextNonDescendant(treeWalker)) {
@@ -4579,6 +4678,9 @@ var compose = async ({
           break;
         }
       }
+      if (waitForPageResponsiveness !== null) {
+        await waitForPageResponsiveness();
+      }
     }
   } catch (_catch) {
     var _err = _catch, _hasErr = 1;
@@ -4596,7 +4698,8 @@ var createLayer = async ({
   onlyBackgroundClipText,
   cutout,
   htmlInCanvasContext,
-  onHtmlInCanvasLayerOutcome
+  onHtmlInCanvasLayerOutcome,
+  waitForPageResponsiveness
 }) => {
   const scaledWidth = Math.ceil(cutout.width * scale);
   const scaledHeight = Math.ceil(cutout.height * scale);
@@ -4632,7 +4735,8 @@ var createLayer = async ({
     parentRect: cutout,
     internalState,
     onlyBackgroundClipText,
-    scale
+    scale,
+    waitForPageResponsiveness
   });
   return context;
 };
@@ -4860,6 +4964,7 @@ var internalRenderMediaOnWeb = async ({
   transparent,
   onArtifact,
   onFrame,
+  pageResponsiveness,
   outputTarget: userDesiredOutputTarget,
   licenseKey,
   muted,
@@ -4871,6 +4976,7 @@ var internalRenderMediaOnWeb = async ({
   let __stack2 = [];
   try {
     validateScale(scale);
+    const pageResponsivenessIntervalInMilliseconds = resolvePageResponsivenessInterval(pageResponsiveness);
     let htmlInCanvasLayerOutcomeReported = false;
     const onHtmlInCanvasLayerOutcome = (outcome) => {
       if (htmlInCanvasLayerOutcomeReported) {
@@ -4982,6 +5088,19 @@ var internalRenderMediaOnWeb = async ({
       });
     }
     const internalState = __using(__stack2, makeInternalState(), 0);
+    const pageResponsivenessController = createPageResponsivenessController({
+      intervalInMilliseconds: pageResponsivenessIntervalInMilliseconds,
+      now: () => performance.now(),
+      wait: () => new Promise((resolve) => {
+        setTimeout(resolve, 0);
+      })
+    });
+    const waitForPageResponsiveness = async () => {
+      await pageResponsivenessController.waitIfNeeded();
+      if (signal?.aborted) {
+        throw new Error("renderMediaOnWeb() was cancelled");
+      }
+    };
     const keepalive = __using(__stack2, createBackgroundKeepalive({
       fps: resolved.fps,
       logLevel
@@ -5095,13 +5214,15 @@ var internalRenderMediaOnWeb = async ({
               onlyBackgroundClipText: false,
               cutout: new DOMRect(0, 0, resolved.width, resolved.height),
               htmlInCanvasContext,
-              onHtmlInCanvasLayerOutcome: htmlInCanvasContext ? onHtmlInCanvasLayerOutcome : undefined
+              onHtmlInCanvasLayerOutcome: htmlInCanvasContext ? onHtmlInCanvasLayerOutcome : undefined,
+              waitForPageResponsiveness
             });
             internalState.addCreateFrameTime(performance.now() - createFrameStart);
             layerCanvas = layer.canvas;
             if (signal?.aborted) {
               throw new Error("renderMediaOnWeb() was cancelled");
             }
+            await waitForPageResponsiveness();
             const videoFrame = new VideoFrame(layer.canvas, {
               timestamp
             });
@@ -5118,6 +5239,7 @@ var internalRenderMediaOnWeb = async ({
                 expectedHeight: Math.round(resolved.height * scale),
                 expectedTimestamp: timestamp
               });
+              await waitForPageResponsiveness();
             }
           }
           const now = Date.now();
@@ -5143,11 +5265,10 @@ var internalRenderMediaOnWeb = async ({
               onArtifact
             });
           }
-          if (signal?.aborted) {
-            throw new Error("renderMediaOnWeb() was cancelled");
-          }
+          await waitForPageResponsiveness();
           const audio = muted ? null : onlyInlineAudio({ assets, fps: resolved.fps, timestamp, sampleRate });
           internalState.addAudioMixingTime(performance.now() - audioCombineStart);
+          await waitForPageResponsiveness();
           const addSampleStart = performance.now();
           const encodingPromises = [];
           if (frameToEncode && videoSampleSource) {
@@ -5166,8 +5287,10 @@ var internalRenderMediaOnWeb = async ({
           if (signal?.aborted) {
             throw new Error("renderMediaOnWeb() was cancelled");
           }
+          await waitForPageResponsiveness();
         }
         onProgress?.(getProgressPayload());
+        await waitForPageResponsiveness();
         videoSampleSource?.videoSampleSource.close();
         audioSampleSource?.audioSampleSource.close();
         await outputWithCleanup.output.finalize();
@@ -5255,6 +5378,7 @@ var renderMediaOnWeb = (options) => {
     transparent: options.transparent ?? false,
     onArtifact: options.onArtifact ?? null,
     onFrame: options.onFrame ?? null,
+    pageResponsiveness: options.pageResponsiveness ?? "medium",
     outputTarget: options.outputTarget ?? null,
     licenseKey: options.licenseKey ?? null,
     muted: options.muted ?? false,
@@ -5420,7 +5544,8 @@ async function internalRenderStillOnWeb({
         onlyBackgroundClipText: false,
         cutout: new DOMRect(0, 0, resolved.width, resolved.height),
         htmlInCanvasContext,
-        onHtmlInCanvasLayerOutcome: htmlInCanvasContext ? onHtmlInCanvasLayerOutcome : undefined
+        onHtmlInCanvasLayerOutcome: htmlInCanvasContext ? onHtmlInCanvasLayerOutcome : undefined,
+        waitForPageResponsiveness: null
       });
       const { canvas } = capturedFrame;
       const assets = collectAssets.current.collectAssets();

package/dist/index.d.ts

@@ -7,6 +7,7 @@ export { getEncodableAudioCodecs, getEncodableVideoCodecs, type GetEncodableAudi
 export { getDefaultAudioCodecForContainer, getDefaultContainerForCodec, getDefaultVideoCodecForContainer, getSupportedAudioCodecsForContainer, getSupportedVideoCodecsForContainer, isAudioOnlyContainer, } from './mediabunny-mappings';
 export type { WebRendererAudioCodec, WebRendererContainer, WebRendererQuality, WebRendererVideoCodec, } from './mediabunny-mappings';
 export type { WebRendererOutputTarget } from './output-target';
+export type { WebRendererPageResponsiveness } from './page-responsiveness';
 export { renderMediaOnWeb } from './render-media-on-web';
 export type { RenderMediaOnWebOptions, RenderMediaOnWebProgress, RenderMediaOnWebProgressCallback, RenderMediaOnWebResult, WebRendererHardwareAcceleration, } from './render-media-on-web';
 export { renderStillOnWeb } from './render-still-on-web';

package/dist/page-responsiveness.d.ts

@@ -0,0 +1,9 @@
+export type WebRendererPageResponsiveness = 'disabled' | 'low' | 'medium' | 'high' | number;
+export declare const resolvePageResponsivenessInterval: (pageResponsiveness: unknown) => number | null;
+export declare const createPageResponsivenessController: ({ intervalInMilliseconds, now, wait, }: {
+    intervalInMilliseconds: number | null;
+    now: () => number;
+    wait: () => Promise<void>;
+}) => {
+    waitIfNeeded: () => Promise<void>;
+};

package/dist/render-media-on-web.d.ts

@@ -7,6 +7,7 @@ import type { InternalState } from './internal-state';
 import type { WebRendererAudioCodec, WebRendererContainer, WebRendererQuality } from './mediabunny-mappings';
 import { type WebRendererVideoCodec } from './mediabunny-mappings';
 import type { WebRendererOutputTarget } from './output-target';
+import { type WebRendererPageResponsiveness } from './page-responsiveness';
 import type { CompositionCalculateMetadataOrExplicit } from './props-if-has-props';
 import { type OnFrameCallback } from './validate-video-frame';
 export type InputPropsIfHasProps<Schema extends $ZodObject, Props> = $ZodObject extends Schema ? {} extends Props ? {
@@ -60,6 +61,7 @@ type OptionalRenderMediaOnWebOptions<Schema extends $ZodObject> = {
     transparent: boolean;
     onArtifact: WebRendererOnArtifact | null;
     onFrame: OnFrameCallback | null;
+    pageResponsiveness: WebRendererPageResponsiveness;
     outputTarget: WebRendererOutputTarget | null;
     licenseKey: string | null;
     isProduction: boolean;

package/dist/take-screenshot.d.ts

@@ -6,7 +6,7 @@ export type HtmlInCanvasLayerOutcome = {
     reason: string;
     shouldWarn: boolean;
 };
-export declare const createLayer: ({ element, scale, logLevel, internalState, onlyBackgroundClipText, cutout, htmlInCanvasContext, onHtmlInCanvasLayerOutcome, }: {
+export declare const createLayer: ({ element, scale, logLevel, internalState, onlyBackgroundClipText, cutout, htmlInCanvasContext, onHtmlInCanvasLayerOutcome, waitForPageResponsiveness, }: {
     element: HTMLElement | SVGElement;
     scale: number;
     logLevel: "error" | "info" | "trace" | "verbose" | "warn";
@@ -32,4 +32,5 @@ export declare const createLayer: ({ element, scale, logLevel, internalState, on
     cutout: DOMRect;
     htmlInCanvasContext?: HtmlInCanvasContext | null | undefined;
     onHtmlInCanvasLayerOutcome?: ((outcome: HtmlInCanvasLayerOutcome) => void) | undefined;
+    waitForPageResponsiveness: (() => Promise<void>) | null;
 }) => Promise<OffscreenCanvasRenderingContext2D>;

package/dist/walk-over-node.d.ts

@@ -1,5 +1,5 @@
 import type { ProcessNodeReturnValue } from './drawing/process-node';
-export declare const walkOverNode: ({ node, context, logLevel, parentRect, internalState, rootElement, onlyBackgroundClipText, scale, }: {
+export declare const walkOverNode: ({ node, context, logLevel, parentRect, internalState, rootElement, onlyBackgroundClipText, scale, waitForPageResponsiveness, }: {
     node: Node;
     context: OffscreenCanvasRenderingContext2D;
     logLevel: "error" | "info" | "trace" | "verbose" | "warn";
@@ -25,4 +25,5 @@ export declare const walkOverNode: ({ node, context, logLevel, parentRect, inter
     rootElement: HTMLElement | SVGElement;
     onlyBackgroundClipText: boolean;
     scale: number;
+    waitForPageResponsiveness: (() => Promise<void>) | null;
 }) => Promise<ProcessNodeReturnValue>;

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/web-renderer"
 	},
 	"name": "@remotion/web-renderer",
-	"version": "4.0.486",
+	"version": "4.0.488",
 	"main": "dist/index.js",
 	"type": "module",
 	"scripts": {
@@ -19,22 +19,22 @@
 	"author": "Remotion <jonny@remotion.dev>",
 	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"@mediabunny/mp3-encoder": "1.50.3",
-		"@mediabunny/aac-encoder": "1.50.3",
-		"@mediabunny/flac-encoder": "1.50.3",
-		"@remotion/licensing": "4.0.486",
-		"remotion": "4.0.486",
-		"mediabunny": "1.50.3"
+		"@mediabunny/mp3-encoder": "1.50.8",
+		"@mediabunny/aac-encoder": "1.50.8",
+		"@mediabunny/flac-encoder": "1.50.8",
+		"@remotion/licensing": "4.0.488",
+		"remotion": "4.0.488",
+		"mediabunny": "1.50.8"
 	},
 	"devDependencies": {
 		"@react-three/fiber": "9.2.0",
-		"@remotion/eslint-config-internal": "4.0.486",
-		"@remotion/paths": "4.0.486",
-		"@remotion/player": "4.0.486",
-		"@remotion/media": "4.0.486",
-		"@remotion/shapes": "4.0.486",
-		"@remotion/three": "4.0.486",
-		"@remotion/transitions": "4.0.486",
+		"@remotion/eslint-config-internal": "4.0.488",
+		"@remotion/paths": "4.0.488",
+		"@remotion/player": "4.0.488",
+		"@remotion/media": "4.0.488",
+		"@remotion/shapes": "4.0.488",
+		"@remotion/three": "4.0.488",
+		"@remotion/transitions": "4.0.488",
 		"@types/three": "0.170.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1",
 		"@vitejs/plugin-react": "4.3.4",