@aarsteinmedia/dotlottie-player 6.5.6 → 6.6.0

package/dist/chunks/{DotLottiePlayerBase-z6EhEWjH.js → DotLottiePlayerBase-BDutF_6O.js}

@@ -1,5 +1,6 @@
 import { getAnimationData } from '@aarsteinmedia/lottie-web/dotlottie';
 import { isServer, PreserveAspectRatio, PlayMode, RendererType, createElementID, clamp, PlayerEvent, download, getFilename } from '@aarsteinmedia/lottie-web/utils';
+import { O as ObjectFit, M as MouseOut, P as PlayerState, h as hasIOSupport, r as reducedMotionQuery, a as hasVTSupport, b as hasHover } from './utilities-CC4oA5Yh.js';
 
 let modulePromise$1;
 function loadControlsModule() {
@@ -9,16 +10,16 @@ function loadControlsModule() {
 
 let modulePromise = null;
 function loadErrorModule() {
-    modulePromise = modulePromise ?? import('./errorScreen-BPvA3AoR.js');
+    modulePromise = modulePromise ?? import('./errorScreen-B5U8u-AX.js');
     return modulePromise;
 }
 
 /**
  * Credit to: Leonardo Favre https://github.com/leofavre/observed-properties.
- */ const updateOnConnected = Symbol('UPDATE_ON_CONNECTED');
-if (isServer) {
+ */ if (isServer) {
     // Mock HTMLElement for server-side rendering
-    global.HTMLElement = // eslint-disable-next-line @typescript-eslint/no-extraneous-class
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    globalThis.HTMLElement ??= // eslint-disable-next-line @typescript-eslint/no-extraneous-class
     class EmptyHTMLElement {
     };
 }
@@ -27,9 +28,6 @@ if (isServer) {
  */ class PropertyCallbackElement extends HTMLElement {
     constructor(){
         super();
-        if (updateOnConnected in this) {
-            this[updateOnConnected] = [];
-        }
         const { observedProperties } = this.constructor;
         const { length } = observedProperties;
         for(let i = 0; i < length; i++){
@@ -46,24 +44,6 @@ if (isServer) {
                     this.propertyChangedCallback(observedProperties[i], oldValue, value);
                 }
             });
-            if (typeof initialValue !== 'undefined' && updateOnConnected in this && Array.isArray(this[updateOnConnected])) {
-                this[updateOnConnected].push(observedProperties[i]);
-            }
-        }
-    }
-    connectedCallback() {
-        let arr = [];
-        if (updateOnConnected in this && Array.isArray(this[updateOnConnected])) {
-            arr = this[updateOnConnected];
-        }
-        const { length } = arr;
-        for(let i = 0; i < length; i++){
-            if (!('propertyChangedCallback' in this) || typeof this.propertyChangedCallback !== 'function') {
-                continue;
-            }
-            if (arr[i] ?? '' in this) {
-                this.propertyChangedCallback(arr[i] ?? '', undefined, this[arr[i]]);
-            }
         }
     }
     propertyChangedCallback(_name, _oldValue, _value) {
@@ -73,33 +53,6 @@ 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}}";
 
-var ObjectFit = /*#__PURE__*/ function(ObjectFit) {
-    ObjectFit["Contain"] = "contain";
-    ObjectFit["Cover"] = "cover";
-    ObjectFit["Fill"] = "fill";
-    ObjectFit["None"] = "none";
-    ObjectFit["ScaleDown"] = "scale-down";
-    return ObjectFit;
-}({});
-var MouseOut = /*#__PURE__*/ function(MouseOut) {
-    MouseOut["Pause"] = "pause";
-    MouseOut["Reverse"] = "reverse";
-    MouseOut["Stop"] = "stop";
-    MouseOut["Void"] = "void";
-    return MouseOut;
-}({});
-var PlayerState = /*#__PURE__*/ function(PlayerState) {
-    PlayerState["Completed"] = "completed";
-    PlayerState["Destroyed"] = "destroyed";
-    PlayerState["Error"] = "error";
-    PlayerState["Frozen"] = "frozen";
-    PlayerState["Loading"] = "loading";
-    PlayerState["Paused"] = "paused";
-    PlayerState["Playing"] = "playing";
-    PlayerState["Stopped"] = "stopped";
-    return PlayerState;
-}({});
-
 /**
  * Get extension from filename, URL or path.
  */ const aspectRatio = (objectFit)=>{
@@ -126,7 +79,7 @@ var PlayerState = /*#__PURE__*/ function(PlayerState) {
                 return PreserveAspectRatio.Contain;
             }
     }
-}, handleErrors = (err)=>{
+}, escapeHTML = (str)=>str.replaceAll(/[&<>"']/g, (char)=>`&#${char.charCodeAt(0)};`), handleErrors = (err)=>{
     const res = {
         message: 'Unknown error',
         status: isServer ? 500 : 400
@@ -158,24 +111,22 @@ var PlayerState = /*#__PURE__*/ function(PlayerState) {
         'h'
     ];
     return mandatory.every((field)=>Object.hasOwn(json, field));
-}, isTouch = ()=>'ontouchstart' in window, frameOutput = (frame)=>((frame ?? 0) + 1).toString().padStart(3, '0'), parseHTMLBooleans = (val)=>val !== null && [
+}, frameOutput = (frame)=>((frame ?? 0) + 1).toString().padStart(3, '0'), parseHTMLBooleans = (val)=>val !== null && [
         'true',
         '',
         '1'
     ].includes(val);
 
-const tagName = 'dotlottie-player', hasReducedMotion = !isServer && matchMedia('(prefers-reduced-motion: reduce)').matches, hasIOSupport = !isServer && 'IntersectionObserver' in window, hasVTSupport = !isServer && 'ViewTimeline' in window;
-
 const getStyles = async ()=>{
     const styleSheet = new CSSStyleSheet();
     await styleSheet.replace(css_248z);
     return styleSheet;
-};
+}, stylePromise = getStyles();
 class BaseElement extends PropertyCallbackElement {
     /**
    * Return the styles for the component.
    */ static get styles() {
-        return getStyles;
+        return stylePromise;
     }
     /**
    * Whether to trigger next frame with scroll.
@@ -397,13 +348,13 @@ class BaseElement extends PropertyCallbackElement {
         return parseHTMLBooleans(val);
     }
     /**
-   * Renderer to use: svg, canvas or html.
+   * Renderer to use: svg or canvas.
    */ set renderer(value) {
         this.setAttribute('renderer', value);
     }
     get renderer() {
         const val = this.getAttribute('renderer');
-        if (val === RendererType.Canvas || val === RendererType.HTML) {
+        if (val === RendererType.Canvas) {
             return val;
         }
         return RendererType.SVG;
@@ -511,6 +462,7 @@ class ScrollElement extends BaseElement {
     cancelScrollProbe() {
         this._scrollProbe?.cancel();
         this._scrollProbe = undefined;
+        this._useGeometricScroll = false;
     }
     scrollLoop() {
         this._playerState.scrollLoopId = requestAnimationFrame(this.scrollLoop);
@@ -540,7 +492,7 @@ class ScrollElement extends BaseElement {
         this._intersectionObserver = new IntersectionObserver(([{ isIntersecting }])=>{
             this.isIntersecting = isIntersecting;
             // Prevent animate on scroll for users with who prefers reduces motion.
-            if (this.animateOnScroll && !hasReducedMotion) {
+            if (this.animateOnScroll && !reducedMotionQuery?.matches) {
                 if (isIntersecting) {
                     this.startScrollLoop();
                     return;
@@ -552,12 +504,15 @@ class ScrollElement extends BaseElement {
                 if (this.playerState === PlayerState.Playing) {
                     this._freeze();
                 }
+                if (this._playerState.playTimeout) {
+                    clearTimeout(this._playerState.playTimeout);
+                }
                 return;
             }
-            if (!this.playOnVisible && this.playerState === PlayerState.Frozen && !(this.autoplay && hasReducedMotion)) {
+            if (!this.playOnVisible && this.playerState === PlayerState.Frozen && !(this.autoplay && reducedMotionQuery?.matches)) {
                 this.play();
             }
-            if (!this.playOnVisible || hasReducedMotion) {
+            if (!this.playOnVisible || reducedMotionQuery?.matches) {
                 return;
             }
             if (this.playerState === PlayerState.Completed && !this.once) {
@@ -592,28 +547,31 @@ class ScrollElement extends BaseElement {
         if (!this._container) {
             return null;
         }
-        if (!hasVTSupport) {
+        if (!hasVTSupport || this._useGeometricScroll) {
             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();
+        if (!this._scrollProbe) {
+            const timeline = new ViewTimeline({
+                axis: 'block',
+                subject: this._container
+            });
+            if (!this._canDriveTimeline(timeline)) {
+                this._useGeometricScroll = true;
+                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
+            });
         }
-        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() {
@@ -626,7 +584,7 @@ class ScrollElement extends BaseElement {
         this._intersectionObserver.observe(this._container);
     }
     constructor(...args){
-        super(...args), this.isIntersecting = false;
+        super(...args), this.isIntersecting = false, this._useGeometricScroll = false;
     }
 }
 
@@ -755,10 +713,26 @@ function handleButtons() {
     }
     if (!this.controls) {
         slot.innerHTML = '';
+        this._controlElements = null;
         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>`;
+    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>${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}" aria-pressed="${this.loop}" tabindex="0" aria-label="Toggle loop">${loopIcon}</button> <button class="toggleBoomerang" data-active="${this.mode === PlayMode.Bounce}" aria-pressed="${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>`;
+    const query = (selector, type)=>{
+        const el = slot.querySelector(selector);
+        return el instanceof type ? el : null;
+    }, togglePlay = query('.togglePlay', HTMLButtonElement), stop = query('.stop', HTMLButtonElement), prev = query('.prev', HTMLButtonElement), next = query('.next', HTMLButtonElement), seeker = query('.seeker', HTMLInputElement), progress = query('progress', HTMLProgressElement);
+    this._controlElements = togglePlay && stop && prev && next && seeker && progress ? {
+        convert: query('.convert', HTMLButtonElement),
+        next,
+        popover: query('.popover', HTMLDivElement),
+        prev,
+        progress,
+        seeker,
+        snapshot: query('.snapshot', HTMLButtonElement),
+        stop,
+        togglePlay
+    } : null;
     handleButtons.call(this);
 }
 function updatePlayPauseButton(togglePlay, state) {
@@ -779,7 +753,13 @@ var controls = /*#__PURE__*/Object.freeze({
     if (!this.shadow || !this.template) {
         throw new Error('No Shadow Element or Template');
     }
-    let langAttribute = '';
+    this.template.innerHTML = /* HTML */ `<div class="animation-container main"><figure class="animation"></figure><slot name="controls"></slot></div>`;
+    const fragment = this.template.content.cloneNode(true), container = fragment.querySelector('.animation-container'), figure = fragment.querySelector('figure');
+    if (!(container instanceof HTMLDivElement) || !figure) {
+        throw new Error('Template is broken');
+    }
+    container.dataset.controls = String(this.controls);
+    figure.style.background = this.background;
     /**
    * If player has aria-description, it's safe to assume
    * language should be the same as `document.documentElement.lang`.
@@ -788,11 +768,12 @@ var controls = /*#__PURE__*/Object.freeze({
    * 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}"`;
+        container.lang = this.description ? document.documentElement.lang : 'en';
     }
-    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));
+    if (this.description) {
+        figure.setAttribute('aria-label', this.description);
+    }
+    this.shadow.replaceChildren(fragment);
 }
 
 /**
@@ -802,15 +783,15 @@ var controls = /*#__PURE__*/Object.freeze({
    * Attributes to observe.
    */ static get observedAttributes() {
         return [
-            'animateOnScroll',
+            'animateonscroll',
             'autoplay',
             'controls',
             'direction',
             'hover',
             'loop',
             'mode',
-            'playOnClick',
-            'playOnVisible',
+            'playonclick',
+            'playonvisible',
             'selector',
             'speed',
             'src',
@@ -830,11 +811,11 @@ var controls = /*#__PURE__*/Object.freeze({
         return this._isDotLottie;
     }
     constructor(){
-        super(), this.isLight = false, /**
+        super(), this.canConvert = false, this._controlElements = null, /**
    * Whether settings toolbar is open.
    */ this._isSettingsOpen = false, /**
    * Seeker.
-   */ this._seeker = 0, this._controlsLoadId = 0, this._errorLoadId = 0, this._isBounce = false, this._isDotLottie = false, /**
+   */ this._seeker = 0, this._controlsLoadId = 0, this._errorLoadId = 0, this._isBounce = false, this._isDotLottie = false, this._loadId = 0, /**
    * Multi-animation settings.
    */ this._multiAnimationSettings = [], this._renderControls = async ()=>{
             const slot = this.shadow?.querySelector('slot[name=controls]');
@@ -843,6 +824,7 @@ var controls = /*#__PURE__*/Object.freeze({
             }
             if (!this.controls) {
                 slot.innerHTML = '';
+                this._controlElements = null;
                 return;
             }
             const loadId = ++this._controlsLoadId, { renderControls } = await loadControlsModule();
@@ -866,7 +848,6 @@ var controls = /*#__PURE__*/Object.freeze({
         this._mouseLeave = this._mouseLeave.bind(this);
         this._onVisibilityChange = this._onVisibilityChange.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);
@@ -891,9 +872,9 @@ var controls = /*#__PURE__*/Object.freeze({
         }
         this.clearDevLog();
         switch(name){
-            case 'animateOnScroll':
+            case 'animateonscroll':
                 {
-                    if (value === '' || Boolean(value)) {
+                    if (parseHTMLBooleans(value)) {
                         this._lottieInstance.autoplay = false;
                         if (this.isIntersecting) {
                             this.startScrollLoop();
@@ -905,10 +886,10 @@ var controls = /*#__PURE__*/Object.freeze({
                 }
             case 'autoplay':
                 {
-                    if (this.animateOnScroll || this.playOnVisible || hasReducedMotion) {
+                    if (this.animateOnScroll || this.playOnVisible || reducedMotionQuery?.matches) {
                         return;
                     }
-                    if (value === '' || Boolean(value)) {
+                    if (parseHTMLBooleans(value)) {
                         this.play();
                         return;
                     }
@@ -931,7 +912,7 @@ var controls = /*#__PURE__*/Object.freeze({
                 }
             case 'hover':
                 {
-                    if (value === '' || Boolean(value)) {
+                    if (parseHTMLBooleans(value)) {
                         this._container.addEventListener('mouseenter', this._mouseEnter);
                         this._container.addEventListener('mouseleave', this._mouseLeave);
                         return;
@@ -961,9 +942,9 @@ var controls = /*#__PURE__*/Object.freeze({
                     this._isBounce = value === PlayMode.Bounce;
                     break;
                 }
-            case 'playOnClick':
+            case 'playonclick':
                 {
-                    if (value === '' || Boolean(value)) {
+                    if (parseHTMLBooleans(value)) {
                         this._lottieInstance.autoplay = false;
                         this._container.addEventListener('click', this._handleClick);
                         return;
@@ -971,9 +952,9 @@ var controls = /*#__PURE__*/Object.freeze({
                     this._container.removeEventListener('click', this._handleClick);
                     break;
                 }
-            case 'playOnVisible':
+            case 'playonvisible':
                 {
-                    if (value === '' || Boolean(value)) {
+                    if (parseHTMLBooleans(value)) {
                         this._lottieInstance.autoplay = false;
                     }
                     break;
@@ -999,7 +980,7 @@ var controls = /*#__PURE__*/Object.freeze({
                 }
             case 'subframe':
                 {
-                    this.setSubframe(value === '' || Boolean(value));
+                    this.setSubframe(parseHTMLBooleans(value));
                     break;
                 }
         }
@@ -1007,7 +988,7 @@ var controls = /*#__PURE__*/Object.freeze({
     /**
    * Initialize everything on component first render.
    */ connectedCallback() {
-        super.connectedCallback();
+        // super.connectedCallback()
         void (async ()=>{
             try {
                 await this._render();
@@ -1017,10 +998,6 @@ var controls = /*#__PURE__*/Object.freeze({
                 this._container = this.shadow.querySelector('.animation');
                 // Setup lottie player
                 await this.load(this.src);
-                // Add listener for Visibility API's change event.
-                if (typeof document.hidden !== 'undefined') {
-                    document.addEventListener('visibilitychange', this._onVisibilityChange);
-                }
                 // Add intersection observer for detecting component being out-of-view.
                 this._addIntersectionObserver();
                 this.dispatchEvent(new CustomEvent(PlayerEvent.Rendered));
@@ -1042,7 +1019,7 @@ var controls = /*#__PURE__*/Object.freeze({
         this.stopScrollLoop();
         this.dispatchEvent(new CustomEvent(PlayerEvent.Destroyed));
         this.remove();
-        document.removeEventListener('visibilitychange', this._onVisibilityChange);
+        this._removeEventListeners();
     }
     /**
    * Cleanup on component destroy.
@@ -1055,8 +1032,7 @@ var controls = /*#__PURE__*/Object.freeze({
         if (this._playerState.playTimeout) {
             clearTimeout(this._playerState.playTimeout);
         }
-        // Remove the attached Visibility API's change event listener
-        document.removeEventListener('visibilitychange', this._onVisibilityChange);
+        this._removeEventListeners();
         // Destroy the animation instance
         this.destroy();
         this.clearDevLog();
@@ -1088,6 +1064,10 @@ var controls = /*#__PURE__*/Object.freeze({
             if (!this.shadowRoot || !src) {
                 return;
             }
+            const loadId = ++this._loadId;
+            if (loadId !== this._loadId) {
+                return;
+            }
             this.source = src;
             // Load the resource
             const { animations, isDotLottie, manifest } = await getAnimationData(src);
@@ -1204,39 +1184,38 @@ var controls = /*#__PURE__*/Object.freeze({
         if (!this.shadow) {
             return;
         }
-        const togglePlay = this.shadow.querySelector('.togglePlay'), stopButton = this.shadow.querySelector('.stop'), prevButton = this.shadow.querySelector('.prev'), nextButton = this.shadow.querySelector('.next'), seeker = this.shadow.querySelector('.seeker'), progress = this.shadow.querySelector('progress'), popover = this.shadow.querySelector('.popover'), convertButton = this.shadow.querySelector('.convert'), snapshot = this.shadow.querySelector('.snapshot');
-        if (!(togglePlay instanceof HTMLButtonElement) || !(stopButton instanceof HTMLButtonElement) || !(nextButton instanceof HTMLButtonElement) || !(prevButton instanceof HTMLButtonElement) || !(seeker instanceof HTMLInputElement) || !(progress instanceof HTMLProgressElement)) {
+        const elements = this._controlElements;
+        if (!elements) {
             return;
         }
         if (name === 'playerState') {
-            updatePlayPauseButton(togglePlay, value);
-            stopButton.dataset.active = (value === PlayerState.Stopped).toString();
+            updatePlayPauseButton(elements.togglePlay, value);
+            elements.stop.dataset.active = (value === PlayerState.Stopped).toString();
         }
         if (name === '_seeker' && typeof value === 'number') {
-            seeker.value = value.toString();
-            seeker.ariaValueNow = value.toString();
-            progress.value = value;
+            elements.seeker.value = value.toString();
+            elements.seeker.ariaValueNow = value.toString();
+            elements.progress.value = value;
         }
         if (name === '_animations' && Array.isArray(value) && this._currentAnimation + 1 < value.length) {
-            nextButton.hidden = false;
+            elements.next.hidden = false;
         }
         if (name === '_currentAnimation' && typeof value === 'number') {
-            nextButton.hidden = value + 1 >= this._animations.length;
-            prevButton.hidden = !value;
+            elements.next.hidden = value + 1 >= this._animations.length;
+            elements.prev.hidden = !value;
         }
-        if (name === '_isSettingsOpen' && typeof value === 'boolean' && popover instanceof HTMLDivElement && convertButton instanceof HTMLButtonElement && snapshot instanceof HTMLButtonElement) {
-            popover.hidden = !value;
-            convertButton.hidden = this.isLight;
-            snapshot.hidden = this.renderer !== RendererType.SVG;
+        if (name === '_isSettingsOpen' && typeof value === 'boolean' && elements.popover && elements.convert && elements.snapshot) {
+            elements.popover.hidden = !value;
+            elements.convert.hidden = !this.canConvert;
+            elements.snapshot.hidden = this.renderer !== RendererType.SVG;
         }
     }
     /**
    * Reload animation.
    */ async reload() {
-        if (!this._lottieInstance || !this.src) {
+        if (!this.src) {
             return;
         }
-        this._lottieInstance.destroy();
         await this.load(this.src);
     }
     /**
@@ -1248,14 +1227,21 @@ var controls = /*#__PURE__*/Object.freeze({
             return;
         }
         // Extract frame number from either number or percentage value
-        const matches = RegExp(/^(\d+)(%?)$/).exec(value.toString());
+        const str = String(value).trim(), matches = /^([+-]?(?:\d+(?:\.\d*)?|\.\d+))\s*(%?)$/.exec(str);
         if (!matches) {
             return;
         }
+        const { totalFrames } = this._lottieInstance, frame = parseInt(matches[1]), isPercentage = matches[2] === '%';
         // Calculate and set the frame number
-        const frame = Math.round(matches[2] === '%' ? this._lottieInstance.totalFrames * Number(matches[1]) / 100 : Number(matches[1]));
+        let percentage;
+        // Check if value is a percentage string
+        if (isPercentage) {
+            percentage = Math.round(totalFrames * frame / 100);
+        } else {
+            percentage = Math.round(frame / totalFrames * 100);
+        }
         // Set seeker to new frame number
-        this._seeker = frame;
+        this._seeker = percentage;
         // Send lottie player to the new frame
         if (this.playerState === PlayerState.Playing || this.playerState === PlayerState.Frozen && this._playerState.prev === PlayerState.Playing) {
             this._lottieInstance.goToAndPlay(frame, true);
@@ -1323,7 +1309,7 @@ var controls = /*#__PURE__*/Object.freeze({
    * Snapshot and download the current frame as SVG.
    */ snapshot(shouldDownload = true, name = 'AM Lottie') {
         try {
-            if (!this.shadowRoot) {
+            if (!this.shadowRoot || !this._lottieInstance) {
                 throw new Error('Unknown error');
             }
             // Get SVG element and serialize markup
@@ -1338,7 +1324,7 @@ var controls = /*#__PURE__*/Object.freeze({
             if (shouldDownload) {
                 download(data, {
                     mimeType: 'image/svg+xml',
-                    name: `${getFilename(this.src || name)}-${frameOutput(this._seeker)}.svg`
+                    name: `${getFilename(this.src || name)}-${frameOutput(this._seeker * this._lottieInstance.totalFrames / 100)}.svg`
                 });
             }
             return data;
@@ -1473,9 +1459,10 @@ var controls = /*#__PURE__*/Object.freeze({
         if (!this.shadow) {
             return;
         }
+        this._controlElements = null;
         renderPlayer.call(this);
         this.shadow.adoptedStyleSheets = [
-            await DotLottiePlayerBase.styles()
+            await DotLottiePlayerBase.styles
         ];
     }
     async _showError() {
@@ -1487,6 +1474,7 @@ var controls = /*#__PURE__*/Object.freeze({
        */ controlSlot = this.shadow?.querySelector('slot[name=controls]');
         if (controlSlot) {
             controlSlot.innerHTML = '';
+            this._controlElements = null;
         }
         if (!(figure instanceof HTMLElement)) {
             return;
@@ -1497,9 +1485,6 @@ var controls = /*#__PURE__*/Object.freeze({
         }
         figure.innerHTML = errorScreen(this._errorMessage);
     }
-    setOptions(_options) {
-        throw new Error('Method not implemented');
-    }
     /**
    * Add event listeners.
    */ _addEventListeners() {
@@ -1584,7 +1569,7 @@ var controls = /*#__PURE__*/Object.freeze({
             hasAutoplay = Boolean(currentAnimationSettings.autoplay);
         }
         // Disable autoplay on reduced-motion.
-        if (this.animateOnScroll || hasReducedMotion) {
+        if (this.animateOnScroll || reducedMotionQuery?.matches) {
             hasAutoplay = false;
         }
         // Segment
@@ -1617,19 +1602,23 @@ var controls = /*#__PURE__*/Object.freeze({
         this.devLog(error);
     }
     _handleLdScript() {
-        const ldScript = this.parentElement?.querySelector('script[type="application/ld+json"]');
+        const ldScript = this.parentElement?.querySelector(':scope > script[type="application/ld+json"]');
         if (!ldScript) {
             return;
         }
-        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);
+        try {
+            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);
+            }
+        } catch (error) {
+            this.devLog(error);
         }
     }
     _handleSelector(method) {
@@ -1698,7 +1687,7 @@ var controls = /*#__PURE__*/Object.freeze({
     /**
    * Handle MouseEnter.
    */ _mouseEnter() {
-        if (!this.hover || !this._lottieInstance || isTouch() || hasReducedMotion) {
+        if (!this.hover || !this._lottieInstance || !hasHover || reducedMotionQuery?.matches) {
             return;
         }
         if (this.mouseout === MouseOut.Reverse) {
@@ -1716,7 +1705,7 @@ var controls = /*#__PURE__*/Object.freeze({
     /**
    * Handle MouseLeave.
    */ _mouseLeave() {
-        if (!this.hover || !this._lottieInstance || isTouch() || hasReducedMotion) {
+        if (!this.hover || !this._lottieInstance || !hasHover || reducedMotionQuery?.matches) {
             return;
         }
         switch(this.mouseout){
@@ -1744,7 +1733,7 @@ var controls = /*#__PURE__*/Object.freeze({
     /**
    * Handle visibility change events.
    */ _onVisibilityChange() {
-        if (this.autoplay && hasReducedMotion) {
+        if (this.autoplay && reducedMotionQuery?.matches) {
             return;
         }
         if (document.hidden && this.playerState === PlayerState.Playing) {
@@ -1805,6 +1794,10 @@ var controls = /*#__PURE__*/Object.freeze({
    * Toggle event listeners.
    */ _toggleEventListeners(action) {
         const method = action === 'add' ? 'addEventListener' : 'removeEventListener';
+        // Toggle the attached Visibility API's change event listener
+        if (typeof document.hidden !== 'undefined') {
+            document[method]('visibilitychange', this._onVisibilityChange);
+        }
         if (this._lottieInstance) {
             this._lottieInstance[method](PlayerEvent.EnterFrame, this._enterFrame);
             this._lottieInstance[method](PlayerEvent.Complete, this._complete);
@@ -1843,4 +1836,4 @@ var controls = /*#__PURE__*/Object.freeze({
     }
 }
 
-export { DotLottiePlayerBase as D, MouseOut as M, PlayerState as P, loadDotLottieTools as l, tagName as t };
+export { DotLottiePlayerBase as D, escapeHTML as e, loadDotLottieTools as l };