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