@aarsteinmedia/dotlottie-player 2.3.3 → 2.3.5
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 +96 -78
- package/dist/custom-elements.json +12 -0
- package/dist/esm/index.js +96 -78
- package/dist/index.js +1 -1
- package/package.json +2 -2
package/dist/esm/index.js
CHANGED
|
@@ -275,7 +275,10 @@ const addExt = (ext, str)=>{
|
|
|
275
275
|
if (!str) return false;
|
|
276
276
|
const regex = /^([0-9a-zA-Z+/]{4})*(([0-9a-zA-Z+/]{2}==)|([0-9a-zA-Z+/]{3}=))?$/;
|
|
277
277
|
return regex.test(parseBase64(str));
|
|
278
|
-
}, isImage = (asset)=>'w' in asset && 'h' in asset && !('xt' in asset) && 'p' in asset,
|
|
278
|
+
}, isImage = (asset)=>'w' in asset && 'h' in asset && !('xt' in asset) && 'p' in asset, isInView = (el)=>{
|
|
279
|
+
const { top, left, bottom, right } = el.getBoundingClientRect();
|
|
280
|
+
return (top > 0 && top < innerHeight || bottom > 0 && bottom < innerHeight) && (left > 0 && left < innerWidth || right > 0 && right < innerWidth);
|
|
281
|
+
}, isServer = ()=>!(typeof window !== 'undefined' && window.document), parseBase64 = (str)=>str.substring(str.indexOf(',') + 1), resolveAssets = async (unzipped, assets)=>{
|
|
279
282
|
if (!Array.isArray(assets)) return;
|
|
280
283
|
const toResolve = [];
|
|
281
284
|
for (const asset of assets){
|
|
@@ -308,7 +311,7 @@ const addExt = (ext, str)=>{
|
|
|
308
311
|
return `${prefix ?? `:${s4()}`}-${s4()}`;
|
|
309
312
|
};
|
|
310
313
|
|
|
311
|
-
var name="@aarsteinmedia/dotlottie-player";var version="2.3.
|
|
314
|
+
var name="@aarsteinmedia/dotlottie-player";var version="2.3.5";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.11.0","@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
315
|
|
|
313
316
|
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
317
|
|
|
@@ -398,7 +401,7 @@ class DotLottiePlayer extends LitElement {
|
|
|
398
401
|
this.setSubframe(!!this.subframe);
|
|
399
402
|
if (this.autoplay) {
|
|
400
403
|
if (this.direction === -1) this.seek('99%');
|
|
401
|
-
this.play();
|
|
404
|
+
isInView(this) ? this.play() : this._freeze();
|
|
402
405
|
}
|
|
403
406
|
}
|
|
404
407
|
getManifest() {
|
|
@@ -444,40 +447,42 @@ class DotLottiePlayer extends LitElement {
|
|
|
444
447
|
}
|
|
445
448
|
this.dispatchEvent(new CustomEvent(PlayerEvents.Loop));
|
|
446
449
|
if (this._isBounce) {
|
|
447
|
-
this._lottieInstance
|
|
448
|
-
this._lottieInstance
|
|
450
|
+
this._lottieInstance.goToAndStop(playDirection === -1 ? firstFrame : totalFrames * 0.99, true);
|
|
451
|
+
this._lottieInstance.setDirection(playDirection * -1);
|
|
449
452
|
return setTimeout(()=>{
|
|
450
453
|
this._lottieInstance?.play();
|
|
451
454
|
}, this.intermission);
|
|
452
455
|
}
|
|
453
|
-
this._lottieInstance
|
|
456
|
+
this._lottieInstance.goToAndStop(playDirection === -1 ? totalFrames * 0.99 : firstFrame, true);
|
|
454
457
|
return setTimeout(()=>{
|
|
455
458
|
this._lottieInstance?.play();
|
|
456
459
|
}, this.intermission);
|
|
457
460
|
}
|
|
458
461
|
_enterFrame() {
|
|
459
|
-
if (this._lottieInstance) {
|
|
460
|
-
|
|
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
|
-
}));
|
|
462
|
+
if (!this._lottieInstance) {
|
|
463
|
+
return;
|
|
468
464
|
}
|
|
465
|
+
const { currentFrame, totalFrames } = this._lottieInstance;
|
|
466
|
+
this._seeker = Math.floor(currentFrame / totalFrames * 100);
|
|
467
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Frame, {
|
|
468
|
+
detail: {
|
|
469
|
+
frame: currentFrame,
|
|
470
|
+
seeker: this._seeker
|
|
471
|
+
}
|
|
472
|
+
}));
|
|
469
473
|
}
|
|
470
474
|
_complete() {
|
|
471
|
-
if (this._lottieInstance) {
|
|
472
|
-
|
|
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
|
-
}));
|
|
475
|
+
if (!this._lottieInstance) {
|
|
476
|
+
return;
|
|
480
477
|
}
|
|
478
|
+
const { currentFrame, totalFrames } = this._lottieInstance;
|
|
479
|
+
this._seeker = Math.floor(currentFrame / totalFrames * 100);
|
|
480
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Frame, {
|
|
481
|
+
detail: {
|
|
482
|
+
frame: currentFrame,
|
|
483
|
+
seeker: this._seeker
|
|
484
|
+
}
|
|
485
|
+
}));
|
|
481
486
|
}
|
|
482
487
|
_DOMLoaded() {
|
|
483
488
|
this._playerState.loaded = true;
|
|
@@ -503,7 +508,9 @@ class DotLottiePlayer extends LitElement {
|
|
|
503
508
|
_onVisibilityChange() {
|
|
504
509
|
if (document.hidden && this.currentState === PlayerState.Playing) {
|
|
505
510
|
this._freeze();
|
|
506
|
-
|
|
511
|
+
return;
|
|
512
|
+
}
|
|
513
|
+
if (this.currentState === PlayerState.Frozen) {
|
|
507
514
|
this.play();
|
|
508
515
|
}
|
|
509
516
|
}
|
|
@@ -621,10 +628,10 @@ class DotLottiePlayer extends LitElement {
|
|
|
621
628
|
if (this.currentState === PlayerState.Playing || this.currentState === PlayerState.Frozen && this._playerState.prev === PlayerState.Playing) {
|
|
622
629
|
this._lottieInstance.goToAndPlay(frame, true);
|
|
623
630
|
this.currentState = PlayerState.Playing;
|
|
624
|
-
|
|
625
|
-
this._lottieInstance.goToAndStop(frame, true);
|
|
626
|
-
this._lottieInstance.pause();
|
|
631
|
+
return;
|
|
627
632
|
}
|
|
633
|
+
this._lottieInstance.goToAndStop(frame, true);
|
|
634
|
+
this._lottieInstance.pause();
|
|
628
635
|
}
|
|
629
636
|
snapshot() {
|
|
630
637
|
if (!this.shadowRoot) return;
|
|
@@ -673,15 +680,17 @@ class DotLottiePlayer extends LitElement {
|
|
|
673
680
|
this._lottieInstance.setDirection(value);
|
|
674
681
|
}
|
|
675
682
|
setLooping(value) {
|
|
676
|
-
if (this._lottieInstance) {
|
|
677
|
-
|
|
678
|
-
this._lottieInstance.setLoop(value);
|
|
683
|
+
if (!this._lottieInstance) {
|
|
684
|
+
return;
|
|
679
685
|
}
|
|
686
|
+
this.loop = value;
|
|
687
|
+
this._lottieInstance.setLoop(value);
|
|
680
688
|
}
|
|
681
689
|
setMultiAnimationSettings(settings) {
|
|
682
|
-
if (this._lottieInstance) {
|
|
683
|
-
|
|
690
|
+
if (!this._lottieInstance) {
|
|
691
|
+
return;
|
|
684
692
|
}
|
|
693
|
+
this.multiAnimationSettings = settings;
|
|
685
694
|
}
|
|
686
695
|
togglePlay() {
|
|
687
696
|
if (!this._lottieInstance) return;
|
|
@@ -689,18 +698,18 @@ class DotLottiePlayer extends LitElement {
|
|
|
689
698
|
if (this.currentState === PlayerState.Playing) {
|
|
690
699
|
return this.pause();
|
|
691
700
|
}
|
|
692
|
-
if (this.currentState
|
|
693
|
-
this.
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
return this._lottieInstance.goToAndPlay(
|
|
701
|
+
if (this.currentState !== PlayerState.Completed) {
|
|
702
|
+
return this.play();
|
|
703
|
+
}
|
|
704
|
+
this.currentState = PlayerState.Playing;
|
|
705
|
+
if (this._isBounce) {
|
|
706
|
+
this.setDirection(playDirection * -1);
|
|
707
|
+
return this._lottieInstance.goToAndPlay(currentFrame, true);
|
|
708
|
+
}
|
|
709
|
+
if (playDirection === -1) {
|
|
710
|
+
return this._lottieInstance.goToAndPlay(totalFrames, true);
|
|
702
711
|
}
|
|
703
|
-
return this.
|
|
712
|
+
return this._lottieInstance.goToAndPlay(0, true);
|
|
704
713
|
}
|
|
705
714
|
toggleLooping() {
|
|
706
715
|
this.setLooping(!this.loop);
|
|
@@ -711,10 +720,10 @@ class DotLottiePlayer extends LitElement {
|
|
|
711
720
|
if (curr.mode === PlayMode.Normal) {
|
|
712
721
|
curr.mode = PlayMode.Bounce;
|
|
713
722
|
this._isBounce = true;
|
|
714
|
-
|
|
715
|
-
curr.mode = PlayMode.Normal;
|
|
716
|
-
this._isBounce = false;
|
|
723
|
+
return;
|
|
717
724
|
}
|
|
725
|
+
curr.mode = PlayMode.Normal;
|
|
726
|
+
this._isBounce = false;
|
|
718
727
|
return;
|
|
719
728
|
}
|
|
720
729
|
if (this.mode === PlayMode.Normal) {
|
|
@@ -728,33 +737,39 @@ class DotLottiePlayer extends LitElement {
|
|
|
728
737
|
_toggleSettings(flag) {
|
|
729
738
|
if (flag === undefined) {
|
|
730
739
|
this._isSettingsOpen = !this._isSettingsOpen;
|
|
731
|
-
|
|
732
|
-
this._isSettingsOpen = flag;
|
|
740
|
+
return;
|
|
733
741
|
}
|
|
742
|
+
this._isSettingsOpen = flag;
|
|
734
743
|
}
|
|
735
744
|
_handleBlur() {
|
|
736
745
|
setTimeout(()=>this._toggleSettings(false), 200);
|
|
737
746
|
}
|
|
738
747
|
_switchInstance(isPrevious = false) {
|
|
739
748
|
if (!this._animations[this._currentAnimation]) return;
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
this.
|
|
753
|
-
|
|
754
|
-
|
|
749
|
+
try {
|
|
750
|
+
if (this._lottieInstance) this._lottieInstance.destroy();
|
|
751
|
+
this._lottieInstance = Lottie.loadAnimation({
|
|
752
|
+
...this._getOptions(),
|
|
753
|
+
animationData: this._animations[this._currentAnimation]
|
|
754
|
+
});
|
|
755
|
+
if (this.multiAnimationSettings?.[this._currentAnimation]?.mode) {
|
|
756
|
+
this._isBounce = this.multiAnimationSettings[this._currentAnimation].mode === PlayMode.Bounce;
|
|
757
|
+
}
|
|
758
|
+
this._removeEventListeners();
|
|
759
|
+
this._addEventListeners();
|
|
760
|
+
this.dispatchEvent(new CustomEvent(isPrevious ? PlayerEvents.Previous : PlayerEvents.Next));
|
|
761
|
+
if (this.multiAnimationSettings?.[this._currentAnimation]?.autoplay ?? this.autoplay) {
|
|
762
|
+
this._lottieInstance?.goToAndPlay(0, true);
|
|
763
|
+
this.currentState = PlayerState.Playing;
|
|
764
|
+
return;
|
|
765
|
+
}
|
|
766
|
+
this._lottieInstance?.goToAndStop(0, true);
|
|
767
|
+
this.currentState = PlayerState.Stopped;
|
|
768
|
+
} catch (err) {
|
|
769
|
+
this._errorMessage = handleErrors(err).message;
|
|
770
|
+
this.currentState = PlayerState.Error;
|
|
771
|
+
this.dispatchEvent(new CustomEvent(PlayerEvents.Error));
|
|
755
772
|
}
|
|
756
|
-
this._lottieInstance?.goToAndStop(0, true);
|
|
757
|
-
this.currentState = PlayerState.Stopped;
|
|
758
773
|
}
|
|
759
774
|
next() {
|
|
760
775
|
this._currentAnimation++;
|
|
@@ -766,13 +781,12 @@ class DotLottiePlayer extends LitElement {
|
|
|
766
781
|
}
|
|
767
782
|
async convert({ typeCheck, manifest, animations, fileName, shouldDownload = true }) {
|
|
768
783
|
if (typeCheck || this._isDotLottie) return;
|
|
769
|
-
const oldManifest = manifest || this._manifest, newManifest = {
|
|
770
|
-
...oldManifest,
|
|
771
|
-
generator: pkg.name
|
|
772
|
-
};
|
|
773
784
|
return createDotLottie({
|
|
774
785
|
animations: animations || (await getAnimationData(this.src)).animations,
|
|
775
|
-
manifest:
|
|
786
|
+
manifest: {
|
|
787
|
+
...manifest || this._manifest,
|
|
788
|
+
generator: pkg.name
|
|
789
|
+
},
|
|
776
790
|
fileName: `${getFilename(fileName || this.src)}.lottie`,
|
|
777
791
|
shouldDownload
|
|
778
792
|
});
|
|
@@ -789,15 +803,17 @@ class DotLottiePlayer extends LitElement {
|
|
|
789
803
|
async firstUpdated() {
|
|
790
804
|
if ('IntersectionObserver' in window) {
|
|
791
805
|
this._intersectionObserver = new IntersectionObserver((entries)=>{
|
|
792
|
-
|
|
793
|
-
if (!document.hidden && this.currentState === PlayerState.Frozen) {
|
|
806
|
+
for (const entry of entries){
|
|
807
|
+
if (entry.isIntersecting && !document.hidden && this.currentState === PlayerState.Frozen) {
|
|
794
808
|
this.play();
|
|
809
|
+
continue;
|
|
810
|
+
}
|
|
811
|
+
if (this.currentState === PlayerState.Playing) {
|
|
812
|
+
this._freeze();
|
|
795
813
|
}
|
|
796
|
-
} else if (this.currentState === PlayerState.Playing) {
|
|
797
|
-
this._freeze();
|
|
798
814
|
}
|
|
799
815
|
});
|
|
800
|
-
this._intersectionObserver
|
|
816
|
+
this._intersectionObserver?.observe(this.container);
|
|
801
817
|
}
|
|
802
818
|
if (this.src) {
|
|
803
819
|
await this.load(this.src);
|
|
@@ -811,6 +827,7 @@ class DotLottiePlayer extends LitElement {
|
|
|
811
827
|
this._intersectionObserver = undefined;
|
|
812
828
|
}
|
|
813
829
|
if (this._lottieInstance) this._lottieInstance.destroy();
|
|
830
|
+
this._removeEventListeners();
|
|
814
831
|
document.removeEventListener('visibilitychange', this._onVisibilityChange);
|
|
815
832
|
}
|
|
816
833
|
renderControls() {
|
|
@@ -818,7 +835,7 @@ class DotLottiePlayer extends LitElement {
|
|
|
818
835
|
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>`;
|
|
819
836
|
}
|
|
820
837
|
render() {
|
|
821
|
-
return html`<figure class="${'animation-container main'}" data-controls="${this.controls ??
|
|
838
|
+
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>`;
|
|
822
839
|
}
|
|
823
840
|
constructor(){
|
|
824
841
|
super();
|
|
@@ -860,9 +877,10 @@ class DotLottiePlayer extends LitElement {
|
|
|
860
877
|
this._DOMLoaded = this._DOMLoaded.bind(this);
|
|
861
878
|
this._enterFrame = this._enterFrame.bind(this);
|
|
862
879
|
this._handleSeekChange = this._handleSeekChange.bind(this);
|
|
863
|
-
this.
|
|
880
|
+
this._loopComplete = this._loopComplete.bind(this);
|
|
864
881
|
this._mouseEnter = this._mouseEnter.bind(this);
|
|
865
882
|
this._mouseLeave = this._mouseLeave.bind(this);
|
|
883
|
+
this._onVisibilityChange = this._onVisibilityChange.bind(this);
|
|
866
884
|
this._switchInstance = this._switchInstance.bind(this);
|
|
867
885
|
this.convert = this.convert.bind(this);
|
|
868
886
|
this.destroy = this.destroy.bind(this);
|