@aarsteinmedia/dotlottie-player 2.5.9 → 2.5.11
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 +149 -52
- package/dist/esm/index.js +149 -52
- package/dist/index.js +2 -2
- package/package.json +15 -12
package/dist/cjs/index.js
CHANGED
|
@@ -5,6 +5,8 @@ var decorators_js = require('lit/decorators.js');
|
|
|
5
5
|
var Lottie = require('lottie-web');
|
|
6
6
|
var fflate = require('fflate');
|
|
7
7
|
|
|
8
|
+
var name="@aarsteinmedia/dotlottie-player";var version="2.5.11";var description="Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";var exports$1={".":{"import":"./dist/esm/index.js",node:"./dist/esm/index.js",require:"./dist/cjs/index.js",types:"./dist/index.d.ts"}};var main="./dist/esm/index.js";var unpkg="./dist/index.js";var module$1="./dist/esm/index.js";var types="./dist/index.d.ts";var type="module";var homepage="https://www.aarstein.media/en/dotlottie-player";var repository={url:"https://github.com/aarsteinmedia/dotlottie-player.git",type:"git"};var bugs="https://github.com/aarsteinmedia/dotlottie-player/issues";var author={name:"Johan Martin Aarstein",email:"johan@aarstein.media",url:"https://www.aarstein.media",organization:"Aarstein Media"};var license="GPL-2.0-or-later";var scripts={build:"rimraf ./dist && rollup -c","build:types":"rimraf ./types && tsc","build:cem":"npx cem analyze --config cem.config.mjs",prod:"pnpm build:types && pnpm build && pnpm build:cem",dev:"rollup -c -w --environment NODE_ENV:development",lint:"tsc && eslint . --ext .ts","lint:fix":"eslint . --ext .ts --fix"};var dependencies={fflate:"^0.8.2",lit:"^3.1.3","lottie-web":"^5.12.2"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.9.9","@rollup/plugin-commonjs":"^25.0.8","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-replace":"^5.0.5","@swc/core":"^1.5.24","@types/node":"^20.14.1","@typescript-eslint/eslint-plugin":"^7.12.0","@typescript-eslint/parser":"^7.12.0",autoprefixer:"^10.4.19","esbuild-sass-plugin":"^3.3.0",eslint:"^8.57.0","eslint-import-resolver-typescript":"^3.6.1","eslint-plugin-import":"^2.29.1","eslint-plugin-jsdoc":"^48.2.7","eslint-plugin-lit":"^1.14.0","postcss-flexbugs-fixes":"^5.0.2",rimraf:"^5.0.7",rollup:"^4.18.0","rollup-plugin-dts":"^6.1.1","rollup-plugin-html-literals":"^1.1.8","rollup-plugin-livereload":"^2.0.5","rollup-plugin-postcss":"^4.0.2","rollup-plugin-postcss-lit":"^2.1.0","rollup-plugin-serve":"^1.1.1","rollup-plugin-summary":"^2.0.1","rollup-plugin-swc3":"^0.11.2",sass:"^1.77.4","ts-lit-plugin":"^2.0.2",typescript:"^5.4.5"};var customElements="dist/custom-elements.json";var files=["dist","README.md"];var keywords=["lottie","dotlottie","animation","web component","component","lit-element","svg","vector","player"];var publishConfig={access:"public"};var engines={node:">= 8.17.0"};var funding={type:"paypal",url:"https://www.paypal.com/donate/?hosted_button_id=E7C7DMN8KSQ6A"};var pkg = {name:name,version:version,description:description,exports:exports$1,main:main,unpkg:unpkg,module:module$1,types:types,type:type,homepage:homepage,repository:repository,bugs:bugs,author:author,license:license,scripts:scripts,dependencies:dependencies,peerDependencies:peerDependencies,devDependencies:devDependencies,customElements:customElements,files:files,keywords:keywords,publishConfig:publishConfig,engines:engines,funding:funding};
|
|
9
|
+
|
|
8
10
|
exports.PlayerState = void 0;
|
|
9
11
|
(function(PlayerState) {
|
|
10
12
|
PlayerState["Completed"] = "completed";
|
|
@@ -41,9 +43,13 @@ exports.PlayerEvents = void 0;
|
|
|
41
43
|
class CustomError extends Error {
|
|
42
44
|
}
|
|
43
45
|
const addExt = (ext, str)=>{
|
|
44
|
-
if (!str)
|
|
46
|
+
if (!str) {
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
45
49
|
if (getExt(str)) {
|
|
46
|
-
if (getExt(str) === ext)
|
|
50
|
+
if (getExt(str) === ext) {
|
|
51
|
+
return str;
|
|
52
|
+
}
|
|
47
53
|
return `${getFilename(str)}.${ext}`;
|
|
48
54
|
}
|
|
49
55
|
return `${str}.${ext}`;
|
|
@@ -64,7 +70,7 @@ const addExt = (ext, str)=>{
|
|
|
64
70
|
}, base64ToU8 = (str)=>fflate.strToU8(isServer() ? Buffer.from(parseBase64(str), 'base64').toString('binary') : atob(parseBase64(str)), true), createDotLottie = async ({ animations, manifest, fileName, shouldDownload = true })=>{
|
|
65
71
|
try {
|
|
66
72
|
if (!animations?.length || !manifest) {
|
|
67
|
-
throw new Error(`Missing or malformed required parameter(s):\n ${
|
|
73
|
+
throw new Error(`Missing or malformed required parameter(s):\n ${animations?.length ? '- manifest\n' : ''} ${manifest ? '- animations\n' : ''}`);
|
|
68
74
|
}
|
|
69
75
|
const name = addExt('lottie', fileName) || `${useId()}.lottie`, dotlottie = {
|
|
70
76
|
'manifest.json': [
|
|
@@ -229,7 +235,9 @@ const addExt = (ext, str)=>{
|
|
|
229
235
|
});
|
|
230
236
|
return arrayBuffer;
|
|
231
237
|
}, getExt = (str)=>{
|
|
232
|
-
if (!str || !hasExt(str))
|
|
238
|
+
if (!str || !hasExt(str)) {
|
|
239
|
+
return;
|
|
240
|
+
}
|
|
233
241
|
const ext = str.split('.').pop()?.toLowerCase();
|
|
234
242
|
if (ext === 'jpeg') {
|
|
235
243
|
return 'jpg';
|
|
@@ -258,8 +266,12 @@ const addExt = (ext, str)=>{
|
|
|
258
266
|
};
|
|
259
267
|
}, getManifest = (unzipped)=>{
|
|
260
268
|
const file = fflate.strFromU8(unzipped['manifest.json'], false), manifest = JSON.parse(file);
|
|
261
|
-
if (!('animations' in manifest))
|
|
262
|
-
|
|
269
|
+
if (!('animations' in manifest)) {
|
|
270
|
+
throw new Error('Manifest not found');
|
|
271
|
+
}
|
|
272
|
+
if (!manifest.animations.length) {
|
|
273
|
+
throw new Error('No animations listed in manifest');
|
|
274
|
+
}
|
|
263
275
|
return manifest;
|
|
264
276
|
}, getMimeFromExt = (ext)=>{
|
|
265
277
|
switch(ext){
|
|
@@ -298,21 +310,27 @@ const addExt = (ext, str)=>{
|
|
|
298
310
|
const lastDotIndex = path?.split('/').pop()?.lastIndexOf('.');
|
|
299
311
|
return (lastDotIndex ?? 0) > 1 && path && path.length - 1 > (lastDotIndex ?? 0);
|
|
300
312
|
}, isAudio = (asset)=>!('h' in asset) && !('w' in asset) && 'p' in asset && 'e' in asset && 'u' in asset && 'id' in asset, isBase64 = (str)=>{
|
|
301
|
-
if (!str)
|
|
313
|
+
if (!str) {
|
|
314
|
+
return false;
|
|
315
|
+
}
|
|
302
316
|
const regex = /^([0-9a-zA-Z+/]{4})*(([0-9a-zA-Z+/]{2}==)|([0-9a-zA-Z+/]{3}=))?$/;
|
|
303
317
|
return regex.test(parseBase64(str));
|
|
304
|
-
}, 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), prepareString = (str)=>{
|
|
305
|
-
return str.replace(new RegExp(/"""/, 'g'), '""').replace(/(["'])(.*?)\1/g, (_match, quote, content)=>{
|
|
318
|
+
}, 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), prepareString = (str)=>str.replace(new RegExp(/"""/, 'g'), '""').replace(/(["'])(.*?)\1/g, (_match, quote, content)=>{
|
|
306
319
|
const replacedContent = content.replace(/[^\w\s\d.#]/g, '');
|
|
307
320
|
return `${quote}${replacedContent}${quote}`;
|
|
308
|
-
})
|
|
309
|
-
|
|
310
|
-
|
|
321
|
+
}), resolveAssets = async (unzipped, assets)=>{
|
|
322
|
+
if (!Array.isArray(assets)) {
|
|
323
|
+
return;
|
|
324
|
+
}
|
|
311
325
|
const toResolve = [];
|
|
312
326
|
for (const asset of assets){
|
|
313
|
-
if (!isAudio(asset) && !isImage(asset))
|
|
327
|
+
if (!isAudio(asset) && !isImage(asset)) {
|
|
328
|
+
continue;
|
|
329
|
+
}
|
|
314
330
|
const type = isImage(asset) ? 'images' : 'audio', u8 = unzipped?.[`${type}/${asset.p}`];
|
|
315
|
-
if (!u8)
|
|
331
|
+
if (!u8) {
|
|
332
|
+
continue;
|
|
333
|
+
}
|
|
316
334
|
toResolve.push(new Promise((resolveAsset)=>{
|
|
317
335
|
const assetB64 = isServer() ? Buffer.from(u8).toString('base64') : btoa(u8.reduce((dat, byte)=>`${dat}${String.fromCharCode(byte)}`, ''));
|
|
318
336
|
asset.p = asset.p?.startsWith('data:') || isBase64(asset.p) ? asset.p : `data:${getMimeFromExt(getExt(asset.p))};base64,${assetB64}`;
|
|
@@ -333,14 +351,10 @@ const addExt = (ext, str)=>{
|
|
|
333
351
|
});
|
|
334
352
|
return unzipped;
|
|
335
353
|
}, useId = (prefix)=>{
|
|
336
|
-
const s4 = ()=>
|
|
337
|
-
return ((1 + Math.random()) * 0x10000 | 0).toString(16).substring(1);
|
|
338
|
-
};
|
|
354
|
+
const s4 = ()=>((1 + Math.random()) * 0x10000 | 0).toString(16).substring(1);
|
|
339
355
|
return `${prefix ?? `:${s4()}`}-${s4()}`;
|
|
340
356
|
};
|
|
341
357
|
|
|
342
|
-
var name="@aarsteinmedia/dotlottie-player";var version="2.5.9";var description="Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";var exports$1={".":{"import":"./dist/esm/index.js",node:"./dist/esm/index.js",require:"./dist/cjs/index.js",types:"./dist/index.d.ts"}};var main="./dist/esm/index.js";var unpkg="./dist/index.js";var module$1="./dist/esm/index.js";var types="./dist/index.d.ts";var type="module";var homepage="https://www.aarstein.media/en/dotlottie-player";var repository={url:"https://github.com/aarsteinmedia/dotlottie-player.git",type:"git"};var bugs="https://github.com/aarsteinmedia/dotlottie-player/issues";var author={name:"Johan Martin Aarstein",email:"johan@aarstein.media",url:"https://www.aarstein.media",organization:"Aarstein Media"};var license="GPL-2.0-or-later";var scripts={build:"rimraf ./dist && rollup -c","build:types":"rimraf ./types && tsc","build:cem":"npx cem analyze --config cem.config.mjs",prod:"pnpm build:types && pnpm build && pnpm build:cem",dev:"rollup -c -w --environment NODE_ENV:development",lint:"tsc && eslint . --ext .ts","lint:fix":"eslint . --ext .ts --fix"};var dependencies={fflate:"^0.8.2",lit:"^3.1.3","lottie-web":"^5.12.2"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.9.9","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-replace":"^5.0.5","@swc/core":"^1.5.7","@types/node":"^20.12.12","@typescript-eslint/eslint-plugin":"^7.9.0","@typescript-eslint/parser":"^7.9.0",autoprefixer:"^10.4.19","esbuild-sass-plugin":"^3.2.0",eslint:"^8.57.0","eslint-plugin-lit":"^1.13.0","postcss-flexbugs-fixes":"^5.0.2",rimraf:"^5.0.7",rollup:"^4.17.2","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.11.2",sass:"^1.77.1","ts-lit-plugin":"^2.0.2",typescript:"^5.4.5"};var customElements="dist/custom-elements.json";var files=["dist","README.md"];var keywords=["lottie","dotlottie","animation","web component","component","lit-element","svg","vector","player"];var publishConfig={access:"public"};var engines={node:">= 8.17.0"};var funding={type:"paypal",url:"https://www.paypal.com/donate/?hosted_button_id=E7C7DMN8KSQ6A"};var pkg = {name:name,version:version,description:description,exports:exports$1,main:main,unpkg:unpkg,module:module$1,types:types,type:type,homepage:homepage,repository:repository,bugs:bugs,author:author,license:license,scripts:scripts,dependencies:dependencies,peerDependencies:peerDependencies,devDependencies:devDependencies,customElements:customElements,files:files,keywords:keywords,publishConfig:publishConfig,engines:engines,funding:funding};
|
|
343
|
-
|
|
344
358
|
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}}`;
|
|
345
359
|
|
|
346
360
|
function _ts_decorate(decorators, target, key, desc) {
|
|
@@ -351,10 +365,32 @@ function _ts_decorate(decorators, target, key, desc) {
|
|
|
351
365
|
}
|
|
352
366
|
class DotLottiePlayer extends lit.LitElement {
|
|
353
367
|
_getOptions() {
|
|
354
|
-
const preserveAspectRatio = this.preserveAspectRatio ?? (this.objectfit && aspectRatio(this.objectfit)), currentAnimationSettings = this.multiAnimationSettings?.
|
|
355
|
-
|
|
356
|
-
|
|
357
|
-
|
|
368
|
+
const preserveAspectRatio = this.preserveAspectRatio ?? (this.objectfit && aspectRatio(this.objectfit)), currentAnimationSettings = this.multiAnimationSettings?.length ? this.multiAnimationSettings?.[this._currentAnimation] : undefined, currentAnimationManifest = this._manifest.animations?.[this._currentAnimation];
|
|
369
|
+
let loop = !!this.loop;
|
|
370
|
+
if (currentAnimationSettings?.loop !== undefined) {
|
|
371
|
+
loop = !!currentAnimationSettings.loop;
|
|
372
|
+
}
|
|
373
|
+
let autoplay = !!this.autoplay;
|
|
374
|
+
if (currentAnimationManifest.autoplay !== undefined) {
|
|
375
|
+
autoplay = !!currentAnimationManifest.autoplay;
|
|
376
|
+
}
|
|
377
|
+
if (currentAnimationSettings?.autoplay !== undefined) {
|
|
378
|
+
autoplay = !!currentAnimationSettings.autoplay;
|
|
379
|
+
}
|
|
380
|
+
if (this.animateOnScroll) {
|
|
381
|
+
autoplay = false;
|
|
382
|
+
}
|
|
383
|
+
let initialSegment = this.segment;
|
|
384
|
+
if (this.segment?.every((val)=>val > 0)) {
|
|
385
|
+
initialSegment = [
|
|
386
|
+
this.segment[0] - 1,
|
|
387
|
+
this.segment[1] - 1
|
|
388
|
+
];
|
|
389
|
+
}
|
|
390
|
+
if (this.segment?.some((val)=>val < 0)) {
|
|
391
|
+
initialSegment = undefined;
|
|
392
|
+
}
|
|
393
|
+
const options = {
|
|
358
394
|
container: this.container,
|
|
359
395
|
loop,
|
|
360
396
|
autoplay,
|
|
@@ -414,13 +450,20 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
414
450
|
this._intersectionObserver.observe(this.container);
|
|
415
451
|
}
|
|
416
452
|
async load(src) {
|
|
417
|
-
if (!this.shadowRoot)
|
|
453
|
+
if (!this.shadowRoot) {
|
|
454
|
+
return;
|
|
455
|
+
}
|
|
418
456
|
try {
|
|
419
457
|
const { animations, manifest, isDotLottie } = await getAnimationData(src);
|
|
420
458
|
if (!animations || animations.some((animation)=>!this._isLottie(animation))) {
|
|
421
459
|
throw new Error('Broken or corrupted file');
|
|
422
460
|
}
|
|
423
|
-
this._isBounce = this.
|
|
461
|
+
this._isBounce = this.mode === exports.PlayMode.Bounce;
|
|
462
|
+
if (this.multiAnimationSettings?.length) {
|
|
463
|
+
if (this.multiAnimationSettings[this._currentAnimation]?.mode) {
|
|
464
|
+
this._isBounce = this.multiAnimationSettings[this._currentAnimation].mode === exports.PlayMode.Bounce;
|
|
465
|
+
}
|
|
466
|
+
}
|
|
424
467
|
this._isDotLottie = !!isDotLottie;
|
|
425
468
|
this._animations = animations;
|
|
426
469
|
this._manifest = manifest ?? {
|
|
@@ -435,8 +478,13 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
435
478
|
}
|
|
436
479
|
]
|
|
437
480
|
};
|
|
438
|
-
if (this._lottieInstance)
|
|
439
|
-
|
|
481
|
+
if (this._lottieInstance) {
|
|
482
|
+
this._lottieInstance.destroy();
|
|
483
|
+
}
|
|
484
|
+
this.currentState = exports.PlayerState.Stopped;
|
|
485
|
+
if (!this.animateOnScroll && (this.autoplay || this.multiAnimationSettings?.[this._currentAnimation]?.autoplay)) {
|
|
486
|
+
this.currentState = exports.PlayerState.Playing;
|
|
487
|
+
}
|
|
440
488
|
this._lottieInstance = Lottie.loadAnimation({
|
|
441
489
|
...this._getOptions(),
|
|
442
490
|
animationData: animations[this._currentAnimation]
|
|
@@ -453,20 +501,25 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
453
501
|
this.setDirection(direction);
|
|
454
502
|
this.setSubframe(!!this.subframe);
|
|
455
503
|
if (this.autoplay || this.animateOnScroll) {
|
|
456
|
-
if (this.direction === -1)
|
|
504
|
+
if (this.direction === -1) {
|
|
505
|
+
this.seek('99%');
|
|
506
|
+
}
|
|
457
507
|
if (!('IntersectionObserver' in window)) {
|
|
458
|
-
!this.animateOnScroll
|
|
508
|
+
if (!this.animateOnScroll) {
|
|
509
|
+
this.play();
|
|
510
|
+
}
|
|
459
511
|
this._playerState.visible = true;
|
|
460
512
|
}
|
|
461
513
|
this._addIntersectionObserver();
|
|
462
|
-
return;
|
|
463
514
|
}
|
|
464
515
|
}
|
|
465
516
|
getManifest() {
|
|
466
517
|
return this._manifest;
|
|
467
518
|
}
|
|
468
519
|
_addEventListeners() {
|
|
469
|
-
if (!this._lottieInstance)
|
|
520
|
+
if (!this._lottieInstance) {
|
|
521
|
+
return;
|
|
522
|
+
}
|
|
470
523
|
this._lottieInstance.addEventListener('enterFrame', this._enterFrame);
|
|
471
524
|
this._lottieInstance.addEventListener('complete', this._complete);
|
|
472
525
|
this._lottieInstance.addEventListener('loopComplete', this._loopComplete);
|
|
@@ -493,7 +546,9 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
493
546
|
}
|
|
494
547
|
}
|
|
495
548
|
_removeEventListeners() {
|
|
496
|
-
if (!this._lottieInstance || !this.container)
|
|
549
|
+
if (!this._lottieInstance || !this.container) {
|
|
550
|
+
return;
|
|
551
|
+
}
|
|
497
552
|
this._lottieInstance.removeEventListener('enterFrame', this._enterFrame);
|
|
498
553
|
this._lottieInstance.removeEventListener('complete', this._complete);
|
|
499
554
|
this._lottieInstance.removeEventListener('loopComplete', this._loopComplete);
|
|
@@ -512,7 +567,11 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
512
567
|
}
|
|
513
568
|
const { totalFrames, playDirection } = this._lottieInstance, inPoint = this.segment ? this.segment[0] : 0, outPoint = this.segment ? this.segment[0] : totalFrames;
|
|
514
569
|
if (this.count) {
|
|
515
|
-
this._isBounce
|
|
570
|
+
if (this._isBounce) {
|
|
571
|
+
this._playerState.count += 0.5;
|
|
572
|
+
} else {
|
|
573
|
+
this._playerState.count += 1;
|
|
574
|
+
}
|
|
516
575
|
if (this._playerState.count >= this.count) {
|
|
517
576
|
this.setLooping(false);
|
|
518
577
|
this.currentState = exports.PlayerState.Completed;
|
|
@@ -525,12 +584,16 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
525
584
|
this._lottieInstance.goToAndStop(playDirection === -1 ? inPoint : outPoint * 0.99, true);
|
|
526
585
|
this._lottieInstance.setDirection(playDirection * -1);
|
|
527
586
|
return setTimeout(()=>{
|
|
528
|
-
!this.animateOnScroll
|
|
587
|
+
if (!this.animateOnScroll) {
|
|
588
|
+
this._lottieInstance?.play();
|
|
589
|
+
}
|
|
529
590
|
}, this.intermission);
|
|
530
591
|
}
|
|
531
592
|
this._lottieInstance.goToAndStop(playDirection === -1 ? outPoint * 0.99 : inPoint, true);
|
|
532
593
|
return setTimeout(()=>{
|
|
533
|
-
!this.animateOnScroll
|
|
594
|
+
if (!this.animateOnScroll) {
|
|
595
|
+
this._lottieInstance?.play();
|
|
596
|
+
}
|
|
534
597
|
}, this.intermission);
|
|
535
598
|
}
|
|
536
599
|
_enterFrame() {
|
|
@@ -633,7 +696,9 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
633
696
|
}, 400);
|
|
634
697
|
}
|
|
635
698
|
_handleSeekChange({ target }) {
|
|
636
|
-
if (!(target instanceof HTMLInputElement) || !this._lottieInstance || isNaN(Number(target.value)))
|
|
699
|
+
if (!(target instanceof HTMLInputElement) || !this._lottieInstance || isNaN(Number(target.value))) {
|
|
700
|
+
return;
|
|
701
|
+
}
|
|
637
702
|
this.seek(Math.floor(Number(target.value) / 100 * this._lottieInstance.totalFrames));
|
|
638
703
|
setTimeout(()=>{
|
|
639
704
|
if (target.parentElement instanceof HTMLFormElement) {
|
|
@@ -693,7 +758,9 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
693
758
|
return this._lottieInstance;
|
|
694
759
|
}
|
|
695
760
|
play() {
|
|
696
|
-
if (!this._lottieInstance)
|
|
761
|
+
if (!this._lottieInstance) {
|
|
762
|
+
return;
|
|
763
|
+
}
|
|
697
764
|
if (this.currentState) {
|
|
698
765
|
this._playerState.prev = this.currentState;
|
|
699
766
|
}
|
|
@@ -704,7 +771,9 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
704
771
|
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Play));
|
|
705
772
|
}
|
|
706
773
|
pause() {
|
|
707
|
-
if (!this._lottieInstance)
|
|
774
|
+
if (!this._lottieInstance) {
|
|
775
|
+
return;
|
|
776
|
+
}
|
|
708
777
|
if (this.currentState) {
|
|
709
778
|
this._playerState.prev = this.currentState;
|
|
710
779
|
}
|
|
@@ -715,7 +784,9 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
715
784
|
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Pause));
|
|
716
785
|
}
|
|
717
786
|
stop() {
|
|
718
|
-
if (!this._lottieInstance)
|
|
787
|
+
if (!this._lottieInstance) {
|
|
788
|
+
return;
|
|
789
|
+
}
|
|
719
790
|
if (this.currentState) {
|
|
720
791
|
this._playerState.prev = this.currentState;
|
|
721
792
|
}
|
|
@@ -727,7 +798,9 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
727
798
|
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Stop));
|
|
728
799
|
}
|
|
729
800
|
destroy() {
|
|
730
|
-
if (!this._lottieInstance)
|
|
801
|
+
if (!this._lottieInstance) {
|
|
802
|
+
return;
|
|
803
|
+
}
|
|
731
804
|
this.currentState = exports.PlayerState.Destroyed;
|
|
732
805
|
this._lottieInstance.destroy();
|
|
733
806
|
this._lottieInstance = null;
|
|
@@ -736,7 +809,9 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
736
809
|
document.removeEventListener('visibilitychange', this._onVisibilityChange);
|
|
737
810
|
}
|
|
738
811
|
seek(value) {
|
|
739
|
-
if (!this._lottieInstance)
|
|
812
|
+
if (!this._lottieInstance) {
|
|
813
|
+
return;
|
|
814
|
+
}
|
|
740
815
|
const matches = value.toString().match(/^([0-9]+)(%?)$/);
|
|
741
816
|
if (!matches) {
|
|
742
817
|
return;
|
|
@@ -752,7 +827,9 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
752
827
|
this._lottieInstance.pause();
|
|
753
828
|
}
|
|
754
829
|
snapshot() {
|
|
755
|
-
if (!this.shadowRoot)
|
|
830
|
+
if (!this.shadowRoot) {
|
|
831
|
+
return;
|
|
832
|
+
}
|
|
756
833
|
const svgElement = this.shadowRoot.querySelector('.animation svg'), data = svgElement instanceof Node ? new XMLSerializer().serializeToString(svgElement) : null;
|
|
757
834
|
if (!data) {
|
|
758
835
|
console.error('Could not serialize data');
|
|
@@ -765,16 +842,22 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
765
842
|
return data;
|
|
766
843
|
}
|
|
767
844
|
setSubframe(value) {
|
|
768
|
-
if (!this._lottieInstance)
|
|
845
|
+
if (!this._lottieInstance) {
|
|
846
|
+
return;
|
|
847
|
+
}
|
|
769
848
|
this.subframe = value;
|
|
770
849
|
this._lottieInstance.setSubframe(value);
|
|
771
850
|
}
|
|
772
851
|
setCount(value) {
|
|
773
|
-
if (!this._lottieInstance)
|
|
852
|
+
if (!this._lottieInstance) {
|
|
853
|
+
return;
|
|
854
|
+
}
|
|
774
855
|
this.count = value;
|
|
775
856
|
}
|
|
776
857
|
_freeze() {
|
|
777
|
-
if (!this._lottieInstance)
|
|
858
|
+
if (!this._lottieInstance) {
|
|
859
|
+
return;
|
|
860
|
+
}
|
|
778
861
|
if (this.currentState) {
|
|
779
862
|
this._playerState.prev = this.currentState;
|
|
780
863
|
}
|
|
@@ -785,19 +868,25 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
785
868
|
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Freeze));
|
|
786
869
|
}
|
|
787
870
|
async reload() {
|
|
788
|
-
if (!this._lottieInstance)
|
|
871
|
+
if (!this._lottieInstance) {
|
|
872
|
+
return;
|
|
873
|
+
}
|
|
789
874
|
this._lottieInstance.destroy();
|
|
790
875
|
if (this.src) {
|
|
791
876
|
await this.load(this.src);
|
|
792
877
|
}
|
|
793
878
|
}
|
|
794
879
|
setSpeed(value = 1) {
|
|
795
|
-
if (!this._lottieInstance)
|
|
880
|
+
if (!this._lottieInstance) {
|
|
881
|
+
return;
|
|
882
|
+
}
|
|
796
883
|
this.speed = value;
|
|
797
884
|
this._lottieInstance.setSpeed(value);
|
|
798
885
|
}
|
|
799
886
|
setDirection(value) {
|
|
800
|
-
if (!this._lottieInstance)
|
|
887
|
+
if (!this._lottieInstance) {
|
|
888
|
+
return;
|
|
889
|
+
}
|
|
801
890
|
this.direction = value;
|
|
802
891
|
this._lottieInstance.setDirection(value);
|
|
803
892
|
}
|
|
@@ -815,7 +904,9 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
815
904
|
this.multiAnimationSettings = settings;
|
|
816
905
|
}
|
|
817
906
|
togglePlay() {
|
|
818
|
-
if (!this._lottieInstance)
|
|
907
|
+
if (!this._lottieInstance) {
|
|
908
|
+
return;
|
|
909
|
+
}
|
|
819
910
|
const { currentFrame, playDirection, totalFrames } = this._lottieInstance;
|
|
820
911
|
if (this.currentState === exports.PlayerState.Playing) {
|
|
821
912
|
return this.pause();
|
|
@@ -867,9 +958,13 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
867
958
|
setTimeout(()=>this._toggleSettings(false), 200);
|
|
868
959
|
}
|
|
869
960
|
_switchInstance(isPrevious = false) {
|
|
870
|
-
if (!this._animations[this._currentAnimation])
|
|
961
|
+
if (!this._animations[this._currentAnimation]) {
|
|
962
|
+
return;
|
|
963
|
+
}
|
|
871
964
|
try {
|
|
872
|
-
if (this._lottieInstance)
|
|
965
|
+
if (this._lottieInstance) {
|
|
966
|
+
this._lottieInstance.destroy();
|
|
967
|
+
}
|
|
873
968
|
this._lottieInstance = Lottie.loadAnimation({
|
|
874
969
|
...this._getOptions(),
|
|
875
970
|
animationData: this._animations[this._currentAnimation]
|
|
@@ -946,7 +1041,9 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
946
1041
|
this._intersectionObserver.disconnect();
|
|
947
1042
|
this._intersectionObserver = undefined;
|
|
948
1043
|
}
|
|
949
|
-
if (this._lottieInstance)
|
|
1044
|
+
if (this._lottieInstance) {
|
|
1045
|
+
this._lottieInstance.destroy();
|
|
1046
|
+
}
|
|
950
1047
|
document.removeEventListener('visibilitychange', this._onVisibilityChange);
|
|
951
1048
|
}
|
|
952
1049
|
renderControls() {
|