@aarsteinmedia/dotlottie-player 6.3.6 → 6.3.9

package/custom-elements.json

@@ -13,36 +13,44 @@
           "members": [
             {
               "kind": "method",
-              "name": "loadAnimation",
+              "name": "addAnimation",
               "parameters": [
                 {
-                  "name": "config"
+                  "name": "params"
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "setOptions",
+              "name": "convert",
               "parameters": [
                 {
-                  "name": "{ container, hasAutoplay, hasLoop, initialSegment, preserveAspectRatio, rendererType }"
+                  "name": "params"
                 }
               ]
             },
             {
-              "kind": "field",
-              "name": "addAnimation",
-              "default": "addAnimation"
+              "kind": "method",
+              "name": "loadAnimation",
+              "parameters": [
+                {
+                  "name": "config"
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "convert",
-              "default": "convert"
+              "kind": "method",
+              "name": "setOptions",
+              "parameters": [
+                {
+                  "name": "{ container, hasAutoplay, hasLoop, initialSegment, preserveAspectRatio, rendererType }"
+                }
+              ]
             }
           ],
           "superclass": {
             "name": "DotLottiePlayerBase",
-            "module": "/dist/chunks/DotLottiePlayerBase-BBHa6yP8.js"
+            "module": "/dist/chunks/DotLottiePlayerBase-B4yJibwF.js"
           },
           "tagName": "tagName",
           "customElement": true
@@ -59,9 +67,9 @@
         },
         {
           "kind": "js",
-          "name": "PlayerEvents",
+          "name": "PlayerEvent",
           "declaration": {
-            "name": "PlayerEvents",
+            "name": "PlayerEvent",
             "package": "@aarsteinmedia/lottie-web/utils"
           }
         },
@@ -78,7 +86,7 @@
           "name": "MouseOut",
           "declaration": {
             "name": "M",
-            "module": "./chunks/DotLottiePlayerBase-BBHa6yP8.js"
+            "module": "./chunks/DotLottiePlayerBase-B4yJibwF.js"
           }
         },
         {
@@ -86,7 +94,7 @@
           "name": "PlayerState",
           "declaration": {
             "name": "P",
-            "module": "./chunks/DotLottiePlayerBase-BBHa6yP8.js"
+            "module": "./chunks/DotLottiePlayerBase-B4yJibwF.js"
           }
         },
         {

package/dist/canvas.d.ts

@@ -1,9 +1,9 @@
 import { RendererType, PreserveAspectRatio } from '@aarsteinmedia/lottie-web/utils';
-export { PlayMode, PlayerEvents, RendererType } from '@aarsteinmedia/lottie-web/utils';
+export { PlayMode, PlayerEvent, RendererType } from '@aarsteinmedia/lottie-web/utils';
 import * as _aarsteinmedia_lottie_web from '@aarsteinmedia/lottie-web';
 import { AnimationConfiguration, Vector2 } from '@aarsteinmedia/lottie-web';
-import { D as DotLottiePlayerBase } from './chunks/DotLottiePlayerBase.d-BSagzEPB.js';
-export { M as MouseOut, P as PlayerState, t as tagName } from './chunks/DotLottiePlayerBase.d-BSagzEPB.js';
+import { D as DotLottiePlayerBase } from './chunks/DotLottiePlayerBase.d-DaXI0b6M.js';
+export { M as MouseOut, P as PlayerState, t as tagName } from './chunks/DotLottiePlayerBase.d-DaXI0b6M.js';
 
 declare class DotLottiePlayerCanvas extends DotLottiePlayerBase {
     get renderer(): RendererType;

package/dist/canvas.js

@@ -1,8 +1,8 @@
 import { RendererType, isServer } from '@aarsteinmedia/lottie-web/utils';
-export { PlayMode, PlayerEvents, RendererType } from '@aarsteinmedia/lottie-web/utils';
+export { PlayMode, PlayerEvent, RendererType } from '@aarsteinmedia/lottie-web/utils';
 import Lottie from '@aarsteinmedia/lottie-web/canvas';
-import { D as DotLottiePlayerBase, t as tagName } from './chunks/DotLottiePlayerBase-BBHa6yP8.js';
-export { M as MouseOut, P as PlayerState } from './chunks/DotLottiePlayerBase-BBHa6yP8.js';
+import { D as DotLottiePlayerBase, t as tagName } from './chunks/DotLottiePlayerBase-B4yJibwF.js';
+export { M as MouseOut, P as PlayerState } from './chunks/DotLottiePlayerBase-B4yJibwF.js';
 import '@aarsteinmedia/lottie-web/dotlottie';
 
 /**

package/dist/chunks/{DotLottiePlayerBase-BBHa6yP8.js → DotLottiePlayerBase-B4yJibwF.js}

@@ -1,5 +1,11 @@
-import { convert, getAnimationData } from '@aarsteinmedia/lottie-web/dotlottie';
-import { isServer, PlayMode, PreserveAspectRatio, namespaceSVG, RendererType, createElementID, PlayerEvents, download, getFilename, clamp } from '@aarsteinmedia/lottie-web/utils';
+import { getAnimationData } from '@aarsteinmedia/lottie-web/dotlottie';
+import { isServer, PlayMode, PreserveAspectRatio, RendererType, createElementID, PlayerEvent, download, getFilename, clamp } from '@aarsteinmedia/lottie-web/utils';
+
+let modulePromise$1;
+function loadControlsModule() {
+    modulePromise$1 = modulePromise$1 ?? Promise.resolve().then(function () { return controls; });
+    return modulePromise$1;
+}
 
 /**
  * Credit to: Leonardo Favre https://github.com/leofavre/observed-properties.
@@ -61,6 +67,25 @@ if (isServer) {
 
 var css_248z = "* {\n  box-sizing: border-box;\n}\n\n:host {\n  --lottie-player-toolbar-height: 35px;\n  --lottie-player-toolbar-background-color: #fff;\n  --lottie-player-toolbar-icon-color: #000;\n  --lottie-player-toolbar-icon-hover-color: #000;\n  --lottie-player-toolbar-icon-active-color: #4285f4;\n  --lottie-player-seeker-track-color: rgb(0 0 0 / 20%);\n  --lottie-player-seeker-thumb-color: #4285f4;\n  --lottie-player-seeker-display: block;\n\n  width: 100%;\n  height: 100%;\n\n  &:not([hidden]) {\n    display: block;\n  }\n\n  .main {\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n    width: 100%;\n    margin: 0;\n    padding: 0;\n  }\n\n  .animation {\n    width: 100%;\n    height: 100%;\n    display: flex;\n    margin: 0;\n    padding: 0;\n  }\n\n  [data-controls='true'] .animation {\n    height: calc(100% - 35px);\n  }\n\n  .animation-container {\n    position: relative;\n  }\n\n  .popover {\n    position: absolute;\n    right: 5px;\n    bottom: 40px;\n    background-color: var(--lottie-player-toolbar-background-color);\n    border-radius: 5px;\n    padding: 10px 15px;\n    border: solid 2px var(--lottie-player-toolbar-icon-color);\n    animation: fade-in 0.2s ease-in-out;\n\n    &::before {\n      content: '';\n      right: 10px;\n      border: 7px solid transparent;\n      margin-right: -7px;\n      height: 0;\n      width: 0;\n      position: absolute;\n      pointer-events: none;\n      top: 100%;\n      border-top-color: var(--lottie-player-toolbar-icon-color);\n    }\n  }\n\n  .error {\n    display: flex;\n    margin: auto;\n    justify-content: center;\n    height: 100%;\n    align-items: center;\n\n    & svg {\n      width: 100%;\n      height: auto;\n    }\n  }\n\n  .toolbar {\n    display: flex;\n    place-items: center center;\n    background: var(--lottie-player-toolbar-background-color);\n    margin: 0;\n    height: 35px;\n    padding: 5px;\n    border-radius: 5px;\n    gap: 5px;\n\n    &.has-error {\n      pointer-events: none;\n      opacity: 0.5;\n    }\n\n    & button {\n      cursor: pointer;\n      fill: var(--lottie-player-toolbar-icon-color);\n      color: var(--lottie-player-toolbar-icon-color);\n      background: none;\n      border: 0;\n      padding: 0;\n      outline: 0;\n      height: 100%;\n      margin: 0;\n      align-items: center;\n      gap: 5px;\n      opacity: 0.9;\n\n      &:not([hidden]) {\n        display: flex;\n      }\n\n      &:hover {\n        opacity: 1;\n      }\n\n      &[data-active='true'] {\n        opacity: 1;\n        fill: var(--lottie-player-toolbar-icon-active-color);\n      }\n\n      &:disabled {\n        opacity: 0.5;\n      }\n\n      &:focus {\n        outline: 0;\n      }\n\n      & svg {\n        pointer-events: none;\n\n        & > * {\n          fill: inherit;\n        }\n      }\n\n      &.disabled svg {\n        display: none;\n      }\n    }\n  }\n\n  .progress-container {\n    position: relative;\n    width: 100%;\n\n    &.simple {\n      margin-right: 12px;\n    }\n  }\n\n  & progress {\n    appearance: none;\n    outline: none;\n    position: absolute;\n    width: 100%;\n    height: 5px;\n    border-radius: 3px;\n    border: 0;\n    top: 0;\n    left: 0;\n    margin: 7.5px 0;\n    background-color: var(--lottie-player-seeker-track-color);\n    pointer-events: none;\n\n    &::-webkit-progress-inner-element {\n      border-radius: 3px;\n      overflow: hidden;\n    }\n\n    &::-webkit-slider-runnable-track {\n      background-color: transparent;\n    }\n\n    &::-webkit-progress-value {\n      background-color: var(--lottie-player-seeker-thumb-color);\n    }\n  }\n\n  .seeker {\n    appearance: none;\n    outline: none;\n    width: 100%;\n    height: 20px;\n    border-radius: 3px;\n    border: 0;\n    cursor: pointer;\n    background-color: transparent;\n\n    display: var(--lottie-player-seeker-display);\n    color: var(--lottie-player-seeker-thumb-color);\n    margin: 0;\n    padding: 7.5px 0;\n    position: relative;\n    z-index: 1;\n\n    &::-webkit-slider-runnable-track,\n    &::-webkit-slider-thumb {\n      appearance: none;\n      outline: none;\n    }\n\n    &::-webkit-slider-thumb {\n      height: 15px;\n      width: 15px;\n      border-radius: 50%;\n      border: 0;\n      background-color: var(--lottie-player-seeker-thumb-color);\n      cursor: pointer;\n      -webkit-transition: transform 0.2s ease-in-out;\n      transition: transform 0.2s ease-in-out;\n      transform: scale(0);\n    }\n\n    &:hover::-webkit-slider-thumb,\n    &:focus::-webkit-slider-thumb {\n      transform: scale(1);\n    }\n\n    &::-moz-range-progress {\n      background-color: var(--lottie-player-seeker-thumb-color);\n      height: 5px;\n      border-radius: 3px;\n    }\n\n    &::-moz-range-thumb {\n      height: 15px;\n      width: 15px;\n      border-radius: 50%;\n      background-color: var(--lottie-player-seeker-thumb-color);\n      border: 0;\n      cursor: pointer;\n      -moz-transition: transform 0.2s ease-in-out;\n      transition: transform 0.2s ease-in-out;\n      transform: scale(0);\n    }\n\n    &:hover::-moz-range-thumb,\n    &:focus::-moz-range-thumb {\n      transform: scale(1);\n    }\n\n    &::-ms-track {\n      width: 100%;\n      height: 5px;\n      cursor: pointer;\n      background: transparent;\n      border-color: transparent;\n      color: transparent;\n    }\n\n    &::-ms-fill-upper {\n      background: var(--lottie-player-seeker-track-color);\n      border-radius: 3px;\n    }\n\n    &::-ms-fill-lower {\n      background-color: var(--lottie-player-seeker-thumb-color);\n      border-radius: 3px;\n    }\n\n    &::-ms-thumb {\n      border: 0;\n      height: 15px;\n      width: 15px;\n      border-radius: 50%;\n      background: var(--lottie-player-seeker-thumb-color);\n      cursor: pointer;\n      -ms-transition: transform 0.2s ease-in-out;\n      transition: transform 0.2s ease-in-out;\n      transform: scale(0);\n    }\n\n    &:hover::-ms-thumb {\n      transform: scale(1);\n    }\n\n    &:focus {\n      &::-ms-thumb {\n        transform: scale(1);\n      }\n\n      &::-ms-fill-lower,\n      &::-ms-fill-upper {\n        background: var(--lottie-player-seeker-track-color);\n      }\n    }\n  }\n\n  & *::-moz-progress-bar {\n    background-color: var(--lottie-player-seeker-thumb-color);\n  }\n}\n\n@keyframes fade-in {\n  0% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 1;\n  }\n}\n\n@media (prefers-color-scheme: dark) {\n  :host {\n    --lottie-player-toolbar-background-color: #000;\n    --lottie-player-toolbar-icon-color: #fff;\n    --lottie-player-toolbar-icon-hover-color: #fff;\n    --lottie-player-seeker-track-color: rgb(255 255 255 / 60%);\n  }\n}\n";
 
+let dotlottieTools = null, loadPromise = null;
+function loadDotLottieTools() {
+    if (dotlottieTools) {
+        return Promise.resolve(dotlottieTools);
+    }
+    loadPromise = loadPromise ?? (async ()=>{
+        const { addAnimation, convert } = await import('@aarsteinmedia/lottie-web/dotlottie');
+        dotlottieTools = {
+            addAnimation,
+            convert
+        };
+        return {
+            addAnimation,
+            convert
+        };
+    })();
+    return loadPromise;
+}
+
 const boomerangIcon = /* HTML */ `
   <svg width="24" height="24" aria-hidden="true" focusable="false">
     <path
@@ -109,6 +134,14 @@ const nextIcon = /* HTML */ `
   </svg>
 `;
 
+const pauseIcon = /* 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>
+`;
+
 const playIcon = /* HTML */ `
   <svg width="24" height="24" aria-hidden="true" focusable="false">
     <path d="M8.016 5.016L18.985 12 8.016 18.984V5.015z" />
@@ -216,12 +249,18 @@ const tagName = 'dotlottie-player';
         }
         const convertButton = this.shadow.querySelector('.convert');
         if (convertButton instanceof HTMLButtonElement) {
-            convertButton.onclick = ()=>{
-                void convert({
-                    isDotLottie: this.isDotLottie,
-                    manifest: this.getManifest(),
-                    src: this.src || this.source
-                });
+            convertButton.onclick = async ()=>{
+                convertButton.disabled = true;
+                try {
+                    const { convert } = await loadDotLottieTools();
+                    await convert({
+                        isDotLottie: this.isDotLottie,
+                        manifest: this.getManifest(),
+                        src: this.src || this.source
+                    });
+                } finally{
+                    convertButton.disabled = false;
+                }
             };
         }
         const snapshot = this.shadow.querySelector('.snapshot');
@@ -235,14 +274,17 @@ const tagName = 'dotlottie-player';
         }
     }
 }
+function updatePlayPauseButton(togglePlay, state) {
+    const isActive = state === PlayerState.Playing || state === PlayerState.Paused;
+    togglePlay.dataset.active = isActive.toString();
+    togglePlay.innerHTML = state === PlayerState.Playing ? pauseIcon : playIcon;
+}
 
-const pauseIcon = /* 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>
-`;
+var controls = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  default: renderControls,
+  updatePlayPauseButton: updatePlayPauseButton
+});
 
 /**
  * Render Player.
@@ -252,7 +294,7 @@ const pauseIcon = /* HTML */ `
     }
     this.template.innerHTML = /* HTML */ `<div class="animation-container main" data-controls="${this.controls ?? false}" lang="${this.description ? document.documentElement.lang : 'en'}" data-loaded="${this._playerState.loaded}"><figure class="animation" style="background:${this.background}" ${this.description ? /* HTML */ `
             aria-label="${this.description}"
-          ` : ''}>${this.playerState === PlayerState.Error ? /* HTML */ `<div class="error"><svg preserveAspectRatio="${PreserveAspectRatio.Cover}" xmlns="${namespaceSVG}" width="1920" height="1080" viewBox="0 0 1920 1080" style="white-space:preserve"><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>` : ''}</figure><slot name="controls"></slot></div>`;
+          ` : ''}></figure><slot name="controls"></slot></div>`;
     this.shadow.adoptedStyleSheets = [
         await DotLottiePlayerBase.styles()
     ];
@@ -317,31 +359,23 @@ const pauseIcon = /* HTML */ `
         'h'
     ];
     return mandatory.every((field)=>Object.hasOwn(json, field));
