@aarsteinmedia/dotlottie-player 5.0.0 → 5.0.2

package/dist/index.d.ts

@@ -1,127 +1,11 @@
-import * as Lottie from 'lottie-web/build/player/lottie.js';
-import { AnimationDirection, RendererType, AnimationSegment } from 'lottie-web';
+import { AnimationSettings, AnimationDirection, LottieManifest, AnimationData, AnimationItem, Vector2 } from '@aarsteinmedia/lottie-web';
 
-declare function renderPlayer(this: DotLottiePlayer): void;
-
-declare function renderControls(this: DotLottiePlayer): void;
-
-declare enum PlayerState {
-    Completed = "completed",
-    Destroyed = "destroyed",
-    Error = "error",
-    Frozen = "frozen",
-    Loading = "loading",
-    Paused = "paused",
-    Playing = "playing",
-    Stopped = "stopped"
-}
-declare enum PlayMode {
-    Bounce = "bounce",
-    Normal = "normal"
-}
-declare enum PlayerEvents {
-    Complete = "complete",
-    Destroyed = "destroyed",
-    Error = "error",
-    Frame = "frame",
-    Freeze = "freeze",
-    Load = "load",
-    Loop = "loop",
-    Next = "next",
-    Pause = "pause",
-    Play = "play",
-    Previous = "previous",
-    Ready = "ready",
-    Rendered = "rendered",
-    Stop = "stop"
-}
-declare enum PreserveAspectRatio {
-    Contain = "xMidYMid meet",
-    Cover = "xMidYMid slice",
-    None = "xMinYMin slice",
-    Initial = "none"
-}
-
-type BoolInt = 0 | 1;
-interface Shape {
-    a: ShapeData;
-    o: ShapeData;
-    p: ShapeData;
-    r: ShapeData;
-    s: ShapeData;
-}
-interface ShapeData {
-    a: BoolInt;
-    k: number | number[];
-    ix: number;
-}
-interface Layer {
-    ao: BoolInt;
-    bm: number;
-    completed: boolean;
-    ddd: BoolInt;
-    ip: number;
-    ks: object;
-    nm: string;
-    op: number;
-    shapes: Shape[];
-    sr: number;
-    st: number;
-    td: number;
-    ty: number;
-}
-interface LottieAsset {
-    e?: BoolInt;
-    layers?: Layer[];
-    h?: number;
-    id?: string;
-    nm?: string;
-    p?: string;
-    u?: string;
-    xt?: number;
-    w?: number;
-}
-interface LottieJSON {
-    assets?: LottieAsset[];
-    ddd: BoolInt;
-    fr: number;
-    h: number;
-    ip: number;
-    layers: Layer[];
-    markers: unknown[];
-    meta: {
-        a: string;
-        d: string;
-        g: string;
-        k: string;
-        tc: string;
-    };
-    nm: string;
-    op: number;
-    v: string;
-    w: number;
-}
-interface AnimationSettings {
-    autoplay?: Autoplay;
-    loop?: Loop;
-    direction?: AnimationDirection;
-    mode?: PlayMode;
-    speed?: number;
-}
 interface Animation extends AnimationSettings {
     id: string;
 }
 interface AnimationAttributes extends Animation {
     url: string;
 }
-interface LottieManifest {
-    animations: Animation[];
-    author?: string;
-    description?: string;
-    generator?: string;
-    keywords?: string;
-    version?: string;
-}
 type AnimateOnScroll = boolean | '' | null;
 type Autoplay = boolean | '' | 'autoplay' | null;
 type Controls = boolean | '' | 'controls' | null;
@@ -129,7 +13,7 @@ type Loop = boolean | '' | 'loop' | null;
 type Subframe = boolean | '' | null;
 declare global {
     interface HTMLElementTagNameMap {
-        'dotlottie-player': DotLottiePlayer;
+        [tagName]: DotLottiePlayer;
     }
     function dotLottiePlayer(): DotLottiePlayer;
 }
