@remotion/web-renderer 4.0.447 → 4.0.449

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;
-}) => AudioData | null;
+    sampleRate: number;
+}) => AudioData;

package/dist/drawing/clip-path.d.ts

@@ -0,0 +1,43 @@
+type ClipPathNone = {
+    type: 'none';
+};
+type ClipPathPolygon = {
+    type: 'polygon';
+    points: {
+        x: number;
+        y: number;
+    }[];
+};
+type ClipPathPath = {
+    type: 'path';
+    d: string;
+    fillRule: CanvasFillRule;
+};
+type ClipPathCircle = {
+    type: 'circle';
+    radius: number;
+    cx: number;
+    cy: number;
+};
+type ClipPathEllipse = {
+    type: 'ellipse';
+    rx: number;
+    ry: number;
+    cx: number;
+    cy: number;
+};
+type ClipPathInset = {
+    type: 'inset';
+    top: number;
+    right: number;
+    bottom: number;
+    left: number;
+};
+type ParsedClipPath = ClipPathNone | ClipPathPolygon | ClipPathPath | ClipPathCircle | ClipPathEllipse | ClipPathInset;
+export declare function parseClipPath(clipPath: string, rect: DOMRect): ParsedClipPath;
+export declare function setClipPath({ ctx, clipPath, rect }: {
+    ctx: OffscreenCanvasRenderingContext2D;
+    clipPath: string;
+    rect: DOMRect;
+}): () => void;
+export {};

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

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

package/dist/esm/index.mjs

