@remotion/web-renderer 4.0.447 → 4.0.448

package/dist/audio.d.ts

@@ -1,6 +1,7 @@
 import type { TRenderAsset } from 'remotion';
-export declare const onlyInlineAudio: ({ assets, fps, timestamp, }: {
+export declare const onlyInlineAudio: ({ assets, fps, timestamp, sampleRate, }: {
     assets: TRenderAsset[];
     fps: number;
     timestamp: number;
+    sampleRate: number;
 }) => AudioData | null;

package/dist/drawing/calculate-transforms.d.ts

@@ -16,6 +16,7 @@ export declare const calculateTransforms: ({ element, rootElement, }: {
     precompositing: {
         needs3DTransformViaWebGL: boolean;
         needsMaskImage: LinearGradientInfo | null;
+        needsFilter: string | null;
         needsPrecompositing: boolean;
     };
 };

package/dist/drawing/handle-filter.d.ts

@@ -0,0 +1 @@
+export declare const getPrecomposeRectForFilter: (element: HTMLElement | SVGElement) => DOMRect;

package/dist/esm/index.mjs

@@ -670,7 +670,6 @@ var handleArtifacts = () => {
 
 // src/audio.ts
 var TARGET_NUMBER_OF_CHANNELS = 2;
-var TARGET_SAMPLE_RATE = 48000;
 function mixAudio(waves, length) {
   if (waves.length === 1 && waves[0].length === length) {
     return waves[0];
@@ -691,13 +690,14 @@ function mixAudio(waves, length) {
 var onlyInlineAudio = ({
   assets,
   fps,
-  timestamp
+  timestamp,
+  sampleRate
 }) => {
   const inlineAudio = assets.filter((asset) => asset.type === "inline-audio");
   if (inlineAudio.length === 0) {
     return null;
   }
-  const expectedLength = Math.round(TARGET_NUMBER_OF_CHANNELS * TARGET_SAMPLE_RATE / fps);
+  const expectedLength = Math.round(TARGET_NUMBER_OF_CHANNELS * sampleRate / fps);
   for (const asset of inlineAudio) {
     if (asset.toneFrequency !== 1) {
       throw new Error("Setting the toneFrequency is not supported yet in web rendering.");
@@ -709,7 +709,7 @@ var onlyInlineAudio = ({
     format: "s16",
     numberOfChannels: TARGET_NUMBER_OF_CHANNELS,
     numberOfFrames: expectedLength / TARGET_NUMBER_OF_CHANNELS,
-    sampleRate: TARGET_SAMPLE_RATE,
+    sampleRate,
     timestamp
   });
 };
@@ -1107,7 +1107,8 @@ function createScaffold({
                 defaultOutName: defaultOutName ?? null,
                 defaultVideoImageFormat: null,
                 defaultPixelFormat: null,
-                defaultProResProfile: null
+                defaultProResProfile: null,
+                defaultSampleRate: null
               },
               folders: []
             },
@@ -2057,6 +2058,7 @@ var calculateTransforms = ({
   let opacity = 1;
   let elementComputedStyle = null;
   let maskImageInfo = null;
+  let filterValue = null;
   while (parent) {
     const computedStyle = getComputedStyle(parent);
     if (parent === element) {
@@ -2064,6 +2066,16 @@ var calculateTransforms = ({
       opacity = parseFloat(computedStyle.opacity);
       const maskImageValue = getMaskImageValue(computedStyle);
       maskImageInfo = maskImageValue ? parseMaskImage(maskImageValue) : null;
+      const computedFilter = computedStyle.filter;
+      if (computedFilter && computedFilter !== "none") {
+        filterValue = computedFilter;
+        const originalFilter = parent.style.filter;
+        parent.style.filter = "none";
+        const parentRefFilter = parent;
+        toReset.push(() => {
+          parentRefFilter.style.filter = originalFilter;
+        });
+      }
       const originalMaskImage = parent.style.maskImage;
       const originalWebkitMaskImage = parent.style.webkitMaskImage;
       parent.style.maskImage = "none";
@@ -2127,6 +2139,7 @@ var calculateTransforms = ({
   }
   const needs3DTransformViaWebGL = !totalMatrix.is2D;
   const needsMaskImage = maskImageInfo !== null;
+  const needsFilter = filterValue !== null;
   return {
     dimensions,
     totalMatrix,
@@ -2142,7 +2155,8 @@ var calculateTransforms = ({
     precompositing: {
       needs3DTransformViaWebGL,
       needsMaskImage: maskImageInfo,
-      needsPrecompositing: Boolean(needs3DTransformViaWebGL || needsMaskImage)
+      needsFilter: filterValue,
+      needsPrecompositing: Boolean(needs3DTransformViaWebGL || needsMaskImage || needsFilter)
     }
   };
 };
@@ -3509,6 +3523,11 @@ var handle3dTransform = ({
   return transformed;
 };
 
+// src/drawing/handle-filter.ts
+var getPrecomposeRectForFilter = (element) => {
+  return getBiggestBoundingClientRect(element);
+};
+
 // src/drawing/handle-mask.ts
 var getPrecomposeRectForMask = (element) => {
   const boundingRect = getBiggestBoundingClientRect(element);
@@ -3596,6 +3615,12 @@ var processNode = async ({
       if (precompositing.needsMaskImage) {
         precomposeRect = roundToExpandRect(getPrecomposeRectForMask(element));
       }
+      if (precompositing.needsFilter) {
+        precomposeRect = roundToExpandRect(getWiderRectAndExpand({
+          firstRect: precomposeRect,
+          secondRect: getPrecomposeRectForFilter(element)
+        }));
+      }
       if (precompositing.needs3DTransformViaWebGL) {
         const tentativePrecomposeRect = getPrecomposeRectFor3DTransform({
           element,
@@ -3658,8 +3683,13 @@ var processNode = async ({
         }
       }
       const previousTransform = context.getTransform();
+      const previousFilter = context.filter;
       context.setTransform(new DOMMatrix);
+      if (precompositing.needsFilter) {
+        context.filter = precompositing.needsFilter;
+      }
       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.filter = previousFilter;
       context.setTransform(previousTransform);
       Internals6.Log.trace({
         logLevel,
@@ -4274,7 +4304,8 @@ var internalRenderMediaOnWeb = async ({
   muted,
   scale,
   isProduction,
-  allowHtmlInCanvas
+  allowHtmlInCanvas,
+  sampleRate
 }) => {
   let __stack2 = [];
   try {
@@ -4553,7 +4584,7 @@ var internalRenderMediaOnWeb = async ({
           if (signal?.aborted) {
             throw new Error("renderMediaOnWeb() was cancelled");
           }
-          const audio = muted ? null : onlyInlineAudio({ assets, fps: resolved.fps, timestamp });
+          const audio = muted ? null : onlyInlineAudio({ assets, fps: resolved.fps, timestamp, sampleRate });
           internalState.addAudioMixingTime(performance.now() - audioCombineStart);
           const addSampleStart = performance.now();
           const encodingPromises = [];
@@ -4667,7 +4698,8 @@ var renderMediaOnWeb = (options) => {
     muted: options.muted ?? false,
     scale: options.scale ?? 1,
     isProduction: options.isProduction ?? true,
-    allowHtmlInCanvas: options.allowHtmlInCanvas ?? false
+    allowHtmlInCanvas: options.allowHtmlInCanvas ?? false,
+    sampleRate: options.sampleRate ?? 48000
   }));
   return onlyOneRenderAtATimeQueue.ref;
 };

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

@@ -66,6 +66,7 @@ type OptionalRenderMediaOnWebOptions<Schema extends $ZodObject> = {
     muted: boolean;
     scale: number;
     allowHtmlInCanvas: boolean;
+    sampleRate: number;
 };
 export type RenderMediaOnWebOptions<Schema extends $ZodObject, Props extends Record<string, unknown>> = MandatoryRenderMediaOnWebOptions<Schema, Props> & Partial<OptionalRenderMediaOnWebOptions<Schema>> & InputPropsIfHasProps<Schema, Props>;
 export declare const renderMediaOnWeb: <Schema extends $ZodObject<Readonly<Readonly<{

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.447",
+	"version": "4.0.448",
 	"main": "dist/index.js",
 	"type": "module",
 	"scripts": {
@@ -22,16 +22,16 @@
 		"@mediabunny/mp3-encoder": "1.39.2",
 		"@mediabunny/aac-encoder": "1.39.2",
 		"@mediabunny/flac-encoder": "1.39.2",
-		"@remotion/licensing": "4.0.447",
-		"remotion": "4.0.447",
+		"@remotion/licensing": "4.0.448",
+		"remotion": "4.0.448",
 		"mediabunny": "1.39.2"
 	},
 	"devDependencies": {
 		"@react-three/fiber": "9.2.0",
-		"@remotion/eslint-config-internal": "4.0.447",
-		"@remotion/player": "4.0.447",
-		"@remotion/media": "4.0.447",
-		"@remotion/three": "4.0.447",
+		"@remotion/eslint-config-internal": "4.0.448",
+		"@remotion/player": "4.0.448",
+		"@remotion/media": "4.0.448",
+		"@remotion/three": "4.0.448",
 		"@types/three": "0.170.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1",
 		"@vitejs/plugin-react": "4.3.4",