@remotion/web-renderer 4.0.431 → 4.0.433

package/dist/drawing/text/get-collapsed-text.js

@@ -1,46 +0,0 @@
-export const getCollapsedText = (span) => {
-    const textNode = span.firstChild;
-    if (!textNode || textNode.nodeType !== Node.TEXT_NODE) {
-        throw new Error('Span must contain a single text node');
-    }
-    const originalText = textNode.textContent || '';
-    let collapsedText = originalText;
-    // Helper to measure width
-    const measureWidth = (text) => {
-        textNode.textContent = text;
-        return span.getBoundingClientRect().width;
-    };
-    const originalWidth = measureWidth(originalText);
-    // Test leading whitespace
-    if (/^\s/.test(collapsedText)) {
-        const trimmedLeading = collapsedText.replace(/^\s+/, '');
-        const newWidth = measureWidth(trimmedLeading);
-        if (newWidth === originalWidth) {
-            // Whitespace was collapsed by the browser
-            collapsedText = trimmedLeading;
-        }
-    }
-    // Test trailing whitespace (on current collapsed text)
-    if (/\s$/.test(collapsedText)) {
-        const currentWidth = measureWidth(collapsedText);
-        const trimmedTrailing = collapsedText.replace(/\s+$/, '');
-        const newWidth = measureWidth(trimmedTrailing);
-        if (newWidth === currentWidth) {
-            // Whitespace was collapsed by the browser
-            collapsedText = trimmedTrailing;
-        }
-    }
-    // Test internal duplicate whitespace (on current collapsed text)
-    if (/\s\s/.test(collapsedText)) {
-        const currentWidth = measureWidth(collapsedText);
-        const collapsedInternal = collapsedText.replace(/\s\s+/g, ' ');
-        const newWidth = measureWidth(collapsedInternal);
-        if (newWidth === currentWidth) {
-            // Whitespace was collapsed by the browser
-            collapsedText = collapsedInternal;
-        }
-    }
-    // Restore original text
-    textNode.textContent = originalText;
-    return collapsedText;
-};

package/dist/drawing/text/handle-text-node.js

@@ -1,24 +0,0 @@
-import { processNode } from '../process-node';
-import { drawText } from './draw-text';
-export const handleTextNode = async ({ node, context, logLevel, parentRect, internalState, rootElement, onlyBackgroundClip, }) => {
-    const span = document.createElement('span');
-    const parent = node.parentNode;
-    if (!parent) {
-        throw new Error('Text node has no parent');
-    }
-    parent.insertBefore(span, node);
-    span.appendChild(node);
-    const value = await processNode({
-        context,
-        element: span,
-        draw: drawText({ span, logLevel, onlyBackgroundClip }),
-        logLevel,
-        parentRect,
-        internalState,
-        rootElement,
-    });
-    // Undo the layout manipulation
-    parent.insertBefore(node, span);
-    parent.removeChild(span);
-    return value;
-};

package/dist/drawing/transform-in-3d.js

