@aarsteinmedia/dotlottie-player 5.0.3 → 5.1.0

package/CHANGELOG.md

@@ -7,6 +7,18 @@ 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.
 
+## [5.1.0] - 02-06-2025
+
+### Changed
+
+- Dropped `lottie-web` as dependency in favour of `@aarsteinmedia/lottie-web`. This animation engine is based on `lottie-web`, has the same features + it works better in Node SSR environments, it doesn't rely on `eval()` to execute AE expressions, and it is hopefully easier to maintain and expand.
+
+## [5.0.4] - 31-05-2025
+
+### Changed
+
+- Fixed bug preventing autoplay on some animations
+
 ## [5.0.3] - 28-05-2025
 
 ### Changed
@@ -217,6 +229,7 @@ Changelog was only added since [3.2.3], so it's not exhaustive. [Please report a
 - Removed dependencies
   - `@lit`
 
+[5.0.4]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/5.0.4
 [5.0.3]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/5.0.3
 [5.0.1]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/5.0.1
 [5.0.0]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/5.0.0

package/dist/index.js

@@ -1,11 +1,11 @@
-import { isServer as isServer$1, createElementID, PreserveAspectRatio as PreserveAspectRatio$1 } from '@aarsteinmedia/lottie-web/utils';
-import Lottie from 'lottie-web';
+import { isServer, createElementID, PreserveAspectRatio as PreserveAspectRatio$1 } from '@aarsteinmedia/lottie-web/utils';
+import Lottie from '@aarsteinmedia/lottie-web';
 import { strToU8, strFromU8, zip, unzip as unzip$1 } from 'fflate';
 
 /**
  * Credit to: Leonardo Favre https://github.com/leofavre/observed-properties.
  */ const updateOnConnected = Symbol('UPDATE_ON_CONNECTED');
