@aarsteinmedia/dotlottie-player 2.5.8 → 2.5.10

package/dist/esm/index.js

@@ -3,6 +3,8 @@ import { property, query, state, customElement } from 'lit/decorators.js';
 import Lottie from 'lottie-web';
 import { strToU8, zip, strFromU8, unzip as unzip$1 } from 'fflate';
 
+var name="@aarsteinmedia/dotlottie-player";var version="2.5.10";var description="Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";var exports={".":{"import":"./dist/esm/index.js",node:"./dist/esm/index.js",require:"./dist/cjs/index.js",types:"./dist/index.d.ts"}};var main="./dist/esm/index.js";var unpkg="./dist/index.js";var module="./dist/esm/index.js";var types="./dist/index.d.ts";var type="module";var homepage="https://www.aarstein.media/en/dotlottie-player";var repository={url:"https://github.com/aarsteinmedia/dotlottie-player.git",type:"git"};var bugs="https://github.com/aarsteinmedia/dotlottie-player/issues";var author={name:"Johan Martin Aarstein",email:"johan@aarstein.media",url:"https://www.aarstein.media",organization:"Aarstein Media"};var license="GPL-2.0-or-later";var scripts={build:"rimraf ./dist && rollup -c","build:types":"rimraf ./types && tsc","build:cem":"npx cem analyze --config cem.config.mjs",prod:"pnpm build:types && pnpm build && pnpm build:cem",dev:"rollup -c -w --environment NODE_ENV:development",lint:"tsc && eslint . --ext .ts","lint:fix":"eslint . --ext .ts --fix"};var dependencies={fflate:"^0.8.2",lit:"^3.1.3","lottie-web":"^5.12.2"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.9.9","@rollup/plugin-commonjs":"^25.0.8","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-replace":"^5.0.5","@swc/core":"^1.5.24","@types/node":"^20.14.1","@typescript-eslint/eslint-plugin":"^7.12.0","@typescript-eslint/parser":"^7.12.0",autoprefixer:"^10.4.19","esbuild-sass-plugin":"^3.3.0",eslint:"^8.57.0","eslint-import-resolver-typescript":"^3.6.1","eslint-plugin-import":"^2.29.1","eslint-plugin-jsdoc":"^48.2.7","eslint-plugin-lit":"^1.14.0","postcss-flexbugs-fixes":"^5.0.2",rimraf:"^5.0.7",rollup:"^4.18.0","rollup-plugin-dts":"^6.1.1","rollup-plugin-html-literals":"^1.1.8","rollup-plugin-livereload":"^2.0.5","rollup-plugin-postcss":"^4.0.2","rollup-plugin-postcss-lit":"^2.1.0","rollup-plugin-serve":"^1.1.1","rollup-plugin-summary":"^2.0.1","rollup-plugin-swc3":"^0.11.2",sass:"^1.77.4","ts-lit-plugin":"^2.0.2",typescript:"^5.4.5"};var customElements="dist/custom-elements.json";var files=["dist","README.md"];var keywords=["lottie","dotlottie","animation","web component","component","lit-element","svg","vector","player"];var publishConfig={access:"public"};var engines={node:">= 8.17.0"};var funding={type:"paypal",url:"https://www.paypal.com/donate/?hosted_button_id=E7C7DMN8KSQ6A"};var pkg = {name:name,version:version,description:description,exports:exports,main:main,unpkg:unpkg,module:module,types:types,type:type,homepage:homepage,repository:repository,bugs:bugs,author:author,license:license,scripts:scripts,dependencies:dependencies,peerDependencies:peerDependencies,devDependencies:devDependencies,customElements:customElements,files:files,keywords:keywords,publishConfig:publishConfig,engines:engines,funding:funding};
+
 var PlayerState;
 (function(PlayerState) {
     PlayerState["Completed"] = "completed";
@@ -39,9 +41,13 @@ var PlayerEvents;
 class CustomError extends Error {
 }
 const addExt = (ext, str)=>{
-    if (!str) return;
+    if (!str) {
+        return;
+    }
     if (getExt(str)) {
-        if (getExt(str) === ext) return str;
+        if (getExt(str) === ext) {
+            return str;
+        }
         return `${getFilename(str)}.${ext}`;
     }
     return `${str}.${ext}`;
@@ -62,7 +68,7 @@ const addExt = (ext, str)=>{
 }, base64ToU8 = (str)=>strToU8(isServer() ? Buffer.from(parseBase64(str), 'base64').toString('binary') : atob(parseBase64(str)), true), createDotLottie = async ({ animations, manifest, fileName, shouldDownload = true })=>{
     try {
         if (!animations?.length || !manifest) {
-            throw new Error(`Missing or malformed required parameter(s):\n ${!animations?.length ? '- animations\n' : ''} ${!manifest ? '- manifest \n' : ''}`);
+            throw new Error(`Missing or malformed required parameter(s):\n ${animations?.length ? '- manifest\n' : ''} ${manifest ? '- animations\n' : ''}`);
         }
         const name = addExt('lottie', fileName) || `${useId()}.lottie`, dotlottie = {
             'manifest.json': [
@@ -163,7 +169,11 @@ const addExt = (ext, str)=>{
                 isDotLottie: false
             };
         }
-        const result = await fetch(input);
+        const result = await fetch(input, {
+            headers: {
+                'Content-Type': 'application/json; charset=UTF-8'
+            }
+        });
         if (!result.ok) {
             const error = new CustomError(result.statusText);
             error.status = result.status;
@@ -223,7 +233,9 @@ const addExt = (ext, str)=>{
     });
     return arrayBuffer;
 }, getExt = (str)=>{
-    if (!str || !hasExt(str)) return;
+    if (!str || !hasExt(str)) {
+        return;
+    }
     const ext = str.split('.').pop()?.toLowerCase();
     if (ext === 'jpeg') {
         return 'jpg';
@@ -252,8 +264,12 @@ const addExt = (ext, str)=>{
     };
 }, getManifest = (unzipped)=>{
     const file = strFromU8(unzipped['manifest.json'], false), manifest = JSON.parse(file);
-    if (!('animations' in manifest)) throw new Error('Manifest not found');
-    if (!manifest.animations.length) throw new Error('No animations listed in manifest');
+    if (!('animations' in manifest)) {
+        throw new Error('Manifest not found');
+    }
+    if (!manifest.animations.length) {
+        throw new Error('No animations listed in manifest');
+    }
     return manifest;
 }, getMimeFromExt = (ext)=>{
     switch(ext){
@@ -292,21 +308,27 @@ const addExt = (ext, str)=>{
     const lastDotIndex = path?.split('/').pop()?.lastIndexOf('.');
     return (lastDotIndex ?? 0) > 1 && path && path.length - 1 > (lastDotIndex ?? 0);
 }, isAudio = (asset)=>!('h' in asset) && !('w' in asset) && 'p' in asset && 'e' in asset && 'u' in asset && 'id' in asset, isBase64 = (str)=>{
-    if (!str) return false;
+    if (!str) {
+        return false;
+    }
     const regex = /^([0-9a-zA-Z+/]{4})*(([0-9a-zA-Z+/]{2}==)|([0-9a-zA-Z+/]{3}=))?$/;
     return regex.test(parseBase64(str));
-}, isImage = (asset)=>'w' in asset && 'h' in asset && !('xt' in asset) && 'p' in asset, isServer = ()=>!(typeof window !== 'undefined' && window.document), parseBase64 = (str)=>str.substring(str.indexOf(',') + 1), prepareString = (str)=>{
-    return str.replace(new RegExp(/"""/, 'g'), '""').replace(/(["'])(.*?)\1/g, (_match, quote, content)=>{
+}, isImage = (asset)=>'w' in asset && 'h' in asset && !('xt' in asset) && 'p' in asset, isServer = ()=>!(typeof window !== 'undefined' && window.document), parseBase64 = (str)=>str.substring(str.indexOf(',') + 1), prepareString = (str)=>str.replace(new RegExp(/"""/, 'g'), '""').replace(/(["'])(.*?)\1/g, (_match, quote, content)=>{
         const replacedContent = content.replace(/[^\w\s\d.#]/g, '');
         return `${quote}${replacedContent}${quote}`;
-    });
-}, resolveAssets = async (unzipped, assets)=>{
-    if (!Array.isArray(assets)) return;
+    }), resolveAssets = async (unzipped, assets)=>{
+    if (!Array.isArray(assets)) {
+        return;
+    }
     const toResolve = [];
     for (const asset of assets){
-        if (!isAudio(asset) && !isImage(asset)) continue;
+        if (!isAudio(asset) && !isImage(asset)) {
+            continue;
+        }
         const type = isImage(asset) ? 'images' : 'audio', u8 = unzipped?.[`${type}/${asset.p}`];
-        if (!u8) continue;
+        if (!u8) {
+            continue;
+        }
         toResolve.push(new Promise((resolveAsset)=>{
             const assetB64 = isServer() ? Buffer.from(u8).toString('base64') : btoa(u8.reduce((dat, byte)=>`${dat}${String.fromCharCode(byte)}`, ''));
             asset.p = asset.p?.startsWith('data:') || isBase64(asset.p) ? asset.p : `data:${getMimeFromExt(getExt(asset.p))};base64,${assetB64}`;
@@ -327,14 +349,10 @@ const addExt = (ext, str)=>{
     });
     return unzipped;
 }, useId = (prefix)=>{
-    const s4 = ()=>{
-        return ((1 + Math.random()) * 0x10000 | 0).toString(16).substring(1);
-    };
+    const s4 = ()=>((1 + Math.random()) * 0x10000 | 0).toString(16).substring(1);
     return `${prefix ?? `:${s4()}`}-${s4()}`;
 };
 
-var name="@aarsteinmedia/dotlottie-player";var version="2.5.8";var description="Web Component for playing Lottie animations in your web app. Previously @johanaarstein/dotlottie-player";var exports={".":{"import":"./dist/esm/index.js",node:"./dist/esm/index.js",require:"./dist/cjs/index.js",types:"./dist/index.d.ts"}};var main="./dist/esm/index.js";var unpkg="./dist/index.js";var module="./dist/esm/index.js";var types="./dist/index.d.ts";var type="module";var homepage="https://www.aarstein.media/en/dotlottie-player";var repository={url:"https://github.com/aarsteinmedia/dotlottie-player.git",type:"git"};var bugs="https://github.com/aarsteinmedia/dotlottie-player/issues";var author={name:"Johan Martin Aarstein",email:"johan@aarstein.media",url:"https://www.aarstein.media",organization:"Aarstein Media"};var license="GPL-2.0-or-later";var scripts={build:"rimraf ./dist && rollup -c","build:types":"rimraf ./types && tsc","build:cem":"npx cem analyze --config cem.config.mjs",prod:"pnpm build:types && pnpm build && pnpm build:cem",dev:"rollup -c -w --environment NODE_ENV:development",lint:"tsc && eslint . --ext .ts","lint:fix":"eslint . --ext .ts --fix"};var dependencies={fflate:"^0.8.2",lit:"^3.1.3","lottie-web":"^5.12.2"};var peerDependencies={"@types/react":">= 16.0.0"};var devDependencies={"@custom-elements-manifest/analyzer":"^0.9.9","@rollup/plugin-commonjs":"^25.0.7","@rollup/plugin-json":"^6.1.0","@rollup/plugin-node-resolve":"^15.2.3","@rollup/plugin-replace":"^5.0.5","@swc/core":"^1.5.5","@types/node":"^20.12.11","@typescript-eslint/eslint-plugin":"^7.8.0","@typescript-eslint/parser":"^7.8.0",autoprefixer:"^10.4.19","esbuild-sass-plugin":"^3.2.0",eslint:"^8.57.0","eslint-plugin-lit":"^1.12.0","postcss-flexbugs-fixes":"^5.0.2",rimraf:"^5.0.5",rollup:"^4.17.2","rollup-plugin-dts":"^6.1.0","rollup-plugin-html-literals":"^1.1.8","rollup-plugin-livereload":"^2.0.5","rollup-plugin-postcss":"^4.0.2","rollup-plugin-postcss-lit":"^2.1.0","rollup-plugin-serve":"^1.1.1","rollup-plugin-summary":"^2.0.0","rollup-plugin-swc3":"^0.11.1",sass:"^1.77.0","ts-lit-plugin":"^2.0.2",typescript:"^5.4.5"};var customElements="dist/custom-elements.json";var files=["dist","README.md"];var keywords=["lottie","dotlottie","animation","web component","component","lit-element","svg","vector","player"];var publishConfig={access:"public"};var engines={node:">= 8.17.0"};var funding={type:"paypal",url:"https://www.paypal.com/donate/?hosted_button_id=E7C7DMN8KSQ6A"};var pkg = {name:name,version:version,description:description,exports:exports,main:main,unpkg:unpkg,module:module,types:types,type:type,homepage:homepage,repository:repository,bugs:bugs,author:author,license:license,scripts:scripts,dependencies:dependencies,peerDependencies:peerDependencies,devDependencies:devDependencies,customElements:customElements,files:files,keywords:keywords,publishConfig:publishConfig,engines:engines,funding:funding};
-
 var css_248z = css`*{box-sizing:border-box}:host{--lottie-player-toolbar-height:35px;--lottie-player-toolbar-background-color:#FFF;--lottie-player-toolbar-icon-color:#000;--lottie-player-toolbar-icon-hover-color:#000;--lottie-player-toolbar-icon-active-color:#4285f4;--lottie-player-seeker-track-color:rgba(0, 0, 0, 0.2);--lottie-player-seeker-thumb-color:#4285f4;--lottie-player-seeker-display:block;display:block;width:100%;height:100%}@media (prefers-color-scheme:dark){:host{--lottie-player-toolbar-background-color:#000;--lottie-player-toolbar-icon-color:#FFF;--lottie-player-toolbar-icon-hover-color:#FFF;--lottie-player-seeker-track-color:rgba(255, 255, 255, 0.6)}}.main{display:flex;flex-direction:column;height:100%;width:100%;margin:0;padding:0}.animation{width:100%;height:100%;display:flex}[data-controls=true] .animation{height:calc(100% - 35px)}.animation-container{position:relative}.popover{position:absolute;right:5px;bottom:40px;background-color:var(--lottie-player-toolbar-background-color);border-radius:5px;padding:10px 15px;border:solid 2px var(--lottie-player-toolbar-icon-color);animation:fadeIn .2s ease-in-out}.popover::before{content:"";right:10px;border:7px solid transparent;border-top-color:transparent;margin-right:-7px;height:0;width:0;position:absolute;pointer-events:none;top:100%;border-top-color:var(--lottie-player-toolbar-icon-color)}.toolbar{display:flex;align-items:center;justify-items:center;background:var(--lottie-player-toolbar-background-color);margin:0;height:35px;padding:5px;border-radius:5px;gap:5px}.toolbar.has-error{pointer-events:none;opacity:.5}.toolbar button{cursor:pointer;fill:var(--lottie-player-toolbar-icon-color);color:var(--lottie-player-toolbar-icon-color);display:flex;background:0 0;border:0;padding:0;outline:0;height:100%;margin:0;align-items:center;gap:5px;opacity:.9}.toolbar button:hover{opacity:1}.toolbar button[data-active=true]{opacity:1;fill:var(--lottie-player-toolbar-icon-active-color)}.toolbar button:disabled{opacity:.5}.toolbar button:focus{outline:0}.toolbar button svg{pointer-events:none}.toolbar button svg>*{fill:inherit}.toolbar button.disabled svg{display:none}.progress-container{position:relative;width:100%}.progress-container.simple{margin-right:12px}.seeker{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0}.seeker::-webkit-slider-runnable-track,.seeker::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;outline:0}progress{-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:0}.seeker{width:100%;height:20px;border-radius:3px;border:0;cursor:pointer;background-color:transparent;display:var(--lottie-player-seeker-display);color:var(--lottie-player-seeker-thumb-color);margin:0;padding:7.5px 0;position:relative;z-index:1}progress{position:absolute;width:100%;height:5px;border-radius:3px;border:0;top:0;left:0;margin:7.5px 0;background-color:var(--lottie-player-seeker-track-color);pointer-events:none}::-moz-progress-bar{background-color:var(--lottie-player-seeker-thumb-color)}::-webkit-progress-inner-element{border-radius:3px;overflow:hidden}::-webkit-slider-runnable-track{background-color:transparent}::-webkit-progress-value{background-color:var(--lottie-player-seeker-thumb-color)}.seeker::-webkit-slider-thumb{height:15px;width:15px;border-radius:50%;border:0;background-color:var(--lottie-player-seeker-thumb-color);cursor:pointer;-webkit-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;transform:scale(0)}.seeker:focus::-webkit-slider-thumb,.seeker:hover::-webkit-slider-thumb{transform:scale(1)}.seeker::-moz-range-progress{background-color:var(--lottie-player-seeker-thumb-color);height:5px;border-radius:3px}.seeker::-moz-range-thumb{height:15px;width:15px;border-radius:50%;background-color:var(--lottie-player-seeker-thumb-color);border:0;cursor:pointer;-moz-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;transform:scale(0)}.seeker:focus::-moz-range-thumb,.seeker:hover::-moz-range-thumb{transform:scale(1)}.seeker::-ms-track{width:100%;height:5px;cursor:pointer;background:0 0;border-color:transparent;color:transparent}.seeker::-ms-fill-upper{background:var(--lottie-player-seeker-track-color);border-radius:3px}.seeker::-ms-fill-lower{background-color:var(--lottie-player-seeker-thumb-color);border-radius:3px}.seeker::-ms-thumb{border:0;height:15px;width:15px;border-radius:50%;background:var(--lottie-player-seeker-thumb-color);cursor:pointer;-ms-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;transform:scale(0)}.seeker:hover::-ms-thumb{transform:scale(1)}.seeker:focus::-ms-thumb{transform:scale(1)}.seeker:focus::-ms-fill-lower,.seeker:focus::-ms-fill-upper{background:var(--lottie-player-seeker-track-color)}.error{display:flex;margin:auto;justify-content:center;height:100%;align-items:center}.error svg{width:100%;height:auto}@keyframes fadeIn{0%{opacity:0}100%{opacity:1}}`;
 
 function _ts_decorate(decorators, target, key, desc) {
@@ -345,10 +363,35 @@ function _ts_decorate(decorators, target, key, desc) {
 }
 class DotLottiePlayer extends LitElement {
     _getOptions() {
-        const preserveAspectRatio = this.preserveAspectRatio ?? (this.objectfit && aspectRatio(this.objectfit)), currentAnimationSettings = this.multiAnimationSettings?.[this._currentAnimation], currentAnimationManifest = this._manifest.animations?.[this._currentAnimation], loop = currentAnimationSettings?.loop !== undefined ? !!currentAnimationSettings.loop : this.loop !== undefined ? !!this.loop : currentAnimationManifest.loop !== undefined && !!currentAnimationManifest.loop, autoplay = !this.animateOnScroll && (currentAnimationSettings?.autoplay !== undefined ? !!currentAnimationSettings.autoplay : this.autoplay !== undefined ? !!this.autoplay : currentAnimationManifest.autoplay !== undefined && !!currentAnimationManifest.autoplay), initialSegment = !this.segment || this.segment.some((val)=>val < 0) ? undefined : this.segment.every((val)=>val > 0) ? [
-            this.segment[0] - 1,
-            this.segment[1] - 1
-        ] : this.segment, options = {
+        const preserveAspectRatio = this.preserveAspectRatio ?? (this.objectfit && aspectRatio(this.objectfit)), currentAnimationSettings = this.multiAnimationSettings?.length ? this.multiAnimationSettings?.[this._currentAnimation] : undefined, currentAnimationManifest = this._manifest.animations?.[this._currentAnimation];
+        let loop = !!this.loop;
+        if (currentAnimationManifest.loop !== undefined) {
+            loop = !!currentAnimationManifest.loop;
+        }
+        if (currentAnimationSettings?.loop !== undefined) {
+            loop = !!currentAnimationSettings.loop;
+        }
+        let autoplay = !!this.autoplay;
+        if (currentAnimationManifest.autoplay !== undefined) {
+            autoplay = !!currentAnimationManifest.autoplay;
+        }
+        if (currentAnimationSettings?.autoplay !== undefined) {
+            autoplay = !!currentAnimationSettings.autoplay;
+        }
+        if (this.animateOnScroll) {
+            autoplay = false;
+        }
+        let initialSegment = this.segment;
+        if (this.segment?.every((val)=>val > 0)) {
+            initialSegment = [
+                this.segment[0] - 1,
+                this.segment[1] - 1
+            ];
+        }
+        if (this.segment?.some((val)=>val < 0)) {
+            initialSegment = undefined;
+        }
+        const options = {
             container: this.container,
             loop,
             autoplay,
@@ -408,13 +451,20 @@ class DotLottiePlayer extends LitElement {
         this._intersectionObserver.observe(this.container);
     }
     async load(src) {
-        if (!this.shadowRoot) return;
+        if (!this.shadowRoot) {
+            return;
+        }
         try {
             const { animations, manifest, isDotLottie } = await getAnimationData(src);
             if (!animations || animations.some((animation)=>!this._isLottie(animation))) {
                 throw new Error('Broken or corrupted file');
             }
-            this._isBounce = this.multiAnimationSettings?.[this._currentAnimation]?.mode !== undefined ? this.multiAnimationSettings?.[this._currentAnimation]?.mode === PlayMode.Bounce : this.mode === PlayMode.Bounce;
+            this._isBounce = this.mode === PlayMode.Bounce;
+            if (this.multiAnimationSettings?.length) {
+                if (this.multiAnimationSettings[this._currentAnimation]?.mode) {
+                    this._isBounce = this.multiAnimationSettings[this._currentAnimation].mode === PlayMode.Bounce;
+                }
+            }
             this._isDotLottie = !!isDotLottie;
             this._animations = animations;
             this._manifest = manifest ?? {
@@ -429,8 +479,13 @@ class DotLottiePlayer extends LitElement {
                     }
                 ]
             };
-            if (this._lottieInstance) this._lottieInstance.destroy();
-            this.currentState = this.autoplay && !this.animateOnScroll ? PlayerState.Playing : PlayerState.Stopped;
+            if (this._lottieInstance) {
+                this._lottieInstance.destroy();
+            }
+            this.currentState = PlayerState.Stopped;
+            if (!this.animateOnScroll && (this.autoplay || this.multiAnimationSettings?.[this._currentAnimation]?.autoplay)) {
+                this.currentState = PlayerState.Playing;
+            }
             this._lottieInstance = Lottie.loadAnimation({
                 ...this._getOptions(),
                 animationData: animations[this._currentAnimation]
@@ -447,20 +502,25 @@ class DotLottiePlayer extends LitElement {
         this.setDirection(direction);
         this.setSubframe(!!this.subframe);
         if (this.autoplay || this.animateOnScroll) {
-            if (this.direction === -1) this.seek('99%');
+            if (this.direction === -1) {
+                this.seek('99%');
+            }
             if (!('IntersectionObserver' in window)) {
-                !this.animateOnScroll && this.play();
+                if (!this.animateOnScroll) {
+                    this.play();
+                }
                 this._playerState.visible = true;
             }
             this._addIntersectionObserver();
-            return;
         }
     }
     getManifest() {
         return this._manifest;
     }
     _addEventListeners() {
-        if (!this._lottieInstance) return;
+        if (!this._lottieInstance) {
+            return;
+        }
         this._lottieInstance.addEventListener('enterFrame', this._enterFrame);
         this._lottieInstance.addEventListener('complete', this._complete);
         this._lottieInstance.addEventListener('loopComplete', this._loopComplete);
@@ -487,7 +547,9 @@ class DotLottiePlayer extends LitElement {
         }
     }
     _removeEventListeners() {
-        if (!this._lottieInstance || !this.container) return;
+        if (!this._lottieInstance || !this.container) {
+            return;
+        }
         this._lottieInstance.removeEventListener('enterFrame', this._enterFrame);
         this._lottieInstance.removeEventListener('complete', this._complete);
         this._lottieInstance.removeEventListener('loopComplete', this._loopComplete);
@@ -506,7 +568,11 @@ class DotLottiePlayer extends LitElement {
         }
         const { totalFrames, playDirection } = this._lottieInstance, inPoint = this.segment ? this.segment[0] : 0, outPoint = this.segment ? this.segment[0] : totalFrames;
         if (this.count) {
-            this._isBounce ? this._playerState.count += 0.5 : this._playerState.count += 1;
+            if (this._isBounce) {
+                this._playerState.count += 0.5;
+            } else {
+                this._playerState.count += 1;
+            }
             if (this._playerState.count >= this.count) {
                 this.setLooping(false);
                 this.currentState = PlayerState.Completed;
@@ -519,12 +585,16 @@ class DotLottiePlayer extends LitElement {
             this._lottieInstance.goToAndStop(playDirection === -1 ? inPoint : outPoint * 0.99, true);
             this._lottieInstance.setDirection(playDirection * -1);
             return setTimeout(()=>{
-                !this.animateOnScroll && this._lottieInstance?.play();
+                if (!this.animateOnScroll) {
+                    this._lottieInstance?.play();
+                }
             }, this.intermission);
         }
         this._lottieInstance.goToAndStop(playDirection === -1 ? outPoint * 0.99 : inPoint, true);
         return setTimeout(()=>{
-            !this.animateOnScroll && this._lottieInstance?.play();
+            if (!this.animateOnScroll) {
+                this._lottieInstance?.play();
+            }
         }, this.intermission);
     }
     _enterFrame() {
@@ -544,8 +614,14 @@ class DotLottiePlayer extends LitElement {
         if (!this._lottieInstance) {
             return;
         }
-        if (this._animations.length > 1 && this.multiAnimationSettings?.[this._currentAnimation + 1]?.autoplay) {
-            return this.next();
+        if (this._animations.length > 1) {
+            if (this.multiAnimationSettings?.[this._currentAnimation + 1]?.autoplay) {
+                return this.next();
+            }
+            if (this.loop && this._currentAnimation === this._animations.length - 1) {
+                this._currentAnimation = 0;
+                return this._switchInstance();
+            }
         }
         const { currentFrame, totalFrames } = this._lottieInstance;
         this._seeker = Math.floor(currentFrame / totalFrames * 100);
@@ -621,7 +697,9 @@ class DotLottiePlayer extends LitElement {
         }, 400);
     }
     _handleSeekChange({ target }) {
-        if (!(target instanceof HTMLInputElement) || !this._lottieInstance || isNaN(Number(target.value))) return;
+        if (!(target instanceof HTMLInputElement) || !this._lottieInstance || isNaN(Number(target.value))) {
+            return;
+        }
         this.seek(Math.floor(Number(target.value) / 100 * this._lottieInstance.totalFrames));
         setTimeout(()=>{
             if (target.parentElement instanceof HTMLFormElement) {
@@ -681,7 +759,9 @@ class DotLottiePlayer extends LitElement {
         return this._lottieInstance;
     }
     play() {
-        if (!this._lottieInstance) return;
+        if (!this._lottieInstance) {
+            return;
+        }
         if (this.currentState) {
             this._playerState.prev = this.currentState;
         }
@@ -692,7 +772,9 @@ class DotLottiePlayer extends LitElement {
         this.dispatchEvent(new CustomEvent(PlayerEvents.Play));
     }
     pause() {
-        if (!this._lottieInstance) return;
+        if (!this._lottieInstance) {
+            return;
+        }
         if (this.currentState) {
             this._playerState.prev = this.currentState;
         }
@@ -703,7 +785,9 @@ class DotLottiePlayer extends LitElement {
         this.dispatchEvent(new CustomEvent(PlayerEvents.Pause));
     }
     stop() {
-        if (!this._lottieInstance) return;
+        if (!this._lottieInstance) {
+            return;
+        }
         if (this.currentState) {
             this._playerState.prev = this.currentState;
         }
@@ -715,7 +799,9 @@ class DotLottiePlayer extends LitElement {
         this.dispatchEvent(new CustomEvent(PlayerEvents.Stop));
     }
     destroy() {
-        if (!this._lottieInstance) return;
+        if (!this._lottieInstance) {
+            return;
+        }
         this.currentState = PlayerState.Destroyed;
         this._lottieInstance.destroy();
         this._lottieInstance = null;
@@ -724,7 +810,9 @@ class DotLottiePlayer extends LitElement {
         document.removeEventListener('visibilitychange', this._onVisibilityChange);
     }
     seek(value) {
-        if (!this._lottieInstance) return;
+        if (!this._lottieInstance) {
+            return;
+        }
         const matches = value.toString().match(/^([0-9]+)(%?)$/);
         if (!matches) {
             return;
@@ -740,7 +828,9 @@ class DotLottiePlayer extends LitElement {
         this._lottieInstance.pause();
     }
     snapshot() {
-        if (!this.shadowRoot) return;
+        if (!this.shadowRoot) {
+            return;
+        }
         const svgElement = this.shadowRoot.querySelector('.animation svg'), data = svgElement instanceof Node ? new XMLSerializer().serializeToString(svgElement) : null;
         if (!data) {
             console.error('Could not serialize data');
@@ -753,16 +843,22 @@ class DotLottiePlayer extends LitElement {
         return data;
     }
     setSubframe(value) {
-        if (!this._lottieInstance) return;
+        if (!this._lottieInstance) {
+            return;
+        }
         this.subframe = value;
         this._lottieInstance.setSubframe(value);
     }
     setCount(value) {
-        if (!this._lottieInstance) return;
+        if (!this._lottieInstance) {
+            return;
+        }
         this.count = value;
     }
     _freeze() {
-        if (!this._lottieInstance) return;
+        if (!this._lottieInstance) {
+            return;
+        }
         if (this.currentState) {
             this._playerState.prev = this.currentState;
         }
@@ -773,19 +869,25 @@ class DotLottiePlayer extends LitElement {
         this.dispatchEvent(new CustomEvent(PlayerEvents.Freeze));
     }
     async reload() {
-        if (!this._lottieInstance) return;
+        if (!this._lottieInstance) {
+            return;
+        }
         this._lottieInstance.destroy();
         if (this.src) {
             await this.load(this.src);
         }
     }
     setSpeed(value = 1) {
-        if (!this._lottieInstance) return;
+        if (!this._lottieInstance) {
+            return;
+        }
         this.speed = value;
         this._lottieInstance.setSpeed(value);
     }
     setDirection(value) {
-        if (!this._lottieInstance) return;
+        if (!this._lottieInstance) {
+            return;
+        }
         this.direction = value;
         this._lottieInstance.setDirection(value);
     }
@@ -803,7 +905,9 @@ class DotLottiePlayer extends LitElement {
         this.multiAnimationSettings = settings;
     }
     togglePlay() {
-        if (!this._lottieInstance) return;
+        if (!this._lottieInstance) {
+            return;
+        }
         const { currentFrame, playDirection, totalFrames } = this._lottieInstance;
         if (this.currentState === PlayerState.Playing) {
             return this.pause();
@@ -855,9 +959,13 @@ class DotLottiePlayer extends LitElement {
         setTimeout(()=>this._toggleSettings(false), 200);
     }
     _switchInstance(isPrevious = false) {
-        if (!this._animations[this._currentAnimation]) return;
+        if (!this._animations[this._currentAnimation]) {
+            return;
+        }
         try {
-            if (this._lottieInstance) this._lottieInstance.destroy();
+            if (this._lottieInstance) {
+                this._lottieInstance.destroy();
+            }
             this._lottieInstance = Lottie.loadAnimation({
                 ...this._getOptions(),
                 animationData: this._animations[this._currentAnimation]
@@ -934,7 +1042,9 @@ class DotLottiePlayer extends LitElement {
             this._intersectionObserver.disconnect();
             this._intersectionObserver = undefined;
         }
-        if (this._lottieInstance) this._lottieInstance.destroy();
+        if (this._lottieInstance) {
+            this._lottieInstance.destroy();
+        }
         document.removeEventListener('visibilitychange', this._onVisibilityChange);
     }
     renderControls() {