@@ -142,42 +26,92 @@ type JSXLottiePlayer = Omit<Partial<DotLottiePlayer>, 'style'> & {
 declare module 'react' {
     namespace JSX {
         interface IntrinsicElements {
-            'dotlottie-player': JSXLottiePlayer;
+            [tagName]: JSXLottiePlayer;
         }
     }
 }
 declare module 'react/jsx-runtime' {
     namespace JSX {
         interface IntrinsicElements {
-            'dotlottie-player': JSXLottiePlayer;
+            [tagName]: JSXLottiePlayer;
         }
     }
 }
 declare module 'react/jsx-dev-runtime' {
     namespace JSX {
         interface IntrinsicElements {
-            'dotlottie-player': JSXLottiePlayer;
+            [tagName]: JSXLottiePlayer;
         }
     }
 }
 
-declare class EnhancedElement extends HTMLElement {
+declare abstract class PropertyCallbackElement extends HTMLElement {
     constructor();
-    connectedCallback(): void;
+    connectedCallback(): Promise<void>;
+    propertyChangedCallback(_name: string, _oldValue: unknown, _value: unknown): void;
 }
 
-declare class DotLottiePlayer extends EnhancedElement {
-    constructor();
-    connectedCallback(): Promise<void>;
-    disconnectedCallback(): void;
-    shadow: ShadowRoot;
-    template: HTMLTemplateElement;
-    protected _renderControls: typeof renderControls;
-    protected _render: typeof renderPlayer;
+declare enum ObjectFit {
+    Contain = "contain",
+    Cover = "cover",
+    Fill = "fill",
+    None = "none",
+    ScaleDown = "scale-down"
+}
+declare enum PlayerState {
+    Completed = "completed",
+    Destroyed = "destroyed",
+    Error = "error",
+    Frozen = "frozen",
+    Loading = "loading",
+    Paused = "paused",
+    Playing = "playing",
+    Stopped = "stopped"
+}
+declare enum PlayMode {
+    Bounce = "bounce",
+    Normal = "normal"
+}
+declare enum PlayerEvents {
+    Complete = "complete",
+    Destroyed = "destroyed",
+    Error = "error",
+    Frame = "frame",
+    Freeze = "freeze",
+    Load = "load",
+    Loop = "loop",
+    Next = "next",
+    Pause = "pause",
+    Play = "play",
+    Previous = "previous",
+    Ready = "ready",
+    Rendered = "rendered",
+    Stop = "stop"
+}
+declare enum PreserveAspectRatio {
+    Contain = "xMidYMid meet",
+    Cover = "xMidYMid slice",
+    Initial = "none",
+    None = "xMinYMin slice"
+}
+declare enum RendererType {
+    Canvas = "canvas",
+    HTML = "html",
+    SVG = "svg"
+}
+
+declare function renderControls(this: DotLottiePlayer): void;
+
+declare function renderPlayer(this: DotLottiePlayer): Promise<void>;
+
+declare class DotLottiePlayer extends PropertyCallbackElement {
     static get observedAttributes(): string[];
-    attributeChangedCallback(name: string, _oldValue: unknown, value: string): Promise<void>;
     static get observedProperties(): string[];
-    propertyChangedCallback(name: string, _oldValue: unknown, value: unknown): void;
+    static get styles(): () => Promise<CSSStyleSheet>;
+    playerState: PlayerState;
+    shadow: ShadowRoot | undefined;
+    source?: string;
+    template: HTMLTemplateElement;
     set animateOnScroll(value: AnimateOnScroll);
     get animateOnScroll(): AnimateOnScroll;
     set autoplay(value: Autoplay);
@@ -200,8 +134,8 @@ declare class DotLottiePlayer extends EnhancedElement {
     get loop(): Loop;
     set mode(value: PlayMode);
     get mode(): PlayMode;
-    set objectfit(value: string);
-    get objectfit(): string;
+    set objectfit(value: ObjectFit);
+    get objectfit(): ObjectFit;
     set preserveAspectRatio(value: PreserveAspectRatio | null);
     get preserveAspectRatio(): PreserveAspectRatio | null;
     set renderer(value: RendererType);
@@ -214,25 +148,10 @@ declare class DotLottiePlayer extends EnhancedElement {
     get src(): string | null;
     set subframe(value: Subframe);
     get subframe(): Subframe;
-    private _multiAnimationSettings;
-    getMultiAnimationSettings(): AnimationSettings[];
-    setMultiAnimationSettings(settings: AnimationSettings[]): void;
-    private _segment?;
-    setSegment(segment: AnimationSegment): void;
-    getSegment(): Lottie.AnimationSegment | undefined;
-    protected _container: Element | null;
-    playerState?: PlayerState;
-    protected _isSettingsOpen: boolean;
-    protected _seeker: number;
-    private _currentAnimation;
-    private _animations;
-    private _intersectionObserver?;
-    private _lottieInstance;
-    protected _identifier: string;
+    protected _container: HTMLElement | null;
     protected _errorMessage: string;
-    private _isBounce;
-    private _isDotLottie;
-    private _manifest;
+    protected _identifier: string;
+    protected _isSettingsOpen: boolean;
     protected _playerState: {
         prev: PlayerState;
         count: number;
@@ -241,63 +160,83 @@ declare class DotLottiePlayer extends EnhancedElement {
         scrollY: number;
         scrollTimeout: NodeJS.Timeout | null;
     };
-    private _getOptions;
-    private _addIntersectionObserver;
-    load(src: string | null): Promise<void>;
-    getManifest(): LottieManifest;
-    private _toggleEventListeners;
-    private _addEventListeners;
-    private _removeEventListeners;
-    private _loopComplete;
-    private _enterFrame;
-    private _complete;
-    private _DOMLoaded;
-    private _dataReady;
-    private _dataFailed;
-    private _handleWindowBlur;
-    private _mouseEnter;
-    private _mouseLeave;
-    private _onVisibilityChange;
-    private _handleScroll;
-    protected _handleSeekChange({ target }: Event): void;
-    private _isLottie;
+    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(configs: AnimationAttributes[], fileName?: string, shouldDownload?: boolean): Promise<{
-        result?: void | ArrayBuffer;
+        result?: null | ArrayBuffer;
         success: boolean;
         error?: string;
     }>;
-    getLottie(): Lottie.AnimationItem | null;
-    play(): Promise<void>;
-    pause(): void;
-    stop(): void;
+    attributeChangedCallback(name: string, _oldValue: unknown, value: string): Promise<void>;
+    connectedCallback(): Promise<void>;
+    convert({ animations: animationsFromProps, fileName, manifest, shouldDownload, src: srcFromProps, typeCheck, }: {
+        typeCheck?: boolean;
+        manifest?: LottieManifest;
+        animations?: AnimationData[];
+        src?: string;
+        fileName?: string;
+        shouldDownload?: boolean;
+    }): Promise<ArrayBuffer | null | undefined>;
     destroy(): void;
+    disconnectedCallback(): void;
+    getLottie(): AnimationItem | null;
+    getManifest(): LottieManifest | undefined;
+    getMultiAnimationSettings(): AnimationSettings[];
+    getSegment(): Vector2 | undefined;
+    load(src: string | null): Promise<void>;
+    next(): void;
+    pause(): void;
+    play(): void;
+    prev(): void;
+    propertyChangedCallback(name: string, _oldValue: unknown, value: unknown): void;
+    reload(): Promise<void>;
     seek(value: number | string): void;
-    snapshot(shouldDownload?: boolean, name?: string): string | null;
-    setSubframe(value: boolean): void;
     setCount(value: number): void;
-    protected _freeze(): void;
-    reload(): Promise<void>;
-    setSpeed(value?: number): void;
     setDirection(value: AnimationDirection): void;
     setLoop(value: boolean): void;
-    togglePlay(): void | Promise<void>;
-    toggleLoop(): 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;
-    private _toggleSettings;
-    protected _handleSettingsClick: ({ target }: Event) => void;
+    toggleLoop(): void;
+    togglePlay(): void;
+    protected _freeze(): void;
     protected _handleBlur(): void;
+    protected _handleSeekChange({ target }: Event): void;
+    protected _handleSettingsClick: ({ target }: Event) => void;
+    private _addEventListeners;
+    private _addIntersectionObserver;
+    private _complete;
+    private _dataFailed;
+    private _dataReady;
+    private _DOMLoaded;
+    private _enterFrame;
+    private _getOptions;
+    private _handleScroll;
+    private _handleWindowBlur;
+    private _isLottie;
+    private _loopComplete;
+    private _mouseEnter;
+    private _mouseLeave;
+    private _onVisibilityChange;
+    private _removeEventListeners;
     private _switchInstance;
-    next(): void;
-    prev(): void;
-    convert({ animations, fileName, manifest, shouldDownload, src, typeCheck, }: {
-        typeCheck?: boolean;
-        manifest?: LottieManifest;
-        animations?: LottieJSON[];
-        src?: string;
-        fileName?: string;
-        shouldDownload?: boolean;
-    }): Promise<string | void | ArrayBuffer>;
-    static get styles(): CSSStyleSheet;
+    private _toggleEventListeners;
+    private _toggleSettings;
 }
 
 declare const tagName = "dotlottie-player";