@aarsteinmedia/dotlottie-player 2.2.3 → 2.2.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 +11 -7
- package/dist/custom-elements.json +9 -0
- package/dist/esm/index.js +11 -7
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -1
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -299,7 +299,7 @@ const addExt = (ext, str)=>{
|
|
|
299
299
|
};
|
|
300
300
|
|
|
301
301
|
var name = "@aarsteinmedia/dotlottie-player";
|
|
302
|
-
var version = "2.2.
|
|
302
|
+
var version = "2.2.4";
|
|
303
303
|
var description = "Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";
|
|
304
304
|
var exports$1 = {
|
|
305
305
|
".": {
|
|
@@ -475,6 +475,7 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
475
475
|
if (!animations || animations.some((animation)=>!this._isLottie(animation))) {
|
|
476
476
|
throw new Error('Broken or corrupted file');
|
|
477
477
|
}
|
|
478
|
+
this._isBounce = this.multiAnimationSettings?.[this._currentAnimation]?.mode !== undefined ? this.multiAnimationSettings?.[this._currentAnimation]?.mode === exports.PlayMode.Bounce : this.mode === exports.PlayMode.Bounce;
|
|
478
479
|
this._isDotLottie = !!isDotLottie;
|
|
479
480
|
this._animations = animations;
|
|
480
481
|
this._manifest = manifest ?? {
|
|
@@ -530,7 +531,7 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
530
531
|
this._lottieInstance.addEventListener('complete', ()=>{
|
|
531
532
|
this.currentState = exports.PlayerState.Completed;
|
|
532
533
|
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Complete));
|
|
533
|
-
if (this._animations?.length > 1 && !!this.multiAnimationSettings?.[this._currentAnimation + 1]
|
|
534
|
+
if (this._animations?.length > 1 && !!this.multiAnimationSettings?.[this._currentAnimation + 1]?.autoplay && this._currentAnimation < this._animations?.length - 1) {
|
|
534
535
|
this.next();
|
|
535
536
|
}
|
|
536
537
|
});
|
|
@@ -538,9 +539,9 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
538
539
|
if (!this._lottieInstance) {
|
|
539
540
|
return;
|
|
540
541
|
}
|
|
541
|
-
const { firstFrame, totalFrames, playDirection } = this._lottieInstance
|
|
542
|
+
const { firstFrame, totalFrames, playDirection } = this._lottieInstance;
|
|
542
543
|
if (this.count) {
|
|
543
|
-
|
|
544
|
+
this._isBounce ? this._playerState.count += 1 : this._playerState.count += 0.5;
|
|
544
545
|
if (this._playerState.count >= this.count) {
|
|
545
546
|
this.setLooping(false);
|
|
546
547
|
this.currentState = exports.PlayerState.Completed;
|
|
@@ -549,7 +550,7 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
549
550
|
}
|
|
550
551
|
}
|
|
551
552
|
this.dispatchEvent(new CustomEvent(exports.PlayerEvents.Loop));
|
|
552
|
-
if (
|
|
553
|
+
if (this._isBounce) {
|
|
553
554
|
this._lottieInstance?.goToAndStop(playDirection === -1 ? firstFrame : totalFrames * 0.99, true);
|
|
554
555
|
this._lottieInstance?.setDirection(playDirection * -1);
|
|
555
556
|
return setTimeout(()=>{
|
|
@@ -774,7 +775,7 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
774
775
|
}
|
|
775
776
|
if (this.currentState === exports.PlayerState.Completed) {
|
|
776
777
|
this.currentState = exports.PlayerState.Playing;
|
|
777
|
-
if (
|
|
778
|
+
if (this._isBounce) {
|
|
778
779
|
this.setDirection(playDirection * -1);
|
|
779
780
|
return this._lottieInstance.goToAndPlay(currentFrame, true);
|
|
780
781
|
}
|
|
@@ -813,6 +814,7 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
813
814
|
setTimeout(()=>this._toggleSettings(false), 200);
|
|
814
815
|
}
|
|
815
816
|
_switchInstance() {
|
|
817
|
+
if (!this._animations[this._currentAnimation]) return;
|
|
816
818
|
if (this._lottieInstance) this._lottieInstance.destroy();
|
|
817
819
|
this._lottieInstance = Lottie.loadAnimation({
|
|
818
820
|
...this._getOptions(),
|
|
@@ -824,6 +826,7 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
824
826
|
this.currentState = exports.PlayerState.Playing;
|
|
825
827
|
} else {
|
|
826
828
|
this._lottieInstance?.goToAndStop(0, true);
|
|
829
|
+
this.currentState = exports.PlayerState.Stopped;
|
|
827
830
|
}
|
|
828
831
|
}
|
|
829
832
|
next() {
|
|
@@ -880,7 +883,7 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
880
883
|
}
|
|
881
884
|
renderControls() {
|
|
882
885
|
const isPlaying = this.currentState === exports.PlayerState.Playing, isPaused = this.currentState === exports.PlayerState.Paused, isStopped = this.currentState === exports.PlayerState.Stopped, isError = this.currentState === exports.PlayerState.Error;
|
|
883
|
-
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="${
|
|
886
|
+
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>`;
|
|
884
887
|
}
|
|
885
888
|
render() {
|
|
886
889
|
return lit.html`<figure class="${'animation-container main'}" data-controls="${this.controls ?? lit.nothing}" 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>`;
|
|
@@ -906,6 +909,7 @@ class DotLottiePlayer extends lit.LitElement {
|
|
|
906
909
|
this._lottieInstance = null;
|
|
907
910
|
this._identifier = this.id || useId('dotlottie');
|
|
908
911
|
this._errorMessage = 'Something went wrong';
|
|
912
|
+
this._isBounce = false;
|
|
909
913
|
this._isDotLottie = false;
|
|
910
914
|
this._playerState = {
|
|
911
915
|
prev: exports.PlayerState.Loading,
|
|
@@ -314,6 +314,15 @@
|
|
|
314
314
|
"privacy": "private",
|
|
315
315
|
"default": "'Something went wrong'"
|
|
316
316
|
},
|
|
317
|
+
{
|
|
318
|
+
"kind": "field",
|
|
319
|
+
"name": "_isBounce",
|
|
320
|
+
"type": {
|
|
321
|
+
"text": "boolean"
|
|
322
|
+
},
|
|
323
|
+
"privacy": "private",
|
|
324
|
+
"default": "false"
|
|
325
|
+
},
|
|
317
326
|
{
|
|
318
327
|
"kind": "field",
|
|
319
328
|
"name": "_isDotLottie",
|
package/dist/esm/index.js
CHANGED
|
@@ -297,7 +297,7 @@ const addExt = (ext, str)=>{
|
|
|
297
297
|
};
|
|
298
298
|
|
|
299
299
|
var name = "@aarsteinmedia/dotlottie-player";
|
|
300
|
-
var version = "2.2.
|
|
300
|
+
var version = "2.2.4";
|
|
301
301
|
var description = "Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";
|
|
302
302
|
var exports = {
|
|
303
303
|
".": {
|
|
@@ -473,6 +473,7 @@ class DotLottiePlayer extends LitElement {
|
|
|
473
473
|
if (!animations || animations.some((animation)=>!this._isLottie(animation))) {
|
|
474
474
|
throw new Error('Broken or corrupted file');
|
|
475
475
|
}
|
|
476
|
+
this._isBounce = this.multiAnimationSettings?.[this._currentAnimation]?.mode !== undefined ? this.multiAnimationSettings?.[this._currentAnimation]?.mode === PlayMode.Bounce : this.mode === PlayMode.Bounce;
|
|
476
477
|
this._isDotLottie = !!isDotLottie;
|
|
477
478
|
this._animations = animations;
|
|
478
479
|
this._manifest = manifest ?? {
|
|
@@ -528,7 +529,7 @@ class DotLottiePlayer extends LitElement {
|
|
|
528
529
|
this._lottieInstance.addEventListener('complete', ()=>{
|
|
529
530
|
this.currentState = PlayerState.Completed;
|
|
530
531
|
this.dispatchEvent(new CustomEvent(PlayerEvents.Complete));
|
|
531
|
-
if (this._animations?.length > 1 && !!this.multiAnimationSettings?.[this._currentAnimation + 1]
|
|
532
|
+
if (this._animations?.length > 1 && !!this.multiAnimationSettings?.[this._currentAnimation + 1]?.autoplay && this._currentAnimation < this._animations?.length - 1) {
|
|
532
533
|
this.next();
|
|
533
534
|
}
|
|
534
535
|
});
|
|
@@ -536,9 +537,9 @@ class DotLottiePlayer extends LitElement {
|
|
|
536
537
|
if (!this._lottieInstance) {
|
|
537
538
|
return;
|
|
538
539
|
}
|
|
539
|
-
const { firstFrame, totalFrames, playDirection } = this._lottieInstance
|
|
540
|
+
const { firstFrame, totalFrames, playDirection } = this._lottieInstance;
|
|
540
541
|
if (this.count) {
|
|
541
|
-
|
|
542
|
+
this._isBounce ? this._playerState.count += 1 : this._playerState.count += 0.5;
|
|
542
543
|
if (this._playerState.count >= this.count) {
|
|
543
544
|
this.setLooping(false);
|
|
544
545
|
this.currentState = PlayerState.Completed;
|
|
@@ -547,7 +548,7 @@ class DotLottiePlayer extends LitElement {
|
|
|
547
548
|
}
|
|
548
549
|
}
|
|
549
550
|
this.dispatchEvent(new CustomEvent(PlayerEvents.Loop));
|
|
550
|
-
if (
|
|
551
|
+
if (this._isBounce) {
|
|
551
552
|
this._lottieInstance?.goToAndStop(playDirection === -1 ? firstFrame : totalFrames * 0.99, true);
|
|
552
553
|
this._lottieInstance?.setDirection(playDirection * -1);
|
|
553
554
|
return setTimeout(()=>{
|
|
@@ -772,7 +773,7 @@ class DotLottiePlayer extends LitElement {
|
|
|
772
773
|
}
|
|
773
774
|
if (this.currentState === PlayerState.Completed) {
|
|
774
775
|
this.currentState = PlayerState.Playing;
|
|
775
|
-
if (
|
|
776
|
+
if (this._isBounce) {
|
|
776
777
|
this.setDirection(playDirection * -1);
|
|
777
778
|
return this._lottieInstance.goToAndPlay(currentFrame, true);
|
|
778
779
|
}
|
|
@@ -811,6 +812,7 @@ class DotLottiePlayer extends LitElement {
|
|
|
811
812
|
setTimeout(()=>this._toggleSettings(false), 200);
|
|
812
813
|
}
|
|
813
814
|
_switchInstance() {
|
|
815
|
+
if (!this._animations[this._currentAnimation]) return;
|
|
814
816
|
if (this._lottieInstance) this._lottieInstance.destroy();
|
|
815
817
|
this._lottieInstance = Lottie.loadAnimation({
|
|
816
818
|
...this._getOptions(),
|
|
@@ -822,6 +824,7 @@ class DotLottiePlayer extends LitElement {
|
|
|
822
824
|
this.currentState = PlayerState.Playing;
|
|
823
825
|
} else {
|
|
824
826
|
this._lottieInstance?.goToAndStop(0, true);
|
|
827
|
+
this.currentState = PlayerState.Stopped;
|
|
825
828
|
}
|
|
826
829
|
}
|
|
827
830
|
next() {
|
|
@@ -878,7 +881,7 @@ class DotLottiePlayer extends LitElement {
|
|
|
878
881
|
}
|
|
879
882
|
renderControls() {
|
|
880
883
|
const isPlaying = this.currentState === PlayerState.Playing, isPaused = this.currentState === PlayerState.Paused, isStopped = this.currentState === PlayerState.Stopped, isError = this.currentState === PlayerState.Error;
|
|
881
|
-
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="${
|
|
884
|
+
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>`;
|
|
882
885
|
}
|
|
883
886
|
render() {
|
|
884
887
|
return html`<figure class="${'animation-container main'}" data-controls="${this.controls ?? nothing}" 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>`;
|
|
@@ -904,6 +907,7 @@ class DotLottiePlayer extends LitElement {
|
|
|
904
907
|
this._lottieInstance = null;
|
|
905
908
|
this._identifier = this.id || useId('dotlottie');
|
|
906
909
|
this._errorMessage = 'Something went wrong';
|
|
910
|
+
this._isBounce = false;
|
|
907
911
|
this._isDotLottie = false;
|
|
908
912
|
this._playerState = {
|
|
909
913
|
prev: PlayerState.Loading,
|
package/dist/index.d.ts
CHANGED