@aarsteinmedia/dotlottie-player 6.3.12 → 6.4.0

package/CHANGELOG.md

@@ -7,11 +7,25 @@ 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.
 
+## [6.4.0] - 06-08-2026
+
+### Changed
+
+- Major change in how critical load error are handled – from being relegated to console logs while staying quiet on the front end, to rendering graphic error screen. This behavior can be changed by using the boolean `quiet` attribute.
+
+## [6.3.13] - 05-08-2026
+
+### Changed
+
+- Fixed error causing beziers to be dropped from keyframes.
+- Minor bugrixes.
+
 ## [6.3.11] - 20-07-2026
 
 ### Changed
 
-- Minor bugfixes, including fixing nullish coalescing not covered in brackets. Thanks to [@koloml](https://github.com/koloml)!
+- Fix by [@koloml](https://github.com/koloml) on nullish coalescing not covered correctly in brackets.
+- Minor bugfixes
 
 ## [6.3.6] - 09-06-2026
 

package/README.md

@@ -301,29 +301,30 @@ export default defineNuxtPlugin(({ vueApp }) => {
 
 | Property / Attribute      | Description                                                                                                                   | Type                                     | Default           |
 | ------------------------- | ----------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ----------------- |
-| `animateOnScroll`         | Animate by scrolling                                                                                                          | `boolean`                                | `false`           |
-| `autoplay`                | Play animation on load                                                                                                        | `boolean`                                | `false`           |
-| `background`              | Background color                                                                                                              | `string`                                 | `undefined`       |
-| `controls`                | Show controls                                                                                                                 | `boolean`                                | `false`           |
-| `count`                   | Number of times to loop animation                                                                                             | `number`                                 | `undefined`       |
-| `delay`                   | Delay playback on playOnVisible, in miliseconds                                                                               | `number`                                 | `0`               | 
-| `description`             | Description for screen readers                                                                                                | `string`                                 | `undefined`       |
-| `direction`               | Direction of animation                                                                                                        | `1` \| `-1`                              | `1`               |
-| `dontFreezeOnBlur`        | Whether to freeze playback on window blur. This is default behavior, but can be disabled                                      | `boolean`                                | `1`               |
-| `hover`                   | Whether to play on mouse hover                                                                                                | `boolean`                                | `false`           |
-| `intermission`            | Pause between loop intrations, in miliseconds                                                                                 | `number`                                 | `0`               |
-| `loop`                    | Whether to loop animation                                                                                                     | `boolean`                                | `false`           |
-| `mode`                    | Play mode                                                                                                                     | `normal` \| `bounce`                     | `normal`          |
-| `mouseout`                | Action on mouseout                                                                                                            | `void` \| `stop` \| `pause` \| `reverse` | `stop`            |
-| `objectfit`               | Resizing of animation in container                                                                                            | `contain` \| `cover` \| `fill` \| `none` | `contain`         |
-| `once`                    | Whether, if playOnVisible is true, to play once or anytime animation is in view                                               | `boolean`                                | `false`           |
-| `playOnClick`             | Whether to toggle play on click                                                                                               | `boolean`                                | `false`           |
-| `playOnVisible`           | Play when visible                                                                                                             | `boolean`                                | `false`           |
-| `renderer`                | Renderer to use                                                                                                               | `svg` \| `canvas` \| `html`              | `svg`             |
-| `selector`                | Play on clicked element by id attribute                                                                                       | `string`                                 | `undefined`       |
-| `speed`                   | Animation speed                                                                                                               | `number`                                 | `1`               |
-| `src` _(required)_        | URL to LottieJSON or dotLottie                                                                                                | `string`                                 | `undefined`       |
-| `subframe`                | When enabled this can help to reduce flicker on some animations, especially on Safari and iOS devices.                        | `boolean`                                | `false`           |
+| `animateOnScroll`         | Animate by scrolling.                                                                                                          | `boolean`                                | `false`           |
+| `autoplay`                | Play animation on load.                                                                                                        | `boolean`                                | `false`           |
+| `background`              | Background color.                                                                                                              | `string`                                 | `undefined`       |
+| `controls`                | Show controls.                                                                                                                 | `boolean`                                | `false`           |
+| `count`                   | Number of times to loop animation.                                                                                             | `number`                                 | `undefined`       |
+| `delay`                   | Delay playback on playOnVisible, in miliseconds.                                                                               | `number`                                 | `0`               | 
+| `description`             | Description for screen readers.                                                                                                | `string`                                 | `undefined`       |
+| `direction`               | Direction of animation.                                                                                                        | `1` \| `-1`                              | `1`               |
+| `dontFreezeOnBlur`        | Whether to freeze playback on window blur. This is default behavior, but can be disabled.                                      | `boolean`                                | `1`               |
+| `hover`                   | Whether to play on mouse hover.                                                                                                | `boolean`                                | `false`           |
+| `intermission`            | Pause between loop intrations, in miliseconds.                                                                                 | `number`                                 | `0`               |
+| `loop`                    | Whether to loop animation.                                                                                                     | `boolean`                                | `false`           |
+| `mode`                    | Play mode.                                                                                                                     | `normal` \| `bounce`                     | `normal`          |
+| `mouseout`                | Action on mouseout.                                                                                                            | `void` \| `stop` \| `pause` \| `reverse` | `stop`            |
+| `objectfit`               | Resizing of animation in container.                                                                                            | `contain` \| `cover` \| `fill` \| `none` | `contain`         |
+| `once`                    | Whether, if playOnVisible is true, to play once or anytime animation is in view.                                               | `boolean`                                | `false`           |
+| `playOnClick`             | Whether to toggle play on click.                                                                                               | `boolean`                                | `false`           |
+| `playOnVisible`           | Play when visible.                                                                                                             | `boolean`                                | `false`           |
+| `quiet`                   | Whether to display graphic error screen on critical load errors.                                                               | `boolean`                                | `false`           |
+| `renderer`                | Renderer to use.                                                                                                               | `svg` \| `canvas` \| `html`              | `svg`             |
+| `selector`                | Play on clicked element by id attribute.                                                                                       | `string`                                 | `undefined`       |
+| `speed`                   | Animation speed.                                                                                                               | `number`                                 | `1`               |
+| `src` _(required)_        | URL to LottieJSON or dotLottie.                                                                                                | `string`                                 | `undefined`       |
+| `subframe`                | When enabled this can help to reduce flicker on some animations, especially on Safari and iOS devices.                         | `boolean`                                | `false`           |
 
 ## Methods
 

package/custom-elements.json

@@ -50,7 +50,7 @@
           ],
           "superclass": {
             "name": "DotLottiePlayerBase",
-            "module": "/dist/chunks/DotLottiePlayerBase-ClCZP878.js"
+            "module": "/dist/chunks/DotLottiePlayerBase-DZEPP1-j.js"
           },
           "tagName": "tagName",
           "customElement": true
@@ -86,7 +86,7 @@
           "name": "MouseOut",
           "declaration": {
             "name": "M",
-            "module": "./chunks/DotLottiePlayerBase-ClCZP878.js"
+            "module": "./chunks/DotLottiePlayerBase-DZEPP1-j.js"
           }
         },
         {
@@ -94,7 +94,7 @@
           "name": "PlayerState",
           "declaration": {
             "name": "P",
-            "module": "./chunks/DotLottiePlayerBase-ClCZP878.js"
+            "module": "./chunks/DotLottiePlayerBase-DZEPP1-j.js"
           }
         },
         {

package/dist/canvas.d.ts

@@ -2,8 +2,8 @@ import { RendererType, PreserveAspectRatio } from '@aarsteinmedia/lottie-web/uti
 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-DaXI0b6M.js';
-export { M as MouseOut, P as PlayerState, t as tagName } from './chunks/DotLottiePlayerBase.d-DaXI0b6M.js';
+import { D as DotLottiePlayerBase } from './chunks/DotLottiePlayerBase.d-avku0LBw.js';
+export { M as MouseOut, P as PlayerState, t as tagName } from './chunks/DotLottiePlayerBase.d-avku0LBw.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, PlayerEvent, RendererType } from '@aarsteinmedia/lottie-web/utils';
 import Lottie from '@aarsteinmedia/lottie-web/canvas';
-import { D as DotLottiePlayerBase, t as tagName } from './chunks/DotLottiePlayerBase-ClCZP878.js';
-export { M as MouseOut, P as PlayerState } from './chunks/DotLottiePlayerBase-ClCZP878.js';
+import { D as DotLottiePlayerBase, t as tagName } from './chunks/DotLottiePlayerBase-DZEPP1-j.js';
+export { M as MouseOut, P as PlayerState } from './chunks/DotLottiePlayerBase-DZEPP1-j.js';
 import '@aarsteinmedia/lottie-web/dotlottie';
 
 /**

package/dist/chunks/{DotLottiePlayerBase-ClCZP878.js → DotLottiePlayerBase-DZEPP1-j.js}

@@ -626,6 +626,15 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
         return null;
     }
     /**
+   * Whether to display error screen on load error.
+   */ set quiet(value) {
+        this.setAttribute('quiet', Boolean(value).toString());
+    }
+    get quiet() {
+        const val = this.getAttribute('quiet');
+        return parseHTMLBooleans(val);
+    }
+    /**
    * Renderer to use: svg, canvas or html.
    */ set renderer(value) {
         this.setAttribute('renderer', value);
@@ -905,8 +914,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
                 this.dispatchEvent(new CustomEvent(PlayerEvent.Rendered));
             })();
         } catch (error) {
-            console.error(error);
-            this.dispatchEvent(new CustomEvent(PlayerEvent.Error));
+            void this._handleError(error);
         }
     }
     convert(_params) {
@@ -1009,7 +1017,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
                 ]
             };
             // Clear previous animation, if any
