@aarsteinmedia/dotlottie-player 2.2.11 → 2.3.1
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.
- package/dist/cjs/index.js +95 -75
- package/dist/custom-elements.json +34 -44
- package/dist/esm/index.js +96 -76
- package/dist/index.d.ts +47 -8
- package/dist/index.js +2 -2
- package/package.json +3 -3
package/dist/cjs/index.js
CHANGED
|
@@ -61,48 +61,44 @@ const addExt = (ext, str)=>{
|
|
|
61
61
|
default:
|
|
62
62
|
return 'xMidYMid meet';
|
|
63
63
|
}
|
|
64
|
-
}, base64ToU8 = (str)=>{
|
|
65
|
-
const parsedStr = str.substring(str.indexOf(',') + 1);
|
|
66
|
-
return strToU8(isServer() ? Buffer.from(parsedStr, 'base64').toString('binary') : atob(parsedStr));
|
|
67
|
-
}, createDotLottie = async (animations, manifest, filename, triggerDownload = true)=>{
|
|
64
|
+
}, base64ToU8 = (str)=>fflate.strToU8(isServer() ? Buffer.from(parseBase64(str), 'base64').toString('binary') : atob(parseBase64(str)), true), createDotLottie = async ({ animations, manifest, fileName, shouldDownload = true })=>{
|
|
68
65
|
try {
|
|
69
66
|
if (!animations?.length || !manifest) {
|
|
70
67
|
throw new Error(`Missing or malformed required parameter(s):\n ${!animations?.length ? '- animations\n' : ''} ${!manifest ? '- manifest \n' : ''}`);
|
|
71
68
|
}
|
|
72
|
-
const name = addExt('lottie',
|
|
69
|
+
const name = addExt('lottie', fileName) || `${useId()}.lottie`, dotlottie = {
|
|
73
70
|
'manifest.json': [
|
|
74
|
-
strToU8(JSON.stringify(manifest)),
|
|
71
|
+
fflate.strToU8(JSON.stringify(manifest), true),
|
|
75
72
|
{
|
|
76
73
|
level: 0
|
|
77
74
|
}
|
|
78
75
|
]
|
|
79
76
|
};
|
|
80
77
|
for (const [i, animation] of animations.entries()){
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
if (id && p) {
|
|
85
|
-
const ext = getExtFromB64(p);
|
|
86
|
-
asset.p = `${id}.${ext}`;
|
|
87
|
-
asset.e = 0;
|
|
88
|
-
dotlottie[`images/${id}.${ext}`] = [
|
|
89
|
-
base64ToU8(p),
|
|
90
|
-
{
|
|
91
|
-
level: 9
|
|
92
|
-
}
|
|
93
|
-
];
|
|
94
|
-
}
|
|
78
|
+
for (const asset of animation.assets ?? []){
|
|
79
|
+
if (!asset.p || !isImage(asset) && !isAudio(asset)) {
|
|
80
|
+
continue;
|
|
95
81
|
}
|
|
82
|
+
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);
|
|
83
|
+
asset.p = `${assetId}.${ext}`;
|
|
84
|
+
asset.u = '';
|
|
85
|
+
asset.e = 1;
|
|
86
|
+
dotlottie[`${isAudio(asset) ? 'audio' : 'images'}/${assetId}.${ext}`] = [
|
|
87
|
+
base64ToU8(dataURL),
|
|
88
|
+
{
|
|
89
|
+
level: 9
|
|
90
|
+
}
|
|
91
|
+
];
|
|
96
92
|
}
|
|
97
93
|
dotlottie[`animations/${manifest.animations[i].id}.json`] = [
|
|
98
|
-
strToU8(JSON.stringify(animation)),
|
|
94
|
+
fflate.strToU8(JSON.stringify(animation), true),
|
|
99
95
|
{
|
|
100
96
|
level: 9
|
|
101
97
|
}
|
|
102
98
|
];
|
|
103
99
|
}
|
|
104
100
|
const buffer = await getArrayBuffer(dotlottie);
|
|
105
|
-
return
|
|
101
|
+
return shouldDownload ? download(buffer, {
|
|
106
102
|
name,
|
|
107
103
|
mimeType: 'application/zip'
|
|
108
104
|
}) : buffer;
|
|
@@ -124,20 +120,23 @@ const addExt = (ext, str)=>{
|
|
|
124
120
|
link.remove();
|
|
125
121
|
URL.revokeObjectURL(dataURL);
|
|
126
122
|
}, 1000);
|
|
127
|
-
},
|
|
128
|
-
const
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
123
|
+
}, fileToBase64 = async (url)=>{
|
|
124
|
+
const response = await fetch(url), blob = await response.blob();
|
|
125
|
+
return new Promise((resolve, reject)=>{
|
|
126
|
+
try {
|
|
127
|
+
const reader = new FileReader();
|
|
128
|
+
reader.onload = ()=>{
|
|
129
|
+
if (typeof reader.result === 'string') {
|
|
130
|
+
resolve(reader.result);
|
|
131
|
+
return;
|
|
132
|
+
}
|
|
133
|
+
reject();
|
|
134
|
+
};
|
|
135
|
+
reader.readAsDataURL(blob);
|
|
136
|
+
} catch (e) {
|
|
137
|
+
reject(e);
|
|
138
138
|
}
|
|
139
|
-
}
|
|
140
|
-
return res;
|
|
139
|
+
});
|
|
141
140
|
}, frameOutput = (frame)=>((frame ?? 0) + 1).toString().padStart(3, '0'), getAnimationData = async (input)=>{
|
|
142
141
|
try {
|
|
143
142
|
if (!input || typeof input !== 'string' && typeof input !== 'object') {
|
|
@@ -149,7 +148,8 @@ const addExt = (ext, str)=>{
|
|
|
149
148
|
];
|
|
150
149
|
return {
|
|
151
150
|
animations,
|
|
152
|
-
manifest:
|
|
151
|
+
manifest: undefined,
|
|
152
|
+
isDotLottie: false
|
|
153
153
|
};
|
|
154
154
|
}
|
|
155
155
|
const result = await fetch(input);
|
|
@@ -166,7 +166,8 @@ const addExt = (ext, str)=>{
|
|
|
166
166
|
animations: [
|
|
167
167
|
lottie
|
|
168
168
|
],
|
|
169
|
-
manifest:
|
|
169
|
+
manifest: undefined,
|
|
170
|
+
isDotLottie: false
|
|
170
171
|
};
|
|
171
172
|
}
|
|
172
173
|
const text = await result.clone().text();
|
|
@@ -176,9 +177,12 @@ const addExt = (ext, str)=>{
|
|
|
176
177
|
animations: [
|
|
177
178
|
lottie
|
|
178
179
|
],
|
|
179
|
-
manifest:
|
|
180
|
+
manifest: undefined,
|
|
181
|
+
isDotLottie: false
|
|
180
182
|
};
|
|
181
|
-
} catch
|
|
183
|
+
} catch (e) {
|
|
184
|
+
console.warn(e);
|
|
185
|
+
}
|
|
182
186
|
}
|
|
183
187
|
const { data, manifest } = await getLottieJSON(result);
|
|
184
188
|
return {
|
|
@@ -189,8 +193,9 @@ const addExt = (ext, str)=>{
|
|
|
189
193
|
} catch (err) {
|
|
190
194
|
console.error(`❌ ${handleErrors(err).message}`);
|
|
191
195
|
return {
|
|
192
|
-
animations:
|
|
193
|
-
manifest:
|
|
196
|
+
animations: undefined,
|
|
197
|
+
manifest: undefined,
|
|
198
|
+
isDotLottie: false
|
|
194
199
|
};
|
|
195
200
|
}
|
|
196
201
|
}, getArrayBuffer = async (zippable)=>{
|
|
@@ -214,14 +219,15 @@ const addExt = (ext, str)=>{
|
|
|
214
219
|
return mime.split('/')[1].split('+')[0];
|
|
215
220
|
}, getFilename = (src, keepExt)=>{
|
|
216
221
|
const ext = getExt(src);
|
|
217
|
-
return `${src.replace(/\.[^.]*$/, '').replace(/\W+/g, '')}${keepExt && ext ? `.${ext}` : ''}
|
|
222
|
+
return `${src.split('/').pop()?.replace(/\.[^.]*$/, '').replace(/\W+/g, '')}${keepExt && ext ? `.${ext}` : ''}`;
|
|
218
223
|
}, getLottieJSON = async (resp)=>{
|
|
219
|
-
const unzipped = await unzip(resp), manifest = getManifest(unzipped), data = [];
|
|
224
|
+
const unzipped = await unzip(resp), manifest = getManifest(unzipped), data = [], toResolve = [];
|
|
220
225
|
for (const { id } of manifest.animations){
|
|
221
226
|
const str = fflate.strFromU8(unzipped[`animations/${id}.json`]), lottie = JSON.parse(str);
|
|
222
|
-
|
|
227
|
+
toResolve.push(resolveAssets(unzipped, lottie.assets));
|
|
223
228
|
data.push(lottie);
|
|
224
229
|
}
|
|
230
|
+
await Promise.all(toResolve);
|
|
225
231
|
return {
|
|
226
232
|
data,
|
|
227
233
|
manifest
|
|
@@ -250,16 +256,28 @@ const addExt = (ext, str)=>{
|
|
|
250
256
|
default:
|
|
251
257
|
return '';
|
|
252
258
|
}
|
|
259
|
+
}, handleErrors = (err)=>{
|
|
260
|
+
const res = {
|
|
261
|
+
message: 'Unknown error',
|
|
262
|
+
status: isServer() ? 500 : 400
|
|
263
|
+
};
|
|
264
|
+
if (err && typeof err === 'object') {
|
|
265
|
+
if ('message' in err && typeof err.message === 'string') {
|
|
266
|
+
res.message = err.message;
|
|
267
|
+
}
|
|
268
|
+
if ('status' in err) {
|
|
269
|
+
res.status = Number(err.status);
|
|
270
|
+
}
|
|
271
|
+
}
|
|
272
|
+
return res;
|
|
253
273
|
}, hasExt = (path)=>{
|
|
254
274
|
const lastDotIndex = path?.split('/').pop()?.lastIndexOf('.');
|
|
255
275
|
return (lastDotIndex ?? 0) > 1 && path && path.length - 1 > (lastDotIndex ?? 0);
|
|
256
|
-
}, isAudio = (asset)=>!('h' in asset) && !('w' in asset) && 'p' in asset && 'e' in asset && 'u' in asset && 'id' in asset,
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
return u8;
|
|
262
|
-
}, resolveAssets = async (unzipped, assets)=>{
|
|
276
|
+
}, isAudio = (asset)=>!('h' in asset) && !('w' in asset) && 'p' in asset && 'e' in asset && 'u' in asset && 'id' in asset, isBase64 = (str)=>{
|
|
277
|
+
if (!str) return false;
|
|
278
|
+
const regex = /^([0-9a-zA-Z+/]{4})*(([0-9a-zA-Z+/]{2}==)|([0-9a-zA-Z+/]{3}=))?$/;
|
|
279
|
+
return regex.test(parseBase64(str));
|
|
280
|
+
}, 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
281
|
if (!Array.isArray(assets)) return;
|
|
264
282
|
const toResolve = [];
|
|
265
283
|
for (const asset of assets){
|
|
@@ -267,8 +285,8 @@ const addExt = (ext, str)=>{
|
|
|
267
285
|
const type = isImage(asset) ? 'images' : 'audio', u8 = unzipped?.[`${type}/${asset.p}`];
|
|
268
286
|
if (!u8) continue;
|
|
269
287
|
toResolve.push(new Promise((resolveAsset)=>{
|
|
270
|
-
const assetB64 = isServer() ? Buffer.from(u8).toString('base64') : btoa(u8.reduce((dat, byte)
|
|
271
|
-
asset.p = `data:${getMimeFromExt(getExt(asset.p))};base64,${assetB64}`;
|
|
288
|
+
const assetB64 = isServer() ? Buffer.from(u8).toString('base64') : btoa(u8.reduce((dat, byte)=>`${dat}${String.fromCharCode(byte)}`, ''));
|
|
289
|
+
asset.p = asset.p?.startsWith('data:') || isBase64(asset.p) ? asset.p : `data:${getMimeFromExt(getExt(asset.p))};base64,${assetB64}`;
|
|
272
290
|
asset.e = 1;
|
|
273
291
|
asset.u = '';
|
|
274
292
|
resolveAsset();
|
|
@@ -292,7 +310,7 @@ const addExt = (ext, str)=>{
|
|
|
292
310
|
return `${prefix ?? `:${s4()}`}-${s4()}`;
|
|
293
311
|
};
|
|
294
312
|
|
|
295
|
-
var name="@aarsteinmedia/dotlottie-player";var version="2.
|
|
313
|
+
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$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.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$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};
|
|
296
314
|
|
|
297
315
|
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}}`;
|
|
298
316
|
|
|
@@ -491,15 +509,12 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
491
509
|
];
|
|
492
510
|
return mandatory.every((field)=>Object.prototype.hasOwnProperty.call(json, field));
|
|
493
511
|
}
|
|
494
|
-
async addAnimation(configs, fileName,
|
|
512
|
+
async addAnimation(configs, fileName, shouldDownload = true) {
|
|
513
|
+
const { animations = [], manifest = {
|
|
514
|
+
animations: []
|
|
515
|
+
} } = await getAnimationData(this.src);
|
|
495
516
|
try {
|
|
496
|
-
|
|
497
|
-
animations: []
|
|
498
|
-
};
|
|
499
|
-
let manifest = {
|
|
500
|
-
...oldManifest,
|
|
501
|
-
generator: pkg.name
|
|
502
|
-
}, animations = this._animations || [];
|
|
517
|
+
manifest.generator = pkg.name;
|
|
503
518
|
for (const config of configs){
|
|
504
519
|
const { url } = config, { animations: animationsToAdd } = await getAnimationData(url);
|
|
505
520
|
if (!animationsToAdd) {
|
|
@@ -508,19 +523,18 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
508
523
|
if (manifest.animations.some(({ id })=>id === config.id)) {
|
|
509
524
|
throw new Error('Duplicate id for animation');
|
|
510
525
|
}
|
|
511
|
-
manifest =
|
|
512
|
-
...manifest,
|
|
513
|
-
|
|
514
|
-
...manifest.animations,
|
|
515
|
-
config
|
|
516
|
-
]
|
|
517
|
-
};
|
|
518
|
-
animations = [
|
|
519
|
-
...animations,
|
|
520
|
-
...animationsToAdd
|
|
526
|
+
manifest.animations = [
|
|
527
|
+
...manifest.animations,
|
|
528
|
+
config
|
|
521
529
|
];
|
|
530
|
+
animations?.push(...animationsToAdd);
|
|
522
531
|
}
|
|
523
|
-
return createDotLottie(
|
|
532
|
+
return createDotLottie({
|
|
533
|
+
animations,
|
|
534
|
+
manifest,
|
|
535
|
+
fileName,
|
|
536
|
+
shouldDownload
|
|
537
|
+
});
|
|
524
538
|
} catch (err) {
|
|
525
539
|
console.error(handleErrors(err).message);
|
|
526
540
|
}
|
|
@@ -723,13 +737,18 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
723
737
|
this._currentAnimation--;
|
|
724
738
|
this._switchInstance(true);
|
|
725
739
|
}
|
|
726
|
-
convert(typeCheck, manifest, animations, fileName,
|
|
740
|
+
async convert({ typeCheck, manifest, animations, fileName, shouldDownload = true }) {
|
|
727
741
|
if (typeCheck || this._isDotLottie) return;
|
|
728
742
|
const oldManifest = manifest || this._manifest, newManifest = {
|
|
729
743
|
...oldManifest,
|
|
730
744
|
generator: pkg.name
|
|
731
745
|
};
|
|
732
|
-
return createDotLottie(
|
|
746
|
+
return createDotLottie({
|
|
747
|
+
animations: animations || (await getAnimationData(this.src)).animations,
|
|
748
|
+
manifest: newManifest,
|
|
749
|
+
fileName: `${getFilename(fileName || this.src)}.lottie`,
|
|
750
|
+
shouldDownload
|
|
751
|
+
});
|
|
733
752
|
}
|
|
734
753
|
static get styles() {
|
|
735
754
|
return css_248z;
|
|
@@ -811,6 +830,7 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
811
830
|
this._onVisibilityChange = this._onVisibilityChange.bind(this);
|
|
812
831
|
this._mouseEnter = this._mouseEnter.bind(this);
|
|
813
832
|
this._mouseLeave = this._mouseLeave.bind(this);
|
|
833
|
+
this.convert = this.convert.bind(this);
|
|
814
834
|
}
|
|
815
835
|
}
|
|
816
836
|
_ts_decorate([
|
|
@@ -466,7 +466,7 @@
|
|
|
466
466
|
}
|
|
467
467
|
},
|
|
468
468
|
{
|
|
469
|
-
"name": "
|
|
469
|
+
"name": "shouldDownload",
|
|
470
470
|
"default": "true",
|
|
471
471
|
"description": "Whether to trigger a download in the browser.\nIf set to false the function returns an ArrayBuffer. Defaults to true.",
|
|
472
472
|
"type": {
|
|
@@ -687,46 +687,12 @@
|
|
|
687
687
|
"privacy": "public",
|
|
688
688
|
"parameters": [
|
|
689
689
|
{
|
|
690
|
-
"name": "typeCheck",
|
|
691
|
-
"optional": true,
|
|
690
|
+
"name": "{\n typeCheck,\n manifest,\n animations,\n fileName,\n shouldDownload = true\n }",
|
|
692
691
|
"type": {
|
|
693
|
-
"text": "boolean
|
|
694
|
-
},
|
|
695
|
-
"description": "External type safety"
|
|
696
|
-
},
|
|
697
|
-
{
|
|
698
|
-
"name": "manifest",
|
|
699
|
-
"optional": true,
|
|
700
|
-
"type": {
|
|
701
|
-
"text": "LottieManifest | undefined"
|
|
702
|
-
},
|
|
703
|
-
"description": "Externally added manifest"
|
|
704
|
-
},
|
|
705
|
-
{
|
|
706
|
-
"name": "animations",
|
|
707
|
-
"optional": true,
|
|
708
|
-
"type": {
|
|
709
|
-
"text": "LottieJSON[] | undefined"
|
|
710
|
-
},
|
|
711
|
-
"description": "Externally added animations"
|
|
712
|
-
},
|
|
713
|
-
{
|
|
714
|
-
"name": "fileName",
|
|
715
|
-
"optional": true,
|
|
716
|
-
"type": {
|
|
717
|
-
"text": "string"
|
|
718
|
-
}
|
|
719
|
-
},
|
|
720
|
-
{
|
|
721
|
-
"name": "download",
|
|
722
|
-
"default": "true",
|
|
723
|
-
"description": "Whether to trigger a download in the browser",
|
|
724
|
-
"type": {
|
|
725
|
-
"text": "boolean"
|
|
692
|
+
"text": "{\n /** External type safety */\n typeCheck?: boolean,\n\n /** Externally added manifest */\n manifest?: LottieManifest,\n\n /** Externally added animations */\n animations?: LottieJSON[],\n\n fileName?: string,\n\n /** Whether to trigger a download in the browser. Defaults to true */\n shouldDownload?: boolean\n }"
|
|
726
693
|
}
|
|
727
694
|
}
|
|
728
|
-
]
|
|
729
|
-
"description": "Convert JSON Lottie to dotLottie"
|
|
695
|
+
]
|
|
730
696
|
},
|
|
731
697
|
{
|
|
732
698
|
"kind": "method",
|
|
@@ -1006,7 +972,7 @@
|
|
|
1006
972
|
},
|
|
1007
973
|
{
|
|
1008
974
|
"kind": "variable",
|
|
1009
|
-
"name": "
|
|
975
|
+
"name": "fileToBase64"
|
|
1010
976
|
},
|
|
1011
977
|
{
|
|
1012
978
|
"kind": "variable",
|
|
@@ -1044,6 +1010,10 @@
|
|
|
1044
1010
|
"kind": "variable",
|
|
1045
1011
|
"name": "getMimeFromExt"
|
|
1046
1012
|
},
|
|
1013
|
+
{
|
|
1014
|
+
"kind": "variable",
|
|
1015
|
+
"name": "handleErrors"
|
|
1016
|
+
},
|
|
1047
1017
|
{
|
|
1048
1018
|
"kind": "variable",
|
|
1049
1019
|
"name": "hasExt"
|
|
@@ -1052,6 +1022,10 @@
|
|
|
1052
1022
|
"kind": "variable",
|
|
1053
1023
|
"name": "isAudio"
|
|
1054
1024
|
},
|
|
1025
|
+
{
|
|
1026
|
+
"kind": "variable",
|
|
1027
|
+
"name": "isBase64"
|
|
1028
|
+
},
|
|
1055
1029
|
{
|
|
1056
1030
|
"kind": "variable",
|
|
1057
1031
|
"name": "isImage"
|
|
@@ -1062,7 +1036,7 @@
|
|
|
1062
1036
|
},
|
|
1063
1037
|
{
|
|
1064
1038
|
"kind": "variable",
|
|
1065
|
-
"name": "
|
|
1039
|
+
"name": "parseBase64"
|
|
1066
1040
|
},
|
|
1067
1041
|
{
|
|
1068
1042
|
"kind": "variable",
|
|
@@ -1128,9 +1102,9 @@
|
|
|
1128
1102
|
},
|
|
1129
1103
|
{
|
|
1130
1104
|
"kind": "js",
|
|
1131
|
-
"name": "
|
|
1105
|
+
"name": "fileToBase64",
|
|
1132
1106
|
"declaration": {
|
|
1133
|
-
"name": "
|
|
1107
|
+
"name": "fileToBase64",
|
|
1134
1108
|
"module": "src/component/utils.ts"
|
|
1135
1109
|
}
|
|
1136
1110
|
},
|
|
@@ -1206,6 +1180,14 @@
|
|
|
1206
1180
|
"module": "src/component/utils.ts"
|
|
1207
1181
|
}
|
|
1208
1182
|
},
|
|
1183
|
+
{
|
|
1184
|
+
"kind": "js",
|
|
1185
|
+
"name": "handleErrors",
|
|
1186
|
+
"declaration": {
|
|
1187
|
+
"name": "handleErrors",
|
|
1188
|
+
"module": "src/component/utils.ts"
|
|
1189
|
+
}
|
|
1190
|
+
},
|
|
1209
1191
|
{
|
|
1210
1192
|
"kind": "js",
|
|
1211
1193
|
"name": "hasExt",
|
|
@@ -1222,6 +1204,14 @@
|
|
|
1222
1204
|
"module": "src/component/utils.ts"
|
|
1223
1205
|
}
|
|
1224
1206
|
},
|
|
1207
|
+
{
|
|
1208
|
+
"kind": "js",
|
|
1209
|
+
"name": "isBase64",
|
|
1210
|
+
"declaration": {
|
|
1211
|
+
"name": "isBase64",
|
|
1212
|
+
"module": "src/component/utils.ts"
|
|
1213
|
+
}
|
|
1214
|
+
},
|
|
1225
1215
|
{
|
|
1226
1216
|
"kind": "js",
|
|
1227
1217
|
"name": "isImage",
|
|
@@ -1240,9 +1230,9 @@
|
|
|
1240
1230
|
},
|
|
1241
1231
|
{
|
|
1242
1232
|
"kind": "js",
|
|
1243
|
-
"name": "
|
|
1233
|
+
"name": "parseBase64",
|
|
1244
1234
|
"declaration": {
|
|
1245
|
-
"name": "
|
|
1235
|
+
"name": "parseBase64",
|
|
1246
1236
|
"module": "src/component/utils.ts"
|
|
1247
1237
|
}
|
|
1248
1238
|
},
|