@aarsteinmedia/dotlottie-player 2.2.11 → 2.3.1

package/dist/esm/index.js

@@ -1,7 +1,7 @@
 import { css, LitElement, html, nothing } from 'lit';
 import { property, query, state, customElement } from 'lit/decorators.js';
 import Lottie from 'lottie-web';
-import { zip, strFromU8, unzip as unzip$1 } from 'fflate';
+import { strToU8, zip, strFromU8, unzip as unzip$1 } from 'fflate';
 
 var PlayerState;
 (function(PlayerState) {
@@ -59,48 +59,44 @@ const addExt = (ext, str)=>{
         default:
             return 'xMidYMid meet';
     }
-}, base64ToU8 = (str)=>{
-    const parsedStr = str.substring(str.indexOf(',') + 1);
-    return strToU8(isServer() ? Buffer.from(parsedStr, 'base64').toString('binary') : atob(parsedStr));
-}, createDotLottie = async (animations, manifest, filename, triggerDownload = true)=>{
+}, base64ToU8 = (str)=>strToU8(isServer() ? Buffer.from(parseBase64(str), 'base64').toString('binary') : atob(parseBase64(str)), true), createDotLottie = async ({ animations, manifest, fileName, shouldDownload = true })=>{
     try {
         if (!animations?.length || !manifest) {
             throw new Error(`Missing or malformed required parameter(s):\n ${!animations?.length ? '- animations\n' : ''} ${!manifest ? '- manifest \n' : ''}`);
         }
-        const name = addExt('lottie', filename) || `${useId()}.lottie`, dotlottie = {
+        const name = addExt('lottie', fileName) || `${useId()}.lottie`, dotlottie = {
             'manifest.json': [
-                strToU8(JSON.stringify(manifest)),
+                strToU8(JSON.stringify(manifest), true),
                 {
                     level: 0
                 }
             ]
         };
         for (const [i, animation] of animations.entries()){
-            if (animation.assets?.length) {
-                for (const asset of animation.assets){
-                    const { id, p } = asset;
-                    if (id && p) {
-                        const ext = getExtFromB64(p);
-                        asset.p = `${id}.${ext}`;
-                        asset.e = 0;
-                        dotlottie[`images/${id}.${ext}`] = [
-                            base64ToU8(p),
-                            {
-                                level: 9
-                            }
-                        ];
-                    }
+            for (const asset of animation.assets ?? []){
+                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);
+                asset.p = `${assetId}.${ext}`;
+                asset.u = '';
+                asset.e = 1;
+                dotlottie[`${isAudio(asset) ? 'audio' : 'images'}/${assetId}.${ext}`] = [
+                    base64ToU8(dataURL),
+                    {
+                        level: 9
+                    }
+                ];
             }
             dotlottie[`animations/${manifest.animations[i].id}.json`] = [
-                strToU8(JSON.stringify(animation)),
+                strToU8(JSON.stringify(animation), true),
                 {
                     level: 9
                 }
             ];
         }
         const buffer = await getArrayBuffer(dotlottie);
-        return triggerDownload ? download(buffer, {
+        return shouldDownload ? download(buffer, {
             name,
             mimeType: 'application/zip'
         }) : buffer;
@@ -122,20 +118,23 @@ const addExt = (ext, str)=>{
         link.remove();
         URL.revokeObjectURL(dataURL);
     }, 1000);
-}, handleErrors = (err)=>{
-    const res = {
-        message: 'Unknown error',
-        status: isServer() ? 500 : 400
-    };
-    if (err && typeof err === 'object') {
-        if ('message' in err && typeof err.message === 'string') {
-            res.message = err.message;
-        }
-        if ('status' in err) {
-            res.status = Number(err.status);
+}, fileToBase64 = async (url)=>{
+    const response = await fetch(url), blob = await response.blob();
+    return new Promise((resolve, reject)=>{
+        try {
+            const reader = new FileReader();
+            reader.onload = ()=>{
+                if (typeof reader.result === 'string') {
+                    resolve(reader.result);
+                    return;
+                }
+                reject();
+            };
+            reader.readAsDataURL(blob);
+        } catch (e) {
+            reject(e);
         }
-    }
-    return res;
+    });
 }, frameOutput = (frame)=>((frame ?? 0) + 1).toString().padStart(3, '0'), getAnimationData = async (input)=>{
     try {
         if (!input || typeof input !== 'string' && typeof input !== 'object') {
@@ -147,7 +146,8 @@ const addExt = (ext, str)=>{
             ];
             return {
                 animations,
-                manifest: null
+                manifest: undefined,
+                isDotLottie: false
             };
         }
         const result = await fetch(input);
@@ -164,7 +164,8 @@ const addExt = (ext, str)=>{
                     animations: [
                         lottie
                     ],
-                    manifest: null
+                    manifest: undefined,
+                    isDotLottie: false
                 };
             }
             const text = await result.clone().text();
@@ -174,9 +175,12 @@ const addExt = (ext, str)=>{
                     animations: [
                         lottie
                     ],
-                    manifest: null
+                    manifest: undefined,
+                    isDotLottie: false
                 };
-            } catch  {}
+            } catch (e) {
+                console.warn(e);
+            }
         }
         const { data, manifest } = await getLottieJSON(result);
         return {
@@ -187,8 +191,9 @@ const addExt = (ext, str)=>{
     } catch (err) {
         console.error(`❌ ${handleErrors(err).message}`);
         return {
-            animations: null,
-            manifest: null
+            animations: undefined,
+            manifest: undefined,
+            isDotLottie: false
         };
     }
 }, getArrayBuffer = async (zippable)=>{
@@ -212,14 +217,15 @@ const addExt = (ext, str)=>{
     return mime.split('/')[1].split('+')[0];
 }, getFilename = (src, keepExt)=>{
     const ext = getExt(src);
-    return `${src.replace(/\.[^.]*$/, '').replace(/\W+/g, '')}${keepExt && ext ? `.${ext}` : ''}`.toLowerCase();
+    return `${src.split('/').pop()?.replace(/\.[^.]*$/, '').replace(/\W+/g, '')}${keepExt && ext ? `.${ext}` : ''}`;
 }, getLottieJSON = async (resp)=>{
-    const unzipped = await unzip(resp), manifest = getManifest(unzipped), data = [];
+    const unzipped = await unzip(resp), manifest = getManifest(unzipped), data = [], toResolve = [];
     for (const { id } of manifest.animations){
         const str = strFromU8(unzipped[`animations/${id}.json`]), lottie = JSON.parse(str);
-        await resolveAssets(unzipped, lottie.assets);
+        toResolve.push(resolveAssets(unzipped, lottie.assets));
         data.push(lottie);
     }
+    await Promise.all(toResolve);
     return {
         data,
         manifest
@@ -248,16 +254,28 @@ const addExt = (ext, str)=>{
         default:
             return '';
     }
+}, handleErrors = (err)=>{
+    const res = {
+        message: 'Unknown error',
+        status: isServer() ? 500 : 400
+    };
+    if (err && typeof err === 'object') {
+        if ('message' in err && typeof err.message === 'string') {
+            res.message = err.message;
+        }
+        if ('status' in err) {
+            res.status = Number(err.status);
+        }
+    }
+    return res;
 }, hasExt = (path)=>{
     const lastDotIndex = path?.split('/').pop()?.lastIndexOf('.');
     return (lastDotIndex ?? 0) > 1 && path && path.length - 1 > (lastDotIndex ?? 0);
-}, 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++){
-        u8[i] = str.charCodeAt(i);
-    }
-    return u8;
-}, resolveAssets = async (unzipped, assets)=>{
+}, isAudio = (asset)=>!('h' in asset) && !('w' in asset) && 'p' in asset && 'e' in asset && 'u' in asset && 'id' in asset, isBase64 = (str)=>{
+    if (!str) return false;
+    const regex = /^([0-9a-zA-Z+/]{4})*(([0-9a-zA-Z+/]{2}==)|([0-9a-zA-Z+/]{3}=))?$/;
+    return regex.test(parseBase64(str));
+}, isImage = (asset)=>'w' in asset && 'h' in asset && !('xt' in asset) && 'p' in asset, isServer = ()=>!(typeof window !== 'undefined' && window.document), parseBase64 = (str)=>str.substring(str.indexOf(',') + 1), resolveAssets = async (unzipped, assets)=>{
     if (!Array.isArray(assets)) return;
     const toResolve = [];
     for (const asset of assets){
@@ -265,8 +283,8 @@ const addExt = (ext, str)=>{
         const type = isImage(asset) ? 'images' : 'audio', u8 = unzipped?.[`${type}/${asset.p}`];
         if (!u8) continue;
         toResolve.push(new Promise((resolveAsset)=>{
-            const assetB64 = isServer() ? Buffer.from(u8).toString('base64') : btoa(u8.reduce((dat, byte)=>dat + String.fromCharCode(byte), ''));
-            asset.p = `data:${getMimeFromExt(getExt(asset.p))};base64,${assetB64}`;
+            const assetB64 = isServer() ? Buffer.from(u8).toString('base64') : btoa(u8.reduce((dat, byte)=>`${dat}${String.fromCharCode(byte)}`, ''));
+            asset.p = asset.p?.startsWith('data:') || isBase64(asset.p) ? asset.p : `data:${getMimeFromExt(getExt(asset.p))};base64,${assetB64}`;
             asset.e = 1;
             asset.u = '';
             resolveAsset();
@@ -290,7 +308,7 @@ const addExt = (ext, str)=>{
     return `${prefix ?? `:${s4()}`}-${s4()}`;
 };
 
-var name="@aarsteinmedia/dotlottie-player";var version="2.2.11";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.1",lit:"^2.8.0","lottie-web":"^5.12.2"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.6.9","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-replace":"^5.0.5","@swc/core":"^1.3.102","@types/node":"^20.10.6","@typescript-eslint/eslint-plugin":"^5.62.0","@typescript-eslint/parser":"^5.62.0",autoprefixer:"^10.4.16","esbuild-sass-plugin":"^2.16.1",eslint:"^8.56.0","eslint-plugin-lit":"^1.11.0","postcss-flexbugs-fixes":"^5.0.2",rimraf:"^5.0.5",rollup:"^3.29.4","rollup-plugin-dts":"^6.1.0","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.0","rollup-plugin-swc3":"^0.9.1",sass:"^1.69.6","ts-lit-plugin":"^1.2.1",typescript:"^5.3.3"};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.3.1";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.1",lit:"^2.8.0","lottie-web":"^5.12.2"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.6.9","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-replace":"^5.0.5","@swc/core":"^1.3.102","@types/node":"^20.10.7","@typescript-eslint/eslint-plugin":"^5.62.0","@typescript-eslint/parser":"^5.62.0",autoprefixer:"^10.4.16","esbuild-sass-plugin":"^2.16.1",eslint:"^8.56.0","eslint-plugin-lit":"^1.11.0","postcss-flexbugs-fixes":"^5.0.2",rimraf:"^5.0.5",rollup:"^3.29.4","rollup-plugin-dts":"^6.1.0","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.0","rollup-plugin-swc3":"^0.9.1",sass:"^1.69.7","ts-lit-plugin":"^1.2.1",typescript:"^5.3.3"};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 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}}`;
 
@@ -489,15 +507,12 @@ class DotLottiePlayer extends LitElement {
         ];
         return mandatory.every((field)=>Object.prototype.hasOwnProperty.call(json, field));
     }
-    async addAnimation(configs, fileName, triggerDownload = true) {
+    async addAnimation(configs, fileName, shouldDownload = true) {
+        const { animations = [], manifest = {
+            animations: []
+        } } = await getAnimationData(this.src);
         try {
-            const oldManifest = this._manifest || {
-                animations: []
-            };
-            let manifest = {
-                ...oldManifest,
-                generator: pkg.name
-            }, animations = this._animations || [];
+            manifest.generator = pkg.name;
             for (const config of configs){
                 const { url } = config, { animations: animationsToAdd } = await getAnimationData(url);
                 if (!animationsToAdd) {
@@ -506,19 +521,18 @@ class DotLottiePlayer extends LitElement {
                 if (manifest.animations.some(({ id })=>id === config.id)) {
                     throw new Error('Duplicate id for animation');
                 }
-                manifest = {
-                    ...manifest,
-                    animations: [
-                        ...manifest.animations,
-                        config
-                    ]
-                };
-                animations = [
-                    ...animations,
-                    ...animationsToAdd
+                manifest.animations = [
+                    ...manifest.animations,
+                    config
                 ];
+                animations?.push(...animationsToAdd);
             }
-            return createDotLottie(animations, manifest, fileName, triggerDownload);
+            return createDotLottie({
+                animations,
+                manifest,
+                fileName,
+                shouldDownload
+            });
         } catch (err) {
             console.error(handleErrors(err).message);
         }
@@ -721,13 +735,18 @@ class DotLottiePlayer extends LitElement {
         this._currentAnimation--;
         this._switchInstance(true);
     }
-    convert(typeCheck, manifest, animations, fileName, download = true) {
+    async convert({ typeCheck, manifest, animations, fileName, shouldDownload = true }) {
         if (typeCheck || this._isDotLottie) return;
         const oldManifest = manifest || this._manifest, newManifest = {
             ...oldManifest,
             generator: pkg.name
         };
-        return createDotLottie(animations || this._animations, newManifest, `${getFilename(fileName || this.src)}.lottie`, download);
+        return createDotLottie({
+            animations: animations || (await getAnimationData(this.src)).animations,
+            manifest: newManifest,
+            fileName: `${getFilename(fileName || this.src)}.lottie`,
+            shouldDownload
+        });
     }
     static get styles() {
         return css_248z;
@@ -809,6 +828,7 @@ class DotLottiePlayer extends LitElement {
         this._onVisibilityChange = this._onVisibilityChange.bind(this);
         this._mouseEnter = this._mouseEnter.bind(this);
         this._mouseLeave = this._mouseLeave.bind(this);
+        this.convert = this.convert.bind(this);
     }
 }
 _ts_decorate([

package/dist/index.d.ts

@@ -3,19 +3,52 @@ import { LitElement, CSSResult } from 'lit';
 import { AnimationDirection, RendererType, AnimationSegment, AnimationItem } from 'lottie-web';
 import { RefObject, CSSProperties } from 'react';
 
+type BoolInt = 0 | 1;
+interface Shape {
+    a: ShapeData;
+    o: ShapeData;
+    p: ShapeData;
+    r: ShapeData;
+    s: ShapeData;
+}
+interface ShapeData {
+    a: BoolInt;
+    k: number | number[];
+    ix: number;
+}
+interface Layer {
+    ao: BoolInt;
+    bm: number;
+    completed: boolean;
+    ddd: BoolInt;
+    ip: number;
+    ks: object;
+    nm: string;
+    op: number;
+    shapes: Shape[];
+    sr: number;
+    st: number;
+    td: number;
+    ty: number;
+}
 interface LottieAsset {
-    e: 0 | 1;
-    id: string;
-    p: string;
-    u: string;
+    e?: BoolInt;
+    layers?: Layer[];
+    h?: number;
+    id?: string;
+    nm?: string;
+    p?: string;
+    u?: string;
+    xt?: number;
+    w?: number;
 }
 interface LottieJSON {
     assets?: LottieAsset[];
-    ddd: number;
+    ddd: BoolInt;
     fr: number;
     h: number;
     ip: number;
-    layers: unknown[];
+    layers: Layer[];
     markers: unknown[];
     meta: {
         a: string;
@@ -148,7 +181,7 @@ declare class DotLottiePlayer extends LitElement {
     private _onVisibilityChange;
     private _handleSeekChange;
     private _isLottie;
-    addAnimation(configs: AnimationConfig[], fileName?: string, triggerDownload?: boolean): Promise<void | ArrayBuffer>;
+    addAnimation(configs: AnimationConfig[], fileName?: string, shouldDownload?: boolean): Promise<void | ArrayBuffer>;
     getLottie(): AnimationItem | null;
     play(): void;
     pause(): void;
@@ -172,7 +205,13 @@ declare class DotLottiePlayer extends LitElement {
     private _switchInstance;
     next(): void;
     prev(): void;
-    convert(typeCheck?: boolean, manifest?: LottieManifest, animations?: LottieJSON[], fileName?: string, download?: boolean): Promise<void | ArrayBuffer> | undefined;
+    convert({ typeCheck, manifest, animations, fileName, shouldDownload }: {
+        typeCheck?: boolean;
+        manifest?: LottieManifest;
+        animations?: LottieJSON[];
+        fileName?: string;
+        shouldDownload?: boolean;
+    }): Promise<void | ArrayBuffer>;
     static get styles(): CSSResult;
     constructor();
     connectedCallback(): void;