lido-player 0.0.2-alpha-15 → 0.0.2-alpha-16

package/dist/cjs/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const utils = require('./utils-cd5d227c.js');
+const utils = require('./utils-ce8aa817.js');
 require('./index-fe562525.js');
 
 

package/dist/cjs/lido-avatar_17.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-fe562525.js');
-const utils = require('./utils-cd5d227c.js');
+const utils = require('./utils-ce8aa817.js');
 
 var rive = {exports: {}};
 
@@ -6848,8 +6848,8 @@ const LidoContainer = class {
         this.isAllowOnlyCorrect = false;
         this.baseUrl = '';
         this.margin = '';
-        this.showPrevButton = "false";
-        this.showNextButton = "false";
+        this.showPrevButton = 'false';
+        this.showNextButton = 'false';
         this.delayVisible = '';
     }
     convertToPixels(height, parentElement = document.body) {
@@ -6876,43 +6876,11 @@ const LidoContainer = class {
      * @param container The container element to be scaled.
      */
     scaleContainer(container) {
-        var _a;
-        const widths = [window.innerWidth];
-        const heights = [window.innerHeight];
-        if ((_a = window.screen) === null || _a === void 0 ? void 0 : _a.width) {
-            widths.push(window.screen.width);
-            heights.push(window.screen.height);
-        }
-        const width = Math.min(...widths);
-        const height = Math.min(...heights); // Get the smallest height
-        const isPortrait = height > width; // Check if the device is in portrait mode
-        let scaleX;
-        let scaleY;
-        if (isPortrait) {
-            // Portrait Mode: Scale based on portrait reference size (e.g., 900x1600)
-            scaleX = width / 900;
-            scaleY = height / 1600;
-        }
-        else {
-            // Landscape Mode: Scale based on landscape reference size (e.g., 1600x900)
-            scaleX = width / 1600;
-            scaleY = height / 900;
-        }
-        const scale = Math.min(scaleX, scaleY); // Ensure uniform scaling    
         // Center the container and apply scaling
-        container.style.transform = `translate(-50%, -50%) scale(${scale})`;
+        container.style.transform = `translate(-50%, -50%) scale(${utils.calculateScale()})`;
         container.style.left = '50%';
         container.style.top = '50%';
         container.style.position = 'absolute'; // Ensure proper positioning
-        setTimeout(() => {
-            const navBar = document.querySelector('.lido-dot-container');
-            console.log('navBar', navBar);
-            if (navBar) {
-                navBar.style.width = `${container.offsetWidth - 25}px`;
-                navBar.style.transform = `translate(-50%, -50%) scale(${scale})`; //ensure proper scaling
-                navBar.style.visibility = 'visible';
-            }
-        }, 100);
         this.screenOrientation();
     }
     screenOrientation() {
@@ -6932,7 +6900,6 @@ const LidoContainer = class {
      * - Adds event listeners for `resize` and `load` to rescale the container on window size changes.
      */
     componentDidLoad() {
-        utils.setVisibilityWithDelay(this.el, this.delayVisible);
         this.scaleContainer(this.el);
         const backGroundImage = this.bgImage ? utils.convertUrlToRelative(this.bgImage) : '';
         document.body.style.backgroundColor = this.bgColor;
@@ -6965,7 +6932,7 @@ const LidoContainer = class {
             margin: this.margin,
         };
         console.log('🚀 ~ LidoContainer ~ canplay:', this.canplay);
-        return (index.h(index.Host, { key: '05134957ee5bf6f8b454428d60024642e68972ff', id: "lido-container", "tab-index": 0, class: "lido-container", objective: this.objective, baseUrl: this.baseUrl, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, "show-check": `${this.showCheck}`, "is-continue-on-correct": `${this.isContinueOnCorrect}`, "is-allow-only-correct": `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}`, appendToDropOnCompletion: `${this.appendToDropOnCompletion}`, "show-prev-button": `${this.showPrevButton}`, "show-next-button": `${this.showNextButton}`, "show-drop-border": `${this.showDropBorder}`, "bg-image": this.bgImage }, index.h("slot", { key: '15c335e91ed5345170d6fc6ca6221b9221a055f1' })));
+        return (index.h(index.Host, { key: '7973350ab1163200af05910818e03001cd8a5ff9', id: "lido-container", "tab-index": 0, class: "lido-container", objective: this.objective, baseUrl: this.baseUrl, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, "show-check": `${this.showCheck}`, "is-continue-on-correct": `${this.isContinueOnCorrect}`, "is-allow-only-correct": `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}`, appendToDropOnCompletion: `${this.appendToDropOnCompletion}`, "show-prev-button": `${this.showPrevButton}`, "show-next-button": `${this.showNextButton}`, "show-drop-border": `${this.showDropBorder}`, "bg-image": this.bgImage }, index.h("slot", { key: '4167e635d955bdd3bc713cf3eac79c437918bb3c' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -7122,7 +7089,7 @@ const LidoHomeStyle0 = indexCss;
 const animationCss = "@keyframes rightToPlace{from{transform:translateX(2000px)}to{transform:translateX(0)}}@keyframes topToPlace{from{transform:translateY(-1000px)}to{transform:translateY(0)}}@keyframes bottomToPlace{from{transform:translateY(1000px)}to{transform:translateY(0)}}@keyframes placeToLeft{from{}to{transform:translateX(-2000px)}}@keyframes leftToPlace{from{transform:translateX(-2000px)}to{transform:translateX(0)}}@keyframes shake{0%{transform:translateX(0)}10%{transform:translateX(-5px)}20%{transform:translateX(5px)}30%{transform:translateX(-5px)}40%{transform:translateX(5px)}50%{transform:translateX(-5px)}60%{transform:translateX(5px)}70%{transform:translateX(-5px)}80%{transform:translateX(5px)}90%{transform:translateX(-5px)}100%{transform:translateX(0)}}@keyframes fallAndBounce{0%{transform:translateY(-1000px)}25%{transform:translateY(0px)}50%{transform:translateY(-200px)}75%{transform:translateY(0)}90%{transform:translateY(-100px)}100%{transform:translateY(0)}}@keyframes placeToDown{0%{transform:translateY(0)}100%{transform:translateY(1000px)}}@keyframes strongShake{0%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}100%{transform:translateX(0)}}@keyframes scaledShake{0%{transform:scale(1) translateX(0);box-shadow:0 0 0 transparent}20%{transform:scale(1.10) translateX(-12px);box-shadow:0 0 10px red}40%{transform:scale(1.10) translateX(12px);box-shadow:0 0 12px red}60%{transform:scale(1.10) translateX(-8px);box-shadow:0 0 10px red}80%{transform:scale(1.10) translateX(8px);box-shadow:0 0 12px red}100%{transform:scale(1) translateX(0);box-shadow:none}}@keyframes horizontalShake{0%{transform:scale(1) translateX(0);background-color:transparent}20%{transform:translateX(-20px);background-color:rgba(255, 0, 0, 0.2)}40%{transform:translateX(20px);background-color:rgba(255, 0, 0, 0.4)}60%{transform:translateX(-10px);background-color:rgba(255, 0, 0, 0.3)}80%{transform:translateX(10px);background-color:rgba(255, 0, 0, 0.2)}100%{transform:translateX(0);background-color:transparent}}@keyframes verticalShake{0%{transform:translateY(0);background-color:transparent}20%{transform:translateY(-20px);background-color:rgba(255, 0, 0, 0.2)}40%{transform:translateY(0);background-color:rgba(255, 0, 0, 0.4)}60%{transform:translateY(20px);background-color:rgba(255, 0, 0, 0.2)}80%{transform:translateY(0);background-color:rgba(255, 0, 0, 0.1)}100%{transform:translateY(0);background-color:transparent}}@keyframes diagonalShake{0%{transform:translate(0, 0);background-color:transparent}25%{transform:translate(20px, -20px);background-color:rgba(255, 0, 0, 0.2)}50%{transform:translate(-20px, 20px);background-color:rgba(255, 0, 0, 0.3)}75%{transform:translate(10px, -10px);background-color:rgba(255, 0, 0, 0.2)}100%{transform:translate(0, 0);background-color:transparent}}";
 const LidoHomeStyle1 = animationCss;
 
-const lidoHomeCss = ".lido-snackbar{visibility:visible;min-width:250px;background-color:#333;color:#fff;text-align:center;border-radius:2px;padding:16px;position:fixed;z-index:1;bottom:30px;left:50%;transform:translateX(-50%);font-size:17px}.lido-dot-container{display:flex;justify-content:space-between;align-items:center;text-align:center;position:fixed;z-index:1;top:6.5%;left:50%;visibility:hidden}.lido-dot{height:18px;width:18px;margin:0 4px;background-color:#bbb;border-radius:50%;display:inline-block;transition:background-color 0.3s;cursor:pointer;z-index:1;}.lido-btn-dot-container{width:auto;display:flex;justify-content:center;align-items:center;text-align:center;z-index:1}.lido-dot.completed{background-color:grey}.lido-dot.current{background-color:green}.lido-dot:not(.completed):not(.current){background-color:#bbb}#lido-arrow-left,#lido-arrow-right{width:88px;height:88px;display:flex;align-items:center;justify-content:center;margin:0 12px 0px 12px;border-radius:12px;z-index:1000;box-shadow:0px 8px 0px 0px #8B310F;background-color:#F34D08;cursor:pointer;visibility:hidden}#lido-arrow-left:active,#lido-arrow-right:active{transform:translateY(8px);box-shadow:0px 0px 0px 0px}.navbar{display:flex;justify-content:center}.lido-exit-button,#main-audio{width:80px;height:80px;z-index:1000;cursor:pointer;background-color:white;display:flex;align-items:center;justify-content:center;border:4px solid #F34D08;border-radius:16px;box-shadow:0px 8px #F34D08}#main-audio:active,.lido-exit-button:active{transform:translateY(8px);box-shadow:0px 0px 0px 0px !important}.lido-alert-popup{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);display:flex;align-items:center;justify-content:center;z-index:1000}";
+const lidoHomeCss = ".lido-snackbar{visibility:visible;min-width:250px;background-color:#333;color:#fff;text-align:center;border-radius:2px;padding:16px;position:fixed;z-index:1;bottom:30px;left:50%;transform:translateX(-50%);font-size:17px}.lido-dot-container{display:flex;justify-content:space-between;align-items:center;visibility:hidden;position:absolute;left:50%;padding:0 5px;z-index:1;width:100vw;max-width:100vw;box-sizing:border-box;height:0px}.lido-dot{height:18px;width:18px;margin:0 4px;background-color:#bbb;border-radius:50%;display:inline-block;transition:background-color 0.3s;cursor:pointer;z-index:1}.lido-btn-dot-container{flex-shrink:1;flex-grow:1;display:flex;justify-content:center;align-items:center;text-align:center;z-index:1;min-width:0;height:0px}.lido-dot.completed{background-color:grey}.lido-dot.current{background-color:green}.lido-dot:not(.completed):not(.current){background-color:#bbb}#lido-arrow-left,#lido-arrow-right{width:88px;height:88px;display:flex;align-items:center;justify-content:center;border-radius:12px;z-index:1000;box-shadow:0px 8px 0px 0px #8b310f;background-color:#f34d08;cursor:pointer;visibility:hidden;flex-shrink:0}#lido-arrow-left:active,#lido-arrow-right:active{transform:translateY(8px);box-shadow:0px 0px 0px 0px}.navbar{display:flex;justify-content:center}.lido-exit-button,#main-audio{width:80px;height:80px;z-index:1000;cursor:pointer;background-color:white;display:flex;align-items:center;justify-content:center;border:4px solid #f34d08;border-radius:16px;box-shadow:0px 8px #f34d08;flex-shrink:0;}#main-audio:active,.lido-exit-button:active{margin-bottom:-8px;box-shadow:0px 0px 0px 0px !important}.lido-alert-popup{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);display:flex;align-items:center;justify-content:center;z-index:1000}@media (max-width: 768px){#lido-arrow-left,#lido-arrow-right{width:70px;height:70px;margin:0 8px}.lido-exit-button,#main-audio{width:65px;height:65px;margin:0 8px}.lido-dot{height:16px;width:16px;margin:0 2.5px}}@media (max-width: 480px){#lido-arrow-left,#lido-arrow-right{width:74px;height:74px;margin:0px 5px}.lido-exit-button,#main-audio{width:65px;height:65px;margin:0px 5px}.lido-dot{height:15px;width:15px;margin:0 1.5px}.lido-dot-container{padding:0 3px}}@media (max-width: 375px){#lido-arrow-left,#lido-arrow-right{width:70px;height:70px;margin:0px 3px}.lido-exit-button,#main-audio{width:70px;height:70px;margin:0px 3px}.lido-dot{height:14px;width:14px;margin:0 1px}.lido-dot-container{padding:0 2px}}@media (max-width: 320px){#lido-arrow-left,#lido-arrow-right,.lido-exit-button,#main-audio{width:70px;height:70px;margin:0px 2px}.lido-dot{height:12px;width:12px;margin:0 0.5px}.lido-dot-container{padding:0 2px}}@media (max-width: 900px) and (orientation: landscape){#lido-arrow-left,#lido-arrow-right{width:70px;height:70px;margin:0px 5px}.lido-exit-button,#main-audio{width:70px;height:70px;margin:0px 5px}.lido-dot{height:14px;width:14px;margin:0 1px}.lido-dot-container{padding:0 5px}}";
 const LidoHomeStyle2 = lidoHomeCss;
 
 const LidoHome = class {
@@ -7257,6 +7224,10 @@ const LidoHome = class {
         if (this.height != '') {
             this.updateBackgroundImage();
         }
+        this.scaleNavbarContainer(); // new navbar scaling
+        window.addEventListener('resize', () => {
+            this.scaleNavbarContainer(); // re-scale navbar on resize
+        });
     }
     updateBackgroundImage() {
         const container = document.querySelector(utils.LidoContainer);
@@ -7278,6 +7249,9 @@ const LidoHome = class {
         window.removeEventListener(utils.PrevContainerKey, () => {
             this.PrevContainerKey();
         });
+        window.removeEventListener('resize', () => {
+            this.scaleNavbarContainer(); // clean up
+        });
     }
     /**
      * Parses the provided XML string into an XML DOM object and extracts the containers from it.
@@ -7362,25 +7336,71 @@ const LidoHome = class {
         this.containers = containers;
     }
     async btnpopup() {
+        utils.setCancelBtnPopup(false);
         await utils.AudioPlayer.getI().stop();
         const container = document.getElementById(utils.LidoContainer);
         const allele = container.querySelectorAll('*');
         for (const el of Array.from(allele)) {
+            if (utils.getCancelBtnPopup())
+                break;
             const tabIndex = el.getAttribute('tab-index');
             const htmlel = el;
-            if (tabIndex && utils.number(tabIndex) > 0) {
+            if (tabIndex && Number(tabIndex) > 0) {
                 await utils.AudioPlayer.getI().play(htmlel);
+                if (utils.getCancelBtnPopup()) {
+                    await utils.AudioPlayer.getI().stop();
+                    break;
+                }
                 await new Promise(resolve => setTimeout(resolve, 300));
             }
         }
     }
+    scaleNavbarContainer() {
+        setTimeout(() => {
+            const navBar = document.querySelector('.lido-dot-container');
+            if (!navBar)
+                return;
+            if ((window.innerWidth === 1600 && window.innerHeight === 900) || (window.innerWidth === 900 && window.innerHeight === 1600)) {
+                const exit_and_audio_margin = document.querySelectorAll('.lido-exit-button, #main-audio');
+                exit_and_audio_margin.forEach(el => {
+                    el.style.marginLeft = '10px';
+                    el.style.marginRight = '10px';
+                });
+            }
+            if (window.innerWidth > window.innerHeight) {
+                navBar.style.top = '6%';
+            }
+            else {
+                navBar.style.top = '3.5%';
+            }
+            // Apply the scale to the navbar
+            navBar.style.transform = `translate(-50%, -50%)`;
+            navBar.style.visibility = 'visible';
+            console.log('navbar child : ', navBar.children);
+            Array.from(navBar.children).forEach(el => {
+                const item = el;
+                item.style.transform = `scale(${utils.calculateScale()})`;
+            });
+            navBar.style.width = window.outerWidth + 'px';
+        }, 100);
+    }
     /**
      * Renders navigation dots for each container, indicating the progress of the user.
      * Clicking on a dot allows the user to jump to a specific container.
      */
     renderDots() {
         const style = { pointerEvents: this.canplay ? 'none' : '' };
-        return (index.h("div", { id: "lido-dot-indicator", class: "lido-dot-container" }, index.h("div", { class: "lido-exit-button", onClick: () => (this.exitFlag = true) }, index.h("lido-image", { src: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Close.svg" })), index.h("div", { class: "lido-btn-dot-container" }, index.h("div", { id: "lido-arrow-left" }, index.h("lido-image", { src: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Previous.svg", onTouch: "this.prevBtn='true';" })), this.containers.map((_, index$1) => (index.h("span", { class: `lido-dot ${index$1 < this.currentContainerIndex ? 'completed' : index$1 === this.currentContainerIndex ? 'current' : ''}`, onClick: () => this.jumpToContainer(index$1), style: style }))), index.h("div", { id: "lido-arrow-right" }, index.h("lido-image", { src: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Next.svg", onTouch: "this.nextBtn='true';" }))), index.h("div", { id: "main-audio", onClick: () => this.btnpopup() }, index.h("lido-image", { visible: "true", src: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Audio%20icon.svg" }))));
+        return (index.h("div", { id: "lido-dot-indicator", class: "lido-dot-container" }, index.h("div", { class: "lido-exit-button", onClick: () => (this.exitFlag = true) }, index.h("lido-image", { src: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Close.svg" })), index.h("div", { class: "lido-btn-dot-container" }, index.h("div", { id: "lido-arrow-left", onClick: event => {
+                console.log('Target:', event.target); // What was clicked
+                console.log('Current Target:', event.currentTarget); // Where the onClick is bound
+                console.log('✅ Button clicked - prevBtn action triggered');
+                utils.executeActions("this.nextBtn='true'", event.currentTarget);
+            } }, index.h("lido-image", { src: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Previous.svg" })), this.containers.map((_, index$1) => (index.h("div", { class: "parent_dots" }, index.h("span", { class: `lido-dot ${index$1 < this.currentContainerIndex ? 'completed' : index$1 === this.currentContainerIndex ? 'current' : ''}`, onClick: () => this.jumpToContainer(index$1), style: style })))), index.h("div", { id: "lido-arrow-right", onClick: event => {
+                console.log('Target:', event.target); // What was clicked
+                console.log('Current Target:', event.currentTarget); // Where the onClick is bound
+                console.log('✅ Button clicked - nextBtn action triggered');
+                utils.executeActions("this.nextBtn='true'", event.currentTarget);
+            } }, index.h("lido-image", { src: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Next.svg" }))), index.h("div", { id: "main-audio", onClick: () => this.btnpopup() }, index.h("lido-image", { visible: "true", src: "https://aeakbcdznktpsbrfsgys.supabase.co/storage/v1/object/public/template-assets/Navbar-buttons/Audio%20icon.svg" }))));
     }
     /**
      * Jumps to a specific container based on the index of the dot clicked.

package/dist/cjs/{utils-cd5d227c.js → utils-ce8aa817.js}

@@ -778,10 +778,10 @@ function enableDraggingWithScaling(element) {
             initialX = 0;
             initialY = 0;
         }
-        const rect1 = container.getBoundingClientRect();
-        const rect2 = element.getBoundingClientRect();
-        verticalDistance = rect1.top - rect2.top;
-        horizontalDistance = rect1.left - rect2.left;
+        // const rect1 = container.getBoundingClientRect();
+        // const rect2 = element.getBoundingClientRect();
+        // verticalDistance = rect1.top - rect2.top;
+        // horizontalDistance = rect1.left - rect2.left;
         document.addEventListener('mousemove', onMove);
         document.addEventListener('mouseup', onEnd);
         document.addEventListener('touchmove', onMove);
@@ -1260,6 +1260,7 @@ async function onElementDropComplete(dragElement, dropElement) {
             if (prevDropItem) {
                 prevDropItem.isFull = false;
                 localStorage.setItem(DropHasDrag, JSON.stringify(dropHasDrag));
+                reduceSizeToOriginal();
             }
         }
         //accepting identical
@@ -1456,6 +1457,24 @@ const appendingDragElementsInDrop = () => {
         });
     });
 };
+const reduceSizeToOriginal = () => {
+    const dropItems = document.querySelectorAll("[type='drop']");
+    let dropHasDrag = JSON.parse(localStorage.getItem(DropHasDrag) || ' {}');
+    if (!dropHasDrag || !dropItems)
+        return;
+    dropItems.forEach(dropElement => {
+        var _a;
+        const drop = dropElement;
+        const tabIndex = drop.getAttribute('tab-index');
+        if (((_a = drop === null || drop === void 0 ? void 0 : drop.getAttribute('drop-attr')) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === DropMode.Stretch && dropHasDrag[tabIndex].isFull === false) {
+            const originalWidth = drop.getAttribute('data-original-width');
+            if (originalWidth) {
+                drop.style.width = originalWidth;
+                drop.removeAttribute('data-original-width');
+            }
+        }
+    });
+};
 
 const delay = (ms) => new Promise(res => setTimeout(res, ms));
 const slideAnimation = async () => {
@@ -67985,6 +68004,10 @@ const matchStringPattern = (pattern, arr) => {
     const patternGroups = pattern.split(',').map(group => group.trim());
     let arrIndex = 0;
     let options = new Set();
+    if (patternGroups.length > 0) {
+        if (arr.length === 0)
+            return false; // If pattern is not empty but user provided array is empty, return false
+    }
     for (const group of patternGroups) {
         if (group.startsWith('(') && group.endsWith(')')) {
             // Inside parentheses: '|' acts like "OR" condition
@@ -68201,6 +68224,9 @@ const validateObjectiveStatus = async () => {
             }
             const onCorrect = container.getAttribute('onCorrect');
             if (onCorrect) {
+                if (attach === 'true') {
+                    appendingDragElementsInDrop();
+                }
                 await executeActions(onCorrect, container);
             }
             triggerNextContainer();
@@ -68445,7 +68471,6 @@ const getElementsForQueries = (query) => {
     const sortedDragSelectedElements = Array.from(dragSelectedElements).sort((a, b) => parseInt(a.getAttribute(DropTimeAttr)) - parseInt(b.getAttribute(DropTimeAttr)));
     return sortedDragSelectedElements;
 };
-let currentlySpeakingElement = null;
 const speakIcon = (targetElement) => {
     if (targetElement.className.includes('lido-speak-icon')) {
         return null;
@@ -68464,39 +68489,31 @@ const speakIcon = (targetElement) => {
     //  targetElement.appendChild(speakIcon);
     speakIcon.addEventListener('click', async (event) => {
         event.stopPropagation();
-        // const text = targetElement?.innerText?.trim();
-        // const audioAttr = targetElement.getAttribute('audio');
-        if (currentlySpeakingElement && currentlySpeakingElement !== targetElement) {
-            try {
-                await AudioPlayer.getI().stop();
-            }
-            catch (err) {
-                console.warn('Failed to stop previous audio:', err);
-            }
-        }
-        currentlySpeakingElement = targetElement;
+        setCancelBtnPopup(true); // Cancel popup loop
+        await AudioPlayer.getI().stop(); // Stop current playback immediately
         try {
-            await AudioPlayer.getI().play(targetElement);
+            await AudioPlayer.getI().play(targetElement); // Play clicked element
         }
         catch (error) {
             console.error('Error playing audio or TTS:', error);
         }
+        setCancelBtnPopup(false); // Reset cancel state
     });
     if (targetElement['type'] === 'option') {
         speakIcon.style.position = 'unset';
         return parentDiv;
     }
-    targetElement.style.position = "relative";
+    targetElement.style.position = 'relative';
     return speakIcon;
 };
-const attachSpeakIcon = (element, x, y) => {
+const attachSpeakIcon = async (element, x, y) => {
     const speakIconElement = speakIcon(element);
     if (element['type'] === 'option') {
         const icon = speakIconElement.firstChild;
         icon.style.marginLeft = x;
         icon.style.marginTop = y;
     }
-    element.prepend(speakIconElement);
+    element.append(speakIconElement);
 };
 const clearLocalStorage = () => {
     localStorage.removeItem(DragSelectedMapKey);
@@ -68514,11 +68531,11 @@ const setVisibilityWithDelay = async (element, delayVisible) => {
         return;
     if (delayVisible) {
         const delay = parseInt(delayVisible, 10);
-        element.style.visibility = "hidden";
+        element.style.visibility = 'hidden';
         if (!isNaN(delay)) {
-            await new Promise((resolve) => {
+            await new Promise(resolve => {
                 setTimeout(() => {
-                    element.style.visibility = "visible";
+                    element.style.visibility = 'visible';
                     resolve();
                 }, delay);
             });
@@ -68559,6 +68576,30 @@ const vibrateCell = async (cell, value) => {
     // Remove the class after the animation completes
     cell.classList.remove(className);
 };
+function calculateScale() {
+    var _a;
+    const widths = [window.innerWidth];
+    const heights = [window.innerHeight];
+    if ((_a = window.screen) === null || _a === void 0 ? void 0 : _a.width) {
+        widths.push(window.screen.width);
+        heights.push(window.screen.height);
+    }
+    const width = Math.min(...widths);
+    const height = Math.min(...heights);
+    const isPortrait = height > width;
+    const scaleX = isPortrait ? width / 900 : width / 1600;
+    const scaleY = isPortrait ? height / 1600 : height / 900;
+    const scale = Math.min(scaleX, scaleY); // Ensure uniform scaling
+    return scale;
+}
+// for handling multiple speak elements played once at a time
+let cancelBtnPopupState = false;
+function setCancelBtnPopup(value) {
+    cancelBtnPopupState = value;
+}
+function getCancelBtnPopup() {
+    return cancelBtnPopupState;
+}
 
 exports.AudioPlayer = AudioPlayer;
 exports.LidoContainer = LidoContainer;
@@ -68566,6 +68607,7 @@ exports.NextContainerKey = NextContainerKey;
 exports.PrevContainerKey = PrevContainerKey;
 exports.RiveService = RiveService;
 exports.attachSpeakIcon = attachSpeakIcon;
+exports.calculateScale = calculateScale;
 exports.clearLocalStorage = clearLocalStorage;
 exports.commonjsGlobal = commonjsGlobal;
 exports.convertUrlToRelative = convertUrlToRelative;
@@ -68575,13 +68617,14 @@ exports.dispatchGameExitEvent = dispatchGameExitEvent;
 exports.executeActions = executeActions;
 exports.format = format;
 exports.fraction = fraction;
+exports.getCancelBtnPopup = getCancelBtnPopup;
 exports.getDefaultExportFromCjs = getDefaultExportFromCjs;
 exports.handleElementClick = handleElementClick;
 exports.handleFloatElementPosition = handleFloatElementPosition;
 exports.handlingChildElements = handlingChildElements;
 exports.initEventsForElement = initEventsForElement;
-exports.number = number;
 exports.parseProp = parseProp;
+exports.setCancelBtnPopup = setCancelBtnPopup;
 exports.setVisibilityWithDelay = setVisibilityWithDelay;
 exports.speakIcon = speakIcon;
 exports.tinyColor = tinyColor;

package/dist/collection/components/container/lido-container.js

@@ -1,5 +1,5 @@
 import { Host, h } from "@stencil/core";
-import { convertUrlToRelative, initEventsForElement, setVisibilityWithDelay } from "../../utils/utils";
+import { convertUrlToRelative, initEventsForElement, calculateScale } from "../../utils/utils";
 /**
  * @component LidoContainer
  *
@@ -38,8 +38,8 @@ export class LidoContainer {
         this.isAllowOnlyCorrect = false;
         this.baseUrl = '';
         this.margin = '';
-        this.showPrevButton = "false";
-        this.showNextButton = "false";
+        this.showPrevButton = 'false';
+        this.showNextButton = 'false';
         this.delayVisible = '';
     }
     convertToPixels(height, parentElement = document.body) {
@@ -66,43 +66,11 @@ export class LidoContainer {
      * @param container The container element to be scaled.
      */
     scaleContainer(container) {
-        var _a;
-        const widths = [window.innerWidth];
-        const heights = [window.innerHeight];
-        if ((_a = window.screen) === null || _a === void 0 ? void 0 : _a.width) {
-            widths.push(window.screen.width);
-            heights.push(window.screen.height);
-        }
-        const width = Math.min(...widths);
-        const height = Math.min(...heights); // Get the smallest height
-        const isPortrait = height > width; // Check if the device is in portrait mode
-        let scaleX;
-        let scaleY;
-        if (isPortrait) {
-            // Portrait Mode: Scale based on portrait reference size (e.g., 900x1600)
-            scaleX = width / 900;
-            scaleY = height / 1600;
-        }
-        else {
-            // Landscape Mode: Scale based on landscape reference size (e.g., 1600x900)
-            scaleX = width / 1600;
-            scaleY = height / 900;
-        }
-        const scale = Math.min(scaleX, scaleY); // Ensure uniform scaling    
         // Center the container and apply scaling
-        container.style.transform = `translate(-50%, -50%) scale(${scale})`;
+        container.style.transform = `translate(-50%, -50%) scale(${calculateScale()})`;
         container.style.left = '50%';
         container.style.top = '50%';
         container.style.position = 'absolute'; // Ensure proper positioning
-        setTimeout(() => {
-            const navBar = document.querySelector('.lido-dot-container');
-            console.log('navBar', navBar);
-            if (navBar) {
-                navBar.style.width = `${container.offsetWidth - 25}px`;
-                navBar.style.transform = `translate(-50%, -50%) scale(${scale})`; //ensure proper scaling
-                navBar.style.visibility = 'visible';
-            }
-        }, 100);
         this.screenOrientation();
     }
     screenOrientation() {
@@ -122,7 +90,6 @@ export class LidoContainer {
      * - Adds event listeners for `resize` and `load` to rescale the container on window size changes.
      */
     componentDidLoad() {
-        setVisibilityWithDelay(this.el, this.delayVisible);
         this.scaleContainer(this.el);
         const backGroundImage = this.bgImage ? convertUrlToRelative(this.bgImage) : '';
         document.body.style.backgroundColor = this.bgColor;
@@ -155,7 +122,7 @@ export class LidoContainer {
             margin: this.margin,
         };
         console.log('🚀 ~ LidoContainer ~ canplay:', this.canplay);
-        return (h(Host, { key: '05134957ee5bf6f8b454428d60024642e68972ff', id: "lido-container", "tab-index": 0, class: "lido-container", objective: this.objective, baseUrl: this.baseUrl, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, "show-check": `${this.showCheck}`, "is-continue-on-correct": `${this.isContinueOnCorrect}`, "is-allow-only-correct": `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}`, appendToDropOnCompletion: `${this.appendToDropOnCompletion}`, "show-prev-button": `${this.showPrevButton}`, "show-next-button": `${this.showNextButton}`, "show-drop-border": `${this.showDropBorder}`, "bg-image": this.bgImage }, h("slot", { key: '15c335e91ed5345170d6fc6ca6221b9221a055f1' })));
+        return (h(Host, { key: '7973350ab1163200af05910818e03001cd8a5ff9', id: "lido-container", "tab-index": 0, class: "lido-container", objective: this.objective, baseUrl: this.baseUrl, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, "show-check": `${this.showCheck}`, "is-continue-on-correct": `${this.isContinueOnCorrect}`, "is-allow-only-correct": `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}`, appendToDropOnCompletion: `${this.appendToDropOnCompletion}`, "show-prev-button": `${this.showPrevButton}`, "show-next-button": `${this.showNextButton}`, "show-drop-border": `${this.showDropBorder}`, "bg-image": this.bgImage }, h("slot", { key: '4167e635d955bdd3bc713cf3eac79c437918bb3c' })));
     }
     static get is() { return "lido-container"; }
     static get originalStyleUrls() {
@@ -708,7 +675,7 @@ export class LidoContainer {
                 },
                 "attribute": "show-prev-button",
                 "reflect": false,
-                "defaultValue": "\"false\""
+                "defaultValue": "'false'"
             },
             "showNextButton": {
                 "type": "string",
@@ -726,7 +693,7 @@ export class LidoContainer {
                 },
                 "attribute": "show-next-button",
                 "reflect": false,
-                "defaultValue": "\"false\""
+                "defaultValue": "'false'"
             },
             "delayVisible": {
                 "type": "string",