@remotion/web-renderer 4.0.484 → 4.0.485

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

@@ -1,8 +1,8 @@
 import type { LinearGradientInfo } from './parse-linear-gradient';
 export declare const getPrecomposeRectForMask: (element: HTMLElement | SVGElement) => DOMRect;
-export declare const handleMask: ({ gradientInfo, rect, precomposeRect, tempContext, scale, }: {
+export declare const handleMask: ({ gradientInfo, maskRect, precomposeRect, tempContext, scale, }: {
     gradientInfo: LinearGradientInfo;
-    rect: DOMRect;
+    maskRect: DOMRect;
     precomposeRect: DOMRect;
     tempContext: OffscreenCanvasRenderingContext2D;
     scale: number;

package/dist/drawing/text/text-decoration.d.ts

@@ -1,8 +1,10 @@
 type TextDecorationLine = 'underline' | 'overline' | 'line-through';
+export type TextDecorationStyle = 'solid' | 'double' | 'dotted' | 'dashed';
 export type TextDecoration = {
     lines: TextDecorationLine[];
     color: string;
     thickness: number;
+    style: TextDecorationStyle;
 };
 export declare const parseTextDecoration: ({ onlyBackgroundClipText, style, }: {
     onlyBackgroundClipText: boolean;

package/dist/esm/index.mjs

@@ -3866,12 +3866,12 @@ var getPrecomposeRectForMask = (element) => {
 };
 var handleMask = ({
   gradientInfo,
-  rect,
+  maskRect,
   precomposeRect,
   tempContext,
   scale
 }) => {
-  const rectToFill = new DOMRect((rect.left - precomposeRect.left) * scale, (rect.top - precomposeRect.top) * scale, rect.width * scale, rect.height * scale);
+  const rectToFill = new DOMRect((maskRect.left - precomposeRect.left) * scale, (maskRect.top - precomposeRect.top) * scale, maskRect.width * scale, maskRect.height * scale);
   const gradient = createCanvasGradient({
     ctx: tempContext,
     rect: rectToFill,
@@ -3998,7 +3998,7 @@ var processNode = async ({
       if (precompositing.needsMaskImage) {
         handleMask({
           gradientInfo: precompositing.needsMaskImage,
-          rect,
+          maskRect: dimensions,
           precomposeRect,
           tempContext,
           scale
@@ -4133,12 +4133,21 @@ var currentColorValues = new Set(["currentcolor", "currentColor"]);
 var getDefaultTextDecorationThickness = (fontSizePx) => {
   return Math.max(1, Number.isFinite(fontSizePx) ? fontSizePx / 16 : 1);
 };
+var getTextDecorationStyle = (style) => {
+  if (style === "wavy") {
+    return null;
+  }
+  if (style === "double" || style === "dotted" || style === "dashed") {
+    return style;
+  }
+  return "solid";
+};
 var parseTextDecoration = ({
   onlyBackgroundClipText,
   style
 }) => {
-  const textDecorationStyle = style.getPropertyValue("text-decoration-style");
-  if (textDecorationStyle && textDecorationStyle !== "solid") {
+  const textDecorationStyle = getTextDecorationStyle(style.getPropertyValue("text-decoration-style").trim());
+  if (textDecorationStyle === null) {
     return null;
   }
   const textDecorationLine = style.getPropertyValue("text-decoration-line");
@@ -4157,7 +4166,8 @@ var parseTextDecoration = ({
   return {
     lines,
     color: onlyBackgroundClipText || !textDecorationColor || currentColorValues.has(textDecorationColor) ? onlyBackgroundClipText ? "black" : style.color : textDecorationColor,
-    thickness
+    thickness,
+    style: textDecorationStyle
   };
 };
 var getTextDecorations = ({
@@ -4204,6 +4214,26 @@ var getTextDecorationY = ({
   }
   return y - actualAscent * 0.35;
 };
+var getTextDecorationLineDashPattern = (style, thickness) => {
+  if (style === "dashed") {
+    return [thickness * 2, thickness];
+  }
+  if (style === "dotted") {
+    return [thickness, thickness];
+  }
+  return [];
+};
+var strokeTextDecorationLine = ({
+  contextToDraw,
+  endX,
+  lineY,
+  startX
+}) => {
+  contextToDraw.beginPath();
+  contextToDraw.moveTo(startX, lineY);
+  contextToDraw.lineTo(endX, lineY);
+  contextToDraw.stroke();
+};
 var drawTextDecoration = ({
   contextToDraw,
   fontSizePx,
@@ -4234,10 +4264,31 @@ var drawTextDecoration = ({
         thickness: textDecoration.thickness,
         fontSizePx
       });
-      contextToDraw.beginPath();
-      contextToDraw.moveTo(startX, lineY);
-      contextToDraw.lineTo(endX, lineY);
-      contextToDraw.stroke();
+      if (textDecoration.style === "double") {
+        contextToDraw.setLineDash([]);
+        strokeTextDecorationLine({
+          contextToDraw,
+          endX,
+          lineY: lineY - textDecoration.thickness,
+          startX
+        });
+        strokeTextDecorationLine({
+          contextToDraw,
+          endX,
+          lineY: lineY + textDecoration.thickness,
+          startX
+        });
+        contextToDraw.setLineDash([]);
+        continue;
+      }
+      contextToDraw.setLineDash(getTextDecorationLineDashPattern(textDecoration.style, textDecoration.thickness));
+      strokeTextDecorationLine({
+        contextToDraw,
+        endX,
+        lineY,
+        startX
+      });
+      contextToDraw.setLineDash([]);
     }
   }
   contextToDraw.restore();

package/dist/mediabunny-mappings.d.ts

@@ -5,7 +5,7 @@ export type WebRendererContainer = 'mp4' | 'webm' | 'mkv' | 'mov' | 'wav' | 'mp3
 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";
+export declare const codecToMediabunnyCodec: (codec: WebRendererVideoCodec) => "av1" | "avc" | "hevc" | "prores" | "vp8" | "vp9";
 export declare const containerToMediabunnyContainer: (container: WebRendererContainer) => OutputFormat;
 export declare const getDefaultVideoCodecForContainer: (container: WebRendererContainer) => WebRendererVideoCodec | null;
 export declare const getDefaultContainerForCodec: (codec: WebRendererVideoCodec) => WebRendererContainer;

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.484",
+	"version": "4.0.485",
 	"main": "dist/index.js",
 	"type": "module",
 	"scripts": {
@@ -17,24 +17,24 @@
 		"remotion": "cd ../example && bunx remotion studio ../web-renderer/src/test/studio.ts --public-dir=../example-videos/videos"
 	},
 	"author": "Remotion <jonny@remotion.dev>",
-	"license": "UNLICENSED",
+	"license": "SEE LICENSE IN LICENSE.md",
 	"dependencies": {
-		"@mediabunny/mp3-encoder": "1.47.0",
-		"@mediabunny/aac-encoder": "1.47.0",
-		"@mediabunny/flac-encoder": "1.47.0",
-		"@remotion/licensing": "4.0.484",
-		"remotion": "4.0.484",
-		"mediabunny": "1.47.0"
+		"@mediabunny/mp3-encoder": "1.50.3",
+		"@mediabunny/aac-encoder": "1.50.3",
+		"@mediabunny/flac-encoder": "1.50.3",
+		"@remotion/licensing": "4.0.485",
+		"remotion": "4.0.485",
+		"mediabunny": "1.50.3"
 	},
 	"devDependencies": {
 		"@react-three/fiber": "9.2.0",
-		"@remotion/eslint-config-internal": "4.0.484",
-		"@remotion/paths": "4.0.484",
-		"@remotion/player": "4.0.484",
-		"@remotion/media": "4.0.484",
-		"@remotion/shapes": "4.0.484",
-		"@remotion/three": "4.0.484",
-		"@remotion/transitions": "4.0.484",
+		"@remotion/eslint-config-internal": "4.0.485",
+		"@remotion/paths": "4.0.485",
+		"@remotion/player": "4.0.485",
+		"@remotion/media": "4.0.485",
+		"@remotion/shapes": "4.0.485",
+		"@remotion/three": "4.0.485",
+		"@remotion/transitions": "4.0.485",
 		"@types/three": "0.170.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1",
 		"@vitejs/plugin-react": "4.3.4",