lido-standalone 0.0.0-beta-19-dev → 0.0.0-beta-20-dev

package/src/components/lido-standalone/lido-standalone.tsx

@@ -1,4 +1,4 @@
-import { Component, Prop, State, Watch, h } from '@stencil/core';
+import { Component, Element, Prop, State, Watch, h } from '@stencil/core';
 
 /**
  * <lido-standalone> usage example:
@@ -21,6 +21,8 @@ import { Component, Prop, State, Watch, h } from '@stencil/core';
   shadow: false,
 })
 export class LidoStandalone {
+  @Element() hostElement!: HTMLElement;
+
   /**
    * The public URL where the unzipped Lido code is hosted, e.g.
    * "https://example.com/path/to/lido-game".
@@ -47,11 +49,19 @@ export class LidoStandalone {
   /** The height prop to pass to <lido-home>. Defaults to "75vh". */
   @Prop() height: string = '75vh';
 
+  /** The language prop to pass to <lido-home>. */
+  @Prop() language?: string;
+
   /**
    * Optional prop for directly providing XML data instead of fetching.
    */
   @Prop() xmlData?: string;
 
+  /**
+   *  To pass zip file directly to <lido-home> as its attribute.
+   */
+  @Prop() zipUrl?: string;
+
   /**
     * If provided(in index.html) → tries versioned script loading from config.json.
     * If no version is found → automatically falls back to default player loading.
@@ -82,6 +92,12 @@ export class LidoStandalone {
     this.fetchXmlData();
   }
 
+  // Re-apply inline XML whenever the host prop changes.
+  @Watch('xmlData')
+  onXmlDataChange() {
+    this.fetchXmlData();
+  }
+
   componentWillLoad() {
     // 1) Attempt to inject the Lido scripts from baseUrl
     this.injectLidoScripts();
@@ -107,102 +123,152 @@ export class LidoStandalone {
     const scriptCheckUrl = `${cleanBase}/code/lido-player.esm.js`;
     const fileExists = this.doesFileExistSync(scriptCheckUrl);
 
+    // --------------- CASE: NO codeFolderPath PROVIDED ---------------
+    // Try loading version from default /code_versions folder
+    // --------------- SINGLE CASE: codeFolderPath PROVIDED ---------------
+
     if (fileExists) {
+      console.log("Using code from zip....")
       // If it exists, inject them
       const scriptEsm = document.createElement('script');
       scriptEsm.type = 'module';
       scriptEsm.src = scriptCheckUrl;
       document.head.appendChild(scriptEsm);
-
       // (Optional) NoModule script for older browsers
       const scriptNoModule = document.createElement('script');
       scriptNoModule.setAttribute('nomodule', '');
       scriptNoModule.src = `${cleanBase}/code/lido-player.js`;
       document.head.appendChild(scriptNoModule);
-
       this.scriptsInjected = true;
       console.debug('Lido scripts injected from:', this.baseUrl);
+      return;
     }
+    
+    if (this.codeFolderPath) {
+    const cleanBase = this.baseUrl.replace(/\/+$/, "");
+    try {
+      const lessonCfgUrl = `${cleanBase}/config.json`;
+      try {
+          // 1️⃣ Load lesson config.json safely
+          let lessonCfg: any = {};
+          let lessonVersion: string | null = null;
+
+          try {
+            const lessonResp = await fetch(lessonCfgUrl);
+            if (!lessonResp.ok) throw new Error("Lesson config.json missing");
+
+            // Check for empty file (0 bytes)
+            const text = await lessonResp.text();
+            if (text.trim().length > 0) {
+              lessonCfg = JSON.parse(text);
+            } else {
+              console.warn("Lesson config.json is EMPTY → falling back to latest version");
+            }
+
+            lessonVersion = lessonCfg.code_version;
+            console.log(`%c USING THE VERSION FOLDER--> ${lessonVersion} `,"color: #3bffe8ff; background:#d32f2f; font-size: 15px; font-weight: bold; padding: 6px 10px; border-radius: 4px;");
+
+          } catch (parseErr) {
+            console.warn("Lesson config.json invalid or unreadable → fallback to latest version");
+            lessonVersion = null;
+          }
 
-    else if (this.codeFolderPath) {
-      const cleanBase = this.baseUrl.replace(/\/+$/, "");
-      const cfgUrl = `${cleanBase}/config.json`;
+          // Normalize invalid versions
+          if (!lessonVersion || typeof lessonVersion !== "string" || lessonVersion.trim() === "") {
+            console.warn("Lesson has NO valid codeVersion → using latest version in code-folder-path");
+            lessonVersion = null;
+          }
 
-      try {
-          const res = await fetch(cfgUrl);
-
-          if (!res.ok) {
-              console.warn("config.json not found. Skipping versioning and continuing...");
-              throw new Error("config.json fetch failed");
-          } 
-          else {
-              const cfg = await res.json();
-              const version = cfg.codeVersion;
-
-              if (!version) {
-                  console.warn("config.json missing codeVersion. Skipping versioning. Falling back to npm package lido-player...");
-                  throw new Error("codeVersion missing in config.json");
-              } else {
-                  // --- Version exists: try to load versioned folder ---
-                  const codePath = this.codeFolderPath.replace(/\/+$/, "");
-                  const versionFolder = `${codePath}/${version}`;
-
-                  const esmUrl = `${versionFolder}/lido-player.esm.js`;
-                  const noModuleUrl = `${versionFolder}/lido-player.js`;
-
-                  // Check if versioned ESM exists
-                  const headCheck = await fetch(esmUrl, { method: "HEAD" });
-
-                  if (!headCheck.ok) {
-                      console.warn(`Version folder found but lido-player.esm.js missing: ${esmUrl}`);
-                  } else {
-                      // --- Load versioned scripts (SUCCESS CASE) ---
-                      const scriptEsm = document.createElement("script");
-                      scriptEsm.type = "module";
-                      scriptEsm.src = esmUrl;
-                      document.head.appendChild(scriptEsm);
-
-                      const scriptNoModule = document.createElement("script");
-                      scriptNoModule.setAttribute("nomodule", "");
-                      scriptNoModule.src = noModuleUrl;
-                      document.head.appendChild(scriptNoModule);
-
-                      this.scriptsInjected = true;
-                      console.debug("Loaded version from config.json:", versionFolder);
-                      return; // return when version successfully loaded
-                  }
-              }
+          // 2️⃣ Load version list from code-folder-path/config.json
+          const codeCfgUrl = `${this.codeFolderPath.replace(/\/+$/, '')}/config.json`;
+          const codeResp = await fetch(codeCfgUrl);
+          if (!codeResp.ok) throw new Error("Code-folder config.json missing");
+
+          const codeCfg = await codeResp.json();
+          const availableVersions: string[] = codeCfg.versions || [];
+
+          if (!availableVersions.length) {
+            throw new Error("No versions listed in code-folder config.json");
           }
-        } catch (e) {
-            console.error("Failed to read config.json. Skipping versioning...", e);
-            this.fallbackNpmImport();
-        }
-      // If we reach this point, version loading FAILED → continue to final else
-    }
 
-    else {
-      // Otherwise, fallback to the npm package
-      console.warn(`Could not find remote scripts at "${scriptCheckUrl}". Falling back to npm package "lido-player"...`);
+          // 3️⃣ Compute selected version
+          let selectedVersion: string | undefined = null;
+
+          if (lessonVersion) {
+            selectedVersion = availableVersions.find(v => v.includes(lessonVersion));
+          }
+
+          // Fallback: use latest version
+          if (!selectedVersion) {
+            selectedVersion = availableVersions[availableVersions.length - 1];
+            console.log(`%c USING THE LATEST VERSION FOLDER-> ${selectedVersion} `,"color: #3bffe8ff; background:#d32f2f; font-size: 15px; font-weight: bold; padding: 6px 10px; border-radius: 4px;");
+          }
+
+          // 4️⃣ Inject scripts
+          const versionDir = `${this.codeFolderPath}/${selectedVersion}`;
+          const esmUrl = `${versionDir}/lido-player.esm.js`;
+          const noModuleUrl = `${versionDir}/lido-player.js`;
+
+          // Check if version folder exists
+          const headCheck = await fetch(esmUrl, { method: "HEAD" });
+          if (!headCheck.ok) throw new Error(`Versioned script missing: ${esmUrl}`);
+
+          // Inject main module file
+          const scriptEsm = document.createElement("script");
+          scriptEsm.type = "module";
+          scriptEsm.src = esmUrl;
+          document.head.appendChild(scriptEsm);
+
+          // Inject fallback nomodule script
+          const scriptNoModule = document.createElement("script");
+          scriptNoModule.setAttribute("nomodule", "");
+          scriptNoModule.src = noModuleUrl;
+          document.head.appendChild(scriptNoModule);
+
+          this.scriptsInjected = true;
+          console.debug("Loaded Lido version from:", versionDir);
+
+        }catch (err) {
+          console.warn("Failed to load versioned scripts, falling back to npm:", err);
+          this.fallbackNpmImport();
+        } 
+    } catch (err) {
+      console.warn("Failed loading scripts → fallback to npm:", err);
       this.fallbackNpmImport();
     }
+    return;
+  }
+    this.fallbackNpmImport();
   }
 
-  /**
-   * Synchronously checks if a file exists via HTTP HEAD request.
-   * Returns true if status is 2xx, false otherwise.
-   */
-  private doesFileExistSync(url: string): boolean {
-    let exists = false;
-    try {
-      const xhr = new XMLHttpRequest();
-      xhr.open('HEAD', url, false); // false = synchronous
-      xhr.send(null);
-      exists = xhr.status >= 200 && xhr.status < 300;
-    } catch (err) {
-      console.warn('Synchronous HEAD request failed for:', url, err);
-    }
-    return exists;
+ /**
+ * Checks if a file truly exists (not a dev-server fallback).
+ * Ensures:
+ *  - HTTP HEAD returns 2xx
+ *  - responseURL matches the requested URL
+ */
+private doesFileExistSync(url: string): boolean {
+  try {
+    const xhr = new XMLHttpRequest();
+    xhr.open("HEAD", url, false); // synchronous
+    xhr.send();
+
+    const statusOk = xhr.status >= 200 && xhr.status < 300;
+
+    if (!statusOk) return false;
+
+    // Detect fallback HTML responses (common when folder/file is missing)
+    const contentType = xhr.getResponseHeader("Content-Type") || "";
+
+    const isHtmlFallback = contentType.includes("text/html");
+
+    return !isHtmlFallback;
+  } catch (err) {
+    console.warn("File existence check failed for:", url, err);
+    return false;
   }
+}
+
 
   /**
    * Fallback approach: dynamically import the "lido-player/loader" module,
@@ -231,7 +297,6 @@ export class LidoStandalone {
     }
 
     // If xmlPath is not explicitly provided, default to `index.xml` in baseUrl
-    if (!this.xmlPath) {
       if (this.baseUrl) {
         const cleanBase = this.baseUrl.replace(/\/+$/, '');
         this.xmlPath = `${cleanBase}/index.xml`;
@@ -239,7 +304,6 @@ export class LidoStandalone {
       } else {
         return;
       }
-    }
 
     try {
       const xhr = new XMLHttpRequest();
@@ -268,7 +332,8 @@ export class LidoStandalone {
      * This ensures the custom elements are defined before usage.
      */
 
-    return <lido-home  common-audio-path={this.commonAudioPath} initial-index={this.initialIndex} canplay={this.canplay} height={this.height} xml-data={this.localXmlData} base-url={this.xmlBaseUrl} code-folder-path={this.codeFolderPath}></lido-home>;
+    const lang = this.language || 'en';
+    return <lido-home  common-audio-path={this.commonAudioPath} initial-index={this.initialIndex} canplay={this.canplay} height={this.height} lang={lang} xml-data={this.localXmlData} base-url={this.xmlBaseUrl} code-folder-path={this.codeFolderPath} zip-url={this.zipUrl}></lido-home>;
   }
 
   

