@remotion/web-renderer 4.0.483 → 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

@@ -0,0 +1,29 @@
+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;
+    style: CSSStyleDeclaration;
+}) => TextDecoration | null;
+export declare const getTextDecorations: ({ computedStyle, onlyBackgroundClipText, span, }: {
+    computedStyle: CSSStyleDeclaration;
+    onlyBackgroundClipText: boolean;
+    span: HTMLSpanElement;
+}) => TextDecoration[];
+export declare const drawTextDecoration: ({ contextToDraw, fontSizePx, measurements, parentRect, textDecorations, token, y, }: {
+    contextToDraw: OffscreenCanvasRenderingContext2D;
+    fontSizePx: number;
+    measurements: TextMetrics;
+    parentRect: DOMRect;
+    textDecorations: TextDecoration[];
+    token: {
+        rect: DOMRect;
+    };
+    y: number;
+}) => void;
+export {};

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
@@ -4123,6 +4123,177 @@ var parseTextShadow = (textShadowValue) => {
   return parseShadowValues(textShadowValue);
 };
 
+// src/drawing/text/text-decoration.ts
+var textDecorationLines = [
+  "underline",
+  "overline",
+  "line-through"
+];
+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 = getTextDecorationStyle(style.getPropertyValue("text-decoration-style").trim());
+  if (textDecorationStyle === null) {
+    return null;
+  }
+  const textDecorationLine = style.getPropertyValue("text-decoration-line");
+  const lineParts = textDecorationLine.split(/\s+/);
+  const lines = textDecorationLines.filter((line) => lineParts.includes(line));
+  if (lines.length === 0) {
+    return null;
+  }
+  const textDecorationThickness = style.getPropertyValue("text-decoration-thickness");
+  const thicknessValue = parseFloat(textDecorationThickness);
+  const thickness = Number.isFinite(thicknessValue) ? thicknessValue : getDefaultTextDecorationThickness(parseFloat(style.fontSize));
+  if (thickness <= 0) {
+    return null;
+  }
+  const textDecorationColor = style.getPropertyValue("text-decoration-color");
+  return {
+    lines,
+    color: onlyBackgroundClipText || !textDecorationColor || currentColorValues.has(textDecorationColor) ? onlyBackgroundClipText ? "black" : style.color : textDecorationColor,
+    thickness,
+    style: textDecorationStyle
+  };
+};
+var getTextDecorations = ({
+  computedStyle,
+  onlyBackgroundClipText,
+  span
+}) => {
+  const decorations = [];
+  const spanDecoration = parseTextDecoration({
+    onlyBackgroundClipText,
+    style: computedStyle
+  });
+  if (spanDecoration) {
+    decorations.push(spanDecoration);
+  }
+  let parent = span.parentElement;
+  while (parent) {
+    const parentDecoration = parseTextDecoration({
+      onlyBackgroundClipText,
+      style: getComputedStyle(parent)
+    });
+    if (parentDecoration) {
+      decorations.push(parentDecoration);
+    }
+    parent = parent.parentElement;
+  }
+  return decorations;
+};
+var getTextDecorationY = ({
+  line,
+  measurements,
+  y,
+  thickness,
+  fontSizePx
+}) => {
+  const fontAscent = measurements.fontBoundingBoxAscent || measurements.actualBoundingBoxAscent || fontSizePx;
+  const fontDescent = measurements.fontBoundingBoxDescent || measurements.actualBoundingBoxDescent || fontSizePx * 0.2;
+  const actualAscent = measurements.actualBoundingBoxAscent || fontAscent;
+  if (line === "underline") {
+    return y + Math.max(thickness, fontDescent * 0.4);
+  }
+  if (line === "overline") {
+    return y - fontAscent + thickness / 2;
+  }
+  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,
+  measurements,
+  parentRect,
+  textDecorations,
+  token,
+  y
+}) => {
+  if (textDecorations.length === 0) {
+    return;
+  }
+  const startX = token.rect.left - parentRect.x;
+  const endX = token.rect.right - parentRect.x;
+  if (endX <= startX) {
+    return;
+  }
+  contextToDraw.save();
+  contextToDraw.lineCap = "butt";
+  for (const textDecoration of textDecorations) {
+    contextToDraw.strokeStyle = textDecoration.color;
+    contextToDraw.lineWidth = textDecoration.thickness;
+    for (const line of textDecoration.lines) {
+      const lineY = getTextDecorationY({
+        line,
+        measurements,
+        y,
+        thickness: textDecoration.thickness,
+        fontSizePx
+      });
+      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();
+};
+
 // src/drawing/text/draw-text.ts
 var drawText = ({
   span,
@@ -4174,6 +4345,11 @@ var drawText = ({
     contextToDraw.fillStyle = onlyBackgroundClipText ? "black" : webkitTextFillColor;
     contextToDraw.letterSpacing = letterSpacing;
     contextToDraw.wordSpacing = wordSpacing;
+    const textDecorations = getTextDecorations({
+      computedStyle,
+      onlyBackgroundClipText,
+      span
+    });
     const strokeWidth = parseFloat(webkitTextStrokeWidth);
     const hasStroke = strokeWidth > 0;
     if (hasStroke) {
@@ -4224,6 +4400,15 @@ var drawText = ({
         drawFill();
         drawStroke();
       }
+      drawTextDecoration({
+        contextToDraw,
+        fontSizePx,
+        measurements,
+        parentRect,
+        textDecorations,
+        token,
+        y
+      });
     }
     span.textContent = originalText;
     finishFilter();

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.483",
+	"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.483",
-		"remotion": "4.0.483",
-		"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.483",
-		"@remotion/paths": "4.0.483",
-		"@remotion/player": "4.0.483",
-		"@remotion/media": "4.0.483",
-		"@remotion/shapes": "4.0.483",
-		"@remotion/three": "4.0.483",
-		"@remotion/transitions": "4.0.483",
+		"@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",