@aarsteinmedia/dotlottie-player 6.0.4 → 6.1.0

package/CHANGELOG.md

@@ -7,6 +7,23 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 Changelog was only added since [3.2.3], so it's not exhaustive. [Please report any missing noteable changes to us](https://github.com/aarsteinmedia/dotlottie-player/issues), and we'll add them promptly.
 
+## [6.1.0] - 13-10-2025
+
+### Changed
+
+- Added attributes:
+  - `delay` – Delay playback on playOnVisible, in miliseconds
+  - `mouseout` – Action on mouseout
+  - `once` – Whether, if playOnVisible is true, to play once or anytime animation is in view
+  - `playOnClick` – Whether to toggle play on click
+  - `playOnVisible` – Play when visible
+
+## [6.0.5] - 12-09-2025
+
+### Changed
+
+- Fixed unwanted behavior with animateOnScroll.
+
 ## [6.0.3] - 13-08-2025
 
 ### Changed

package/README.md

@@ -306,12 +306,19 @@ export default defineNuxtPlugin(({ vueApp }) => {
 | `background`              | Background color                                                                                                              | `string`                                 | `undefined`       |
 | `controls`                | Show controls                                                                                                                 | `boolean`                                | `false`           |
 | `count`                   | Number of times to loop animation                                                                                             | `number`                                 | `undefined`       |
+| `delay`                   | Delay playback on playOnVisible, in miliseconds                                                                               | `number`                                 | `0`               | 
+| `description`             | Description for screen readers                                                                                                | `string`                                 | `undefined`       |
 | `direction`               | Direction of animation                                                                                                        | `1` \| `-1`                              | `1`               |
 | `dontFreezeOnBlur`        | Whether to freeze playback on window blur. This is default behavior, but can be disabled                                      | `boolean`                                | `1`               |
 | `hover`                   | Whether to play on mouse hover                                                                                                | `boolean`                                | `false`           |
+| `intermission`            | Pause between loop intrations, in miliseconds                                                                                 | `number`                                 | `0`               |
 | `loop`                    | Whether to loop animation                                                                                                     | `boolean`                                | `false`           |
 | `mode`                    | Play mode                                                                                                                     | `normal` \| `bounce`                     | `normal`          |
+| `mouseout`                | Action on mouseout                                                                                                            | `void` \| `stop` \| `pause` \| `reverse` | `stop`            |
 | `objectfit`               | Resizing of animation in container                                                                                            | `contain` \| `cover` \| `fill` \| `none` | `contain`         |
+| `once`                    | Whether, if playOnVisible is true, to play once or anytime animation is in view                                               | `boolean`                                | `false`           |
+| `playOnClick`             | Whether to toggle play on click                                                                                               | `boolean`                                | `false`           |
+| `playOnVisible`           | Play when visible                                                                                                             | `boolean`                                | `false`           |
 | `renderer`                | Renderer to use                                                                                                               | `svg` \| `canvas` \| `html`              | `svg`             |
 | `speed`                   | Animation speed                                                                                                               | `number`                                 | `1`               |
 | `src` _(required)_        | URL to LottieJSON or dotLottie                                                                                                | `string`                                 | `undefined`       |

package/dist/canvas.d.ts

@@ -0,0 +1,277 @@
+import { RendererType, PreserveAspectRatio, PlayMode } from '@aarsteinmedia/lottie-web/utils';
+export { PlayMode, PlayerEvents } from '@aarsteinmedia/lottie-web/utils';
+import * as _aarsteinmedia_lottie_web_canvas from '@aarsteinmedia/lottie-web/canvas';
+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_svg from '@aarsteinmedia/lottie-web/svg';
+
+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 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;
+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(): readonly ["animateOnScroll", "autoplay", "controls", "direction", "hover", "loop", "mode", "playOnClick", "playOnVisible", "speed", "src", "subframe"];
+    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 delay(value: number);
+    get delay(): 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 mouseout(value: 'void' | 'stop' | 'pause' | 'reverse');
+    get mouseout(): "void" | "stop" | "pause" | "reverse";
+    set objectfit(value: 'contain' | 'cover' | 'fill' | 'none' | 'scale-down');
+    get objectfit(): "contain" | "cover" | "fill" | "none" | "scale-down";
+    set once(value: boolean);
+    get once(): boolean;
+    set playOnClick(value: boolean);
+    get playOnClick(): boolean;
+    set playOnVisible(value: boolean);
+    get playOnVisible(): boolean;
+    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: typeof DotLottiePlayerBase.observedAttributes[number], _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 _handleClick(): 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 _intersectionObserverFallback;
+    private _loopComplete;
+    private _mouseEnter;
+    private _mouseLeave;
+    private _onVisibilityChange;
+    private _removeEventListeners;
+    private _switchInstance;
+    private _toggleEventListeners;
+    private _toggleSettings;
+}
+
+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>;
+}
+
+export { PlayerState, DotLottiePlayerCanvas as default, tagName };