@@ -670,8 +670,10 @@ var handleArtifacts = () => {
 
 // src/audio.ts
 var TARGET_NUMBER_OF_CHANNELS = 2;
-var TARGET_SAMPLE_RATE = 48000;
 function mixAudio(waves, length) {
+  if (waves.length === 0) {
+    return new Int16Array(length);
+  }
   if (waves.length === 1 && waves[0].length === length) {
     return waves[0];
   }
@@ -691,13 +693,11 @@ 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: []
             },
@@ -2392,6 +2393,233 @@ function setBorderRadius({
   };
 }
 
+// src/drawing/clip-path.ts
+function resolveLength(value, reference) {
+  value = value.trim();
+  if (value.endsWith("%")) {
+    return parseFloat(value) / 100 * reference;
+  }
+  if (value.endsWith("px")) {
+    return parseFloat(value);
+  }
+  return parseFloat(value);
+}
+function parsePosition(parts, width, height) {
+  if (parts.length === 0) {
+    return { x: width / 2, y: height / 2 };
+  }
+  if (parts.length === 1) {
+    return { x: resolveLength(parts[0], width), y: height / 2 };
+  }
+  return {
+    x: resolveLength(parts[0], width),
+    y: resolveLength(parts[1], height)
+  };
+}
+function parsePolygon(args, rect) {
+  const pointStrings = args.split(",");
+  const points = pointStrings.map((pointStr) => {
+    const coords = pointStr.trim().split(/\s+/);
+    return {
+      x: resolveLength(coords[0], rect.width) + rect.left,
+      y: resolveLength(coords[1], rect.height) + rect.top
+    };
+  });
+  return { type: "polygon", points };
+}
+function parsePath(args) {
+  const match = args.match(/^(?:(nonzero|evenodd)\s*,\s*)?["'](.+)["']$/);
+  if (!match) {
+    return {
+      type: "path",
+      d: args.replace(/["']/g, ""),
+      fillRule: "nonzero"
+    };
+  }
+  const fillRule = match[1] === "evenodd" ? "evenodd" : "nonzero";
+  return { type: "path", d: match[2], fillRule };
+}
+function parseCircle(args, rect) {
+  const atIndex = args.indexOf(" at ");
+  let radiusStr;
+  let positionParts;
+  if (atIndex !== -1) {
+    radiusStr = args.slice(0, atIndex).trim();
+    positionParts = args.slice(atIndex + 4).trim().split(/\s+/);
+  } else {
+    radiusStr = args.trim();
+    positionParts = [];
+  }
+  const closestSide = Math.min(rect.width, rect.height) / 2;
+  const farthestSide = Math.max(rect.width, rect.height) / 2;
+  let radius;
+  if (radiusStr === "closest-side" || radiusStr === "") {
+    radius = closestSide;
+  } else if (radiusStr === "farthest-side") {
+    radius = farthestSide;
+  } else {
+    const refSize = Math.sqrt(rect.width * rect.width + rect.height * rect.height) / Math.SQRT2;
+    radius = resolveLength(radiusStr, refSize);
+  }
+  const position = parsePosition(positionParts, rect.width, rect.height);
+  return {
+    type: "circle",
+    radius,
+    cx: position.x + rect.left,
+    cy: position.y + rect.top
+  };
+}
+function parseEllipse(args, rect) {
+  const atIndex = args.indexOf(" at ");
+  let radiiStr;
+  let positionParts;
+  if (atIndex !== -1) {
+    radiiStr = args.slice(0, atIndex).trim();
+    positionParts = args.slice(atIndex + 4).trim().split(/\s+/);
+  } else {
+    radiiStr = args.trim();
+    positionParts = [];
+  }
+  const radiiParts = radiiStr.split(/\s+/);
+  let rx;
+  let ry;
+  if (radiiParts.length >= 2) {
+    rx = resolveLength(radiiParts[0], rect.width);
+    ry = resolveLength(radiiParts[1], rect.height);
+  } else {
+    rx = rect.width / 2;
+    ry = rect.height / 2;
+  }
+  const position = parsePosition(positionParts, rect.width, rect.height);
+  return {
+    type: "ellipse",
+    rx,
+    ry,
+    cx: position.x + rect.left,
+    cy: position.y + rect.top
+  };
+}
+function parseInset(args, rect) {
+  const [insetPart] = args.split(/\s+round\s+/);
+  const parts = insetPart.split(/\s+/);
+  let top;
+  let right;
+  let bottom;
+  let left;
+  if (parts.length === 1) {
+    const val = resolveLength(parts[0], rect.height);
+    top = val;
+    right = val;
+    bottom = val;
+    left = val;
+  } else if (parts.length === 2) {
+    top = resolveLength(parts[0], rect.height);
+    bottom = resolveLength(parts[0], rect.height);
+    right = resolveLength(parts[1], rect.width);
+    left = resolveLength(parts[1], rect.width);
+  } else if (parts.length === 3) {
+    top = resolveLength(parts[0], rect.height);
+    right = resolveLength(parts[1], rect.width);
+    left = resolveLength(parts[1], rect.width);
+    bottom = resolveLength(parts[2], rect.height);
+  } else {
+    top = resolveLength(parts[0], rect.height);
+    right = resolveLength(parts[1], rect.width);
+    bottom = resolveLength(parts[2], rect.height);
+    left = resolveLength(parts[3], rect.width);
+  }
+  return { type: "inset", top, right, bottom, left };
+}
+function parseClipPath(clipPath, rect) {
+  if (clipPath === "none" || clipPath === "") {
+    return { type: "none" };
+  }
+  const polygonMatch = clipPath.match(/^polygon\((.+)\)$/);
+  if (polygonMatch) {
+    return parsePolygon(polygonMatch[1], rect);
+  }
+  const pathMatch = clipPath.match(/^path\((.+)\)$/);
+  if (pathMatch) {
+    return parsePath(pathMatch[1]);
+  }
+  const circleMatch = clipPath.match(/^circle\((.+)\)$/);
+  if (circleMatch) {
+    return parseCircle(circleMatch[1], rect);
+  }
+  const ellipseMatch = clipPath.match(/^ellipse\((.+)\)$/);
+  if (ellipseMatch) {
+    return parseEllipse(ellipseMatch[1], rect);
+  }
+  const insetMatch = clipPath.match(/^inset\((.+)\)$/);
+  if (insetMatch) {
+    return parseInset(insetMatch[1], rect);
+  }
+  return { type: "none" };
+}
+function setClipPath({
+  ctx,
+  clipPath,
+  rect
+}) {
+  const parsed = parseClipPath(clipPath, rect);
+  if (parsed.type === "none") {
+    return () => {};
+  }
+  ctx.save();
+  switch (parsed.type) {
+    case "polygon": {
+      ctx.beginPath();
+      for (let i = 0;i < parsed.points.length; i++) {
+        const point = parsed.points[i];
+        if (i === 0) {
+          ctx.moveTo(point.x, point.y);
+        } else {
+          ctx.lineTo(point.x, point.y);
+        }
+      }
+      ctx.closePath();
+      ctx.clip();
+      break;
+    }
+    case "path": {
+      const path2d = new Path2D;
+      const offsetMatrix = new DOMMatrix().translate(rect.left, rect.top);
+      path2d.addPath(new Path2D(parsed.d), offsetMatrix);
+      ctx.clip(path2d, parsed.fillRule);
+      break;
+    }
+    case "circle": {
+      ctx.beginPath();
+      ctx.arc(parsed.cx, parsed.cy, parsed.radius, 0, Math.PI * 2);
+      ctx.closePath();
+      ctx.clip();
+      break;
+    }
+    case "ellipse": {
+      ctx.beginPath();
+      ctx.ellipse(parsed.cx, parsed.cy, parsed.rx, parsed.ry, 0, 0, Math.PI * 2);
+      ctx.closePath();
+      ctx.clip();
+      break;
+    }
+    case "inset": {
+      const x = rect.left + parsed.left;
+      const y = rect.top + parsed.top;
+      const w = rect.width - parsed.left - parsed.right;
+      const h = rect.height - parsed.top - parsed.bottom;
+      ctx.beginPath();
+      ctx.rect(x, y, w, h);
+      ctx.clip();
+      break;
+    }
+    default:
+      break;
+  }
+  return () => {
+    ctx.restore();
+  };
+}
+
 // src/drawing/get-background-fill.ts
 var isColorTransparent = (color) => {
   return color === "transparent" || color.startsWith("rgba") && (color.endsWith(", 0)") || color.endsWith(",0"));
@@ -3108,6 +3336,11 @@ var drawElement = async ({
     parentRect,
     scale
   });
+  const finishClipPath = setClipPath({
+    ctx: context,
+    clipPath: computedStyle.clipPath,
+    rect
+  });
   const finishOpacity = setOpacity({
     ctx: context,
     opacity
@@ -3172,6 +3405,7 @@ var drawElement = async ({
     cleanupAfterChildren: () => {
       finishFilter();
       finishOpacity();
+      finishClipPath();
       finishOverflowHidden();
     }
   };
@@ -4274,7 +4508,8 @@ var internalRenderMediaOnWeb = async ({
   muted,
   scale,
   isProduction,
-  allowHtmlInCanvas
+  allowHtmlInCanvas,
+  sampleRate
 }) => {
   let __stack2 = [];
   try {
@@ -4553,7 +4788,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 +4902,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.449",
 	"main": "dist/index.js",
 	"type": "module",
 	"scripts": {
@@ -22,16 +22,19 @@
 		"@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/paths": "4.0.448",
+		"@remotion/player": "4.0.448",
+		"@remotion/media": "4.0.448",
+		"@remotion/shapes": "4.0.448",
+		"@remotion/three": "4.0.448",
+		"@remotion/transitions": "4.0.448",
 		"@types/three": "0.170.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1",
 		"@vitejs/plugin-react": "4.3.4",