lido-player 0.0.2-alpha-6 → 0.0.2-alpha-8

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-1697a6b5.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-1697a6b5.js');
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
@@ -6652,6 +6652,7 @@ const LidoContainer = class {
         index.registerInstance(this, hostRef);
         this.id = undefined;
         this.objective = undefined;
+        this.customStyle = undefined;
         this.value = undefined;
         this.height = undefined;
         this.width = undefined;
@@ -6675,6 +6676,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 +6702,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);
@@ -6708,6 +6728,11 @@ const LidoContainer = class {
         window.addEventListener('resize', () => this.scaleContainer(this.el));
         window.addEventListener('load', () => this.scaleContainer(this.el));
         utils.initEventsForElement(this.el, this.type);
+        if (this.customStyle) {
+            const styleElement = document.createElement('style');
+            styleElement.innerHTML = this.customStyle;
+            document.head.appendChild(styleElement);
+        }
     }
     render() {
         // Define the styles for the container element
@@ -6721,7 +6746,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: 'be7c50232bd0362f217b44d7f4d723f1ed5c40ec', 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: '8ce427c8388574aa7019b83cddae13a182db47ab' })));
     }
     get el() { return index.getElement(this); }
 };
@@ -6730,7 +6755,7 @@ LidoContainer.style = LidoContainerStyle0;
 const indexCss = "@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&display=swap'); body{overflow:hidden}.lido-disable-check-button{pointer-events:none;background-color:#9393935c !important;color:white}.lido-element-selected{border:2px solid;background-color:#ffdf7d !important}";
 const LidoHomeStyle0 = indexCss;
 
-const animationCss = "@keyframes rightToPlace{from{transform:translateX(2000px)}to{left:0}}@keyframes placeToLeft{from{}to{transform:translateX(-2000px)}}@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)}}";
+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)}}";
 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{text-align:center;position:fixed;z-index:1;width:fit-content;top:1%;left:50%;transform:translate(-50%)}.lido-dot{height:15px;width:15px;margin:0 4px;background-color:#bbb;border-radius:50%;display:inline-block;transition:background-color 0.3s;cursor:pointer}.lido-dot.completed{background-color:grey}.lido-dot.current{background-color:green}.lido-dot:not(.completed):not(.current){background-color:#bbb}";
@@ -6780,6 +6805,7 @@ const LidoHome = class {
         this.initialIndex = 0;
         this.canplay = true;
         this.baseUrl = '';
+        this.height = '';
         this.currentContainerIndex = this.initialIndex;
         this.showCompletionMessage = false;
         this.containers = [];
@@ -6856,7 +6882,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 +6925,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) })))));
     }
     /**