@aarsteinmedia/dotlottie-player 2.3.3 → 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 +62 -51
- package/dist/esm/index.js +62 -51
- package/dist/index.js +1 -1
- 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
|
|
|
@@ -446,40 +446,42 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
446
446
|
}
|
|
447
447
|
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Loop));
|
|
448
448
|
if (this._isBounce) {
|
|
449
|
-
this._lottieInstance
|
|
450
|
-
this._lottieInstance
|
|
449
|
+
this._lottieInstance.goToAndStop(playDirection === -1 ? firstFrame : totalFrames * 0.99, true);
|
|
450
|
+
this._lottieInstance.setDirection(playDirection * -1);
|
|
451
451
|
return setTimeout(()=>{
|
|
452
452
|
this._lottieInstance?.play();
|
|
453
453
|
}, this.intermission);
|
|
454
454
|
}
|
|
455
|
-
this._lottieInstance
|
|
455
|
+
this._lottieInstance.goToAndStop(playDirection === -1 ? totalFrames * 0.99 : firstFrame, true);
|
|
456
456
|
return setTimeout(()=>{
|
|
457
457
|
this._lottieInstance?.play();
|
|
458
458
|
}, this.intermission);
|
|
459
459
|
}
|
|
460
460
|
_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
|
-
}));
|
|
461
|
+
if (!this._lottieInstance) {
|
|
462
|
+
return;
|
|
470
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
|
+
}));
|
|
471
472
|
}
|
|
472
473
|
_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
|
-
}));
|
|
474
|
+
if (!this._lottieInstance) {
|
|
475
|
+
return;
|
|
482
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
|
+
}));
|
|
483
485
|
}
|
|
484
486
|
_DOMLoaded() {
|
|
485
487
|
this._playerState.loaded = true;
|
|
@@ -675,15 +677,17 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
675
677
|
this._lottieInstance.setDirection(value);
|
|
676
678
|
}
|
|
677
679
|
setLooping(value) {
|
|
678
|
-
if (this._lottieInstance) {
|
|
679
|
-
|
|
680
|
-
this._lottieInstance.setLoop(value);
|
|
680
|
+
if (!this._lottieInstance) {
|
|
681
|
+
return;
|
|
681
682
|
}
|
|
683
|
+
this.loop = value;
|
|
684
|
+
this._lottieInstance.setLoop(value);
|
|
682
685
|
}
|
|
683
686
|
setMultiAnimationSettings(settings) {
|
|
684
|
-
if (this._lottieInstance) {
|
|
685
|
-
|
|
687
|
+
if (!this._lottieInstance) {
|
|
688
|
+
return;
|
|
686
689
|
}
|
|
690
|
+
this.multiAnimationSettings = settings;
|
|
687
691
|
}
|
|
688
692
|
togglePlay() {
|
|
689
693
|
if (!this._lottieInstance) return;
|
|
@@ -739,24 +743,30 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
739
743
|
}
|
|
740
744
|
_switchInstance(isPrevious = false) {
|
|
741
745
|
if (!this._animations[this._currentAnimation]) return;
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
|
|
753
|
-
|
|
754
|
-
this.
|
|
755
|
-
|
|
756
|
-
|
|
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));
|
|
757
769
|
}
|
|
758
|
-
this._lottieInstance?.goToAndStop(0, true);
|
|
759
|
-
this.currentState = exports.PlayerState.Stopped;
|
|
760
770
|
}
|
|
761
771
|
next() {
|
|
762
772
|
this._currentAnimation++;
|
|
@@ -768,13 +778,12 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
768
778
|
}
|
|
769
779
|
async convert({ typeCheck, manifest, animations, fileName, shouldDownload = true }) {
|
|
770
780
|
if (typeCheck || this._isDotLottie) return;
|
|
771
|
-
const oldManifest = manifest || this._manifest, newManifest = {
|
|
772
|
-
...oldManifest,
|
|
773
|
-
generator: pkg.name
|
|
774
|
-
};
|
|
775
781
|
return createDotLottie({
|
|
776
782
|
animations: animations || (await getAnimationData(this.src)).animations,
|
|
777
|
-
manifest:
|
|
783
|
+
manifest: {
|
|
784
|
+
...manifest || this._manifest,
|
|
785
|
+
generator: pkg.name
|
|
786
|
+
},
|
|
778
787
|
fileName: `${getFilename(fileName || this.src)}.lottie`,
|
|
779
788
|
shouldDownload
|
|
780
789
|
});
|
|
@@ -813,6 +822,7 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
813
822
|
this._intersectionObserver = undefined;
|
|
814
823
|
}
|
|
815
824
|
if (this._lottieInstance) this._lottieInstance.destroy();
|
|
825
|
+
this._removeEventListeners();
|
|
816
826
|
document.removeEventListener('visibilitychange', this._onVisibilityChange);
|
|
817
827
|
}
|
|
818
828
|
renderControls() {
|
|
@@ -820,7 +830,7 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
820
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>`;
|
|
821
831
|
}
|
|
822
832
|
render() {
|
|
823
|
-
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>`;
|
|
824
834
|
}
|
|
825
835
|
constructor(){
|
|
826
836
|
super();
|
|
@@ -862,9 +872,10 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
862
872
|
this._DOMLoaded = this._DOMLoaded.bind(this);
|
|
863
873
|
this._enterFrame = this._enterFrame.bind(this);
|
|
864
874
|
this._handleSeekChange = this._handleSeekChange.bind(this);
|
|
865
|
-
this.
|
|
875
|
+
this._loopComplete = this._loopComplete.bind(this);
|
|
866
876
|
this._mouseEnter = this._mouseEnter.bind(this);
|
|
867
877
|
this._mouseLeave = this._mouseLeave.bind(this);
|
|
878
|
+
this._onVisibilityChange = this._onVisibilityChange.bind(this);
|
|
868
879
|
this._switchInstance = this._switchInstance.bind(this);
|
|
869
880
|
this.convert = this.convert.bind(this);
|
|
870
881
|
this.destroy = this.destroy.bind(this);
|
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
|
|
|
@@ -444,40 +444,42 @@ class DotLottiePlayer extends LitElement {
|
|
|
444
444
|
}
|
|
445
445
|
this.dispatchEvent(new CustomEvent(PlayerEvents.Loop));
|
|
446
446
|
if (this._isBounce) {
|
|
447
|
-
this._lottieInstance
|
|
448
|
-
this._lottieInstance
|
|
447
|
+
this._lottieInstance.goToAndStop(playDirection === -1 ? firstFrame : totalFrames * 0.99, true);
|
|
448
|
+
this._lottieInstance.setDirection(playDirection * -1);
|
|
449
449
|
return setTimeout(()=>{
|
|
450
450
|
this._lottieInstance?.play();
|
|
451
451
|
}, this.intermission);
|
|
452
452
|
}
|
|
453
|
-
this._lottieInstance
|
|
453
|
+
this._lottieInstance.goToAndStop(playDirection === -1 ? totalFrames * 0.99 : firstFrame, true);
|
|
454
454
|
return setTimeout(()=>{
|
|
455
455
|
this._lottieInstance?.play();
|
|
456
456
|
}, this.intermission);
|
|
457
457
|
}
|
|
458
458
|
_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
|
-
}));
|
|
459
|
+
if (!this._lottieInstance) {
|
|
460
|
+
return;
|
|
468
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
|
+
}));
|
|
469
470
|
}
|
|
470
471
|
_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
|
-
}));
|
|
472
|
+
if (!this._lottieInstance) {
|
|
473
|
+
return;
|
|
480
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
|
+
}));
|
|
481
483
|
}
|
|
482
484
|
_DOMLoaded() {
|
|
483
485
|
this._playerState.loaded = true;
|
|
@@ -673,15 +675,17 @@ class DotLottiePlayer extends LitElement {
|
|
|
673
675
|
this._lottieInstance.setDirection(value);
|
|
674
676
|
}
|
|
675
677
|
setLooping(value) {
|
|
676
|
-
if (this._lottieInstance) {
|
|
677
|
-
|
|
678
|
-
this._lottieInstance.setLoop(value);
|
|
678
|
+
if (!this._lottieInstance) {
|
|
679
|
+
return;
|
|
679
680
|
}
|
|
681
|
+
this.loop = value;
|
|
682
|
+
this._lottieInstance.setLoop(value);
|
|
680
683
|
}
|
|
681
684
|
setMultiAnimationSettings(settings) {
|
|
682
|
-
if (this._lottieInstance) {
|
|
683
|
-
|
|
685
|
+
if (!this._lottieInstance) {
|
|
686
|
+
return;
|
|
684
687
|
}
|
|
688
|
+
this.multiAnimationSettings = settings;
|
|
685
689
|
}
|
|
686
690
|
togglePlay() {
|
|
687
691
|
if (!this._lottieInstance) return;
|
|
@@ -737,24 +741,30 @@ class DotLottiePlayer extends LitElement {
|
|
|
737
741
|
}
|
|
738
742
|
_switchInstance(isPrevious = false) {
|
|
739
743
|
if (!this._animations[this._currentAnimation]) return;
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
this.
|
|
753
|
-
|
|
754
|
-
|
|
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));
|
|
755
767
|
}
|
|
756
|
-
this._lottieInstance?.goToAndStop(0, true);
|
|
757
|
-
this.currentState = PlayerState.Stopped;
|
|
758
768
|
}
|
|
759
769
|
next() {
|
|
760
770
|
this._currentAnimation++;
|
|
@@ -766,13 +776,12 @@ class DotLottiePlayer extends LitElement {
|
|
|
766
776
|
}
|
|
767
777
|
async convert({ typeCheck, manifest, animations, fileName, shouldDownload = true }) {
|
|
768
778
|
if (typeCheck || this._isDotLottie) return;
|
|
769
|
-
const oldManifest = manifest || this._manifest, newManifest = {
|
|
770
|
-
...oldManifest,
|
|
771
|
-
generator: pkg.name
|
|
772
|
-
};
|
|
773
779
|
return createDotLottie({
|
|
774
780
|
animations: animations || (await getAnimationData(this.src)).animations,
|
|
775
|
-
manifest:
|
|
781
|
+
manifest: {
|
|
782
|
+
...manifest || this._manifest,
|
|
783
|
+
generator: pkg.name
|
|
784
|
+
},
|
|
776
785
|
fileName: `${getFilename(fileName || this.src)}.lottie`,
|
|
777
786
|
shouldDownload
|
|
778
787
|
});
|
|
@@ -811,6 +820,7 @@ class DotLottiePlayer extends LitElement {
|
|
|
811
820
|
this._intersectionObserver = undefined;
|
|
812
821
|
}
|
|
813
822
|
if (this._lottieInstance) this._lottieInstance.destroy();
|
|
823
|
+
this._removeEventListeners();
|
|
814
824
|
document.removeEventListener('visibilitychange', this._onVisibilityChange);
|
|
815
825
|
}
|
|
816
826
|
renderControls() {
|
|
@@ -818,7 +828,7 @@ class DotLottiePlayer extends LitElement {
|
|
|
818
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>`;
|
|
819
829
|
}
|
|
820
830
|
render() {
|
|
821
|
-
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>`;
|
|
822
832
|
}
|
|
823
833
|
constructor(){
|
|
824
834
|
super();
|
|
@@ -860,9 +870,10 @@ class DotLottiePlayer extends LitElement {
|
|
|
860
870
|
this._DOMLoaded = this._DOMLoaded.bind(this);
|
|
861
871
|
this._enterFrame = this._enterFrame.bind(this);
|
|
862
872
|
this._handleSeekChange = this._handleSeekChange.bind(this);
|
|
863
|
-
this.
|
|
873
|
+
this._loopComplete = this._loopComplete.bind(this);
|
|
864
874
|
this._mouseEnter = this._mouseEnter.bind(this);
|
|
865
875
|
this._mouseLeave = this._mouseLeave.bind(this);
|
|
876
|
+
this._onVisibilityChange = this._onVisibilityChange.bind(this);
|
|
866
877
|
this._switchInstance = this._switchInstance.bind(this);
|
|
867
878
|
this.convert = this.convert.bind(this);
|
|
868
879
|
this.destroy = this.destroy.bind(this);
|