@@ -1,177 +0,0 @@
-// Vertex shader - now includes texture coordinates
-const vsSource = `
-		attribute vec2 aPosition;
-		attribute vec2 aTexCoord;
-		uniform mat4 uTransform;
-		uniform mat4 uProjection;
-		varying vec2 vTexCoord;
-
-		void main() {
-				gl_Position = uProjection * uTransform * vec4(aPosition, 0.0, 1.0);
-				vTexCoord = aTexCoord;
-		}
-`;
-// Fragment shader - samples from texture and unpremultiplies alpha
-const fsSource = `
-		precision mediump float;
-		uniform sampler2D uTexture;
-		varying vec2 vTexCoord;
-
-		void main() {
-				gl_FragColor = texture2D(uTexture, vTexCoord);
-		}
-`;
-function compileShader(shaderGl, source, type) {
-    const shader = shaderGl.createShader(type);
-    if (!shader) {
-        throw new Error('Could not create shader');
-    }
-    shaderGl.shaderSource(shader, source);
-    shaderGl.compileShader(shader);
-    if (!shaderGl.getShaderParameter(shader, shaderGl.COMPILE_STATUS)) {
-        const log = shaderGl.getShaderInfoLog(shader);
-        shaderGl.deleteShader(shader);
-        throw new Error('Shader compile error: ' + log);
-    }
-    return shader;
-}
-const createHelperCanvas = ({ canvasWidth, canvasHeight, helperCanvasState, }) => {
-    var _a;
-    if (helperCanvasState.current) {
-        // Resize canvas if dimensions changed
-        if (helperCanvasState.current.canvas.width !== canvasWidth ||
-            helperCanvasState.current.canvas.height !== canvasHeight) {
-            helperCanvasState.current.canvas.width = canvasWidth;
-            helperCanvasState.current.canvas.height = canvasHeight;
-        }
-        // Always reset viewport and clear when reusing
-        helperCanvasState.current.gl.viewport(0, 0, canvasWidth, canvasHeight);
-        helperCanvasState.current.gl.clearColor(0, 0, 0, 0);
-        helperCanvasState.current.gl.clear(helperCanvasState.current.gl.COLOR_BUFFER_BIT);
-        return helperCanvasState.current;
-    }
-    const canvas = new OffscreenCanvas(canvasWidth, canvasHeight);
-    const gl = (_a = canvas.getContext('webgl', {
-        premultipliedAlpha: true,
-    })) !== null && _a !== void 0 ? _a : undefined;
-    if (!gl) {
-        throw new Error('WebGL not supported');
-    }
-    // Compile shaders and create program once
-    const vertexShader = compileShader(gl, vsSource, gl.VERTEX_SHADER);
-    const fragmentShader = compileShader(gl, fsSource, gl.FRAGMENT_SHADER);
-    const program = gl.createProgram();
-    if (!program) {
-        throw new Error('Could not create program');
-    }
-    gl.attachShader(program, vertexShader);
-    gl.attachShader(program, fragmentShader);
-    gl.linkProgram(program);
-    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
-        throw new Error('Program link error: ' + gl.getProgramInfoLog(program));
-    }
-    // Get attribute and uniform locations once
-    const locations = {
-        aPosition: gl.getAttribLocation(program, 'aPosition'),
-        aTexCoord: gl.getAttribLocation(program, 'aTexCoord'),
-        uTransform: gl.getUniformLocation(program, 'uTransform'),
-        uProjection: gl.getUniformLocation(program, 'uProjection'),
-        uTexture: gl.getUniformLocation(program, 'uTexture'),
-    };
-    // Shaders can be deleted after linking
-    gl.deleteShader(vertexShader);
-    gl.deleteShader(fragmentShader);
-    const cleanup = () => {
-        gl.deleteProgram(program);
-        const loseContext = gl.getExtension('WEBGL_lose_context');
-        if (loseContext) {
-            loseContext.loseContext();
-        }
-    };
-    helperCanvasState.current = { canvas, gl, program, locations, cleanup };
-    return helperCanvasState.current;
-};
-export const transformIn3d = ({ matrix, sourceCanvas, untransformedRect, rectAfterTransforms, internalState, }) => {
-    const { canvas, gl, program, locations } = createHelperCanvas({
-        canvasWidth: rectAfterTransforms.width,
-        canvasHeight: rectAfterTransforms.height,
-        helperCanvasState: internalState.helperCanvasState,
-    });
-    // Use the cached program
-    gl.useProgram(program);
-    // Setup viewport and clear (already done in createHelperCanvas, but ensure it's set)
-    gl.viewport(0, 0, rectAfterTransforms.width, rectAfterTransforms.height);
-    gl.clearColor(0, 0, 0, 0);
-    gl.clear(gl.COLOR_BUFFER_BIT);
-    // Enable blending
-    gl.enable(gl.BLEND);
-    gl.blendFunc(gl.ONE, gl.ONE_MINUS_SRC_ALPHA);
-    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, true);
-    // Create vertex buffer
-    const vertexBuffer = gl.createBuffer();
-    gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
-    // prettier-ignore
-    const vertices = new Float32Array([
-        untransformedRect.x, untransformedRect.y, 0, 0,
-        untransformedRect.x + untransformedRect.width, untransformedRect.y, 1, 0,
-        untransformedRect.x, untransformedRect.y + untransformedRect.height, 0, 1,
-        untransformedRect.x, untransformedRect.y + untransformedRect.height, 0, 1,
-        untransformedRect.x + untransformedRect.width, untransformedRect.y, 1, 0,
-        untransformedRect.x + untransformedRect.width, untransformedRect.y + untransformedRect.height, 1, 1,
-    ]);
-    gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
-    // Setup attributes using cached locations
-    gl.enableVertexAttribArray(locations.aPosition);
-    gl.vertexAttribPointer(locations.aPosition, 2, gl.FLOAT, false, 4 * 4, 0);
-    gl.enableVertexAttribArray(locations.aTexCoord);
-    gl.vertexAttribPointer(locations.aTexCoord, 2, gl.FLOAT, false, 4 * 4, 2 * 4);
-    // Create and configure texture
-    const texture = gl.createTexture();
-    gl.bindTexture(gl.TEXTURE_2D, texture);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
-    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
-    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, sourceCanvas);
-    // Set uniforms using cached locations
-    const transformMatrix = matrix.toFloat32Array();
-    const zScale = 1000000000;
-    // Projection matrix accounts for the output canvas dimensions
-    const projectionMatrix = new Float32Array([
-        2 / rectAfterTransforms.width,
-        0,
-        0,
-        0,
-        0,
-        -2 / rectAfterTransforms.height,
-        0,
-        0,
-        0,
-        0,
-        -2 / zScale,
-        0,
-        -1 + (2 * -rectAfterTransforms.x) / rectAfterTransforms.width,
-        1 - (2 * -rectAfterTransforms.y) / rectAfterTransforms.height,
-        0,
-        1,
-    ]);
-    gl.uniformMatrix4fv(locations.uTransform, false, transformMatrix);
-    gl.uniformMatrix4fv(locations.uProjection, false, projectionMatrix);
-    gl.uniform1i(locations.uTexture, 0);
-    // Draw
-    gl.drawArrays(gl.TRIANGLES, 0, 6);
-    // Clean up per-frame resources only
-    gl.disableVertexAttribArray(locations.aPosition);
-    gl.disableVertexAttribArray(locations.aTexCoord);
-    gl.deleteTexture(texture);
-    gl.deleteBuffer(vertexBuffer);
-    gl.bindTexture(gl.TEXTURE_2D, null);
-    gl.bindBuffer(gl.ARRAY_BUFFER, null);
-    // Reset state
-    gl.disable(gl.BLEND);
-    gl.pixelStorei(gl.UNPACK_PREMULTIPLY_ALPHA_WEBGL, false);
-    return {
-        canvas,
-        rect: rectAfterTransforms,
-    };
-};

