@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/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.4";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,91 @@ 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
|
+
return;
|
|
461
|
+
}
|
|
462
|
+
const { currentFrame, totalFrames } = this._lottieInstance;
|
|
463
|
+
this._seeker = Math.floor(currentFrame / totalFrames * 100);
|
|
464
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Frame, {
|
|
465
|
+
detail: {
|
|
466
|
+
frame: currentFrame,
|
|
467
|
+
seeker: this._seeker
|
|
468
|
+
}
|
|
469
|
+
}));
|
|
470
|
+
}
|
|
471
|
+
_complete() {
|
|
472
|
+
if (!this._lottieInstance) {
|
|
473
|
+
return;
|
|
474
|
+
}
|
|
475
|
+
const { currentFrame, totalFrames } = this._lottieInstance;
|
|
476
|
+
this._seeker = Math.floor(currentFrame / totalFrames * 100);
|
|
477
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Frame, {
|
|
478
|
+
detail: {
|
|
479
|
+
frame: currentFrame,
|
|
480
|
+
seeker: this._seeker
|
|
481
|
+
}
|
|
482
|
+
}));
|
|
483
|
+
}
|
|
484
|
+
_DOMLoaded() {
|
|
485
|
+
this._playerState.loaded = true;
|
|
486
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Ready));
|
|
487
|
+
}
|
|
488
|
+
_dataReady() {
|
|
489
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Load));
|
|
490
|
+
}
|
|
491
|
+
_dataFailed() {
|
|
492
|
+
this.currentState = PlayerState.Error;
|
|
493
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Error));
|
|
471
494
|
}
|
|
472
495
|
_mouseEnter() {
|
|
473
496
|
if (this.hover && this.currentState !== PlayerState.Playing) {
|
|
@@ -587,6 +610,7 @@ class DotLottiePlayer extends LitElement {
|
|
|
587
610
|
this._lottieInstance = null;
|
|
588
611
|
this.dispatchEvent(new CustomEvent(PlayerEvents.Destroyed));
|
|
589
612
|
this.remove();
|
|
613
|
+
document.removeEventListener('visibilitychange', this._onVisibilityChange);
|
|
590
614
|
}
|
|
591
615
|
seek(value) {
|
|
592
616
|
if (!this._lottieInstance) return;
|
|
@@ -651,15 +675,17 @@ class DotLottiePlayer extends LitElement {
|
|
|
651
675
|
this._lottieInstance.setDirection(value);
|
|
652
676
|
}
|
|
653
677
|
setLooping(value) {
|
|
654
|
-
if (this._lottieInstance) {
|
|
655
|
-
|
|
656
|
-
this._lottieInstance.setLoop(value);
|
|
678
|
+
if (!this._lottieInstance) {
|
|
679
|
+
return;
|
|
657
680
|
}
|
|
681
|
+
this.loop = value;
|
|
682
|
+
this._lottieInstance.setLoop(value);
|
|
658
683
|
}
|
|
659
684
|
setMultiAnimationSettings(settings) {
|
|
660
|
-
if (this._lottieInstance) {
|
|
661
|
-
|
|
685
|
+
if (!this._lottieInstance) {
|
|
686
|
+
return;
|
|
662
687
|
}
|
|
688
|
+
this.multiAnimationSettings = settings;
|
|
663
689
|
}
|
|
664
690
|
togglePlay() {
|
|
665
691
|
if (!this._lottieInstance) return;
|
|
@@ -715,23 +741,30 @@ class DotLottiePlayer extends LitElement {
|
|
|
715
741
|
}
|
|
716
742
|
_switchInstance(isPrevious = false) {
|
|
717
743
|
if (!this._animations[this._currentAnimation]) return;
|
|
718
|
-
|
|
719
|
-
|
|
720
|
-
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
this.
|
|
730
|
-
this.
|
|
731
|
-
|
|
744
|
+
try {
|
|
745
|
+
if (this._lottieInstance) this._lottieInstance.destroy();
|
|
746
|
+
this._lottieInstance = Lottie.loadAnimation({
|
|
747
|
+
...this._getOptions(),
|
|
748
|
+
animationData: this._animations[this._currentAnimation]
|
|
749
|
+
});
|
|
750
|
+
if (this.multiAnimationSettings?.[this._currentAnimation]?.mode) {
|
|
751
|
+
this._isBounce = this.multiAnimationSettings[this._currentAnimation].mode === PlayMode.Bounce;
|
|
752
|
+
}
|
|
753
|
+
this._removeEventListeners();
|
|
754
|
+
this._addEventListeners();
|
|
755
|
+
this.dispatchEvent(new CustomEvent(isPrevious ? PlayerEvents.Previous : PlayerEvents.Next));
|
|
756
|
+
if (this.multiAnimationSettings?.[this._currentAnimation]?.autoplay ?? this.autoplay) {
|
|
757
|
+
this._lottieInstance?.goToAndPlay(0, true);
|
|
758
|
+
this.currentState = PlayerState.Playing;
|
|
759
|
+
return;
|
|
760
|
+
}
|
|
761
|
+
this._lottieInstance?.goToAndStop(0, true);
|
|
762
|
+
this.currentState = PlayerState.Stopped;
|
|
763
|
+
} catch (err) {
|
|
764
|
+
this._errorMessage = handleErrors(err).message;
|
|
765
|
+
this.currentState = PlayerState.Error;
|
|
766
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Error));
|
|
732
767
|
}
|
|
733
|
-
this._lottieInstance?.goToAndStop(0, true);
|
|
734
|
-
this.currentState = PlayerState.Stopped;
|
|
735
768
|
}
|
|
736
769
|
next() {
|
|
737
770
|
this._currentAnimation++;
|
|
@@ -743,13 +776,12 @@ class DotLottiePlayer extends LitElement {
|
|
|
743
776
|
}
|
|
744
777
|
async convert({ typeCheck, manifest, animations, fileName, shouldDownload = true }) {
|
|
745
778
|
if (typeCheck || this._isDotLottie) return;
|
|
746
|
-
const oldManifest = manifest || this._manifest, newManifest = {
|
|
747
|
-
...oldManifest,
|
|
748
|
-
generator: pkg.name
|
|
749
|
-
};
|
|
750
779
|
return createDotLottie({
|
|
751
780
|
animations: animations || (await getAnimationData(this.src)).animations,
|
|
752
|
-
manifest:
|
|
781
|
+
manifest: {
|
|
782
|
+
...manifest || this._manifest,
|
|
783
|
+
generator: pkg.name
|
|
784
|
+
},
|
|
753
785
|
fileName: `${getFilename(fileName || this.src)}.lottie`,
|
|
754
786
|
shouldDownload
|
|
755
787
|
});
|
|
@@ -788,6 +820,7 @@ class DotLottiePlayer extends LitElement {
|
|
|
788
820
|
this._intersectionObserver = undefined;
|
|
789
821
|
}
|
|
790
822
|
if (this._lottieInstance) this._lottieInstance.destroy();
|
|
823
|
+
this._removeEventListeners();
|
|
791
824
|
document.removeEventListener('visibilitychange', this._onVisibilityChange);
|
|
792
825
|
}
|
|
793
826
|
renderControls() {
|
|
@@ -795,7 +828,7 @@ class DotLottiePlayer extends LitElement {
|
|
|
795
828
|
return 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 ? 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>` : 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 ? html`${this._currentAnimation > 0 ? 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>` : nothing} ${this._currentAnimation + 1 < this._animations?.length ? 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>` : nothing}` : 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 ? nothing : html`<button @click="${this.toggleLooping}" data-active="${this.loop ?? 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 ? nothing : 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>`;
|
|
796
829
|
}
|
|
797
830
|
render() {
|
|
798
|
-
return html`<figure class="${'animation-container main'}" data-controls="${this.controls ??
|
|
831
|
+
return 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 === PlayerState.Error ? 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>` : nothing}</div>${this.controls ? this.renderControls() : nothing}</figure>`;
|
|
799
832
|
}
|
|
800
833
|
constructor(){
|
|
801
834
|
super();
|
|
@@ -831,10 +864,19 @@ class DotLottiePlayer extends LitElement {
|
|
|
831
864
|
target.focus();
|
|
832
865
|
}
|
|
833
866
|
};
|
|
834
|
-
this.
|
|
867
|
+
this._complete = this._complete.bind(this);
|
|
868
|
+
this._dataReady = this._dataReady.bind(this);
|
|
869
|
+
this._dataFailed = this._dataFailed.bind(this);
|
|
870
|
+
this._DOMLoaded = this._DOMLoaded.bind(this);
|
|
871
|
+
this._enterFrame = this._enterFrame.bind(this);
|
|
872
|
+
this._handleSeekChange = this._handleSeekChange.bind(this);
|
|
873
|
+
this._loopComplete = this._loopComplete.bind(this);
|
|
835
874
|
this._mouseEnter = this._mouseEnter.bind(this);
|
|
836
875
|
this._mouseLeave = this._mouseLeave.bind(this);
|
|
876
|
+
this._onVisibilityChange = this._onVisibilityChange.bind(this);
|
|
877
|
+
this._switchInstance = this._switchInstance.bind(this);
|
|
837
878
|
this.convert = this.convert.bind(this);
|
|
879
|
+
this.destroy = this.destroy.bind(this);
|
|
838
880
|
}
|
|
839
881
|
}
|
|
840
882
|
_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;
|