@aarsteinmedia/dotlottie-player 6.1.0 → 6.2.0

package/dist/svg.js

@@ -1,4 +1,4 @@
-import { isServer, PlayMode, PreserveAspectRatio, namespaceSVG, RendererType, createElementID, PlayerEvents, download, getFilename } from '@aarsteinmedia/lottie-web/utils';
+import { isServer, PlayMode, PreserveAspectRatio, namespaceSVG, RendererType, createElementID, PlayerEvents, download, getFilename, clamp } from '@aarsteinmedia/lottie-web/utils';
 export { PlayMode, PlayerEvents } from '@aarsteinmedia/lottie-web/utils';
 import Lottie from '@aarsteinmedia/lottie-web/svg';
 import { convert, getAnimationData } from '@aarsteinmedia/lottie-web/dotlottie';
@@ -323,6 +323,7 @@ const notImplemented = 'Method is not implemented';
             'mode',
             'playOnClick',
             'playOnVisible',
+            'selector',
             'speed',
             'src',
             'subframe'
@@ -572,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());
@@ -760,6 +773,12 @@ const notImplemented = 'Method is not implemented';
                     }
                     break;
                 }
+            case 'selector':
+                {
+                    const selector = document.getElementById(this.selector ?? '');
+                    selector?.addEventListener('click', this._handleClick);
+                    break;
+                }
             case 'speed':
                 {
                     const val = Number(value);
@@ -868,6 +887,19 @@ 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;
@@ -1237,7 +1269,7 @@ const notImplemented = 'Method is not implemented';
     /**
    * Handle click.
    */ _handleClick() {
-        if (!this.playOnClick) {
+        if (!this.playOnClick && !this.selector) {
             return;
         }
         this.togglePlay();
@@ -1423,23 +1455,29 @@ const notImplemented = 'Method is not implemented';
             console.warn('DotLottie: Scroll animations might not work properly in a Server Side Rendering context. Try to wrap this in a client component.');
             return;
         }
-        if (this._playerState.visible) {
-            if (this._playerState.scrollTimeout) {
-                clearTimeout(this._playerState.scrollTimeout);
-            }
-            this._playerState.scrollTimeout = setTimeout(()=>{
-                this.playerState = PlayerState.Paused;
-            }, 400);
-            const adjustedScroll = scrollY > this._playerState.scrollY ? scrollY - this._playerState.scrollY : this._playerState.scrollY - scrollY, clampedScroll = Math.min(Math.max(adjustedScroll / 3, 1), this._lottieInstance.totalFrames * 3), roundedScroll = clampedScroll / 3;
-            requestAnimationFrame(()=>{
-                if (roundedScroll < (this._lottieInstance?.totalFrames ?? 0)) {
-                    this.playerState = PlayerState.Playing;
-                    this._lottieInstance?.goToAndStop(roundedScroll, true);
-                } else {
-                    this.playerState = PlayerState.Paused;
-                }
-            });
+        if (!this._playerState.visible) {
+            return;
         }
+        if (this._playerState.scrollTimeout) {
+            clearTimeout(this._playerState.scrollTimeout);
+        }
+        this._playerState.scrollTimeout = setTimeout(()=>{
+            this.playerState = PlayerState.Paused;
+        }, 400);
+        const { totalFrames } = this._lottieInstance;
+        let scrollPosition = scrollY - this._playerState.scrollY;
+        if (scrollY <= this._playerState.scrollY) {
+            scrollPosition = this._playerState.scrollY - scrollY;
+        }
+        const scrollProgress = scrollPosition / innerHeight, currentFrame = clamp(scrollProgress * (totalFrames - 1), 1, totalFrames);
+        requestAnimationFrame(()=>{
+            if (currentFrame >= totalFrames) {
+                this.playerState = PlayerState.Paused;
+                return;
+            }
+            this.playerState = PlayerState.Playing;
+            this._lottieInstance?.goToAndStop(currentFrame, true);
+        });
     }
     _handleWindowBlur({ type }) {
         if (this.dontFreezeOnBlur) {
@@ -1621,7 +1659,20 @@ const notImplemented = 'Method is not implemented';
             this._lottieInstance[method]('data_ready', this._dataReady);
             this._lottieInstance[method]('data_failed', this._dataFailed);
         }
-        if (this._container) {
+        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);