@aarsteinmedia/dotlottie-player 5.1.0 → 5.1.1

package/CHANGELOG.md

@@ -7,6 +7,12 @@ 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
@@ -229,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

@@ -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);
@@ -1284,8 +1288,15 @@ const generator = '@aarsteinmedia/dotlottie-player';
         }
         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');
+            }
         }
     }
     /**