@remotion/web-renderer 4.0.375 → 4.0.376

package/dist/artifact.d.ts

@@ -0,0 +1,24 @@
+import type { DownloadBehavior, TRenderAsset } from 'remotion';
+export type EmittedArtifact = {
+    filename: string;
+    content: string | Uint8Array;
+    frame: number;
+    downloadBehavior: DownloadBehavior | null;
+};
+export declare const onlyArtifact: ({ assets, frameBuffer, }: {
+    assets: TRenderAsset[];
+    frameBuffer: Blob | OffscreenCanvas | null;
+}) => Promise<EmittedArtifact[]>;
+export type OnArtifact = (asset: EmittedArtifact) => void;
+export type ArtifactsRef = React.RefObject<{
+    collectAssets: () => TRenderAsset[];
+} | null>;
+export declare const handleArtifacts: ({ ref, onArtifact, }: {
+    ref: ArtifactsRef;
+    onArtifact: OnArtifact | null;
+}) => {
+    handle: ({ imageData, frame, }: {
+        imageData: Blob | OffscreenCanvas | null;
+        frame: number;
+    }) => Promise<void>;
+};

package/dist/artifact.js

@@ -0,0 +1,59 @@
+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 = ({ ref, onArtifact, }) => {
+    const previousArtifacts = [];
+    const handle = async ({ imageData, frame, }) => {
+        const artifactAssets = ref.current.collectAssets();
+        if (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/calculate-transforms.d.ts

@@ -0,0 +1,9 @@
+export declare const calculateTransforms: (element: HTMLElement | SVGSVGElement) => {
+    dimensions: DOMRect;
+    totalMatrix: DOMMatrix;
+    reset: () => void;
+    nativeTransformOrigin: {
+        x: number;
+        y: number;
+    };
+};

package/dist/calculate-transforms.js

@@ -0,0 +1,61 @@
+import { parseTransformOrigin } from './parse-transform-origin';
+export const calculateTransforms = (element) => {
+    var _a, _b;
+    // Compute the cumulative transform by traversing parent nodes
+    let parent = element;
+    const transforms = [];
+    const toReset = [];
+    while (parent) {
+        const computedStyle = getComputedStyle(parent);
+        if ((computedStyle.transform && computedStyle.transform !== 'none') ||
+            parent === element) {
+            const toParse = computedStyle.transform === 'none' || computedStyle.transform === ''
+                ? undefined
+                : computedStyle.transform;
+            const matrix = new DOMMatrix(toParse);
+            const { transform } = parent.style;
+            parent.style.transform = 'none';
+            transforms.push({
+                matrix,
+                rect: parent,
+                transformOrigin: computedStyle.transformOrigin,
+                boundingClientRect: null,
+            });
+            const parentRef = parent;
+            toReset.push(() => {
+                parentRef.style.transform = transform;
+            });
+        }
+        parent = parent.parentElement;
+    }
+    for (const transform of transforms) {
+        transform.boundingClientRect = transform.rect.getBoundingClientRect();
+    }
+    const dimensions = transforms[0].boundingClientRect;
+    const nativeTransformOrigin = (_a = parseTransformOrigin(transforms[0].transformOrigin)) !== null && _a !== void 0 ? _a : { x: dimensions.width / 2, y: dimensions.height / 2 };
+    let totalMatrix = new DOMMatrix();
+    for (const transform of transforms.slice().reverse()) {
+        if (!transform.boundingClientRect) {
+            throw new Error('Bounding client rect not found');
+        }
+        const centerX = transform.boundingClientRect.width / 2;
+        const centerY = transform.boundingClientRect.height / 2;
+        const { x: originX, y: originY } = (_b = parseTransformOrigin(transform.transformOrigin)) !== null && _b !== void 0 ? _b : { x: centerX, y: centerY };
+        const deviationFromX = centerX - originX;
+        const deviationFromY = centerY - originY;
+        totalMatrix = totalMatrix
+            .translate(-deviationFromX, -deviationFromY)
+            .multiply(transform.matrix)
+            .translate(deviationFromX, deviationFromY);
+    }
+    return {
+        dimensions,
+        totalMatrix,
+        reset: () => {
+            for (const reset of toReset) {
+                reset();
+            }
+        },
+        nativeTransformOrigin,
+    };
+};

package/dist/composable.d.ts

@@ -4,4 +4,7 @@ export type Composable = {
 } | {
     type: 'svg';
     element: SVGSVGElement;
+} | {
+    type: 'img';
+    element: HTMLImageElement;
 };

package/dist/compose-canvas.d.ts

@@ -0,0 +1 @@
+export declare const composeCanvas: (canvas: HTMLCanvasElement | HTMLImageElement, context: OffscreenCanvasRenderingContext2D) => void;

package/dist/compose-canvas.js

@@ -0,0 +1,14 @@
+import { calculateTransforms } from './calculate-transforms';
+export const composeCanvas = (canvas, context) => {
+    const { totalMatrix, reset, dimensions, nativeTransformOrigin } = calculateTransforms(canvas);
+    const translateX = nativeTransformOrigin.x + dimensions.left;
+    const translateY = nativeTransformOrigin.y + dimensions.top;
+    const matrix = new DOMMatrix()
+        .translate(translateX, translateY)
+        .multiply(totalMatrix)
+        .translate(-translateX, -translateY);
+    context.setTransform(matrix);
+    context.drawImage(canvas, dimensions.left, dimensions.top, dimensions.width, dimensions.height);
+    context.setTransform(new DOMMatrix());
+    reset();
+};

package/dist/compose-svg.d.ts

@@ -0,0 +1,9 @@
+type ImgDrawable = {
+    image: HTMLImageElement;
+    width: number;
+    height: number;
+    left: number;
+    top: number;
+};
+export declare const svgToImageBitmap: (svg: SVGSVGElement) => Promise<ImgDrawable | null>;
+export {};

package/dist/compose-svg.js

@@ -0,0 +1,29 @@
+import { calculateTransforms } from './calculate-transforms';
+export const svgToImageBitmap = (svg) => {
+    const { dimensions: svgDimensions, totalMatrix, reset, } = calculateTransforms(svg);
+    const originalTransform = svg.style.transform;
+    const originalTransformOrigin = svg.style.transformOrigin;
+    svg.style.transform = totalMatrix.toString();
+    svg.style.transformOrigin = '50% 50%';
+    const svgData = new XMLSerializer().serializeToString(svg);
+    svg.style.transform = originalTransform;
+    svg.style.transformOrigin = originalTransformOrigin;
+    reset();
+    return new Promise((resolve, reject) => {
+        const image = new Image(svgDimensions.width, svgDimensions.height);
+        const url = `data:image/svg+xml;base64,${btoa(svgData)}`;
+        image.onload = function () {
+            resolve({
+                image,
+                width: svgDimensions.width,
+                height: svgDimensions.height,
+                left: svgDimensions.left,
+                top: svgDimensions.top,
+            });
+        };
+        image.onerror = () => {
+            reject(new Error('Failed to convert SVG to image'));
+        };
+        image.src = url;
+    });
+};

package/dist/compose.js

@@ -1,31 +1,5 @@
-const svgToImageBitmap = (svg) => {
-    const computedStyle = getComputedStyle(svg);
-    const { transform: originalTransform } = computedStyle;
-    svg.style.transform = 'none';
-    const svgDimensions = svg.getBoundingClientRect();
-    svg.style.transform = originalTransform;
-    if (svgDimensions.width === 0 || svgDimensions.height === 0) {
-        return Promise.resolve(null);
-    }
-    const svgData = new XMLSerializer().serializeToString(svg);
-    return new Promise((resolve, reject) => {
-        const image = new Image(svgDimensions.width, svgDimensions.height);
-        const url = 'data:image/svg+xml;base64,' + window.btoa(svgData);
-        image.onload = function () {
-            resolve({
-                image,
-                width: svgDimensions.width,
-                height: svgDimensions.height,
-                left: svgDimensions.left,
-                top: svgDimensions.top,
-            });
-        };
-        image.onerror = () => {
-            reject(new Error('Failed to convert SVG to image'));
-        };
-        image.src = url;
-    });
-};
+import { composeCanvas } from './compose-canvas';
+import { svgToImageBitmap } from './compose-svg';
 export const compose = async ({ composables, width, height, }) => {
     const canvas = new OffscreenCanvas(width, height);
     const context = canvas.getContext('2d');
@@ -34,18 +8,14 @@ export const compose = async ({ composables, width, height, }) => {
     }
     // TODO: Consider z-index
     for (const composable of composables) {
-        if (composable.type === 'canvas') {
-            const boundingClientRect = composable.element.getBoundingClientRect();
-            context.drawImage(composable.element, boundingClientRect.left, boundingClientRect.top);
+        if (composable.type === 'canvas' || composable.type === 'img') {
+            composeCanvas(composable.element, context);
         }
         else if (composable.type === 'svg') {
-            // This already takes care of the "transform" of the SVG
-            // but not of the transforms of the parent
+            // This already accumulates the transforms of the parent
             const imageBitmap = await svgToImageBitmap(composable.element);
             if (imageBitmap) {
-                // transform origin
-                // Don't need to get transform from SVG
-                context.drawImage(imageBitmap.image, imageBitmap.left, imageBitmap.top);
+                context.drawImage(imageBitmap.image, imageBitmap.left, imageBitmap.top, imageBitmap.width, imageBitmap.height);
             }
         }
     }

package/dist/create-scaffold.d.ts

@@ -0,0 +1,31 @@
+import { type ComponentType } from 'react';
+import type { Codec, LogLevel, TRenderAsset } from 'remotion';
+import { type _InternalTypes } from 'remotion';
+import type { AnyZodObject } from 'zod';
+import type { TimeUpdaterRef } from './update-time';
+export declare function createScaffold<Props extends Record<string, unknown>>({ width, height, delayRenderTimeoutInMilliseconds, logLevel, resolvedProps, id, mediaCacheSizeInBytes, durationInFrames, fps, initialFrame, schema, Component, audioEnabled, videoEnabled, defaultCodec, defaultOutName, }: {
+    width: number;
+    height: number;
+    delayRenderTimeoutInMilliseconds: number;
+    logLevel: LogLevel;
+    resolvedProps: Record<string, unknown>;
+    id: string;
+    mediaCacheSizeInBytes: number | null;
+    initialFrame: number;
+    durationInFrames: number;
+    fps: number;
+    schema: AnyZodObject | null;
+    Component: ComponentType<Props>;
+    audioEnabled: boolean;
+    videoEnabled: boolean;
+    defaultCodec: Codec | null;
+    defaultOutName: string | null;
+}): Promise<{
+    delayRenderScope: _InternalTypes['DelayRenderScope'];
+    div: HTMLDivElement;
+    cleanupScaffold: () => void;
+    timeUpdater: React.RefObject<TimeUpdaterRef | null>;
+    collectAssets: React.RefObject<{
+        collectAssets: () => TRenderAsset[];
+    } | null>;
+}>;

package/dist/create-scaffold.js

@@ -0,0 +1,92 @@
+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 renderEntry.tsx
+    div.style.display = 'flex';
+    div.style.backgroundColor = 'transparent';
+    div.style.position = 'fixed';
+    div.style.width = `${width}px`;
+    div.style.height = `${height}px`;
+    div.style.zIndex = '-9999';
+    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,
+    };
+    const timeUpdater = createRef();
+    const collectAssets = createRef();
+    flushSync(() => {
+        root.render(_jsx(Internals.MaxMediaCacheSizeContext.Provider, { value: mediaCacheSizeInBytes, children: _jsx(Internals.RemotionEnvironmentContext, { 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, { value: true, children: _jsx(Component, { ...resolvedProps }) }) }) }) }) }) }) }));
+    });
+    resolve();
+    await promise;
+    return {
+        delayRenderScope,
+        div,
+        cleanupScaffold: () => {
+            root.unmount();
+            div.remove();
+        },
+        timeUpdater,
+        collectAssets,
+    };
+}