@aarsteinmedia/dotlottie-player 2.2.7 → 2.2.9

package/README.md

@@ -286,13 +286,15 @@ The following events are exposed and can be listened to via `addEventListener` c
 | `ready`    | Animation is loaded and player is ready                          |
 | `stop`     | Animation has stopped                                            |
 
-## WordPress Plugin
+## WordPress Plugins
 <img align="left" width="110" height="110" src="/.github/wpIcon.svg" />
 
-We've made a free WordPress plugin that works with Gutenberg Blocks, Elementor, Divi Builder and Flatsome UX Builder: [AM LottiePlayer](https://wordpress.org/plugins/am-lottieplayer/). It has all the functionality of this package, with a helpful user interface.
+We've made a free WordPress plugin that works with Gutenberg Blocks, Elementor, Divi Builder and Flatsome UX Builder: [AM LottiePlayer](https://www.aarstein.media/en/am-lottieplayer). It has all the functionality of this package, with a helpful user interface.
 
 It's super lightweight – and only loads on pages where animations are used.
 
+We've also made a premium WordPress plugin for purchase: [AM LottiePlayerPRO](https://www.aarstein.media/en/am-lottieplayer/pro). It has an easy-to-use GUI for combining and controlling multiple Lottie animations in a single file, converting JSON to dotLottie with drag-and-drop, and many more exclusive features.
+
 ## License
 
 GPL-2.0-or-later

package/dist/cjs/index.js

@@ -138,9 +138,7 @@ const addExt = (ext, str)=>{
         }
     }
     return res;
