@remotion/web-renderer 4.0.398 → 4.0.400

package/dist/compose.d.ts

@@ -1,9 +1,25 @@
-import type { LogLevel } from 'remotion';
-import type { InternalState } from './internal-state';
-export declare const compose: ({ element, context, logLevel, parentRect, internalState, }: {
+export declare const compose: ({ element, context, logLevel, parentRect, internalState, onlyBackgroundClip, }: {
     element: HTMLElement | SVGElement;
     context: OffscreenCanvasRenderingContext2D;
-    logLevel: LogLevel;
+    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
     parentRect: DOMRect;
-    internalState: InternalState;
+    internalState: {
+        getDrawn3dPixels: () => number;
+        getPrecomposedTiles: () => number;
+        addPrecompose: ({ canvasWidth, canvasHeight, }: {
+            canvasWidth: number;
+            canvasHeight: number;
+        }) => void;
+        helperCanvasState: import("./internal-state").HelperCanvasState;
+        [Symbol.dispose]: () => void;
+        getWaitForReadyTime: () => number;
+        addWaitForReadyTime: (time: number) => void;
+        getAddSampleTime: () => number;
+        addAddSampleTime: (time: number) => void;
+        getCreateFrameTime: () => number;
+        addCreateFrameTime: (time: number) => void;
+        getAudioMixingTime: () => number;
+        addAudioMixingTime: (time: number) => void;
+    };
+    onlyBackgroundClip: boolean;
 }) => Promise<void>;

package/dist/create-scaffold.d.ts

@@ -1,9 +1,8 @@
 import { type ComponentType } from 'react';
-import type { Codec, LogLevel, TRenderAsset } from 'remotion';
-import { type _InternalTypes } from 'remotion';
+import type { Codec, DelayRenderScope, LogLevel, TRenderAsset } 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, }: {
+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;
@@ -21,11 +20,11 @@ export declare function createScaffold<Props extends Record<string, unknown>>({
     defaultCodec: Codec | null;
     defaultOutName: string | null;
 }): Promise<{
-    delayRenderScope: _InternalTypes['DelayRenderScope'];
+    delayRenderScope: DelayRenderScope;
     div: HTMLDivElement;
-    cleanupScaffold: () => void;
     timeUpdater: React.RefObject<TimeUpdaterRef | null>;
     collectAssets: React.RefObject<{
         collectAssets: () => TRenderAsset[];
     } | null>;
+    [Symbol.dispose]: () => void;
 }>;

package/dist/drawing/border-radius.d.ts

@@ -16,14 +16,16 @@ export type BorderRadiusCorners = {
         vertical: number;
     };
 };
-export declare function parseBorderRadius({ borderRadius, width, height, }: {
+export declare function parseBorderRadius({ borderRadius, width, height }: {
     borderRadius: string;
     width: number;
     height: number;
 }): BorderRadiusCorners;
-export declare function setBorderRadius({ ctx, rect, borderRadius, forceClipEvenWhenZero, }: {
+export declare function setBorderRadius({ ctx, rect, borderRadius, forceClipEvenWhenZero, computedStyle, backgroundClip }: {
     ctx: OffscreenCanvasRenderingContext2D;
     rect: DOMRect;
     borderRadius: BorderRadiusCorners;
     forceClipEvenWhenZero: boolean;
+    computedStyle: CSSStyleDeclaration;
+    backgroundClip: string;
 }): () => void;

package/dist/drawing/calculate-object-fit.d.ts

@@ -0,0 +1,40 @@
+export type ObjectFit = 'fill' | 'contain' | 'cover' | 'none' | 'scale-down';
+export type ObjectFitResult = {
+    sourceX: number;
+    sourceY: number;
+    sourceWidth: number;
+    sourceHeight: number;
+    destX: number;
+    destY: number;
+    destWidth: number;
+    destHeight: number;
+};
+type ObjectFitParams = {
+    containerSize: {
+        width: number;
+        height: number;
+        left: number;
+        top: number;
+    };
+    intrinsicSize: {
+        width: number;
+        height: number;
+    };
+};
+/**
+ * Calculates how to draw an image based on object-fit CSS property.
+ *
+ * @param objectFit - The CSS object-fit value
+ * @param containerSize - The container dimensions (where the image should be drawn)
+ * @param intrinsicSize - The natural/intrinsic size of the image
+ * @returns Source and destination rectangles for drawImage
+ */
+export declare const calculateObjectFit: ({ objectFit, containerSize, intrinsicSize, }: {
+    objectFit: ObjectFit;
+} & ObjectFitParams) => ObjectFitResult;
+/**
+ * Parse an object-fit CSS value string into our ObjectFit type.
+ * Returns 'fill' as the default if the value is not recognized.
+ */
+export declare const parseObjectFit: (value: string | null | undefined) => ObjectFit;
+export {};

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

@@ -5,7 +5,7 @@ export declare const calculateTransforms: ({ element, rootElement, }: {
 }) => {
     dimensions: DOMRect;
     totalMatrix: DOMMatrix;
-    reset: () => void;
+    [Symbol.dispose]: () => void;
     nativeTransformOrigin: {
         x: number;
         y: number;

package/dist/drawing/draw-background.d.ts

@@ -0,0 +1,30 @@
+export declare const drawBackground: ({ backgroundImage, context, rect, backgroundColor, backgroundClip, element, logLevel, internalState, computedStyle, offsetLeft: parentOffsetLeft, offsetTop: parentOffsetTop, }: {
+    backgroundImage: string;
+    context: OffscreenCanvasRenderingContext2D;
+    rect: DOMRect;
+    backgroundColor: string;
+    backgroundClip: string;
+    element: HTMLElement | SVGElement;
+    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+    internalState: {
+        getDrawn3dPixels: () => number;
+        getPrecomposedTiles: () => number;
+        addPrecompose: ({ canvasWidth, canvasHeight, }: {
+            canvasWidth: number;
+            canvasHeight: number;
+        }) => void;
+        helperCanvasState: import("../internal-state").HelperCanvasState;
+        [Symbol.dispose]: () => void;
+        getWaitForReadyTime: () => number;
+        addWaitForReadyTime: (time: number) => void;
+        getAddSampleTime: () => number;
+        addAddSampleTime: (time: number) => void;
+        getCreateFrameTime: () => number;
+        addCreateFrameTime: (time: number) => void;
+        getAudioMixingTime: () => number;
+        addAudioMixingTime: (time: number) => void;
+    };
+    computedStyle: CSSStyleDeclaration;
+    offsetLeft: number;
+    offsetTop: number;
+}) => Promise<void>;

package/dist/drawing/draw-box-shadow.d.ts

@@ -1,4 +1,3 @@
-import type { LogLevel } from 'remotion';
 import type { BorderRadiusCorners } from './border-radius';
 interface BoxShadow {
     offsetX: number;
@@ -8,11 +7,11 @@ interface BoxShadow {
     inset: boolean;
 }
 export declare const parseBoxShadow: (boxShadowValue: string) => BoxShadow[];
-export declare const setBoxShadow: ({ ctx, rect, borderRadius, computedStyle, logLevel, }: {
+export declare const drawBorderRadius: ({ ctx, rect, borderRadius, computedStyle, logLevel, }: {
     ctx: OffscreenCanvasRenderingContext2D;
     rect: DOMRect;
     borderRadius: BorderRadiusCorners;
     computedStyle: CSSStyleDeclaration;
-    logLevel: LogLevel;
+    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
 }) => void;
 export {};

package/dist/drawing/draw-element.d.ts

@@ -1,6 +1,5 @@
-import type { LogLevel } from 'remotion';
 import type { DrawFn } from './drawn-fn';
-export declare const drawElement: ({ rect, computedStyle, context, draw, opacity, totalMatrix, parentRect, logLevel, }: {
+export declare const drawElement: ({ rect, computedStyle, context, draw, opacity, totalMatrix, parentRect, logLevel, element, internalState, }: {
     rect: DOMRect;
     computedStyle: CSSStyleDeclaration;
     context: OffscreenCanvasRenderingContext2D;
@@ -8,7 +7,26 @@ export declare const drawElement: ({ rect, computedStyle, context, draw, opacity
     totalMatrix: DOMMatrix;
     draw: DrawFn;
     parentRect: DOMRect;
-    logLevel: LogLevel;
+    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+    element: HTMLElement | SVGElement;
+    internalState: {
+        getDrawn3dPixels: () => number;
+        getPrecomposedTiles: () => number;
+        addPrecompose: ({ canvasWidth, canvasHeight, }: {
+            canvasWidth: number;
+            canvasHeight: number;
+        }) => void;
+        helperCanvasState: import("../internal-state").HelperCanvasState;
+        [Symbol.dispose]: () => void;
+        getWaitForReadyTime: () => number;
+        addWaitForReadyTime: (time: number) => void;
+        getAddSampleTime: () => number;
+        addAddSampleTime: (time: number) => void;
+        getCreateFrameTime: () => number;
+        addCreateFrameTime: (time: number) => void;
+        getAudioMixingTime: () => number;
+        addAudioMixingTime: (time: number) => void;
+    };
 }) => Promise<{
     cleanupAfterChildren: () => void;
 }>;

package/dist/drawing/drawn-fn.d.ts

@@ -1,4 +1,4 @@
-export type DrawFn = ({ computedStyle, contextToDraw, dimensions, }: {
+export type DrawFn = ({ computedStyle, contextToDraw, dimensions }: {
     dimensions: DOMRect;
     computedStyle: CSSStyleDeclaration;
     contextToDraw: OffscreenCanvasRenderingContext2D;

package/dist/drawing/fit-svg-into-its-dimensions.d.ts

@@ -0,0 +1,12 @@
+export declare const fitSvgIntoItsContainer: ({ containerSize, elementSize, }: {
+    containerSize: DOMRect;
+    elementSize: {
+        width: number;
+        height: number;
+    };
+}) => {
+    width: number;
+    height: number;
+    top: number;
+    left: number;
+};

package/dist/drawing/get-clipped-background.d.ts

@@ -0,0 +1,23 @@
+export declare const getClippedBackground: ({ element, boundingRect, logLevel, internalState, }: {
+    element: HTMLElement | SVGElement;
+    boundingRect: DOMRect;
+    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+    internalState: {
+        getDrawn3dPixels: () => number;
+        getPrecomposedTiles: () => number;
+        addPrecompose: ({ canvasWidth, canvasHeight, }: {
+            canvasWidth: number;
+            canvasHeight: number;
+        }) => void;
+        helperCanvasState: import("../internal-state").HelperCanvasState;
+        [Symbol.dispose]: () => void;
+        getWaitForReadyTime: () => number;
+        addWaitForReadyTime: (time: number) => void;
+        getAddSampleTime: () => number;
+        addAddSampleTime: (time: number) => void;
+        getCreateFrameTime: () => number;
+        addCreateFrameTime: (time: number) => void;
+        getAudioMixingTime: () => number;
+        addAudioMixingTime: (time: number) => void;
+    };
+}) => Promise<OffscreenCanvasRenderingContext2D>;

package/dist/drawing/get-padding-box.d.ts

@@ -0,0 +1 @@
+export declare const getBoxBasedOnBackgroundClip: (rect: DOMRect, computedStyle: CSSStyleDeclaration, backgroundClip: string | undefined) => DOMRect;

package/dist/drawing/handle-3d-transform.d.ts

@@ -3,9 +3,27 @@ export declare const getPrecomposeRectFor3DTransform: ({ element, parentRect, ma
     parentRect: DOMRect;
     matrix: DOMMatrix;
 }) => DOMRect;
-export declare const handle3dTransform: ({ matrix, precomposeRect, tempCanvas, rectAfterTransforms, }: {
+export declare const handle3dTransform: ({ matrix, precomposeRect, tempCanvas, rectAfterTransforms, internalState, }: {
     matrix: DOMMatrix;
     precomposeRect: DOMRect;
     tempCanvas: OffscreenCanvas;
     rectAfterTransforms: DOMRect;
-}) => readonly [OffscreenCanvas, () => void] | null;
+    internalState: {
+        getDrawn3dPixels: () => number;
+        getPrecomposedTiles: () => number;
+        addPrecompose: ({ canvasWidth, canvasHeight, }: {
+            canvasWidth: number;
+            canvasHeight: number;
+        }) => void;
+        helperCanvasState: import("../internal-state").HelperCanvasState;
+        [Symbol.dispose]: () => void;
+        getWaitForReadyTime: () => number;
+        addWaitForReadyTime: (time: number) => void;
+        getAddSampleTime: () => number;
+        addAddSampleTime: (time: number) => void;
+        getCreateFrameTime: () => number;
+        addCreateFrameTime: (time: number) => void;
+        getAudioMixingTime: () => number;
+        addAudioMixingTime: (time: number) => void;
+    };
+}) => OffscreenCanvas | null;

package/dist/drawing/overflow.d.ts

@@ -1,7 +1,9 @@
 import type { BorderRadiusCorners } from './border-radius';
-export declare const setOverflowHidden: ({ ctx, rect, borderRadius, overflowHidden, }: {
+export declare const setOverflowHidden: ({ ctx, rect, borderRadius, overflowHidden, computedStyle, backgroundClip, }: {
     ctx: OffscreenCanvasRenderingContext2D;
     rect: DOMRect;
     borderRadius: BorderRadiusCorners;
     overflowHidden: boolean;
+    computedStyle: CSSStyleDeclaration;
+    backgroundClip: string;
 }) => () => void;

package/dist/drawing/parse-linear-gradient.d.ts

@@ -7,8 +7,10 @@ export interface LinearGradientInfo {
     colorStops: ColorStop[];
 }
 export declare const parseLinearGradient: (backgroundImage: string) => LinearGradientInfo | null;
-export declare const createCanvasGradient: ({ ctx, rect, gradientInfo, }: {
+export declare const createCanvasGradient: ({ ctx, rect, gradientInfo, offsetLeft, offsetTop, }: {
     ctx: OffscreenCanvasRenderingContext2D;
     rect: DOMRect;
     gradientInfo: LinearGradientInfo;
+    offsetLeft: number;
+    offsetTop: number;
 }) => CanvasGradient;

package/dist/drawing/precompose.d.ts

@@ -1,10 +1,25 @@
-import type { LogLevel } from 'remotion';
-import type { InternalState } from '../internal-state';
 export declare const precomposeDOMElement: ({ boundingRect, element, logLevel, internalState, }: {
     boundingRect: DOMRect;
     element: HTMLElement | SVGElement;
-    logLevel: LogLevel;
-    internalState: InternalState;
+    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+    internalState: {
+        getDrawn3dPixels: () => number;
+        getPrecomposedTiles: () => number;
+        addPrecompose: ({ canvasWidth, canvasHeight, }: {
+            canvasWidth: number;
+            canvasHeight: number;
+        }) => void;
+        helperCanvasState: import("../internal-state").HelperCanvasState;
+        [Symbol.dispose]: () => void;
+        getWaitForReadyTime: () => number;
+        addWaitForReadyTime: (time: number) => void;
+        getAddSampleTime: () => number;
+        addAddSampleTime: (time: number) => void;
+        getCreateFrameTime: () => number;
+        addCreateFrameTime: (time: number) => void;
+        getAudioMixingTime: () => number;
+        addAudioMixingTime: (time: number) => void;
+    };
 }) => Promise<{
     tempCanvas: OffscreenCanvas;
     tempContext: OffscreenCanvasRenderingContext2D;

package/dist/drawing/process-node.d.ts

@@ -1,5 +1,3 @@
-import { type LogLevel } from 'remotion';
-import type { InternalState } from '../internal-state';
 import type { DrawFn } from './drawn-fn';
 export type ProcessNodeReturnValue = {
     type: 'continue';
@@ -11,8 +9,25 @@ export declare const processNode: ({ element, context, draw, logLevel, parentRec
     element: HTMLElement | SVGElement;
     context: OffscreenCanvasRenderingContext2D;
     draw: DrawFn;
-    logLevel: LogLevel;
+    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
     parentRect: DOMRect;
-    internalState: InternalState;
+    internalState: {
+        getDrawn3dPixels: () => number;
+        getPrecomposedTiles: () => number;
+        addPrecompose: ({ canvasWidth, canvasHeight, }: {
+            canvasWidth: number;
+            canvasHeight: number;
+        }) => void;
+        helperCanvasState: import("../internal-state").HelperCanvasState;
+        [Symbol.dispose]: () => void;
+        getWaitForReadyTime: () => number;
+        addWaitForReadyTime: (time: number) => void;
+        getAddSampleTime: () => number;
+        addAddSampleTime: (time: number) => void;
+        getCreateFrameTime: () => number;
+        addCreateFrameTime: (time: number) => void;
+        getAudioMixingTime: () => number;
+        addAudioMixingTime: (time: number) => void;
+    };
     rootElement: HTMLElement | SVGElement;
 }) => Promise<ProcessNodeReturnValue>;

package/dist/drawing/text/draw-text.d.ts

@@ -1,6 +1,6 @@
-import type { LogLevel } from 'remotion';
 import type { DrawFn } from '../drawn-fn';
-export declare const drawText: ({ span, logLevel, }: {
+export declare const drawText: ({ span, logLevel, onlyBackgroundClip, }: {
     span: HTMLSpanElement;
-    logLevel: LogLevel;
+    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
+    onlyBackgroundClip: boolean;
 }) => DrawFn;

package/dist/drawing/text/handle-text-node.d.ts

@@ -1,11 +1,27 @@
-import type { LogLevel } from 'remotion';
-import type { InternalState } from '../../internal-state';
 import type { ProcessNodeReturnValue } from '../process-node';
-export declare const handleTextNode: ({ node, context, logLevel, parentRect, internalState, rootElement, }: {
+export declare const handleTextNode: ({ node, context, logLevel, parentRect, internalState, rootElement, onlyBackgroundClip, }: {
     node: Text;
     context: OffscreenCanvasRenderingContext2D;
-    logLevel: LogLevel;
+    logLevel: "error" | "info" | "trace" | "verbose" | "warn";
     parentRect: DOMRect;
-    internalState: InternalState;
+    internalState: {
+        getDrawn3dPixels: () => number;
+        getPrecomposedTiles: () => number;
+        addPrecompose: ({ canvasWidth, canvasHeight, }: {
+            canvasWidth: number;
+            canvasHeight: number;
+        }) => void;
+        helperCanvasState: import("../../internal-state").HelperCanvasState;
+        [Symbol.dispose]: () => void;
+        getWaitForReadyTime: () => number;
+        addWaitForReadyTime: (time: number) => void;
+        getAddSampleTime: () => number;
+        addAddSampleTime: (time: number) => void;
+        getCreateFrameTime: () => number;
+        addCreateFrameTime: (time: number) => void;
+        getAudioMixingTime: () => number;
+        addAudioMixingTime: (time: number) => void;
+    };
     rootElement: HTMLElement | SVGElement;
+    onlyBackgroundClip: boolean;
 }) => Promise<ProcessNodeReturnValue>;

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

@@ -1,10 +1,28 @@
-export declare const transformIn3d: ({ matrix, sourceCanvas, untransformedRect, rectAfterTransforms, }: {
+import type { HelperCanvasState } from '../internal-state';
+export declare const transformIn3d: ({ matrix, sourceCanvas, untransformedRect, rectAfterTransforms, internalState, }: {
     untransformedRect: DOMRect;
     matrix: DOMMatrix;
     sourceCanvas: OffscreenCanvas;
     rectAfterTransforms: DOMRect;
+    internalState: {
+        getDrawn3dPixels: () => number;
+        getPrecomposedTiles: () => number;
+        addPrecompose: ({ canvasWidth, canvasHeight, }: {
+            canvasWidth: number;
+            canvasHeight: number;
+        }) => void;
+        helperCanvasState: HelperCanvasState;
+        [Symbol.dispose]: () => void;
+        getWaitForReadyTime: () => number;
+        addWaitForReadyTime: (time: number) => void;
+        getAddSampleTime: () => number;
+        addAddSampleTime: (time: number) => void;
+        getCreateFrameTime: () => number;
+        addCreateFrameTime: (time: number) => void;
+        getAudioMixingTime: () => number;
+        addAudioMixingTime: (time: number) => void;
+    };
 }) => {
     canvas: OffscreenCanvas;
     rect: DOMRect;
-    cleanup: () => void;
 };

package/dist/drawing/transform-rect-with-matrix.d.ts

@@ -1,4 +1,4 @@
-export declare function transformDOMRect({ rect, matrix, }: {
+export declare function transformDOMRect({ rect, matrix }: {
     rect: DOMRect;
     matrix: DOMMatrix;
 }): DOMRect;