package/src/components/lido-standalone/readme.md

@@ -31,8 +31,10 @@ and calls defineCustomElements(...) to register <lido-home>.
 | `commonAudioPath` | `common-audio-path` |                                                                                                                                                                                                                                                               | `string`  | `undefined` |
 | `height`          | `height`            | The height prop to pass to <lido-home>. Defaults to "75vh".                                                                                                                                                                                                   | `string`  | `'75vh'`    |
 | `initialIndex`    | `initial-index`     | The initial index to pass down to <lido-home>. Defaults to 0.                                                                                                                                                                                                 | `number`  | `0`         |
+| `language`        | `language`          | The language prop to pass to <lido-home>.                                                                                                                                                                                                                     | `string`  | `undefined` |
 | `xmlData`         | `xml-data`          | Optional prop for directly providing XML data instead of fetching.                                                                                                                                                                                            | `string`  | `undefined` |
 | `xmlPath`         | `xml-path`          | If provided, we'll fetch this XML path once and pass the loaded string to <lido-home>'s `xml-data` attribute.                                                                                                                                                 | `string`  | `undefined` |
+| `zipUrl`          | `zip-url`           | To pass zip file directly to <lido-home> as its attribute.                                                                                                                                                                                                    | `string`  | `undefined` |
 
 
 ----------------------------------------------