-}, isTouch = ()=>'ontouchstart' in window, frameOutput = (frame)=>((frame ?? 0) + 1).toString().padStart(3, '0');
+}, isTouch = ()=>'ontouchstart' in window, frameOutput = (frame)=>((frame ?? 0) + 1).toString().padStart(3, '0'), parseHTMLBooleans = (val)=>val !== null && [
+        'true',
+        '',
+        '1'
+    ].includes(val);
+
+let modulePromise = null;
+function loadErrorModule() {
+    modulePromise = modulePromise ?? import('./errorScreen-CN8UGB0n.js');
+    return modulePromise;
+}
 
 const notImplemented = 'Method is not implemented', getStyles = async ()=>{
     const styleSheet = new CSSStyleSheet();
     await styleSheet.replace(css_248z);
     return styleSheet;
 };
-// export interface DotLottieAnimationInstance {
-//   addEventListener: (name: string, callback: (...args: any[]) => void) => void
-//   autoplay?: boolean
-//   currentFrame: number
-//   destroy: () => void
-//   goToAndPlay: (value: number, isFrame?: boolean) => void
-//   goToAndStop: (value: number, isFrame?: boolean) => void
-//   pause: () => void
-//   play: () => void
-//   playDirection: number
-//   removeEventListener: (name: string, callback: (...args: any[]) => void) => void
-//   setDirection: (direction: AnimationDirection) => void
-//   setLoop: (loop: boolean) => void
-//   setSpeed: (speed: number) => void
-//   setSubframe: (useSubframe: boolean) => void
-//   stop: () => void
-//   totalFrames: number
-// }
 /**
  * DotLottie Player Web Component.
  */ class DotLottiePlayerBase extends PropertyCallbackElement {
@@ -385,7 +419,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
     }
     get animateOnScroll() {
         const val = this.getAttribute('animateOnScroll');
-        return val === 'true' || val === '' || val === '1';
+        return parseHTMLBooleans(val);
     }
     get animations() {
         return this._animations;
@@ -397,7 +431,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
     }
     get autoplay() {
         const val = this.getAttribute('autoplay');
-        return val === 'true' || val === '' || val === '1';
+        return parseHTMLBooleans(val);
     }
     /**
    * Background color.
@@ -414,7 +448,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
     }
     get controls() {
         const val = this.getAttribute('controls');
-        return val === 'true' || val === '' || val === '1';
+        return parseHTMLBooleans(val);
     }
     /**
    * Number of times to loop.
@@ -472,7 +506,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
     }
     get dontFreezeOnBlur() {
         const val = this.getAttribute('dontFreezeOnBlur');
-        return val === 'true' || val === '' || val === '1';
+        return parseHTMLBooleans(val);
     }
     /**
    * Whether to play on mouseover.
@@ -481,7 +515,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
     }
     get hover() {
         const val = this.getAttribute('hover');
-        return val === 'true' || val === '' || val === '1';
+        return parseHTMLBooleans(val);
     }
     /**
    * Pause between loop intrations, in miliseconds.
@@ -505,7 +539,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
     }
     get loop() {
         const val = this.getAttribute('loop');
-        return val === 'true' || val === '' || val === '1';
+        return parseHTMLBooleans(val);
     }
     /**
    * Play mode.
@@ -559,7 +593,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
     }
     get once() {
         const val = this.getAttribute('once');
-        return val === 'true' || val === '' || val === '1';
+        return parseHTMLBooleans(val);
     }
     /**
    * Whether to toggle play on click.
@@ -568,7 +602,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
     }
     get playOnClick() {
         const val = this.getAttribute('playOnClick');
-        return val === 'true' || val === '' || val === '1';
+        return parseHTMLBooleans(val);
     }
     /**
    * Play when visible.
@@ -577,7 +611,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
     }
     get playOnVisible() {
         const val = this.getAttribute('playOnVisible');
-        return val === 'true' || val === '' || val === '1';
+        return parseHTMLBooleans(val);
     }
     /**
    * Resizing to container (Deprecated).
@@ -622,7 +656,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
     }
     get simple() {
         const val = this.getAttribute('simple');
-        return val === 'true' || val === '' || val === '1';
+        return parseHTMLBooleans(val);
     }
     /**
    * Speed.
@@ -651,7 +685,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
     }
     get subframe() {
         const val = this.getAttribute('subframe');
-        return val === 'true' || val === '' || val === '1';
+        return parseHTMLBooleans(val);
     }
     constructor(){
         super(), this.isLight = false, /**
@@ -667,17 +701,31 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
             scrollTimeout: null,
             scrollY: 0,
             visible: false
-        }, this._render = renderPlayer, this._renderControls = renderControls, /**
+        }, this._render = renderPlayer, /**
    * Seeker.
    */ this._seeker = 0, /**
    * This is included in watched properties,
    * so that next-button will show up
    * on load, if controls are visible.
-   */ this._animations = [], /**
+   */ this._animations = [], this._controlsLoadId = 0, /**
    * Which animation to show, if several.
-   */ this._currentAnimation = 0, this._isBounce = false, this._isDotLottie = false, this._lottieInstance = null, /**
+   */ this._currentAnimation = 0, this._errorLoadId = 0, this._isBounce = false, this._isDotLottie = false, this._lottieInstance = null, /**
    * Multi-animation settings.
-   */ this._multiAnimationSettings = [];
+   */ this._multiAnimationSettings = [], this._renderControls = async ()=>{
+            const slot = this.shadow?.querySelector('slot[name=controls]');
+            if (!slot) {
+                return;
+            }
+            if (!this.controls) {
+                slot.innerHTML = '';
+                return;
+            }
+            const loadId = ++this._controlsLoadId, { default: renderControls } = await loadControlsModule();
+            if (loadId !== this._controlsLoadId) {
+                return;
+            }
+            renderControls.call(this);
+        };
         this._complete = this._complete.bind(this);
         this._dataFailed = this._dataFailed.bind(this);
         this._dataReady = this._dataReady.bind(this);
