@aarsteinmedia/dotlottie-player 6.5.3 → 6.5.5

package/dist/chunks/{DotLottiePlayerBase-B9TsipSe.js → DotLottiePlayerBase-O43LyqdS.js}

@@ -1,5 +1,5 @@
 import { getAnimationData } from '@aarsteinmedia/lottie-web/dotlottie';
-import { isServer, PlayMode, PreserveAspectRatio, RendererType, createElementID, PlayerEvent, download, getFilename, clamp } from '@aarsteinmedia/lottie-web/utils';
+import { isServer, PreserveAspectRatio, PlayMode, RendererType, createElementID, clamp, PlayerEvent, download, getFilename } from '@aarsteinmedia/lottie-web/utils';
 
 let modulePromise$1;
 function loadControlsModule() {
@@ -71,46 +71,7 @@ if (isServer) {
     }
 }
 
-var css_248z = "*{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:#0003;--lottie-player-seeker-thumb-color:#4285f4;--lottie-player-seeker-display:block;height:100%;width:100%;&:not([hidden]){display:block}.main{display:flex;flex-direction:column;height:100%;margin:0;padding:0;width:100%}.animation{contain:content;display:flex;height:100%;margin:0;padding:0;width:100%;& svg g{will-change:transform}}[data-controls=true] .animation{height:calc(100% - 35px)}.animation-container{position:relative}.popover{animation:fade-in .2s ease-in-out;background-color:var(--lottie-player-toolbar-background-color);border:2px solid var(--lottie-player-toolbar-icon-color);border-radius:5px;bottom:40px;padding:10px 15px;position:absolute;right:5px;&:before{border:7px solid #0000;border-top:7px solid var(--lottie-player-toolbar-icon-color);content:\"\";height:0;margin-right:-7px;pointer-events:none;position:absolute;right:10px;top:100%;width:0}}.error{align-items:center;display:flex;height:100%;justify-content:center;margin:auto;& svg{height:auto;width:100%}}.toolbar{background:var(--lottie-player-toolbar-background-color);border-radius:5px;display:flex;gap:5px;height:35px;margin:0;padding:5px;place-items:center center;&.has-error{opacity:.5;pointer-events:none}& button{fill:var(--lottie-player-toolbar-icon-color);align-items:center;background:none;border:0;color:var(--lottie-player-toolbar-icon-color);cursor:pointer;gap:5px;height:100%;margin:0;opacity:.9;outline:0;padding:0;&:not([hidden]){display:flex}&:hover{opacity:1}&[data-active=true]{fill:var(--lottie-player-toolbar-icon-active-color);opacity:1}&:disabled{opacity:.5}&:focus{outline:0}& svg{pointer-events:none;&>*{fill:inherit}}&.disabled svg{display:none}}}.progress-container{position:relative;width:100%;&.simple{margin-right:12px}}& progress{appearance:none;background-color:var(--lottie-player-seeker-track-color);border:0;border-radius:3px;height:5px;left:0;margin:7.5px 0;outline:none;pointer-events:none;position:absolute;top:0;width:100%;&::-webkit-progress-inner-element{border-radius:3px;overflow:hidden}&::-webkit-slider-runnable-track{background-color:initial}&::-webkit-progress-value{background-color:var(--lottie-player-seeker-thumb-color)}}.seeker{appearance:none;background-color:initial;border:0;border-radius:3px;color:var(--lottie-player-seeker-thumb-color);cursor:pointer;display:var(--lottie-player-seeker-display);height:20px;margin:0;outline:none;padding:7.5px 0;position:relative;width:100%;z-index:1;&::-webkit-slider-runnable-track,&::-webkit-slider-thumb{appearance:none;outline:none}&::-webkit-slider-thumb{background-color:var(--lottie-player-seeker-thumb-color);border:0;border-radius:50%;cursor:pointer;height:15px;transform:scale(0);-webkit-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;width:15px}&:focus::-webkit-slider-thumb,&:hover::-webkit-slider-thumb{transform:scale(1)}&::-moz-range-progress{background-color:var(--lottie-player-seeker-thumb-color);border-radius:3px;height:5px}&::-moz-range-thumb{background-color:var(--lottie-player-seeker-thumb-color);border:0;border-radius:50%;cursor:pointer;height:15px;transform:scale(0);-moz-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;width:15px}&:focus::-moz-range-thumb,&:hover::-moz-range-thumb{transform:scale(1)}&::-ms-track{background:#0000;border-color:#0000;color:#0000;cursor:pointer;height:5px;width:100%}&::-ms-fill-upper{background:var(--lottie-player-seeker-track-color);border-radius:3px}&::-ms-fill-lower{background-color:var(--lottie-player-seeker-thumb-color);border-radius:3px}&::-ms-thumb{background:var(--lottie-player-seeker-thumb-color);border:0;border-radius:50%;cursor:pointer;height:15px;transform:scale(0);-ms-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;width:15px}&:hover::-ms-thumb{transform:scale(1)}&:focus{&::-ms-thumb{transform:scale(1)}&::-ms-fill-lower,&::-ms-fill-upper{background:var(--lottie-player-seeker-track-color)}}}& ::-moz-progress-bar{background-color:var(--lottie-player-seeker-thumb-color)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@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:#fff9}}";
-
-let dotlottieTools = null, loadPromise = null;
-function loadDotLottieTools() {
-    if (dotlottieTools) {
-        return Promise.resolve(dotlottieTools);
-    }
-    loadPromise = loadPromise ?? (async ()=>{
-        const { addAnimation, convert } = await import('@aarsteinmedia/lottie-web/dotlottie');
-        dotlottieTools = {
-            addAnimation,
-            convert
-        };
-        return {
-            addAnimation,
-            convert
-        };
-    })();
-    return loadPromise;
-}
-
-const boomerangIcon = /* HTML */ `<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="m11.8 13.2-.3.3c-.5.5-1.1 1.1-1.7 1.5-.5.4-1 .6-1.5.8-.5.2-1.1.3-1.6.3s-1-.1-1.5-.3c-.6-.2-1-.5-1.4-1-.5-.6-.8-1.2-.9-1.9-.2-.9-.1-1.8.3-2.6.3-.7.8-1.2 1.3-1.6.3-.2.6-.4 1-.5.2-.2.5-.2.8-.3.3 0 .7-.1 1 0 .3 0 .6.1.9.2.9.3 1.7.9 2.4 1.5.4.4.8.7 1.1 1.1l.1.1.4-.4c.6-.6 1.2-1.2 1.9-1.6.5-.3 1-.6 1.5-.7.4-.1.7-.2 1-.2h.9c1 .1 1.9.5 2.6 1.4.4.5.7 1.1.8 1.8.2.9.1 1.7-.2 2.5-.4.9-1 1.5-1.8 2-.4.2-.7.4-1.1.4-.4.1-.8.1-1.2.1-.5 0-.9-.1-1.3-.3-.8-.3-1.5-.9-2.1-1.5-.4-.4-.8-.7-1.1-1.1h-.3zm-1.1-1.1c-.1-.1-.1-.1 0 0-.3-.3-.6-.6-.8-.9-.5-.5-1-.9-1.6-1.2-.4-.3-.8-.4-1.3-.4-.4 0-.8 0-1.1.2-.5.2-.9.6-1.1 1-.2.3-.3.7-.3 1.1 0 .3 0 .6.1.9.1.5.4.9.8 1.2.5.4 1.1.5 1.7.5.5 0 1-.2 1.5-.5.6-.4 1.1-.8 1.6-1.3.1-.3.3-.5.5-.6zM13 12c.5.5 1 1 1.5 1.4.5.5 1.1.9 1.9 1 .4.1.8 0 1.2-.1.3-.1.6-.3.9-.5.4-.4.7-.9.8-1.4.1-.5 0-.9-.1-1.4-.3-.8-.8-1.2-1.7-1.4-.4-.1-.8-.1-1.2 0-.5.1-1 .4-1.4.7-.5.4-1 .8-1.4 1.2-.2.2-.4.3-.5.5z"/></svg>`;
-
-const convertIcon = /* HTML */ `<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z"/></svg>`;
-
-const downloadIcon = /* HTML */ `<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M16.8 10.8 12 15.6l-4.8-4.8h3V3.6h3.6v7.2h3zM12 15.6H3v4.8h18v-4.8h-9zm7.8 2.4h-2.4v-1.2h2.4V18z"/></svg>`;
-
-const loopIcon = /* HTML */ `<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z"/></svg>`;
-
-const nextIcon = /* HTML */ `<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="m6.1 5.8 9.8 6.2-9.8 6.2V5.8zM16.4 5.8h1.5v12.4h-1.5z"/></svg>`;
-
-const pauseIcon = /* HTML */ `<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M14.016 5.016H18v13.969h-3.984V5.016zM6 18.984V5.015h3.984v13.969H6z"/></svg>`;
-
-const playIcon = /* HTML */ `<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M8.016 5.016L18.985 12 8.016 18.984V5.015z"/></svg>`;
-
-const prevIcon = /* HTML */ `<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M17.9 18.2 8.1 12l9.8-6.2v12.4zm-10.3 0H6.1V5.8h1.5v12.4z"/></svg>`;
-
-const settingsIcon = /* HTML */ `<svg width="24" height="24" aria-hidden="true" focusable="false"><circle cx="12" cy="5.4" r="2.5"/><circle cx="12" cy="12" r="2.5"/><circle cx="12" cy="18.6" r="2.5"/></svg>`;
-
-const stopIcon = /* HTML */ `<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M6 6h12v12H6V6z"/></svg>`;
+var css_248z = "*{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:#0003;--lottie-player-seeker-thumb-color:#4285f4;--lottie-player-seeker-display:block;height:100%;width:100%;&:not([hidden]){display:block}& .main{display:flex;flex-direction:column;height:100%;margin:0;padding:0;width:100%}& .animation{contain:content;display:flex;height:100%;margin:0;padding:0;width:100%;& svg g{will-change:transform}}& [data-controls=true] .animation{height:calc(100% - 35px)}& .animation-container{position:relative}& .popover{animation:fade-in .2s ease-in-out;background-color:var(--lottie-player-toolbar-background-color);border:2px solid var(--lottie-player-toolbar-icon-color);border-radius:5px;bottom:40px;padding:10px 15px;position:absolute;right:5px;&:before{border:7px solid #0000;border-top:7px solid var(--lottie-player-toolbar-icon-color);content:\"\";height:0;margin-right:-7px;pointer-events:none;position:absolute;right:10px;top:100%;width:0}}& .error{align-items:center;display:flex;height:100%;justify-content:center;margin:auto;& svg{height:auto;width:100%}}& .toolbar{background:var(--lottie-player-toolbar-background-color);border-radius:5px;display:flex;gap:5px;height:35px;margin:0;padding:5px;place-items:center center;&.has-error{opacity:.5;pointer-events:none}& button{fill:var(--lottie-player-toolbar-icon-color);align-items:center;background:none;border:0;color:var(--lottie-player-toolbar-icon-color);cursor:pointer;gap:5px;height:100%;margin:0;opacity:.9;outline:0;padding:0;&:not([hidden]){display:flex}&:hover{opacity:1}&[data-active=true]{fill:var(--lottie-player-toolbar-icon-active-color);opacity:1}&:disabled{opacity:.5}&:focus{outline:0}& svg{pointer-events:none;&>*{fill:inherit}}&.disabled svg{display:none}}}& .progress-container{position:relative;width:100%;&.simple{margin-right:12px}}& progress{appearance:none;background-color:var(--lottie-player-seeker-track-color);border:0;border-radius:3px;height:5px;left:0;margin:7.5px 0;outline:none;pointer-events:none;position:absolute;top:0;width:100%;&::-webkit-progress-inner-element{border-radius:3px;overflow:hidden}&::-webkit-slider-runnable-track{background-color:initial}&::-webkit-progress-value{background-color:var(--lottie-player-seeker-thumb-color)}}& .seeker{appearance:none;background-color:initial;border:0;border-radius:3px;color:var(--lottie-player-seeker-thumb-color);cursor:pointer;display:var(--lottie-player-seeker-display);height:20px;margin:0;outline:none;padding:7.5px 0;position:relative;width:100%;z-index:1;&::-webkit-slider-runnable-track,&::-webkit-slider-thumb{appearance:none;outline:none}&::-webkit-slider-thumb{background-color:var(--lottie-player-seeker-thumb-color);border:0;border-radius:50%;cursor:pointer;height:15px;transform:scale(0);-webkit-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;width:15px}&:focus::-webkit-slider-thumb,&:hover::-webkit-slider-thumb{transform:scale(1)}&::-moz-range-progress{background-color:var(--lottie-player-seeker-thumb-color);border-radius:3px;height:5px}&::-moz-range-thumb{background-color:var(--lottie-player-seeker-thumb-color);border:0;border-radius:50%;cursor:pointer;height:15px;transform:scale(0);-moz-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;width:15px}&:focus::-moz-range-thumb,&:hover::-moz-range-thumb{transform:scale(1)}&::-ms-track{background:#0000;border-color:#0000;color:#0000;cursor:pointer;height:5px;width:100%}&::-ms-fill-upper{background:var(--lottie-player-seeker-track-color);border-radius:3px}&::-ms-fill-lower{background-color:var(--lottie-player-seeker-thumb-color);border-radius:3px}&::-ms-thumb{background:var(--lottie-player-seeker-thumb-color);border:0;border-radius:50%;cursor:pointer;height:15px;transform:scale(0);-ms-transition:transform .2s ease-in-out;transition:transform .2s ease-in-out;width:15px}&:hover::-ms-thumb{transform:scale(1)}&:focus{&::-ms-thumb{transform:scale(1)}&::-ms-fill-lower,&::-ms-fill-upper{background:var(--lottie-player-seeker-track-color)}}}& ::-moz-progress-bar{background-color:var(--lottie-player-seeker-thumb-color)}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@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:#fff9}}";
 
 var ObjectFit = /*#__PURE__*/ function(ObjectFit) {
     ObjectFit["Contain"] = "contain";
@@ -139,135 +100,6 @@ var PlayerState = /*#__PURE__*/ function(PlayerState) {
     return PlayerState;
 }({});
 
-function advancedButtons() {
-    if (!this.shadow) {
-        return;
-    }
-    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;
-    }
-    const togglePlay = this.shadow.querySelector('.togglePlay');
-    if (togglePlay instanceof HTMLButtonElement) {
-        togglePlay.onclick = this.togglePlay;
-    }
-    const stopButton = this.shadow.querySelector('.stop');
-    if (stopButton instanceof HTMLButtonElement) {
-        stopButton.onclick = this.stop;
-    }
-    const prevButton = this.shadow.querySelector('.prev');
-    if (prevButton instanceof HTMLButtonElement) {
-        if (this.animations.length > 0 && this.currentAnimation) {
-            prevButton.hidden = false;
-        }
-        prevButton.onclick = this.prev;
-    }
-    const nextButton = this.shadow.querySelector('.next');
-    if (nextButton instanceof HTMLButtonElement) {
-        if (this.animations.length > 0 && this.currentAnimation < this.animations.length - 1) {
-            nextButton.hidden = false;
-        }
-        nextButton.onclick = this.next;
-    }
-    const seeker = this.shadow.querySelector('.seeker');
-    if (seeker instanceof HTMLInputElement) {
-        seeker.onchange = this._handleSeekChange;
-        seeker.onmousedown = this._freeze;
-    }
-    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;
-    togglePlay.dataset.active = isActive.toString();
-    togglePlay.innerHTML = state === PlayerState.Playing ? pauseIcon : playIcon;
-}
-
-var controls = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  renderControls: renderControls,
-  updatePlayPauseButton: updatePlayPauseButton
-});
-
-/**
- * Render Player.
- */ async function renderPlayer() {
-    if (!this.shadow || !this.template) {
-        throw new Error('No Shadow Element or Template');
-    }
-    let langAttribute = '';
-    /**
-   * If player has aria-description, it's safe to assume
-   * language should be the same as `document.documentElement.lang`.
-   * Accessible labels on controls are only in English, so with no
-   * aria tag, and controls enabled, lang should reflect this.
-   * With neither controls or description, the lang attribute is
-   * not needed.
-   */ if (this.description || this.controls) {
-        const lang = this.description ? document.documentElement.lang : 'en';
-        langAttribute = `lang="${lang}"`;
-    }
-    this.template.innerHTML = /* HTML */ `<div class="animation-container main" data-controls="${this.controls ?? false}" ${langAttribute}><figure class="animation" style="background:${this.background}" ${this.description ? `aria-label="${this.description}"` : ''}></figure><slot name="controls"></slot></div>`;
-    this.shadow.adoptedStyleSheets = [
-        await DotLottiePlayerBase.styles()
-    ];
-    this.shadow.appendChild(this.template.content.cloneNode(true));
-}
-
 /**
  * Get extension from filename, URL or path.
  */ const aspectRatio = (objectFit)=>{
@@ -334,42 +166,12 @@ var controls = /*#__PURE__*/Object.freeze({
 
 const tagName = 'dotlottie-player', hasReducedMotion = !isServer && matchMedia('(prefers-reduced-motion: reduce)').matches, hasIOSupport = !isServer && 'IntersectionObserver' in window, hasVTSupport = !isServer && 'ViewTimeline' in window;
 
-const notImplemented = 'Method is not implemented', getStyles = async ()=>{
+const getStyles = async ()=>{
     const styleSheet = new CSSStyleSheet();
     await styleSheet.replace(css_248z);
     return styleSheet;
-};
-/**
- * DotLottie Player Web Component.
- */ class DotLottiePlayerBase extends PropertyCallbackElement {
-    /**
-   * Attributes to observe.
-   */ static get observedAttributes() {
-        return [
-            'animateOnScroll',
-            'autoplay',
-            'controls',
-            'direction',
-            'hover',
-            'loop',
-            'mode',
-            'playOnClick',
-            'playOnVisible',
-            'selector',
-            'speed',
-            'src',
-            'subframe'
-        ];
-    }
-    static get observedProperties() {
-        return [
-            'playerState',
-            '_isSettingsOpen',
-            '_seeker',
-            '_currentAnimation',
-            '_animations'
-        ];
-    }
+}, notImplemented$1 = 'Method is not implemented';
+class BaseElement extends PropertyCallbackElement {
     /**
    * Return the styles for the component.
    */ static get styles() {
@@ -492,9 +294,6 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
         }
         return 0;
     }
-    get isDotLottie() {
-        return this._isDotLottie;
-    }
     /**
    * Loop animation.
    */ set loop(value) {
@@ -588,99 +387,461 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
         }
         return null;
     }
-    /**
-   * Whether to display error screen on load error.
-   */ set quiet(value) {
-        this.setAttribute('quiet', Boolean(value).toString());
+    /**
+   * Whether to display error screen on load error.
+   */ set quiet(value) {
+        this.setAttribute('quiet', Boolean(value).toString());
+    }
+    get quiet() {
+        const val = this.getAttribute('quiet');
+        return parseHTMLBooleans(val);
+    }
+    /**
+   * Renderer to use: svg, canvas or html.
+   */ set renderer(value) {
+        this.setAttribute('renderer', value);
+    }
+    get renderer() {
+        const val = this.getAttribute('renderer');
+        if (val === RendererType.Canvas || val === RendererType.HTML) {
+            return val;
+        }
+        return RendererType.SVG;
+    }
+    /**
+   * Play on clicked element by id attribute, other than animation.
+   */ set selector(value) {
+        if (value) {
+            this.setAttribute('selector', value);
+            return;
+        }
+        this.removeAttribute('selector');
+    }
+    get selector() {
+        return this.getAttribute('selector');
+    }
+    /**
+   * Hide advanced controls.
+   */ set simple(value) {
+        this.setAttribute('simple', Boolean(value).toString());
+    }
+    get simple() {
+        const val = this.getAttribute('simple');
+        return parseHTMLBooleans(val);
+    }
+    /**
+   * Speed.
+   */ set speed(value) {
+        this.setAttribute('speed', value.toString());
+    }
+    get speed() {
+        const val = this.getAttribute('speed');
+        if (val !== null && !isNaN(Number(val))) {
+            return Number(val);
+        }
+        return 1;
+    }
+    /**
+   * Source, either path or JSON string.
+   */ set src(value) {
+        this.setAttribute('src', value || '');
+    }
+    get src() {
+        return this.getAttribute('src');
+    }
+    /**
+   * Subframe.
+   */ set subframe(value) {
+        this.setAttribute('subframe', Boolean(value).toString());
+    }
+    get subframe() {
+        const val = this.getAttribute('subframe');
+        return parseHTMLBooleans(val);
+    }
+    clearDevLog() {
+        this._toLog = null;
+    }
+    devLog(toLog, type = 'error') {
+        {
+            return;
+        }
+    }
+    play() {
+        throw new Error(notImplemented$1);
+    }
+    _freeze() {
+        throw new Error(notImplemented$1);
+    }
+    constructor(...args){
+        super(...args), /**
+   * Player state.
+   */ this.playerState = PlayerState.Loading, /**
+   * This is included in watched properties,
+   * so that next-button will show up
+   * on load, if controls are visible.
+   */ this._animations = [], /**
+   * Animation Container.
+   */ this._container = null, /**
+   * Which animation to show, if several.
+   */ this._currentAnimation = 0, this._errorMessage = 'Something went wrong', this._identifier = this.id || createElementID(), this._lottieInstance = null, this._playerState = {
+            count: 0,
+            frame: 0,
+            loaded: false,
+            playTimeout: null,
+            prev: PlayerState.Loading
+        }, this._toLog = null;
+    }
+}
+
+class ScrollElement extends BaseElement {
+    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);
+    }
+    cancelIntersectionObserver() {
+        // Remove intersection observer for detecting component being out-of-view
+        this._intersectionObserver?.disconnect();
+        this._intersectionObserver = undefined;
+    }
+    cancelScrollProbe() {
+        this._scrollProbe?.cancel();
+        this._scrollProbe = undefined;
+    }
+    scrollLoop() {
+        this._playerState.scrollLoopId = requestAnimationFrame(this.scrollLoop);
+        this.applyScrollProgress();
+    }
+    startScrollLoop() {
+        if (isServer) {
+            this.devLog('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();
+    }
+    /**
+   * Add IntersectionObserver.
+   */ _addIntersectionObserver() {
+        if (!this._container || this._intersectionObserver || !hasIOSupport) {
+            return;
+        }
+        this._intersectionObserver = new IntersectionObserver(([{ isIntersecting }])=>{
+            this.isIntersecting = isIntersecting;
+            // Prevent animate on scroll for users with who prefers reduces motion.
+            if (this.animateOnScroll && !hasReducedMotion) {
+                if (isIntersecting) {
+                    this.startScrollLoop();
+                    return;
+                }
+                this.stopScrollLoop();
+                return;
+            }
+            if (!isIntersecting || document.hidden) {
+                if (this.playerState === PlayerState.Playing) {
+                    this._freeze();
+                }
+                return;
+            }
+            if (!this.playOnVisible && this.playerState === PlayerState.Frozen && !(this.autoplay && hasReducedMotion)) {
+                this.play();
+            }
+            if (!this.playOnVisible || hasReducedMotion) {
+                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) {
+                return;
+            }
+            clearTimeout(this._playerState.playTimeout);
+        });
+        this._observeIntersectionTarget();
+    }
+    _canDriveTimeline({ source }) {
+        if (!source || source === document.scrollingElement) {
+            return true;
+        }
+        return getComputedStyle(source).overflowY !== 'hidden' && source.scrollHeight > source.clientHeight;
+    }
+    _getGeometricScrollProgress() {
+        if (!this._container) {
+            return null;
+        }
+        const { height, top } = this._container.getBoundingClientRect(), viewport = visualViewport?.height ?? innerHeight;
+        return clamp((viewport - top) / (viewport + height), 0, 1);
+    }
+    _getScrollProgress() {
+        if (!this._container) {
+            return null;
+        }
+        if (!hasVTSupport) {
+            return this._getGeometricScrollProgress();
+        }
+        const timeline = new ViewTimeline({
+            axis: 'block',
+            subject: this._container
+        }), canDriveTimeline = this._canDriveTimeline(timeline);
+        if (!canDriveTimeline) {
+            this.devLog('[dotlottie-player] animateOnScroll: the player\'s nearest scrolling ancestor cannot ' + 'scroll, so its ViewTimeline would never advance. This is almost always an ancestor ' + 'with `overflow: hidden` — use `overflow: clip` instead. Falling back to viewport ' + 'measurement.');
+            return this._getGeometricScrollProgress();
+        }
+        this._scrollProbe ??= this._container.animate({
+            '--dotlottie-scroll': [
+                0,
+                1
+            ]
+        }, {
+            fill: 'both',
+            rangeEnd: 'cover 100%',
+            rangeStart: 'cover 0%',
+            timeline
+        });
+        return this._scrollProbe.effect?.getComputedTiming().progress ?? null;
+    }
+    _observeIntersectionTarget() {
+        if (!this._intersectionObserver || !this._container) {
+            return;
+        }
+        this._intersectionObserver.disconnect();
+        // Observing the host is more reliable than inner shadow nodes when ancestors
+        // use overflow-* (IO / layout interaction quirks).
+        this._intersectionObserver.observe(this._container);
+    }
+    constructor(...args){
+        super(...args), this.isIntersecting = false;
+    }
+}
+
+let dotlottieTools = null, loadPromise = null;
+function loadDotLottieTools() {
+    if (dotlottieTools) {
+        return Promise.resolve(dotlottieTools);
+    }
+    loadPromise = loadPromise ?? (async ()=>{
+        const { addAnimation, convert } = await import('@aarsteinmedia/lottie-web/dotlottie');
+        dotlottieTools = {
+            addAnimation,
+            convert
+        };
+        return {
+            addAnimation,
+            convert
+        };
+    })();
+    return loadPromise;
+}
+
+const boomerangIcon = /* HTML */ `<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="m11.8 13.2-.3.3c-.5.5-1.1 1.1-1.7 1.5-.5.4-1 .6-1.5.8-.5.2-1.1.3-1.6.3s-1-.1-1.5-.3c-.6-.2-1-.5-1.4-1-.5-.6-.8-1.2-.9-1.9-.2-.9-.1-1.8.3-2.6.3-.7.8-1.2 1.3-1.6.3-.2.6-.4 1-.5.2-.2.5-.2.8-.3.3 0 .7-.1 1 0 .3 0 .6.1.9.2.9.3 1.7.9 2.4 1.5.4.4.8.7 1.1 1.1l.1.1.4-.4c.6-.6 1.2-1.2 1.9-1.6.5-.3 1-.6 1.5-.7.4-.1.7-.2 1-.2h.9c1 .1 1.9.5 2.6 1.4.4.5.7 1.1.8 1.8.2.9.1 1.7-.2 2.5-.4.9-1 1.5-1.8 2-.4.2-.7.4-1.1.4-.4.1-.8.1-1.2.1-.5 0-.9-.1-1.3-.3-.8-.3-1.5-.9-2.1-1.5-.4-.4-.8-.7-1.1-1.1h-.3zm-1.1-1.1c-.1-.1-.1-.1 0 0-.3-.3-.6-.6-.8-.9-.5-.5-1-.9-1.6-1.2-.4-.3-.8-.4-1.3-.4-.4 0-.8 0-1.1.2-.5.2-.9.6-1.1 1-.2.3-.3.7-.3 1.1 0 .3 0 .6.1.9.1.5.4.9.8 1.2.5.4 1.1.5 1.7.5.5 0 1-.2 1.5-.5.6-.4 1.1-.8 1.6-1.3.1-.3.3-.5.5-.6zM13 12c.5.5 1 1 1.5 1.4.5.5 1.1.9 1.9 1 .4.1.8 0 1.2-.1.3-.1.6-.3.9-.5.4-.4.7-.9.8-1.4.1-.5 0-.9-.1-1.4-.3-.8-.8-1.2-1.7-1.4-.4-.1-.8-.1-1.2 0-.5.1-1 .4-1.4.7-.5.4-1 .8-1.4 1.2-.2.2-.4.3-.5.5z"/></svg>`;
+
+const convertIcon = /* HTML */ `<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z"/></svg>`;
+
+const downloadIcon = /* HTML */ `<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M16.8 10.8 12 15.6l-4.8-4.8h3V3.6h3.6v7.2h3zM12 15.6H3v4.8h18v-4.8h-9zm7.8 2.4h-2.4v-1.2h2.4V18z"/></svg>`;
+
+const loopIcon = /* HTML */ `<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M17.016 17.016v-4.031h1.969v6h-12v3l-3.984-3.984 3.984-3.984v3h10.031zM6.984 6.984v4.031H5.015v-6h12v-3l3.984 3.984-3.984 3.984v-3H6.984z"/></svg>`;
+
+const nextIcon = /* HTML */ `<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="m6.1 5.8 9.8 6.2-9.8 6.2V5.8zM16.4 5.8h1.5v12.4h-1.5z"/></svg>`;
+
+const pauseIcon = /* HTML */ `<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M14.016 5.016H18v13.969h-3.984V5.016zM6 18.984V5.015h3.984v13.969H6z"/></svg>`;
+
+const playIcon = /* HTML */ `<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M8.016 5.016L18.985 12 8.016 18.984V5.015z"/></svg>`;
+
+const prevIcon = /* HTML */ `<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M17.9 18.2 8.1 12l9.8-6.2v12.4zm-10.3 0H6.1V5.8h1.5v12.4z"/></svg>`;
+
+const settingsIcon = /* HTML */ `<svg width="24" height="24" aria-hidden="true" focusable="false"><circle cx="12" cy="5.4" r="2.5"/><circle cx="12" cy="12" r="2.5"/><circle cx="12" cy="18.6" r="2.5"/></svg>`;
+
+const stopIcon = /* HTML */ `<svg width="24" height="24" aria-hidden="true" focusable="false"><path d="M6 6h12v12H6V6z"/></svg>`;
+
+function advancedButtons() {
+    if (!this.shadow) {
+        return;
+    }
+    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;
     }
-    get quiet() {
-        const val = this.getAttribute('quiet');
-        return parseHTMLBooleans(val);
+    const togglePlay = this.shadow.querySelector('.togglePlay');
+    if (togglePlay instanceof HTMLButtonElement) {
+        togglePlay.onclick = this.togglePlay;
     }
-    /**
-   * Renderer to use: svg, canvas or html.
-   */ set renderer(value) {
-        this.setAttribute('renderer', value);
+    const stopButton = this.shadow.querySelector('.stop');
+    if (stopButton instanceof HTMLButtonElement) {
+        stopButton.onclick = this.stop;
     }
-    get renderer() {
-        const val = this.getAttribute('renderer');
-        if (val === RendererType.Canvas || val === RendererType.HTML) {
-            return val;
+    const prevButton = this.shadow.querySelector('.prev');
+    if (prevButton instanceof HTMLButtonElement) {
+        if (this.animations.length > 0 && this.currentAnimation) {
+            prevButton.hidden = false;
         }
-        return RendererType.SVG;
+        prevButton.onclick = this.prev;
     }
-    /**
-   * Play on clicked element by id attribute, other than animation.
-   */ set selector(value) {
-        if (value) {
-            this.setAttribute('selector', value);
-            return;
+    const nextButton = this.shadow.querySelector('.next');
+    if (nextButton instanceof HTMLButtonElement) {
+        if (this.animations.length > 0 && this.currentAnimation < this.animations.length - 1) {
+            nextButton.hidden = false;
         }
-        this.removeAttribute('selector');
+        nextButton.onclick = this.next;
     }
-    get selector() {
-        return this.getAttribute('selector');
+    const seeker = this.shadow.querySelector('.seeker');
+    if (seeker instanceof HTMLInputElement) {
+        seeker.onchange = this._handleSeekChange;
+        seeker.onmousedown = this._freeze;
     }
-    /**
-   * Hide advanced controls.
-   */ set simple(value) {
-        this.setAttribute('simple', Boolean(value).toString());
+    if (this.simple) {
+        return;
     }
-    get simple() {
-        const val = this.getAttribute('simple');
-        return parseHTMLBooleans(val);
+    advancedButtons.call(this);
+}
+/**
+ * Render Controls.
+ */ function renderControls() {
+    if (!this.shadow) {
+        throw new Error('No Shadow Element');
     }
-    /**
-   * Speed.
-   */ set speed(value) {
-        this.setAttribute('speed', value.toString());
+    const slot = this.shadow.querySelector('slot[name=controls]');
+    if (!slot) {
+        return;
     }
-    get speed() {
-        const val = this.getAttribute('speed');
-        if (val !== null && !isNaN(Number(val))) {
-            return Number(val);
-        }
-        return 1;
+    if (!this.controls) {
+        slot.innerHTML = '';
+        return;
     }
-    /**
-   * Source, either path or JSON string.
-   */ set src(value) {
-        this.setAttribute('src', value || '');
+    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;
+    togglePlay.dataset.active = isActive.toString();
+    togglePlay.innerHTML = state === PlayerState.Playing ? pauseIcon : playIcon;
+}
+
+var controls = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  renderControls: renderControls,
+  updatePlayPauseButton: updatePlayPauseButton
+});
+
+/**
+ * Render Player.
+ */ function renderPlayer() {
+    if (!this.shadow || !this.template) {
+        throw new Error('No Shadow Element or Template');
     }
-    get src() {
-        return this.getAttribute('src');
+    let langAttribute = '';
+    /**
+   * If player has aria-description, it's safe to assume
+   * language should be the same as `document.documentElement.lang`.
+   * Accessible labels on controls are only in English, so with no
+   * aria tag, and controls enabled, lang should reflect this.
+   * With neither controls or description, the lang attribute is
+   * not needed.
+   */ if (this.description || this.controls) {
+        const lang = this.description ? document.documentElement.lang : 'en';
+        langAttribute = `lang="${lang}"`;
     }
+    this.template.innerHTML = /* HTML */ `<div class="animation-container main" data-controls="${this.controls ?? false}" ${langAttribute}><figure class="animation" style="background:${this.background}" ${this.description ? `aria-label="${this.description}"` : ''}></figure><slot name="controls"></slot></div>`;
+    this.shadow.appendChild(this.template.content.cloneNode(true));
+}
+
+const notImplemented = 'Method is not implemented';
+/**
+ * DotLottie Player Web Component.
+ */ class DotLottiePlayerBase extends ScrollElement {
     /**
-   * Subframe.
-   */ set subframe(value) {
-        this.setAttribute('subframe', Boolean(value).toString());
+   * Attributes to observe.
+   */ static get observedAttributes() {
+        return [
+            'animateOnScroll',
+            'autoplay',
+            'controls',
+            'direction',
+            'hover',
+            'loop',
+            'mode',
+            'playOnClick',
+            'playOnVisible',
+            'selector',
+            'speed',
+            'src',
+            'subframe'
+        ];
     }
-    get subframe() {
-        const val = this.getAttribute('subframe');
-        return parseHTMLBooleans(val);
+    static get observedProperties() {
+        return [
+            'playerState',
+            '_isSettingsOpen',
+            '_seeker',
+            '_currentAnimation',
+            '_animations'
+        ];
+    }
+    get isDotLottie() {
+        return this._isDotLottie;
     }
     constructor(){
         super(), this.isLight = false, /**
-   * Player state.
-   */ this.playerState = PlayerState.Loading, /**
-   * Animation Container.
-   */ 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,
-            playTimeout: null,
-            prev: PlayerState.Loading
-        }, this._render = renderPlayer, /**
+   */ this._isSettingsOpen = false, /**
    * Seeker.
-   */ this._seeker = 0, /**
-   * This is included in watched properties,
-   * so that next-button will show up
-   * on load, if controls are visible.
-   */ this._animations = [], this._controlsLoadId = 0, /**
-   * Which animation to show, if several.
-   */ this._currentAnimation = 0, this._errorLoadId = 0, this._isBounce = false, this._isDotLottie = false, this._isIntersecting = false, this._lottieInstance = null, /**
+   */ this._seeker = 0, this._controlsLoadId = 0, this._errorLoadId = 0, this._isBounce = false, this._isDotLottie = false, /**
    * Multi-animation settings.
    */ this._multiAnimationSettings = [], this._renderControls = async ()=>{
             const slot = this.shadow?.querySelector('slot[name=controls]');
@@ -711,7 +872,8 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
         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.scrollLoop = this.scrollLoop.bind(this);
+        // this.startScrollLoop = this.startScrollLoop.bind(this)
         this._switchInstance = this._switchInstance.bind(this);
         this._handleSettingsClick = this._handleSettingsClick.bind(this);
         this.togglePlay = this.togglePlay.bind(this);
@@ -737,17 +899,18 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
         if (!this._lottieInstance || !this.shadow || !this._container) {
             return;
         }
+        this.clearDevLog();
         switch(name){
             case 'animateOnScroll':
                 {
                     if (value === '' || Boolean(value)) {
                         this._lottieInstance.autoplay = false;
-                        if (this._isIntersecting) {
-                            this._startScrollLoop();
+                        if (this.isIntersecting) {
+                            this.startScrollLoop();
                         }
                         return;
                     }
-                    this._stopScrollLoop();
+                    this.stopScrollLoop();
                     break;
                 }
             case 'autoplay':
@@ -885,11 +1048,11 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
         if (!this._lottieInstance?.destroy) {
             return;
         }
-        this._cancelScrollProbe();
+        this.cancelScrollProbe();
         this.playerState = PlayerState.Destroyed;
         this._lottieInstance.destroy();
         this._lottieInstance = null;
-        this._stopScrollLoop();
+        this.stopScrollLoop();
         this.dispatchEvent(new CustomEvent(PlayerEvent.Destroyed));
         this.remove();
         document.removeEventListener('visibilitychange', this._onVisibilityChange);
@@ -897,10 +1060,8 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
     /**
    * Cleanup on component destroy.
    */ disconnectedCallback() {
-        // Remove intersection observer for detecting component being out-of-view
-        this._intersectionObserver?.disconnect();
-        this._intersectionObserver = undefined;
-        this._cancelScrollProbe();
+        this.cancelIntersectionObserver();
+        this.cancelScrollProbe();
         if (this._playerState.scrollLoopId) {
             cancelAnimationFrame(this._playerState.scrollLoopId);
         }
@@ -911,6 +1072,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
         document.removeEventListener('visibilitychange', this._onVisibilityChange);
         // Destroy the animation instance
         this.destroy();
+        this.clearDevLog();
     }
     /**
    * Returns the lottie-web instance used in the component.
@@ -990,7 +1152,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
             this._lottieInstance.setSubframe(Boolean(this.subframe));
             // Set progress on load if AnimateOnScroll
             if (this.animateOnScroll) {
-                this._applyScrollProgress();
+                this.applyScrollProgress();
             }
             // Start playing if autoplay is enabled
             if ((this.autoplay || this.animateOnScroll || this.playOnVisible) && this.direction === -1) {
@@ -1023,7 +1185,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
             this.dispatchEvent(new CustomEvent(PlayerEvent.Pause));
         } catch (error) {
             hasError = true;
-            console.error(error);
+            this.devLog(error);
         } finally{
             this.playerState = hasError ? PlayerState.Error : PlayerState.Paused;
         }
@@ -1041,7 +1203,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
             this.dispatchEvent(new CustomEvent(PlayerEvent.Play));
         } catch (error) {
             hasError = true;
-            console.error(error);
+            this.devLog(error);
         } finally{
             this.playerState = hasError ? PlayerState.Error : PlayerState.Playing;
         }
@@ -1197,7 +1359,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
             }
             return data;
         } catch (error) {
-            console.error(error);
+            this.devLog(error);
             return null;
         }
     }
@@ -1323,6 +1485,15 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
             target.focus();
         }
     }
+    async _render() {
+        if (!this.shadow) {
+            return;
+        }
+        renderPlayer.call(this);
+        this.shadow.adoptedStyleSheets = [
+            await DotLottiePlayerBase.styles()
+        ];
+    }
     async _showError() {
         if (this.playerState !== PlayerState.Error) {
             return;
@@ -1350,68 +1521,6 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
    */ _addEventListeners() {
         this._toggleEventListeners('add');
     }
-    /**
-   * Add IntersectionObserver.
-   */ _addIntersectionObserver() {
-        if (!this._container || this._intersectionObserver || !hasIOSupport) {
-            return;
-        }
-        this._intersectionObserver = new IntersectionObserver(([{ isIntersecting }])=>{
-            this._isIntersecting = isIntersecting;
-            // Prevent animate on scroll for users with who prefers reduces motion.
-            if (this.animateOnScroll && !hasReducedMotion) {
-                if (isIntersecting) {
-                    this._startScrollLoop();
-                } else {
-                    this._stopScrollLoop();
-                }
-                return;
-            }
-            if (!isIntersecting || document.hidden) {
-                if (this.playerState === PlayerState.Playing) {
-                    this._freeze();
-                }
-                return;
-            }
-            if (!this.playOnVisible && this.playerState === PlayerState.Frozen && !(this.autoplay && hasReducedMotion)) {
-                this.play();
-            }
-            if (!this.playOnVisible || hasReducedMotion) {
-                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');
@@ -1514,30 +1623,6 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
             rendererType: this.renderer
         });
     }
-    _getScrollProgress() {
-        if (!this._container) {
-            return null;
-        }
-        if (hasVTSupport) {
-            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) {
@@ -1545,7 +1630,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
             await this._showError();
         }
         this.dispatchEvent(new CustomEvent(PlayerEvent.Error));
-        console.error(error);
+        this.devLog(error);
     }
     _handleLdScript() {
         const ldScript = this.parentElement?.querySelector('script[type="application/ld+json"]');
@@ -1691,25 +1776,6 @@ 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]) {
@@ -1718,7 +1784,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
         try {
             // Clear previous animation
             this._lottieInstance?.destroy();
-            this._cancelScrollProbe();
+            this.cancelScrollProbe();
             // Re-initialize lottie player
             this._lottieInstance = this.loadAnimation({
                 ...this._getOptions(),
@@ -1735,7 +1801,7 @@ const notImplemented = 'Method is not implemented', getStyles = async ()=>{
             if (this._multiAnimationSettings[this._currentAnimation]?.autoplay ?? this.autoplay) {
                 if (this.animateOnScroll) {
                     // Get instant scroll position
-                    this._applyScrollProgress();
+                    this.applyScrollProgress();
                     this.playerState = PlayerState.Paused;
                     return;
                 }