@aarsteinmedia/dotlottie-player 2.2.10 → 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 -57
  2. package/dist/custom-elements.json +34 -44
  3. package/dist/esm/index.js +76 -58
  4. package/dist/index.d.ts +46 -7
  5. package/dist/index.js +8 -8
  6. package/package.json +3 -3
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,18 +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 (const [i] of [
257
- ...Array(str.length)
258
- ].entries()){
259
- u8[i] = str.charCodeAt(i);
260
- }
261
- return u8;
262
- }, 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)=>{
263
279
  if (!Array.isArray(assets)) return;
264
280
  const toResolve = [];
265
281
  for (const asset of assets){
@@ -267,8 +283,8 @@ const addExt = (ext, str)=>{
267
283
  const type = isImage(asset) ? 'images' : 'audio', u8 = unzipped?.[`${type}/${asset.p}`];
268
284
  if (!u8) continue;
269
285
  toResolve.push(new Promise((resolveAsset)=>{
270
- const assetB64 = isServer() ? Buffer.from(u8).toString('base64') : btoa(u8.reduce((dat, byte)=>dat + String.fromCharCode(byte), ''));
271
- 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}`;
272
288
  asset.e = 1;
273
289
  asset.u = '';
274
290
  resolveAsset();
@@ -292,7 +308,7 @@ const addExt = (ext, str)=>{
292
308
  return `${prefix ?? `:${s4()}`}-${s4()}`;
293
309
  };
294
310
 
295
- var name="@aarsteinmedia/dotlottie-player";var version="2.2.10";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.101","@types/node":"^20.10.5","@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};
296
312
 
297
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}}`;
298
314
 
@@ -492,14 +508,15 @@ class DotLottiePlayer extends LitElement {
492
508
  return mandatory.every((field)=>Object.prototype.hasOwnProperty.call(json, field));
493
509
  }
494
510
  async addAnimation(configs, fileName, triggerDownload = true) {
511
+ const { animations: _animations, manifest: _manifest } = await getAnimationData(this.src);
495
512
  try {
496
- const oldManifest = this._manifest || {
513
+ const oldManifest = _manifest || {
497
514
  animations: []
498
515
  };
499
516
  let manifest = {
500
517
  ...oldManifest,
501
518
  generator: pkg.name
502
- }, animations = this._animations || [];
519
+ }, animations = _animations || [];
503
520
  for (const config of configs){
504
521
  const { url } = config, { animations: animationsToAdd } = await getAnimationData(url);
505
522
  if (!animationsToAdd) {
@@ -723,13 +740,13 @@ class DotLottiePlayer extends LitElement {
723
740
  this._currentAnimation--;
724
741
  this._switchInstance(true);
725
742
  }
726
- convert(typeCheck, manifest, animations, fileName, download = true) {
743
+ async convert({ typeCheck, manifest, animations, fileName, download = true }) {
727
744
  if (typeCheck || this._isDotLottie) return;
728
745
  const oldManifest = manifest || this._manifest, newManifest = {
729
746
  ...oldManifest,
730
747
  generator: pkg.name
731
748
  };
732
- 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);
733
750
  }
734
751
  static get styles() {
735
752
  return css_248z;
@@ -811,6 +828,7 @@ class DotLottiePlayer extends LitElement {
811
828
  this._onVisibilityChange = this._onVisibilityChange.bind(this);
812
829
  this._mouseEnter = this._mouseEnter.bind(this);
813
830
  this._mouseLeave = this._mouseLeave.bind(this);
831
+ this.convert = this.convert.bind(this);
814
832
  }
815
833
  }
816
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;