textmode.js 0.7.1 → 0.8.0-beta.2

package/dist/types/textmode/layers/interfaces/ITextmodeLayer.d.ts

@@ -1,4 +1,5 @@
 import type { GLFramebuffer } from '../../../rendering';
+import type { TextmodeFont } from '../../loadables/font';
 import type { TextmodeLayerBlendMode } from '../types';
 import type { FilterName, BuiltInFilterName, BuiltInFilterParams } from '../../filters';
 /**
@@ -38,11 +39,13 @@ export interface ITextmodeLayer {
      * If the layer is not yet initialized, returns undefined.
      */
     readonly drawFramebuffer: GLFramebuffer | undefined;
+    /** The font used by this layer. */
+    readonly font: TextmodeFont;
     /**
      * Define this layer's draw callback. The callback is executed each frame
      * and should contain all drawing commands for this layer.
      *
-     * Inside the callback, use `t` (your textmode instance) to access drawing
+     * Inside the callback, use `t` (your `Textmodifier` instance) to access drawing
      * methods like `char()`, `charColor()`, `translate()`, and `rect()`.
      *
      * @param callback The function to call when drawing this layer.
@@ -118,6 +121,24 @@ export interface ITextmodeLayer {
      * ```
      */
     draw(callback: () => void): void;
+    /** Get or set the font size for this layer. */
+    fontSize(size?: number): number | void;
+    /**
+     * Load a font from the given source into this layer.
+     *
+     * @param fontSource The URL or path to the font file.
+     * @returns The loaded TextmodeFont instance.
+     *
+     * @example
+     * ```javascript
+     * const layer = t.layers.add();
+     *
+     * t.setup(async () => {
+     *   await layer.loadFont('./fonts/custom.ttf');
+     * });
+     * ```
+     */
+    loadFont(fontSource: string | TextmodeFont): Promise<TextmodeFont>;
     /**
      * Show this layer for rendering.
      */
