remotion

import React from 'react'; import type { EffectsProp } from './effects/effect-types.js'; import type { InteractiveBaseProps } from './Interactive.js'; import type { AbsoluteFillLayout } from './Sequence.js'; declare global { interface ElementImage { readonly width: number; readonly height: number; close(): void; } interface CanvasRenderingContext2D { drawElementImage(element: Element | ElementImage, dx: number, dy: number): DOMMatrix; drawElementImage(element: Element | ElementImage, dx: number, dy: number, dwidth: number, dheight: number): DOMMatrix; drawElementImage(element: Element | ElementImage, sx: number, sy: number, swidth: number, sheight: number, dx: number, dy: number): DOMMatrix; drawElementImage(element: Element | ElementImage, sx: number, sy: number, swidth: number, sheight: number, dx: number, dy: number, dwidth: number, dheight: number): DOMMatrix; } interface OffscreenCanvasRenderingContext2D { drawElementImage(element: Element | ElementImage, dx: number, dy: number): DOMMatrix; drawElementImage(element: Element | ElementImage, dx: number, dy: number, dwidth: number, dheight: number): DOMMatrix; drawElementImage(element: Element | ElementImage, sx: number, sy: number, swidth: number, sheight: number, dx: number, dy: number): DOMMatrix; drawElementImage(element: Element | ElementImage, sx: number, sy: number, swidth: number, sheight: number, dx: number, dy: number, dwidth: number, dheight: number): DOMMatrix; } interface WebGLRenderingContextBase { texElementImage2D(target: GLenum, level: GLint, internalformat: GLint, format: GLenum, type: GLenum, element: Element | ElementImage): void; texElementImage2D(target: GLenum, level: GLint, internalformat: GLint, width: GLsizei, height: GLsizei, format: GLenum, type: GLenum, element: Element | ElementImage): void; texElementImage2D(target: GLenum, level: GLint, internalformat: GLint, sx: GLfloat, sy: GLfloat, swidth: GLfloat, sheight: GLfloat, format: GLenum, type: GLenum, element: Element | ElementImage): void; texElementImage2D(target: GLenum, level: GLint, internalformat: GLint, sx: GLfloat, sy: GLfloat, swidth: GLfloat, sheight: GLfloat, width: GLsizei, height: GLsizei, format: GLenum, type: GLenum, element: Element | ElementImage): void; } interface HTMLCanvasElementEventMap { paint: Event; } interface HTMLCanvasElement { layoutSubtree?: boolean; onpaint: ((this: HTMLCanvasElement, ev: Event) => unknown) | null; requestPaint?(): void; captureElementImage(element: Element): ElementImage; getElementTransform(element: Element | ElementImage, drawTransform: DOMMatrix): DOMMatrix; } } export type HtmlInCanvasOnPaintParams = { /** * The `OffscreenCanvas` from {@link HTMLCanvasElement.transferControlToOffscreen} * on the layout `<canvas>` (same logical canvas as the forwarded ref). */ readonly canvas: OffscreenCanvas; readonly element: HTMLDivElement; readonly elementImage: ElementImage; readonly pixelDensity: number; }; export declare const isHtmlInCanvasSupported: () => boolean; /** Shown when {@link isHtmlInCanvasSupported} is false: APIs are absent (old Chrome and/or flag off). */ export declare const HTML_IN_CANVAS_UNSUPPORTED_MESSAGE = "HTML in Canvas is not supported. Two common causes: Chrome is older than version 148 (update Chrome), or the HTML-in-Canvas flag is disabled at chrome://flags/#canvas-draw-element (enable it and restart Chrome)."; export type HtmlInCanvasOnPaint = (params: HtmlInCanvasOnPaintParams) => void | Promise<void>; export type HtmlInCanvasOnInitCleanup = () => void; export type HtmlInCanvasOnInit = (params: HtmlInCanvasOnPaintParams) => HtmlInCanvasOnInitCleanup | Promise<HtmlInCanvasOnInitCleanup>; export type HtmlInCanvasPixelDensity = number; export type HtmlInCanvasProps = Omit<InteractiveBaseProps, 'children'> & Omit<AbsoluteFillLayout, 'layout' | 'styleWhilePostmounted' | 'postmountFor' | 'premountFor' | 'styleWhilePremounted'> & { readonly durationInFrames?: number; readonly width: number; readonly height: number; readonly effects?: EffectsProp; readonly children: React.ReactNode; readonly onPaint?: HtmlInCanvasOnPaint; readonly onInit?: HtmlInCanvasOnInit; readonly pixelDensity?: HtmlInCanvasPixelDensity; }; export declare const htmlInCanvasSchema: { readonly 'style.transformOrigin': { readonly type: "transform-origin"; readonly step: 1; readonly default: "50% 50%"; readonly description: "Transform origin"; }; readonly 'style.translate': { readonly type: "translate"; readonly step: 1; readonly default: "0px 0px"; readonly description: "Offset"; }; readonly 'style.scale': { readonly type: "scale"; readonly max: 100; readonly step: 0.01; readonly default: 1; readonly description: "Scale"; }; readonly 'style.rotate': { readonly type: "rotation-css"; readonly step: 1; readonly default: "0deg"; readonly description: "Rotation"; }; readonly 'style.opacity': { readonly type: "number"; readonly min: 0; readonly max: 1; readonly step: 0.01; readonly default: 1; readonly description: "Opacity"; readonly hiddenFromList: false; }; readonly durationInFrames: { readonly type: "number"; readonly default: undefined; readonly min: 1; readonly step: 1; readonly hiddenFromList: true; }; readonly from: { readonly type: "number"; readonly default: 0; readonly step: 1; readonly hiddenFromList: true; }; readonly trimBefore: { readonly type: "number"; readonly default: 0; readonly min: 0; readonly step: 1; readonly hiddenFromList: true; }; readonly freeze: { readonly type: "number"; readonly default: null; readonly step: 1; readonly hiddenFromList: true; }; readonly hidden: import("./interactivity-schema.js").BooleanFieldSchema; readonly name: import("./interactivity-schema.js").HiddenFieldSchema; readonly showInTimeline: import("./interactivity-schema.js").HiddenFieldSchema; readonly pixelDensity: { readonly type: "number"; readonly min: 1; readonly max: 3; readonly step: 0.1; readonly default: 1; readonly description: "Pixel density"; readonly hiddenFromList: false; }; }; export declare const HtmlInCanvas: React.ForwardRefExoticComponent<Omit<InteractiveBaseProps, "children"> & Omit<AbsoluteFillLayout, "layout" | "postmountFor" | "premountFor" | "styleWhilePostmounted" | "styleWhilePremounted"> & { readonly durationInFrames?: number | undefined; readonly width: number; readonly height: number; readonly effects?: EffectsProp | undefined; readonly children: React.ReactNode; readonly onPaint?: HtmlInCanvasOnPaint | undefined; readonly onInit?: HtmlInCanvasOnInit | undefined; readonly pixelDensity?: number | undefined; } & React.RefAttributes<HTMLCanvasElement>> & { readonly isSupported: () => boolean; };