-            this._lottieInstance?.destroy();
+            this._clearPrevious();
             this.playerState = PlayerState.Stopped;
             if (!this.animateOnScroll && // !this.playOnVisible &&
             (this.autoplay || this._multiAnimationSettings[this._currentAnimation]?.autoplay || this.playOnVisible)) {
@@ -1032,10 +1040,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
             }
             await this._renderControls();
         } catch (error) {
-            console.error(error);
-            this._errorMessage = handleErrors(error).message;
-            this.playerState = PlayerState.Error;
-            this.dispatchEvent(new CustomEvent(PlayerEvent.Error));
+            await this._handleError(error);
         }
     }
     loadAnimation(_config) {
@@ -1361,7 +1366,12 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
         if (this.playerState !== PlayerState.Error) {
             return;
         }
-        const figure = this.shadow?.querySelector('.animation');
+        const figure = this.shadow?.querySelector('.animation'), /**
+       * Hide controls if visible.
+       */ controlSlot = this.shadow?.querySelector('slot[name=controls]');
+        if (controlSlot) {
+            controlSlot.innerHTML = '';
+        }
         if (!(figure instanceof HTMLElement)) {
             return;
         }
@@ -1430,6 +1440,13 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
         });
         this._intersectionObserver.observe(this._container);
     }
