@aarsteinmedia/dotlottie-player 5.3.0 → 5.3.1

package/CHANGELOG.md

@@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 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.
 
-## [5.3.0] - 20-06-2025
+## [5.3.1] - 20-06-2025
+
+### Changed
 
 - Fixed bug causing some elements to have wrong placement.
 - Fixed bug with toggling boomerang

package/dist/index.js

@@ -171,7 +171,7 @@ var PlayerState = /*#__PURE__*/ function(PlayerState) {
         slot.innerHTML = '';
         return;
     }
-    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>${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="${Boolean(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" 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>`;
+    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>${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="${Boolean(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>`;
     const togglePlay = this.shadow.querySelector('.togglePlay');
     if (togglePlay instanceof HTMLButtonElement) {
         togglePlay.onclick = this.togglePlay;

package/dist/unpkg.js

@@ -61,7 +61,7 @@
   <svg width="24" height="24" aria-hidden="true" focusable="false">
     <path d="M6 6h12v12H6V6z" />
   </svg>
-`;var nL=((v={}).Contain="contain",v.Cover="cover",v.Fill="fill",v.None="none",v.ScaleDown="scale-down",v),n$=((b={}).Completed="completed",b.Destroyed="destroyed",b.Error="error",b.Frozen="frozen",b.Loading="loading",b.Paused="paused",b.Playing="playing",b.Stopped="stopped",b);function nN(){if(!this.shadow)throw Error("No Shadow Element");let t=this.shadow.querySelector("slot[name=controls]");if(!t)return;if(!this.controls){t.innerHTML="";return}t.innerHTML=`<div class="lottie-controls toolbar ${this.playerState===n$.Error?"has-error":""}" aria-label="Lottie Animation controls"><button class="togglePlay" data-active="${this.autoplay}" aria-label="Toggle Play/Pause">${nT}</button> <button class="stop" data-active="${!this.autoplay}" aria-label="Stop">${nF}</button> <button class="prev" aria-label="Previous animation" hidden>${nD}</button> <button class="next" aria-label="Next animation" hidden>${nA}</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?"":`<button class="toggleLoop" data-active="${this.loop}" tabindex="0" aria-label="Toggle loop">${nM}</button> <button class="toggleBoomerang" data-active="${this.mode===_.Bounce}" aria-label="Toggle boomerang" tabindex="0">${nS}</button> <button class="toggleSettings" aria-label="Settings" aria-haspopup="true" aria-expanded="${!!this._isSettingsOpen}" aria-controls="${this._identifier}-settings">${nI}</button><div id="${this._identifier}-settings" class="popover" hidden><button class="convert" aria-label="Convert JSON animation to dotLottie format" hidden>${nk} ${this.isDotLottie?"Convert to JSON":"Convert to dotLottie"}</button> <button class="snapshot" aria-label="Download still image">${nP} Download still image</button></div>`}</div>`;let e=this.shadow.querySelector(".togglePlay");e instanceof HTMLButtonElement&&(e.onclick=this.togglePlay);let s=this.shadow.querySelector(".stop");s instanceof HTMLButtonElement&&(s.onclick=this.stop);let i=this.shadow.querySelector(".prev");i instanceof HTMLButtonElement&&(i.onclick=this.prev);let r=this.shadow.querySelector(".next");r instanceof HTMLButtonElement&&(r.onclick=this.next);let a=this.shadow.querySelector(".seeker");if(a instanceof HTMLInputElement&&(a.onchange=this._handleSeekChange,a.onmousedown=this._freeze),!this.simple){let t=this.shadow.querySelector(".toggleLoop");t instanceof HTMLButtonElement&&(t.onclick=this.toggleLoop);let e=this.shadow.querySelector(".toggleBoomerang");e instanceof HTMLButtonElement&&(e.onclick=this.toggleBoomerang);let s=this.shadow.querySelector(".convert");s instanceof HTMLButtonElement&&(s.onclick=()=>{nw({isDotLottie:this.isDotLottie,manifest:this.getManifest(),src:this.src||this.source})});let i=this.shadow.querySelector(".snapshot");i instanceof HTMLButtonElement&&(i.onclick=()=>this.snapshot(!0));let r=this.shadow.querySelector(".toggleSettings");r instanceof HTMLButtonElement&&(r.onclick=this._handleSettingsClick,r.onblur=this._handleBlur)}}let nV=`
+`;var nL=((v={}).Contain="contain",v.Cover="cover",v.Fill="fill",v.None="none",v.ScaleDown="scale-down",v),n$=((b={}).Completed="completed",b.Destroyed="destroyed",b.Error="error",b.Frozen="frozen",b.Loading="loading",b.Paused="paused",b.Playing="playing",b.Stopped="stopped",b);function nN(){if(!this.shadow)throw Error("No Shadow Element");let t=this.shadow.querySelector("slot[name=controls]");if(!t)return;if(!this.controls){t.innerHTML="";return}t.innerHTML=`<div class="lottie-controls toolbar ${this.playerState===n$.Error?"has-error":""}" aria-label="Lottie Animation controls"><button class="togglePlay" data-active="${this.autoplay}" aria-label="Toggle Play/Pause">${nT}</button> <button class="stop" data-active="${!this.autoplay}" aria-label="Stop">${nF}</button> <button class="prev" aria-label="Previous animation" hidden>${nD}</button> <button class="next" aria-label="Next animation" hidden>${nA}</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?"":`<button class="toggleLoop" data-active="${this.loop}" tabindex="0" aria-label="Toggle loop">${nM}</button> <button class="toggleBoomerang" data-active="${this.mode===_.Bounce}" aria-label="Toggle boomerang" tabindex="0">${nS}</button> <button class="toggleSettings" aria-label="Settings" aria-haspopup="true" aria-expanded="${!!this._isSettingsOpen}" aria-controls="${this._identifier}-settings">${nI}</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>${nk} ${this.isDotLottie?"Convert to JSON":"Convert to dotLottie"}</button> <button class="snapshot" aria-label="Download still image">${nP} Download still image</button></div>`}</div>`;let e=this.shadow.querySelector(".togglePlay");e instanceof HTMLButtonElement&&(e.onclick=this.togglePlay);let s=this.shadow.querySelector(".stop");s instanceof HTMLButtonElement&&(s.onclick=this.stop);let i=this.shadow.querySelector(".prev");i instanceof HTMLButtonElement&&(i.onclick=this.prev);let r=this.shadow.querySelector(".next");r instanceof HTMLButtonElement&&(r.onclick=this.next);let a=this.shadow.querySelector(".seeker");if(a instanceof HTMLInputElement&&(a.onchange=this._handleSeekChange,a.onmousedown=this._freeze),!this.simple){let t=this.shadow.querySelector(".toggleLoop");t instanceof HTMLButtonElement&&(t.onclick=this.toggleLoop);let e=this.shadow.querySelector(".toggleBoomerang");e instanceof HTMLButtonElement&&(e.onclick=this.toggleBoomerang);let s=this.shadow.querySelector(".convert");s instanceof HTMLButtonElement&&(s.onclick=()=>{nw({isDotLottie:this.isDotLottie,manifest:this.getManifest(),src:this.src||this.source})});let i=this.shadow.querySelector(".snapshot");i instanceof HTMLButtonElement&&(i.onclick=()=>this.snapshot(!0));let r=this.shadow.querySelector(".toggleSettings");r instanceof HTMLButtonElement&&(r.onclick=this._handleSettingsClick,r.onblur=this._handleBlur)}}let nV=`
   <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"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aarsteinmedia/dotlottie-player",
-  "version": "5.3.0",
+  "version": "5.3.1",
   "description": "Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player",
   "type": "module",
   "exports": {
@@ -48,7 +48,8 @@
     "lint:css:fix": "npx stylelint **/*.css --fix"
   },
   "dependencies": {
-    "@aarsteinmedia/lottie-web": "^1.1.5"
+    "@aarsteinmedia/lottie-web": "^1.1.5",
+    "fflate": "^0.8.2"
   },
   "peerDependencies": {
     "@types/react": ">= 16.0.0"