package/dist/drawing/transform-rect-with-matrix.js

@@ -1,19 +0,0 @@
-export function transformDOMRect({ rect, matrix, }) {
-    // Get all four corners of the rectangle
-    const topLeft = new DOMPointReadOnly(rect.left, rect.top);
-    const topRight = new DOMPointReadOnly(rect.right, rect.top);
-    const bottomLeft = new DOMPointReadOnly(rect.left, rect.bottom);
-    const bottomRight = new DOMPointReadOnly(rect.right, rect.bottom);
-    // Transform all corners
-    const transformedTopLeft = topLeft.matrixTransform(matrix);
-    const transformedTopRight = topRight.matrixTransform(matrix);
-    const transformedBottomLeft = bottomLeft.matrixTransform(matrix);
-    const transformedBottomRight = bottomRight.matrixTransform(matrix);
-    // Find the bounding box of the transformed points
-    const minX = Math.min(transformedTopLeft.x / transformedTopLeft.w, transformedTopRight.x / transformedTopRight.w, transformedBottomLeft.x / transformedBottomLeft.w, transformedBottomRight.x / transformedBottomRight.w);
-    const maxX = Math.max(transformedTopLeft.x / transformedTopLeft.w, transformedTopRight.x / transformedTopRight.w, transformedBottomLeft.x / transformedBottomLeft.w, transformedBottomRight.x / transformedBottomRight.w);
-    const minY = Math.min(transformedTopLeft.y / transformedTopLeft.w, transformedTopRight.y / transformedTopRight.w, transformedBottomLeft.y / transformedBottomLeft.w, transformedBottomRight.y / transformedBottomRight.w);
-    const maxY = Math.max(transformedTopLeft.y / transformedTopLeft.w, transformedTopRight.y / transformedTopRight.w, transformedBottomLeft.y / transformedBottomLeft.w, transformedBottomRight.y / transformedBottomRight.w);
-    // Create a new DOMRect from the bounding box
-    return new DOMRect(minX, minY, maxX - minX, maxY - minY);
-}

package/dist/drawing/transform.js

@@ -1,10 +0,0 @@
-export const setTransform = ({ ctx, transform, parentRect, }) => {
-    const offsetMatrix = new DOMMatrix()
-        .translate(-parentRect.x, -parentRect.y)
-        .multiply(transform)
-        .translate(parentRect.x, parentRect.y);
-    ctx.setTransform(offsetMatrix);
-    return () => {
-        ctx.setTransform(new DOMMatrix());
-    };
-};

package/dist/drawing/turn-svg-into-drawable.js

