@aarsteinmedia/dotlottie-player 6.3.6 → 6.3.8

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-COmjFUND.js"
           },
           "tagName": "tagName",
           "customElement": true
@@ -78,7 +86,7 @@
           "name": "MouseOut",
           "declaration": {
             "name": "M",
-            "module": "./chunks/DotLottiePlayerBase-BBHa6yP8.js"
+            "module": "./chunks/DotLottiePlayerBase-COmjFUND.js"
           }
         },
         {
@@ -86,7 +94,7 @@
           "name": "PlayerState",
           "declaration": {
             "name": "P",
-            "module": "./chunks/DotLottiePlayerBase-BBHa6yP8.js"
+            "module": "./chunks/DotLottiePlayerBase-COmjFUND.js"
           }
         },
         {

package/dist/canvas.d.ts

@@ -2,8 +2,8 @@ import { RendererType, PreserveAspectRatio } from '@aarsteinmedia/lottie-web/uti
 export { PlayMode, PlayerEvents, 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';
 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-COmjFUND.js';
+export { M as MouseOut, P as PlayerState } from './chunks/DotLottiePlayerBase-COmjFUND.js';
 import '@aarsteinmedia/lottie-web/dotlottie';
 
 /**

package/dist/chunks/{DotLottiePlayerBase-BBHa6yP8.js → DotLottiePlayerBase-COmjFUND.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, PlayerEvents, 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()
     ];
@@ -319,29 +361,17 @@ const pauseIcon = /* HTML */ `
     return mandatory.every((field)=>Object.hasOwn(json, field));
 }, isTouch = ()=>'ontouchstart' in window, frameOutput = (frame)=>((frame ?? 0) + 1).toString().padStart(3, '0');
 
+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 {
@@ -667,17 +697,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 +743,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 +789,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
                 }
             case 'controls':
                 {
-                    this._renderControls();
+                    await this._renderControls();
                     break;
                 }
             case 'direction':
@@ -982,21 +1025,8 @@ 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;
@@ -1066,13 +1096,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();
@@ -1328,6 +1353,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');
     }
@@ -1749,4 +1788,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 };

package/dist/chunks/{DotLottiePlayerBase.d-BSagzEPB.d.ts → DotLottiePlayerBase.d-DaXI0b6M.d.ts}

@@ -7,8 +7,6 @@ declare abstract class PropertyCallbackElement extends HTMLElement {
     propertyChangedCallback(_name: string, _oldValue: unknown, _value: unknown): void;
 }
 
-declare function renderControls(this: DotLottiePlayerBase): void;
-
 declare function renderPlayer(this: DotLottiePlayerBase): Promise<void>;
 
 declare enum MouseOut {
@@ -105,10 +103,11 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
         scrollTimeout: NodeJS.Timeout | null;
     };
     protected _render: typeof renderPlayer;
-    protected _renderControls: typeof renderControls;
     protected _seeker: number;
     private _animations;
+    private _controlsLoadId;
     private _currentAnimation;
+    private _errorLoadId;
     private _intersectionObserver?;
     private _isBounce;
     private _isDotLottie;
@@ -153,6 +152,8 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
     protected _handleClick(): void;
     protected _handleSeekChange({ target }: Event): void;
     protected _handleSettingsClick({ target }: Event): void;
+    protected _renderControls: () => Promise<void>;
+    protected _showError(): Promise<void>;
     protected setOptions(_options: {
         container?: undefined | HTMLElement;
         rendererType: RendererType;

package/dist/chunks/errorScreen-CN8UGB0n.js

@@ -0,0 +1,7 @@
+import { PreserveAspectRatio, namespaceSVG } from '@aarsteinmedia/lottie-web/utils';
+
+function errorScreen(message) {
+    return /* 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">${message}</text></svg></div>`;
+}
+
+export { errorScreen as default };

package/dist/full.d.ts

@@ -1,14 +1,13 @@
 import { RendererType, PreserveAspectRatio } from '@aarsteinmedia/lottie-web/utils';
 export { PlayMode, PlayerEvents, RendererType } from '@aarsteinmedia/lottie-web/utils';
 import * as _aarsteinmedia_lottie_web from '@aarsteinmedia/lottie-web';
-import { AnimationConfiguration, Vector2 } from '@aarsteinmedia/lottie-web';
-import { addAnimation, convert } from '@aarsteinmedia/lottie-web/dotlottie';
-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 { AddAnimationParams, ConvertParams, AnimationConfiguration, Vector2 } from '@aarsteinmedia/lottie-web';
+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 DotLottiePlayer extends DotLottiePlayerBase {
-    addAnimation: typeof addAnimation;
-    convert: typeof convert;
+    addAnimation(params: AddAnimationParams): Promise<_aarsteinmedia_lottie_web.Result>;
+    convert(params: ConvertParams): Promise<_aarsteinmedia_lottie_web.Result>;
     loadAnimation(config: AnimationConfiguration): _aarsteinmedia_lottie_web.AnimationItem;
     protected setOptions({ container, hasAutoplay, hasLoop, initialSegment, preserveAspectRatio, rendererType }: {
         container?: undefined | HTMLElement;

package/dist/full.js

@@ -1,15 +1,23 @@
 import { RendererType, isServer } from '@aarsteinmedia/lottie-web/utils';
 export { PlayMode, PlayerEvents, RendererType } from '@aarsteinmedia/lottie-web/utils';
-import Lottie from '@aarsteinmedia/lottie-web';
-import { addAnimation, convert } from '@aarsteinmedia/lottie-web/dotlottie';
-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 { loadAnimation } from '@aarsteinmedia/lottie-web';
+import { D as DotLottiePlayerBase, l as loadDotLottieTools, t as tagName } from './chunks/DotLottiePlayerBase-COmjFUND.js';
+export { M as MouseOut, P as PlayerState } from './chunks/DotLottiePlayerBase-COmjFUND.js';
+import '@aarsteinmedia/lottie-web/dotlottie';
 
 /**
  * DotLottie Player Web Component.
  */ class DotLottiePlayer extends DotLottiePlayerBase {
+    async addAnimation(params) {
+        const { addAnimation } = await loadDotLottieTools();
+        return await addAnimation(params);
+    }
+    async convert(params) {
+        const { convert } = await loadDotLottieTools();
+        return await convert(params);
+    }
     loadAnimation(config) {
-        return Lottie.loadAnimation(config);
+        return loadAnimation(config);
     }
     setOptions({ container, hasAutoplay, hasLoop, initialSegment, preserveAspectRatio, rendererType }) {
         const options = {
@@ -38,7 +46,6 @@ export { M as MouseOut, P as PlayerState } from './chunks/DotLottiePlayerBase-BB
                 {
                     options.rendererSettings = {
                         ...options.rendererSettings,
-                        // clearCanvas: true,
                         preserveAspectRatio,
                         progressiveLoad: true
                     };
@@ -47,9 +54,6 @@ export { M as MouseOut, P as PlayerState } from './chunks/DotLottiePlayerBase-BB
         }
         return options;
     }
-    constructor(...args){
-        super(...args), this.addAnimation = addAnimation, this.convert = convert;
-    }
 }
 
 /**

package/dist/light.d.ts

@@ -2,8 +2,8 @@ import { RendererType, PreserveAspectRatio } from '@aarsteinmedia/lottie-web/uti
 export { PlayMode, PlayerEvents, 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 DotLottiePlayerLight extends DotLottiePlayerBase {
     get renderer(): RendererType;

package/dist/light.js

@@ -1,8 +1,8 @@
 import { RendererType, isServer } from '@aarsteinmedia/lottie-web/utils';
 export { PlayMode, PlayerEvents, RendererType } from '@aarsteinmedia/lottie-web/utils';
-import Lottie from '@aarsteinmedia/lottie-web/light';
-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 { loadAnimation } from '@aarsteinmedia/lottie-web/light';
+import { D as DotLottiePlayerBase, t as tagName } from './chunks/DotLottiePlayerBase-COmjFUND.js';
+export { M as MouseOut, P as PlayerState } from './chunks/DotLottiePlayerBase-COmjFUND.js';
 import '@aarsteinmedia/lottie-web/dotlottie';
 
 /**
@@ -16,7 +16,7 @@ import '@aarsteinmedia/lottie-web/dotlottie';
         this.isLight = true;
     }
     loadAnimation(config) {
-        return Lottie.loadAnimation(config);
+        return loadAnimation(config);
     }
     setOptions({ container, hasAutoplay, hasLoop, initialSegment, preserveAspectRatio }) {
         const options = {

package/dist/svg.d.ts

@@ -2,8 +2,8 @@ import { RendererType, PreserveAspectRatio } from '@aarsteinmedia/lottie-web/uti
 export { PlayMode, PlayerEvents, 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 DotLottiePlayerSVG extends DotLottiePlayerBase {
     get renderer(): RendererType;

package/dist/svg.js

@@ -1,8 +1,8 @@
 import { RendererType, isServer } from '@aarsteinmedia/lottie-web/utils';
 export { PlayMode, PlayerEvents, RendererType } from '@aarsteinmedia/lottie-web/utils';
-import Lottie from '@aarsteinmedia/lottie-web/svg';
-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 { loadAnimation } from '@aarsteinmedia/lottie-web/svg';
+import { D as DotLottiePlayerBase, t as tagName } from './chunks/DotLottiePlayerBase-COmjFUND.js';
+export { M as MouseOut, P as PlayerState } from './chunks/DotLottiePlayerBase-COmjFUND.js';
 import '@aarsteinmedia/lottie-web/dotlottie';
 
 /**
@@ -16,7 +16,7 @@ import '@aarsteinmedia/lottie-web/dotlottie';
         this.isLight = true;
     }
     loadAnimation(config) {
-        return Lottie.loadAnimation(config);
+        return loadAnimation(config);
     }
     setOptions({ container, hasAutoplay, hasLoop, initialSegment, preserveAspectRatio }) {
         const options = {