+    _clearPrevious() {
+        this._lottieInstance?.destroy();
+        const figure = this.shadow?.querySelector('.animation');
+        if (figure) {
+            figure.innerHTML = '';
+        }
+    }
     _complete() {
         if (!this._lottieInstance) {
             return;
@@ -1525,6 +1542,15 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
             rendererType: this.renderer
         });
     }
+    async _handleError(error) {
+        this.playerState = PlayerState.Error;
+        if (!this.quiet) {
+            this._errorMessage = handleErrors(error).message;
+            await this._showError();
+        }
+        this.dispatchEvent(new CustomEvent(PlayerEvent.Error));
+        console.error(error);
+    }
     /**
    * Handle scroll.
    */ _handleScroll() {

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

@@ -77,6 +77,8 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
     get playOnVisible(): HTMLBooleanAttribute;
     set preserveAspectRatio(value: PreserveAspectRatio | null);
     get preserveAspectRatio(): PreserveAspectRatio | null;
+    set quiet(value: HTMLBooleanAttribute);
+    get quiet(): HTMLBooleanAttribute;
     set renderer(value: RendererType);
     get renderer(): RendererType;
     set selector(value: string | null);
@@ -164,12 +166,14 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
     }): AnimationConfiguration;
     private _addEventListeners;
     private _addIntersectionObserver;
+    private _clearPrevious;
     private _complete;
     private _dataFailed;
     private _dataReady;
     private _DOMLoaded;
     private _enterFrame;
     private _getOptions;
+    private _handleError;
     private _handleScroll;
     private _handleWindowBlur;
     private _intersectionObserverFallback;

package/dist/full.d.ts

