@mediamonks/fast-image-sequence/src/lib/ImageSource.d.ts

The fast-image-sequence-renderer is a powerful package for displaying image sequences at high frame rates on websites. Use it to create smooth animations, 360° product views, or video-like sequences from series of images. Zero dependencies.

import { FastImageSequence } from './FastImageSequence.js';
import { default as ImageElement } from './ImageElement.js';
export declare const INPUT_SRC = 0;
export declare const INPUT_TAR = 1;
export declare const INPUT_CODE = 2;
export declare const INPUT_VIDEO = 3;
export type ImageSourceType = typeof INPUT_SRC | typeof INPUT_TAR | typeof INPUT_CODE | typeof INPUT_VIDEO;
/**
 * @typedef ImageSourceOptions
 *
 * This type represents the options for the ImageSource class.
 *
 * @property {((index: number) => string) | undefined} imageURL - A callback function that returns the URL of an image given its index.
 * @property {string | undefined} tarURL - The URL of the tar file containing the images for the sequence.
 * @property {string | undefined} videoURL - The URL of an MP4 video file. Frames are decoded with WebCodecs.
 * @property {boolean} useWorker - Whether to use a worker for fetching images.
 * @property {number} maxCachedImages - The number of images to cache.
 * @property {number} maxConnectionLimit - The maximum number of images to load simultaneously.
 * @property {number} hierarchicalCacheFraction - Fraction of cache reserved for hierarchical preloading, enabling responsive scrubbing through the entire sequence.
 * @property {((index: number) => boolean) | undefined} available - A callback function that returns if an image is available given its index.
 * @property {((index: number) => Promise<CanvasImageSource>) | undefined} image - A callback function that returns the image element given its index.
 * @property {number} timeout - Only start loading an image if the same frame is visible for this time (in milliseconds).
 */
export type ImageSourceOptions = {
    imageURL: ((index: number) => string) | undefined;
    tarURL: string | undefined;
    videoURL: string | undefined;
    useWorker: boolean;
    maxCachedImages: number;
    maxConnectionLimit: number;
    hierarchicalCacheFraction: number;
    available: ((index: number) => boolean) | undefined;
    image: ((index: number) => Promise<CanvasImageSource>) | undefined;
    timeout: number;
};
export default class ImageSource {
    private static defaultOptions;
    options: ImageSourceOptions;
    index: number;
    initialized: boolean;
    protected context: FastImageSequence;
    protected images: ImageElement[];
    protected downloadProgress: number;
    constructor(context: FastImageSequence, index: number, options: Partial<ImageSourceOptions>);
    initFrames(): void;
    get type(): number;
    get maxCachedImages(): number;
    /**
     * Set the maximum number of images to cache.
     * @param maxCache - The maximum number of images to cache.
     * @param onProgress - A callback function that is called with the progress of the loading.
     */
    setMaxCachedImages(maxCache: number, onProgress?: (progress: number) => void): Promise<boolean>;
    getImageURL(index: number): string | undefined;
    checkImageAvailability(): void;
    loadResources(): Promise<void>;
    process(setLoadingPriority: (maxCachedTreePriorityImages: number) => void): void;
    getLoadStatus(): {
        progress: number;
        numLoading: number;
        numLoaded: number;
        maxLoaded: number;
    };
    fetchImage(imageElement: ImageElement): Promise<CanvasImageSource>;
    destruct(): void;
    protected available(image: ImageElement, available?: boolean): boolean;
    private releaseImageWithLowestPriority;
}