@aarsteinmedia/dotlottie-player 6.0.2 → 6.0.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/CHANGELOG.md +6 -0
- package/dist/full.js +8 -8
- package/dist/light.js +8 -8
- package/dist/unpkg-full.js +8 -8
- package/dist/unpkg-light.js +8 -8
- package/package.json +18 -18
package/CHANGELOG.md
CHANGED
|
@@ -7,6 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
7
7
|
|
|
8
8
|
Changelog was only added since [3.2.3], so it's not exhaustive. [Please report any missing noteable changes to us](https://github.com/aarsteinmedia/dotlottie-player/issues), and we'll add them promptly.
|
|
9
9
|
|
|
10
|
+
## [6.0.3] - 13-08-2025
|
|
11
|
+
|
|
12
|
+
### Changed
|
|
13
|
+
|
|
14
|
+
- Minor optimizations.
|
|
15
|
+
|
|
10
16
|
## [6.0.2] - 04-07-2025
|
|
11
17
|
|
|
12
18
|
### Changed
|
package/dist/full.js
CHANGED
|
@@ -172,7 +172,7 @@ const tagName = 'dotlottie-player';
|
|
|
172
172
|
slot.innerHTML = '';
|
|
173
173
|
return;
|
|
174
174
|
}
|
|
175
|
-
slot.innerHTML = /* HTML */ `<div class="lottie-controls toolbar ${this.playerState === PlayerState.Error ? 'has-error' : ''}" aria-label="Lottie Animation controls"><button class="togglePlay" data-active="${this.autoplay}" aria-label="Toggle Play/Pause">${playIcon}</button> <button class="stop" data-active="${!this.autoplay}" aria-label="Stop">${stopIcon}</button> <button class="prev" aria-label="Previous animation" hidden="false">${prevIcon}</button> <button class="next" aria-label="Next animation" hidden>${nextIcon}</button><form class="progress-container${this.simple ? ' simple' : ''}"><input type="range" class="seeker" min="0" max="100" step="1" value="${this._seeker.toString()}" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${this._seeker.toString()}" tabindex="0" aria-label="Slider for search"><progress max="100" value="${this._seeker}"></progress></form>${this.simple ? '' : /* HTML */ `<button class="toggleLoop" data-active="${this.loop}" tabindex="0" aria-label="Toggle loop">${loopIcon}</button> <button class="toggleBoomerang" data-active="${this.mode === PlayMode.Bounce}" aria-label="Toggle boomerang" tabindex="0">${boomerangIcon}</button> <button class="toggleSettings" aria-label="Settings" aria-haspopup="true" aria-expanded="${
|
|
175
|
+
slot.innerHTML = /* HTML */ `<div class="lottie-controls toolbar ${this.playerState === PlayerState.Error ? 'has-error' : ''}" aria-label="Lottie Animation controls"><button class="togglePlay" data-active="${this.autoplay}" aria-label="Toggle Play/Pause">${playIcon}</button> <button class="stop" data-active="${!this.autoplay}" aria-label="Stop">${stopIcon}</button> <button class="prev" aria-label="Previous animation" hidden="false">${prevIcon}</button> <button class="next" aria-label="Next animation" hidden>${nextIcon}</button><form class="progress-container${this.simple ? ' simple' : ''}"><input type="range" class="seeker" min="0" max="100" step="1" value="${this._seeker.toString()}" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${this._seeker.toString()}" tabindex="0" aria-label="Slider for search"><progress max="100" value="${this._seeker}"></progress></form>${this.simple ? '' : /* HTML */ `<button class="toggleLoop" data-active="${this.loop}" tabindex="0" aria-label="Toggle loop">${loopIcon}</button> <button class="toggleBoomerang" data-active="${this.mode === PlayMode.Bounce}" aria-label="Toggle boomerang" tabindex="0">${boomerangIcon}</button> <button class="toggleSettings" aria-label="Settings" aria-haspopup="true" aria-expanded="${this._isSettingsOpen}" aria-controls="${this._identifier}-settings">${settingsIcon}</button><div id="${this._identifier}-settings" class="popover" hidden><button class="convert" aria-label="Convert JSON animation to dotLottie format" aria-label="Convert ${this.isDotLottie ? 'dotLottie animation to JSON format' : 'JSON animation to dotLottie format'}" hidden>${convertIcon} ${this.isDotLottie ? 'Convert to JSON' : 'Convert to dotLottie'}</button> <button class="snapshot" aria-label="Download still image">${downloadIcon} Download still image</button></div>`}</div>`;
|
|
176
176
|
const togglePlay = this.shadow.querySelector('.togglePlay');
|
|
177
177
|
if (togglePlay instanceof HTMLButtonElement) {
|
|
178
178
|
togglePlay.onclick = this.togglePlay;
|
|
@@ -350,7 +350,7 @@ const notImplemented = 'Method is not implemented';
|
|
|
350
350
|
}
|
|
351
351
|
get animateOnScroll() {
|
|
352
352
|
const val = this.getAttribute('animateOnScroll');
|
|
353
|
-
return
|
|
353
|
+
return val === 'true' || val === '' || val === '1';
|
|
354
354
|
}
|
|
355
355
|
get animations() {
|
|
356
356
|
return this._animations;
|
|
@@ -362,7 +362,7 @@ const notImplemented = 'Method is not implemented';
|
|
|
362
362
|
}
|
|
363
363
|
get autoplay() {
|
|
364
364
|
const val = this.getAttribute('autoplay');
|
|
365
|
-
return
|
|
365
|
+
return val === 'true' || val === '' || val === '1';
|
|
366
366
|
}
|
|
367
367
|
/**
|
|
368
368
|
* Background color.
|
|
@@ -379,7 +379,7 @@ const notImplemented = 'Method is not implemented';
|
|
|
379
379
|
}
|
|
380
380
|
get controls() {
|
|
381
381
|
const val = this.getAttribute('controls');
|
|
382
|
-
return
|
|
382
|
+
return val === 'true' || val === '' || val === '1';
|
|
383
383
|
}
|
|
384
384
|
/**
|
|
385
385
|
* Number of times to loop.
|
|
@@ -458,12 +458,12 @@ const notImplemented = 'Method is not implemented';
|
|
|
458
458
|
}
|
|
459
459
|
get loop() {
|
|
460
460
|
const val = this.getAttribute('loop');
|
|
461
|
-
return
|
|
461
|
+
return val === 'true' || val === '' || val === '1';
|
|
462
462
|
}
|
|
463
463
|
/**
|
|
464
464
|
* Play mode.
|
|
465
465
|
*/ set mode(value) {
|
|
466
|
-
this.setAttribute('mode', value
|
|
466
|
+
this.setAttribute('mode', value);
|
|
467
467
|
}
|
|
468
468
|
get mode() {
|
|
469
469
|
const val = this.getAttribute('mode');
|
|
@@ -515,7 +515,7 @@ const notImplemented = 'Method is not implemented';
|
|
|
515
515
|
}
|
|
516
516
|
get simple() {
|
|
517
517
|
const val = this.getAttribute('simple');
|
|
518
|
-
return
|
|
518
|
+
return val === 'true' || val === '' || val === '1';
|
|
519
519
|
}
|
|
520
520
|
/**
|
|
521
521
|
* Speed.
|
|
@@ -544,7 +544,7 @@ const notImplemented = 'Method is not implemented';
|
|
|
544
544
|
}
|
|
545
545
|
get subframe() {
|
|
546
546
|
const val = this.getAttribute('subframe');
|
|
547
|
-
return
|
|
547
|
+
return val === 'true' || val === '' || val === '1';
|
|
548
548
|
}
|
|
549
549
|
constructor(){
|
|
550
550
|
super(), this.isLight = false, /**
|
package/dist/light.js
CHANGED
|
@@ -172,7 +172,7 @@ const tagName = 'dotlottie-player';
|
|
|
172
172
|
slot.innerHTML = '';
|
|
173
173
|
return;
|
|
174
174
|
}
|
|
175
|
-
slot.innerHTML = /* HTML */ `<div class="lottie-controls toolbar ${this.playerState === PlayerState.Error ? 'has-error' : ''}" aria-label="Lottie Animation controls"><button class="togglePlay" data-active="${this.autoplay}" aria-label="Toggle Play/Pause">${playIcon}</button> <button class="stop" data-active="${!this.autoplay}" aria-label="Stop">${stopIcon}</button> <button class="prev" aria-label="Previous animation" hidden="false">${prevIcon}</button> <button class="next" aria-label="Next animation" hidden>${nextIcon}</button><form class="progress-container${this.simple ? ' simple' : ''}"><input type="range" class="seeker" min="0" max="100" step="1" value="${this._seeker.toString()}" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${this._seeker.toString()}" tabindex="0" aria-label="Slider for search"><progress max="100" value="${this._seeker}"></progress></form>${this.simple ? '' : /* HTML */ `<button class="toggleLoop" data-active="${this.loop}" tabindex="0" aria-label="Toggle loop">${loopIcon}</button> <button class="toggleBoomerang" data-active="${this.mode === PlayMode.Bounce}" aria-label="Toggle boomerang" tabindex="0">${boomerangIcon}</button> <button class="toggleSettings" aria-label="Settings" aria-haspopup="true" aria-expanded="${
|
|
175
|
+
slot.innerHTML = /* HTML */ `<div class="lottie-controls toolbar ${this.playerState === PlayerState.Error ? 'has-error' : ''}" aria-label="Lottie Animation controls"><button class="togglePlay" data-active="${this.autoplay}" aria-label="Toggle Play/Pause">${playIcon}</button> <button class="stop" data-active="${!this.autoplay}" aria-label="Stop">${stopIcon}</button> <button class="prev" aria-label="Previous animation" hidden="false">${prevIcon}</button> <button class="next" aria-label="Next animation" hidden>${nextIcon}</button><form class="progress-container${this.simple ? ' simple' : ''}"><input type="range" class="seeker" min="0" max="100" step="1" value="${this._seeker.toString()}" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${this._seeker.toString()}" tabindex="0" aria-label="Slider for search"><progress max="100" value="${this._seeker}"></progress></form>${this.simple ? '' : /* HTML */ `<button class="toggleLoop" data-active="${this.loop}" tabindex="0" aria-label="Toggle loop">${loopIcon}</button> <button class="toggleBoomerang" data-active="${this.mode === PlayMode.Bounce}" aria-label="Toggle boomerang" tabindex="0">${boomerangIcon}</button> <button class="toggleSettings" aria-label="Settings" aria-haspopup="true" aria-expanded="${this._isSettingsOpen}" aria-controls="${this._identifier}-settings">${settingsIcon}</button><div id="${this._identifier}-settings" class="popover" hidden><button class="convert" aria-label="Convert JSON animation to dotLottie format" aria-label="Convert ${this.isDotLottie ? 'dotLottie animation to JSON format' : 'JSON animation to dotLottie format'}" hidden>${convertIcon} ${this.isDotLottie ? 'Convert to JSON' : 'Convert to dotLottie'}</button> <button class="snapshot" aria-label="Download still image">${downloadIcon} Download still image</button></div>`}</div>`;
|
|
176
176
|
const togglePlay = this.shadow.querySelector('.togglePlay');
|
|
177
177
|
if (togglePlay instanceof HTMLButtonElement) {
|
|
178
178
|
togglePlay.onclick = this.togglePlay;
|
|
@@ -350,7 +350,7 @@ const notImplemented = 'Method is not implemented';
|
|
|
350
350
|
}
|
|
351
351
|
get animateOnScroll() {
|
|
352
352
|
const val = this.getAttribute('animateOnScroll');
|
|
353
|
-
return
|
|
353
|
+
return val === 'true' || val === '' || val === '1';
|
|
354
354
|
}
|
|
355
355
|
get animations() {
|
|
356
356
|
return this._animations;
|
|
@@ -362,7 +362,7 @@ const notImplemented = 'Method is not implemented';
|
|
|
362
362
|
}
|
|
363
363
|
get autoplay() {
|
|
364
364
|
const val = this.getAttribute('autoplay');
|
|
365
|
-
return
|
|
365
|
+
return val === 'true' || val === '' || val === '1';
|
|
366
366
|
}
|
|
367
367
|
/**
|
|
368
368
|
* Background color.
|
|
@@ -379,7 +379,7 @@ const notImplemented = 'Method is not implemented';
|
|
|
379
379
|
}
|
|
380
380
|
get controls() {
|
|
381
381
|
const val = this.getAttribute('controls');
|
|
382
|
-
return
|
|
382
|
+
return val === 'true' || val === '' || val === '1';
|
|
383
383
|
}
|
|
384
384
|
/**
|
|
385
385
|
* Number of times to loop.
|
|
@@ -458,12 +458,12 @@ const notImplemented = 'Method is not implemented';
|
|
|
458
458
|
}
|
|
459
459
|
get loop() {
|
|
460
460
|
const val = this.getAttribute('loop');
|
|
461
|
-
return
|
|
461
|
+
return val === 'true' || val === '' || val === '1';
|
|
462
462
|
}
|
|
463
463
|
/**
|
|
464
464
|
* Play mode.
|
|
465
465
|
*/ set mode(value) {
|
|
466
|
-
this.setAttribute('mode', value
|
|
466
|
+
this.setAttribute('mode', value);
|
|
467
467
|
}
|
|
468
468
|
get mode() {
|
|
469
469
|
const val = this.getAttribute('mode');
|
|
@@ -515,7 +515,7 @@ const notImplemented = 'Method is not implemented';
|
|
|
515
515
|
}
|
|
516
516
|
get simple() {
|
|
517
517
|
const val = this.getAttribute('simple');
|
|
518
|
-
return
|
|
518
|
+
return val === 'true' || val === '' || val === '1';
|
|
519
519
|
}
|
|
520
520
|
/**
|
|
521
521
|
* Speed.
|
|
@@ -544,7 +544,7 @@ const notImplemented = 'Method is not implemented';
|
|
|
544
544
|
}
|
|
545
545
|
get subframe() {
|
|
546
546
|
const val = this.getAttribute('subframe');
|
|
547
|
-
return
|
|
547
|
+
return val === 'true' || val === '' || val === '1';
|
|
548
548
|
}
|
|
549
549
|
constructor(){
|
|
550
550
|
super(), this.isLight = false, /**
|