lido-player 0.0.2-alpha-6 → 0.0.2-alpha-7

package/dist/cjs/index.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const utils = require('./utils-4ace217f.js');
+const utils = require('./utils-2740b263.js');
 require('./index-0d28e716.js');
 
 

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-0d28e716.js');
-const utils = require('./utils-4ace217f.js');
+const utils = require('./utils-2740b263.js');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -6675,6 +6675,23 @@ const LidoContainer = class {
         this.isAllowOnlyCorrect = false;
         this.baseUrl = '';
     }
+    convertToPixels(height, parentElement = document.body) {
+        if (!height)
+            return 0; // Handle empty or invalid input
+        // Directly return numbers if already in pixels
+        if (height.endsWith('px')) {
+            return parseFloat(height);
+        }
+        // Convert relative units
+        const tempElement = document.createElement('div');
+        tempElement.style.position = 'absolute';
+        tempElement.style.visibility = 'hidden';
+        tempElement.style.height = height;
+        parentElement.appendChild(tempElement);
+        const computedHeight = tempElement.offsetHeight;
+        parentElement.removeChild(tempElement);
+        return computedHeight;
+    }
     /**
      * Scales the container based on the window or screen size, maintaining the aspect ratio.
      * The container scales according to the minimum dimension of the screen.
@@ -6684,11 +6701,13 @@ const LidoContainer = class {
     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 = document.documentElement.clientHeight;
+        const height = this.height ? this.convertToPixels(this.height) : document.documentElement.clientHeight;
         const scaleX = width / 1600; // Scale based on a reference width of 1600px
         const scaleY = height / 900; // Scale based on a reference height of 900px
         const scale = Math.min(scaleX, scaleY);
@@ -6721,7 +6740,7 @@ const LidoContainer = class {
             transform: 'translate(-50%, -50%)', // Centering the container
         };
         console.log('🚀 ~ LidoContainer ~ canplay:', this.canplay);
-        return (index.h(index.Host, { key: 'b3c98ab2c03113fb47b72a03415b83aaf982bb99', id: "lido-container", tabindex: 0, class: "lido-container", objective: this.objective, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, showCheck: `${this.showCheck}`, isContinueOnCorrect: `${this.isContinueOnCorrect}`, isAllowOnlyCorrect: `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}` }, index.h("slot", { key: 'bdd2cd21f46007111cde0fef83adc5b4bbfa09f2' })));
+        return (index.h(index.Host, { key: '96c4e07b2e62aa2071d386da3d56d20b35778bd4', id: "lido-container", tabindex: 0, class: "lido-container", objective: this.objective, style: style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, onTouch: this.onTouch, onInCorrect: this.onInCorrect, onCorrect: this.onCorrect, onEntry: this.onEntry, showCheck: `${this.showCheck}`, isContinueOnCorrect: `${this.isContinueOnCorrect}`, isAllowOnlyCorrect: `${this.isAllowOnlyCorrect}`, canplay: `${this.canplay}` }, index.h("slot", { key: '30c3337dbd0d963c0d0a308f5b2a6d3e5514e15b' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -6780,6 +6799,7 @@ const LidoHome = class {
         this.initialIndex = 0;
         this.canplay = true;
         this.baseUrl = '';
+        this.height = '200px';
         this.currentContainerIndex = this.initialIndex;
         this.showCompletionMessage = false;
         this.containers = [];
@@ -6856,7 +6876,7 @@ const LidoHome = class {
             .filter(Boolean);
         // Map XML tags to Stencil components
         const componentMapping = {
-            'lido-container': (index.h("lido-container", Object.assign({}, props, { canplay: this.canplay, baseUrl: this.baseUrl }), children)),
+            'lido-container': (index.h("lido-container", Object.assign({}, props, { canplay: this.canplay, baseUrl: this.baseUrl, height: this.height }), children)),
             'lido-col': index.h("lido-col", Object.assign({}, props), children),
             'lido-trace': index.h("lido-trace", Object.assign({}, props), children),
             'lido-image': index.h("lido-image", Object.assign({}, props), children),
@@ -6899,7 +6919,7 @@ const LidoHome = class {
      * Clicking on a dot allows the user to jump to a specific container.
      */
     renderDots() {
-        const style = { pointerEvents: this.canplay ? "none" : "" };
+        const style = { pointerEvents: this.canplay ? 'none' : '' };
         return (index.h("div", { id: "lido-dot-indicator", class: "lido-dot-container", style: style }, 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) })))));
     }
     /**