@@ -138,7 +159,7 @@ export interface ITextmodeLayer {
      * @param mode The blend mode to set.
      * @returns The current blend mode if no parameter is provided.
      *
-     * **Available Blend Modes:**
+     * **Available blend modes:**
      * - `'normal'` - Standard alpha compositing
      * - `'additive'` - Adds colors together (great for glow/energy effects)
      * - `'multiply'` - Darkens by multiplying colors
@@ -279,32 +300,32 @@ export interface ITextmodeLayer {
      * @param z The rotation angle in degrees. Positive values rotate clockwise.
      * @returns The current rotation in degrees if no parameter is provided.
      *
-    * @example
-    * ```typescript
-    * import { textmode } from 'textmode.js';
-    *
-    * const t = textmode.create();
-    *
-    * const rotatingLayer = t.layers.add({ blendMode: 'difference', opacity: 1.0 });
-    *
-    * rotatingLayer.draw(() => {
-    *   t.clear();
-    *   t.charColor(255, 200, 100);
-    *   t.char('#');
-    *   t.rect(10, 5);
-    * });
-    *
-    * t.draw(() => {
-    *   t.background(20, 20, 40);
-    *
-    *   // Rotate the layer over time
-    *   rotatingLayer.rotateZ(t.frameCount * 2);
-    *
-    *   t.charColor(100, 200, 255);
-    *   t.char('-');
-    *   t.rect(t.grid.cols, t.grid.rows);
-    * });
-    * ```
+     * @example
+     * ```typescript
+     * import { textmode } from 'textmode.js';
+     *
+     * const t = textmode.create();
+     *
+     * const rotatingLayer = t.layers.add({ blendMode: 'difference', opacity: 1.0 });
+     *
+     * rotatingLayer.draw(() => {
+     *   t.clear();
+     *   t.charColor(255, 200, 100);
+     *   t.char('#');
+     *   t.rect(10, 5);
+     * });
+     *
+     * t.draw(() => {
+     *   t.background(20, 20, 40);
+     *
+     *   // Rotate the layer over time
+     *   rotatingLayer.rotateZ(t.frameCount * 2);
+     *
+     *   t.charColor(100, 200, 255);
+     *   t.char('-');
+     *   t.rect(t.grid.cols, t.grid.rows);
+     * });
+     * ```
      */
     rotateZ(z?: number): number | void;
     /**

package/dist/types/textmode/layers/types.d.ts

@@ -1,8 +1,8 @@
 import type { GLFramebuffer } from '../../rendering';
-import type { TextmodeGrid } from '../Grid';
 import type { GLRenderer } from '../../rendering/webgl/core/Renderer';
-import type { TextmodeFont } from '../loadables/font';
 import type { TextmodeFilterManager } from '../filters';
+import type { TextmodeCanvas } from '../Canvas';
+import type { TextmodeFont } from '../loadables';
 /**
  * Blend modes available for {@link TextmodeLayer} compositing in 2D mode.
  *
@@ -50,6 +50,16 @@ export interface TextmodeLayerOptions {
      * The rotation of the layer in degrees around its center. Default is `0`.
      */
     rotation?: number;
+    /**
+     * The font size for the layer's text. Default is `16`.
+     */
+    fontSize?: number;
+    /**
+     * Source for the font to use in this layer.
+     *
+     * Can be a URL/path to a font file, or an existing TextmodeFont instance.
+     */
+    fontSource?: string | TextmodeFont;
 }
 /**
  * Dependencies required by a TextmodeLayer to function.
@@ -57,27 +67,12 @@ export interface TextmodeLayerOptions {
  */
 export interface LayerDependencies {
     renderer: GLRenderer;
-    grid: TextmodeGrid;
-    font: TextmodeFont;
-    createFramebuffer: (width: number, height: number, attachments?: number) => GLFramebuffer;
+    canvas: TextmodeCanvas;
+    createFramebuffer: (width: number, height: number, attachments?: number, options?: {
+        depth?: boolean;
+    }) => GLFramebuffer;
     /**
      * The shared filter manager for applying post-ASCII filters.
      */
     filterManager: TextmodeFilterManager;
-    /**
-     * Ping-pong buffers for layer filter chain processing (grid-sized).
-     * Shared across all layers within the LayerManager.
-     */
-    layerPingPongBuffers: [GLFramebuffer, GLFramebuffer];
-    /**
-     * Optional external draw framebuffer. When provided, the layer will use this
-     * instead of creating its own. Used for the base layer which shares the
-     * main textmode draw framebuffer.
-     */
-    externalDrawFramebuffer?: GLFramebuffer;
-    /**
-     * Optional external ASCII framebuffer. When provided, the layer will use this
-     * instead of creating its own. Used for the base layer.
-     */
-    externalAsciiFramebuffer?: GLFramebuffer;
 }

package/dist/types/textmode/loadables/ITextmodeSource.d.ts

@@ -0,0 +1,123 @@
+import type { Material } from '../../rendering/webgl/materials/Material';
+import type { TextmodeConversionMode } from '../conversion';
+import type { TextmodeColor } from '../TextmodeColor';
+import type { TextmodeFont } from './font/TextmodeFont';
+/**
+ * Base interface for drawable textmode sources (images, videos, canvas, etc.).
+ * Handles shared WebGL texture state, material creation, and color/character settings.
+ */
+export interface ITextmodeSource {
+    /**
+     * Select the conversion mode for this source.
+     *
+     * `textmode.js` includes only a single built-in conversion strategy `'brightness'`.
+     *
+     * Additional conversion strategies may be provided via add-on libraries.
+     *
+     * @param mode Conversion mode to use.
+     */
+    conversionMode(mode: TextmodeConversionMode): this;
+    /**
+     * Dispose of the underlying WebGL texture. Subclasses may extend for additional cleanup.
+     * @ignore
+     */
+    $dispose(): void;
+    /**
+     * Set the invert flag, swapping character and cell colors when enabled.
+     * @param v Invert flag
+     * @returns This instance for chaining.
+     */
+    invert(v?: boolean | number): this;
+    /**
+     * Set horizontal flip indicator flag.
+     * @param v Flip flag
+     * @returns This instance for chaining.
+     */
+    flipX(v?: boolean | number): this;
+    /**
+     * Set vertical flip indicator flag.
+     * @param v Flip flag
+     * @returns This instance for chaining.
+     */
+    flipY(v?: boolean | number): this;
+    /**
+     * Set the character rotation in degrees (0-360).
+     * @param degrees Rotation in degrees
+     * @returns This instance for chaining.
+     */
+    charRotation(degrees: number): this;
+    /**
+     * Set character color mode: `'sampled'` *(from source)* or `'fixed'`.
+     * @param mode The character color mode
+     * @returns This instance for chaining.
+     */
+    charColorMode(mode: 'sampled' | 'fixed'): this;
+    /**
+     * Set cell color mode: `'sampled'` *(from source)* or `'fixed'`.
+     * @param mode The cell color mode
+     * @returns This instance for chaining.
+     */
+    cellColorMode(mode: 'sampled' | 'fixed'): this;
+    /**
+     * Defines the character color when {@link charColorMode} is `'fixed'`.
+     * @param colorOrGray A grayscale value (0-255), hex string ('#RGB', '#RRGGBB', '#RRGGBBAA'), or TextmodeColor instance
+     * @param g Green component (0-255) if using RGB format
+     * @param b Blue component (0-255) if using RGB format
+     * @param a Alpha component (0-255) if using RGBA format
+     * @returns This instance for chaining.
+     */
+    charColor(colorOrGray: number | string | TextmodeColor, g?: number, b?: number, a?: number): this;
+    /**
+     * Defines the cell color when {@link cellColorMode} is `'fixed'`.
+     * @param colorOrGray A grayscale value (0-255), hex string ('#RGB', '#RRGGBB', '#RRGGBBAA'), or TextmodeColor instance
+     * @param g Green component (0-255) if using RGB format
+     * @param b Blue component (0-255) if using RGB format
+     * @param a Alpha component (0-255) if using RGBA format
+     * @returns This instance for chaining.
+     */
+    cellColor(colorOrGray: number | string | TextmodeColor, g?: number, b?: number, a?: number): this;
+    /**
+     * Defines the background color used for transparent pixels.
+     * @param colorOrGray A grayscale value (0-255), hex string ('#RGB', '#RRGGBB', '#RRGGBBAA'), or TextmodeColor instance
+     * @param g Green component (0-255) if using RGB format
+     * @param b Blue component (0-255) if using RGB format
+     * @param a Alpha component (0-255) if using RGBA format
+     * @returns This instance for chaining.
+     */
+    background(colorOrGray: number | TextmodeColor | string, g?: number, b?: number, a?: number): this;
+    /**
+     * Define the characters to use for brightness mapping as a string.
+     * Maximum length is 255; excess characters are ignored.
+     * @param chars String of characters to map
+     * @returns This instance for chaining.
+     */
+    characters(chars: string): this;
+    /**
+     * Set the active font for the current render pass.
+     * Called by the renderer before getMaterial() to ensure the source uses the correct layer's font.
+     * @param font The font to use for this render
+     * @ignore
+     */
+    $setActiveFont(font: TextmodeFont): void;
+    /** Return the WebGL texture currently backing this source. */
+    readonly texture: WebGLTexture;
+    /** Ideal width in grid cells. */
+    readonly width: number;
+    /** Ideal height in grid cells. */
+    readonly height: number;
+    /** Original pixel width. */
+    readonly originalWidth: number;
+    /** Original pixel height. */
+    readonly originalHeight: number;
+    /**
+     * Get or create the material for rendering this source.
+     * @ignore
+     */
+    $getMaterial(): Material;
+    /**
+     * Create base conversion uniforms shared across all strategies.
+     * @returns Uniforms object
+     * @ignore
+     */
+    createBaseConversionUniforms(): Record<string, any>;
+}

package/dist/types/textmode/loadables/TextmodeImage.d.ts

@@ -1,6 +1,6 @@
 import type { GLRenderer } from '../../rendering/webgl/core/Renderer';
-import type { TextmodeFont } from './font/TextmodeFont';
 import { TextmodeSource } from './TextmodeSource';
+import type { TextmodeConversionManager } from '../conversion';
 /**
  * Represents an image uploaded for textmode rendering via {@link Textmodifier.loadImage}.
  *
@@ -43,6 +43,6 @@ export declare class TextmodeImage extends TextmodeSource {
      * Texture parameters use NEAREST and CLAMP to align with grid sampling.
      * @ignore
      */
-    static $fromSource(renderer: GLRenderer, font: TextmodeFont, source: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement, gridCols: number, gridRows: number): TextmodeImage;
+    static $fromSource(renderer: GLRenderer, conversionManager: TextmodeConversionManager, source: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement, gridCols: number, gridRows: number): TextmodeImage;
     protected $getActiveTexture(): WebGLTexture;
 }

