@aarsteinmedia/dotlottie-player 6.0.4 → 6.0.5

package/dist/full.d.ts

@@ -4,6 +4,8 @@ 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';
 import * as _aarsteinmedia_lottie_web_light from '@aarsteinmedia/lottie-web/light';
+import * as _aarsteinmedia_lottie_web_canvas from '@aarsteinmedia/lottie-web/canvas';
+import * as _aarsteinmedia_lottie_web_svg from '@aarsteinmedia/lottie-web/svg';
 
 declare class DotLottiePlayerLight extends DotLottiePlayerBase {
     loadAnimation: typeof _aarsteinmedia_lottie_web_light.loadAnimation;
@@ -31,6 +33,34 @@ declare enum PlayerState {
 }
 declare const tagName = "dotlottie-player";
 
+declare class DotLottiePlayerCanvas extends DotLottiePlayerBase {
+    loadAnimation: typeof _aarsteinmedia_lottie_web_canvas.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.Canvas>;
+}
+
+declare class DotLottiePlayerSVG extends DotLottiePlayerBase {
+    loadAnimation: typeof _aarsteinmedia_lottie_web_svg.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>;
+}
+
 type AnimateOnScroll = boolean | '' | null;
 type Autoplay = boolean | '' | 'autoplay' | null;
 type Controls = boolean | '' | 'controls' | null;
@@ -40,7 +70,7 @@ declare global {
     interface HTMLElementTagNameMap {
         [tagName]: DotLottiePlayer | DotLottiePlayerLight;
     }
-    function dotLottiePlayer(): DotLottiePlayer | DotLottiePlayerLight;
+    function dotLottiePlayer(): DotLottiePlayer | DotLottiePlayerLight | DotLottiePlayerSVG | DotLottiePlayerCanvas;
 }
 type JSXLottiePlayer = Omit<Partial<DotLottiePlayer | DotLottiePlayerLight>, 'style'> & {
     class?: string;

package/dist/full.js

@@ -1167,7 +1167,12 @@ const notImplemented = 'Method is not implemented';
                 if (!this.animateOnScroll && this.playerState === PlayerState.Frozen) {
                     this.play();
                 }
-                if (!this._playerState.scrollY) {
+                /**
+         * If the player is a ways down the page, we need to account for this by
+         * setting _playerState.scrollY to the current scroll position. However, we
+         * also need to check that the player hasn't been scrolled past, so we check
+         * boundingClientRect as well.
+         */ if (!this._playerState.scrollY && (entries[i]?.boundingClientRect.y || 0) > 0) {
                     this._playerState.scrollY = scrollY;
                 }
                 this._playerState.visible = true;

package/dist/light.d.ts

@@ -4,6 +4,8 @@ import * as _aarsteinmedia_lottie_web_light from '@aarsteinmedia/lottie-web/ligh
 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';
+import * as _aarsteinmedia_lottie_web_canvas from '@aarsteinmedia/lottie-web/canvas';
+import * as _aarsteinmedia_lottie_web_svg from '@aarsteinmedia/lottie-web/svg';
 
 declare class DotLottiePlayer extends DotLottiePlayerBase {
     addAnimation: typeof addAnimation;
@@ -31,6 +33,34 @@ declare enum PlayerState {
 }
 declare const tagName = "dotlottie-player";
 
+declare class DotLottiePlayerCanvas extends DotLottiePlayerBase {
+    loadAnimation: typeof _aarsteinmedia_lottie_web_canvas.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.Canvas>;
+}
+
+declare class DotLottiePlayerSVG extends DotLottiePlayerBase {
+    loadAnimation: typeof _aarsteinmedia_lottie_web_svg.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>;
+}
+
 type AnimateOnScroll = boolean | '' | null;
 type Autoplay = boolean | '' | 'autoplay' | null;
 type Controls = boolean | '' | 'controls' | null;
@@ -40,7 +70,7 @@ declare global {
     interface HTMLElementTagNameMap {
         [tagName]: DotLottiePlayer | DotLottiePlayerLight;
     }
-    function dotLottiePlayer(): DotLottiePlayer | DotLottiePlayerLight;
+    function dotLottiePlayer(): DotLottiePlayer | DotLottiePlayerLight | DotLottiePlayerSVG | DotLottiePlayerCanvas;
 }
 type JSXLottiePlayer = Omit<Partial<DotLottiePlayer | DotLottiePlayerLight>, 'style'> & {
     class?: string;

package/dist/light.js

@@ -1167,7 +1167,12 @@ const notImplemented = 'Method is not implemented';
                 if (!this.animateOnScroll && this.playerState === PlayerState.Frozen) {
                     this.play();
                 }
-                if (!this._playerState.scrollY) {
+                /**
+         * If the player is a ways down the page, we need to account for this by
+         * setting _playerState.scrollY to the current scroll position. However, we
+         * also need to check that the player hasn't been scrolled past, so we check
+         * boundingClientRect as well.
+         */ if (!this._playerState.scrollY && (entries[i]?.boundingClientRect.y || 0) > 0) {
                     this._playerState.scrollY = scrollY;
                 }
                 this._playerState.visible = true;

package/dist/svg.d.ts

@@ -0,0 +1,265 @@
+import { RendererType, PreserveAspectRatio, PlayMode } from '@aarsteinmedia/lottie-web/utils';
+export { PlayMode, PlayerEvents } from '@aarsteinmedia/lottie-web/utils';
+import * as _aarsteinmedia_lottie_web_svg from '@aarsteinmedia/lottie-web/svg';
+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';
+import * as _aarsteinmedia_lottie_web_light from '@aarsteinmedia/lottie-web/light';
+import * as _aarsteinmedia_lottie_web_canvas from '@aarsteinmedia/lottie-web/canvas';
+
+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 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>;
+}
+
+declare enum PlayerState {
+    Completed = "completed",
+    Destroyed = "destroyed",
+    Error = "error",
+    Frozen = "frozen",
+    Loading = "loading",
+    Paused = "paused",
+    Playing = "playing",
+    Stopped = "stopped"
+}
+declare const tagName = "dotlottie-player";
+
+declare class DotLottiePlayerCanvas extends DotLottiePlayerBase {
+    loadAnimation: typeof _aarsteinmedia_lottie_web_canvas.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.Canvas>;
+}
+
+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 | DotLottiePlayerSVG | DotLottiePlayerCanvas;
+}
+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 DotLottiePlayerSVG extends DotLottiePlayerBase {
+    loadAnimation: typeof _aarsteinmedia_lottie_web_svg.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, DotLottiePlayerSVG as default, tagName };