@aarsteinmedia/dotlottie-player/dist/light.d.ts

Web Component for playing Lottie animations in your web app.

import { RendererType, PreserveAspectRatio, PlayMode } from '@aarsteinmedia/lottie-web/utils';
export { PlayMode, PlayerEvents } from '@aarsteinmedia/lottie-web/utils';
import * as _aarsteinmedia_lottie_web_light from '@aarsteinmedia/lottie-web/light';
import * as _aarsteinmedia_lottie_web from '@aarsteinmedia/lottie-web';
import { Vector2, AnimationConfiguration, AnimationData, AnimationDirection, AddAnimationParams, Result, ConvertParams, AnimationItem, LottieManifest, AnimationSettings } from '@aarsteinmedia/lottie-web';
import { addAnimation, convert } from '@aarsteinmedia/lottie-web/dotlottie';

declare class DotLottiePlayer extends DotLottiePlayerBase {
    addAnimation: typeof addAnimation;
    convert: typeof convert;
    loadAnimation: typeof _aarsteinmedia_lottie_web.loadAnimation;
    protected setOptions({ container, hasAutoplay, hasLoop, initialSegment, preserveAspectRatio, rendererType }: {
        container?: HTMLElement;
        rendererType: RendererType;
        initialSegment?: Vector2;
        hasAutoplay: boolean;
        hasLoop: boolean;
        preserveAspectRatio: PreserveAspectRatio;
    }): AnimationConfiguration<RendererType>;
}

declare enum PlayerState {
    Completed = "completed",
    Destroyed = "destroyed",
    Error = "error",
    Frozen = "frozen",
    Loading = "loading",
    Paused = "paused",
    Playing = "playing",
    Stopped = "stopped"
}
declare const tagName = "dotlottie-player";

type AnimateOnScroll = boolean | '' | null;
type Autoplay = boolean | '' | 'autoplay' | null;
type Controls = boolean | '' | 'controls' | null;
type Loop = boolean | '' | 'loop' | null;
type Subframe = boolean | '' | null;
declare global {
    interface HTMLElementTagNameMap {
        [tagName]: DotLottiePlayer | DotLottiePlayerLight;
    }
    function dotLottiePlayer(): DotLottiePlayer | DotLottiePlayerLight;
}
type JSXLottiePlayer = Omit<Partial<DotLottiePlayer | DotLottiePlayerLight>, 'style'> & {
    class?: string;
    ref?: React.RefObject<unknown>;
    style?: React.CSSProperties;
    src: string;
};
declare module 'react' {
    namespace JSX {
        interface IntrinsicElements {
            [tagName]: JSXLottiePlayer;
        }
    }
}
declare module 'react/jsx-runtime' {
    namespace JSX {
        interface IntrinsicElements {
            [tagName]: JSXLottiePlayer;
        }
    }
}
declare module 'react/jsx-dev-runtime' {
    namespace JSX {
        interface IntrinsicElements {
            [tagName]: JSXLottiePlayer;
        }
    }
}

declare abstract class PropertyCallbackElement extends HTMLElement {
    constructor();
    connectedCallback(): void;
    propertyChangedCallback(_name: string, _oldValue: unknown, _value: unknown): void;
}

declare function renderControls(this: DotLottiePlayerBase): void;

declare function renderPlayer(this: DotLottiePlayerBase): Promise<void>;

declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
    static get observedAttributes(): string[];
    static get observedProperties(): string[];
    static get styles(): () => Promise<CSSStyleSheet>;
    isLight: boolean;
    playerState: PlayerState;
    shadow: ShadowRoot | undefined;
    source?: string;
    template?: HTMLTemplateElement;
    set animateOnScroll(value: AnimateOnScroll);
    get animateOnScroll(): AnimateOnScroll;
    get animations(): AnimationData[];
    set autoplay(value: Autoplay);
    get autoplay(): Autoplay;
    set background(value: string);
    get background(): string;
    set controls(value: Controls);
    get controls(): Controls;
    set count(value: number);
    get count(): number;
    get currentAnimation(): number;
    set description(value: string | null);
    get description(): string | null;
    set direction(value: AnimationDirection);
    get direction(): AnimationDirection;
    set dontFreezeOnBlur(value: boolean);
    get dontFreezeOnBlur(): boolean;
    set hover(value: boolean);
    get hover(): boolean;
    set intermission(value: number);
    get intermission(): number;
    get isDotLottie(): boolean;
    set loop(value: Loop);
    get loop(): Loop;
    set mode(value: PlayMode);
    get mode(): PlayMode;
    set objectfit(value: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down');
    get objectfit(): "contain" | "cover" | "fill" | "none" | "scale-down";
    set preserveAspectRatio(value: PreserveAspectRatio | null);
    get preserveAspectRatio(): PreserveAspectRatio | null;
    set renderer(value: RendererType);
    get renderer(): RendererType;
    set simple(value: boolean);
    get simple(): boolean;
    set speed(value: number);
    get speed(): number;
    set src(value: string | null);
    get src(): string | null;
    set subframe(value: Subframe);
    get subframe(): Subframe;
    protected _container: HTMLElement | null;
    protected _errorMessage: string;
    protected _identifier: string;
    protected _isSettingsOpen: boolean;
    protected _playerState: {
        prev: PlayerState;
        count: number;
        loaded: boolean;
        visible: boolean;
        scrollY: number;
        scrollTimeout: NodeJS.Timeout | null;
    };
    protected _render: typeof renderPlayer;
    protected _renderControls: typeof renderControls;
    protected _seeker: number;
    private _animations;
    private _currentAnimation;
    private _intersectionObserver?;
    private _isBounce;
    private _isDotLottie;
    private _lottieInstance;
    private _manifest?;
    private _multiAnimationSettings;
    private _segment?;
    constructor();
    addAnimation(_params: AddAnimationParams): Promise<Result>;
    attributeChangedCallback(name: string, _oldValue: unknown, value: string): Promise<void>;
    connectedCallback(): void;
    convert(_params: ConvertParams): Promise<Result>;
    destroy(): void;
    disconnectedCallback(): void;
    getLottie(): AnimationItem | null;
    getManifest(): LottieManifest | undefined;
    getMultiAnimationSettings(): AnimationSettings[];
    getSegment(): Vector2 | undefined;
    load(src: string | null): Promise<void>;
    loadAnimation(_config: AnimationConfiguration): AnimationItem;
    next(): void;
    pause(): void;
    play(): void;
    prev(): void;
    propertyChangedCallback(name: string, _oldValue: unknown, value: unknown): void;
    reload(): Promise<void>;
    seek(value: number | string): void;
    setCount(value: number): void;
    setDirection(value: AnimationDirection): void;
    setLoop(value: boolean): void;
    setMultiAnimationSettings(settings: AnimationSettings[]): void;
    setSegment(segment: Vector2): void;
    setSpeed(value?: number): void;
    setSubframe(value: boolean): void;
    snapshot(shouldDownload?: boolean, name?: string): string | null;
    stop(): void;
    toggleBoomerang(): void;
    toggleLoop(): void;
    togglePlay(): void;
    protected _freeze(): void;
    protected _handleBlur(): void;
    protected _handleSeekChange({ target }: Event): void;
    protected _handleSettingsClick({ target }: Event): void;
    protected setOptions(_options: {
        container?: HTMLElement;
        rendererType: RendererType;
        initialSegment?: Vector2;
        hasAutoplay: boolean;
        hasLoop: boolean;
        preserveAspectRatio: PreserveAspectRatio;
    }): AnimationConfiguration<RendererType.SVG | RendererType.Canvas | RendererType.HTML>;
    private _addEventListeners;
    private _addIntersectionObserver;
    private _complete;
    private _dataFailed;
    private _dataReady;
    private _DOMLoaded;
    private _enterFrame;
    private _getOptions;
    private _handleScroll;
    private _handleWindowBlur;
    private _loopComplete;
    private _mouseEnter;
    private _mouseLeave;
    private _onVisibilityChange;
    private _removeEventListeners;
    private _switchInstance;
    private _toggleEventListeners;
    private _toggleSettings;
}

declare class DotLottiePlayerLight extends DotLottiePlayerBase {
    loadAnimation: typeof _aarsteinmedia_lottie_web_light.loadAnimation;
    get renderer(): RendererType;
    constructor();
    protected setOptions({ container, hasAutoplay, hasLoop, initialSegment, preserveAspectRatio, }: {
        container?: HTMLElement;
        rendererType: RendererType;
        initialSegment?: Vector2;
        hasAutoplay: boolean;
        hasLoop: boolean;
        preserveAspectRatio: PreserveAspectRatio;
    }): AnimationConfiguration<RendererType.SVG>;
}

export { PlayerState, DotLottiePlayerLight as default, tagName };