@aarsteinmedia/dotlottie-player 2.3.2 → 2.3.4
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 +127 -85
- package/dist/custom-elements.json +37 -1
- package/dist/esm/index.js +127 -85
- 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.4";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,91 @@ 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
|
+
return;
|
|
463
|
+
}
|
|
464
|
+
const { currentFrame, totalFrames } = this._lottieInstance;
|
|
465
|
+
this._seeker = Math.floor(currentFrame / totalFrames * 100);
|
|
466
|
+
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Frame, {
|
|
467
|
+
detail: {
|
|
468
|
+
frame: currentFrame,
|
|
469
|
+
seeker: this._seeker
|
|
470
|
+
}
|
|
471
|
+
}));
|
|
472
|
+
}
|
|
473
|
+
_complete() {
|
|
474
|
+
if (!this._lottieInstance) {
|
|
475
|
+
return;
|
|
476
|
+
}
|
|
477
|
+
const { currentFrame, totalFrames } = this._lottieInstance;
|
|
478
|
+
this._seeker = Math.floor(currentFrame / totalFrames * 100);
|
|
479
|
+
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Frame, {
|
|
480
|
+
detail: {
|
|
481
|
+
frame: currentFrame,
|
|
482
|
+
seeker: this._seeker
|
|
483
|
+
}
|
|
484
|
+
}));
|
|
485
|
+
}
|
|
486
|
+
_DOMLoaded() {
|
|
487
|
+
this._playerState.loaded = true;
|
|
488
|
+
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Ready));
|
|
489
|
+
}
|
|
490
|
+
_dataReady() {
|
|
491
|
+
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Load));
|
|
492
|
+
}
|
|
493
|
+
_dataFailed() {
|
|
494
|
+
this.currentState = exports.PlayerState.Error;
|
|
495
|
+
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Error));
|
|
473
496
|
}
|
|
474
497
|
_mouseEnter() {
|
|
475
498
|
if (this.hover && this.currentState !== exports.PlayerState.Playing) {
|
|
@@ -589,6 +612,7 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
589
612
|
this._lottieInstance = null;
|
|
590
613
|
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Destroyed));
|
|
591
614
|
this.remove();
|
|
615
|
+
document.removeEventListener('visibilitychange', this._onVisibilityChange);
|
|
592
616
|
}
|
|
593
617
|
seek(value) {
|
|
594
618
|
if (!this._lottieInstance) return;
|
|
@@ -653,15 +677,17 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
653
677
|
this._lottieInstance.setDirection(value);
|
|
654
678
|
}
|
|
655
679
|
setLooping(value) {
|
|
656
|
-
if (this._lottieInstance) {
|
|
657
|
-
|
|
658
|
-
this._lottieInstance.setLoop(value);
|
|
680
|
+
if (!this._lottieInstance) {
|
|
681
|
+
return;
|
|
659
682
|
}
|
|
683
|
+
this.loop = value;
|
|
684
|
+
this._lottieInstance.setLoop(value);
|
|
660
685
|
}
|
|
661
686
|
setMultiAnimationSettings(settings) {
|
|
662
|
-
if (this._lottieInstance) {
|
|
663
|
-
|
|
687
|
+
if (!this._lottieInstance) {
|
|
688
|
+
return;
|
|
664
689
|
}
|
|
690
|
+
this.multiAnimationSettings = settings;
|
|
665
691
|
}
|
|
666
692
|
togglePlay() {
|
|
667
693
|
if (!this._lottieInstance) return;
|
|
@@ -717,23 +743,30 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
717
743
|
}
|
|
718
744
|
_switchInstance(isPrevious = false) {
|
|
719
745
|
if (!this._animations[this._currentAnimation]) return;
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
this.
|
|
732
|
-
this.
|
|
733
|
-
|
|
746
|
+
try {
|
|
747
|
+
if (this._lottieInstance) this._lottieInstance.destroy();
|
|
748
|
+
this._lottieInstance = Lottie.loadAnimation({
|
|
749
|
+
...this._getOptions(),
|
|
750
|
+
animationData: this._animations[this._currentAnimation]
|
|
751
|
+
});
|
|
752
|
+
if (this.multiAnimationSettings?.[this._currentAnimation]?.mode) {
|
|
753
|
+
this._isBounce = this.multiAnimationSettings[this._currentAnimation].mode === exports.PlayMode.Bounce;
|
|
754
|
+
}
|
|
755
|
+
this._removeEventListeners();
|
|
756
|
+
this._addEventListeners();
|
|
757
|
+
this.dispatchEvent(new CustomEvent(isPrevious ? exports.PlayerEvents.Previous : exports.PlayerEvents.Next));
|
|
758
|
+
if (this.multiAnimationSettings?.[this._currentAnimation]?.autoplay ?? this.autoplay) {
|
|
759
|
+
this._lottieInstance?.goToAndPlay(0, true);
|
|
760
|
+
this.currentState = exports.PlayerState.Playing;
|
|
761
|
+
return;
|
|
762
|
+
}
|
|
763
|
+
this._lottieInstance?.goToAndStop(0, true);
|
|
764
|
+
this.currentState = exports.PlayerState.Stopped;
|
|
765
|
+
} catch (err) {
|
|
766
|
+
this._errorMessage = handleErrors(err).message;
|
|
767
|
+
this.currentState = exports.PlayerState.Error;
|
|
768
|
+
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Error));
|
|
734
769
|
}
|
|
735
|
-
this._lottieInstance?.goToAndStop(0, true);
|
|
736
|
-
this.currentState = exports.PlayerState.Stopped;
|
|
737
770
|
}
|
|
738
771
|
next() {
|
|
739
772
|
this._currentAnimation++;
|
|
@@ -745,13 +778,12 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
745
778
|
}
|
|
746
779
|
async convert({ typeCheck, manifest, animations, fileName, shouldDownload = true }) {
|
|
747
780
|
if (typeCheck || this._isDotLottie) return;
|
|
748
|
-
const oldManifest = manifest || this._manifest, newManifest = {
|
|
749
|
-
...oldManifest,
|
|
750
|
-
generator: pkg.name
|
|
751
|
-
};
|
|
752
781
|
return createDotLottie({
|
|
753
782
|
animations: animations || (await getAnimationData(this.src)).animations,
|
|
754
|
-
manifest:
|
|
783
|
+
manifest: {
|
|
784
|
+
...manifest || this._manifest,
|
|
785
|
+
generator: pkg.name
|
|
786
|
+
},
|
|
755
787
|
fileName: `${getFilename(fileName || this.src)}.lottie`,
|
|
756
788
|
shouldDownload
|
|
757
789
|
});
|
|
@@ -790,6 +822,7 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
790
822
|
this._intersectionObserver = undefined;
|
|
791
823
|
}
|
|
792
824
|
if (this._lottieInstance) this._lottieInstance.destroy();
|
|
825
|
+
this._removeEventListeners();
|
|
793
826
|
document.removeEventListener('visibilitychange', this._onVisibilityChange);
|
|
794
827
|
}
|
|
795
828
|
renderControls() {
|
|
@@ -797,7 +830,7 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
797
830
|
return lit.html`<div class="${`lottie-controls toolbar ${isError ? 'has-error' : ''}`}" aria-label="Lottie Animation controls"><button @click="${this.togglePlay}" data-active="${isPlaying || isPaused}" tabindex="0" aria-label="Toggle Play/Pause">${isPlaying ? lit.html`<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M14.016 5.016H18v13.969h-3.984V5.016zM6 18.984V5.015h3.984v13.969H6z"/></svg>` : lit.html`<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M8.016 5.016L18.985 12 8.016 18.984V5.015z"/></svg>`}</button> <button @click="${this.stop}" data-active="${isStopped}" tabindex="0" aria-label="Stop"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M6 6h12v12H6V6z"/></svg></button> ${this._animations?.length > 1 ? lit.html`${this._currentAnimation > 0 ? lit.html`<button @click="${this.prev}" tabindex="0" aria-label="Previous animation"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M17.9 18.2 8.1 12l9.8-6.2v12.4zm-10.3 0H6.1V5.8h1.5v12.4z"/></svg></button>` : lit.nothing} ${this._currentAnimation + 1 < this._animations?.length ? lit.html`<button @click="${this.next}" tabindex="0" aria-label="Next animation"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="m6.1 5.8 9.8 6.2-9.8 6.2V5.8zM16.4 5.8h1.5v12.4h-1.5z"/></svg></button>` : lit.nothing}` : lit.nothing}<form class="progress-container${this.simple ? ' simple' : ''}"><input class="seeker" type="range" min="0" max="100" step="1" value="${this._seeker}" @change="${this._handleSeekChange}" @mousedown="${this._freeze}" aria-valuemin="0" aria-valuemax="100" role="slider" aria-valuenow="${this._seeker}" tabindex="0" aria-label="Slider for search"><progress max="100" value="${this._seeker}"></progress></form>${this.simple ? lit.nothing : lit.html`<button @click="${this.toggleLooping}" data-active="${this.loop ?? lit.nothing}" tabindex="0" aria-label="Toggle looping"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z"/></svg></button> <button @click="${this.toggleBoomerang}" data-active="${this._isBounce}" aria-label="Toggle boomerang" tabindex="0"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="m11.8 13.2-.3.3c-.5.5-1.1 1.1-1.7 1.5-.5.4-1 .6-1.5.8-.5.2-1.1.3-1.6.3s-1-.1-1.5-.3c-.6-.2-1-.5-1.4-1-.5-.6-.8-1.2-.9-1.9-.2-.9-.1-1.8.3-2.6.3-.7.8-1.2 1.3-1.6.3-.2.6-.4 1-.5.2-.2.5-.2.8-.3.3 0 .7-.1 1 0 .3 0 .6.1.9.2.9.3 1.7.9 2.4 1.5.4.4.8.7 1.1 1.1l.1.1.4-.4c.6-.6 1.2-1.2 1.9-1.6.5-.3 1-.6 1.5-.7.4-.1.7-.2 1-.2h.9c1 .1 1.9.5 2.6 1.4.4.5.7 1.1.8 1.8.2.9.1 1.7-.2 2.5-.4.9-1 1.5-1.8 2-.4.2-.7.4-1.1.4-.4.1-.8.1-1.2.1-.5 0-.9-.1-1.3-.3-.8-.3-1.5-.9-2.1-1.5-.4-.4-.8-.7-1.1-1.1h-.3zm-1.1-1.1c-.1-.1-.1-.1 0 0-.3-.3-.6-.6-.8-.9-.5-.5-1-.9-1.6-1.2-.4-.3-.8-.4-1.3-.4-.4 0-.8 0-1.1.2-.5.2-.9.6-1.1 1-.2.3-.3.7-.3 1.1 0 .3 0 .6.1.9.1.5.4.9.8 1.2.5.4 1.1.5 1.7.5.5 0 1-.2 1.5-.5.6-.4 1.1-.8 1.6-1.3.1-.3.3-.5.5-.6zM13 12c.5.5 1 1 1.5 1.4.5.5 1.1.9 1.9 1 .4.1.8 0 1.2-.1.3-.1.6-.3.9-.5.4-.4.7-.9.8-1.4.1-.5 0-.9-.1-1.4-.3-.8-.8-1.2-1.7-1.4-.4-.1-.8-.1-1.2 0-.5.1-1 .4-1.4.7-.5.4-1 .8-1.4 1.2-.2.2-.4.3-.5.5z"/></svg></button> <button @click="${this._handleSettingsClick}" @blur="${this._handleBlur}" aria-label="Settings" aria-haspopup="true" aria-expanded="${!!this._isSettingsOpen}" aria-controls="${`${this._identifier}-settings`}"><svg width="24" height="24" aria-hidden="true" focusable="false"><circle cx="12" cy="5.4" r="2.5"/><circle cx="12" cy="12" r="2.5"/><circle cx="12" cy="18.6" r="2.5"/></svg></button><div id="${`${this._identifier}-settings`}" class="popover" style="display:${this._isSettingsOpen ? 'block' : 'none'}">${this._isDotLottie ? lit.nothing : lit.html`<button @click="${this.convert}" aria-label="Convert JSON animation to dotLottie format" tabindex="0"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z"/></svg> Convert to dotLottie</button>`} <button @click="${this.snapshot}" aria-label="Download still image" tabindex="0"><svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M16.8 10.8 12 15.6l-4.8-4.8h3V3.6h3.6v7.2h3zM12 15.6H3v4.8h18v-4.8h-9zm7.8 2.4h-2.4v-1.2h2.4V18z"/></svg> Download still image</button></div>`}</div>`;
|
|
798
831
|
}
|
|
799
832
|
render() {
|
|
800
|
-
return lit.html`<figure class="${'animation-container main'}" data-controls="${this.controls ??
|
|
833
|
+
return lit.html`<figure class="${'animation-container main'}" data-controls="${this.controls ?? false}" lang="${this.description ? document?.documentElement?.lang : 'en'}" role="img" aria-label="${this.description ?? 'Lottie animation'}" data-loaded="${this._playerState.loaded}"><div class="animation" style="background:${this.background}">${this.currentState === exports.PlayerState.Error ? lit.html`<div class="error"><svg preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="1920" height="1080" viewBox="0 0 1920 1080"><path fill="#fff" d="M0 0h1920v1080H0z"/><path fill="#3a6d8b" d="M1190.2 531 1007 212.4c-22-38.2-77.2-38-98.8.5L729.5 531.3c-21.3 37.9 6.1 84.6 49.5 84.6l361.9.3c43.7 0 71.1-47.3 49.3-85.2zM937.3 288.7c.2-7.5 3.3-23.9 23.2-23.9 16.3 0 23 16.1 23 23.5 0 55.3-10.7 197.2-12.2 214.5-.1 1-.9 1.7-1.9 1.7h-18.3c-1 0-1.8-.7-1.9-1.7-1.4-17.5-13.4-162.9-11.9-214.1zm24.2 283.8c-13.1 0-23.7-10.6-23.7-23.7s10.6-23.7 23.7-23.7 23.7 10.6 23.7 23.7-10.6 23.7-23.7 23.7zM722.1 644h112.6v34.4h-70.4V698h58.8v31.7h-58.8v22.6h72.4v36.2H722.1V644zm162 57.1h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6zm78.9 0h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5H963v15.6zm39.5 36.2c0-31.3 22.2-54.8 56.6-54.8 34.4 0 56.2 23.5 56.2 54.8s-21.8 54.6-56.2 54.6c-34.4-.1-56.6-23.3-56.6-54.6zm74 0c0-17.4-6.1-29.1-17.8-29.1-11.7 0-17.4 11.7-17.4 29.1 0 17.4 5.7 29.1 17.4 29.1s17.8-11.8 17.8-29.1zm83.1-36.2h.6c8.3-12.9 18.2-17.8 31.3-17.8 3 0 5.1.4 6.3 1v32.6h-.8c-22.4-3.8-35.6 6.3-35.6 29.5v42.3h-38.2V685.5h36.4v15.6z"/><path fill="none" d="M718.9 807.7h645v285.4h-645z"/><text fill="#3a6d8b" style="text-align:center;position:absolute;left:100%;font-size:47px;font-family:system-ui,-apple-system,BlinkMacSystemFont,'.SFNSText-Regular',sans-serif" x="50%" y="848.017" text-anchor="middle">${this._errorMessage}</text></svg></div>` : lit.nothing}</div>${this.controls ? this.renderControls() : lit.nothing}</figure>`;
|
|
801
834
|
}
|
|
802
835
|
constructor(){
|
|
803
836
|
super();
|
|
@@ -833,10 +866,19 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
833
866
|
target.focus();
|
|
834
867
|
}
|
|
835
868
|
};
|
|
836
|
-
this.
|
|
869
|
+
this._complete = this._complete.bind(this);
|
|
870
|
+
this._dataReady = this._dataReady.bind(this);
|
|
871
|
+
this._dataFailed = this._dataFailed.bind(this);
|
|
872
|
+
this._DOMLoaded = this._DOMLoaded.bind(this);
|
|
873
|
+
this._enterFrame = this._enterFrame.bind(this);
|
|
874
|
+
this._handleSeekChange = this._handleSeekChange.bind(this);
|
|
875
|
+
this._loopComplete = this._loopComplete.bind(this);
|
|
837
876
|
this._mouseEnter = this._mouseEnter.bind(this);
|
|
838
877
|
this._mouseLeave = this._mouseLeave.bind(this);
|
|
878
|
+
this._onVisibilityChange = this._onVisibilityChange.bind(this);
|
|
879
|
+
this._switchInstance = this._switchInstance.bind(this);
|
|
839
880
|
this.convert = this.convert.bind(this);
|
|
881
|
+
this.destroy = this.destroy.bind(this);
|
|
840
882
|
}
|
|
841
883
|
}
|
|
842
884
|
_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
|
{
|