@aarsteinmedia/dotlottie-player 2.3.1 → 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 +99 -62
- package/dist/custom-elements.json +37 -1
- package/dist/esm/index.js +99 -62
- 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,69 +408,90 @@ 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.
|
|
458
|
-
|
|
459
|
-
this.
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
this.
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
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
|
+
}));
|
|
472
482
|
}
|
|
473
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));
|
|
494
|
+
}
|
|
474
495
|
_mouseEnter() {
|
|
475
496
|
if (this.hover && this.currentState !== exports.PlayerState.Playing) {
|
|
476
497
|
this.play();
|
|
@@ -511,7 +532,11 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
511
532
|
}
|
|
512
533
|
async addAnimation(configs, fileName, shouldDownload = true) {
|
|
513
534
|
const { animations = [], manifest = {
|
|
514
|
-
animations: [
|
|
535
|
+
animations: [
|
|
536
|
+
{
|
|
537
|
+
id: this._identifier
|
|
538
|
+
}
|
|
539
|
+
]
|
|
515
540
|
} } = await getAnimationData(this.src);
|
|
516
541
|
try {
|
|
517
542
|
manifest.generator = pkg.name;
|
|
@@ -525,7 +550,9 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
525
550
|
}
|
|
526
551
|
manifest.animations = [
|
|
527
552
|
...manifest.animations,
|
|
528
|
-
|
|
553
|
+
{
|
|
554
|
+
id: config.id
|
|
555
|
+
}
|
|
529
556
|
];
|
|
530
557
|
animations?.push(...animationsToAdd);
|
|
531
558
|
}
|
|
@@ -583,6 +610,7 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
583
610
|
this._lottieInstance = null;
|
|
584
611
|
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Destroyed));
|
|
585
612
|
this.remove();
|
|
613
|
+
document.removeEventListener('visibilitychange', this._onVisibilityChange);
|
|
586
614
|
}
|
|
587
615
|
seek(value) {
|
|
588
616
|
if (!this._lottieInstance) return;
|
|
@@ -711,6 +739,7 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
711
739
|
}
|
|
712
740
|
_switchInstance(isPrevious = false) {
|
|
713
741
|
if (!this._animations[this._currentAnimation]) return;
|
|
742
|
+
this._removeEventListeners();
|
|
714
743
|
if (this._lottieInstance) this._lottieInstance.destroy();
|
|
715
744
|
this._lottieInstance = Lottie.loadAnimation({
|
|
716
745
|
...this._getOptions(),
|
|
@@ -724,10 +753,10 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
724
753
|
if (this.multiAnimationSettings?.[this._currentAnimation]?.autoplay ?? this.autoplay) {
|
|
725
754
|
this._lottieInstance?.goToAndPlay(0, true);
|
|
726
755
|
this.currentState = exports.PlayerState.Playing;
|
|
727
|
-
|
|
728
|
-
this._lottieInstance?.goToAndStop(0, true);
|
|
729
|
-
this.currentState = exports.PlayerState.Stopped;
|
|
756
|
+
return;
|
|
730
757
|
}
|
|
758
|
+
this._lottieInstance?.goToAndStop(0, true);
|
|
759
|
+
this.currentState = exports.PlayerState.Stopped;
|
|
731
760
|
}
|
|
732
761
|
next() {
|
|
733
762
|
this._currentAnimation++;
|
|
@@ -827,10 +856,18 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
827
856
|
target.focus();
|
|
828
857
|
}
|
|
829
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);
|
|
830
865
|
this._onVisibilityChange = this._onVisibilityChange.bind(this);
|
|
831
866
|
this._mouseEnter = this._mouseEnter.bind(this);
|
|
832
867
|
this._mouseLeave = this._mouseLeave.bind(this);
|
|
868
|
+
this._switchInstance = this._switchInstance.bind(this);
|
|
833
869
|
this.convert = this.convert.bind(this);
|
|
870
|
+
this.destroy = this.destroy.bind(this);
|
|
834
871
|
}
|
|
835
872
|
}
|
|
836
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,69 +406,90 @@ 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.
|
|
456
|
-
|
|
457
|
-
this.
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
this.
|
|
465
|
-
|
|
466
|
-
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
|
|
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
|
+
}));
|
|
470
480
|
}
|
|
471
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));
|
|
492
|
+
}
|
|
472
493
|
_mouseEnter() {
|
|
473
494
|
if (this.hover && this.currentState !== PlayerState.Playing) {
|
|
474
495
|
this.play();
|
|
@@ -509,7 +530,11 @@ class DotLottiePlayer extends LitElement {
|
|
|
509
530
|
}
|
|
510
531
|
async addAnimation(configs, fileName, shouldDownload = true) {
|
|
511
532
|
const { animations = [], manifest = {
|
|
512
|
-
animations: [
|
|
533
|
+
animations: [
|
|
534
|
+
{
|
|
535
|
+
id: this._identifier
|
|
536
|
+
}
|
|
537
|
+
]
|
|
513
538
|
} } = await getAnimationData(this.src);
|
|
514
539
|
try {
|
|
515
540
|
manifest.generator = pkg.name;
|
|
@@ -523,7 +548,9 @@ class DotLottiePlayer extends LitElement {
|
|
|
523
548
|
}
|
|
524
549
|
manifest.animations = [
|
|
525
550
|
...manifest.animations,
|
|
526
|
-
|
|
551
|
+
{
|
|
552
|
+
id: config.id
|
|
553
|
+
}
|
|
527
554
|
];
|
|
528
555
|
animations?.push(...animationsToAdd);
|
|
529
556
|
}
|
|
@@ -581,6 +608,7 @@ class DotLottiePlayer extends LitElement {
|
|
|
581
608
|
this._lottieInstance = null;
|
|
582
609
|
this.dispatchEvent(new CustomEvent(PlayerEvents.Destroyed));
|
|
583
610
|
this.remove();
|
|
611
|
+
document.removeEventListener('visibilitychange', this._onVisibilityChange);
|
|
584
612
|
}
|
|
585
613
|
seek(value) {
|
|
586
614
|
if (!this._lottieInstance) return;
|
|
@@ -709,6 +737,7 @@ class DotLottiePlayer extends LitElement {
|
|
|
709
737
|
}
|
|
710
738
|
_switchInstance(isPrevious = false) {
|
|
711
739
|
if (!this._animations[this._currentAnimation]) return;
|
|
740
|
+
this._removeEventListeners();
|
|
712
741
|
if (this._lottieInstance) this._lottieInstance.destroy();
|
|
713
742
|
this._lottieInstance = Lottie.loadAnimation({
|
|
714
743
|
...this._getOptions(),
|
|
@@ -722,10 +751,10 @@ class DotLottiePlayer extends LitElement {
|
|
|
722
751
|
if (this.multiAnimationSettings?.[this._currentAnimation]?.autoplay ?? this.autoplay) {
|
|
723
752
|
this._lottieInstance?.goToAndPlay(0, true);
|
|
724
753
|
this.currentState = PlayerState.Playing;
|
|
725
|
-
|
|
726
|
-
this._lottieInstance?.goToAndStop(0, true);
|
|
727
|
-
this.currentState = PlayerState.Stopped;
|
|
754
|
+
return;
|
|
728
755
|
}
|
|
756
|
+
this._lottieInstance?.goToAndStop(0, true);
|
|
757
|
+
this.currentState = PlayerState.Stopped;
|
|
729
758
|
}
|
|
730
759
|
next() {
|
|
731
760
|
this._currentAnimation++;
|
|
@@ -825,10 +854,18 @@ class DotLottiePlayer extends LitElement {
|
|
|
825
854
|
target.focus();
|
|
826
855
|
}
|
|
827
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);
|
|
828
863
|
this._onVisibilityChange = this._onVisibilityChange.bind(this);
|
|
829
864
|
this._mouseEnter = this._mouseEnter.bind(this);
|
|
830
865
|
this._mouseLeave = this._mouseLeave.bind(this);
|
|
866
|
+
this._switchInstance = this._switchInstance.bind(this);
|
|
831
867
|
this.convert = this.convert.bind(this);
|
|
868
|
+
this.destroy = this.destroy.bind(this);
|
|
832
869
|
}
|
|
833
870
|
}
|
|
834
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;
|