-}, frameOutput = (frame)=>{
-    return ((frame ?? 0) + 1).toString().padStart(3, '0');
-}, getAnimationData = async (input)=>{
+}, frameOutput = (frame)=>((frame ?? 0) + 1).toString().padStart(3, '0'), getAnimationData = async (input)=>{
     try {
         if (!input || typeof input !== 'string' && typeof input !== 'object') {
             throw new Error('Broken file or invalid file format');
@@ -255,15 +253,11 @@ const addExt = (ext, str)=>{
 }, hasExt = (path)=>{
     const lastDotIndex = path?.split('/').pop()?.lastIndexOf('.');
     return (lastDotIndex ?? 0) > 1 && path && path.length - 1 > (lastDotIndex ?? 0);
-}, isAudio = (asset)=>{
-    return !('h' in asset) && !('w' in asset) && 'p' in asset && 'e' in asset && 'u' in asset && 'id' in asset;
-}, isImage = (asset)=>{
-    return 'w' in asset && 'h' in asset && !('xt' in asset) && 'p' in asset;
-}, isServer = ()=>{
-    return !(typeof window !== 'undefined' && window.document);
-}, strToU8 = (str)=>{
+}, isAudio = (asset)=>!('h' in asset) && !('w' in asset) && 'p' in asset && 'e' in asset && 'u' in asset && 'id' in asset, isImage = (asset)=>'w' in asset && 'h' in asset && !('xt' in asset) && 'p' in asset, isServer = ()=>!(typeof window !== 'undefined' && window.document), strToU8 = (str)=>{
     const u8 = new Uint8Array(str.length);
-    for(let i = 0; i < str.length; i++){
+    for (const [i] of [
+        ...Array(str.length)
+    ].entries()){
         u8[i] = str.charCodeAt(i);
     }
     return u8;
@@ -301,7 +295,7 @@ const addExt = (ext, str)=>{
 };
 
 var name = "@aarsteinmedia/dotlottie-player";
-var version = "2.2.7";
+var version = "2.2.9";
 var description = "Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";
 var exports$1 = {
 	".": {
@@ -351,15 +345,15 @@ var peerDependencies = {
 var devDependencies = {
 	"@custom-elements-manifest/analyzer": "^0.6.9",
 	"@rollup/plugin-commonjs": "^25.0.7",
-	"@rollup/plugin-json": "^6.0.1",
+	"@rollup/plugin-json": "^6.1.0",
 	"@rollup/plugin-node-resolve": "^15.2.3",
 	"@rollup/plugin-replace": "^5.0.5",
-	"@swc/core": "^1.3.99",
-	"@types/node": "^20.10.0",
+	"@swc/core": "^1.3.101",
+	"@types/node": "^20.10.5",
 	"@typescript-eslint/eslint-plugin": "^5.62.0",
 	"@typescript-eslint/parser": "^5.62.0",
-	eslint: "^8.54.0",
-	"eslint-plugin-lit": "^1.10.1",
+	eslint: "^8.56.0",
+	"eslint-plugin-lit": "^1.11.0",
 	rollup: "^3.29.4",
 	"rollup-plugin-dts": "^6.1.0",
 	"rollup-plugin-html-literals": "^1.1.8",
@@ -367,7 +361,7 @@ var devDependencies = {
 	"rollup-plugin-swc3": "^0.9.1",
 	shx: "^0.3.4",
 	"ts-lit-plugin": "^1.2.1",
-	typescript: "^5.3.2"
+	typescript: "^5.3.3"
 };
 var customElements = "dist/custom-elements.json";
 var files = [
@@ -577,16 +571,18 @@ class DotLottiePlayer extends lit.LitElement {
             this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Error));
         });
         if (this.container) {
-            this.container.addEventListener('mouseenter', ()=>{
-                if (this.hover && this.currentState !== exports.PlayerState.Playing) {
-                    this.play();
-                }
-            });
-            this.container.addEventListener('mouseleave', ()=>{
-                if (this.hover && this.currentState === exports.PlayerState.Playing) {
-                    this.stop();
-                }
-            });
+            this.container.addEventListener('mouseenter', this._mouseEnter);
+            this.container.addEventListener('mouseleave', this._mouseLeave);
+        }
+    }
+    _mouseEnter() {
+        if (this.hover && this.currentState !== exports.PlayerState.Playing) {
+            this.play();
+        }
+    }
+    _mouseLeave() {
+        if (this.hover && this.currentState === exports.PlayerState.Playing) {
+            this.stop();
         }
     }
     _onVisibilityChange() {
@@ -894,8 +890,8 @@ class DotLottiePlayer extends lit.LitElement {
     render() {
         return lit.html`<figure class="${'animation-container main'}" data-controls="${this.controls ?? lit.nothing}" lang="${this.description ? document?.documentElement?.lang : 'en'}" role="img" aria-label="${this.description ?? 'Lottie animation'}" data-loaded="${this._playerState.loaded}"><div class="animation" style="background:${this.background}">${this.currentState === exports.PlayerState.Error ? lit.html`<div class="error"><svg preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1920" height="1080" viewBox="0 0 1920 1080"><path fill="#fff" d="M0 0h1920v1080H0z"/><path fill="#3a6d8b" d="M1190.2 531 1007 212.4c-22-38.2-77.2-38-98.8.5L729.5 531.3c-21.3 37.9 6.1 84.6 49.5 84.6l361.9.3c43.7 0 71.1-47.3 49.3-85.2zM937.3 288.7c.2-7.5 3.3-23.9 23.2-23.9 16.3 0 23 16.1 23 23.5 0 55.3-10.7 197.2-12.2 214.5-.1 1-.9 1.7-1.9 1.7h-18.3c-1 0-1.8-.7-1.9-1.7-1.4-17.5-13.4-162.9-11.9-214.1zm24.2 283.8c-13.1 0-23.7-10.6-23.7-23.7s10.6-23.7 23.7-23.7 23.7 10.6 23.7 23.7-10.6 23.7-23.7 23.7zM722.1 644h112.6v34.4h-70.4V698h58.8v31.7h-58.8v22.6h72.4v36.2H722.1V644zm162 57.1h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6zm78.9 0h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5H963v15.6zm39.5 36.2c0-31.3 22.2-54.8 56.6-54.8 34.4 0 56.2 23.5 56.2 54.8s-21.8 54.6-56.2 54.6c-34.4-.1-56.6-23.3-56.6-54.6zm74 0c0-17.4-6.1-29.1-17.8-29.1-11.7 0-17.4 11.7-17.4 29.1 0 17.4 5.7 29.1 17.4 29.1s17.8-11.8 17.8-29.1zm83.1-36.2h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6z"/><path fill="none" d="M718.9 807.7h645v285.4h-645z"/><text fill="#3a6d8b" style="text-align:center;position:absolute;left:100%;font-size:47px;font-family:system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif" x="50%" y="848.017" text-anchor="middle">${this._errorMessage}</text></svg></div>` : lit.nothing}</div>${this.controls ? this.renderControls() : lit.nothing}</figure>`;
     }
-    constructor(...args){
-        super(...args);
+    constructor(){
+        super();
         this.background = 'transparent';
         this.controls = false;
         this.currentState = exports.PlayerState.Loading;
@@ -928,6 +924,9 @@ class DotLottiePlayer extends lit.LitElement {
                 target.focus();
             }
         };
+        this._onVisibilityChange = this._onVisibilityChange.bind(this);
+        this._mouseEnter = this._mouseEnter.bind(this);
+        this._mouseLeave = this._mouseLeave.bind(this);
     }
 }
 _ts_decorate([

package/dist/esm/index.js

@@ -136,9 +136,7 @@ const addExt = (ext, str)=>{
         }
     }
     return res;
-}, frameOutput = (frame)=>{
-    return ((frame ?? 0) + 1).toString().padStart(3, '0');
-}, getAnimationData = async (input)=>{
+}, frameOutput = (frame)=>((frame ?? 0) + 1).toString().padStart(3, '0'), getAnimationData = async (input)=>{
     try {
         if (!input || typeof input !== 'string' && typeof input !== 'object') {
             throw new Error('Broken file or invalid file format');
@@ -253,15 +251,11 @@ const addExt = (ext, str)=>{
 }, hasExt = (path)=>{
     const lastDotIndex = path?.split('/').pop()?.lastIndexOf('.');
     return (lastDotIndex ?? 0) > 1 && path && path.length - 1 > (lastDotIndex ?? 0);
-}, isAudio = (asset)=>{
-    return !('h' in asset) && !('w' in asset) && 'p' in asset && 'e' in asset && 'u' in asset && 'id' in asset;
-}, isImage = (asset)=>{
-    return 'w' in asset && 'h' in asset && !('xt' in asset) && 'p' in asset;
-}, isServer = ()=>{
-    return !(typeof window !== 'undefined' && window.document);
-}, strToU8 = (str)=>{
+}, isAudio = (asset)=>!('h' in asset) && !('w' in asset) && 'p' in asset && 'e' in asset && 'u' in asset && 'id' in asset, isImage = (asset)=>'w' in asset && 'h' in asset && !('xt' in asset) && 'p' in asset, isServer = ()=>!(typeof window !== 'undefined' && window.document), strToU8 = (str)=>{
     const u8 = new Uint8Array(str.length);
-    for(let i = 0; i < str.length; i++){
+    for (const [i] of [
+        ...Array(str.length)
+    ].entries()){
         u8[i] = str.charCodeAt(i);
     }
     return u8;
@@ -299,7 +293,7 @@ const addExt = (ext, str)=>{
 };
 
 var name = "@aarsteinmedia/dotlottie-player";
-var version = "2.2.7";
+var version = "2.2.9";
 var description = "Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";
 var exports = {
 	".": {
@@ -349,15 +343,15 @@ var peerDependencies = {
 var devDependencies = {
 	"@custom-elements-manifest/analyzer": "^0.6.9",
 	"@rollup/plugin-commonjs": "^25.0.7",
-	"@rollup/plugin-json": "^6.0.1",
+	"@rollup/plugin-json": "^6.1.0",
 	"@rollup/plugin-node-resolve": "^15.2.3",
 	"@rollup/plugin-replace": "^5.0.5",
-	"@swc/core": "^1.3.99",
-	"@types/node": "^20.10.0",
+	"@swc/core": "^1.3.101",
+	"@types/node": "^20.10.5",
 	"@typescript-eslint/eslint-plugin": "^5.62.0",
 	"@typescript-eslint/parser": "^5.62.0",
-	eslint: "^8.54.0",
-	"eslint-plugin-lit": "^1.10.1",
+	eslint: "^8.56.0",
+	"eslint-plugin-lit": "^1.11.0",
 	rollup: "^3.29.4",
 	"rollup-plugin-dts": "^6.1.0",
 	"rollup-plugin-html-literals": "^1.1.8",
@@ -365,7 +359,7 @@ var devDependencies = {
 	"rollup-plugin-swc3": "^0.9.1",
 	shx: "^0.3.4",
 	"ts-lit-plugin": "^1.2.1",
-	typescript: "^5.3.2"
+	typescript: "^5.3.3"
 };
 var customElements = "dist/custom-elements.json";
 var files = [
@@ -575,16 +569,18 @@ class DotLottiePlayer extends LitElement {
             this.dispatchEvent(new CustomEvent(PlayerEvents.Error));
         });
         if (this.container) {
-            this.container.addEventListener('mouseenter', ()=>{
-                if (this.hover && this.currentState !== PlayerState.Playing) {
-                    this.play();
-                }
-            });
-            this.container.addEventListener('mouseleave', ()=>{
-                if (this.hover && this.currentState === PlayerState.Playing) {
-                    this.stop();
-                }
-            });
+            this.container.addEventListener('mouseenter', this._mouseEnter);
+            this.container.addEventListener('mouseleave', this._mouseLeave);
+        }
+    }
+    _mouseEnter() {
+        if (this.hover && this.currentState !== PlayerState.Playing) {
+            this.play();
+        }
+    }
+    _mouseLeave() {
+        if (this.hover && this.currentState === PlayerState.Playing) {
+            this.stop();
         }
     }
     _onVisibilityChange() {
@@ -892,8 +888,8 @@ class DotLottiePlayer extends LitElement {
     render() {
         return html`<figure class="${'animation-container main'}" data-controls="${this.controls ?? nothing}" lang="${this.description ? document?.documentElement?.lang : 'en'}" role="img" aria-label="${this.description ?? 'Lottie animation'}" data-loaded="${this._playerState.loaded}"><div class="animation" style="background:${this.background}">${this.currentState === PlayerState.Error ? html`<div class="error"><svg preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1920" height="1080" viewBox="0 0 1920 1080"><path fill="#fff" d="M0 0h1920v1080H0z"/><path fill="#3a6d8b" d="M1190.2 531 1007 212.4c-22-38.2-77.2-38-98.8.5L729.5 531.3c-21.3 37.9 6.1 84.6 49.5 84.6l361.9.3c43.7 0 71.1-47.3 49.3-85.2zM937.3 288.7c.2-7.5 3.3-23.9 23.2-23.9 16.3 0 23 16.1 23 23.5 0 55.3-10.7 197.2-12.2 214.5-.1 1-.9 1.7-1.9 1.7h-18.3c-1 0-1.8-.7-1.9-1.7-1.4-17.5-13.4-162.9-11.9-214.1zm24.2 283.8c-13.1 0-23.7-10.6-23.7-23.7s10.6-23.7 23.7-23.7 23.7 10.6 23.7 23.7-10.6 23.7-23.7 23.7zM722.1 644h112.6v34.4h-70.4V698h58.8v31.7h-58.8v22.6h72.4v36.2H722.1V644zm162 57.1h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6zm78.9 0h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5H963v15.6zm39.5 36.2c0-31.3 22.2-54.8 56.6-54.8 34.4 0 56.2 23.5 56.2 54.8s-21.8 54.6-56.2 54.6c-34.4-.1-56.6-23.3-56.6-54.6zm74 0c0-17.4-6.1-29.1-17.8-29.1-11.7 0-17.4 11.7-17.4 29.1 0 17.4 5.7 29.1 17.4 29.1s17.8-11.8 17.8-29.1zm83.1-36.2h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6z"/><path fill="none" d="M718.9 807.7h645v285.4h-645z"/><text fill="#3a6d8b" style="text-align:center;position:absolute;left:100%;font-size:47px;font-family:system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif" x="50%" y="848.017" text-anchor="middle">${this._errorMessage}</text></svg></div>` : nothing}</div>${this.controls ? this.renderControls() : nothing}</figure>`;
     }
-    constructor(...args){
-        super(...args);
+    constructor(){
+        super();
         this.background = 'transparent';
         this.controls = false;
         this.currentState = PlayerState.Loading;
@@ -926,6 +922,9 @@ class DotLottiePlayer extends LitElement {
                 target.focus();
             }
         };
+        this._onVisibilityChange = this._onVisibilityChange.bind(this);
+        this._mouseEnter = this._mouseEnter.bind(this);
+        this._mouseLeave = this._mouseLeave.bind(this);
     }
 }
 _ts_decorate([