@aarsteinmedia/dotlottie-player 5.0.4 → 5.1.1

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.1] - 02-06-2025
+
+### Changed
+
+- Added button to convert dotLottie to JSON. Helpful when debugging animations.
+
+## [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
@@ -223,6 +235,8 @@ Changelog was only added since [3.2.3], so it's not exhaustive. [Please report a
 - Removed dependencies
   - `@lit`
 
+[5.1.1]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/5.1.1
+[5.1.0]: https://www.npmjs.com/package/@aarsteinmedia/dotlottie-player/v/5.1.0
 [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

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-import { AnimationSettings, AnimationDirection, LottieManifest, AnimationData, AnimationItem, Vector2 } from '@aarsteinmedia/lottie-web';
+import { AnimationSettings, AnimationData, LottieManifest, AnimationDirection, AnimationItem, Vector2 } from '@aarsteinmedia/lottie-web';
 
 interface Animation extends AnimationSettings {
     id: string;
@@ -6,6 +6,14 @@ interface Animation extends AnimationSettings {
 interface AnimationAttributes extends Animation {
     url: string;
 }
+interface ConvertParams {
+    animations?: AnimationData[];
+    fileName?: string;
+    manifest?: LottieManifest;
+    shouldDownload?: boolean;
+    src?: string;
+    typeCheck?: boolean;
+}
 type AnimateOnScroll = boolean | '' | null;
 type Autoplay = boolean | '' | 'autoplay' | null;
 type Controls = boolean | '' | 'controls' | null;
@@ -180,14 +188,7 @@ declare class DotLottiePlayer extends PropertyCallbackElement {
     }>;
     attributeChangedCallback(name: string, _oldValue: unknown, value: string): Promise<void>;
     connectedCallback(): Promise<void>;
-    convert({ animations: animationsFromProps, fileName, manifest, shouldDownload, src: srcFromProps, typeCheck, }: {
-        typeCheck?: boolean;
-        manifest?: LottieManifest;
-        animations?: AnimationData[];
-        src?: string;
-        fileName?: string;
-        shouldDownload?: boolean;
-    }): Promise<ArrayBuffer | null | undefined>;
+    convert({ animations: animationsFromProps, fileName, manifest, shouldDownload, src: srcFromProps, typeCheck, }: ConvertParams): Promise<ArrayBuffer | null | undefined>;
     destroy(): void;
     disconnectedCallback(): void;
     getLottie(): AnimationItem | null;

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 {
@@ -167,6 +167,10 @@ var css_248z = "* {\n  box-sizing: border-box;\n}\n\n:host {\n  --lottie-player-
         if (convert instanceof HTMLButtonElement) {
             convert.onclick = this.convert;
         }
+        // const convertJSON = this.shadow.querySelector('.convert-json')
+        // if (convertJSON instanceof HTMLButtonElement) {
+        //   convertJSON.onclick = this.convertJSON as unknown as () => void
+        // }
         const snapshot = this.shadow.querySelector('.snapshot');
         if (snapshot instanceof HTMLButtonElement) {
             snapshot.onclick = ()=>this.snapshot(true);
@@ -205,7 +209,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)=>{
@@ -1181,7 +1185,6 @@ const generator = '@aarsteinmedia/dotlottie-player';
                 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 +1261,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 +1283,20 @@ 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;
+            convert.hidden = false;
+            snapshot.hidden = this.renderer !== RendererType.SVG;
+            if (this._isDotLottie) {
+                convert.ariaLabel = 'Convert dotLottie to JSON';
+                convert.innerHTML = convert.innerHTML.replace('dotLottie', 'JSON');
+            } else {
+                convert.ariaLabel = 'Convert JSON animation to dotLottie format';
+                convert.innerHTML = convert.innerHTML.replace('JSON', 'dotLottie');
+            }
         }
     }
     /**
@@ -1804,7 +1807,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]