@remotion/web-renderer 4.0.394 → 4.0.395

package/dist/esm/index.mjs

@@ -6,7 +6,7 @@ import {
   StreamTarget,
   VideoSampleSource
 } from "mediabunny";
-import { Internals as Internals4 } from "remotion";
+import { Internals as Internals6 } from "remotion";
 
 // src/add-sample.ts
 import { AudioSample, VideoSample } from "mediabunny";
@@ -460,20 +460,95 @@ var onlyOneRenderAtATimeQueue = {
   ref: Promise.resolve()
 };
 
+// ../licensing/dist/esm/index.mjs
+var HOST = "https://www.remotion.pro";
+var registerUsageEvent = async ({
+  apiKey,
+  host,
+  succeeded,
+  event
+}) => {
+  const abortController = new AbortController;
+  const timeout = setTimeout(() => {
+    abortController.abort();
+  }, 1e4);
+  try {
+    const res = await fetch(`${HOST}/api/track/register-usage-point`, {
+      method: "POST",
+      body: JSON.stringify({
+        event,
+        apiKey,
+        host,
+        succeeded
+      }),
+      headers: {
+        "Content-Type": "application/json"
+      },
+      signal: abortController.signal
+    });
+    clearTimeout(timeout);
+    const json = await res.json();
+    if (json.success) {
+      return {
+        billable: json.billable,
+        classification: json.classification
+      };
+    }
+    if (!res.ok) {
+      throw new Error(json.error);
+    }
+    const read = await res.json();
+    return read;
+  } catch (err) {
+    clearTimeout(timeout);
+    if (err instanceof Error && err.name === "AbortError") {
+      throw new Error("Request timed out after 10 seconds");
+    }
+    throw err;
+  }
+};
+
+// src/send-telemetry-event.ts
+import { Internals as Internals3 } from "remotion";
+var sendUsageEvent = async ({
+  licenseKey,
+  succeeded,
+  apiName
+}) => {
+  const host = typeof window === "undefined" ? null : typeof window.location === "undefined" ? null : window.location.origin ?? null;
+  if (host === null) {
+    return;
+  }
+  if (licenseKey === null) {
+    Internals3.Log.warn({ logLevel: "warn", tag: "web-renderer" }, `Pass "licenseKey" to ${apiName}(). If you qualify for the free license (https://remotion.dev/license), pass "free-license" instead.`);
+  }
+  await registerUsageEvent({
+    apiKey: licenseKey === "free-license" ? null : licenseKey,
+    event: "webcodec-conversion",
+    host,
+    succeeded
+  });
+};
+
 // src/drawing/turn-svg-into-drawable.ts
 var turnSvgIntoDrawable = (svg) => {
+  const { fill, color } = getComputedStyle(svg);
   const originalTransform = svg.style.transform;
   const originalTransformOrigin = svg.style.transformOrigin;
   const originalMarginLeft = svg.style.marginLeft;
   const originalMarginRight = svg.style.marginRight;
   const originalMarginTop = svg.style.marginTop;
   const originalMarginBottom = svg.style.marginBottom;
+  const originalFill = svg.style.fill;
+  const originalColor = svg.style.color;
   svg.style.transform = "none";
   svg.style.transformOrigin = "";
   svg.style.marginLeft = "0";
   svg.style.marginRight = "0";
   svg.style.marginTop = "0";
   svg.style.marginBottom = "0";
+  svg.style.fill = fill;
+  svg.style.color = color;
   const svgData = new XMLSerializer().serializeToString(svg);
   svg.style.marginLeft = originalMarginLeft;
   svg.style.marginRight = originalMarginRight;
@@ -481,6 +556,8 @@ var turnSvgIntoDrawable = (svg) => {
   svg.style.marginBottom = originalMarginBottom;
   svg.style.transform = originalTransform;
   svg.style.transformOrigin = originalTransformOrigin;
+  svg.style.fill = originalFill;
+  svg.style.color = originalColor;
   return new Promise((resolve, reject) => {
     const image = new Image;
     const url = `data:image/svg+xml;base64,${btoa(svgData)}`;
@@ -506,6 +583,29 @@ var drawDomElement = (node) => {
   return domDrawFn;
 };
 
+// src/drawing/draw-element-to-canvas.ts
+import { Internals as Internals4 } from "remotion";
+
+// src/get-biggest-bounding-client-rect.ts
+var getBiggestBoundingClientRect = (element) => {
+  const treeWalker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT);
+  let mostLeft = Infinity;
+  let mostTop = Infinity;
+  let mostRight = -Infinity;
+  let mostBottom = -Infinity;
+  while (true) {
+    const rect = treeWalker.currentNode.getBoundingClientRect();
+    mostLeft = Math.min(mostLeft, rect.left);
+    mostTop = Math.min(mostTop, rect.top);
+    mostRight = Math.max(mostRight, rect.right);
+    mostBottom = Math.max(mostBottom, rect.bottom);
+    if (!treeWalker.nextNode()) {
+      break;
+    }
+  }
+  return new DOMRect(mostLeft, mostTop, mostRight - mostLeft, mostBottom - mostTop);
+};
+
 // src/drawing/parse-transform-origin.ts
 var parseTransformOrigin = (transformOrigin) => {
   if (transformOrigin.trim() === "") {
@@ -747,87 +847,340 @@ function setBorderRadius({
 }
 
 // src/drawing/draw-border.ts
-var drawBorder = ({
+var parseBorderWidth = (value) => {
+  return parseFloat(value) || 0;
+};
+var getBorderSideProperties = (computedStyle) => {
+  return {
+    top: {
+      width: parseBorderWidth(computedStyle.borderTopWidth),
+      color: computedStyle.borderTopColor || computedStyle.borderColor || "black",
+      style: computedStyle.borderTopStyle || computedStyle.borderStyle || "solid"
+    },
+    right: {
+      width: parseBorderWidth(computedStyle.borderRightWidth),
+      color: computedStyle.borderRightColor || computedStyle.borderColor || "black",
+      style: computedStyle.borderRightStyle || computedStyle.borderStyle || "solid"
+    },
+    bottom: {
+      width: parseBorderWidth(computedStyle.borderBottomWidth),
+      color: computedStyle.borderBottomColor || computedStyle.borderColor || "black",
+      style: computedStyle.borderBottomStyle || computedStyle.borderStyle || "solid"
+    },
+    left: {
+      width: parseBorderWidth(computedStyle.borderLeftWidth),
+      color: computedStyle.borderLeftColor || computedStyle.borderColor || "black",
+      style: computedStyle.borderLeftStyle || computedStyle.borderStyle || "solid"
+    }
+  };
+};
+var getLineDashPattern = (style, width) => {
+  if (style === "dashed") {
+    return [width * 2, width];
+  }
+  if (style === "dotted") {
+    return [width, width];
+  }
+  return [];
+};
+var drawBorderSide = ({
   ctx,
+  side,
   x,
   y,
   width,
   height,
   borderRadius,
-  computedStyle
+  borderProperties
 }) => {
-  const {
-    borderStyle,
-    borderColor,
-    borderWidth: computedBorderWidth
-  } = computedStyle;
-  const borderWidths = computedBorderWidth.split(/\s+/).map((w) => parseFloat(w));
-  const borderTop = borderWidths[0] || 0;
-  const borderRight = borderWidths[1] || borderTop;
-  const borderBottom = borderWidths[2] || borderTop;
-  const borderLeft = borderWidths[3] || borderRight;
-  const hasBorder = borderStyle && borderStyle !== "none" && borderStyle !== "hidden" && (borderTop > 0 || borderRight > 0 || borderBottom > 0 || borderLeft > 0);
-  if (!hasBorder) {
+  const { width: borderWidth, color, style } = borderProperties;
+  if (borderWidth <= 0 || style === "none" || style === "hidden") {
     return;
   }
-  const originalStrokeStyle = ctx.strokeStyle;
-  const originalLineWidth = ctx.lineWidth;
-  const originalLineDash = ctx.getLineDash();
-  ctx.strokeStyle = borderColor;
-  if (borderStyle === "dashed") {
-    const max = Math.max(borderTop, borderRight, borderBottom, borderLeft);
-    ctx.setLineDash([max * 2, max]);
-  } else if (borderStyle === "dotted") {
-    ctx.setLineDash([
-      Math.max(borderTop, borderRight, borderBottom, borderLeft)
-    ]);
+  ctx.beginPath();
+  ctx.strokeStyle = color;
+  ctx.lineWidth = borderWidth;
+  ctx.setLineDash(getLineDashPattern(style, borderWidth));
+  const halfWidth = borderWidth / 2;
+  if (side === "top") {
+    const startX = x + borderRadius.topLeft.horizontal;
+    const startY = y + halfWidth;
+    const endX = x + width - borderRadius.topRight.horizontal;
+    const endY = y + halfWidth;
+    ctx.moveTo(startX, startY);
+    ctx.lineTo(endX, endY);
+  } else if (side === "right") {
+    const startX = x + width - halfWidth;
+    const startY = y + borderRadius.topRight.vertical;
+    const endX = x + width - halfWidth;
+    const endY = y + height - borderRadius.bottomRight.vertical;
+    ctx.moveTo(startX, startY);
+    ctx.lineTo(endX, endY);
+  } else if (side === "bottom") {
+    const startX = x + borderRadius.bottomLeft.horizontal;
+    const startY = y + height - halfWidth;
+    const endX = x + width - borderRadius.bottomRight.horizontal;
+    const endY = y + height - halfWidth;
+    ctx.moveTo(startX, startY);
+    ctx.lineTo(endX, endY);
+  } else if (side === "left") {
+    const startX = x + halfWidth;
+    const startY = y + borderRadius.topLeft.vertical;
+    const endX = x + halfWidth;
+    const endY = y + height - borderRadius.bottomLeft.vertical;
+    ctx.moveTo(startX, startY);
+    ctx.lineTo(endX, endY);
+  }
+  ctx.stroke();
+};
+var drawCorner = ({
+  ctx,
+  corner,
+  x,
+  y,
+  width,
+  height,
+  borderRadius,
+  topBorder,
+  rightBorder,
+  bottomBorder,
+  leftBorder
+}) => {
+  const radius = borderRadius[corner];
+  if (radius.horizontal <= 0 && radius.vertical <= 0) {
+    return;
+  }
+  let border1;
+  let border2;
+  let centerX;
+  let centerY;
+  let startAngle;
+  let endAngle;
+  if (corner === "topLeft") {
+    border1 = leftBorder;
+    border2 = topBorder;
+    centerX = x + radius.horizontal;
+    centerY = y + radius.vertical;
+    startAngle = Math.PI;
+    endAngle = Math.PI * 3 / 2;
+  } else if (corner === "topRight") {
+    border1 = topBorder;
+    border2 = rightBorder;
+    centerX = x + width - radius.horizontal;
+    centerY = y + radius.vertical;
+    startAngle = -Math.PI / 2;
+    endAngle = 0;
+  } else if (corner === "bottomRight") {
+    border1 = rightBorder;
+    border2 = bottomBorder;
+    centerX = x + width - radius.horizontal;
+    centerY = y + height - radius.vertical;
+    startAngle = 0;
+    endAngle = Math.PI / 2;
   } else {
-    ctx.setLineDash([]);
+    border1 = bottomBorder;
+    border2 = leftBorder;
+    centerX = x + radius.horizontal;
+    centerY = y + height - radius.vertical;
+    startAngle = Math.PI / 2;
+    endAngle = Math.PI;
+  }
+  const avgWidth = (border1.width + border2.width) / 2;
+  const useColor = border1.width >= border2.width ? border1.color : border2.color;
+  const useStyle = border1.width >= border2.width ? border1.style : border2.style;
+  if (avgWidth > 0 && useStyle !== "none" && useStyle !== "hidden") {
+    ctx.beginPath();
+    ctx.strokeStyle = useColor;
+    ctx.lineWidth = avgWidth;
+    ctx.setLineDash(getLineDashPattern(useStyle, avgWidth));
+    const adjustedRadiusH = Math.max(0, radius.horizontal - avgWidth / 2);
+    const adjustedRadiusV = Math.max(0, radius.vertical - avgWidth / 2);
+    ctx.ellipse(centerX, centerY, adjustedRadiusH, adjustedRadiusV, 0, startAngle, endAngle);
+    ctx.stroke();
   }
-  const maxBorderWidth = Math.max(borderTop, borderRight, borderBottom, borderLeft);
+};
+var drawUniformBorder = ({
+  ctx,
+  x,
+  y,
+  width,
+  height,
+  borderRadius,
+  borderWidth,
+  borderColor,
+  borderStyle
+}) => {
   ctx.beginPath();
-  const borderX = x + maxBorderWidth / 2;
-  const borderY = y + maxBorderWidth / 2;
-  const borderWidth = width - maxBorderWidth;
-  const borderHeight = height - maxBorderWidth;
+  ctx.strokeStyle = borderColor;
+  ctx.lineWidth = borderWidth;
+  ctx.setLineDash(getLineDashPattern(borderStyle, borderWidth));
+  const halfWidth = borderWidth / 2;
+  const borderX = x + halfWidth;
+  const borderY = y + halfWidth;
+  const borderW = width - borderWidth;
+  const borderH = height - borderWidth;
   const adjustedBorderRadius = {
     topLeft: {
-      horizontal: Math.max(0, borderRadius.topLeft.horizontal - maxBorderWidth / 2),
-      vertical: Math.max(0, borderRadius.topLeft.vertical - maxBorderWidth / 2)
+      horizontal: Math.max(0, borderRadius.topLeft.horizontal - halfWidth),
+      vertical: Math.max(0, borderRadius.topLeft.vertical - halfWidth)
     },
     topRight: {
-      horizontal: Math.max(0, borderRadius.topRight.horizontal - maxBorderWidth / 2),
-      vertical: Math.max(0, borderRadius.topRight.vertical - maxBorderWidth / 2)
+      horizontal: Math.max(0, borderRadius.topRight.horizontal - halfWidth),
+      vertical: Math.max(0, borderRadius.topRight.vertical - halfWidth)
     },
     bottomRight: {
-      horizontal: Math.max(0, borderRadius.bottomRight.horizontal - maxBorderWidth / 2),
-      vertical: Math.max(0, borderRadius.bottomRight.vertical - maxBorderWidth / 2)
+      horizontal: Math.max(0, borderRadius.bottomRight.horizontal - halfWidth),
+      vertical: Math.max(0, borderRadius.bottomRight.vertical - halfWidth)
     },
     bottomLeft: {
-      horizontal: Math.max(0, borderRadius.bottomLeft.horizontal - maxBorderWidth / 2),
-      vertical: Math.max(0, borderRadius.bottomLeft.vertical - maxBorderWidth / 2)
+      horizontal: Math.max(0, borderRadius.bottomLeft.horizontal - halfWidth),
+      vertical: Math.max(0, borderRadius.bottomLeft.vertical - halfWidth)
     }
   };
   ctx.moveTo(borderX + adjustedBorderRadius.topLeft.horizontal, borderY);
-  ctx.lineTo(borderX + borderWidth - adjustedBorderRadius.topRight.horizontal, borderY);
+  ctx.lineTo(borderX + borderW - adjustedBorderRadius.topRight.horizontal, borderY);
   if (adjustedBorderRadius.topRight.horizontal > 0 || adjustedBorderRadius.topRight.vertical > 0) {
-    ctx.ellipse(borderX + borderWidth - adjustedBorderRadius.topRight.horizontal, borderY + adjustedBorderRadius.topRight.vertical, adjustedBorderRadius.topRight.horizontal, adjustedBorderRadius.topRight.vertical, 0, -Math.PI / 2, 0);
+    ctx.ellipse(borderX + borderW - adjustedBorderRadius.topRight.horizontal, borderY + adjustedBorderRadius.topRight.vertical, adjustedBorderRadius.topRight.horizontal, adjustedBorderRadius.topRight.vertical, 0, -Math.PI / 2, 0);
   }
-  ctx.lineTo(borderX + borderWidth, borderY + borderHeight - adjustedBorderRadius.bottomRight.vertical);
+  ctx.lineTo(borderX + borderW, borderY + borderH - adjustedBorderRadius.bottomRight.vertical);
   if (adjustedBorderRadius.bottomRight.horizontal > 0 || adjustedBorderRadius.bottomRight.vertical > 0) {
-    ctx.ellipse(borderX + borderWidth - adjustedBorderRadius.bottomRight.horizontal, borderY + borderHeight - adjustedBorderRadius.bottomRight.vertical, adjustedBorderRadius.bottomRight.horizontal, adjustedBorderRadius.bottomRight.vertical, 0, 0, Math.PI / 2);
+    ctx.ellipse(borderX + borderW - adjustedBorderRadius.bottomRight.horizontal, borderY + borderH - adjustedBorderRadius.bottomRight.vertical, adjustedBorderRadius.bottomRight.horizontal, adjustedBorderRadius.bottomRight.vertical, 0, 0, Math.PI / 2);
   }
-  ctx.lineTo(borderX + adjustedBorderRadius.bottomLeft.horizontal, borderY + borderHeight);
+  ctx.lineTo(borderX + adjustedBorderRadius.bottomLeft.horizontal, borderY + borderH);
   if (adjustedBorderRadius.bottomLeft.horizontal > 0 || adjustedBorderRadius.bottomLeft.vertical > 0) {
-    ctx.ellipse(borderX + adjustedBorderRadius.bottomLeft.horizontal, borderY + borderHeight - adjustedBorderRadius.bottomLeft.vertical, adjustedBorderRadius.bottomLeft.horizontal, adjustedBorderRadius.bottomLeft.vertical, 0, Math.PI / 2, Math.PI);
+    ctx.ellipse(borderX + adjustedBorderRadius.bottomLeft.horizontal, borderY + borderH - adjustedBorderRadius.bottomLeft.vertical, adjustedBorderRadius.bottomLeft.horizontal, adjustedBorderRadius.bottomLeft.vertical, 0, Math.PI / 2, Math.PI);
   }
   ctx.lineTo(borderX, borderY + adjustedBorderRadius.topLeft.vertical);
   if (adjustedBorderRadius.topLeft.horizontal > 0 || adjustedBorderRadius.topLeft.vertical > 0) {
     ctx.ellipse(borderX + adjustedBorderRadius.topLeft.horizontal, borderY + adjustedBorderRadius.topLeft.vertical, adjustedBorderRadius.topLeft.horizontal, adjustedBorderRadius.topLeft.vertical, 0, Math.PI, Math.PI * 3 / 2);
   }
   ctx.closePath();
-  ctx.lineWidth = maxBorderWidth;
   ctx.stroke();
+};
+var drawBorder = ({
+  ctx,
+  x,
+  y,
+  width,
+  height,
+  borderRadius,
+  computedStyle
+}) => {
+  const borders = getBorderSideProperties(computedStyle);
+  const hasBorder = borders.top.width > 0 || borders.right.width > 0 || borders.bottom.width > 0 || borders.left.width > 0;
+  if (!hasBorder) {
+    return;
+  }
+  const originalStrokeStyle = ctx.strokeStyle;
+  const originalLineWidth = ctx.lineWidth;
+  const originalLineDash = ctx.getLineDash();
+  const allSidesEqual = borders.top.width === borders.right.width && borders.top.width === borders.bottom.width && borders.top.width === borders.left.width && borders.top.color === borders.right.color && borders.top.color === borders.bottom.color && borders.top.color === borders.left.color && borders.top.style === borders.right.style && borders.top.style === borders.bottom.style && borders.top.style === borders.left.style && borders.top.width > 0;
+  if (allSidesEqual) {
+    drawUniformBorder({
+      ctx,
+      x,
+      y,
+      width,
+      height,
+      borderRadius,
+      borderWidth: borders.top.width,
+      borderColor: borders.top.color,
+      borderStyle: borders.top.style
+    });
+  } else {
+    drawCorner({
+      ctx,
+      corner: "topLeft",
+      x,
+      y,
+      width,
+      height,
+      borderRadius,
+      topBorder: borders.top,
+      rightBorder: borders.right,
+      bottomBorder: borders.bottom,
+      leftBorder: borders.left
+    });
+    drawCorner({
+      ctx,
+      corner: "topRight",
+      x,
+      y,
+      width,
+      height,
+      borderRadius,
+      topBorder: borders.top,
+      rightBorder: borders.right,
+      bottomBorder: borders.bottom,
+      leftBorder: borders.left
+    });
+    drawCorner({
+      ctx,
+      corner: "bottomRight",
+      x,
+      y,
+      width,
+      height,
+      borderRadius,
+      topBorder: borders.top,
+      rightBorder: borders.right,
+      bottomBorder: borders.bottom,
+      leftBorder: borders.left
+    });
+    drawCorner({
+      ctx,
+      corner: "bottomLeft",
+      x,
+      y,
+      width,
+      height,
+      borderRadius,
+      topBorder: borders.top,
+      rightBorder: borders.right,
+      bottomBorder: borders.bottom,
+      leftBorder: borders.left
+    });
+    drawBorderSide({
+      ctx,
+      side: "top",
+      x,
+      y,
+      width,
+      height,
+      borderRadius,
+      borderProperties: borders.top
+    });
+    drawBorderSide({
+      ctx,
+      side: "right",
+      x,
+      y,
+      width,
+      height,
+      borderRadius,
+      borderProperties: borders.right
+    });
+    drawBorderSide({
+      ctx,
+      side: "bottom",
+      x,
+      y,
+      width,
+      height,
+      borderRadius,
+      borderProperties: borders.bottom
+    });
+    drawBorderSide({
+      ctx,
+      side: "left",
+      x,
+      y,
+      width,
+      height,
+      borderRadius,
+      borderProperties: borders.left
+    });
+  }
   ctx.strokeStyle = originalStrokeStyle;
   ctx.lineWidth = originalLineWidth;
   ctx.setLineDash(originalLineDash);
@@ -933,6 +1286,12 @@ var createHelperCanvas = ({
     helperCanvas.gl.clear(helperCanvas.gl.COLOR_BUFFER_BIT);
     return helperCanvas;
   }
+  if (helperCanvas) {
+    helperCanvas.gl.deleteProgram(helperCanvas.program);
+    helperCanvas.gl.deleteShader(helperCanvas.vertexShader);
+    helperCanvas.gl.deleteShader(helperCanvas.fragmentShader);
+    helperCanvas = null;
+  }
   const canvas = new OffscreenCanvas(canvasWidth, canvasHeight);
   const gl = canvas.getContext("webgl");
   if (!gl) {
@@ -973,7 +1332,7 @@ var createHelperCanvas = ({
   gl.clear(gl.COLOR_BUFFER_BIT);
   gl.enable(gl.BLEND);
   gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-  helperCanvas = { canvas, gl, program };
+  helperCanvas = { canvas, gl, program, vertexShader, fragmentShader };
   return helperCanvas;
 };
 var transformIn3d = ({
@@ -1065,7 +1424,8 @@ var drawElementToCanvas = async ({
   context,
   draw,
   offsetLeft,
-  offsetTop
+  offsetTop,
+  logLevel
 }) => {
   const { totalMatrix, reset, dimensions, opacity, computedStyle } = calculateTransforms(element);
   if (opacity === 0) {
@@ -1077,10 +1437,12 @@ var drawElementToCanvas = async ({
     return "continue";
   }
   if (!totalMatrix.is2D) {
-    const canvasOffsetLeft = Math.min(dimensions.left, 0);
-    const canvasOffsetTop = Math.min(dimensions.top, 0);
-    const tempCanvasWidth = Math.max(dimensions.width, dimensions.right);
-    const tempCanvasHeight = Math.max(dimensions.height, dimensions.bottom);
+    const biggestBoundingClientRect = getBiggestBoundingClientRect(element);
+    const canvasOffsetLeft = Math.min(biggestBoundingClientRect.left, 0);
+    const canvasOffsetTop = Math.min(biggestBoundingClientRect.top, 0);
+    const tempCanvasWidth = Math.max(biggestBoundingClientRect.width, biggestBoundingClientRect.right);
+    const tempCanvasHeight = Math.max(biggestBoundingClientRect.height, biggestBoundingClientRect.bottom);
+    const start = Date.now();
     const tempCanvas = new OffscreenCanvas(tempCanvasWidth, tempCanvasHeight);
     const context2 = tempCanvas.getContext("2d");
     if (!context2) {
@@ -1090,8 +1452,10 @@ var drawElementToCanvas = async ({
       element,
       context: context2,
       offsetLeft: canvasOffsetLeft,
-      offsetTop: canvasOffsetTop
+      offsetTop: canvasOffsetTop,
+      logLevel
     });
+    const afterCompose = Date.now();
     const transformed = transformIn3d({
       canvasWidth: tempCanvasWidth,
       canvasHeight: tempCanvasHeight,
@@ -1101,7 +1465,12 @@ var drawElementToCanvas = async ({
       offsetTop: canvasOffsetTop
     });
     context.drawImage(transformed, 0, 0);
+    const afterDraw = Date.now();
     reset();
+    Internals4.Log.trace({
+      logLevel,
+      tag: "@remotion/web-renderer"
+    }, `Transforming element in 3D - canvas size: ${tempCanvasWidth}x${tempCanvasHeight} - compose: ${afterCompose - start}ms - draw: ${afterDraw - afterCompose}ms`);
     return "skip-children";
   }
   await drawElement({
@@ -1117,7 +1486,7 @@ var drawElementToCanvas = async ({
 };
 
 // src/drawing/text/draw-text.ts
-import { Internals as Internals3 } from "remotion";
+import { Internals as Internals5 } from "remotion";
 
 // src/drawing/text/apply-text-transform.ts
 var applyTextTransform = (text, transform) => {
@@ -1239,7 +1608,6 @@ var drawText = (span) => {
       fontSize,
       fontWeight,
       color,
-      lineHeight,
       direction,
       writingMode,
       letterSpacing,
@@ -1247,22 +1615,20 @@ var drawText = (span) => {
     } = computedStyle;
     const isVertical = writingMode !== "horizontal-tb";
     if (isVertical) {
-      Internals3.Log.warn({
+      Internals5.Log.warn({
         logLevel: "warn",
         tag: "@remotion/web-renderer"
       }, 'Detected "writing-mode" CSS property. Vertical text is not yet supported in @remotion/web-renderer');
       return;
     }
     contextToDraw.save();
-    contextToDraw.font = `${fontWeight} ${fontSize} ${fontFamily}`;
+    const fontSizePx = parseFloat(fontSize);
+    contextToDraw.font = `${fontWeight} ${fontSizePx}px ${fontFamily}`;
     contextToDraw.fillStyle = color;
     contextToDraw.letterSpacing = letterSpacing;
-    const fontSizePx = parseFloat(fontSize);
-    const lineHeightPx = lineHeight === "normal" ? 1.2 * fontSizePx : parseFloat(lineHeight);
-    const baselineOffset = (lineHeightPx - fontSizePx) / 2;
     const isRTL = direction === "rtl";
     contextToDraw.textAlign = isRTL ? "right" : "left";
-    contextToDraw.textBaseline = "top";
+    contextToDraw.textBaseline = "alphabetic";
     const originalText = span.textContent;
     const collapsedText = getCollapsedText(span);
     const transformedText = applyTextTransform(collapsedText, textTransform);
@@ -1270,8 +1636,9 @@ var drawText = (span) => {
     const xPosition = isRTL ? rect.right : rect.left;
     const lines = findLineBreaks(span, isRTL);
     let offsetTop = 0;
+    const { fontBoundingBoxAscent } = contextToDraw.measureText(lines[0].text);
     for (const line of lines) {
-      contextToDraw.fillText(line.text, xPosition + line.offsetHorizontal, rect.top + baselineOffset + offsetTop);
+      contextToDraw.fillText(line.text, xPosition + line.offsetHorizontal, rect.top + offsetTop + fontBoundingBoxAscent);
       offsetTop += line.offsetTop;
     }
     span.textContent = originalText;
@@ -1285,7 +1652,8 @@ var handleTextNode = async ({
   node,
   context,
   offsetLeft,
-  offsetTop
+  offsetTop,
+  logLevel
 }) => {
   const span = document.createElement("span");
   const parent = node.parentNode;
@@ -1299,7 +1667,8 @@ var handleTextNode = async ({
     element: span,
     draw: drawText(span),
     offsetLeft,
-    offsetTop
+    offsetTop,
+    logLevel
   });
   parent.insertBefore(node, span);
   parent.removeChild(span);
@@ -1324,7 +1693,8 @@ var walkOverNode = ({
   node,
   context,
   offsetLeft,
-  offsetTop
+  offsetTop,
+  logLevel
 }) => {
   if (node instanceof HTMLElement || node instanceof SVGElement) {
     return drawElementToCanvas({
@@ -1332,11 +1702,12 @@ var walkOverNode = ({
       context,
       draw: drawDomElement(node),
       offsetLeft,
-      offsetTop
+      offsetTop,
+      logLevel
     });
   }
   if (node instanceof Text) {
-    return handleTextNode({ node, context, offsetLeft, offsetTop });
+    return handleTextNode({ node, context, offsetLeft, offsetTop, logLevel });
   }
   throw new Error("Unknown node type");
 };
@@ -1344,7 +1715,8 @@ var compose = async ({
   element,
   context,
   offsetLeft,
-  offsetTop
+  offsetTop,
+  logLevel
 }) => {
   const treeWalker = document.createTreeWalker(element, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, (node) => {
     if (node instanceof Element) {
@@ -1361,7 +1733,8 @@ var compose = async ({
       node: treeWalker.currentNode,
       context,
       offsetLeft,
-      offsetTop
+      offsetTop,
+      logLevel
     });
     if (val === "skip-children") {
       if (!skipToNextNonDescendant(treeWalker)) {
@@ -1377,23 +1750,25 @@ var compose = async ({
 var createFrame = async ({
   div,
   width,
-  height
+  height,
+  logLevel
 }) => {
   const canvas = new OffscreenCanvas(width, height);
   const context = canvas.getContext("2d");
   if (!context) {
     throw new Error("Could not get context");
   }
-  await compose({ element: div, context, offsetLeft: 0, offsetTop: 0 });
+  await compose({ element: div, context, offsetLeft: 0, offsetTop: 0, logLevel });
   return canvas;
 };
 var takeScreenshot = async ({
   div,
   width,
   height,
-  imageFormat
+  imageFormat,
+  logLevel
 }) => {
-  const frame = await createFrame({ div, width, height });
+  const frame = await createFrame({ div, width, height, logLevel });
   const imageData = await frame.convertToBlob({
     type: `image/${imageFormat}`
   });
@@ -1562,7 +1937,8 @@ var internalRenderMediaOnWeb = async ({
   transparent,
   onArtifact,
   onFrame,
-  outputTarget: userDesiredOutputTarget
+  outputTarget: userDesiredOutputTarget,
+  licenseKey
 }) => {
   const outputTarget = userDesiredOutputTarget === null ? await canUseWebFsWriter() ? "web-fs" : "arraybuffer" : userDesiredOutputTarget;
   if (outputTarget === "web-fs") {
@@ -1573,7 +1949,7 @@ var internalRenderMediaOnWeb = async ({
   if (codec && !format.getSupportedCodecs().includes(codecToMediabunnyCodec(codec))) {
     return Promise.reject(new Error(`Codec ${codec} is not supported for container ${container}`));
   }
-  const resolved = await Internals4.resolveVideoConfig({
+  const resolved = await Internals6.resolveVideoConfig({
     calculateMetadata: composition.calculateMetadata ?? null,
     signal: signal ?? new AbortController().signal,
     defaultProps: composition.defaultProps ?? {},
@@ -1683,7 +2059,8 @@ var internalRenderMediaOnWeb = async ({
       const imageData = await createFrame({
         div,
         width: resolved.width,
-        height: resolved.height
+        height: resolved.height,
+        logLevel
       });
       if (signal?.aborted) {
         throw new Error("renderMediaOnWeb() was cancelled");
@@ -1747,6 +2124,11 @@ var internalRenderMediaOnWeb = async ({
     if (!(target instanceof BufferTarget)) {
       throw new Error("Expected target to be a BufferTarget");
     }
+    sendUsageEvent({
+      licenseKey: licenseKey ?? null,
+      succeeded: true,
+      apiName: "renderMediaOnWeb"
+    });
     return {
       getBlob: () => {
         if (!target.buffer) {
@@ -1755,6 +2137,15 @@ var internalRenderMediaOnWeb = async ({
         return Promise.resolve(new Blob([target.buffer], { type: mimeType }));
       }
     };
+  } catch (err) {
+    sendUsageEvent({
+      succeeded: false,
+      licenseKey: licenseKey ?? null,
+      apiName: "renderMediaOnWeb"
+    }).catch((err2) => {
+      Internals6.Log.error({ logLevel: "error", tag: "web-renderer" }, "Failed to send usage event", err2);
+    });
+    throw err;
   } finally {
     cleanupFns.forEach((fn) => fn());
   }
@@ -1765,7 +2156,7 @@ var renderMediaOnWeb = (options) => {
   onlyOneRenderAtATimeQueue.ref = onlyOneRenderAtATimeQueue.ref.catch(() => Promise.resolve()).then(() => internalRenderMediaOnWeb({
     ...options,
     delayRenderTimeoutInMilliseconds: options.delayRenderTimeoutInMilliseconds ?? 30000,
-    logLevel: options.logLevel ?? "info",
+    logLevel: options.logLevel ?? window.remotion_logLevel ?? "info",
     schema: options.schema ?? undefined,
     mediaCacheSizeInBytes: options.mediaCacheSizeInBytes ?? null,
     codec,
@@ -1779,13 +2170,14 @@ var renderMediaOnWeb = (options) => {
     transparent: options.transparent ?? false,
     onArtifact: options.onArtifact ?? null,
     onFrame: options.onFrame ?? null,
-    outputTarget: options.outputTarget ?? null
+    outputTarget: options.outputTarget ?? null,
+    licenseKey: options.licenseKey ?? undefined
   }));
   return onlyOneRenderAtATimeQueue.ref;
 };
 // src/render-still-on-web.tsx
 import {
-  Internals as Internals5
+  Internals as Internals7
 } from "remotion";
 async function internalRenderStillOnWeb({
   frame,
@@ -1797,9 +2189,10 @@ async function internalRenderStillOnWeb({
   mediaCacheSizeInBytes,
   composition,
   signal,
-  onArtifact
+  onArtifact,
+  licenseKey
 }) {
-  const resolved = await Internals5.resolveVideoConfig({
+  const resolved = await Internals7.resolveVideoConfig({
     calculateMetadata: composition.calculateMetadata ?? null,
     signal: signal ?? new AbortController().signal,
     defaultProps: composition.defaultProps ?? {},
@@ -1849,13 +2242,28 @@ async function internalRenderStillOnWeb({
       div,
       width: resolved.width,
       height: resolved.height,
-      imageFormat
+      imageFormat,
+      logLevel
     });
     const assets = collectAssets.current.collectAssets();
     if (onArtifact) {
       await artifactsHandler.handle({ imageData, frame, assets, onArtifact });
     }
+    sendUsageEvent({
+      licenseKey: licenseKey ?? null,
+      succeeded: true,
+      apiName: "renderStillOnWeb"
+    });
     return imageData;
+  } catch (err) {
+    sendUsageEvent({
+      succeeded: false,
+      licenseKey: licenseKey ?? null,
+      apiName: "renderStillOnWeb"
+    }).catch((err2) => {
+      Internals7.Log.error({ logLevel: "error", tag: "web-renderer" }, "Failed to send usage event", err2);
+    });
+    throw err;
   } finally {
     cleanupScaffold();
   }
@@ -1864,11 +2272,12 @@ var renderStillOnWeb = (options) => {
   onlyOneRenderAtATimeQueue.ref = onlyOneRenderAtATimeQueue.ref.catch(() => Promise.resolve()).then(() => internalRenderStillOnWeb({
     ...options,
     delayRenderTimeoutInMilliseconds: options.delayRenderTimeoutInMilliseconds ?? 30000,
-    logLevel: options.logLevel ?? "info",
+    logLevel: options.logLevel ?? window.remotion_logLevel ?? "info",
     schema: options.schema ?? undefined,
     mediaCacheSizeInBytes: options.mediaCacheSizeInBytes ?? null,
     signal: options.signal ?? null,
-    onArtifact: options.onArtifact ?? null
+    onArtifact: options.onArtifact ?? null,
+    licenseKey: options.licenseKey ?? undefined
   }));
   return onlyOneRenderAtATimeQueue.ref;
 };