@@ -699,7 +747,6 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
         this.stop = this.stop.bind(this);
         this.prev = this.prev.bind(this);
         this.next = this.next.bind(this);
-        this._renderControls = this._renderControls.bind(this);
         this.snapshot = this.snapshot.bind(this);
         this.toggleLoop = this.toggleLoop.bind(this);
         this.toggleBoomerang = this.toggleBoomerang.bind(this);
@@ -746,7 +793,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
                 }
             case 'controls':
                 {
-                    this._renderControls();
+                    await this._renderControls();
                     break;
                 }
             case 'direction':
@@ -855,11 +902,11 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
                 }
                 // Add intersection observer for detecting component being out-of-view.
                 this._addIntersectionObserver();
-                this.dispatchEvent(new CustomEvent(PlayerEvents.Rendered));
+                this.dispatchEvent(new CustomEvent(PlayerEvent.Rendered));
             })();
         } catch (error) {
             console.error(error);
-            this.dispatchEvent(new CustomEvent(PlayerEvents.Error));
+            this.dispatchEvent(new CustomEvent(PlayerEvent.Error));
         }
     }
     convert(_params) {
@@ -874,7 +921,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
         this.playerState = PlayerState.Destroyed;
         this._lottieInstance.destroy();
         this._lottieInstance = null;
-        this.dispatchEvent(new CustomEvent(PlayerEvents.Destroyed));
+        this.dispatchEvent(new CustomEvent(PlayerEvent.Destroyed));
         this.remove();
         document.removeEventListener('visibilitychange', this._onVisibilityChange);
     }