package/dist/types/textmode/loadables/TextmodeSource.d.ts

@@ -2,13 +2,10 @@ import type { GLRenderer } from '../../rendering/webgl/core/Renderer';
 import type { Material } from '../../rendering/webgl/materials/Material';
 import { TextmodeColor } from '../TextmodeColor';
 import type { TextmodeFont } from './font/TextmodeFont';
-import { type TextmodeConversionMode } from '../conversion';
+import type { ITextmodeSource } from './ITextmodeSource';
+import type { TextmodeConversionMode, TextmodeConversionManager } from '../conversion';
 type GlyphColor = [number, number, number];
-/**
- * Base class for drawable textmode sources (images, videos, canvas, etc.).
- * Handles shared WebGL texture state, material creation, and color/character settings.
- */
-export declare abstract class TextmodeSource {
+export declare abstract class TextmodeSource implements ITextmodeSource {
     protected _gl: WebGL2RenderingContext;
     protected _renderer: GLRenderer;
     protected _texture: WebGLTexture;
@@ -17,9 +14,10 @@ export declare abstract class TextmodeSource {
     protected _width: number;
     protected _height: number;
     protected _material: Material | null;
-    protected _font: TextmodeFont;
+    protected _activeFont: TextmodeFont | null;
     protected _conversionMode: TextmodeConversionMode;
     private _cachedConversionStrategy;
+    private _conversionManager;
     protected _invert: number;
     protected _flipX: number;
     protected _flipY: number;
@@ -31,143 +29,37 @@ export declare abstract class TextmodeSource {
     protected _backgroundColor: [number, number, number, number];
     protected _glyphColors: GlyphColor[];
     private _characterString;
-    private _disposeListeners;
-    private _colorFilterPalette;
-    private _colorFilterSize;
-    protected constructor(gl: WebGL2RenderingContext, renderer: GLRenderer, texture: WebGLTexture, font: TextmodeFont, originalWidth: number, originalHeight: number, width: number, height: number);
-    /**
-     * Select the conversion mode for this source.
-     *
-     * `textmode.js` includes only a single built-in conversion strategy `'brightness'`.
-     *
-     * Additional conversion strategies may be provided via add-on libraries.
-     *
-     * @param mode Conversion mode to use.
-     */
+    protected constructor(gl: WebGL2RenderingContext, renderer: GLRenderer, texture: WebGLTexture, conversionManager: TextmodeConversionManager, originalWidth: number, originalHeight: number, width: number, height: number);
     conversionMode(mode: TextmodeConversionMode): this;
-    /**
-     * Dispose of the underlying WebGL texture. Subclasses may extend for additional cleanup.
-     * @ignore
-     */
     $dispose(): void;
-    /**
-     * Register a callback to be invoked when this source is disposed.
-     * @param callback The callback function to register
-     * @ignore
-     */
-    $onDispose(callback: () => void): void;
-    /**
-     * Set the invert flag, swapping character and cell colors when enabled.
-     * @param v Invert flag
-     * @returns This instance for chaining.
-     */
     invert(v?: boolean | number): this;
-    /**
-     * Set horizontal flip indicator flag.
-     * @param v Flip flag
-     * @returns This instance for chaining.
-     */
     flipX(v?: boolean | number): this;
-    /**
-     * Set vertical flip indicator flag.
-     * @param v Flip flag
-     * @returns This instance for chaining.
-     */
     flipY(v?: boolean | number): this;
-    /**
-     * Set the character rotation in degrees (0-360).
-     * @param degrees Rotation in degrees
-     * @returns This instance for chaining.
-     */
     charRotation(degrees: number): this;
-    /**
-     * Set character color mode: `'sampled'` *(from source)* or `'fixed'`.
-     * @param mode The character color mode
-     * @returns This instance for chaining.
-     */
     charColorMode(mode: 'sampled' | 'fixed'): this;
-    /**
-     * Set cell color mode: `'sampled'` *(from source)* or `'fixed'`.
-     * @param mode The cell color mode
-     * @returns This instance for chaining.
-     */
     cellColorMode(mode: 'sampled' | 'fixed'): this;
-    /**
-     * Defines the character color when {@link charColorMode} is `'fixed'`.
-     * @param colorOrGray A grayscale value (0-255), hex string ('#RGB', '#RRGGBB', '#RRGGBBAA'), or TextmodeColor instance
-     * @param g Green component (0-255) if using RGB format
-     * @param b Blue component (0-255) if using RGB format
-     * @param a Alpha component (0-255) if using RGBA format
-     * @returns This instance for chaining.
-     */
     charColor(colorOrGray: number | string | TextmodeColor, g?: number, b?: number, a?: number): this;
-    /**
-     * Defines the cell color when {@link cellColorMode} is `'fixed'`.
-     * @param colorOrGray A grayscale value (0-255), hex string ('#RGB', '#RRGGBB', '#RRGGBBAA'), or TextmodeColor instance
-     * @param g Green component (0-255) if using RGB format
-     * @param b Blue component (0-255) if using RGB format
-     * @param a Alpha component (0-255) if using RGBA format
-     * @returns This instance for chaining.
-     */
     cellColor(colorOrGray: number | string | TextmodeColor, g?: number, b?: number, a?: number): this;
-    /**
-     * Defines the background color used for transparent pixels.
-     * @param colorOrGray A grayscale value (0-255), hex string ('#RGB', '#RRGGBB', '#RRGGBBAA'), or TextmodeColor instance
-     * @param g Green component (0-255) if using RGB format
-     * @param b Blue component (0-255) if using RGB format
-     * @param a Alpha component (0-255) if using RGBA format
-     * @returns This instance for chaining.
-     */
     background(colorOrGray: number | TextmodeColor | string, g?: number, b?: number, a?: number): this;
-    /**
-     * Applies an optional color filter palette before MRT conversion.
-     * When a palette is provided, all sampled pixels are quantized to the closest palette color
-     * prior to character/color analysis.
-     *
-     * @param palette A list of colors defined as {@link TextmodeColor} instances, hex strings, or RGBA tuples (0-255).
-     * Providing an empty array or `null` disables the filter.
-     */
-    colorFilter(palette?: TextmodeColor[] | string[] | [number, number, number][] | [number, number, number, number][] | null): this;
-    /**
-     * Define the characters to use for brightness mapping as a string.
-     * Maximum length is 255; excess characters are ignored.
-     * @param chars String of characters to map
-     * @returns This instance for chaining.
-     */
     characters(chars: string): this;
     /**
-     * Handle font change notification from the Textmodifier.
-     * @param font The new font
+     * Set the active font for the current render pass.
+     * Called by the renderer before getMaterial() to ensure the source uses the correct layer's font.
+     * @param font The font to use for this render
      * @ignore
      */
-    $handleFontChange(font: TextmodeFont): void;
-    /** Return the WebGL texture currently backing this source. */
+    $setActiveFont(font: TextmodeFont): void;
     get texture(): WebGLTexture;
-    /** Ideal width in grid cells. */
     get width(): number;
-    /** Ideal height in grid cells. */
     get height(): number;
-    /** Original pixel width. */
     get originalWidth(): number;
-    /** Original pixel height. */
     get originalHeight(): number;
-    /**
-     * Get or create the material for rendering this source.
-     * @ignore
-     */
     $getMaterial(): Material;
-    /** Hook for subclasses to run logic before material updates (e.g., upload latest frame). */
     protected $beforeMaterialUpdate(): void;
-    /** Subclasses must supply the active texture handle to bind as u_image. */
     protected abstract $getActiveTexture(): WebGLTexture;
     private _updateMaterial;
     private _setColor;
     private _applyCharacterPalette;
-    /**
-     * Create base conversion uniforms shared across all strategies.
-     * @returns Uniforms object
-     * @ignore
-     */
     createBaseConversionUniforms(): Record<string, any>;
     private _getActiveConversionStrategy;
     private _createConversionContext;

package/dist/types/textmode/loadables/font/CharacterExtractor.d.ts

@@ -3,7 +3,7 @@ import type { TyprFont } from './typr/types.ts';
  * Handles extraction of characters from font cmap tables.
  * This class encapsulates the complex logic for reading different cmap table formats.
  */
-export declare class CharacterExtraction {
+export declare class CharacterExtractor {
     /**
      * Extracts all available characters from a font's cmap tables.
      * @param font The parsed font object from Typr

package/dist/types/textmode/loadables/font/TextmodeFont.d.ts

@@ -25,6 +25,7 @@ export declare class TextmodeFont {
     private _textureAtlas;
     private _metricsCalculator;
     private _characterColorMapper;
+    private _isInitialized;
     /**
      * Creates a new TextmodeFont instance.
      * @param renderer Renderer instance for texture creation
@@ -81,6 +82,8 @@ export declare class TextmodeFont {
      * @ignore
      */
     $dispose(): void;
+    /** Returns whether this font has been initialized. @ignore */
+    get $isInitialized(): boolean;
     /** Returns the WebGL framebuffer containing the font texture atlas. */
     get fontFramebuffer(): GLFramebuffer;
     /** Returns the character map for O(1) lookups. */

package/dist/types/textmode/loadables/font/index.d.ts

@@ -1,8 +1,8 @@
 export { TextmodeFont } from './TextmodeFont.ts';
 export type { TextmodeCharacter, GlyphDimensions } from './types.ts';
-export type { TyprFont, CmapTable, CmapTableFormat4, CmapTableFormat12, HeadTable, HheaTable, HmtxTable, MaxpTable, CmapData, GlyphData, LocaTable, TyprStatic } from './typr/types.ts';
+export type { TyprFont, CmapTable, CmapTableFormat4, CmapTableFormat12, HeadTable, HheaTable, HmtxTable, MaxpTable, CmapData, GlyphData, LocaTable, TyprStatic, } from './typr/types.ts';
 export { default as Typr } from './typr/Typr.ts';
-export { CharacterExtraction } from './CharacterExtractor.ts';
+export { CharacterExtractor } from './CharacterExtractor.ts';
 export { TextureAtlas as TextureAtlasCreation } from './TextureAtlas.ts';
 export { FontMetricsCalculator as MetricsCalculation } from './MetricsCalculator.ts';
 export { CharacterColorMapper as CharacterColorMapping } from './CharacterColorMapper.ts';

package/dist/types/textmode/loadables/index.d.ts

@@ -2,5 +2,3 @@ export { TextmodeImage } from './TextmodeImage';
 export { TextmodeVideo } from './video/TextmodeVideo';
 export { TextmodeFont } from './font/TextmodeFont';
 export type { TextmodeCharacter } from './font/types';
-export type { TextmodeVideoOptions } from './video/TextmodeVideo';
-export type { TextmodeConversionMode } from '../conversion';

package/dist/types/textmode/loadables/video/ITextmodeVideo.d.ts

@@ -0,0 +1,75 @@
+import type { Material } from '../../../rendering/webgl/materials/Material';
+import type { ITextmodeSource } from '../ITextmodeSource';
+export interface ITextmodeVideo extends ITextmodeSource {
+    /**
+     * Dispose of GPU resources and cleanup video element.
+     * @ignore
+     */
+    $dispose(): void;
+    /**
+     * Update the texture with the current video frame if needed.
+     * For preloaded videos, this returns the appropriate frame texture.
+     * For live videos, this updates the texture with current video data.
+     * @ignore
+     */
+    $updateTexture(): void;
+    /**
+     * Get or create the material for rendering this video.
+     * Always updates the material to ensure the latest video frame is used.
+     * @ignore
+     */
+    $getMaterial(): Material;
+    /**
+     * Play the video.
+     * @returns Promise that resolves when playback starts
+     */
+    play(): Promise<void>;
+    /**
+     * Pause the video.
+     */
+    pause(): void;
+    /**
+     * Stop the video and reset to beginning.
+     */
+    stop(): void;
+    /**
+     * Set the playback speed.
+     * @param rate Playback rate (1.0 = normal speed)
+     */
+    speed(rate: number): this;
+    /**
+     * Set whether the video should loop.
+     * @param shouldLoop Whether to loop (defaults to true)
+     */
+    loop(shouldLoop?: boolean): this;
+    /**
+     * Set the current time position in the video.
+     * @param seconds Time in seconds
+     */
+    time(seconds: number): this;
+    /**
+     * Set the volume.
+     * @param level Volume level (0.0-1.0)
+     */
+    volume(level: number): this;
+    /**
+     * WebGL texture handle containing the current video frame.
+     */
+    readonly texture: WebGLTexture;
+    /**
+     * The underlying HTML video element.
+     */
+    readonly videoElement: HTMLVideoElement;
+    /**
+     * Current playback time in seconds.
+     */
+    readonly currentTime: number;
+    /**
+     * Total duration of the video in seconds.
+     */
+    readonly duration: number;
+    /**
+     * Whether the video is currently playing.
+     */
+    readonly isPlaying: boolean;
+}