package/src/components.d.ts

@@ -41,6 +41,10 @@ export namespace Components {
           * The initial index to pass down to <lido-home>. Defaults to 0.
          */
         "initialIndex": number;
+        /**
+          * The language prop to pass to <lido-home>.
+         */
+        "language"?: string;
         /**
           * Optional prop for directly providing XML data instead of fetching.
          */
@@ -49,6 +53,10 @@ export namespace Components {
           * If provided, we'll fetch this XML path once and pass the loaded string to <lido-home>'s `xml-data` attribute.
          */
         "xmlPath"?: string;
+        /**
+          * To pass zip file directly to <lido-home> as its attribute.
+         */
+        "zipUrl"?: string;
     }
 }
 declare global {
@@ -111,6 +119,10 @@ declare namespace LocalJSX {
           * The initial index to pass down to <lido-home>. Defaults to 0.
          */
         "initialIndex"?: number;
+        /**
+          * The language prop to pass to <lido-home>.
+         */
+        "language"?: string;
         /**
           * Optional prop for directly providing XML data instead of fetching.
          */
@@ -119,6 +131,10 @@ declare namespace LocalJSX {
           * If provided, we'll fetch this XML path once and pass the loaded string to <lido-home>'s `xml-data` attribute.
          */
         "xmlPath"?: string;
+        /**
+          * To pass zip file directly to <lido-home> as its attribute.
+         */
+        "zipUrl"?: string;
     }
     interface IntrinsicElements {
         "lido-standalone": LidoStandalone;