@aarsteinmedia/dotlottie-player 6.0.5 → 6.1.1

package/dist/canvas.js

@@ -303,7 +303,7 @@ const pauseIcon = /* HTML */ `
         'h'
     ];
     return mandatory.every((field)=>Object.hasOwn(json, field));
-}, frameOutput = (frame)=>((frame ?? 0) + 1).toString().padStart(3, '0');
+}, isTouch = ()=>'ontouchstart' in window, frameOutput = (frame)=>((frame ?? 0) + 1).toString().padStart(3, '0');
 
 const notImplemented = 'Method is not implemented';
 /**
@@ -319,7 +319,11 @@ const notImplemented = 'Method is not implemented';
             'direction',
             'hover',
             'loop',
+            // 'mouseout',
             'mode',
+            'playOnClick',
+            'playOnVisible',
+            'selector',
             'speed',
             'src',
             'subframe'
@@ -397,6 +401,18 @@ const notImplemented = 'Method is not implemented';
         return this._currentAnimation;
     }
     /**
+   * Delay playback on playOnVisible.
+   */ set delay(value) {
+        this.setAttribute('delay', value.toString());
+    }
+    get delay() {
+        const val = this.getAttribute('delay');
+        if (val) {
+            return Number(val);
+        }
+        return 0;
+    }
+    /**
    * Description for screen readers.
    */ set description(value) {
         if (value) {
@@ -473,6 +489,26 @@ const notImplemented = 'Method is not implemented';
         return PlayMode.Normal;
     }
     /**
+   * Action on mouseout.
+   */ set mouseout(value) {
+        this.setAttribute('mouseout', value);
+    }
+    get mouseout() {
+        const val = this.getAttribute('mouseout');
+        switch(val){
+            case 'void':
+            case 'pause':
+            case 'reverse':
+                {
+                    return val;
+                }
+            default:
+                {
+                    return 'stop';
+                }
+        }
+    }
+    /**
    * Resizing to container.
    */ set objectfit(value) {
         this.setAttribute('objectfit', value);
@@ -485,6 +521,34 @@ const notImplemented = 'Method is not implemented';
         return ObjectFit.Contain;
     }
     /**
+   * Whether to play once or reset,
+   * if playOnVisible is true.
+   */ set once(value) {
+        this.setAttribute('once', value.toString());
+    }
+    get once() {
+        const val = this.getAttribute('once');
+        return val === 'true' || val === '' || val === '1';
+    }
+    /**
+   * Whether to toggle play on click.
+   */ set playOnClick(value) {
+        this.setAttribute('playOnClick', value.toString());
+    }
+    get playOnClick() {
+        const val = this.getAttribute('playOnClick');
+        return val === 'true' || val === '' || val === '1';
+    }
+    /**
+   * Play when visible.
+   */ set playOnVisible(value) {
+        this.setAttribute('playOnVisible', value.toString());
+    }
+    get playOnVisible() {
+        const val = this.getAttribute('playOnVisible');
+        return val === 'true' || val === '' || val === '1';
+    }
+    /**
    * Resizing to container (Deprecated).
    */ set preserveAspectRatio(value) {
         this.setAttribute('preserveAspectRatio', value || PreserveAspectRatio.Contain);
@@ -509,6 +573,18 @@ const notImplemented = 'Method is not implemented';
         return RendererType.SVG;
     }
     /**
+   * Play on clicked element by id attribute, other than animation.
+   */ set selector(value) {
+        if (value) {
+            this.setAttribute('selector', value);
+            return;
+        }
+        this.removeAttribute('selector');
+    }
+    get selector() {
+        return this.getAttribute('selector');
+    }
+    /**
    * Hide advanced controls.
    */ set simple(value) {
         this.setAttribute('simple', value.toString());
@@ -578,6 +654,7 @@ const notImplemented = 'Method is not implemented';
         this._enterFrame = this._enterFrame.bind(this);
         this._freeze = this._freeze.bind(this);
         this._handleBlur = this._handleBlur.bind(this);
+        this._handleClick = this._handleClick.bind(this);
         this._handleScroll = this._handleScroll.bind(this);
         this._handleSeekChange = this._handleSeekChange.bind(this);
         this._handleWindowBlur = this._handleWindowBlur.bind(this);
@@ -607,74 +684,119 @@ const notImplemented = 'Method is not implemented';
     /**
    * Runs when the value of an attribute is changed on the component.
    */ async attributeChangedCallback(name, _oldValue, value) {
-        if (!this._lottieInstance || !this.shadow) {
+        if (!this._lottieInstance || !this.shadow || !this._container) {
             return;
         }
-        if (name === 'animateOnScroll') {
-            if (value === '' || Boolean(value)) {
-                this._lottieInstance.autoplay = false;
-                addEventListener('scroll', this._handleScroll, {
-                    capture: true,
-                    passive: true
-                });
-                return;
-            }
-            removeEventListener('scroll', this._handleScroll, true);
-        }
-        if (name === 'autoplay') {
-            if (this.animateOnScroll) {
-                return;
-            }
-            if (value === '' || Boolean(value)) {
-                this.play();
-                return;
-            }
-            this.stop();
-        }
-        if (name === 'controls') {
-            this._renderControls();
-        }
-        if (name === 'direction') {
-            if (Number(value) === -1) {
-                this.setDirection(-1);
-                return;
-            }
-            this.setDirection(1);
-        }
-        if (name === 'hover' && this._container) {
-            if (value === '' || Boolean(value)) {
-                this._container.addEventListener('mouseenter', this._mouseEnter);
-                this._container.addEventListener('mouseleave', this._mouseLeave);
-                return;
-            }
-            this._container.removeEventListener('mouseenter', this._mouseEnter);
-            this._container.removeEventListener('mouseleave', this._mouseLeave);
-        }
-        if (name === 'loop') {
-            const toggleLoop = this.shadow.querySelector('.toggleLoop');
-            if (toggleLoop instanceof HTMLButtonElement) {
-                toggleLoop.dataset.active = value;
-            }
-            this.setLoop(value === '' || Boolean(value));
-        }
-        if (name === 'mode') {
-            const toggleBoomerang = this.shadow.querySelector('.toggleBoomerang');
-            if (toggleBoomerang instanceof HTMLButtonElement) {
-                toggleBoomerang.dataset.active = (value === PlayMode.Bounce).toString();
-            }
-            this._isBounce = value === PlayMode.Bounce;
-        }
-        if (name === 'speed') {
-            const val = Number(value);
-            if (val && !isNaN(val)) {
-                this.setSpeed(val);
-            }
-        }
-        if (name === 'src') {
-            await this.load(value);
-        }
-        if (name === 'subframe') {
-            this.setSubframe(value === '' || Boolean(value));
+        switch(name){
+            case 'animateOnScroll':
+                {
+                    if (value === '' || Boolean(value)) {
+                        this._lottieInstance.autoplay = false;
+                        addEventListener('scroll', this._handleScroll, {
+                            capture: true,
+                            passive: true
+                        });
+                        return;
+                    }
+                    removeEventListener('scroll', this._handleScroll, true);
+                    break;
+                }
+            case 'autoplay':
+                {
+                    if (this.animateOnScroll || this.playOnVisible) {
+                        return;
+                    }
+                    if (value === '' || Boolean(value)) {
+                        this.play();
+                        return;
+                    }
+                    this.stop();
+                    break;
+                }
+            case 'controls':
+                {
+                    this._renderControls();
+                    break;
+                }
+            case 'direction':
+                {
+                    if (Number(value) === -1) {
+                        this.setDirection(-1);
+                        return;
+                    }
+                    this.setDirection(1);
+                    break;
+                }
+            case 'hover':
+                {
+                    if (value === '' || Boolean(value)) {
+                        this._container.addEventListener('mouseenter', this._mouseEnter);
+                        this._container.addEventListener('mouseleave', this._mouseLeave);
+                        return;
+                    }
+                    this._container.removeEventListener('mouseenter', this._mouseEnter);
+                    this._container.removeEventListener('mouseleave', this._mouseLeave);
+                    break;
+                }
+            case 'loop':
+                {
+                    const toggleLoop = this.shadow.querySelector('.toggleLoop');
+                    if (toggleLoop instanceof HTMLButtonElement) {
+                        toggleLoop.dataset.active = value;
+                    }
+                    this.setLoop(value === '' || Boolean(value));
+                    break;
+                }
+            case 'mode':
+                {
+                    const toggleBoomerang = this.shadow.querySelector('.toggleBoomerang');
+                    if (toggleBoomerang instanceof HTMLButtonElement) {
+                        toggleBoomerang.dataset.active = (value === PlayMode.Bounce).toString();
+                    }
+                    this._isBounce = value === PlayMode.Bounce;
+                    break;
+                }
+            case 'playOnClick':
+                {
+                    if (value === '' || Boolean(value)) {
+                        this._lottieInstance.autoplay = false;
+                        this._container.addEventListener('click', this._handleClick);
+                        return;
+                    }
+                    this._container.removeEventListener('click', this._handleClick);
+                    break;
+                }
+            case 'playOnVisible':
+                {
+                    if (value === '' || Boolean(value)) {
+                        this._lottieInstance.autoplay = false;
+                    }
+                    break;
+                }
+            case 'selector':
+                {
+                    const selector = document.getElementById(this.selector ?? '');
+                    selector?.addEventListener('click', this._handleClick);
+                    break;
+                }
+            case 'speed':
+                {
+                    const val = Number(value);
+                    if (val && !isNaN(val)) {
+                        this.setSpeed(val);
+                    }
+                    break;
+                }
+            case 'src':
+                {
+                    await this.load(value);
+                    break;
+                }
+            case 'subframe':
+                {
+                    this.setSubframe(value === '' || Boolean(value));
+                    break;
+                }
         }
     }
     /**
@@ -688,14 +810,14 @@ const notImplemented = 'Method is not implemented';
                     throw new Error('Missing Shadow element');
                 }
                 this._container = this.shadow.querySelector('.animation');
+                // Setup lottie player
+                await this.load(this.src);
                 // Add listener for Visibility API's change event.
                 if (typeof document.hidden !== 'undefined') {
                     document.addEventListener('visibilitychange', this._onVisibilityChange);
                 }
                 // Add intersection observer for detecting component being out-of-view.
                 this._addIntersectionObserver();
-                // Setup lottie player
-                await this.load(this.src);
                 this.dispatchEvent(new CustomEvent(PlayerEvents.Rendered));
             })();
         } catch (error) {
@@ -765,13 +887,27 @@ const notImplemented = 'Method is not implemented';
             if (!animations || animations.some((animation)=>!isLottie(animation))) {
                 throw new Error('Broken or corrupted file');
             }
+            const ldScript = this.parentElement?.querySelector('script[type="application/ld+json"]');
+            if (ldScript) {
+                const settings = JSON.parse(ldScript.innerHTML);
+                if (settings.selector) {
+                    this.selector = settings.selector;
+                }
+                if (settings.segment) {
+                    this.setSegment(settings.segment);
+                }
+                if (settings.multiAnimationSettings) {
+                    this.setMultiAnimationSettings(settings.multiAnimationSettings);
+                }
+            }
             this._isBounce = this.mode === PlayMode.Bounce;
             if (this._multiAnimationSettings.length > 0 && this._multiAnimationSettings[this._currentAnimation]?.mode) {
                 this._isBounce = this._multiAnimationSettings[this._currentAnimation]?.mode === PlayMode.Bounce;
             }
+            // Relevant for dotLotties with multiple animations
             const firstAnimation = manifest?.animations[0];
             if (firstAnimation) {
-                firstAnimation.autoplay = this.autoplay;
+                firstAnimation.autoplay = !this.animateOnScroll && !this.playOnVisible && this.autoplay;
                 firstAnimation.loop = this.loop;
             }
             this._isDotLottie = isDotLottie;
@@ -779,7 +915,7 @@ const notImplemented = 'Method is not implemented';
             this._manifest = manifest ?? {
                 animations: [
                     {
-                        autoplay: !this.animateOnScroll && this.autoplay,
+                        autoplay: !this.animateOnScroll && !this.playOnVisible && this.autoplay,
                         direction: this.direction,
                         id: createElementID(),
                         loop: this.loop,
@@ -791,7 +927,8 @@ const notImplemented = 'Method is not implemented';
             // Clear previous animation, if any
             this._lottieInstance?.destroy();
             this.playerState = PlayerState.Stopped;
-            if (!this.animateOnScroll && (this.autoplay || this._multiAnimationSettings[this._currentAnimation]?.autoplay)) {
+            if (!this.animateOnScroll && // !this.playOnVisible &&
+            (this.autoplay || this._multiAnimationSettings[this._currentAnimation]?.autoplay || this.playOnVisible)) {
                 this.playerState = PlayerState.Playing;
             }
             // Initialize lottie player and load animation
@@ -806,20 +943,18 @@ const notImplemented = 'Method is not implemented';
             this._lottieInstance.setDirection(direction);
             this._lottieInstance.setSubframe(Boolean(this.subframe));
             // Start playing if autoplay is enabled
-            if (this.autoplay || this.animateOnScroll) {
-                if (this.direction === -1) {
-                    this.seek('99%');
-                }
-                if (!('IntersectionObserver' in window)) {
-                    if (!this.animateOnScroll) {
-                        this.play();
-                    }
-                    this._playerState.visible = true;
-                }
-                this._addIntersectionObserver();
+            if ((this.autoplay || this.animateOnScroll || this.playOnVisible) && this.direction === -1) {
+                this.seek('99%');
+            // if (!('IntersectionObserver' in window)) {
+            //   if (!this.animateOnScroll) {
+            //     this.play()
+            //   }
+            //   this._playerState.visible = true
+            // }
+            // this._addIntersectionObserver()
             }
             this._renderControls();
-            if (this.autoplay) {
+            if (this.autoplay || this.playOnVisible) {
                 const togglePlay = this.shadow?.querySelector('.togglePlay');
                 if (togglePlay) {
                     togglePlay.innerHTML = pauseIcon;
@@ -848,11 +983,15 @@ const notImplemented = 'Method is not implemented';
             return;
         }
         this._playerState.prev = this.playerState;
+        let hasError = false;
         try {
             this._lottieInstance.pause();
             this.dispatchEvent(new CustomEvent(PlayerEvents.Pause));
+        } catch (error) {
+            hasError = true;
+            console.error(error);
         } finally{
-            this.playerState = PlayerState.Paused;
+            this.playerState = hasError ? PlayerState.Error : PlayerState.Paused;
         }
     }
     /**
@@ -862,11 +1001,15 @@ const notImplemented = 'Method is not implemented';
             return;
         }
         this._playerState.prev = this.playerState;
+        let hasError = false;
         try {
             this._lottieInstance.play();
             this.dispatchEvent(new CustomEvent(PlayerEvents.Play));
+        } catch (error) {
+            hasError = true;
+            console.error(error);
         } finally{
-            this.playerState = PlayerState.Playing;
+            this.playerState = hasError ? PlayerState.Error : PlayerState.Playing;
         }
     }
     /**
@@ -1124,6 +1267,14 @@ const notImplemented = 'Method is not implemented';
         }, 200);
     }
     /**
+   * Handle click.
+   */ _handleClick() {
+        if (!this.playOnClick && !this.selector) {
+            return;
+        }
+        this.togglePlay();
+    }
+    /**
    * Handles click and drag actions on the progress track.
    */ _handleSeekChange({ target }) {
         if (!(target instanceof HTMLInputElement) || !this._lottieInstance || isNaN(Number(target.value))) {
@@ -1151,7 +1302,16 @@ const notImplemented = 'Method is not implemented';
     /**
    * Add IntersectionObserver.
    */ _addIntersectionObserver() {
-        if (!this._container || this._intersectionObserver || !('IntersectionObserver' in window)) {
+        if (!this._container || this._intersectionObserver) {
+            return;
+        }
+        if (!('IntersectionObserver' in window)) {
+            this._intersectionObserverFallback();
+            removeEventListener('scroll', this._intersectionObserverFallback, true);
+            addEventListener('scroll', this._intersectionObserverFallback, {
+                capture: true,
+                passive: true
+            });
             return;
         }
         this._intersectionObserver = new IntersectionObserver((entries)=>{
@@ -1164,9 +1324,19 @@ const notImplemented = 'Method is not implemented';
                     this._playerState.visible = false;
                     continue;
                 }
-                if (!this.animateOnScroll && this.playerState === PlayerState.Frozen) {
+                if (!this.animateOnScroll && !this.playOnVisible && this.playerState === PlayerState.Frozen) {
                     this.play();
                 }
+                if (this.playOnVisible) {
+                    if (this.playerState === PlayerState.Completed && !this.once) {
+                        this.playerState = PlayerState.Playing;
+                        this._lottieInstance?.goToAndPlay(this.direction === 1 ? 0 : this._lottieInstance.totalFrames);
+                    } else {
+                        setTimeout(()=>{
+                            this.play();
+                        }, this.delay);
+                    }
+                }
                 /**
          * 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
@@ -1314,6 +1484,20 @@ const notImplemented = 'Method is not implemented';
             this.play();
         }
     }
+    _intersectionObserverFallback() {
+        if (!this._container) {
+            return;
+        }
+        const { bottom, left, right, top } = this._container.getBoundingClientRect();
+        this._playerState.visible = top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
+        if (this.autoplay || this.playOnVisible || this.playerState === PlayerState.Playing || this.playerState === PlayerState.Frozen) {
+            if (this._playerState.visible) {
+                this.play();
+            } else {
+                this._freeze();
+            }
+        }
+    }
     _loopComplete() {
         if (!this._lottieInstance) {
             return;
@@ -1353,15 +1537,51 @@ const notImplemented = 'Method is not implemented';
     /**
    * Handle MouseEnter.
    */ _mouseEnter() {
-        if (this.hover && this.playerState !== PlayerState.Playing) {
+        if (!this.hover || !this._lottieInstance || isTouch()) {
+            return;
+        }
+        if (this.mouseout === 'reverse') {
+            this._lottieInstance.setDirection(1);
+        }
+        if (this.playerState === PlayerState.Completed) {
+            this._lottieInstance.goToAndPlay(0, true);
+            this.playerState = PlayerState.Playing;
+            return;
+        }
+        if (this.playerState !== PlayerState.Playing) {
             this.play();
         }
     }
     /**
    * Handle MouseLeave.
    */ _mouseLeave() {
-        if (this.hover && this.playerState === PlayerState.Playing) {
-            this.stop();
+        if (!this.hover || !this._lottieInstance || isTouch()) {
+            return;
+        }
+        switch(this.mouseout){
+            case 'void':
+                {
+                    break;
+                }
+            case 'pause':
+                {
+                    this.pause();
+                    break;
+                }
+            case 'reverse':
+                {
+                    // const { direction = 1 } =
+                    //   this._multiAnimationSettings.length > 0 ?
+                    //     this._multiAnimationSettings[this._currentAnimation + 1] ?? { direction: 1 } : this,
+                    //   newDirection = direction * -1 as AnimationDirection
+                    this._lottieInstance.setDirection(-1);
+                    this.play();
+                    break;
+                }
+            default:
+                {
+                    this.stop();
+                }
         }
     }
     /**
@@ -1433,9 +1653,27 @@ const notImplemented = 'Method is not implemented';
             this._lottieInstance[method]('data_ready', this._dataReady);
             this._lottieInstance[method]('data_failed', this._dataFailed);
         }
-        if (this._container && this.hover) {
-            this._container[method]('mouseenter', this._mouseEnter);
-            this._container[method]('mouseleave', this._mouseLeave);
+        if (this.selector) {
+            const selector = document.getElementById(this.selector);
+            if (selector) {
+                if (this.hover) {
+                    selector[method]('mouseenter', this._mouseEnter);
+                    selector[method]('mouseleave', this._mouseLeave);
+                } else {
+                    selector[method]('click', this._handleClick);
+                }
+            } else {
+                this.selector = null;
+            }
+        }
+        if (this._container && !this.selector) {
+            if (this.hover) {
+                this._container[method]('mouseenter', this._mouseEnter);
+                this._container[method]('mouseleave', this._mouseLeave);
+            }
+            if (this.playOnClick) {
+                this._container[method]('click', this._handleClick);
+            }
         }
         window[method]('focus', this._handleWindowBlur, {
             capture: false,

package/dist/full.d.ts

@@ -111,7 +111,7 @@ 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 observedAttributes(): readonly ["animateOnScroll", "autoplay", "controls", "direction", "hover", "loop", "mode", "playOnClick", "playOnVisible", "selector", "speed", "src", "subframe"];
     static get observedProperties(): string[];
     static get styles(): () => Promise<CSSStyleSheet>;
     isLight: boolean;
@@ -131,6 +131,8 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
     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);
@@ -146,12 +148,22 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
     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 selector(value: string | null);
+    get selector(): string | null;
     set simple(value: boolean);
     get simple(): boolean;
     set speed(value: number);
@@ -186,7 +198,7 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
     private _segment?;
     constructor();
     addAnimation(_params: AddAnimationParams): Promise<Result>;
-    attributeChangedCallback(name: string, _oldValue: unknown, value: string): Promise<void>;
+    attributeChangedCallback(name: typeof DotLottiePlayerBase.observedAttributes[number], _oldValue: unknown, value: string): Promise<void>;
     connectedCallback(): void;
     convert(_params: ConvertParams): Promise<Result>;
     destroy(): void;
@@ -218,6 +230,7 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
     togglePlay(): void;
     protected _freeze(): void;
     protected _handleBlur(): void;
+    protected _handleClick(): void;
     protected _handleSeekChange({ target }: Event): void;
     protected _handleSettingsClick({ target }: Event): void;
     protected setOptions(_options: {
@@ -238,6 +251,7 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
     private _getOptions;
     private _handleScroll;
     private _handleWindowBlur;
+    private _intersectionObserverFallback;
     private _loopComplete;
     private _mouseEnter;
     private _mouseLeave;