@aarsteinmedia/dotlottie-player 2.2.11 → 2.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/cjs/index.js +75 -55
  2. package/dist/custom-elements.json +34 -44
  3. package/dist/esm/index.js +76 -56
  4. package/dist/index.d.ts +46 -7
  5. package/dist/index.js +2 -2
  6. package/package.json +1 -1
package/dist/esm/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { css, LitElement, html, nothing } from 'lit';
2
2
  import { property, query, state, customElement } from 'lit/decorators.js';
3
3
  import Lottie from 'lottie-web';
4
- import { zip, strFromU8, unzip as unzip$1 } from 'fflate';
4
+ import { strToU8, zip, strFromU8, unzip as unzip$1 } from 'fflate';
5
5
 
6
6
  var PlayerState;
7
7
  (function(PlayerState) {
@@ -59,41 +59,37 @@ const addExt = (ext, str)=>{
59
59
  default:
60
60
  return 'xMidYMid meet';
61
61
  }
62
- }, base64ToU8 = (str)=>{
63
- const parsedStr = str.substring(str.indexOf(',') + 1);
64
- return strToU8(isServer() ? Buffer.from(parsedStr, 'base64').toString('binary') : atob(parsedStr));
65
- }, createDotLottie = async (animations, manifest, filename, triggerDownload = true)=>{
62
+ }, base64ToU8 = (str)=>strToU8(isServer() ? Buffer.from(parseBase64(str), 'base64').toString('binary') : atob(parseBase64(str)), true), createDotLottie = async (animations, manifest, filename, triggerDownload = true)=>{
66
63
  try {
67
64
  if (!animations?.length || !manifest) {
68
65
  throw new Error(`Missing or malformed required parameter(s):\n ${!animations?.length ? '- animations\n' : ''} ${!manifest ? '- manifest \n' : ''}`);
69
66
  }
70
67
  const name = addExt('lottie', filename) || `${useId()}.lottie`, dotlottie = {
71
68
  'manifest.json': [
72
- strToU8(JSON.stringify(manifest)),
69
+ strToU8(JSON.stringify(manifest), true),
73
70
  {
74
71
  level: 0
75
72
  }
76
73
  ]
77
74
  };
78
75
  for (const [i, animation] of animations.entries()){
79
- if (animation.assets?.length) {
80
- for (const asset of animation.assets){
81
- const { id, p } = asset;
82
- if (id && p) {
83
- const ext = getExtFromB64(p);
84
- asset.p = `${id}.${ext}`;
85
- asset.e = 0;
86
- dotlottie[`images/${id}.${ext}`] = [
87
- base64ToU8(p),
88
- {
89
- level: 9
90
- }
91
- ];
92
- }
76
+ for (const asset of animation.assets ?? []){
77
+ if (!asset.p || !isImage(asset) && !isAudio(asset)) {
78
+ continue;
93
79
  }
80
+ 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);
81
+ asset.p = `${assetId}.${ext}`;
82
+ asset.u = '';
83
+ asset.e = 1;
84
+ dotlottie[`${isAudio(asset) ? 'audio' : 'images'}/${assetId}.${ext}`] = [
85
+ base64ToU8(dataURL),
86
+ {
87
+ level: 9
88
+ }
89
+ ];
94
90
  }
95
91
  dotlottie[`animations/${manifest.animations[i].id}.json`] = [
96
- strToU8(JSON.stringify(animation)),
92
+ strToU8(JSON.stringify(animation), true),
97
93
  {
98
94
  level: 9
99
95
  }
@@ -122,20 +118,23 @@ const addExt = (ext, str)=>{
122
118
  link.remove();
123
119
  URL.revokeObjectURL(dataURL);
124
120
  }, 1000);
125
- }, handleErrors = (err)=>{
126
- const res = {
127
- message: 'Unknown error',
128
- status: isServer() ? 500 : 400
129
- };
130
- if (err && typeof err === 'object') {
131
- if ('message' in err && typeof err.message === 'string') {
132
- res.message = err.message;
133
- }
134
- if ('status' in err) {
135
- res.status = Number(err.status);
121
+ }, fileToBase64 = async (url)=>{
122
+ const response = await fetch(url), blob = await response.blob();
123
+ return new Promise((resolve, reject)=>{
124
+ try {
125
+ const reader = new FileReader();
126
+ reader.onload = ()=>{
127
+ if (typeof reader.result === 'string') {
128
+ resolve(reader.result);
129
+ return;
130
+ }
131
+ reject();
132
+ };
133
+ reader.readAsDataURL(blob);
134
+ } catch (e) {
135
+ reject(e);
136
136
  }
137
- }
138
- return res;
137
+ });
139
138
  }, frameOutput = (frame)=>((frame ?? 0) + 1).toString().padStart(3, '0'), getAnimationData = async (input)=>{
140
139
  try {
141
140
  if (!input || typeof input !== 'string' && typeof input !== 'object') {
@@ -147,7 +146,8 @@ const addExt = (ext, str)=>{
147
146
  ];
148
147
  return {
149
148
  animations,
150
- manifest: null
149
+ manifest: null,
150
+ isDotLottie: false
151
151
  };
152
152
  }
153
153
  const result = await fetch(input);
@@ -164,7 +164,8 @@ const addExt = (ext, str)=>{
164
164
  animations: [
165
165
  lottie
166
166
  ],
167
- manifest: null
167
+ manifest: null,
168
+ isDotLottie: false
168
169
  };
169
170
  }
170
171
  const text = await result.clone().text();
@@ -174,9 +175,12 @@ const addExt = (ext, str)=>{
174
175
  animations: [
175
176
  lottie
176
177
  ],
177
- manifest: null
178
+ manifest: null,
179
+ isDotLottie: false
178
180
  };
179
- } catch {}
181
+ } catch (e) {
182
+ console.warn(e);
183
+ }
180
184
  }
181
185
  const { data, manifest } = await getLottieJSON(result);
182
186
  return {
@@ -188,7 +192,8 @@ const addExt = (ext, str)=>{
188
192
  console.error(`❌ ${handleErrors(err).message}`);
189
193
  return {
190
194
  animations: null,
191
- manifest: null
195
+ manifest: null,
196
+ isDotLottie: false
192
197
  };
193
198
  }
194
199
  }, getArrayBuffer = async (zippable)=>{
@@ -212,14 +217,15 @@ const addExt = (ext, str)=>{
212
217
  return mime.split('/')[1].split('+')[0];
213
218
  }, getFilename = (src, keepExt)=>{
214
219
  const ext = getExt(src);
215
- return `${src.replace(/\.[^.]*$/, '').replace(/\W+/g, '')}${keepExt && ext ? `.${ext}` : ''}`.toLowerCase();
220
+ return `${src.split('/').pop()?.replace(/\.[^.]*$/, '').replace(/\W+/g, '')}${keepExt && ext ? `.${ext}` : ''}`;
216
221
  }, getLottieJSON = async (resp)=>{
217
- const unzipped = await unzip(resp), manifest = getManifest(unzipped), data = [];
222
+ const unzipped = await unzip(resp), manifest = getManifest(unzipped), data = [], toResolve = [];
218
223
  for (const { id } of manifest.animations){
219
224
  const str = strFromU8(unzipped[`animations/${id}.json`]), lottie = JSON.parse(str);
220
- await resolveAssets(unzipped, lottie.assets);
225
+ toResolve.push(resolveAssets(unzipped, lottie.assets));
221
226
  data.push(lottie);
222
227
  }
228
+ await Promise.all(toResolve);
223
229
  return {
224
230
  data,
225
231
  manifest
@@ -248,16 +254,28 @@ const addExt = (ext, str)=>{
248
254
  default:
249
255
  return '';
250
256
  }
257
+ }, handleErrors = (err)=>{
258
+ const res = {
259
+ message: 'Unknown error',
260
+ status: isServer() ? 500 : 400
261
+ };
262
+ if (err && typeof err === 'object') {
263
+ if ('message' in err && typeof err.message === 'string') {
264
+ res.message = err.message;
265
+ }
266
+ if ('status' in err) {
267
+ res.status = Number(err.status);
268
+ }
269
+ }
270
+ return res;
251
271
  }, hasExt = (path)=>{
252
272
  const lastDotIndex = path?.split('/').pop()?.lastIndexOf('.');
253
273
  return (lastDotIndex ?? 0) > 1 && path && path.length - 1 > (lastDotIndex ?? 0);
254
- }, 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)=>{
255
- const u8 = new Uint8Array(str.length);
256
- for(let i = 0; i < str.length; i++){
257
- u8[i] = str.charCodeAt(i);
258
- }
259
- return u8;
260
- }, resolveAssets = async (unzipped, assets)=>{
274
+ }, isAudio = (asset)=>!('h' in asset) && !('w' in asset) && 'p' in asset && 'e' in asset && 'u' in asset && 'id' in asset, isBase64 = (str)=>{
275
+ if (!str) return false;
276
+ const regex = /^([0-9a-zA-Z+/]{4})*(([0-9a-zA-Z+/]{2}==)|([0-9a-zA-Z+/]{3}=))?$/;
277
+ return regex.test(parseBase64(str));
278
+ }, 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)=>{
261
279
  if (!Array.isArray(assets)) return;
262
280
  const toResolve = [];
263
281
  for (const asset of assets){
@@ -265,8 +283,8 @@ const addExt = (ext, str)=>{
265
283
  const type = isImage(asset) ? 'images' : 'audio', u8 = unzipped?.[`${type}/${asset.p}`];
266
284
  if (!u8) continue;
267
285
  toResolve.push(new Promise((resolveAsset)=>{
268
- const assetB64 = isServer() ? Buffer.from(u8).toString('base64') : btoa(u8.reduce((dat, byte)=>dat + String.fromCharCode(byte), ''));
269
- asset.p = `data:${getMimeFromExt(getExt(asset.p))};base64,${assetB64}`;
286
+ const assetB64 = isServer() ? Buffer.from(u8).toString('base64') : btoa(u8.reduce((dat, byte)=>`${dat}${String.fromCharCode(byte)}`, ''));
287
+ asset.p = asset.p?.startsWith('data:') || isBase64(asset.p) ? asset.p : `data:${getMimeFromExt(getExt(asset.p))};base64,${assetB64}`;
270
288
  asset.e = 1;
271
289
  asset.u = '';
272
290
  resolveAsset();
@@ -290,7 +308,7 @@ const addExt = (ext, str)=>{
290
308
  return `${prefix ?? `:${s4()}`}-${s4()}`;
291
309
  };
292
310
 
293
- 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};
311
+ var name="@aarsteinmedia/dotlottie-player";var version="2.3.0";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};
294
312
 
295
313
  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}}`;
296
314
 
@@ -490,14 +508,15 @@ class DotLottiePlayer extends LitElement {
490
508
  return mandatory.every((field)=>Object.prototype.hasOwnProperty.call(json, field));
491
509
  }
492
510
  async addAnimation(configs, fileName, triggerDownload = true) {
511
+ const { animations: _animations, manifest: _manifest } = await getAnimationData(this.src);
493
512
  try {
494
- const oldManifest = this._manifest || {
513
+ const oldManifest = _manifest || {
495
514
  animations: []
496
515
  };
497
516
  let manifest = {
498
517
  ...oldManifest,
499
518
  generator: pkg.name
500
- }, animations = this._animations || [];
519
+ }, animations = _animations || [];
501
520
  for (const config of configs){
502
521
  const { url } = config, { animations: animationsToAdd } = await getAnimationData(url);
503
522
  if (!animationsToAdd) {
@@ -721,13 +740,13 @@ class DotLottiePlayer extends LitElement {
721
740
  this._currentAnimation--;
722
741
  this._switchInstance(true);
723
742
  }
724
- convert(typeCheck, manifest, animations, fileName, download = true) {
743
+ async convert({ typeCheck, manifest, animations, fileName, download = true }) {
725
744
  if (typeCheck || this._isDotLottie) return;
726
745
  const oldManifest = manifest || this._manifest, newManifest = {
727
746
  ...oldManifest,
728
747
  generator: pkg.name
729
748
  };
730
- return createDotLottie(animations || this._animations, newManifest, `${getFilename(fileName || this.src)}.lottie`, download);
749
+ return createDotLottie(animations || (await getAnimationData(this.src)).animations, newManifest, `${getFilename(fileName || this.src)}.lottie`, download);
731
750
  }
732
751
  static get styles() {
733
752
  return css_248z;
@@ -809,6 +828,7 @@ class DotLottiePlayer extends LitElement {
809
828
  this._onVisibilityChange = this._onVisibilityChange.bind(this);
810
829
  this._mouseEnter = this._mouseEnter.bind(this);
811
830
  this._mouseLeave = this._mouseLeave.bind(this);
831
+ this.convert = this.convert.bind(this);
812
832
  }
813
833
  }
814
834
  _ts_decorate([
package/dist/index.d.ts CHANGED
@@ -3,19 +3,52 @@ import { LitElement, CSSResult } from 'lit';
3
3
  import { AnimationDirection, RendererType, AnimationSegment, AnimationItem } from 'lottie-web';
4
4
  import { RefObject, CSSProperties } from 'react';
5
5
 
6
+ type BoolInt = 0 | 1;
7
+ interface Shape {
8
+ a: ShapeData;
9
+ o: ShapeData;
10
+ p: ShapeData;
11
+ r: ShapeData;
12
+ s: ShapeData;
13
+ }
14
+ interface ShapeData {
15
+ a: 0 | 1;
16
+ k: number | number[];
17
+ ix: number;
18
+ }
19
+ interface Layer {
20
+ ao: BoolInt;
21
+ bm: number;
22
+ completed: boolean;
23
+ ddd: BoolInt;
24
+ ip: number;
25
+ ks: object;
26
+ nm: string;
27
+ op: number;
28
+ shapes: Shape[];
29
+ sr: number;
30
+ st: number;
31
+ td: number;
32
+ ty: number;
33
+ }
6
34
  interface LottieAsset {
7
- e: 0 | 1;
8
- id: string;
9
- p: string;
10
- u: string;
35
+ e?: BoolInt;
36
+ layers?: Layer[];
37
+ h?: number;
38
+ id?: string;
39
+ nm?: string;
40
+ p?: string;
41
+ u?: string;
42
+ xt?: number;
43
+ w?: number;
11
44
  }
12
45
  interface LottieJSON {
13
46
  assets?: LottieAsset[];
14
- ddd: number;
47
+ ddd: BoolInt;
15
48
  fr: number;
16
49
  h: number;
17
50
  ip: number;
18
- layers: unknown[];
51
+ layers: Layer[];
19
52
  markers: unknown[];
20
53
  meta: {
21
54
  a: string;
@@ -172,7 +205,13 @@ declare class DotLottiePlayer extends LitElement {
172
205
  private _switchInstance;
173
206
  next(): void;
174
207
  prev(): void;
175
- convert(typeCheck?: boolean, manifest?: LottieManifest, animations?: LottieJSON[], fileName?: string, download?: boolean): Promise<void | ArrayBuffer> | undefined;
208
+ convert({ typeCheck, manifest, animations, fileName, download }: {
209
+ typeCheck?: boolean;
210
+ manifest?: LottieManifest;
211
+ animations?: LottieJSON[];
212
+ fileName?: string;
213
+ download?: boolean;
214
+ }): Promise<void | ArrayBuffer>;
176
215
  static get styles(): CSSResult;
177
216
  constructor();
178
217
  connectedCallback(): void;