-if (isServer$1()) {
+if (isServer()) {
     // Mock HTMLElement for server-side rendering
     global.HTMLElement = // eslint-disable-next-line @typescript-eslint/no-extraneous-class
     class EmptyHTMLElement {
@@ -205,7 +205,7 @@ class CustomError extends Error {
         throw new Error('No animations listed in manifest');
     }
     return manifest;
-}, isServer = ()=>!(typeof window !== 'undefined' && window.document);
+};
 /**
  * Methods used only locally.
  */ const hasExt = (path)=>{
@@ -972,7 +972,7 @@ const generator = '@aarsteinmedia/dotlottie-player';
     /**
    * Runs when the value of an attribute is changed on the component.
    */ async attributeChangedCallback(name, _oldValue, value) {
-        if (!this._lottieInstance) {
+        if (!this._lottieInstance || !this.shadow) {
             return;
         }
         if (name === 'animateOnScroll') {
@@ -1016,14 +1016,14 @@ const generator = '@aarsteinmedia/dotlottie-player';
             this._container.removeEventListener('mouseleave', this._mouseLeave);
         }
         if (name === 'loop') {
-            const toggleLoop = this.shadow?.querySelector('.toggleLoop');
+            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');
+            const toggleBoomerang = this.shadow.querySelector('.toggleBoomerang');
             if (toggleBoomerang instanceof HTMLButtonElement) {
                 toggleBoomerang.dataset.active = (value === PlayMode.Bounce).toString();
             }
@@ -1094,7 +1094,7 @@ const generator = '@aarsteinmedia/dotlottie-player';
     /**
    * Destroy animation and element.
    */ destroy() {
-        if (!this._lottieInstance) {
+        if (!this._lottieInstance?.destroy) {
             return;
         }
         this.playerState = PlayerState.Destroyed;
@@ -1112,12 +1112,10 @@ const generator = '@aarsteinmedia/dotlottie-player';
             this._intersectionObserver.disconnect();
             this._intersectionObserver = undefined;
         }
-        // Destroy the animation instance
-        if (this._lottieInstance) {
-            this._lottieInstance.destroy();
-        }
         // Remove the attached Visibility API's change event listener
         document.removeEventListener('visibilitychange', this._onVisibilityChange);
+        // Destroy the animation instance
+        this.destroy();
     }
     /**
    * Returns the lottie-web instance used in the component.
@@ -1158,6 +1156,10 @@ const generator = '@aarsteinmedia/dotlottie-player';
             if (this._multiAnimationSettings.length > 0 && this._multiAnimationSettings[this._currentAnimation]?.mode) {
                 this._isBounce = this._multiAnimationSettings[this._currentAnimation].mode === PlayMode.Bounce;
             }
+            if (manifest?.animations.length === 1) {
+                manifest.animations[0].autoplay = this.autoplay;
+                manifest.animations[0].loop = this.loop;
+            }
             this._isDotLottie = Boolean(isDotLottie);
             this._animations = animations;
             this._manifest = manifest ?? {
@@ -1173,15 +1175,12 @@ const generator = '@aarsteinmedia/dotlottie-player';
                 ]
             };
             // Clear previous animation, if any
-            if (this._lottieInstance) {
-                this._lottieInstance.destroy();
-            }
+            this._lottieInstance?.destroy();
             this.playerState = PlayerState.Stopped;
             if (!this.animateOnScroll && (this.autoplay || this._multiAnimationSettings[this._currentAnimation]?.autoplay)) {
                 this.playerState = PlayerState.Playing;
             }
             // Initialize lottie player and load animation
-            // @ts-expect-error TODO:
             this._lottieInstance = Lottie.loadAnimation({
                 ...this._getOptions(),
                 animationData: animations[this._currentAnimation]
@@ -1258,7 +1257,7 @@ const generator = '@aarsteinmedia/dotlottie-player';
         if (!this.shadow) {
             return;
         }
-        const togglePlay = this.shadow.querySelector('.togglePlay'), stop = this.shadow.querySelector('.stop'), prev = this.shadow.querySelector('.prev'), next = this.shadow.querySelector('.next'), seeker = this.shadow.querySelector('.seeker'), progress = this.shadow.querySelector('progress'), popover = this.shadow.querySelector('.popover'), convert = this.shadow.querySelector('.convert');
+        const togglePlay = this.shadow.querySelector('.togglePlay'), stop = this.shadow.querySelector('.stop'), prev = this.shadow.querySelector('.prev'), next = this.shadow.querySelector('.next'), seeker = this.shadow.querySelector('.seeker'), progress = this.shadow.querySelector('progress'), popover = this.shadow.querySelector('.popover'), convert = this.shadow.querySelector('.convert'), snapshot = this.shadow.querySelector('.snapshot');
         if (!(togglePlay instanceof HTMLButtonElement) || !(stop instanceof HTMLButtonElement) || !(next instanceof HTMLButtonElement) || !(prev instanceof HTMLButtonElement) || !(seeker instanceof HTMLInputElement) || !(progress instanceof HTMLProgressElement)) {
             return;
         }
@@ -1280,20 +1279,13 @@ const generator = '@aarsteinmedia/dotlottie-player';
             next.hidden = false;
         }
         if (name === '_currentAnimation' && typeof value === 'number') {
-            if (value + 1 >= this._animations.length) {
-                next.hidden = true;
-            } else {
-                next.hidden = false;
-            }
-            if (value) {
-                prev.hidden = false;
-            } else {
-                prev.hidden = true;
-            }
+            next.hidden = value + 1 >= this._animations.length;
+            prev.hidden = Boolean(value);
         }
-        if (name === '_isSettingsOpen' && typeof value === 'boolean' && popover instanceof HTMLDivElement && convert instanceof HTMLButtonElement) {
+        if (name === '_isSettingsOpen' && typeof value === 'boolean' && popover instanceof HTMLDivElement && convert instanceof HTMLButtonElement && snapshot instanceof HTMLButtonElement) {
             popover.hidden = !value;
             convert.hidden = this._isDotLottie;
+            snapshot.hidden = this.renderer !== RendererType.SVG;
         }
     }
     /**
@@ -1804,7 +1796,6 @@ const generator = '@aarsteinmedia/dotlottie-player';
                 this._lottieInstance.destroy();
             }
             // Re-initialize lottie player
-            // @ts-expect-error TODO:
             this._lottieInstance = Lottie.loadAnimation({
                 ...this._getOptions(),
                 animationData: this._animations[this._currentAnimation]