@@ -982,26 +1029,13 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
             // Start playing if autoplay is enabled
             if ((this.autoplay || this.animateOnScroll || this.playOnVisible) && this.direction === -1) {
                 this.seek('99%');
-            // if (!('IntersectionObserver' in window)) {
-            //   if (!this.animateOnScroll) {
-            //     this.play()
-            //   }
-            //   this._playerState.visible = true
-            // }
-            // this._addIntersectionObserver()
-            }
-            this._renderControls();
-            if (this.autoplay || this.playOnVisible) {
-                const togglePlay = this.shadow?.querySelector('.togglePlay');
-                if (togglePlay) {
-                    togglePlay.innerHTML = pauseIcon;
-                }
             }
+            await this._renderControls();
         } catch (error) {
             console.error(error);
             this._errorMessage = handleErrors(error).message;
             this.playerState = PlayerState.Error;
-            this.dispatchEvent(new CustomEvent(PlayerEvents.Error));
+            this.dispatchEvent(new CustomEvent(PlayerEvent.Error));
         }
     }
     loadAnimation(_config) {
@@ -1023,7 +1057,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
         let hasError = false;
         try {
             this._lottieInstance.pause();
-            this.dispatchEvent(new CustomEvent(PlayerEvents.Pause));
+            this.dispatchEvent(new CustomEvent(PlayerEvent.Pause));
         } catch (error) {
             hasError = true;
             console.error(error);
@@ -1041,7 +1075,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
         let hasError = false;
         try {
             this._lottieInstance.play();
-            this.dispatchEvent(new CustomEvent(PlayerEvents.Play));
+            this.dispatchEvent(new CustomEvent(PlayerEvent.Play));
         } catch (error) {
             hasError = true;
             console.error(error);
@@ -1066,13 +1100,8 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
             return;
         }
         if (name === 'playerState') {
-            togglePlay.dataset.active = (value === PlayerState.Playing || value === PlayerState.Paused).toString();
+            updatePlayPauseButton(togglePlay, value);
             stopButton.dataset.active = (value === PlayerState.Stopped).toString();
-            if (value === PlayerState.Playing) {
-                togglePlay.innerHTML = pauseIcon;
-            } else {
-                togglePlay.innerHTML = playIcon;
-            }
         }
         if (name === '_seeker' && typeof value === 'number') {
             seeker.value = value.toString();
@@ -1219,7 +1248,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
         this._playerState.count = 0;
         try {
             this._lottieInstance.stop();
-            this.dispatchEvent(new CustomEvent(PlayerEvents.Stop));
+            this.dispatchEvent(new CustomEvent(PlayerEvent.Stop));
         } finally{
             this.playerState = PlayerState.Stopped;
         }
@@ -1291,7 +1320,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
         this._playerState.prev = this.playerState;
         try {
             this._lottieInstance.pause();
-            this.dispatchEvent(new CustomEvent(PlayerEvents.Freeze));
+            this.dispatchEvent(new CustomEvent(PlayerEvent.Freeze));
         } finally{
             this.playerState = PlayerState.Frozen;
         }
@@ -1328,6 +1357,20 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
             target.focus();
         }
     }
+    async _showError() {
+        if (this.playerState !== PlayerState.Error) {
+            return;
+        }
+        const figure = this.shadow?.querySelector('.animation');
+        if (!(figure instanceof HTMLElement)) {
+            return;
+        }
+        const loadId = ++this._errorLoadId, { default: errorScreen } = await loadErrorModule();
+        if (loadId !== this._errorLoadId) {
+            return;
+        }
+        figure.innerHTML = errorScreen(this._errorMessage);
+    }
     setOptions(_options) {
         throw new Error('Method not implemented');
     }
@@ -1405,7 +1448,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
         const { currentFrame, totalFrames } = this._lottieInstance;
         this._seeker = Math.round(currentFrame / totalFrames * 100);
         this.playerState = PlayerState.Completed;
-        this.dispatchEvent(new CustomEvent(PlayerEvents.Complete, {
+        this.dispatchEvent(new CustomEvent(PlayerEvent.Complete, {
             detail: {
                 frame: currentFrame,
                 seeker: this._seeker
@@ -1414,14 +1457,14 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
     }
     _dataFailed() {
         this.playerState = PlayerState.Error;
-        this.dispatchEvent(new CustomEvent(PlayerEvents.Error));
+        this.dispatchEvent(new CustomEvent(PlayerEvent.Error));
     }
     _dataReady() {
-        this.dispatchEvent(new CustomEvent(PlayerEvents.Load));
+        this.dispatchEvent(new CustomEvent(PlayerEvent.Load));
     }
     _DOMLoaded() {
         this._playerState.loaded = true;
-        this.dispatchEvent(new CustomEvent(PlayerEvents.Ready));
+        this.dispatchEvent(new CustomEvent(PlayerEvent.Ready));
     }
     _enterFrame() {
         if (!this._lottieInstance) {
@@ -1429,7 +1472,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
         }
         const { currentFrame, totalFrames } = this._lottieInstance;
         this._seeker = Math.round(currentFrame / totalFrames * 100);
-        this.dispatchEvent(new CustomEvent(PlayerEvents.Frame, {
+        this.dispatchEvent(new CustomEvent(PlayerEvent.Frame, {
             detail: {
                 frame: currentFrame,
                 seeker: this._seeker
@@ -1561,11 +1604,11 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
             if (this._playerState.count >= this.count) {
                 this.setLoop(false);
                 this.playerState = PlayerState.Completed;
-                this.dispatchEvent(new CustomEvent(PlayerEvents.Complete));
+                this.dispatchEvent(new CustomEvent(PlayerEvent.Complete));
                 return;
             }
         }
-        this.dispatchEvent(new CustomEvent(PlayerEvents.Loop));
+        this.dispatchEvent(new CustomEvent(PlayerEvent.Loop));
         if (this._isBounce) {
             this._lottieInstance.goToAndStop(playDirection === -1 ? inPoint : outPoint * 0.99, true);
             this._lottieInstance.setDirection(playDirection * -1);
@@ -1670,7 +1713,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
             // Remove event listeners to new Lottie instance, and add new
             this._removeEventListeners();
             this._addEventListeners();
-            this.dispatchEvent(new CustomEvent(isPrevious ? PlayerEvents.Previous : PlayerEvents.Next));
+            this.dispatchEvent(new CustomEvent(isPrevious ? PlayerEvent.Previous : PlayerEvent.Next));
             if (this._multiAnimationSettings[this._currentAnimation]?.autoplay ?? this.autoplay) {
                 if (this.animateOnScroll) {
                     this._lottieInstance.goToAndStop(0, true);
@@ -1686,7 +1729,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
         } catch (error) {
             this._errorMessage = handleErrors(error).message;
             this.playerState = PlayerState.Error;
-            this.dispatchEvent(new CustomEvent(PlayerEvents.Error));
+            this.dispatchEvent(new CustomEvent(PlayerEvent.Error));
         }
     }
     /**
@@ -1694,12 +1737,12 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
    */ _toggleEventListeners(action) {
         const method = action === 'add' ? 'addEventListener' : 'removeEventListener';
         if (this._lottieInstance) {
-            this._lottieInstance[method]('enterFrame', this._enterFrame);
-            this._lottieInstance[method]('complete', this._complete);
-            this._lottieInstance[method]('loopComplete', this._loopComplete);
-            this._lottieInstance[method]('DOMLoaded', this._DOMLoaded);
-            this._lottieInstance[method]('data_ready', this._dataReady);
-            this._lottieInstance[method]('data_failed', this._dataFailed);
+            this._lottieInstance[method](PlayerEvent.EnterFrame, this._enterFrame);
+            this._lottieInstance[method](PlayerEvent.Complete, this._complete);
+            this._lottieInstance[method](PlayerEvent.LoopComplete, this._loopComplete);
+            this._lottieInstance[method](PlayerEvent.DOMLoaded, this._DOMLoaded);
+            this._lottieInstance[method](PlayerEvent.DataReady, this._dataReady);
+            this._lottieInstance[method](PlayerEvent.DataFailed, this._dataFailed);
         }
         if (this.selector) {
             const selector = document.getElementById(this.selector);
@@ -1749,4 +1792,4 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
     }
 }
 
-export { DotLottiePlayerBase as D, MouseOut as M, PlayerState as P, tagName as t };
+export { DotLottiePlayerBase as D, MouseOut as M, PlayerState as P, loadDotLottieTools as l, tagName as t };