@@ -2,8 +2,8 @@ import { RendererType, PreserveAspectRatio } from '@aarsteinmedia/lottie-web/uti
 export { PlayMode, PlayerEvent, RendererType } from '@aarsteinmedia/lottie-web/utils';
 import * as _aarsteinmedia_lottie_web from '@aarsteinmedia/lottie-web';
 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';
+import { D as DotLottiePlayerBase } from './chunks/DotLottiePlayerBase.d-avku0LBw.js';
+export { M as MouseOut, P as PlayerState, t as tagName } from './chunks/DotLottiePlayerBase.d-avku0LBw.js';
 
 declare class DotLottiePlayer extends DotLottiePlayerBase {
     addAnimation(params: AddAnimationParams): Promise<_aarsteinmedia_lottie_web.Result>;

package/dist/full.js

@@ -1,8 +1,8 @@
 import { RendererType, isServer } from '@aarsteinmedia/lottie-web/utils';
 export { PlayMode, PlayerEvent, RendererType } from '@aarsteinmedia/lottie-web/utils';
 import { loadAnimation } from '@aarsteinmedia/lottie-web';
-import { D as DotLottiePlayerBase, l as loadDotLottieTools, t as tagName } from './chunks/DotLottiePlayerBase-ClCZP878.js';
-export { M as MouseOut, P as PlayerState } from './chunks/DotLottiePlayerBase-ClCZP878.js';
+import { D as DotLottiePlayerBase, l as loadDotLottieTools, t as tagName } from './chunks/DotLottiePlayerBase-DZEPP1-j.js';
+export { M as MouseOut, P as PlayerState } from './chunks/DotLottiePlayerBase-DZEPP1-j.js';
 import '@aarsteinmedia/lottie-web/dotlottie';
 
 /**

package/dist/light.d.ts

@@ -2,8 +2,8 @@ import { RendererType, PreserveAspectRatio } from '@aarsteinmedia/lottie-web/uti
 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-DaXI0b6M.js';
-export { M as MouseOut, P as PlayerState, t as tagName } from './chunks/DotLottiePlayerBase.d-DaXI0b6M.js';
+import { D as DotLottiePlayerBase } from './chunks/DotLottiePlayerBase.d-avku0LBw.js';
+export { M as MouseOut, P as PlayerState, t as tagName } from './chunks/DotLottiePlayerBase.d-avku0LBw.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, PlayerEvent, RendererType } from '@aarsteinmedia/lottie-web/utils';
 import { loadAnimation } from '@aarsteinmedia/lottie-web/light';
-import { D as DotLottiePlayerBase, t as tagName } from './chunks/DotLottiePlayerBase-ClCZP878.js';
-export { M as MouseOut, P as PlayerState } from './chunks/DotLottiePlayerBase-ClCZP878.js';
+import { D as DotLottiePlayerBase, t as tagName } from './chunks/DotLottiePlayerBase-DZEPP1-j.js';
+export { M as MouseOut, P as PlayerState } from './chunks/DotLottiePlayerBase-DZEPP1-j.js';
 import '@aarsteinmedia/lottie-web/dotlottie';
 
 /**

package/dist/svg.d.ts

@@ -2,8 +2,8 @@ import { RendererType, PreserveAspectRatio } from '@aarsteinmedia/lottie-web/uti
 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-DaXI0b6M.js';
-export { M as MouseOut, P as PlayerState, t as tagName } from './chunks/DotLottiePlayerBase.d-DaXI0b6M.js';
+import { D as DotLottiePlayerBase } from './chunks/DotLottiePlayerBase.d-avku0LBw.js';
+export { M as MouseOut, P as PlayerState, t as tagName } from './chunks/DotLottiePlayerBase.d-avku0LBw.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, PlayerEvent, RendererType } from '@aarsteinmedia/lottie-web/utils';
 import { loadAnimation } from '@aarsteinmedia/lottie-web/svg';
-import { D as DotLottiePlayerBase, t as tagName } from './chunks/DotLottiePlayerBase-ClCZP878.js';
-export { M as MouseOut, P as PlayerState } from './chunks/DotLottiePlayerBase-ClCZP878.js';
+import { D as DotLottiePlayerBase, t as tagName } from './chunks/DotLottiePlayerBase-DZEPP1-j.js';
+export { M as MouseOut, P as PlayerState } from './chunks/DotLottiePlayerBase-DZEPP1-j.js';
 import '@aarsteinmedia/lottie-web/dotlottie';
 
 /**