@remotion/web-renderer 4.0.432 → 4.0.434

package/dist/drawing/filter.d.ts

@@ -0,0 +1,4 @@
+export declare const setFilter: ({ ctx, filter, }: {
+    ctx: OffscreenCanvasRenderingContext2D;
+    filter: string;
+}) => () => void;

package/dist/esm/index.mjs

@@ -115,6 +115,7 @@ var checkWebGLSupport = () => {
 // src/mediabunny-mappings.ts
 import {
   AdtsOutputFormat,
+  FlacOutputFormat,
   MkvOutputFormat,
   MovOutputFormat,
   Mp3OutputFormat,
@@ -129,7 +130,7 @@ import {
   WebMOutputFormat
 } from "mediabunny";
 var isAudioOnlyContainer = (container) => {
-  return container === "wav" || container === "mp3" || container === "aac" || container === "ogg";
+  return container === "wav" || container === "mp3" || container === "aac" || container === "ogg" || container === "flac";
 };
 var codecToMediabunnyCodec = (codec) => {
   switch (codec) {
@@ -163,6 +164,8 @@ var containerToMediabunnyContainer = (container) => {
       return new AdtsOutputFormat;
     case "ogg":
       return new OggOutputFormat;
+    case "flac":
+      return new FlacOutputFormat;
     case "mov":
       return new MovOutputFormat({ fastStart: "reserve" });
     default:
@@ -182,6 +185,7 @@ var getDefaultVideoCodecForContainer = (container) => {
     case "mp3":
     case "aac":
     case "ogg":
+    case "flac":
       return null;
     default:
       throw new Error(`Unsupported container: ${container}`);
@@ -232,6 +236,8 @@ var getMimeType = (container) => {
       return "audio/aac";
     case "ogg":
       return "audio/ogg";
+    case "flac":
+      return "audio/flac";
     case "mov":
       return "video/quicktime";
     default:
@@ -254,6 +260,8 @@ var getDefaultAudioCodecForContainer = (container) => {
       return "aac";
     case "ogg":
       return "opus";
+    case "flac":
+      return "flac";
     case "mov":
       return "aac";
     default:
@@ -280,7 +288,8 @@ var WEB_RENDERER_AUDIO_CODECS = [
   "opus",
   "mp3",
   "vorbis",
-  "pcm-s16"
+  "pcm-s16",
+  "flac"
 ];
 var audioCodecToMediabunnyAudioCodec = (audioCodec) => {
   switch (audioCodec) {
@@ -294,6 +303,8 @@ var audioCodecToMediabunnyAudioCodec = (audioCodec) => {
       return "vorbis";
     case "pcm-s16":
       return "pcm-s16";
+    case "flac":
+      return "flac";
     default:
       throw new Error(`Unsupported audio codec: ${audioCodec}`);
   }
@@ -305,25 +316,59 @@ var getSupportedAudioCodecsForContainer = (container) => {
 };
 
 // src/resolve-audio-codec.ts
-import { canEncodeAudio as canEncodeAudio2 } from "mediabunny";
+import { canEncodeAudio as canEncodeAudio4 } from "mediabunny";
 
-// src/register-mp3-encoder.ts
+// src/register-aac-encoder.ts
 import { canEncodeAudio } from "mediabunny";
 var registrationPromise = null;
 var doRegister = async () => {
-  const nativeSupport = await canEncodeAudio("mp3");
+  const nativeSupport = await canEncodeAudio("aac");
   if (!nativeSupport) {
-    const { registerMp3Encoder } = await import("@mediabunny/mp3-encoder");
-    registerMp3Encoder();
+    const { registerAacEncoder } = await import("@mediabunny/aac-encoder");
+    registerAacEncoder();
   }
 };
-var ensureMp3EncoderRegistered = () => {
+var ensureAacEncoderRegistered = () => {
   if (!registrationPromise) {
     registrationPromise = doRegister();
   }
   return registrationPromise;
 };
 
+// src/register-flac-encoder.ts
+import { canEncodeAudio as canEncodeAudio2 } from "mediabunny";
+var registrationPromise2 = null;
+var doRegister2 = async () => {
+  const nativeSupport = await canEncodeAudio2("flac");
+  if (!nativeSupport) {
+    const { registerFlacEncoder } = await import("@mediabunny/flac-encoder");
+    registerFlacEncoder();
+  }
+};
+var ensureFlacEncoderRegistered = () => {
+  if (!registrationPromise2) {
+    registrationPromise2 = doRegister2();
+  }
+  return registrationPromise2;
+};
+
+// src/register-mp3-encoder.ts
+import { canEncodeAudio as canEncodeAudio3 } from "mediabunny";
+var registrationPromise3 = null;
+var doRegister3 = async () => {
+  const nativeSupport = await canEncodeAudio3("mp3");
+  if (!nativeSupport) {
+    const { registerMp3Encoder } = await import("@mediabunny/mp3-encoder");
+    registerMp3Encoder();
+  }
+};
+var ensureMp3EncoderRegistered = () => {
+  if (!registrationPromise3) {
+    registrationPromise3 = doRegister3();
+  }
+  return registrationPromise3;
+};
+
 // src/resolve-audio-codec.ts
 var resolveAudioCodec = async (options) => {
   const issues = [];
@@ -342,7 +387,13 @@ var resolveAudioCodec = async (options) => {
   if (audioCodec === "mp3") {
     await ensureMp3EncoderRegistered();
   }
-  const canEncode = await canEncodeAudio2(mediabunnyAudioCodec, { bitrate });
+  if (audioCodec === "aac") {
+    await ensureAacEncoderRegistered();
+  }
+  if (audioCodec === "flac") {
+    await ensureFlacEncoderRegistered();
+  }
+  const canEncode = await canEncodeAudio4(mediabunnyAudioCodec, { bitrate });
   if (canEncode) {
     return { codec: audioCodec, issues };
   }
@@ -359,8 +410,14 @@ var resolveAudioCodec = async (options) => {
       if (fallbackCodec === "mp3") {
         await ensureMp3EncoderRegistered();
       }
+      if (fallbackCodec === "aac") {
+        await ensureAacEncoderRegistered();
+      }
+      if (fallbackCodec === "flac") {
+        await ensureFlacEncoderRegistered();
+      }
       const fallbackMediabunnyCodec = audioCodecToMediabunnyAudioCodec(fallbackCodec);
-      const canEncodeFallback = await canEncodeAudio2(fallbackMediabunnyCodec, {
+      const canEncodeFallback = await canEncodeAudio4(fallbackMediabunnyCodec, {
         bitrate
       });
       if (canEncodeFallback) {
@@ -513,6 +570,12 @@ var getEncodableAudioCodecs = async (container, options) => {
   if (supported.includes("mp3")) {
     await ensureMp3EncoderRegistered();
   }
+  if (supported.includes("aac")) {
+    await ensureAacEncoderRegistered();
+  }
+  if (supported.includes("flac")) {
+    await ensureFlacEncoderRegistered();
+  }
   const resolvedBitrate = options?.audioBitrate ? typeof options.audioBitrate === "number" ? options.audioBitrate : getQualityForWebRendererQuality(options.audioBitrate) : undefined;
   const encodable = await mediabunnyGetEncodableAudioCodecs(supported, {
     bitrate: resolvedBitrate
@@ -792,13 +855,73 @@ var UpdateTime = ({
     frameState: {
       [compId]: frame
     },
-    nonceContextSeed: 0,
     children
   });
 };
 
 // src/create-scaffold.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
+var GENERIC_REACT_RENDER_ERROR_MESSAGES = new Set([
+  "Error thrown during rendering"
+]);
+var isMessageLikeObject = (err) => {
+  return typeof err === "object" && err !== null && "message" in err && typeof err.message === "string";
+};
+var unknownErrorToMessage = (err) => {
+  if (typeof err === "string") {
+    return err;
+  }
+  if (isMessageLikeObject(err)) {
+    return err.message;
+  }
+  try {
+    const serialized = JSON.stringify(err);
+    if (serialized) {
+      return serialized;
+    }
+  } catch {}
+  return String(err);
+};
+var setErrorCause = (error, cause) => {
+  try {
+    Object.defineProperty(error, "cause", {
+      value: cause,
+      enumerable: false,
+      configurable: true,
+      writable: true
+    });
+  } catch {}
+};
+var appendComponentStack = (error, componentStack) => {
+  if (!componentStack?.trim()) {
+    return error;
+  }
+  const normalizedComponentStack = componentStack.trim();
+  const stack = error.stack ?? `${error.name}: ${error.message}`;
+  if (stack.includes(normalizedComponentStack)) {
+    return error;
+  }
+  const errorTitle = `${error.name}: ${error.message}`;
+  const stackWithoutTitle = stack.startsWith(errorTitle) ? stack.slice(errorTitle.length).trimStart() : stack;
+  const stackBody = stackWithoutTitle.length > 0 ? `
+${stackWithoutTitle}` : "";
+  error.stack = `${errorTitle}
+For the likely root cause, see "React component stack:" after the JavaScript stack trace below.${stackBody}
+React component stack:
+${normalizedComponentStack}`;
+  return error;
+};
+var normalizeUncaughtReactError = (err, componentStack) => {
+  if (err instanceof Error) {
+    const { cause } = err;
+    const shouldUnwrapCause = cause instanceof Error && GENERIC_REACT_RENDER_ERROR_MESSAGES.has(err.message);
+    const errorToThrow = shouldUnwrapCause ? cause : err;
+    return appendComponentStack(errorToThrow, componentStack);
+  }
+  const normalized = new Error(unknownErrorToMessage(err));
+  setErrorCause(normalized, err);
+  return appendComponentStack(normalized, componentStack);
+};
 function checkForError(errorHolder) {
   if (errorHolder.error) {
     throw errorHolder.error;
@@ -848,8 +971,8 @@ function createScaffold({
   document.body.appendChild(wrapper);
   const errorHolder = { error: null };
   const root = ReactDOM.createRoot(div, {
-    onUncaughtError: (err) => {
-      errorHolder.error = err instanceof Error ? err : new Error(String(err));
+    onUncaughtError: (err, errorInfo) => {
+      errorHolder.error = normalizeUncaughtReactError(err, errorInfo?.componentStack);
     }
   });
   const delayRenderScope = {
@@ -880,7 +1003,7 @@ function createScaffold({
                 {
                   id,
                   component: Component,
-                  nonce: 0,
+                  nonce: [[0, 0]],
                   defaultProps: {},
                   folderName: null,
                   parentFolderName: null,
@@ -2769,6 +2892,20 @@ var drawOutline = ({
   ctx.setLineDash(originalLineDash);
 };
 
+// src/drawing/filter.ts
+var setFilter = ({
+  ctx,
+  filter
+}) => {
+  const previousFilter = ctx.filter;
+  if (filter && filter !== "none") {
+    ctx.filter = filter;
+  }
+  return () => {
+    ctx.filter = previousFilter;
+  };
+};
+
 // src/drawing/opacity.ts
 var setOpacity = ({
   ctx,
@@ -2847,6 +2984,10 @@ var drawElement = async ({
     ctx: context,
     opacity
   });
+  const finishFilter = setFilter({
+    ctx: context,
+    filter: computedStyle.filter
+  });
   drawBorderRadius({
     ctx: context,
     computedStyle,
@@ -2901,6 +3042,7 @@ var drawElement = async ({
   finishTransform();
   return {
     cleanupAfterChildren: () => {
+      finishFilter();
       finishOpacity();
       finishOverflowHidden();
     }
@@ -3503,7 +3645,8 @@ var drawText = ({
       webkitTextStrokeWidth,
       webkitTextStrokeColor,
       textShadow: textShadowValue,
-      paintOrder
+      paintOrder,
+      filter
     } = computedStyle;
     const isVertical = writingMode !== "horizontal-tb";
     if (isVertical) {
@@ -3514,6 +3657,10 @@ var drawText = ({
       return;
     }
     contextToDraw.save();
+    const finishFilter = setFilter({
+      ctx: contextToDraw,
+      filter
+    });
     const fontSizePx = parseFloat(fontSize);
     contextToDraw.font = `${fontStyle} ${fontWeight} ${fontSizePx}px ${fontFamily}`;
     contextToDraw.fillStyle = onlyBackgroundClipText ? "black" : webkitTextFillColor;
@@ -3568,6 +3715,7 @@ var drawText = ({
       }
     }
     span.textContent = originalText;
+    finishFilter();
     contextToDraw.restore();
   };
   return drawFn;

package/dist/mediabunny-mappings.d.ts

@@ -1,8 +1,8 @@
 import type { Quality } from 'mediabunny';
 import { type OutputFormat } from 'mediabunny';
 export type WebRendererVideoCodec = 'h264' | 'h265' | 'vp8' | 'vp9' | 'av1';
-export type WebRendererContainer = 'mp4' | 'webm' | 'mkv' | 'mov' | 'wav' | 'mp3' | 'aac' | 'ogg';
-export type WebRendererAudioCodec = 'aac' | 'opus' | 'mp3' | 'vorbis' | 'pcm-s16';
+export type WebRendererContainer = 'mp4' | 'webm' | 'mkv' | 'mov' | 'wav' | 'mp3' | 'aac' | 'ogg' | 'flac';
+export type WebRendererAudioCodec = 'aac' | 'opus' | 'mp3' | 'vorbis' | 'pcm-s16' | 'flac';
 export type WebRendererQuality = 'very-low' | 'low' | 'medium' | 'high' | 'very-high';
 export declare const isAudioOnlyContainer: (container: WebRendererContainer) => boolean;
 export declare const codecToMediabunnyCodec: (codec: WebRendererVideoCodec) => "av1" | "avc" | "hevc" | "vp8" | "vp9";

package/dist/register-aac-encoder.d.ts

@@ -0,0 +1 @@
+export declare const ensureAacEncoderRegistered: () => Promise<void>;

package/dist/register-flac-encoder.d.ts

@@ -0,0 +1 @@
+export declare const ensureFlacEncoderRegistered: () => Promise<void>;

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.432",
+	"version": "4.0.434",
 	"main": "dist/index.js",
 	"type": "module",
 	"scripts": {
@@ -19,19 +19,21 @@
 	"author": "Remotion <jonny@remotion.dev>",
 	"license": "UNLICENSED",
 	"dependencies": {
-		"@mediabunny/mp3-encoder": "1.35.1",
-		"@remotion/licensing": "4.0.432",
-		"remotion": "4.0.432",
-		"mediabunny": "1.35.1"
+		"@mediabunny/mp3-encoder": "1.37.0",
+		"@mediabunny/aac-encoder": "1.37.0",
+		"@mediabunny/flac-encoder": "1.37.0",
+		"@remotion/licensing": "4.0.434",
+		"remotion": "4.0.434",
+		"mediabunny": "1.37.0"
 	},
 	"devDependencies": {
 		"@react-three/fiber": "9.2.0",
-		"@remotion/eslint-config-internal": "4.0.432",
-		"@remotion/player": "4.0.432",
-		"@remotion/media": "4.0.432",
-		"@remotion/three": "4.0.432",
+		"@remotion/eslint-config-internal": "4.0.434",
+		"@remotion/player": "4.0.434",
+		"@remotion/media": "4.0.434",
+		"@remotion/three": "4.0.434",
 		"@types/three": "0.170.0",
-		"@typescript/native-preview": "7.0.0-dev.20260301.1",
+		"@typescript/native-preview": "7.0.0-dev.20260217.1",
 		"@vitejs/plugin-react": "4.3.4",
 		"@vitest/browser-playwright": "4.0.9",
 		"playwright": "1.55.1",