@remotion/web-renderer 4.0.448 → 4.0.449

package/dist/audio.d.ts

@@ -4,4 +4,4 @@ export declare const onlyInlineAudio: ({ assets, fps, timestamp, sampleRate, }:
     fps: number;
     timestamp: number;
     sampleRate: number;
-}) => AudioData | null;
+}) => AudioData;

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

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

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/esm/index.mjs

@@ -671,6 +671,9 @@ var handleArtifacts = () => {
 // src/audio.ts
 var TARGET_NUMBER_OF_CHANNELS = 2;
 function mixAudio(waves, length) {
+  if (waves.length === 0) {
+    return new Int16Array(length);
+  }
   if (waves.length === 1 && waves[0].length === length) {
     return waves[0];
   }
@@ -694,9 +697,6 @@ var onlyInlineAudio = ({
   sampleRate
 }) => {
   const inlineAudio = assets.filter((asset) => asset.type === "inline-audio");
-  if (inlineAudio.length === 0) {
-    return null;
-  }
   const expectedLength = Math.round(TARGET_NUMBER_OF_CHANNELS * sampleRate / fps);
   for (const asset of inlineAudio) {
     if (asset.toneFrequency !== 1) {
@@ -2058,7 +2058,6 @@ var calculateTransforms = ({
   let opacity = 1;
   let elementComputedStyle = null;
   let maskImageInfo = null;
-  let filterValue = null;
   while (parent) {
     const computedStyle = getComputedStyle(parent);
     if (parent === element) {
@@ -2066,16 +2065,6 @@ 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";
@@ -2139,7 +2128,6 @@ var calculateTransforms = ({
   }
   const needs3DTransformViaWebGL = !totalMatrix.is2D;
   const needsMaskImage = maskImageInfo !== null;
-  const needsFilter = filterValue !== null;
   return {
     dimensions,
     totalMatrix,
@@ -2155,8 +2143,7 @@ var calculateTransforms = ({
     precompositing: {
       needs3DTransformViaWebGL,
       needsMaskImage: maskImageInfo,
-      needsFilter: filterValue,
-      needsPrecompositing: Boolean(needs3DTransformViaWebGL || needsMaskImage || needsFilter)
+      needsPrecompositing: Boolean(needs3DTransformViaWebGL || needsMaskImage)
     }
   };
 };
@@ -2406,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"));
@@ -3122,6 +3336,11 @@ var drawElement = async ({
     parentRect,
     scale
   });
+  const finishClipPath = setClipPath({
+    ctx: context,
+    clipPath: computedStyle.clipPath,
+    rect
+  });
   const finishOpacity = setOpacity({
     ctx: context,
     opacity
@@ -3186,6 +3405,7 @@ var drawElement = async ({
     cleanupAfterChildren: () => {
       finishFilter();
       finishOpacity();
+      finishClipPath();
       finishOverflowHidden();
     }
   };
@@ -3523,11 +3743,6 @@ 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);
@@ -3615,12 +3830,6 @@ 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,
@@ -3683,13 +3892,8 @@ 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,

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.448",
+	"version": "4.0.449",
 	"main": "dist/index.js",
 	"type": "module",
 	"scripts": {
@@ -29,9 +29,12 @@
 	"devDependencies": {
 		"@react-three/fiber": "9.2.0",
 		"@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",