@aarsteinmedia/dotlottie-player 2.3.2 → 2.3.3
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 +88 -57
- package/dist/custom-elements.json +37 -1
- package/dist/esm/index.js +88 -57
- package/dist/index.d.ts +7 -0
- package/dist/index.js +2 -2
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -310,7 +310,7 @@ const addExt = (ext, str)=>{
|
|
|
310
310
|
return `${prefix ?? `:${s4()}`}-${s4()}`;
|
|
311
311
|
};
|
|
312
312
|
|
|
313
|
-
var name="@aarsteinmedia/dotlottie-player";var version="2.3.
|
|
313
|
+
var name="@aarsteinmedia/dotlottie-player";var version="2.3.3";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};
|
|
314
314
|
|
|
315
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}}`;
|
|
316
316
|
|
|
@@ -408,68 +408,89 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
408
408
|
}
|
|
409
409
|
_addEventListeners() {
|
|
410
410
|
if (!this._lottieInstance) return;
|
|
411
|
-
this._lottieInstance.addEventListener('enterFrame',
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
this._lottieInstance.
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
431
|
-
|
|
411
|
+
this._lottieInstance.addEventListener('enterFrame', this._enterFrame);
|
|
412
|
+
this._lottieInstance.addEventListener('complete', this._complete);
|
|
413
|
+
this._lottieInstance.addEventListener('loopComplete', this._loopComplete);
|
|
414
|
+
this._lottieInstance.addEventListener('DOMLoaded', this._DOMLoaded);
|
|
415
|
+
this._lottieInstance.addEventListener('data_ready', this._dataReady);
|
|
416
|
+
this._lottieInstance.addEventListener('data_failed', this._dataFailed);
|
|
417
|
+
if (this.container && this.hover) {
|
|
418
|
+
this.container.addEventListener('mouseenter', this._mouseEnter);
|
|
419
|
+
this.container.addEventListener('mouseleave', this._mouseLeave);
|
|
420
|
+
}
|
|
421
|
+
}
|
|
422
|
+
_removeEventListeners() {
|
|
423
|
+
if (!this._lottieInstance || !this.container) return;
|
|
424
|
+
this._lottieInstance.removeEventListener('enterFrame', this._enterFrame);
|
|
425
|
+
this._lottieInstance.removeEventListener('complete', this._complete);
|
|
426
|
+
this._lottieInstance.removeEventListener('loopComplete', this._loopComplete);
|
|
427
|
+
this._lottieInstance.removeEventListener('DOMLoaded', this._DOMLoaded);
|
|
428
|
+
this._lottieInstance.removeEventListener('data_ready', this._dataReady);
|
|
429
|
+
this._lottieInstance.removeEventListener('data_failed', this._dataFailed);
|
|
430
|
+
this.container.removeEventListener('mouseenter', this._mouseEnter);
|
|
431
|
+
this.container.removeEventListener('mouseleave', this._mouseLeave);
|
|
432
|
+
}
|
|
433
|
+
_loopComplete() {
|
|
434
|
+
if (!this._lottieInstance) {
|
|
435
|
+
return;
|
|
436
|
+
}
|
|
437
|
+
const { firstFrame, totalFrames, playDirection } = this._lottieInstance;
|
|
438
|
+
if (this.count) {
|
|
439
|
+
this._isBounce ? this._playerState.count += 1 : this._playerState.count += 0.5;
|
|
440
|
+
if (this._playerState.count >= this.count) {
|
|
441
|
+
this.setLooping(false);
|
|
442
|
+
this.currentState = exports.PlayerState.Completed;
|
|
443
|
+
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Complete));
|
|
432
444
|
return;
|
|
433
445
|
}
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
this.currentState = exports.PlayerState.Completed;
|
|
440
|
-
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Complete));
|
|
441
|
-
return;
|
|
442
|
-
}
|
|
443
|
-
}
|
|
444
|
-
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Loop));
|
|
445
|
-
if (this._isBounce) {
|
|
446
|
-
this._lottieInstance?.goToAndStop(playDirection === -1 ? firstFrame : totalFrames * 0.99, true);
|
|
447
|
-
this._lottieInstance?.setDirection(playDirection * -1);
|
|
448
|
-
return setTimeout(()=>{
|
|
449
|
-
this._lottieInstance?.play();
|
|
450
|
-
}, this.intermission);
|
|
451
|
-
}
|
|
452
|
-
this._lottieInstance?.goToAndStop(playDirection === -1 ? totalFrames * 0.99 : firstFrame, true);
|
|
446
|
+
}
|
|
447
|
+
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Loop));
|
|
448
|
+
if (this._isBounce) {
|
|
449
|
+
this._lottieInstance?.goToAndStop(playDirection === -1 ? firstFrame : totalFrames * 0.99, true);
|
|
450
|
+
this._lottieInstance?.setDirection(playDirection * -1);
|
|
453
451
|
return setTimeout(()=>{
|
|
454
452
|
this._lottieInstance?.play();
|
|
455
453
|
}, this.intermission);
|
|
456
|
-
};
|
|
457
|
-
this._lottieInstance.addEventListener('loopComplete', loopComplete);
|
|
458
|
-
this._lottieInstance.addEventListener('DOMLoaded', ()=>{
|
|
459
|
-
this._playerState.loaded = true;
|
|
460
|
-
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Ready));
|
|
461
|
-
});
|
|
462
|
-
this._lottieInstance.addEventListener('data_ready', ()=>{
|
|
463
|
-
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Load));
|
|
464
|
-
});
|
|
465
|
-
this._lottieInstance.addEventListener('data_failed', ()=>{
|
|
466
|
-
this.currentState = exports.PlayerState.Error;
|
|
467
|
-
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Error));
|
|
468
|
-
});
|
|
469
|
-
if (this.container && this.hover) {
|
|
470
|
-
this.container.addEventListener('mouseenter', this._mouseEnter);
|
|
471
|
-
this.container.addEventListener('mouseleave', this._mouseLeave);
|
|
472
454
|
}
|
|
455
|
+
this._lottieInstance?.goToAndStop(playDirection === -1 ? totalFrames * 0.99 : firstFrame, true);
|
|
456
|
+
return setTimeout(()=>{
|
|
457
|
+
this._lottieInstance?.play();
|
|
458
|
+
}, this.intermission);
|
|
459
|
+
}
|
|
460
|
+
_enterFrame() {
|
|
461
|
+
if (this._lottieInstance) {
|
|
462
|
+
const { currentFrame, totalFrames } = this._lottieInstance;
|
|
463
|
+
this._seeker = Math.floor(currentFrame / totalFrames * 100);
|
|
464
|
+
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Frame, {
|
|
465
|
+
detail: {
|
|
466
|
+
frame: currentFrame,
|
|
467
|
+
seeker: this._seeker
|
|
468
|
+
}
|
|
469
|
+
}));
|
|
470
|
+
}
|
|
471
|
+
}
|
|
472
|
+
_complete() {
|
|
473
|
+
if (this._lottieInstance) {
|
|
474
|
+
const { currentFrame, totalFrames } = this._lottieInstance;
|
|
475
|
+
this._seeker = Math.floor(currentFrame / totalFrames * 100);
|
|
476
|
+
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Frame, {
|
|
477
|
+
detail: {
|
|
478
|
+
frame: currentFrame,
|
|
479
|
+
seeker: this._seeker
|
|
480
|
+
}
|
|
481
|
+
}));
|
|
482
|
+
}
|
|
483
|
+
}
|
|
484
|
+
_DOMLoaded() {
|
|
485
|
+
this._playerState.loaded = true;
|
|
486
|
+
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Ready));
|
|
487
|
+
}
|
|
488
|
+
_dataReady() {
|
|
489
|
+
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Load));
|
|
490
|
+
}
|
|
491
|
+
_dataFailed() {
|
|
492
|
+
this.currentState = exports.PlayerState.Error;
|
|
493
|
+
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Error));
|
|
473
494
|
}
|
|
474
495
|
_mouseEnter() {
|
|
475
496
|
if (this.hover && this.currentState !== exports.PlayerState.Playing) {
|
|
@@ -589,6 +610,7 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
589
610
|
this._lottieInstance = null;
|
|
590
611
|
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Destroyed));
|
|
591
612
|
this.remove();
|
|
613
|
+
document.removeEventListener('visibilitychange', this._onVisibilityChange);
|
|
592
614
|
}
|
|
593
615
|
seek(value) {
|
|
594
616
|
if (!this._lottieInstance) return;
|
|
@@ -717,6 +739,7 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
717
739
|
}
|
|
718
740
|
_switchInstance(isPrevious = false) {
|
|
719
741
|
if (!this._animations[this._currentAnimation]) return;
|
|
742
|
+
this._removeEventListeners();
|
|
720
743
|
if (this._lottieInstance) this._lottieInstance.destroy();
|
|
721
744
|
this._lottieInstance = Lottie.loadAnimation({
|
|
722
745
|
...this._getOptions(),
|
|
@@ -833,10 +856,18 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
833
856
|
target.focus();
|
|
834
857
|
}
|
|
835
858
|
};
|
|
859
|
+
this._complete = this._complete.bind(this);
|
|
860
|
+
this._dataReady = this._dataReady.bind(this);
|
|
861
|
+
this._dataFailed = this._dataFailed.bind(this);
|
|
862
|
+
this._DOMLoaded = this._DOMLoaded.bind(this);
|
|
863
|
+
this._enterFrame = this._enterFrame.bind(this);
|
|
864
|
+
this._handleSeekChange = this._handleSeekChange.bind(this);
|
|
836
865
|
this._onVisibilityChange = this._onVisibilityChange.bind(this);
|
|
837
866
|
this._mouseEnter = this._mouseEnter.bind(this);
|
|
838
867
|
this._mouseLeave = this._mouseLeave.bind(this);
|
|
868
|
+
this._switchInstance = this._switchInstance.bind(this);
|
|
839
869
|
this.convert = this.convert.bind(this);
|
|
870
|
+
this.destroy = this.destroy.bind(this);
|
|
840
871
|
}
|
|
841
872
|
}
|
|
842
873
|
_ts_decorate([
|
|
@@ -396,6 +396,42 @@
|
|
|
396
396
|
"privacy": "private",
|
|
397
397
|
"description": "Add event listeners"
|
|
398
398
|
},
|
|
399
|
+
{
|
|
400
|
+
"kind": "method",
|
|
401
|
+
"name": "_removeEventListeners",
|
|
402
|
+
"privacy": "private",
|
|
403
|
+
"description": "Remove event listeners"
|
|
404
|
+
},
|
|
405
|
+
{
|
|
406
|
+
"kind": "method",
|
|
407
|
+
"name": "_loopComplete",
|
|
408
|
+
"privacy": "private"
|
|
409
|
+
},
|
|
410
|
+
{
|
|
411
|
+
"kind": "method",
|
|
412
|
+
"name": "_enterFrame",
|
|
413
|
+
"privacy": "private"
|
|
414
|
+
},
|
|
415
|
+
{
|
|
416
|
+
"kind": "method",
|
|
417
|
+
"name": "_complete",
|
|
418
|
+
"privacy": "private"
|
|
419
|
+
},
|
|
420
|
+
{
|
|
421
|
+
"kind": "method",
|
|
422
|
+
"name": "_DOMLoaded",
|
|
423
|
+
"privacy": "private"
|
|
424
|
+
},
|
|
425
|
+
{
|
|
426
|
+
"kind": "method",
|
|
427
|
+
"name": "_dataReady",
|
|
428
|
+
"privacy": "private"
|
|
429
|
+
},
|
|
430
|
+
{
|
|
431
|
+
"kind": "method",
|
|
432
|
+
"name": "_dataFailed",
|
|
433
|
+
"privacy": "private"
|
|
434
|
+
},
|
|
399
435
|
{
|
|
400
436
|
"kind": "method",
|
|
401
437
|
"name": "_mouseEnter",
|
|
@@ -455,7 +491,7 @@
|
|
|
455
491
|
{
|
|
456
492
|
"name": "configs",
|
|
457
493
|
"type": {
|
|
458
|
-
"text": "[AnimationConfig]"
|
|
494
|
+
"text": "[ AnimationConfig ]"
|
|
459
495
|
}
|
|
460
496
|
},
|
|
461
497
|
{
|
package/dist/esm/index.js
CHANGED
|
@@ -308,7 +308,7 @@ const addExt = (ext, str)=>{
|
|
|
308
308
|
return `${prefix ?? `:${s4()}`}-${s4()}`;
|
|
309
309
|
};
|
|
310
310
|
|
|
311
|
-
var name="@aarsteinmedia/dotlottie-player";var version="2.3.
|
|
311
|
+
var name="@aarsteinmedia/dotlottie-player";var version="2.3.3";var description="Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";var exports={".":{"import":"./dist/esm/index.js",node:"./dist/esm/index.js",require:"./dist/cjs/index.js",types:"./dist/index.d.ts"}};var main="./dist/esm/index.js";var unpkg="./dist/index.js";var module="./dist/esm/index.js";var types="./dist/index.d.ts";var type="module";var homepage="https://www.aarstein.media/en/dotlottie-player";var repository={url:"https://github.com/aarsteinmedia/dotlottie-player.git",type:"git"};var bugs="https://github.com/aarsteinmedia/dotlottie-player/issues";var author={name:"Johan Martin Aarstein",email:"johan@aarstein.media",url:"https://www.aarstein.media",organization:"Aarstein Media"};var license="GPL-2.0-or-later";var scripts={build:"rimraf ./dist && rollup -c","build:types":"rimraf ./types && tsc","build:cem":"npx cem analyze --config 'cem.config.mjs'",prod:"pnpm build:types && pnpm build && pnpm build:cem",dev:"rollup -c -w --environment NODE_ENV:development",lint:"tsc && eslint . --ext .ts","lint:fix":"eslint . --ext .ts --fix"};var dependencies={fflate:"^0.8.1",lit:"^2.8.0","lottie-web":"^5.12.2"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.6.9","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-replace":"^5.0.5","@swc/core":"^1.3.102","@types/node":"^20.10.7","@typescript-eslint/eslint-plugin":"^5.62.0","@typescript-eslint/parser":"^5.62.0",autoprefixer:"^10.4.16","esbuild-sass-plugin":"^2.16.1",eslint:"^8.56.0","eslint-plugin-lit":"^1.11.0","postcss-flexbugs-fixes":"^5.0.2",rimraf:"^5.0.5",rollup:"^3.29.4","rollup-plugin-dts":"^6.1.0","rollup-plugin-html-literals":"^1.1.8","rollup-plugin-livereload":"^2.0.5","rollup-plugin-postcss":"^4.0.2","rollup-plugin-postcss-lit":"^2.1.0","rollup-plugin-serve":"^1.1.1","rollup-plugin-summary":"^2.0.0","rollup-plugin-swc3":"^0.9.1",sass:"^1.69.7","ts-lit-plugin":"^1.2.1",typescript:"^5.3.3"};var customElements="dist/custom-elements.json";var files=["dist","README.md"];var keywords=["lottie","dotlottie","animation","web component","component","lit-element","svg","vector","player"];var publishConfig={access:"public"};var engines={node:">= 8.17.0"};var funding={type:"paypal",url:"https://www.paypal.com/donate/?hosted_button_id=E7C7DMN8KSQ6A"};var pkg = {name:name,version:version,description:description,exports:exports,main:main,unpkg:unpkg,module:module,types:types,type:type,homepage:homepage,repository:repository,bugs:bugs,author:author,license:license,scripts:scripts,dependencies:dependencies,peerDependencies:peerDependencies,devDependencies:devDependencies,customElements:customElements,files:files,keywords:keywords,publishConfig:publishConfig,engines:engines,funding:funding};
|
|
312
312
|
|
|
313
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}}`;
|
|
314
314
|
|
|
@@ -406,68 +406,89 @@ class DotLottiePlayer extends LitElement {
|
|
|
406
406
|
}
|
|
407
407
|
_addEventListeners() {
|
|
408
408
|
if (!this._lottieInstance) return;
|
|
409
|
-
this._lottieInstance.addEventListener('enterFrame',
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
this._lottieInstance.
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
409
|
+
this._lottieInstance.addEventListener('enterFrame', this._enterFrame);
|
|
410
|
+
this._lottieInstance.addEventListener('complete', this._complete);
|
|
411
|
+
this._lottieInstance.addEventListener('loopComplete', this._loopComplete);
|
|
412
|
+
this._lottieInstance.addEventListener('DOMLoaded', this._DOMLoaded);
|
|
413
|
+
this._lottieInstance.addEventListener('data_ready', this._dataReady);
|
|
414
|
+
this._lottieInstance.addEventListener('data_failed', this._dataFailed);
|
|
415
|
+
if (this.container && this.hover) {
|
|
416
|
+
this.container.addEventListener('mouseenter', this._mouseEnter);
|
|
417
|
+
this.container.addEventListener('mouseleave', this._mouseLeave);
|
|
418
|
+
}
|
|
419
|
+
}
|
|
420
|
+
_removeEventListeners() {
|
|
421
|
+
if (!this._lottieInstance || !this.container) return;
|
|
422
|
+
this._lottieInstance.removeEventListener('enterFrame', this._enterFrame);
|
|
423
|
+
this._lottieInstance.removeEventListener('complete', this._complete);
|
|
424
|
+
this._lottieInstance.removeEventListener('loopComplete', this._loopComplete);
|
|
425
|
+
this._lottieInstance.removeEventListener('DOMLoaded', this._DOMLoaded);
|
|
426
|
+
this._lottieInstance.removeEventListener('data_ready', this._dataReady);
|
|
427
|
+
this._lottieInstance.removeEventListener('data_failed', this._dataFailed);
|
|
428
|
+
this.container.removeEventListener('mouseenter', this._mouseEnter);
|
|
429
|
+
this.container.removeEventListener('mouseleave', this._mouseLeave);
|
|
430
|
+
}
|
|
431
|
+
_loopComplete() {
|
|
432
|
+
if (!this._lottieInstance) {
|
|
433
|
+
return;
|
|
434
|
+
}
|
|
435
|
+
const { firstFrame, totalFrames, playDirection } = this._lottieInstance;
|
|
436
|
+
if (this.count) {
|
|
437
|
+
this._isBounce ? this._playerState.count += 1 : this._playerState.count += 0.5;
|
|
438
|
+
if (this._playerState.count >= this.count) {
|
|
439
|
+
this.setLooping(false);
|
|
440
|
+
this.currentState = PlayerState.Completed;
|
|
441
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Complete));
|
|
430
442
|
return;
|
|
431
443
|
}
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
this.currentState = PlayerState.Completed;
|
|
438
|
-
this.dispatchEvent(new CustomEvent(PlayerEvents.Complete));
|
|
439
|
-
return;
|
|
440
|
-
}
|
|
441
|
-
}
|
|
442
|
-
this.dispatchEvent(new CustomEvent(PlayerEvents.Loop));
|
|
443
|
-
if (this._isBounce) {
|
|
444
|
-
this._lottieInstance?.goToAndStop(playDirection === -1 ? firstFrame : totalFrames * 0.99, true);
|
|
445
|
-
this._lottieInstance?.setDirection(playDirection * -1);
|
|
446
|
-
return setTimeout(()=>{
|
|
447
|
-
this._lottieInstance?.play();
|
|
448
|
-
}, this.intermission);
|
|
449
|
-
}
|
|
450
|
-
this._lottieInstance?.goToAndStop(playDirection === -1 ? totalFrames * 0.99 : firstFrame, true);
|
|
444
|
+
}
|
|
445
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Loop));
|
|
446
|
+
if (this._isBounce) {
|
|
447
|
+
this._lottieInstance?.goToAndStop(playDirection === -1 ? firstFrame : totalFrames * 0.99, true);
|
|
448
|
+
this._lottieInstance?.setDirection(playDirection * -1);
|
|
451
449
|
return setTimeout(()=>{
|
|
452
450
|
this._lottieInstance?.play();
|
|
453
451
|
}, this.intermission);
|
|
454
|
-
};
|
|
455
|
-
this._lottieInstance.addEventListener('loopComplete', loopComplete);
|
|
456
|
-
this._lottieInstance.addEventListener('DOMLoaded', ()=>{
|
|
457
|
-
this._playerState.loaded = true;
|
|
458
|
-
this.dispatchEvent(new CustomEvent(PlayerEvents.Ready));
|
|
459
|
-
});
|
|
460
|
-
this._lottieInstance.addEventListener('data_ready', ()=>{
|
|
461
|
-
this.dispatchEvent(new CustomEvent(PlayerEvents.Load));
|
|
462
|
-
});
|
|
463
|
-
this._lottieInstance.addEventListener('data_failed', ()=>{
|
|
464
|
-
this.currentState = PlayerState.Error;
|
|
465
|
-
this.dispatchEvent(new CustomEvent(PlayerEvents.Error));
|
|
466
|
-
});
|
|
467
|
-
if (this.container && this.hover) {
|
|
468
|
-
this.container.addEventListener('mouseenter', this._mouseEnter);
|
|
469
|
-
this.container.addEventListener('mouseleave', this._mouseLeave);
|
|
470
452
|
}
|
|
453
|
+
this._lottieInstance?.goToAndStop(playDirection === -1 ? totalFrames * 0.99 : firstFrame, true);
|
|
454
|
+
return setTimeout(()=>{
|
|
455
|
+
this._lottieInstance?.play();
|
|
456
|
+
}, this.intermission);
|
|
457
|
+
}
|
|
458
|
+
_enterFrame() {
|
|
459
|
+
if (this._lottieInstance) {
|
|
460
|
+
const { currentFrame, totalFrames } = this._lottieInstance;
|
|
461
|
+
this._seeker = Math.floor(currentFrame / totalFrames * 100);
|
|
462
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Frame, {
|
|
463
|
+
detail: {
|
|
464
|
+
frame: currentFrame,
|
|
465
|
+
seeker: this._seeker
|
|
466
|
+
}
|
|
467
|
+
}));
|
|
468
|
+
}
|
|
469
|
+
}
|
|
470
|
+
_complete() {
|
|
471
|
+
if (this._lottieInstance) {
|
|
472
|
+
const { currentFrame, totalFrames } = this._lottieInstance;
|
|
473
|
+
this._seeker = Math.floor(currentFrame / totalFrames * 100);
|
|
474
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Frame, {
|
|
475
|
+
detail: {
|
|
476
|
+
frame: currentFrame,
|
|
477
|
+
seeker: this._seeker
|
|
478
|
+
}
|
|
479
|
+
}));
|
|
480
|
+
}
|
|
481
|
+
}
|
|
482
|
+
_DOMLoaded() {
|
|
483
|
+
this._playerState.loaded = true;
|
|
484
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Ready));
|
|
485
|
+
}
|
|
486
|
+
_dataReady() {
|
|
487
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Load));
|
|
488
|
+
}
|
|
489
|
+
_dataFailed() {
|
|
490
|
+
this.currentState = PlayerState.Error;
|
|
491
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Error));
|
|
471
492
|
}
|
|
472
493
|
_mouseEnter() {
|
|
473
494
|
if (this.hover && this.currentState !== PlayerState.Playing) {
|
|
@@ -587,6 +608,7 @@ class DotLottiePlayer extends LitElement {
|
|
|
587
608
|
this._lottieInstance = null;
|
|
588
609
|
this.dispatchEvent(new CustomEvent(PlayerEvents.Destroyed));
|
|
589
610
|
this.remove();
|
|
611
|
+
document.removeEventListener('visibilitychange', this._onVisibilityChange);
|
|
590
612
|
}
|
|
591
613
|
seek(value) {
|
|
592
614
|
if (!this._lottieInstance) return;
|
|
@@ -715,6 +737,7 @@ class DotLottiePlayer extends LitElement {
|
|
|
715
737
|
}
|
|
716
738
|
_switchInstance(isPrevious = false) {
|
|
717
739
|
if (!this._animations[this._currentAnimation]) return;
|
|
740
|
+
this._removeEventListeners();
|
|
718
741
|
if (this._lottieInstance) this._lottieInstance.destroy();
|
|
719
742
|
this._lottieInstance = Lottie.loadAnimation({
|
|
720
743
|
...this._getOptions(),
|
|
@@ -831,10 +854,18 @@ class DotLottiePlayer extends LitElement {
|
|
|
831
854
|
target.focus();
|
|
832
855
|
}
|
|
833
856
|
};
|
|
857
|
+
this._complete = this._complete.bind(this);
|
|
858
|
+
this._dataReady = this._dataReady.bind(this);
|
|
859
|
+
this._dataFailed = this._dataFailed.bind(this);
|
|
860
|
+
this._DOMLoaded = this._DOMLoaded.bind(this);
|
|
861
|
+
this._enterFrame = this._enterFrame.bind(this);
|
|
862
|
+
this._handleSeekChange = this._handleSeekChange.bind(this);
|
|
834
863
|
this._onVisibilityChange = this._onVisibilityChange.bind(this);
|
|
835
864
|
this._mouseEnter = this._mouseEnter.bind(this);
|
|
836
865
|
this._mouseLeave = this._mouseLeave.bind(this);
|
|
866
|
+
this._switchInstance = this._switchInstance.bind(this);
|
|
837
867
|
this.convert = this.convert.bind(this);
|
|
868
|
+
this.destroy = this.destroy.bind(this);
|
|
838
869
|
}
|
|
839
870
|
}
|
|
840
871
|
_ts_decorate([
|
package/dist/index.d.ts
CHANGED
|
@@ -176,6 +176,13 @@ declare class DotLottiePlayer extends LitElement {
|
|
|
176
176
|
load(src: string | LottieJSON): Promise<void>;
|
|
177
177
|
getManifest(): LottieManifest;
|
|
178
178
|
private _addEventListeners;
|
|
179
|
+
private _removeEventListeners;
|
|
180
|
+
private _loopComplete;
|
|
181
|
+
private _enterFrame;
|
|
182
|
+
private _complete;
|
|
183
|
+
private _DOMLoaded;
|
|
184
|
+
private _dataReady;
|
|
185
|
+
private _dataFailed;
|
|
179
186
|
private _mouseEnter;
|
|
180
187
|
private _mouseLeave;
|
|
181
188
|
private _onVisibilityChange;
|