@@ -1,41 +0,0 @@
-export const 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 = '';
-    // Margins were already included in the positioning calculation,
-    // so we need to remove them to avoid double counting.
-    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;
-    svg.style.marginTop = originalMarginTop;
-    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)}`;
-        image.onload = function () {
-            resolve(image);
-        };
-        image.onerror = () => {
-            reject(new Error('Failed to convert SVG to image'));
-        };
-        image.src = url;
-    });
-};

package/dist/find-capturable-elements.d.ts

@@ -1,2 +0,0 @@
-import type { Composable } from './composable';
-export declare const findCapturableElements: (element: HTMLDivElement) => Composable[];

package/dist/find-capturable-elements.js

@@ -1,28 +0,0 @@
-export const findCapturableElements = (element) => {
-    const canvasAndSvgElements = element.querySelectorAll('svg,canvas,img');
-    const composables = [];
-    Array.from(canvasAndSvgElements).forEach((capturableElement) => {
-        if (capturableElement.tagName.toLocaleLowerCase() === 'canvas') {
-            const canvas = capturableElement;
-            composables.push({
-                type: 'canvas',
-                element: canvas,
-            });
-        }
-        else if (capturableElement.tagName.toLocaleLowerCase() === 'svg') {
-            const svg = capturableElement;
-            composables.push({
-                type: 'svg',
-                element: svg,
-            });
-        }
-        else if (capturableElement.tagName.toLocaleLowerCase() === 'img') {
-            const img = capturableElement;
-            composables.push({
-                type: 'img',
-                element: img,
-            });
-        }
-    });
-    return composables;
-};

package/dist/frame-range.js

@@ -1,15 +0,0 @@
-export const getRealFrameRange = (durationInFrames, frameRange) => {
-    if (frameRange === null) {
-        return [0, durationInFrames - 1];
-    }
-    if (typeof frameRange === 'number') {
-        if (frameRange < 0 || frameRange >= durationInFrames) {
-            throw new Error(`Frame number is out of range, must be between 0 and ${durationInFrames - 1} but got ${frameRange}`);
-        }
-        return [frameRange, frameRange];
-    }
-    if (frameRange[1] >= durationInFrames || frameRange[0] < 0) {
-        throw new Error(`The "durationInFrames" of the composition was evaluated to be ${durationInFrames}, but frame range ${frameRange.join('-')} is not inbetween 0-${durationInFrames - 1}`);
-    }
-    return frameRange;
-};

package/dist/get-audio-encoding-config.js

@@ -1,18 +0,0 @@
-import { canEncodeAudio, QUALITY_MEDIUM, } from 'mediabunny';
-export const getDefaultAudioEncodingConfig = async () => {
-    const preferredDefaultAudioEncodingConfig = {
-        codec: 'aac',
-        bitrate: QUALITY_MEDIUM,
-    };
-    if (await canEncodeAudio(preferredDefaultAudioEncodingConfig.codec, preferredDefaultAudioEncodingConfig)) {
-        return preferredDefaultAudioEncodingConfig;
-    }
-    const backupDefaultAudioEncodingConfig = {
-        codec: 'opus',
-        bitrate: QUALITY_MEDIUM,
-    };
-    if (await canEncodeAudio(backupDefaultAudioEncodingConfig.codec, backupDefaultAudioEncodingConfig)) {
-        return backupDefaultAudioEncodingConfig;
-    }
-    return null;
-};

package/dist/get-biggest-bounding-client-rect.js

@@ -1,43 +0,0 @@
-import { parseBoxShadow } from './drawing/draw-box-shadow';
-import { parseOutlineOffset, parseOutlineWidth } from './drawing/draw-outline';
-import { skipToNextNonDescendant } from './walk-tree';
-export const 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 computedStyle = getComputedStyle(treeWalker.currentNode);
-        const outlineWidth = parseOutlineWidth(computedStyle.outlineWidth);
-        const outlineOffset = parseOutlineOffset(computedStyle.outlineOffset);
-        const rect = treeWalker.currentNode.getBoundingClientRect();
-        // Calculate box shadow extensions
-        const shadows = parseBoxShadow(computedStyle.boxShadow);
-        let shadowLeft = 0;
-        let shadowRight = 0;
-        let shadowTop = 0;
-        let shadowBottom = 0;
-        for (const shadow of shadows) {
-            if (!shadow.inset) {
-                shadowLeft = Math.max(shadowLeft, Math.abs(Math.min(shadow.offsetX, 0)) + shadow.blurRadius);
-                shadowRight = Math.max(shadowRight, Math.max(shadow.offsetX, 0) + shadow.blurRadius);
-                shadowTop = Math.max(shadowTop, Math.abs(Math.min(shadow.offsetY, 0)) + shadow.blurRadius);
-                shadowBottom = Math.max(shadowBottom, Math.max(shadow.offsetY, 0) + shadow.blurRadius);
-            }
-        }
-        mostLeft = Math.min(mostLeft, rect.left - outlineOffset - outlineWidth - shadowLeft);
-        mostTop = Math.min(mostTop, rect.top - outlineOffset - outlineWidth - shadowTop);
-        mostRight = Math.max(mostRight, rect.right + outlineOffset + outlineWidth + shadowRight);
-        mostBottom = Math.max(mostBottom, rect.bottom + outlineOffset + outlineWidth + shadowBottom);
-        if (computedStyle.overflow === 'hidden') {
-            if (!skipToNextNonDescendant(treeWalker)) {
-                break;
-            }
-        }
-        if (!treeWalker.nextNode()) {
-            break;
-        }
-    }
-    return new DOMRect(mostLeft, mostTop, mostRight - mostLeft, mostBottom - mostTop);
-};

package/dist/index.js

@@ -1,2 +0,0 @@
-export { renderMediaOnWeb } from './render-media-on-web';
-export { renderStillOnWeb } from './render-still-on-web';

package/dist/internal-state.js

@@ -1,21 +0,0 @@
-export const makeInternalState = () => {
-    let drawnPrecomposedPixels = 0;
-    let precomposedTextures = 0;
-    const helperCanvasState = {
-        current: null,
-    };
-    return {
-        getDrawn3dPixels: () => drawnPrecomposedPixels,
-        getPrecomposedTiles: () => precomposedTextures,
-        addPrecompose: ({ canvasWidth, canvasHeight, }) => {
-            drawnPrecomposedPixels += canvasWidth * canvasHeight;
-            precomposedTextures++;
-        },
-        helperCanvasState,
-        cleanup: () => {
-            if (helperCanvasState.current) {
-                helperCanvasState.current.cleanup();
-            }
-        },
-    };
-};

package/dist/mediabunny-mappings.js

@@ -1,63 +0,0 @@
-import { Mp4OutputFormat, QUALITY_HIGH, QUALITY_LOW, QUALITY_MEDIUM, QUALITY_VERY_HIGH, QUALITY_VERY_LOW, WebMOutputFormat, } from 'mediabunny';
-export const codecToMediabunnyCodec = (codec) => {
-    switch (codec) {
-        case 'h264':
-            return 'avc';
-        case 'h265':
-            return 'hevc';
-        case 'vp8':
-            return 'vp8';
-        case 'vp9':
-            return 'vp9';
-        case 'av1':
-            return 'av1';
-        default:
-            throw new Error(`Unsupported codec: ${codec}`);
-    }
-};
-export const containerToMediabunnyContainer = (container) => {
-    switch (container) {
-        case 'mp4':
-            return new Mp4OutputFormat();
-        case 'webm':
-            return new WebMOutputFormat();
-        default:
-            throw new Error(`Unsupported container: ${container}`);
-    }
-};
-export const getDefaultVideoCodecForContainer = (container) => {
-    switch (container) {
-        case 'mp4':
-            return 'h264';
-        case 'webm':
-            return 'vp8';
-        default:
-            throw new Error(`Unsupported container: ${container}`);
-    }
-};
-export const getQualityForWebRendererQuality = (quality) => {
-    switch (quality) {
-        case 'very-low':
-            return QUALITY_VERY_LOW;
-        case 'low':
-            return QUALITY_LOW;
-        case 'medium':
-            return QUALITY_MEDIUM;
-        case 'high':
-            return QUALITY_HIGH;
-        case 'very-high':
-            return QUALITY_VERY_HIGH;
-        default:
-            throw new Error(`Unsupported quality: ${quality}`);
-    }
-};
-export const getMimeType = (container) => {
-    switch (container) {
-        case 'mp4':
-            return 'video/mp4';
-        case 'webm':
-            return 'video/webm';
-        default:
-            throw new Error(`Unsupported container: ${container}`);
-    }
-};

package/dist/output-target.js

@@ -1 +0,0 @@
-export {};

package/dist/parse-transform-origin.d.ts

@@ -1,4 +0,0 @@
-export declare const parseTransformOrigin: (transformOrigin: string) => {
-    x: number;
-    y: number;
-} | null;

package/dist/parse-transform-origin.js

@@ -1,7 +0,0 @@
-export const parseTransformOrigin = (transformOrigin) => {
-    if (transformOrigin.trim() === '') {
-        return null;
-    }
-    const [x, y] = transformOrigin.split(' ');
-    return { x: parseFloat(x), y: parseFloat(y) };
-};

package/dist/props-if-has-props.js

@@ -1 +0,0 @@
-export {};