@aarsteinmedia/dotlottie-player 6.0.1 → 6.0.3

package/CHANGELOG.md

@@ -7,6 +7,18 @@ 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.0.3] - 13-08-2025
+
+### Changed
+
+- Minor optimizations.
+
+## [6.0.2] - 04-07-2025
+
+### Changed
+
+- Added new attribute: `dontFreezeOnBlur`. This disables default behavior where animation is frozen on window blur.
+
 ## [6.0.1] - 22-06-2025
 
 ### Changed

package/README.md

@@ -2,13 +2,13 @@
 
 ![Awesome Vector Animations](/.github/readmeBanner.svg)
 
-We proudly claim this to be the most versatile, lightweight and efficient Lottie Player Web Component available. It's compatible with server side rendering, and completely framework agnostic.
+We proudly claim this to be the most versatile, lightweight, and efficient Lottie Player Web Component available. It's compatible with server-side rendering and completely framework-agnostic.
 
-If you only need to render animations as SVGs, don't use any SVG effects like blur or drop shadow, don't use [Expressions](https://helpx.adobe.com/after-effects/using/expression-basics.html), and don't need to be able convert or combine animations on the fly – you can access a light version of this package by importing `@aarsteinmedia/dotlottie-player/light`.
+If you only need to render animations as SVGs, don’t use any SVG effects like blur or drop shadow, don’t use [Expressions](https://helpx.adobe.com/after-effects/using/expression-basics.html), and don’t need to convert or combine animations on the fly — you can use a lighter version of this package by importing `@aarsteinmedia/dotlottie-player/light`.
 
 ## Demo
 
-Here is [a demo](https://www.aarstein.media/en/dotlottie-player), running on Next.js 15 using TypeScript.
+Here is [a demo](https://www.aarstein.media/en/dotlottie-player), running on Next.js 15 with TypeScript.
 
 ## Installation
 
@@ -16,53 +16,66 @@ Here is [a demo](https://www.aarstein.media/en/dotlottie-player), running on Nex
 
 - Import from CDN:
   - Full version:
-  ```html
-  <script src="https://unpkg.com/@aarsteinmedia/dotlottie-player@latest/dist/unpkg-full.js"></script>
-  ```
+    ```html
+    <script src="https://unpkg.com/@aarsteinmedia/dotlottie-player@latest/dist/unpkg-full.js"></script>
+    ```
   - Light version:
-  ```html
-  <script src="https://unpkg.com/@aarsteinmedia/dotlottie-player@latest/dist/unpkg-light.js"></script>
-  ```
+    ```html
+    <script src="https://unpkg.com/@aarsteinmedia/dotlottie-player@latest/dist/unpkg-light.js"></script>
+    ```
 
-- Import from node_modules directory:
+- Import from `node_modules`:
   - Full version:
-  ```html
-  <script src="/node_modules/@aarsteinmedia/dotlottie-player/dist/unpkg-full.js"></script>
-  ```
-  - Light Version:
-  <script src="/node_modules/@aarsteinmedia/dotlottie-player/dist/unpkg-light.js"></script>
+    ```html
+    <script src="/node_modules/@aarsteinmedia/dotlottie-player/dist/unpkg-full.js"></script>
+    ```
+  - Light version:
+    ```html
+    <script src="/node_modules/@aarsteinmedia/dotlottie-player/dist/unpkg-light.js"></script>
+    ```
 
 ### In JavaScript or TypeScript
 
-1. Install using npm or yarn:
+1. Install using npm, pnpm, or yarn:
 
-```shell
-npm install --save @aarsteinmedia/dotlottie-player
-```
+    ```bash
+    pnpm add @aarsteinmedia/dotlottie-player
+    ```
 
 2. Import in your app:
 
-```javascript
-import '@aarsteinmedia/dotlottie-player'
-```
+    ```js
+    import '@aarsteinmedia/dotlottie-player'
+    ```
 
-or:
+    Or for the light version:
 
-```javascript
-import '@aarsteinmedia/dotlottie-player/light'
+    ```js
+    import '@aarsteinmedia/dotlottie-player/light'
+    ```
+
+Because this is a Web Component, you're adding it to the global scope of your web app. Unlike modular components, it should only be imported once – preferably early in your app lifecycle.
+
+If you're using TypeScript and want to import the component type, do it modularly in addition to the global import:
+
+```ts
+import '@aarsteinmedia/dotlottie-player' // Do this once globally.
+import type DotLottiePlayer from '@aarsteinmedia/dotlottie-player' // Do this per component that needs it.
 ```
 
+⚠️ Note that this pattern may provoke linter errors, such as `import/no-duplicates`.
+
 ## Usage
 
-Add the element `dotlottie-player` to your markup and point `src` to a Lottie animation of your choice.
+Add the `dotlottie-player` element to your markup and point the `src` to a Lottie animation of your choice:
 
 ```html
 <dotlottie-player
-  id="find-me"
   autoplay
   controls
   subframe
   loop
+  id="find-me"
   src="https://storage.googleapis.com/aarsteinmedia/am.lottie"
   style="width: 320px; margin: auto;"
 >
@@ -77,13 +90,15 @@ player?.load('https://storage.googleapis.com/aarsteinmedia/am.lottie')
 ```
 
 ### Convert to dotLottie
-If you have a Lottie JSON animation and want to convert it to a dotLottie – to leverage compression, combine multiple animations in one file and keep your file library tidy with a discrete file extension –  you can do so with the `convert()` method. This will trigger a download in the browser. If you have `controls` set to visible there's a convert button in the context menu on the right hand side.
+If you have a Lottie JSON animation and want to convert it to a dotLottie file – to leverage compression, combine multiple animations, and maintain a tidy file library – you can use the `convert()` method. This will trigger a browser download.
+
+If `controls` are visible, there’s also a convert button in the context menu on the right-hand side.
 
 ### Convert to JSON
-If you're debugging a dotLottie animation – for instance if expressions aren't working as expected, you can convert it to JSON, either by usin the `convert()` method, or — if `controls` are set to visible – a button in the context menu on the right hand side.
+If you're debugging a dotLottie animation (e.g., expressions aren’t working as expected), you can convert it to JSON either using the `convert()` method or via the convert button if `controls` are enabled.
 
 ### Combine animations
-If you want to combine multiple animations in one single dotLottie file you can use the `addAnimation` method. This will trigger a download in the browser. The source files can be either dotLottie or JSON, and the output file will will always be a dotLottie.
+To combine multiple animations into a single dotLottie file, use the `addAnimation()` method. This also triggers a browser download. Source files can be either dotLottie or JSON, and the output will always be dotLottie:
 
 ```javascript
 const lottiePlayer = document.querySelector('#find-me')
@@ -95,9 +110,9 @@ const lottiePlayer = document.querySelector('#find-me')
 }()) 
 ```
 
-You can also use this method independent of any Lottie player on the page, as long as the script is loaded, of course.
+You can also use this method without any `<dotlottie-player>` on the page. As long as the script is loaded, `dotLottiePlayer()` is available as a global method.
 
-```javascript
+```js
 (async () => {
   await dotLottiePlayer().addAnimation([
     { id: 'animation_1', url: '/path/to/animation_1.lottie' },
@@ -106,20 +121,20 @@ You can also use this method independent of any Lottie player on the page, as lo
 }())
 ```
 
-The new file wil automatically load the first animation when initialized. You can toggle between animations with the `next()` and `prev()` methods, or you can use the navigation buttons in the controls.
+The new file will automatically load the first animation when initialized. You can toggle between animations using the `next()` and `prev()` methods, or the navigation buttons in the controls.
 
-Control the playback of multiple animations in a single file. In the example below the first animation will play once, and then the next animation will loop:
+Here’s how to control playback settings for multiple animations:
 
 ```html
 <dotlottie-player
-  id="find-me"
   subframe
+  id="find-me"
   src="/path/to/combined-animations.lottie"
 >
 </dotlottie-player>  
 ```
 
-```javascript
+```js
   const player = document.querySelector('#find-me')
   player?.setMultiAnimationSettings(
     [
@@ -138,7 +153,7 @@ Control the playback of multiple animations in a single file. In the example bel
 
 1. Import the component in `app.component.ts`.
 
-```typescript
+```ts
 import { Component } from '@angular/core'
 import '@aarsteinmedia/dotlottie-player'
 
@@ -156,7 +171,9 @@ export class AppComponent {
 
 ### React.js / Next.js
 
-If you've already imported the library in a parent component, you don't need to import it again in children of that component. If you want to assign the element a CSS class note that you need to use the `class` namespace, and not `className`.
+Because this is a Web Component and not a React component, note that you must use the `class` attribute (not `className`) when assigning a CSS class.
+
+If you prefer pure React logic, you may want to check out [@aarsteinmedia/dotlottie-react](https://www.npmjs.com/package/@aarsteinmedia/dotlottie-react).
 
 ```jsx
 import '@aarsteinmedia/dotlottie-player'
@@ -164,11 +181,11 @@ import '@aarsteinmedia/dotlottie-player'
 function App() {
   return (
     <dotlottie-player
-      class="your-class-name"
-      src="https://storage.googleapis.com/aarsteinmedia/am.lottie"
       autoplay
       controls
       loop
+      class="your-class-name"
+      src="https://storage.googleapis.com/aarsteinmedia/am.lottie"
       style={{
         width: '320px',
         margin: 'auto'
@@ -180,7 +197,7 @@ function App() {
 export default App
 ```
 
-If you're using TypeScript and want to assign the component a `ref`, you can do it like this:
+If you're using TypeScript and want to assign a `ref`, do it like this:
 
 ```tsx
 import { useRef } from 'react'
@@ -191,8 +208,8 @@ function App() {
   const animation = useRef<DotLottiePlayer | null>(null)
   return (
     <dotlottie-player
-      ref={animation}
       subframe
+      ref={animation}
       src="https://storage.googleapis.com/aarsteinmedia/am.lottie"
     />
   )
@@ -210,7 +227,7 @@ Compared to React and Angular there's a couple of extra steps, but surely nothin
 #### In Vue.js
 `vite.config.ts`:
 
-```typescript
+```ts
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
@@ -230,7 +247,7 @@ export default defineConfig({
 #### In Nuxt.js
 `nuxt.config.ts`:
 
-```typescript
+```ts
 export default defineNuxtConfig({
   vue: {
     compilerOptions: {
@@ -245,7 +262,7 @@ export default defineNuxtConfig({
 #### In Vue.js
 `main.ts`:
 
-```typescript
+```ts
 import { createApp } from 'vue'
 import DotLottiePlayer from '@aarsteinmedia/dotlottie-player'
 import App from './App.vue'
@@ -290,6 +307,7 @@ export default defineNuxtPlugin(({ vueApp }) => {
 | `controls`                | Show controls                                                                                                                 | `boolean`                                | `false`           |
 | `count`                   | Number of times to loop animation                                                                                             | `number`                                 | `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`           |
 | `loop`                    | Whether to loop animation                                                                                                     | `boolean`                                | `false`           |
 | `mode`                    | Play mode                                                                                                                     | `normal` \| `bounce`                     | `normal`          |

package/dist/full.d.ts

@@ -105,6 +105,8 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
     get description(): string | null;
     set direction(value: AnimationDirection);
     get direction(): AnimationDirection;
+    set dontFreezeOnBlur(value: boolean);
+    get dontFreezeOnBlur(): boolean;
     set hover(value: boolean);
     get hover(): boolean;
     set intermission(value: number);

package/dist/full.js

@@ -25,7 +25,7 @@ if (isServer) {
         for(let i = 0; i < length; i++){
             const initialValue = this[observedProperties[i]], cachedValue = Symbol(observedProperties[i]);
             this[cachedValue] = initialValue;
-            Object.defineProperty(this, observedProperties[i], {
+            Object.defineProperty(this, observedProperties[i] ?? '', {
                 get () {
                     // eslint-disable-next-line @typescript-eslint/no-unsafe-return
                     return this[cachedValue];
@@ -51,8 +51,8 @@ if (isServer) {
             if (!('propertyChangedCallback' in this) || typeof this.propertyChangedCallback !== 'function') {
                 continue;
             }
-            if (arr[i] in this) {
-                this.propertyChangedCallback(arr[i], undefined, this[arr[i]]);
+            if (arr[i] ?? '' in this) {
+                this.propertyChangedCallback(arr[i] ?? '', undefined, this[arr[i]]);
             }
         }
     }
@@ -172,7 +172,7 @@ const tagName = 'dotlottie-player';
         slot.innerHTML = '';
         return;
     }
-    slot.innerHTML = /* HTML */ `<div class="lottie-controls toolbar ${this.playerState === PlayerState.Error ? 'has-error' : ''}" aria-label="Lottie Animation controls"><button class="togglePlay" data-active="${this.autoplay}" aria-label="Toggle Play/Pause">${playIcon}</button> <button class="stop" data-active="${!this.autoplay}" aria-label="Stop">${stopIcon}</button> <button class="prev" aria-label="Previous animation" hidden="false">${prevIcon}</button> <button class="next" aria-label="Next animation" hidden>${nextIcon}</button><form class="progress-container${this.simple ? ' simple' : ''}"><input type="range" class="seeker" min="0" max="100" step="1" value="${this._seeker.toString()}" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${this._seeker.toString()}" tabindex="0" aria-label="Slider for search"><progress max="100" value="${this._seeker}"></progress></form>${this.simple ? '' : /* HTML */ `<button class="toggleLoop" data-active="${this.loop}" tabindex="0" aria-label="Toggle loop">${loopIcon}</button> <button class="toggleBoomerang" data-active="${this.mode === PlayMode.Bounce}" aria-label="Toggle boomerang" tabindex="0">${boomerangIcon}</button> <button class="toggleSettings" aria-label="Settings" aria-haspopup="true" aria-expanded="${Boolean(this._isSettingsOpen)}" aria-controls="${this._identifier}-settings">${settingsIcon}</button><div id="${this._identifier}-settings" class="popover" hidden><button class="convert" aria-label="Convert JSON animation to dotLottie format" aria-label="Convert ${this.isDotLottie ? 'dotLottie animation to JSON format' : 'JSON animation to dotLottie format'}" hidden>${convertIcon} ${this.isDotLottie ? 'Convert to JSON' : 'Convert to dotLottie'}</button> <button class="snapshot" aria-label="Download still image">${downloadIcon} Download still image</button></div>`}</div>`;
+    slot.innerHTML = /* HTML */ `<div class="lottie-controls toolbar ${this.playerState === PlayerState.Error ? 'has-error' : ''}" aria-label="Lottie Animation controls"><button class="togglePlay" data-active="${this.autoplay}" aria-label="Toggle Play/Pause">${playIcon}</button> <button class="stop" data-active="${!this.autoplay}" aria-label="Stop">${stopIcon}</button> <button class="prev" aria-label="Previous animation" hidden="false">${prevIcon}</button> <button class="next" aria-label="Next animation" hidden>${nextIcon}</button><form class="progress-container${this.simple ? ' simple' : ''}"><input type="range" class="seeker" min="0" max="100" step="1" value="${this._seeker.toString()}" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${this._seeker.toString()}" tabindex="0" aria-label="Slider for search"><progress max="100" value="${this._seeker}"></progress></form>${this.simple ? '' : /* HTML */ `<button class="toggleLoop" data-active="${this.loop}" tabindex="0" aria-label="Toggle loop">${loopIcon}</button> <button class="toggleBoomerang" data-active="${this.mode === PlayMode.Bounce}" aria-label="Toggle boomerang" tabindex="0">${boomerangIcon}</button> <button class="toggleSettings" aria-label="Settings" aria-haspopup="true" aria-expanded="${this._isSettingsOpen}" aria-controls="${this._identifier}-settings">${settingsIcon}</button><div id="${this._identifier}-settings" class="popover" hidden><button class="convert" aria-label="Convert JSON animation to dotLottie format" aria-label="Convert ${this.isDotLottie ? 'dotLottie animation to JSON format' : 'JSON animation to dotLottie format'}" hidden>${convertIcon} ${this.isDotLottie ? 'Convert to JSON' : 'Convert to dotLottie'}</button> <button class="snapshot" aria-label="Download still image">${downloadIcon} Download still image</button></div>`}</div>`;
     const togglePlay = this.shadow.querySelector('.togglePlay');
     if (togglePlay instanceof HTMLButtonElement) {
         togglePlay.onclick = this.togglePlay;
@@ -350,7 +350,7 @@ const notImplemented = 'Method is not implemented';
     }
     get animateOnScroll() {
         const val = this.getAttribute('animateOnScroll');
-        return Boolean(val === 'true' || val === '' || val === '1');
+        return val === 'true' || val === '' || val === '1';
     }
     get animations() {
         return this._animations;
@@ -362,7 +362,7 @@ const notImplemented = 'Method is not implemented';
     }
     get autoplay() {
         const val = this.getAttribute('autoplay');
-        return Boolean(val === 'true' || val === '' || val === '1');
+        return val === 'true' || val === '' || val === '1';
     }
     /**
    * Background color.
@@ -379,7 +379,7 @@ const notImplemented = 'Method is not implemented';
     }
     get controls() {
         const val = this.getAttribute('controls');
-        return Boolean(val === 'true' || val === '' || val === '1');
+        return val === 'true' || val === '' || val === '1';
     }
     /**
    * Number of times to loop.
@@ -419,13 +419,22 @@ const notImplemented = 'Method is not implemented';
         return 1;
     }
     /**
+   * Whether to freeze animation when window loses focus.
+   */ set dontFreezeOnBlur(value) {
+        this.setAttribute('dontFreezeOnBlur', value.toString());
+    }
+    get dontFreezeOnBlur() {
+        const val = this.getAttribute('dontFreezeOnBlur');
+        return val === 'true' || val === '' || val === '1';
+    }
+    /**
    * Whether to play on mouseover.
    */ set hover(value) {
         this.setAttribute('hover', value.toString());
     }
     get hover() {
         const val = this.getAttribute('hover');
-        return Boolean(val === 'true' || val === '' || val === '1');
+        return val === 'true' || val === '' || val === '1';
     }
     /**
    * Pause between loop intrations, in miliseconds.
@@ -449,12 +458,12 @@ const notImplemented = 'Method is not implemented';
     }
     get loop() {
         const val = this.getAttribute('loop');
-        return Boolean(val === 'true' || val === '' || val === '1');
+        return val === 'true' || val === '' || val === '1';
     }
     /**
    * Play mode.
    */ set mode(value) {
-        this.setAttribute('mode', value.toString());
+        this.setAttribute('mode', value);
     }
     get mode() {
         const val = this.getAttribute('mode');
@@ -506,7 +515,7 @@ const notImplemented = 'Method is not implemented';
     }
     get simple() {
         const val = this.getAttribute('simple');
-        return Boolean(val === 'true' || val === '' || val === '1');
+        return val === 'true' || val === '' || val === '1';
     }
     /**
    * Speed.
@@ -535,7 +544,7 @@ const notImplemented = 'Method is not implemented';
     }
     get subframe() {
         const val = this.getAttribute('subframe');
-        return Boolean(val === 'true' || val === '' || val === '1');
+        return val === 'true' || val === '' || val === '1';
     }
     constructor(){
         super(), this.isLight = false, /**
@@ -758,11 +767,12 @@ const notImplemented = 'Method is not implemented';
             }
             this._isBounce = this.mode === PlayMode.Bounce;
             if (this._multiAnimationSettings.length > 0 && this._multiAnimationSettings[this._currentAnimation]?.mode) {
-                this._isBounce = this._multiAnimationSettings[this._currentAnimation].mode === PlayMode.Bounce;
+                this._isBounce = this._multiAnimationSettings[this._currentAnimation]?.mode === PlayMode.Bounce;
             }
-            if (manifest?.animations.length === 1) {
-                manifest.animations[0].autoplay = this.autoplay;
-                manifest.animations[0].loop = this.loop;
+            const firstAnimation = manifest?.animations[0];
+            if (firstAnimation) {
+                firstAnimation.autoplay = this.autoplay;
+                firstAnimation.loop = this.loop;
             }
             this._isDotLottie = isDotLottie;
             this._animations = animations;
@@ -1147,7 +1157,7 @@ const notImplemented = 'Method is not implemented';
         this._intersectionObserver = new IntersectionObserver((entries)=>{
             const { length } = entries;
             for(let i = 0; i < length; i++){
-                if (!entries[i].isIntersecting || document.hidden) {
+                if (!entries[i]?.isIntersecting || document.hidden) {
                     if (this.playerState === PlayerState.Playing) {
                         this._freeze();
                     }
@@ -1289,6 +1299,9 @@ const notImplemented = 'Method is not implemented';
         }
     }
     _handleWindowBlur({ type }) {
+        if (this.dontFreezeOnBlur) {
+            return;
+        }
         if (this.playerState === PlayerState.Playing && type === 'blur') {
             this._freeze();
         }
@@ -1379,7 +1392,7 @@ const notImplemented = 'Method is not implemented';
             });
             // Check play mode for current animation
             if (this._multiAnimationSettings[this._currentAnimation]?.mode) {
-                this._isBounce = this._multiAnimationSettings[this._currentAnimation].mode === PlayMode.Bounce;
+                this._isBounce = this._multiAnimationSettings[this._currentAnimation]?.mode === PlayMode.Bounce;
             }
             // Remove event listeners to new Lottie instance, and add new
             this._removeEventListeners();

package/dist/light.d.ts

@@ -105,6 +105,8 @@ declare abstract class DotLottiePlayerBase extends PropertyCallbackElement {
     get description(): string | null;
     set direction(value: AnimationDirection);
     get direction(): AnimationDirection;
+    set dontFreezeOnBlur(value: boolean);
+    get dontFreezeOnBlur(): boolean;
     set hover(value: boolean);
     get hover(): boolean;
     set intermission(value: number);

package/dist/light.js

@@ -25,7 +25,7 @@ if (isServer) {
         for(let i = 0; i < length; i++){
             const initialValue = this[observedProperties[i]], cachedValue = Symbol(observedProperties[i]);
             this[cachedValue] = initialValue;
-            Object.defineProperty(this, observedProperties[i], {
+            Object.defineProperty(this, observedProperties[i] ?? '', {
                 get () {
                     // eslint-disable-next-line @typescript-eslint/no-unsafe-return
                     return this[cachedValue];
@@ -51,8 +51,8 @@ if (isServer) {
             if (!('propertyChangedCallback' in this) || typeof this.propertyChangedCallback !== 'function') {
                 continue;
             }
-            if (arr[i] in this) {
-                this.propertyChangedCallback(arr[i], undefined, this[arr[i]]);
+            if (arr[i] ?? '' in this) {
+                this.propertyChangedCallback(arr[i] ?? '', undefined, this[arr[i]]);
             }
         }
     }
@@ -172,7 +172,7 @@ const tagName = 'dotlottie-player';
         slot.innerHTML = '';
         return;
     }
-    slot.innerHTML = /* HTML */ `<div class="lottie-controls toolbar ${this.playerState === PlayerState.Error ? 'has-error' : ''}" aria-label="Lottie Animation controls"><button class="togglePlay" data-active="${this.autoplay}" aria-label="Toggle Play/Pause">${playIcon}</button> <button class="stop" data-active="${!this.autoplay}" aria-label="Stop">${stopIcon}</button> <button class="prev" aria-label="Previous animation" hidden="false">${prevIcon}</button> <button class="next" aria-label="Next animation" hidden>${nextIcon}</button><form class="progress-container${this.simple ? ' simple' : ''}"><input type="range" class="seeker" min="0" max="100" step="1" value="${this._seeker.toString()}" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${this._seeker.toString()}" tabindex="0" aria-label="Slider for search"><progress max="100" value="${this._seeker}"></progress></form>${this.simple ? '' : /* HTML */ `<button class="toggleLoop" data-active="${this.loop}" tabindex="0" aria-label="Toggle loop">${loopIcon}</button> <button class="toggleBoomerang" data-active="${this.mode === PlayMode.Bounce}" aria-label="Toggle boomerang" tabindex="0">${boomerangIcon}</button> <button class="toggleSettings" aria-label="Settings" aria-haspopup="true" aria-expanded="${Boolean(this._isSettingsOpen)}" aria-controls="${this._identifier}-settings">${settingsIcon}</button><div id="${this._identifier}-settings" class="popover" hidden><button class="convert" aria-label="Convert JSON animation to dotLottie format" aria-label="Convert ${this.isDotLottie ? 'dotLottie animation to JSON format' : 'JSON animation to dotLottie format'}" hidden>${convertIcon} ${this.isDotLottie ? 'Convert to JSON' : 'Convert to dotLottie'}</button> <button class="snapshot" aria-label="Download still image">${downloadIcon} Download still image</button></div>`}</div>`;
+    slot.innerHTML = /* HTML */ `<div class="lottie-controls toolbar ${this.playerState === PlayerState.Error ? 'has-error' : ''}" aria-label="Lottie Animation controls"><button class="togglePlay" data-active="${this.autoplay}" aria-label="Toggle Play/Pause">${playIcon}</button> <button class="stop" data-active="${!this.autoplay}" aria-label="Stop">${stopIcon}</button> <button class="prev" aria-label="Previous animation" hidden="false">${prevIcon}</button> <button class="next" aria-label="Next animation" hidden>${nextIcon}</button><form class="progress-container${this.simple ? ' simple' : ''}"><input type="range" class="seeker" min="0" max="100" step="1" value="${this._seeker.toString()}" aria-valuemin="0" aria-valuemax="100" aria-valuenow="${this._seeker.toString()}" tabindex="0" aria-label="Slider for search"><progress max="100" value="${this._seeker}"></progress></form>${this.simple ? '' : /* HTML */ `<button class="toggleLoop" data-active="${this.loop}" tabindex="0" aria-label="Toggle loop">${loopIcon}</button> <button class="toggleBoomerang" data-active="${this.mode === PlayMode.Bounce}" aria-label="Toggle boomerang" tabindex="0">${boomerangIcon}</button> <button class="toggleSettings" aria-label="Settings" aria-haspopup="true" aria-expanded="${this._isSettingsOpen}" aria-controls="${this._identifier}-settings">${settingsIcon}</button><div id="${this._identifier}-settings" class="popover" hidden><button class="convert" aria-label="Convert JSON animation to dotLottie format" aria-label="Convert ${this.isDotLottie ? 'dotLottie animation to JSON format' : 'JSON animation to dotLottie format'}" hidden>${convertIcon} ${this.isDotLottie ? 'Convert to JSON' : 'Convert to dotLottie'}</button> <button class="snapshot" aria-label="Download still image">${downloadIcon} Download still image</button></div>`}</div>`;
     const togglePlay = this.shadow.querySelector('.togglePlay');
     if (togglePlay instanceof HTMLButtonElement) {
         togglePlay.onclick = this.togglePlay;
@@ -350,7 +350,7 @@ const notImplemented = 'Method is not implemented';
     }
     get animateOnScroll() {
         const val = this.getAttribute('animateOnScroll');
-        return Boolean(val === 'true' || val === '' || val === '1');
+        return val === 'true' || val === '' || val === '1';
     }
     get animations() {
         return this._animations;
@@ -362,7 +362,7 @@ const notImplemented = 'Method is not implemented';
     }
     get autoplay() {
         const val = this.getAttribute('autoplay');
-        return Boolean(val === 'true' || val === '' || val === '1');
+        return val === 'true' || val === '' || val === '1';
     }
     /**
    * Background color.
@@ -379,7 +379,7 @@ const notImplemented = 'Method is not implemented';
     }
     get controls() {
         const val = this.getAttribute('controls');
-        return Boolean(val === 'true' || val === '' || val === '1');
+        return val === 'true' || val === '' || val === '1';
     }
     /**
    * Number of times to loop.
@@ -419,13 +419,22 @@ const notImplemented = 'Method is not implemented';
         return 1;
     }
     /**
+   * Whether to freeze animation when window loses focus.
+   */ set dontFreezeOnBlur(value) {
+        this.setAttribute('dontFreezeOnBlur', value.toString());
+    }
+    get dontFreezeOnBlur() {
+        const val = this.getAttribute('dontFreezeOnBlur');
+        return val === 'true' || val === '' || val === '1';
+    }
+    /**
    * Whether to play on mouseover.
    */ set hover(value) {
         this.setAttribute('hover', value.toString());
     }
     get hover() {
         const val = this.getAttribute('hover');
-        return Boolean(val === 'true' || val === '' || val === '1');
+        return val === 'true' || val === '' || val === '1';
     }
     /**
    * Pause between loop intrations, in miliseconds.
@@ -449,12 +458,12 @@ const notImplemented = 'Method is not implemented';
     }
     get loop() {
         const val = this.getAttribute('loop');
-        return Boolean(val === 'true' || val === '' || val === '1');
+        return val === 'true' || val === '' || val === '1';
     }
     /**
    * Play mode.
    */ set mode(value) {
-        this.setAttribute('mode', value.toString());
+        this.setAttribute('mode', value);
     }
     get mode() {
         const val = this.getAttribute('mode');
@@ -506,7 +515,7 @@ const notImplemented = 'Method is not implemented';
     }
     get simple() {
         const val = this.getAttribute('simple');
-        return Boolean(val === 'true' || val === '' || val === '1');
+        return val === 'true' || val === '' || val === '1';
     }
     /**
    * Speed.
@@ -535,7 +544,7 @@ const notImplemented = 'Method is not implemented';
     }
     get subframe() {
         const val = this.getAttribute('subframe');
-        return Boolean(val === 'true' || val === '' || val === '1');
+        return val === 'true' || val === '' || val === '1';
     }
     constructor(){
         super(), this.isLight = false, /**
@@ -758,11 +767,12 @@ const notImplemented = 'Method is not implemented';
             }
             this._isBounce = this.mode === PlayMode.Bounce;
             if (this._multiAnimationSettings.length > 0 && this._multiAnimationSettings[this._currentAnimation]?.mode) {
-                this._isBounce = this._multiAnimationSettings[this._currentAnimation].mode === PlayMode.Bounce;
+                this._isBounce = this._multiAnimationSettings[this._currentAnimation]?.mode === PlayMode.Bounce;
             }
-            if (manifest?.animations.length === 1) {
-                manifest.animations[0].autoplay = this.autoplay;
-                manifest.animations[0].loop = this.loop;
+            const firstAnimation = manifest?.animations[0];
+            if (firstAnimation) {
+                firstAnimation.autoplay = this.autoplay;
+                firstAnimation.loop = this.loop;
             }
             this._isDotLottie = isDotLottie;
             this._animations = animations;
@@ -1147,7 +1157,7 @@ const notImplemented = 'Method is not implemented';
         this._intersectionObserver = new IntersectionObserver((entries)=>{
             const { length } = entries;
             for(let i = 0; i < length; i++){
-                if (!entries[i].isIntersecting || document.hidden) {
+                if (!entries[i]?.isIntersecting || document.hidden) {
                     if (this.playerState === PlayerState.Playing) {
                         this._freeze();
                     }
@@ -1289,6 +1299,9 @@ const notImplemented = 'Method is not implemented';
         }
     }
     _handleWindowBlur({ type }) {
+        if (this.dontFreezeOnBlur) {
+            return;
+        }
         if (this.playerState === PlayerState.Playing && type === 'blur') {
             this._freeze();
         }
@@ -1379,7 +1392,7 @@ const notImplemented = 'Method is not implemented';
             });
             // Check play mode for current animation
             if (this._multiAnimationSettings[this._currentAnimation]?.mode) {
-                this._isBounce = this._multiAnimationSettings[this._currentAnimation].mode === PlayMode.Bounce;
+                this._isBounce = this._multiAnimationSettings[this._currentAnimation]?.mode === PlayMode.Bounce;
             }
             // Remove event listeners to new Lottie instance, and add new
             this._removeEventListeners();