@aarsteinmedia/dotlottie-player 2.5.12 → 2.5.14

package/dist/cjs/index.js

@@ -5,7 +5,7 @@ var decorators_js = require('lit/decorators.js');
 var Lottie = require('lottie-web');
 var fflate = require('fflate');
 
-var name="@aarsteinmedia/dotlottie-player";var version="2.5.12";var description="Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";var exports$1={".":{"import":"./dist/esm/index.js",node:"./dist/esm/index.js",require:"./dist/cjs/index.js",types:"./dist/index.d.ts"}};var main="./dist/esm/index.js";var unpkg="./dist/index.js";var module$1="./dist/esm/index.js";var types="./dist/index.d.ts";var type="module";var homepage="https://www.aarstein.media/en/dotlottie-player";var repository={url:"https://github.com/aarsteinmedia/dotlottie-player.git",type:"git"};var bugs="https://github.com/aarsteinmedia/dotlottie-player/issues";var author={name:"Johan Martin Aarstein",email:"johan@aarstein.media",url:"https://www.aarstein.media",organization:"Aarstein Media"};var license="GPL-2.0-or-later";var scripts={build:"rimraf ./dist && rollup -c","build:types":"rimraf ./types && tsc","build:cem":"npx cem analyze --config cem.config.mjs",prod:"pnpm build:types && pnpm build && pnpm build:cem",dev:"rollup -c -w --environment NODE_ENV:development",lint:"tsc && eslint . --ext .ts","lint:fix":"eslint . --ext .ts --fix"};var dependencies={fflate:"^0.8.2",lit:"^3.1.4","lottie-web":"^5.12.2"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.9.9","@rollup/plugin-commonjs":"^25.0.8","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-replace":"^5.0.7","@rollup/plugin-typescript":"^11.1.6","@swc/core":"^1.5.25","@types/node":"^20.14.2","@typescript-eslint/eslint-plugin":"^7.12.0","@typescript-eslint/parser":"^7.12.0",autoprefixer:"^10.4.19","esbuild-sass-plugin":"^3.3.1",eslint:"^8.57.0","eslint-import-resolver-typescript":"^3.6.1","eslint-plugin-import":"^2.29.1","eslint-plugin-jsdoc":"^48.2.9","eslint-plugin-lit":"^1.14.0","postcss-flexbugs-fixes":"^5.0.2",rimraf:"^5.0.7",rollup:"^4.18.0","rollup-plugin-dts":"^6.1.1","rollup-plugin-html-literals":"^1.1.8","rollup-plugin-livereload":"^2.0.5","rollup-plugin-postcss":"^4.0.2","rollup-plugin-postcss-lit":"^2.1.0","rollup-plugin-serve":"^1.1.1","rollup-plugin-summary":"^2.0.1","rollup-plugin-swc3":"^0.11.2",sass:"^1.77.4","ts-lit-plugin":"^2.0.2",tslib:"^2.6.3",typescript:"^5.4.5"};var customElements="dist/custom-elements.json";var files=["dist","README.md"];var keywords=["lottie","dotlottie","animation","web component","component","lit-element","svg","vector","player"];var publishConfig={access:"public"};var engines={node:">= 8.17.0"};var funding={type:"paypal",url:"https://www.paypal.com/donate/?hosted_button_id=E7C7DMN8KSQ6A"};var pkg = {name:name,version:version,description:description,exports:exports$1,main:main,unpkg:unpkg,module:module$1,types:types,type:type,homepage:homepage,repository:repository,bugs:bugs,author:author,license:license,scripts:scripts,dependencies:dependencies,peerDependencies:peerDependencies,devDependencies:devDependencies,customElements:customElements,files:files,keywords:keywords,publishConfig:publishConfig,engines:engines,funding:funding};
+var name="@aarsteinmedia/dotlottie-player";var version="2.5.14";var description="Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";var exports$1={".":{"import":"./dist/esm/index.js",node:"./dist/esm/index.js",require:"./dist/cjs/index.js",types:"./dist/index.d.ts"}};var main="./dist/esm/index.js";var unpkg="./dist/index.js";var module$1="./dist/esm/index.js";var types="./dist/index.d.ts";var type="module";var homepage="https://www.aarstein.media/en/dotlottie-player";var repository={url:"https://github.com/aarsteinmedia/dotlottie-player.git",type:"git"};var bugs="https://github.com/aarsteinmedia/dotlottie-player/issues";var author={name:"Johan Martin Aarstein",email:"johan@aarstein.media",url:"https://www.aarstein.media",organization:"Aarstein Media"};var license="GPL-2.0-or-later";var scripts={build:"rimraf ./dist && rollup -c","build:types":"rimraf ./types && tsc","build:cem":"npx cem analyze --config cem.config.mjs",prod:"pnpm build:types && pnpm build && pnpm build:cem",dev:"rollup -c -w --environment NODE_ENV:development",lint:"tsc && eslint . --ext .ts","lint:fix":"eslint . --ext .ts --fix"};var dependencies={fflate:"^0.8.2",lit:"^3.1.4","lottie-web":"^5.12.2"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.9.9","@rollup/plugin-commonjs":"^25.0.8","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-replace":"^5.0.7","@rollup/plugin-typescript":"^11.1.6","@swc/core":"^1.5.29","@types/node":"^20.14.2","@typescript-eslint/eslint-plugin":"^7.13.0","@typescript-eslint/parser":"^7.13.0",autoprefixer:"^10.4.19","esbuild-sass-plugin":"^3.3.1",eslint:"^8.57.0","eslint-import-resolver-typescript":"^3.6.1","eslint-plugin-import":"^2.29.1","eslint-plugin-jsdoc":"^48.2.9","eslint-plugin-lit":"^1.14.0","postcss-flexbugs-fixes":"^5.0.2",rimraf:"^5.0.7",rollup:"^4.18.0","rollup-plugin-dts":"^6.1.1","rollup-plugin-html-literals":"^1.1.8","rollup-plugin-livereload":"^2.0.5","rollup-plugin-postcss":"^4.0.2","rollup-plugin-postcss-lit":"^2.1.0","rollup-plugin-serve":"^1.1.1","rollup-plugin-summary":"^2.0.1","rollup-plugin-swc3":"^0.11.2",sass:"^1.77.5","ts-lit-plugin":"^2.0.2",tslib:"^2.6.3",typescript:"^5.4.5"};var customElements="dist/custom-elements.json";var files=["dist","README.md"];var keywords=["lottie","dotlottie","animation","web component","component","lit-element","svg","vector","player"];var publishConfig={access:"public"};var engines={node:">= 8.17.0"};var funding={type:"paypal",url:"https://www.paypal.com/donate/?hosted_button_id=E7C7DMN8KSQ6A"};var pkg = {name:name,version:version,description:description,exports:exports$1,main:main,unpkg:unpkg,module:module$1,types:types,type:type,homepage:homepage,repository:repository,bugs:bugs,author:author,license:license,scripts:scripts,dependencies:dependencies,peerDependencies:peerDependencies,devDependencies:devDependencies,customElements:customElements,files:files,keywords:keywords,publishConfig:publishConfig,engines:engines,funding:funding};
 
 exports.PlayerState = void 0;
 (function(PlayerState) {
@@ -85,7 +85,7 @@ const addExt = (ext, str)=>{
                 if (!asset.p || !isImage(asset) && !isAudio(asset)) {
                     continue;
                 }
-                const { p: file, u: path } = asset, assetId = asset.id || useId(), isEncoded = file.startsWith('data:'), ext = isEncoded ? getExtFromB64(file) : getExt(file), dataURL = isEncoded ? file : await fileToBase64(path ? path.endsWith('/') && `${path}${file}` || `${path}/${file}` : file);
+                const { p: file, u: path } = asset, assetId = useId('asset'), isEncoded = file.startsWith('data:'), ext = isEncoded ? getExtFromB64(file) : getExt(file), dataURL = isEncoded ? file : await fileToBase64(path ? path.endsWith('/') && `${path}${file}` || `${path}/${file}` : file);
                 asset.p = `${assetId}.${ext}`;
                 asset.u = '';
                 asset.e = 1;
@@ -239,15 +239,9 @@ const addExt = (ext, str)=>{
         return;
     }
     const ext = str.split('.').pop()?.toLowerCase();
-    if (ext === 'jpeg') {
-        return 'jpg';
-    }
     return ext;
 }, getExtFromB64 = (str)=>{
     const mime = str.split(':')[1].split(';')[0], ext = mime.split('/')[1].split('+')[0];
-    if (ext === 'jpeg') {
-        return 'jpg';
-    }
     return ext;
 }, getFilename = (src, keepExt)=>{
     getExt(src);
@@ -352,7 +346,7 @@ const addExt = (ext, str)=>{
     return unzipped;
 }, useId = (prefix)=>{
     const s4 = ()=>((1 + Math.random()) * 0x10000 | 0).toString(16).substring(1);
-    return `${prefix ?? `:${s4()}`}-${s4()}`;
+    return `${prefix ?? `:${s4()}`}_${s4()}`;
 };
 
 var css_248z = lit.css`*{box-sizing:border-box}:host{--lottie-player-toolbar-height:35px;--lottie-player-toolbar-background-color:#FFF;--lottie-player-toolbar-icon-color:#000;--lottie-player-toolbar-icon-hover-color:#000;--lottie-player-toolbar-icon-active-color:#4285f4;--lottie-player-seeker-track-color:rgba(0, 0, 0, 0.2);--lottie-player-seeker-thumb-color:#4285f4;--lottie-player-seeker-display:block;display:block;width:100%;height:100%}@media (prefers-color-scheme:dark){:host{--lottie-player-toolbar-background-color:#000;--lottie-player-toolbar-icon-color:#FFF;--lottie-player-toolbar-icon-hover-color:#FFF;--lottie-player-seeker-track-color:rgba(255, 255, 255, 0.6)}}.main{display:flex;flex-direction:column;height:100%;width:100%;margin:0;padding:0}.animation{width:100%;height:100%;display:flex}[data-controls=true] .animation{height:calc(100% - 35px)}.animation-container{position:relative}.popover{position:absolute;right:5px;bottom:40px;background-color:var(--lottie-player-toolbar-background-color);border-radius:5px;padding:10px 15px;border:solid 2px var(--lottie-player-toolbar-icon-color);animation:fadeIn .2s ease-in-out}.popover::before{content:"";right:10px;border:7px solid transparent;border-top-color:transparent;margin-right:-7px;height:0;width:0;position:absolute;pointer-events:none;top:100%;border-top-color:var(--lottie-player-toolbar-icon-color)}.toolbar{display:flex;align-items:center;justify-items:center;background:var(--lottie-player-toolbar-background-color);margin:0;height:35px;padding:5px;border-radius:5px;gap:5px}.toolbar.has-error{pointer-events:none;opacity:.5}.toolbar button{cursor:pointer;fill:var(--lottie-player-toolbar-icon-color);color:var(--lottie-player-toolbar-icon-color);display:flex;background:0 0;border:0;padding:0;outline:0;height:100%;margin:0;align-items:center;gap:5px;opacity:.9}.toolbar button:hover{opacity:1}.toolbar button[data-active=true]{opacity:1;fill:var(--lottie-player-toolbar-icon-active-color)}.toolbar button:disabled{opacity:.5}.toolbar button:focus{outline:0}.toolbar button svg{pointer-events:none}.toolbar button svg>*{fill:inherit}.toolbar button.disabled svg{display:none}.progress-container{position:relative;width:100%}.progress-container.simple{margin-right:12px}.seeker{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0}.seeker::-webkit-slider-runnable-track,.seeker::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;outline:0}progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0}.seeker{width:100%;height:20px;border-radius:3px;border:0;cursor:pointer;background-color:transparent;display:var(--lottie-player-seeker-display);color:var(--lottie-player-seeker-thumb-color);margin:0;padding:7.5px 0;position:relative;z-index:1}progress{position:absolute;width:100%;height:5px;border-radius:3px;border:0;top:0;left:0;margin:7.5px 0;background-color:var(--lottie-player-seeker-track-color);pointer-events:none}::-moz-progress-bar{background-color:var(--lottie-player-seeker-thumb-color)}::-webkit-progress-inner-element{border-radius:3px;overflow:hidden}::-webkit-slider-runnable-track{background-color:transparent}::-webkit-progress-value{background-color:var(--lottie-player-seeker-thumb-color)}.seeker::-webkit-slider-thumb{height:15px;width:15px;border-radius:50%;border:0;background-color:var(--lottie-player-seeker-thumb-color);cursor:pointer;-webkit-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;transform:scale(0)}.seeker:focus::-webkit-slider-thumb,.seeker:hover::-webkit-slider-thumb{transform:scale(1)}.seeker::-moz-range-progress{background-color:var(--lottie-player-seeker-thumb-color);height:5px;border-radius:3px}.seeker::-moz-range-thumb{height:15px;width:15px;border-radius:50%;background-color:var(--lottie-player-seeker-thumb-color);border:0;cursor:pointer;-moz-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;transform:scale(0)}.seeker:focus::-moz-range-thumb,.seeker:hover::-moz-range-thumb{transform:scale(1)}.seeker::-ms-track{width:100%;height:5px;cursor:pointer;background:0 0;border-color:transparent;color:transparent}.seeker::-ms-fill-upper{background:var(--lottie-player-seeker-track-color);border-radius:3px}.seeker::-ms-fill-lower{background-color:var(--lottie-player-seeker-thumb-color);border-radius:3px}.seeker::-ms-thumb{border:0;height:15px;width:15px;border-radius:50%;background:var(--lottie-player-seeker-thumb-color);cursor:pointer;-ms-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;transform:scale(0)}.seeker:hover::-ms-thumb{transform:scale(1)}.seeker:focus::-ms-thumb{transform:scale(1)}.seeker:focus::-ms-fill-lower,.seeker:focus::-ms-fill-upper{background:var(--lottie-player-seeker-track-color)}.error{display:flex;margin:auto;justify-content:center;height:100%;align-items:center}.error svg{width:100%;height:auto}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}`;
@@ -601,7 +595,7 @@ class DotLottiePlayer extends lit.LitElement {
             return;
         }
         const { currentFrame, totalFrames } = this._lottieInstance;
-        this._seeker = Math.floor(currentFrame / totalFrames * 100);
+        this._seeker = Math.round(currentFrame / totalFrames * 100);
         this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Frame, {
             detail: {
                 frame: currentFrame,
@@ -623,7 +617,7 @@ class DotLottiePlayer extends lit.LitElement {
             }
         }
         const { currentFrame, totalFrames } = this._lottieInstance;
-        this._seeker = Math.floor(currentFrame / totalFrames * 100);
+        this._seeker = Math.round(currentFrame / totalFrames * 100);
         this.currentState = exports.PlayerState.Completed;
         this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Complete, {
             detail: {
@@ -699,7 +693,7 @@ class DotLottiePlayer extends lit.LitElement {
         if (!(target instanceof HTMLInputElement) || !this._lottieInstance || isNaN(Number(target.value))) {
             return;
         }
-        this.seek(Math.floor(Number(target.value) / 100 * this._lottieInstance.totalFrames));
+        this.seek(Math.round(Number(target.value) / 100 * this._lottieInstance.totalFrames));
         setTimeout(()=>{
             if (target.parentElement instanceof HTMLFormElement) {
                 target.parentElement.reset();
@@ -816,7 +810,7 @@ class DotLottiePlayer extends lit.LitElement {
         if (!matches) {
             return;
         }
-        const frame = Math.floor(matches[2] === '%' ? this._lottieInstance.totalFrames * Number(matches[1]) / 100 : Number(matches[1]));
+        const frame = Math.round(matches[2] === '%' ? this._lottieInstance.totalFrames * Number(matches[1]) / 100 : Number(matches[1]));
         this._seeker = frame;
         if (this.currentState === exports.PlayerState.Playing || this.currentState === exports.PlayerState.Frozen && this._playerState.prev === exports.PlayerState.Playing) {
             this._lottieInstance.goToAndPlay(frame, true);

package/dist/custom-elements.json

@@ -4,46 +4,7 @@
   "modules": [
     {
       "kind": "javascript-module",
-      "path": "src/index.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "DotLottiePlayer",
-          "declaration": {
-            "name": "DotLottiePlayer",
-            "module": "src/index.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "PlayMode",
-          "declaration": {
-            "name": "PlayMode",
-            "module": "./component/utils"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "PlayerEvents",
-          "declaration": {
-            "name": "PlayerEvents",
-            "module": "./component/utils"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "PlayerState",
-          "declaration": {
-            "name": "PlayerState",
-            "module": "./component/utils"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/component/index.ts",
+      "path": "src/component.ts",
       "declarations": [
         {
           "kind": "class",
@@ -988,7 +949,7 @@
           "name": "DotLottiePlayer",
           "declaration": {
             "name": "DotLottiePlayer",
-            "module": "src/component/index.ts"
+            "module": "src/component.ts"
           }
         },
         {
@@ -996,20 +957,59 @@
           "name": "dotlottie-player",
           "declaration": {
             "name": "DotLottiePlayer",
-            "module": "src/component/index.ts"
+            "module": "src/component.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "DotLottiePlayer",
+          "declaration": {
+            "name": "DotLottiePlayer",
+            "module": "src/index.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PlayMode",
+          "declaration": {
+            "name": "PlayMode",
+            "module": "./utils"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PlayerEvents",
+          "declaration": {
+            "name": "PlayerEvents",
+            "module": "./utils"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PlayerState",
+          "declaration": {
+            "name": "PlayerState",
+            "module": "./utils"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/component/types.ts",
+      "path": "src/types.ts",
       "declarations": [],
       "exports": []
     },
     {
       "kind": "javascript-module",
-      "path": "src/component/utils.ts",
+      "path": "src/utils.ts",
       "declarations": [
         {
           "kind": "class",
@@ -1026,7 +1026,7 @@
           ],
           "superclass": {
             "name": "Error",
-            "module": "src/component/utils.ts"
+            "module": "src/utils.ts"
           }
         },
         {
@@ -1159,7 +1159,7 @@
           "name": "CustomError",
           "declaration": {
             "name": "CustomError",
-            "module": "src/component/utils.ts"
+            "module": "src/utils.ts"
           }
         },
         {
@@ -1167,7 +1167,7 @@
           "name": "addExt",
           "declaration": {
             "name": "addExt",
-            "module": "src/component/utils.ts"
+            "module": "src/utils.ts"
           }
         },
         {
@@ -1175,7 +1175,7 @@
           "name": "aspectRatio",
           "declaration": {
             "name": "aspectRatio",
-            "module": "src/component/utils.ts"
+            "module": "src/utils.ts"
           }
         },
         {
@@ -1183,7 +1183,7 @@
           "name": "base64ToU8",
           "declaration": {
             "name": "base64ToU8",
-            "module": "src/component/utils.ts"
+            "module": "src/utils.ts"
           }
         },
         {
@@ -1191,7 +1191,7 @@
           "name": "createDotLottie",
           "declaration": {
             "name": "createDotLottie",
-            "module": "src/component/utils.ts"
+            "module": "src/utils.ts"
           }
         },
         {
@@ -1199,7 +1199,7 @@
           "name": "createJSON",
           "declaration": {
             "name": "createJSON",
-            "module": "src/component/utils.ts"
+            "module": "src/utils.ts"
           }
         },
         {
@@ -1207,7 +1207,7 @@
           "name": "download",
           "declaration": {
             "name": "download",
-            "module": "src/component/utils.ts"
+            "module": "src/utils.ts"
           }
         },
         {
@@ -1215,7 +1215,7 @@
           "name": "fileToBase64",
           "declaration": {
             "name": "fileToBase64",
-            "module": "src/component/utils.ts"
+            "module": "src/utils.ts"
           }
         },
         {
@@ -1223,7 +1223,7 @@
           "name": "frameOutput",
           "declaration": {
             "name": "frameOutput",
-            "module": "src/component/utils.ts"
+            "module": "src/utils.ts"
           }
         },
         {
@@ -1231,7 +1231,7 @@
           "name": "getAnimationData",
           "declaration": {
             "name": "getAnimationData",
-            "module": "src/component/utils.ts"
+            "module": "src/utils.ts"
           }
         },
         {
@@ -1239,7 +1239,7 @@
           "name": "getArrayBuffer",
           "declaration": {
             "name": "getArrayBuffer",
-            "module": "src/component/utils.ts"
+            "module": "src/utils.ts"
           }
         },
         {
@@ -1247,7 +1247,7 @@
           "name": "getExt",
           "declaration": {
             "name": "getExt",
-            "module": "src/component/utils.ts"
+            "module": "src/utils.ts"
           }
         },
         {
@@ -1255,7 +1255,7 @@
           "name": "getExtFromB64",
           "declaration": {
             "name": "getExtFromB64",
-            "module": "src/component/utils.ts"
+            "module": "src/utils.ts"
           }
         },
         {
@@ -1263,7 +1263,7 @@
           "name": "getFilename",
           "declaration": {
             "name": "getFilename",
-            "module": "src/component/utils.ts"
+            "module": "src/utils.ts"
           }
         },
         {
@@ -1271,7 +1271,7 @@
           "name": "getLottieJSON",
           "declaration": {
             "name": "getLottieJSON",
-            "module": "src/component/utils.ts"
+            "module": "src/utils.ts"
           }
         },
         {
@@ -1279,7 +1279,7 @@
           "name": "getManifest",
           "declaration": {
             "name": "getManifest",
-            "module": "src/component/utils.ts"
+            "module": "src/utils.ts"
           }
         },
         {
@@ -1287,7 +1287,7 @@
           "name": "getMimeFromExt",
           "declaration": {
             "name": "getMimeFromExt",
-            "module": "src/component/utils.ts"
+            "module": "src/utils.ts"
           }
         },
         {
@@ -1295,7 +1295,7 @@
           "name": "handleErrors",
           "declaration": {
             "name": "handleErrors",
-            "module": "src/component/utils.ts"
+            "module": "src/utils.ts"
           }
         },
         {
@@ -1303,7 +1303,7 @@
           "name": "hasExt",
           "declaration": {
             "name": "hasExt",
-            "module": "src/component/utils.ts"
+            "module": "src/utils.ts"
           }
         },
         {
@@ -1311,7 +1311,7 @@
           "name": "isAudio",
           "declaration": {
             "name": "isAudio",
-            "module": "src/component/utils.ts"
+            "module": "src/utils.ts"
           }
         },
         {
@@ -1319,7 +1319,7 @@
           "name": "isBase64",
           "declaration": {
             "name": "isBase64",
-            "module": "src/component/utils.ts"
+            "module": "src/utils.ts"
           }
         },
         {
@@ -1327,7 +1327,7 @@
           "name": "isImage",
           "declaration": {
             "name": "isImage",
-            "module": "src/component/utils.ts"
+            "module": "src/utils.ts"
           }
         },
         {
@@ -1335,7 +1335,7 @@
           "name": "isServer",
           "declaration": {
             "name": "isServer",
-            "module": "src/component/utils.ts"
+            "module": "src/utils.ts"
           }
         },
         {
@@ -1343,7 +1343,7 @@
           "name": "parseBase64",
           "declaration": {
             "name": "parseBase64",
-            "module": "src/component/utils.ts"
+            "module": "src/utils.ts"
           }
         },
         {
@@ -1351,7 +1351,7 @@
           "name": "prepareString",
           "declaration": {
             "name": "prepareString",
-            "module": "src/component/utils.ts"
+            "module": "src/utils.ts"
           }
         },
         {
@@ -1359,7 +1359,7 @@
           "name": "resolveAssets",
           "declaration": {
             "name": "resolveAssets",
-            "module": "src/component/utils.ts"
+            "module": "src/utils.ts"
           }
         },
         {
@@ -1367,7 +1367,7 @@
           "name": "unzip",
           "declaration": {
             "name": "unzip",
-            "module": "src/component/utils.ts"
+            "module": "src/utils.ts"
           }
         },
         {
@@ -1375,7 +1375,7 @@
           "name": "useId",
           "declaration": {
             "name": "useId",
-            "module": "src/component/utils.ts"
+            "module": "src/utils.ts"
           }
         }
       ]

package/dist/esm/index.js

@@ -3,7 +3,7 @@ import { property, query, state, customElement } from 'lit/decorators.js';
 import Lottie from 'lottie-web';
 import { strToU8, zip, strFromU8, unzip as unzip$1 } from 'fflate';
 
-var name="@aarsteinmedia/dotlottie-player";var version="2.5.12";var description="Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";var exports={".":{"import":"./dist/esm/index.js",node:"./dist/esm/index.js",require:"./dist/cjs/index.js",types:"./dist/index.d.ts"}};var main="./dist/esm/index.js";var unpkg="./dist/index.js";var module="./dist/esm/index.js";var types="./dist/index.d.ts";var type="module";var homepage="https://www.aarstein.media/en/dotlottie-player";var repository={url:"https://github.com/aarsteinmedia/dotlottie-player.git",type:"git"};var bugs="https://github.com/aarsteinmedia/dotlottie-player/issues";var author={name:"Johan Martin Aarstein",email:"johan@aarstein.media",url:"https://www.aarstein.media",organization:"Aarstein Media"};var license="GPL-2.0-or-later";var scripts={build:"rimraf ./dist && rollup -c","build:types":"rimraf ./types && tsc","build:cem":"npx cem analyze --config cem.config.mjs",prod:"pnpm build:types && pnpm build && pnpm build:cem",dev:"rollup -c -w --environment NODE_ENV:development",lint:"tsc && eslint . --ext .ts","lint:fix":"eslint . --ext .ts --fix"};var dependencies={fflate:"^0.8.2",lit:"^3.1.4","lottie-web":"^5.12.2"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.9.9","@rollup/plugin-commonjs":"^25.0.8","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-replace":"^5.0.7","@rollup/plugin-typescript":"^11.1.6","@swc/core":"^1.5.25","@types/node":"^20.14.2","@typescript-eslint/eslint-plugin":"^7.12.0","@typescript-eslint/parser":"^7.12.0",autoprefixer:"^10.4.19","esbuild-sass-plugin":"^3.3.1",eslint:"^8.57.0","eslint-import-resolver-typescript":"^3.6.1","eslint-plugin-import":"^2.29.1","eslint-plugin-jsdoc":"^48.2.9","eslint-plugin-lit":"^1.14.0","postcss-flexbugs-fixes":"^5.0.2",rimraf:"^5.0.7",rollup:"^4.18.0","rollup-plugin-dts":"^6.1.1","rollup-plugin-html-literals":"^1.1.8","rollup-plugin-livereload":"^2.0.5","rollup-plugin-postcss":"^4.0.2","rollup-plugin-postcss-lit":"^2.1.0","rollup-plugin-serve":"^1.1.1","rollup-plugin-summary":"^2.0.1","rollup-plugin-swc3":"^0.11.2",sass:"^1.77.4","ts-lit-plugin":"^2.0.2",tslib:"^2.6.3",typescript:"^5.4.5"};var customElements="dist/custom-elements.json";var files=["dist","README.md"];var keywords=["lottie","dotlottie","animation","web component","component","lit-element","svg","vector","player"];var publishConfig={access:"public"};var engines={node:">= 8.17.0"};var funding={type:"paypal",url:"https://www.paypal.com/donate/?hosted_button_id=E7C7DMN8KSQ6A"};var pkg = {name:name,version:version,description:description,exports:exports,main:main,unpkg:unpkg,module:module,types:types,type:type,homepage:homepage,repository:repository,bugs:bugs,author:author,license:license,scripts:scripts,dependencies:dependencies,peerDependencies:peerDependencies,devDependencies:devDependencies,customElements:customElements,files:files,keywords:keywords,publishConfig:publishConfig,engines:engines,funding:funding};
+var name="@aarsteinmedia/dotlottie-player";var version="2.5.14";var description="Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";var exports={".":{"import":"./dist/esm/index.js",node:"./dist/esm/index.js",require:"./dist/cjs/index.js",types:"./dist/index.d.ts"}};var main="./dist/esm/index.js";var unpkg="./dist/index.js";var module="./dist/esm/index.js";var types="./dist/index.d.ts";var type="module";var homepage="https://www.aarstein.media/en/dotlottie-player";var repository={url:"https://github.com/aarsteinmedia/dotlottie-player.git",type:"git"};var bugs="https://github.com/aarsteinmedia/dotlottie-player/issues";var author={name:"Johan Martin Aarstein",email:"johan@aarstein.media",url:"https://www.aarstein.media",organization:"Aarstein Media"};var license="GPL-2.0-or-later";var scripts={build:"rimraf ./dist && rollup -c","build:types":"rimraf ./types && tsc","build:cem":"npx cem analyze --config cem.config.mjs",prod:"pnpm build:types && pnpm build && pnpm build:cem",dev:"rollup -c -w --environment NODE_ENV:development",lint:"tsc && eslint . --ext .ts","lint:fix":"eslint . --ext .ts --fix"};var dependencies={fflate:"^0.8.2",lit:"^3.1.4","lottie-web":"^5.12.2"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.9.9","@rollup/plugin-commonjs":"^25.0.8","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-replace":"^5.0.7","@rollup/plugin-typescript":"^11.1.6","@swc/core":"^1.5.29","@types/node":"^20.14.2","@typescript-eslint/eslint-plugin":"^7.13.0","@typescript-eslint/parser":"^7.13.0",autoprefixer:"^10.4.19","esbuild-sass-plugin":"^3.3.1",eslint:"^8.57.0","eslint-import-resolver-typescript":"^3.6.1","eslint-plugin-import":"^2.29.1","eslint-plugin-jsdoc":"^48.2.9","eslint-plugin-lit":"^1.14.0","postcss-flexbugs-fixes":"^5.0.2",rimraf:"^5.0.7",rollup:"^4.18.0","rollup-plugin-dts":"^6.1.1","rollup-plugin-html-literals":"^1.1.8","rollup-plugin-livereload":"^2.0.5","rollup-plugin-postcss":"^4.0.2","rollup-plugin-postcss-lit":"^2.1.0","rollup-plugin-serve":"^1.1.1","rollup-plugin-summary":"^2.0.1","rollup-plugin-swc3":"^0.11.2",sass:"^1.77.5","ts-lit-plugin":"^2.0.2",tslib:"^2.6.3",typescript:"^5.4.5"};var customElements="dist/custom-elements.json";var files=["dist","README.md"];var keywords=["lottie","dotlottie","animation","web component","component","lit-element","svg","vector","player"];var publishConfig={access:"public"};var engines={node:">= 8.17.0"};var funding={type:"paypal",url:"https://www.paypal.com/donate/?hosted_button_id=E7C7DMN8KSQ6A"};var pkg = {name:name,version:version,description:description,exports:exports,main:main,unpkg:unpkg,module:module,types:types,type:type,homepage:homepage,repository:repository,bugs:bugs,author:author,license:license,scripts:scripts,dependencies:dependencies,peerDependencies:peerDependencies,devDependencies:devDependencies,customElements:customElements,files:files,keywords:keywords,publishConfig:publishConfig,engines:engines,funding:funding};
 
 var PlayerState;
 (function(PlayerState) {
@@ -83,7 +83,7 @@ const addExt = (ext, str)=>{
                 if (!asset.p || !isImage(asset) && !isAudio(asset)) {
                     continue;
                 }
-                const { p: file, u: path } = asset, assetId = asset.id || useId(), isEncoded = file.startsWith('data:'), ext = isEncoded ? getExtFromB64(file) : getExt(file), dataURL = isEncoded ? file : await fileToBase64(path ? path.endsWith('/') && `${path}${file}` || `${path}/${file}` : file);
+                const { p: file, u: path } = asset, assetId = useId('asset'), isEncoded = file.startsWith('data:'), ext = isEncoded ? getExtFromB64(file) : getExt(file), dataURL = isEncoded ? file : await fileToBase64(path ? path.endsWith('/') && `${path}${file}` || `${path}/${file}` : file);
                 asset.p = `${assetId}.${ext}`;
                 asset.u = '';
                 asset.e = 1;
@@ -237,15 +237,9 @@ const addExt = (ext, str)=>{
         return;
     }
     const ext = str.split('.').pop()?.toLowerCase();
-    if (ext === 'jpeg') {
-        return 'jpg';
-    }
     return ext;
 }, getExtFromB64 = (str)=>{
     const mime = str.split(':')[1].split(';')[0], ext = mime.split('/')[1].split('+')[0];
-    if (ext === 'jpeg') {
-        return 'jpg';
-    }
     return ext;
 }, getFilename = (src, keepExt)=>{
     getExt(src);
@@ -350,7 +344,7 @@ const addExt = (ext, str)=>{
     return unzipped;
 }, useId = (prefix)=>{
     const s4 = ()=>((1 + Math.random()) * 0x10000 | 0).toString(16).substring(1);
-    return `${prefix ?? `:${s4()}`}-${s4()}`;
+    return `${prefix ?? `:${s4()}`}_${s4()}`;
 };
 
 var css_248z = css`*{box-sizing:border-box}:host{--lottie-player-toolbar-height:35px;--lottie-player-toolbar-background-color:#FFF;--lottie-player-toolbar-icon-color:#000;--lottie-player-toolbar-icon-hover-color:#000;--lottie-player-toolbar-icon-active-color:#4285f4;--lottie-player-seeker-track-color:rgba(0, 0, 0, 0.2);--lottie-player-seeker-thumb-color:#4285f4;--lottie-player-seeker-display:block;display:block;width:100%;height:100%}@media (prefers-color-scheme:dark){:host{--lottie-player-toolbar-background-color:#000;--lottie-player-toolbar-icon-color:#FFF;--lottie-player-toolbar-icon-hover-color:#FFF;--lottie-player-seeker-track-color:rgba(255, 255, 255, 0.6)}}.main{display:flex;flex-direction:column;height:100%;width:100%;margin:0;padding:0}.animation{width:100%;height:100%;display:flex}[data-controls=true] .animation{height:calc(100% - 35px)}.animation-container{position:relative}.popover{position:absolute;right:5px;bottom:40px;background-color:var(--lottie-player-toolbar-background-color);border-radius:5px;padding:10px 15px;border:solid 2px var(--lottie-player-toolbar-icon-color);animation:fadeIn .2s ease-in-out}.popover::before{content:"";right:10px;border:7px solid transparent;border-top-color:transparent;margin-right:-7px;height:0;width:0;position:absolute;pointer-events:none;top:100%;border-top-color:var(--lottie-player-toolbar-icon-color)}.toolbar{display:flex;align-items:center;justify-items:center;background:var(--lottie-player-toolbar-background-color);margin:0;height:35px;padding:5px;border-radius:5px;gap:5px}.toolbar.has-error{pointer-events:none;opacity:.5}.toolbar button{cursor:pointer;fill:var(--lottie-player-toolbar-icon-color);color:var(--lottie-player-toolbar-icon-color);display:flex;background:0 0;border:0;padding:0;outline:0;height:100%;margin:0;align-items:center;gap:5px;opacity:.9}.toolbar button:hover{opacity:1}.toolbar button[data-active=true]{opacity:1;fill:var(--lottie-player-toolbar-icon-active-color)}.toolbar button:disabled{opacity:.5}.toolbar button:focus{outline:0}.toolbar button svg{pointer-events:none}.toolbar button svg>*{fill:inherit}.toolbar button.disabled svg{display:none}.progress-container{position:relative;width:100%}.progress-container.simple{margin-right:12px}.seeker{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0}.seeker::-webkit-slider-runnable-track,.seeker::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;outline:0}progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0}.seeker{width:100%;height:20px;border-radius:3px;border:0;cursor:pointer;background-color:transparent;display:var(--lottie-player-seeker-display);color:var(--lottie-player-seeker-thumb-color);margin:0;padding:7.5px 0;position:relative;z-index:1}progress{position:absolute;width:100%;height:5px;border-radius:3px;border:0;top:0;left:0;margin:7.5px 0;background-color:var(--lottie-player-seeker-track-color);pointer-events:none}::-moz-progress-bar{background-color:var(--lottie-player-seeker-thumb-color)}::-webkit-progress-inner-element{border-radius:3px;overflow:hidden}::-webkit-slider-runnable-track{background-color:transparent}::-webkit-progress-value{background-color:var(--lottie-player-seeker-thumb-color)}.seeker::-webkit-slider-thumb{height:15px;width:15px;border-radius:50%;border:0;background-color:var(--lottie-player-seeker-thumb-color);cursor:pointer;-webkit-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;transform:scale(0)}.seeker:focus::-webkit-slider-thumb,.seeker:hover::-webkit-slider-thumb{transform:scale(1)}.seeker::-moz-range-progress{background-color:var(--lottie-player-seeker-thumb-color);height:5px;border-radius:3px}.seeker::-moz-range-thumb{height:15px;width:15px;border-radius:50%;background-color:var(--lottie-player-seeker-thumb-color);border:0;cursor:pointer;-moz-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;transform:scale(0)}.seeker:focus::-moz-range-thumb,.seeker:hover::-moz-range-thumb{transform:scale(1)}.seeker::-ms-track{width:100%;height:5px;cursor:pointer;background:0 0;border-color:transparent;color:transparent}.seeker::-ms-fill-upper{background:var(--lottie-player-seeker-track-color);border-radius:3px}.seeker::-ms-fill-lower{background-color:var(--lottie-player-seeker-thumb-color);border-radius:3px}.seeker::-ms-thumb{border:0;height:15px;width:15px;border-radius:50%;background:var(--lottie-player-seeker-thumb-color);cursor:pointer;-ms-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;transform:scale(0)}.seeker:hover::-ms-thumb{transform:scale(1)}.seeker:focus::-ms-thumb{transform:scale(1)}.seeker:focus::-ms-fill-lower,.seeker:focus::-ms-fill-upper{background:var(--lottie-player-seeker-track-color)}.error{display:flex;margin:auto;justify-content:center;height:100%;align-items:center}.error svg{width:100%;height:auto}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}`;
@@ -599,7 +593,7 @@ class DotLottiePlayer extends LitElement {
             return;
         }
         const { currentFrame, totalFrames } = this._lottieInstance;
-        this._seeker = Math.floor(currentFrame / totalFrames * 100);
+        this._seeker = Math.round(currentFrame / totalFrames * 100);
         this.dispatchEvent(new CustomEvent(PlayerEvents.Frame, {
             detail: {
                 frame: currentFrame,
@@ -621,7 +615,7 @@ class DotLottiePlayer extends LitElement {
             }
         }
         const { currentFrame, totalFrames } = this._lottieInstance;
-        this._seeker = Math.floor(currentFrame / totalFrames * 100);
+        this._seeker = Math.round(currentFrame / totalFrames * 100);
         this.currentState = PlayerState.Completed;
         this.dispatchEvent(new CustomEvent(PlayerEvents.Complete, {
             detail: {
@@ -697,7 +691,7 @@ class DotLottiePlayer extends LitElement {
         if (!(target instanceof HTMLInputElement) || !this._lottieInstance || isNaN(Number(target.value))) {
             return;
         }
-        this.seek(Math.floor(Number(target.value) / 100 * this._lottieInstance.totalFrames));
+        this.seek(Math.round(Number(target.value) / 100 * this._lottieInstance.totalFrames));
         setTimeout(()=>{
             if (target.parentElement instanceof HTMLFormElement) {
                 target.parentElement.reset();
@@ -814,7 +808,7 @@ class DotLottiePlayer extends LitElement {
         if (!matches) {
             return;
         }
-        const frame = Math.floor(matches[2] === '%' ? this._lottieInstance.totalFrames * Number(matches[1]) / 100 : Number(matches[1]));
+        const frame = Math.round(matches[2] === '%' ? this._lottieInstance.totalFrames * Number(matches[1]) / 100 : Number(matches[1]));
         this._seeker = frame;
         if (this.currentState === PlayerState.Playing || this.currentState === PlayerState.Frozen && this._playerState.prev === PlayerState.Playing) {
             this._lottieInstance.goToAndPlay(frame, true);