@remotion/web-renderer 4.0.427 → 4.0.429

package/README.md

@@ -1,18 +1,18 @@
 # @remotion/web-renderer
- 
+
 Render videos in the browser (not yet released)
- 
+
 [![NPM Downloads](https://img.shields.io/npm/dm/@remotion/web-renderer.svg?style=flat&color=black&label=Downloads)](https://npmcharts.com/compare/@remotion/web-renderer?minimal=true)
- 
+
 ## Installation
- 
+
 ```bash
 npm install @remotion/web-renderer --save-exact
 ```
- 
+
 When installing a Remotion package, make sure to align the version of all `remotion` and `@remotion/*` packages to the same version.
 Remove the `^` character from the version number to use the exact version.
- 
+
 ## Usage
- 
+
 See the [documentation](https://www.remotion.dev/docs/web-renderer/) for more information.

package/dist/esm/index.mjs

@@ -984,7 +984,7 @@ var sendUsageEvent = async ({
   }
   await LicensingInternals.internalRegisterUsageEvent({
     licenseKey: licenseKey === "free-license" ? null : licenseKey,
-    event: "webcodec-conversion",
+    event: "web-render",
     host,
     succeeded,
     isStill,
@@ -3325,6 +3325,7 @@ var drawText = ({
       fontFamily,
       fontSize,
       fontWeight,
+      fontStyle,
       direction,
       writingMode,
       letterSpacing,
@@ -3342,7 +3343,7 @@ var drawText = ({
     }
     contextToDraw.save();
     const fontSizePx = parseFloat(fontSize);
-    contextToDraw.font = `${fontWeight} ${fontSizePx}px ${fontFamily}`;
+    contextToDraw.font = `${fontStyle} ${fontWeight} ${fontSizePx}px ${fontFamily}`;
     contextToDraw.fillStyle = onlyBackgroundClipText ? "black" : webkitTextFillColor;
     contextToDraw.letterSpacing = letterSpacing;
     const isRTL = direction === "rtl";

package/package.json

@@ -3,11 +3,11 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/web-renderer"
 	},
 	"name": "@remotion/web-renderer",
-	"version": "4.0.427",
+	"version": "4.0.429",
 	"main": "dist/index.js",
 	"type": "module",
 	"scripts": {
-		"formatting": "prettier src --check",
+		"formatting": "oxfmt src --check",
 		"lint": "eslint src",
 		"make": "tsgo && bun --env-file=../.env.bundle bundle.ts",
 		"watch": "tsgo -w",
@@ -18,16 +18,16 @@
 	"author": "Remotion <jonny@remotion.dev>",
 	"license": "UNLICENSED",
 	"dependencies": {
-		"@remotion/licensing": "4.0.427",
-		"remotion": "4.0.427",
-		"mediabunny": "1.34.4"
+		"@remotion/licensing": "4.0.429",
+		"remotion": "4.0.429",
+		"mediabunny": "1.34.5"
 	},
 	"devDependencies": {
 		"@react-three/fiber": "9.2.0",
-		"@remotion/eslint-config-internal": "4.0.427",
-		"@remotion/player": "4.0.427",
-		"@remotion/media": "4.0.427",
-		"@remotion/three": "4.0.427",
+		"@remotion/eslint-config-internal": "4.0.429",
+		"@remotion/player": "4.0.429",
+		"@remotion/media": "4.0.429",
+		"@remotion/three": "4.0.429",
 		"@types/three": "0.170.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1",
 		"@vitejs/plugin-react": "4.3.4",

package/dist/add-sample.js

@@ -1,20 +0,0 @@
-import { AudioSample, VideoSample } from 'mediabunny';
-export const addVideoSampleAndCloseFrame = async (frameToEncode, videoSampleSource) => {
-    const sample = new VideoSample(frameToEncode);
-    try {
-        await videoSampleSource.add(sample);
-    }
-    finally {
-        sample.close();
-        frameToEncode.close();
-    }
-};
-export const addAudioSample = async (audio, audioSampleSource) => {
-    const sample = new AudioSample(audio);
-    try {
-        await audioSampleSource.add(sample);
-    }
-    finally {
-        sample.close();
-    }
-};

package/dist/artifact.js

@@ -1,56 +0,0 @@
-import { NoReactInternals } from 'remotion/no-react';
-export const onlyArtifact = async ({ assets, frameBuffer, }) => {
-    const artifacts = assets.filter((asset) => asset.type === 'artifact');
-    let frameBufferUint8 = null;
-    const result = [];
-    for (const artifact of artifacts) {
-        if (artifact.contentType === 'binary' || artifact.contentType === 'text') {
-            result.push({
-                frame: artifact.frame,
-                content: artifact.content,
-                filename: artifact.filename,
-                downloadBehavior: artifact.downloadBehavior,
-            });
-            continue;
-        }
-        if (artifact.contentType === 'thumbnail') {
-            if (frameBuffer === null) {
-                // A thumbnail artifact was defined to be emitted, but the output was not a video.
-                // Also, in Lambda, there are extra frames which are not video frames.
-                // This could happen if a thumbnail is unconditionally emitted.
-                continue;
-            }
-            const ab = frameBuffer instanceof Blob
-                ? await frameBuffer.arrayBuffer()
-                : new Uint8Array(await (await frameBuffer.convertToBlob({ type: 'image/png' })).arrayBuffer());
-            frameBufferUint8 = new Uint8Array(ab);
-            result.push({
-                frame: artifact.frame,
-                content: frameBufferUint8,
-                filename: artifact.filename,
-                downloadBehavior: artifact.downloadBehavior,
-            });
-            continue;
-        }
-        throw new Error('Unknown artifact type: ' + artifact);
-    }
-    return result.filter(NoReactInternals.truthy);
-};
-export const handleArtifacts = () => {
-    const previousArtifacts = [];
-    const handle = async ({ imageData, frame, assets: artifactAssets, onArtifact, }) => {
-        const artifacts = await onlyArtifact({
-            assets: artifactAssets,
-            frameBuffer: imageData,
-        });
-        for (const artifact of artifacts) {
-            const previousArtifact = previousArtifacts.find((a) => a.filename === artifact.filename);
-            if (previousArtifact) {
-                throw new Error(`An artifact with output "${artifact.filename}" was already registered at frame ${previousArtifact.frame}, but now registered again at frame ${frame}. Artifacts must have unique names. https://remotion.dev/docs/artifacts`);
-            }
-            onArtifact(artifact);
-            previousArtifacts.push({ frame, filename: artifact.filename });
-        }
-    };
-    return { handle };
-};

package/dist/audio.js

@@ -1,42 +0,0 @@
-const TARGET_NUMBER_OF_CHANNELS = 2;
-const TARGET_SAMPLE_RATE = 48000;
-function mixAudio(waves, length) {
-    if (waves.length === 1 && waves[0].length === length) {
-        return waves[0];
-    }
-    const mixed = new Int16Array(length);
-    if (waves.length === 1) {
-        mixed.set(waves[0].subarray(0, length));
-        return mixed;
-    }
-    for (let i = 0; i < length; i++) {
-        const sum = waves.reduce((acc, wave) => {
-            var _a;
-            return acc + ((_a = wave[i]) !== null && _a !== void 0 ? _a : 0);
-        }, 0);
-        // Clamp to Int16 range
-        mixed[i] = Math.max(-32768, Math.min(32767, sum));
-    }
-    return mixed;
-}
-export const onlyInlineAudio = ({ assets, fps, frame, }) => {
-    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);
-    for (const asset of inlineAudio) {
-        if (asset.toneFrequency !== 1) {
-            throw new Error('Setting the toneFrequency is not supported yet in web rendering.');
-        }
-    }
-    const mixedAudio = mixAudio(inlineAudio.map((asset) => asset.audio), expectedLength);
-    return new AudioData({
-        data: mixedAudio,
-        format: 's16',
-        numberOfChannels: TARGET_NUMBER_OF_CHANNELS,
-        numberOfFrames: expectedLength / TARGET_NUMBER_OF_CHANNELS,
-        sampleRate: TARGET_SAMPLE_RATE,
-        timestamp: (frame / fps) * 1000000,
-    });
-};

package/dist/can-use-webfs-target.js

@@ -1,19 +0,0 @@
-export const canUseWebFsWriter = async () => {
-    if (!('storage' in navigator)) {
-        return false;
-    }
-    if (!('getDirectory' in navigator.storage)) {
-        return false;
-    }
-    try {
-        const directoryHandle = await navigator.storage.getDirectory();
-        const fileHandle = await directoryHandle.getFileHandle('remotion-probe-web-fs-support', {
-            create: true,
-        });
-        const canUse = fileHandle.createWritable !== undefined;
-        return canUse;
-    }
-    catch (_a) {
-        return false;
-    }
-};

package/dist/compose.js

@@ -1,85 +0,0 @@
-import { drawDomElement } from './drawing/draw-dom-element';
-import { processNode } from './drawing/process-node';
-import { handleTextNode } from './drawing/text/handle-text-node';
-import { createTreeWalkerCleanupAfterChildren } from './tree-walker-cleanup-after-children';
-import { skipToNextNonDescendant } from './walk-tree';
-const walkOverNode = ({ node, context, logLevel, parentRect, internalState, rootElement, onlyBackgroundClip, }) => {
-    if (node instanceof HTMLElement || node instanceof SVGElement) {
-        return processNode({
-            element: node,
-            context,
-            draw: drawDomElement(node),
-            logLevel,
-            parentRect,
-            internalState,
-            rootElement,
-        });
-    }
-    if (node instanceof Text) {
-        return handleTextNode({
-            node,
-            context,
-            logLevel,
-            parentRect,
-            internalState,
-            rootElement,
-            onlyBackgroundClip,
-        });
-    }
-    throw new Error('Unknown node type');
-};
-const getFilterFunction = (node) => {
-    if (!(node instanceof Element)) {
-        // Must be a text node!
-        return NodeFilter.FILTER_ACCEPT;
-    }
-    // SVG does have children, but we process SVG elements in its
-    // entirety
-    if (node.parentElement instanceof SVGSVGElement) {
-        return NodeFilter.FILTER_REJECT;
-    }
-    const computedStyle = getComputedStyle(node);
-    if (computedStyle.display === 'none') {
-        return NodeFilter.FILTER_REJECT;
-    }
-    return NodeFilter.FILTER_ACCEPT;
-};
-export const compose = async ({ element, context, logLevel, parentRect, internalState, onlyBackgroundClip, }) => {
-    const treeWalker = document.createTreeWalker(element, onlyBackgroundClip
-        ? NodeFilter.SHOW_TEXT
-        : NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_TEXT, getFilterFunction);
-    // Skip to the first text node
-    if (onlyBackgroundClip) {
-        treeWalker.nextNode();
-        if (!treeWalker.currentNode) {
-            return;
-        }
-    }
-    const { checkCleanUpAtBeginningOfIteration, addCleanup, cleanupInTheEndOfTheIteration, } = createTreeWalkerCleanupAfterChildren(treeWalker);
-    while (true) {
-        checkCleanUpAtBeginningOfIteration();
-        const val = await walkOverNode({
-            node: treeWalker.currentNode,
-            context,
-            logLevel,
-            parentRect,
-            internalState,
-            rootElement: element,
-            onlyBackgroundClip,
-        });
-        if (val.type === 'skip-children') {
-            if (!skipToNextNonDescendant(treeWalker)) {
-                break;
-            }
-        }
-        else {
-            if (val.cleanupAfterChildren) {
-                addCleanup(treeWalker.currentNode, val.cleanupAfterChildren);
-            }
-            if (!treeWalker.nextNode()) {
-                break;
-            }
-        }
-    }
-    cleanupInTheEndOfTheIteration();
-};

package/dist/create-scaffold.js

@@ -1,104 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { createRef } from 'react';
-import { flushSync } from 'react-dom';
-import ReactDOM from 'react-dom/client';
-import { Internals } from 'remotion';
-import { UpdateTime } from './update-time';
-import { withResolvers } from './with-resolvers';
-export async function createScaffold({ width, height, delayRenderTimeoutInMilliseconds, logLevel, resolvedProps, id, mediaCacheSizeInBytes, durationInFrames, fps, initialFrame, schema, Component, audioEnabled, videoEnabled, defaultCodec, defaultOutName, }) {
-    if (!ReactDOM.createRoot) {
-        throw new Error('@remotion/web-renderer requires React 18 or higher');
-    }
-    const div = document.createElement('div');
-    // Match same behavior as in portal-node.ts
-    div.style.position = 'fixed';
-    div.style.display = 'flex';
-    div.style.flexDirection = 'column';
-    div.style.backgroundColor = 'transparent';
-    div.style.width = `${width}px`;
-    div.style.height = `${height}px`;
-    div.style.zIndex = '-9999';
-    div.style.top = '0';
-    div.style.left = '0';
-    div.style.right = '0';
-    div.style.bottom = '0';
-    div.style.visibility = 'hidden';
-    div.style.pointerEvents = 'none';
-    const scaffoldClassName = `remotion-scaffold-${Math.random().toString(36).substring(2, 15)}`;
-    div.className = scaffoldClassName;
-    const cleanupCSS = Internals.CSSUtils.injectCSS(Internals.CSSUtils.makeDefaultPreviewCSS(`.${scaffoldClassName}`, 'white'));
-    document.body.appendChild(div);
-    const { promise, resolve, reject } = withResolvers();
-    // TODO: This might not work in React 18
-    const root = ReactDOM.createRoot(div, {
-        onUncaughtError: (err) => {
-            reject(err);
-        },
-    });
-    const delayRenderScope = {
-        remotion_renderReady: true,
-        remotion_delayRenderTimeouts: {},
-        remotion_puppeteerTimeout: delayRenderTimeoutInMilliseconds,
-        remotion_attempt: 0,
-        remotion_delayRenderHandles: [],
-    };
-    const timeUpdater = createRef();
-    const collectAssets = createRef();
-    flushSync(() => {
-        root.render(_jsx(Internals.MaxMediaCacheSizeContext.Provider, { value: mediaCacheSizeInBytes, children: _jsx(Internals.RemotionEnvironmentContext.Provider, { value: {
-                    isStudio: false,
-                    isRendering: true,
-                    isPlayer: false,
-                    isReadOnlyStudio: false,
-                    isClientSideRendering: true,
-                }, children: _jsx(Internals.DelayRenderContextType.Provider, { value: delayRenderScope, children: _jsx(Internals.CompositionManager.Provider, { value: {
-                            compositions: [
-                                {
-                                    id,
-                                    // @ts-expect-error
-                                    component: Component,
-                                    nonce: 0,
-                                    defaultProps: {},
-                                    folderName: null,
-                                    parentFolderName: null,
-                                    schema: schema !== null && schema !== void 0 ? schema : null,
-                                    calculateMetadata: null,
-                                    durationInFrames,
-                                    fps,
-                                    height,
-                                    width,
-                                },
-                            ],
-                            canvasContent: {
-                                type: 'composition',
-                                compositionId: id,
-                            },
-                            currentCompositionMetadata: {
-                                props: resolvedProps,
-                                durationInFrames,
-                                fps,
-                                height,
-                                width,
-                                defaultCodec: defaultCodec !== null && defaultCodec !== void 0 ? defaultCodec : null,
-                                defaultOutName: defaultOutName !== null && defaultOutName !== void 0 ? defaultOutName : null,
-                                defaultVideoImageFormat: null,
-                                defaultPixelFormat: null,
-                                defaultProResProfile: null,
-                            },
-                            folders: [],
-                        }, children: _jsx(Internals.RenderAssetManagerProvider, { collectAssets: collectAssets, children: _jsx(UpdateTime, { audioEnabled: audioEnabled, videoEnabled: videoEnabled, logLevel: logLevel, compId: id, initialFrame: initialFrame, timeUpdater: timeUpdater, children: _jsx(Internals.CanUseRemotionHooks.Provider, { value: true, children: _jsx(Component, { ...resolvedProps }) }) }) }) }) }) }) }));
-    });
-    resolve();
-    await promise;
-    return {
-        delayRenderScope,
-        div,
-        cleanupScaffold: () => {
-            root.unmount();
-            div.remove();
-            cleanupCSS();
-        },
-        timeUpdater,
-        collectAssets,
-    };
-}

package/dist/drawing/border-radius.js

@@ -1,151 +0,0 @@
-import { drawRoundedRectPath } from './draw-rounded';
-import { getBoxBasedOnBackgroundClip } from './get-padding-box';
-function parseValue({ value, reference, }) {
-    value = value.trim();
-    if (value.endsWith('%')) {
-        const percentage = parseFloat(value);
-        return (percentage / 100) * reference;
-    }
-    if (value.endsWith('px')) {
-        return parseFloat(value);
-    }
-    // If no unit, assume pixels
-    return parseFloat(value);
-}
-function expandShorthand(values) {
-    if (values.length === 1) {
-        // All corners the same
-        return [values[0], values[0], values[0], values[0]];
-    }
-    if (values.length === 2) {
-        // [0] = top-left & bottom-right, [1] = top-right & bottom-left
-        return [values[0], values[1], values[0], values[1]];
-    }
-    if (values.length === 3) {
-        // [0] = top-left, [1] = top-right & bottom-left, [2] = bottom-right
-        return [values[0], values[1], values[2], values[1]];
-    }
-    // 4 values: top-left, top-right, bottom-right, bottom-left
-    return [values[0], values[1], values[2], values[3]];
-}
-function clampBorderRadius({ borderRadius, width, height, }) {
-    // According to CSS spec, if the sum of border radii on adjacent corners
-    // exceeds the length of the edge, they should be proportionally reduced
-    const clamped = {
-        topLeft: { ...borderRadius.topLeft },
-        topRight: { ...borderRadius.topRight },
-        bottomRight: { ...borderRadius.bottomRight },
-        bottomLeft: { ...borderRadius.bottomLeft },
-    };
-    // Check top edge
-    const topSum = clamped.topLeft.horizontal + clamped.topRight.horizontal;
-    if (topSum > width) {
-        const factor = width / topSum;
-        clamped.topLeft.horizontal *= factor;
-        clamped.topRight.horizontal *= factor;
-    }
-    // Check right edge
-    const rightSum = clamped.topRight.vertical + clamped.bottomRight.vertical;
-    if (rightSum > height) {
-        const factor = height / rightSum;
-        clamped.topRight.vertical *= factor;
-        clamped.bottomRight.vertical *= factor;
-    }
-    // Check bottom edge
-    const bottomSum = clamped.bottomRight.horizontal + clamped.bottomLeft.horizontal;
-    if (bottomSum > width) {
-        const factor = width / bottomSum;
-        clamped.bottomRight.horizontal *= factor;
-        clamped.bottomLeft.horizontal *= factor;
-    }
-    // Check left edge
-    const leftSum = clamped.bottomLeft.vertical + clamped.topLeft.vertical;
-    if (leftSum > height) {
-        const factor = height / leftSum;
-        clamped.bottomLeft.vertical *= factor;
-        clamped.topLeft.vertical *= factor;
-    }
-    return clamped;
-}
-export function parseBorderRadius({ borderRadius, width, height, }) {
-    // Split by '/' to separate horizontal and vertical radii
-    const parts = borderRadius.split('/').map((part) => part.trim());
-    const horizontalPart = parts[0];
-    const verticalPart = parts[1];
-    // Split each part into individual values
-    const horizontalValues = horizontalPart.split(/\s+/).filter((v) => v);
-    const verticalValues = verticalPart
-        ? verticalPart.split(/\s+/).filter((v) => v)
-        : horizontalValues; // If no '/', use horizontal values for vertical
-    // Expand shorthand to 4 values
-    const [hTopLeft, hTopRight, hBottomRight, hBottomLeft] = expandShorthand(horizontalValues);
-    const [vTopLeft, vTopRight, vBottomRight, vBottomLeft] = expandShorthand(verticalValues);
-    return clampBorderRadius({
-        borderRadius: {
-            topLeft: {
-                horizontal: parseValue({ value: hTopLeft, reference: width }),
-                vertical: parseValue({ value: vTopLeft, reference: height }),
-            },
-            topRight: {
-                horizontal: parseValue({ value: hTopRight, reference: width }),
-                vertical: parseValue({ value: vTopRight, reference: height }),
-            },
-            bottomRight: {
-                horizontal: parseValue({ value: hBottomRight, reference: width }),
-                vertical: parseValue({ value: vBottomRight, reference: height }),
-            },
-            bottomLeft: {
-                horizontal: parseValue({ value: hBottomLeft, reference: width }),
-                vertical: parseValue({ value: vBottomLeft, reference: height }),
-            },
-        },
-        width,
-        height,
-    });
-}
-export function setBorderRadius({ ctx, rect, borderRadius, forceClipEvenWhenZero = false, computedStyle, backgroundClip, }) {
-    if (borderRadius.topLeft.horizontal === 0 &&
-        borderRadius.topLeft.vertical === 0 &&
-        borderRadius.topRight.horizontal === 0 &&
-        borderRadius.topRight.vertical === 0 &&
-        borderRadius.bottomRight.horizontal === 0 &&
-        borderRadius.bottomRight.vertical === 0 &&
-        borderRadius.bottomLeft.horizontal === 0 &&
-        borderRadius.bottomLeft.vertical === 0 &&
-        !forceClipEvenWhenZero) {
-        return () => { };
-    }
-    ctx.save();
-    const boundingRect = getBoxBasedOnBackgroundClip(rect, computedStyle, backgroundClip);
-    // See background-clip tests for why this logic matters!
-    const actualBorderRadius = {
-        topLeft: {
-            horizontal: Math.max(0, borderRadius.topLeft.horizontal - (boundingRect.left - rect.left)),
-            vertical: Math.max(0, borderRadius.topLeft.vertical - (boundingRect.top - rect.top)),
-        },
-        topRight: {
-            horizontal: Math.max(0, borderRadius.topRight.horizontal - (rect.right - boundingRect.right)),
-            vertical: Math.max(0, borderRadius.topRight.vertical - (boundingRect.top - rect.top)),
-        },
-        bottomRight: {
-            horizontal: Math.max(0, borderRadius.bottomRight.horizontal - (rect.right - boundingRect.right)),
-            vertical: Math.max(0, borderRadius.bottomRight.vertical - (rect.bottom - boundingRect.bottom)),
-        },
-        bottomLeft: {
-            horizontal: Math.max(0, borderRadius.bottomLeft.horizontal - (boundingRect.left - rect.left)),
-            vertical: Math.max(0, borderRadius.bottomLeft.vertical - (rect.bottom - boundingRect.bottom)),
-        },
-    };
-    drawRoundedRectPath({
-        ctx,
-        x: boundingRect.left,
-        y: boundingRect.top,
-        width: boundingRect.width,
-        height: boundingRect.height,
-        borderRadius: actualBorderRadius,
-    });
-    ctx.clip();
-    return () => {
-        ctx.restore();
-    };
-}