@aarsteinmedia/dotlottie-player 6.4.10 → 6.5.0

package/dist/chunks/{DotLottiePlayerBase-DdpA5NST.js → DotLottiePlayerBase-Dq0onB9o.js}

@@ -71,7 +71,7 @@ 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";
+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    contain: content;\n    & svg g {\n      will-change: transform;\n    }\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() {
@@ -202,21 +202,48 @@ var PlayerState = /*#__PURE__*/ function(PlayerState) {
 }({});
 const tagName = 'dotlottie-player';
 
-/**
- * Render Controls.
- */ function renderControls() {
+function advancedButtons() {
     if (!this.shadow) {
-        throw new Error('No Shadow Element');
-    }
-    const slot = this.shadow.querySelector('slot[name=controls]');
-    if (!slot) {
         return;
     }
-    if (!this.controls) {
-        slot.innerHTML = '';
+    const toggleLoop = this.shadow.querySelector('.toggleLoop');
+    if (toggleLoop instanceof HTMLButtonElement) {
+        toggleLoop.onclick = this.toggleLoop;
+    }
+    const toggleBoomerang = this.shadow.querySelector('.toggleBoomerang');
+    if (toggleBoomerang instanceof HTMLButtonElement) {
+        toggleBoomerang.onclick = this.toggleBoomerang;
+    }
+    const convertButton = this.shadow.querySelector('.convert');
+    if (convertButton instanceof HTMLButtonElement) {
+        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');
+    if (snapshot instanceof HTMLButtonElement) {
+        snapshot.onclick = ()=>this.snapshot(true);
+    }
+    const toggleSettings = this.shadow.querySelector('.toggleSettings');
+    if (toggleSettings instanceof HTMLButtonElement) {
+        toggleSettings.onclick = this._handleSettingsClick;
+        toggleSettings.onblur = this._handleBlur;
+    }
+}
+function handleButtons() {
+    if (!this.shadow) {
         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="${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;
@@ -244,41 +271,28 @@ const tagName = 'dotlottie-player';
         seeker.onchange = this._handleSeekChange;
         seeker.onmousedown = this._freeze;
     }
-    if (!this.simple) {
-        const toggleLoop = this.shadow.querySelector('.toggleLoop');
-        if (toggleLoop instanceof HTMLButtonElement) {
-            toggleLoop.onclick = this.toggleLoop;
-        }
-        const toggleBoomerang = this.shadow.querySelector('.toggleBoomerang');
-        if (toggleBoomerang instanceof HTMLButtonElement) {
-            toggleBoomerang.onclick = this.toggleBoomerang;
-        }
-        const convertButton = this.shadow.querySelector('.convert');
-        if (convertButton instanceof HTMLButtonElement) {
-            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');
-        if (snapshot instanceof HTMLButtonElement) {
-            snapshot.onclick = ()=>this.snapshot(true);
-        }
-        const toggleSettings = this.shadow.querySelector('.toggleSettings');
-        if (toggleSettings instanceof HTMLButtonElement) {
-            toggleSettings.onclick = this._handleSettingsClick;
-            toggleSettings.onblur = this._handleBlur;
-        }
+    if (this.simple) {
+        return;
+    }
+    advancedButtons.call(this);
+}
+/**
+ * Render Controls.
+ */ function renderControls() {
+    if (!this.shadow) {
+        throw new Error('No Shadow Element');
+    }
+    const slot = this.shadow.querySelector('slot[name=controls]');
+    if (!slot) {
+        return;
+    }
+    if (!this.controls) {
+        slot.innerHTML = '';
+        return;
     }
+    const convertLabel = this.isDotLottie ? 'dotLottie animation to JSON format' : 'JSON animation to dotLottie format', convertButtonText = this.isDotLottie ? 'Convert to JSON' : 'Convert to dotLottie';
+    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 ${convertLabel}" hidden>${convertIcon} ${convertButtonText}</button> <button class="snapshot" aria-label="Download still image">${downloadIcon} Download still image</button></div>`}</div>`;
+    handleButtons.call(this);
 }
 function updatePlayPauseButton(togglePlay, state) {
     const isActive = state === PlayerState.Playing || state === PlayerState.Paused;
@@ -713,15 +727,14 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
    * Player state.
    */ this.playerState = PlayerState.Loading, /**
    * Animation Container.
-   */ this._container = null, this._DOMRect = null, this._errorMessage = 'Something went wrong', this._identifier = this.id || createElementID(), /**
+   */ this._container = null, this._errorMessage = 'Something went wrong', this._identifier = this.id || createElementID(), /**
    * Whether settings toolbar is open.
    */ this._isSettingsOpen = false, this._playerState = {
             count: 0,
+            frame: 0,
             loaded: false,
-            prev: PlayerState.Loading,
-            scrollTimeout: null,
-            scrollY: 0,
-            visible: false
+            playTimeout: null,
+            prev: PlayerState.Loading
         }, this._render = renderPlayer, /**
    * Seeker.
    */ this._seeker = 0, /**
@@ -730,7 +743,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
    * on load, if controls are visible.
    */ this._animations = [], this._controlsLoadId = 0, /**
    * Which animation to show, if several.
-   */ this._currentAnimation = 0, this._errorLoadId = 0, this._isBounce = false, this._isDotLottie = false, this._lottieInstance = null, /**
+   */ this._currentAnimation = 0, this._errorLoadId = 0, this._isBounce = false, this._isDotLottie = false, this._isIntersecting = false, this._lottieInstance = null, /**
    * Multi-animation settings.
    */ this._multiAnimationSettings = [], this._renderControls = async ()=>{
             const slot = this.shadow?.querySelector('slot[name=controls]');
@@ -755,13 +768,13 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
         this._freeze = this._freeze.bind(this);
         this._handleBlur = this._handleBlur.bind(this);
         this._handleClick = this._handleClick.bind(this);
-        this._handleScroll = this._handleScroll.bind(this);
         this._handleSeekChange = this._handleSeekChange.bind(this);
         this._handleWindowBlur = this._handleWindowBlur.bind(this);
         this._loopComplete = this._loopComplete.bind(this);
         this._mouseEnter = this._mouseEnter.bind(this);
         this._mouseLeave = this._mouseLeave.bind(this);
         this._onVisibilityChange = this._onVisibilityChange.bind(this);
+        this._scrollLoop = this._scrollLoop.bind(this);
         this._switchInstance = this._switchInstance.bind(this);
         this._handleSettingsClick = this._handleSettingsClick.bind(this);
         this.togglePlay = this.togglePlay.bind(this);
@@ -782,7 +795,8 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
     }
     /**
    * Runs when the value of an attribute is changed on the component.
-   */ async attributeChangedCallback(name, _oldValue, value) {
+   */ // eslint-disable-next-line sonarjs/cognitive-complexity
+    async attributeChangedCallback(name, _oldValue, value) {
         if (!this._lottieInstance || !this.shadow || !this._container) {
             return;
         }
@@ -791,13 +805,12 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
                 {
                     if (value === '' || Boolean(value)) {
                         this._lottieInstance.autoplay = false;
-                        addEventListener('scroll', this._handleScroll, {
-                            capture: true,
-                            passive: true
-                        });
+                        if (this._isIntersecting) {
+                            this._startScrollLoop();
+                        }
                         return;
                     }
-                    removeEventListener('scroll', this._handleScroll, true);
+                    this._stopScrollLoop();
                     break;
                 }
             case 'autoplay':
@@ -905,8 +918,8 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
    * Initialize everything on component first render.
    */ connectedCallback() {
         super.connectedCallback();
-        try {
-            void (async ()=>{
+        void (async ()=>{
+            try {
                 await this._render();
                 if (!this.shadow) {
                     throw new Error('Missing Shadow element');
@@ -918,16 +931,13 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
                 if (typeof document.hidden !== 'undefined') {
                     document.addEventListener('visibilitychange', this._onVisibilityChange);
                 }
-                if (this._container) {
-                    this._DOMRect = this._container.getBoundingClientRect();
-                }
                 // Add intersection observer for detecting component being out-of-view.
                 this._addIntersectionObserver();
                 this.dispatchEvent(new CustomEvent(PlayerEvent.Rendered));
-            })();
-        } catch (error) {
-            void this._handleError(error);
-        }
+            } catch (error) {
+                void this._handleError(error);
+            }
+        })();
     }
     convert(_params) {
         throw new Error(notImplemented);
@@ -938,9 +948,11 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
         if (!this._lottieInstance?.destroy) {
             return;
         }
+        this._cancelScrollProbe();
         this.playerState = PlayerState.Destroyed;
         this._lottieInstance.destroy();
         this._lottieInstance = null;
+        this._stopScrollLoop();
         this.dispatchEvent(new CustomEvent(PlayerEvent.Destroyed));
         this.remove();
         document.removeEventListener('visibilitychange', this._onVisibilityChange);
@@ -949,9 +961,14 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
    * Cleanup on component destroy.
    */ disconnectedCallback() {
         // Remove intersection observer for detecting component being out-of-view
-        if (this._intersectionObserver) {
-            this._intersectionObserver.disconnect();
-            this._intersectionObserver = undefined;
+        this._intersectionObserver?.disconnect();
+        this._intersectionObserver = undefined;
+        this._cancelScrollProbe();
+        if (this._playerState.scrollLoopId) {
+            cancelAnimationFrame(this._playerState.scrollLoopId);
+        }
+        if (this._playerState.playTimeout) {
+            clearTimeout(this._playerState.playTimeout);
         }
         // Remove the attached Visibility API's change event listener
         document.removeEventListener('visibilitychange', this._onVisibilityChange);
@@ -991,19 +1008,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
             if (!animations?.every(isLottie)) {
                 throw new Error('Broken or corrupted file');
             }
-            const ldScript = this.parentElement?.querySelector('script[type="application/ld+json"]');
-            if (ldScript) {
-                const settings = JSON.parse(ldScript.innerHTML);
-                if (settings.selector) {
-                    this.selector = settings.selector;
-                }
-                if (settings.segment) {
-                    this.setSegment(settings.segment);
-                }
-                if (settings.multiAnimationSettings) {
-                    this.setMultiAnimationSettings(settings.multiAnimationSettings);
-                }
-            }
+            this._handleLdScript();
             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;
@@ -1046,6 +1051,10 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
             this._lottieInstance.setSpeed(speed);
             this._lottieInstance.setDirection(direction);
             this._lottieInstance.setSubframe(Boolean(this.subframe));
+            // Set progress on load if AnimateOnScroll
+            if (this.animateOnScroll) {
+                this._applyScrollProgress();
+            }
             // Start playing if autoplay is enabled
             if ((this.autoplay || this.animateOnScroll || this.playOnVisible) && this.direction === -1) {
                 this.seek('99%');
@@ -1156,7 +1165,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
             return;
         }
         // Extract frame number from either number or percentage value
-        const matches = value.toString().match(/^(\d+)(%?)$/);
+        const matches = RegExp(/^(\d+)(%?)$/).exec(value.toString());
         if (!matches) {
             return;
         }
@@ -1345,9 +1354,12 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
     /**
    * Handle blur.
    */ _handleBlur() {
-        setTimeout(()=>{
+        const blurTimeout = setTimeout(()=>{
             this._toggleSettings(false);
         }, 200);
+        if (!this._isSettingsOpen) {
+            clearTimeout(blurTimeout);
+        }
     }
     /**
    * Handle click.
@@ -1407,51 +1419,61 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
         if (!this._container || this._intersectionObserver) {
             return;
         }
-        if (!('IntersectionObserver' in window)) {
-            this._intersectionObserverFallback();
-            removeEventListener('scroll', this._intersectionObserverFallback, true);
-            addEventListener('scroll', this._intersectionObserverFallback, {
-                capture: true,
-                passive: true
-            });
-            return;
-        }
-        this._intersectionObserver = new IntersectionObserver((entries)=>{
-            const { length } = entries;
-            for(let i = 0; i < length; i++){
-                if (!entries[i]?.isIntersecting || document.hidden) {
-                    if (this.playerState === PlayerState.Playing) {
-                        this._freeze();
-                    }
-                    this._playerState.visible = false;
-                    continue;
-                }
-                if (!this.animateOnScroll && !this.playOnVisible && this.playerState === PlayerState.Frozen) {
-                    this.play();
-                }
-                if (this.playOnVisible) {
-                    if (this.playerState === PlayerState.Completed && !this.once) {
-                        this.playerState = PlayerState.Playing;
-                        this._lottieInstance?.goToAndPlay(this.direction === 1 ? 0 : this._lottieInstance.totalFrames);
-                    } else {
-                        setTimeout(()=>{
-                            this.play();
-                        }, this.delay);
-                    }
+        this._intersectionObserver = new IntersectionObserver(([{ isIntersecting }])=>{
+            this._isIntersecting = isIntersecting;
+            if (this.animateOnScroll) {
+                if (isIntersecting) {
+                    this._startScrollLoop();
+                } else {
+                    this._stopScrollLoop();
                 }
-                /**
-         * If the player is a ways down the page, we need to account for this by
-         * setting _playerState.scrollY to the current scroll position. However, we
-         * also need to check that the player hasn't been scrolled past, so we check
-         * boundingClientRect as well.
-         */ if (!this._playerState.scrollY && (entries[i]?.boundingClientRect.y || 0) > 0) {
-                    this._playerState.scrollY = scrollY;
+                return;
+            }
+            if (!isIntersecting || document.hidden) {
+                if (this.playerState === PlayerState.Playing) {
+                    this._freeze();
                 }
-                this._playerState.visible = true;
+                return;
+            }
+            if (!this.playOnVisible && this.playerState === PlayerState.Frozen) {
+                this.play();
+            }
+            if (!this.playOnVisible) {
+                return;
+            }
+            if (this.playerState === PlayerState.Completed && !this.once) {
+                this.playerState = PlayerState.Playing;
+                this._lottieInstance?.goToAndPlay(this.direction === 1 ? 0 : this._lottieInstance.totalFrames);
+                return;
+            }
+            this._playerState.playTimeout = setTimeout(()=>{
+                this.play();
+            }, this.delay);
+            if (this.playerState === PlayerState.Playing) {
+                clearTimeout(this._playerState.playTimeout);
             }
         });
         this._intersectionObserver.observe(this._container);
     }
+    _applyScrollProgress() {
+        if (!this.animateOnScroll || !this._lottieInstance) {
+            return;
+        }
+        const progress = this._getScrollProgress();
+        if (progress === null) {
+            return;
+        }
+        const { totalFrames } = this._lottieInstance, frame = progress * (totalFrames - 1), epsilon = this.subframe ? 0.1 : 0.5;
+        if (Math.abs(frame - this._playerState.frame) < epsilon) {
+            return;
+        }
+        this._playerState.frame = frame;
+        this._lottieInstance.goToAndStop(frame, true);
+    }
+    _cancelScrollProbe() {
+        this._scrollProbe?.cancel();
+        this._scrollProbe = undefined;
+    }
     _clearPrevious() {
         this._lottieInstance?.destroy();
         const figure = this.shadow?.querySelector('.animation');
@@ -1553,6 +1575,30 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
             rendererType: this.renderer
         });
     }
+    _getScrollProgress() {
+        if (!this._container) {
+            return null;
+        }
+        if ('ViewTimeline' in window) {
+            this._scrollProbe ??= this._container.animate({
+                '--dotlottie-scroll': [
+                    0,
+                    1
+                ]
+            }, {
+                fill: 'both',
+                rangeEnd: 'cover 100%',
+                rangeStart: 'cover 0%',
+                timeline: new ViewTimeline({
+                    axis: 'block',
+                    subject: this._container
+                })
+            });
+            return this._scrollProbe.effect?.getComputedTiming().progress ?? null;
+        }
+        const { height, top } = this._container.getBoundingClientRect(), viewport = visualViewport?.height ?? innerHeight;
+        return clamp((viewport - top) / (viewport + height), 0, 1);
+    }
     async _handleError(error) {
         this.playerState = PlayerState.Error;
         if (!this.quiet) {
@@ -1562,44 +1608,37 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
         this.dispatchEvent(new CustomEvent(PlayerEvent.Error));
         console.error(error);
     }
-    /**
-   * Handle scroll.
-   */ _handleScroll() {
-        if (!this.animateOnScroll || !this._DOMRect || !this._lottieInstance) {
+    _handleLdScript() {
+        const ldScript = this.parentElement?.querySelector('script[type="application/ld+json"]');
+        if (!ldScript) {
             return;
         }
-        if (isServer) {
-            console.warn('DotLottie: Scroll animations might not work properly in a Server Side Rendering context. Try to wrap this in a client component.');
-            return;
+        const settings = JSON.parse(ldScript.innerHTML);
+        if (settings.selector) {
+            this.selector = settings.selector;
         }
-        if (!this._playerState.visible) {
+        if (settings.segment) {
+            this.setSegment(settings.segment);
+        }
+        if (settings.multiAnimationSettings) {
+            this.setMultiAnimationSettings(settings.multiAnimationSettings);
+        }
+    }
+    _handleSelector(method) {
+        if (!this.selector) {
             return;
         }
-        if (this._playerState.scrollTimeout) {
-            clearTimeout(this._playerState.scrollTimeout);
-        }
-        this._playerState.scrollTimeout = setTimeout(()=>{
-            this.playerState = PlayerState.Paused;
-        }, 400);
-        const { totalFrames } = this._lottieInstance;
-        let scrollPosition = scrollY - this._playerState.scrollY;
-        if (scrollY <= this._playerState.scrollY) {
-            scrollPosition = this._playerState.scrollY - scrollY;
-        }
-        const { bottom, height, top } = this._DOMRect;
-        let offset = height - bottom;
-        if (top >= innerHeight) {
-            offset = height;
-        }
-        const scrollProgress = scrollPosition / (innerHeight + offset), currentFrame = clamp(scrollProgress * (totalFrames - 1), 0, totalFrames);
-        requestAnimationFrame(()=>{
-            if (currentFrame >= totalFrames) {
-                this.playerState = PlayerState.Paused;
-                return;
+        const selector = document.getElementById(this.selector);
+        if (selector) {
+            if (this.hover) {
+                selector[method]('mouseenter', this._mouseEnter);
+                selector[method]('mouseleave', this._mouseLeave);
+            } else {
+                selector[method]('click', this._handleClick);
             }
-            this.playerState = PlayerState.Playing;
-            this._lottieInstance?.goToAndStop(currentFrame, true);
-        });
+        } else {
+            this.selector = null;
+        }
     }
     _handleWindowBlur({ type }) {
         if (this.dontFreezeOnBlur) {
@@ -1612,20 +1651,6 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
             this.play();
         }
     }
-    _intersectionObserverFallback() {
-        if (!this._container) {
-            return;
-        }
-        const { bottom, left, right, top } = this._container.getBoundingClientRect();
-        this._playerState.visible = top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
-        if (this.autoplay || this.playOnVisible || this.playerState === PlayerState.Playing || this.playerState === PlayerState.Frozen) {
-            if (this._playerState.visible) {
-                this.play();
-            } else {
-                this._freeze();
-            }
-        }
-    }
     _loopComplete() {
         if (!this._lottieInstance) {
             return;
@@ -1698,10 +1723,6 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
                 }
             case MouseOut.Reverse:
                 {
-                    // const { direction = 1 } =
-                    //   this._multiAnimationSettings.length > 0 ?
-                    //     this._multiAnimationSettings[this._currentAnimation + 1] ?? { direction: 1 } : this,
-                    //   newDirection = direction * -1 as AnimationDirection
                     this._lottieInstance.setDirection(-1);
                     this.play();
                     break;
@@ -1728,6 +1749,25 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
    */ _removeEventListeners() {
         this._toggleEventListeners('remove');
     }
+    _scrollLoop() {
+        this._playerState.scrollLoopId = requestAnimationFrame(this._scrollLoop);
+        this._applyScrollProgress();
+    }
+    _startScrollLoop() {
+        if (isServer) {
+            console.warn('DotLottie: Scroll animations will not work in a Server Side Rendering context. Try to wrap this in a client component.');
+            return;
+        }
+        this._playerState.scrollLoopId ??= requestAnimationFrame(this._scrollLoop);
+    }
+    _stopScrollLoop() {
+        if (this._playerState.scrollLoopId === undefined) {
+            return;
+        }
+        cancelAnimationFrame(this._playerState.scrollLoopId);
+        this._playerState.scrollLoopId = undefined;
+        this._applyScrollProgress();
+    }
     _switchInstance(isPrevious = false) {
         // Bail early if there is not animation to play
         if (!this._animations[this._currentAnimation]) {
@@ -1735,9 +1775,8 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
         }
         try {
             // Clear previous animation
-            if (this._lottieInstance) {
-                this._lottieInstance.destroy();
-            }
+            this._lottieInstance?.destroy();
+            this._cancelScrollProbe();
             // Re-initialize lottie player
             this._lottieInstance = this.loadAnimation({
                 ...this._getOptions(),
@@ -1753,7 +1792,8 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
             this.dispatchEvent(new CustomEvent(isPrevious ? PlayerEvent.Previous : PlayerEvent.Next));
             if (this._multiAnimationSettings[this._currentAnimation]?.autoplay ?? this.autoplay) {
                 if (this.animateOnScroll) {
-                    this._lottieInstance.goToAndStop(0, true);
+                    // Get instant scroll position
+                    this._applyScrollProgress();
                     this.playerState = PlayerState.Paused;
                     return;
                 }
@@ -1781,19 +1821,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
             this._lottieInstance[method](PlayerEvent.DataReady, this._dataReady);
             this._lottieInstance[method](PlayerEvent.DataFailed, this._dataFailed);
         }
-        if (this.selector) {
-            const selector = document.getElementById(this.selector);
-            if (selector) {
-                if (this.hover) {
-                    selector[method]('mouseenter', this._mouseEnter);
-                    selector[method]('mouseleave', this._mouseLeave);
-                } else {
-                    selector[method]('click', this._handleClick);
-                }
-            } else {
-                this.selector = null;
-            }
-        }
+        this._handleSelector(method);
         if (this._container && !this.selector) {
             if (this.hover) {
                 this._container[method]('mouseenter', this._mouseEnter);
@@ -1811,12 +1839,6 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
             capture: false,
             passive: true
         });
-        if (this.animateOnScroll) {
-            window[method]('scroll', this._handleScroll, {
-                capture: true,
-                passive: true
-            });
-        }
     }
     /**
    * Toggle show Settings.