lido-player 0.0.2-beta-25-dev → 0.0.2-beta-26-dev

package/dist/collection/components/flashCard/lido-flash-card.js

@@ -4,8 +4,9 @@
  *  controllable `flipped` prop.
  * ------------------------------------------------------------------*/
 import { Host, h } from "@stencil/core";
-import { parseProp, initEventsForElement, setVisibilityWithDelay, executeActions } from "../../utils/utils";
+import { parseProp, initEventsForElement, setVisibilityWithDelay, executeActions, getGoodJobAudio, shouldPlayGoodJobAudio } from "../../utils/utils";
 import { AudioPlayer } from "../../utils/audioPlayer";
+import { TemplateID } from "../../utils/constants";
 export class LidoFlash {
     constructor() {
         /* ---------- Generic Lido props (mirrors lido‑row) ---------- */
@@ -88,6 +89,7 @@ export class LidoFlash {
         this.narrationHandled = false;
         this.instructionDone = false;
         this.instructionStarted = false;
+        this.shouldPlayTemplateInstruction = true;
         this.onAudioStarted = (event) => {
             var _a;
             const target = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.target;
@@ -293,18 +295,20 @@ export class LidoFlash {
             if (!arrow.getAttribute('onTouch'))
                 arrow.setAttribute('onTouch', "this.nextBtn='true';");
             const mascot = container.querySelector('#lido-avatar');
-            const scaffoldAudio = arrow.getAttribute('audio');
-            if (mascot && scaffoldAudio) {
+            const originalAudio = (mascot === null || mascot === void 0 ? void 0 : mascot.getAttribute('audio')) || undefined;
+            const scaffoldAudio = getGoodJobAudio(arrow) || originalAudio;
+            const shouldPlayGoodJob = shouldPlayGoodJobAudio(arrow);
+            if (mascot && scaffoldAudio && shouldPlayGoodJob) {
                 mascot.setAttribute('audio', scaffoldAudio);
             }
             this.setArrowVisible(true);
             // Keep the next action highlighted after mascot audio ends.
             arrow.classList.add('flash-card-next-glowing');
-            if (mascot) {
+            if (mascot && shouldPlayGoodJob) {
                 this.goodJobPlaybackContext = {};
                 this.goodJobPlaybackId = undefined;
                 executeActions("this.avatarAnimate='Idle speak'", mascot);
-                AudioPlayer.getI().play(mascot, true, this.goodJobPlaybackContext);
+                AudioPlayer.getI().play(mascot, true, this.goodJobPlaybackContext, originalAudio);
             }
         };
         this.setArrowVisible = (visible) => {
@@ -345,7 +349,7 @@ export class LidoFlash {
         window.addEventListener('load', this.updateStyles);
     }
     componentDidLoad() {
-        var _a;
+        var _a, _b;
         setVisibilityWithDelay(this.el, this.delayVisible);
         initEventsForElement(this.el, this.type);
         window.addEventListener('lidoAudioStarted', this.onAudioStarted);
@@ -353,9 +357,17 @@ export class LidoFlash {
         window.addEventListener('lidoAudioEnded', this.onAudioEnded);
         const container = this.el.closest('lido-container');
         if ((container === null || container === void 0 ? void 0 : container.getAttribute('template-id')) === 'flashcardtemplate') {
-            (_a = container.querySelector('#lido-avatar')) === null || _a === void 0 ? void 0 : _a.setAttribute('disable-speak', 'true');
+            const home = container.closest('lido-home');
+            const playedTemplates = ((_a = home === null || home === void 0 ? void 0 : home.getAttribute(TemplateID)) === null || _a === void 0 ? void 0 : _a.split(',').map(value => value.trim()).filter(Boolean)) || [];
+            this.shouldPlayTemplateInstruction = !playedTemplates.includes('flashcardtemplate');
+            (_b = container.querySelector('#lido-avatar')) === null || _b === void 0 ? void 0 : _b.setAttribute('disable-speak', 'true');
             this.instructionStartTimer = window.setTimeout(() => {
                 if (!this.instructionStarted && !this.instructionDone) {
+                    if (!this.shouldPlayTemplateInstruction) {
+                        this.instructionDone = true;
+                        this.speakFront();
+                        return;
+                    }
                     const instruction = this.instructionText();
                     if (instruction)
                         this.startNarration(instruction);
@@ -378,14 +390,37 @@ export class LidoFlash {
         window.removeEventListener('resize', this.updateStyles);
         window.removeEventListener('load', this.updateStyles);
     }
+    async replayGoodJobAudio() {
+        const container = this.el.closest('lido-container');
+        if ((container === null || container === void 0 ? void 0 : container.getAttribute('template-id')) !== 'flashcardtemplate')
+            return;
+        const arrow = this.nextArrow();
+        const mascot = container.querySelector('#lido-avatar');
+        if (!arrow || !mascot)
+            return;
+        const arrowVisible = arrow.getAttribute('visible') === 'true'
+            || arrow.style.visibility === 'visible';
+        if (!arrowVisible)
+            return;
+        const originalAudio = mascot.getAttribute('audio') || undefined;
+        const localizedAudio = getGoodJobAudio(arrow);
+        const replayAudio = localizedAudio || originalAudio;
+        if (!replayAudio)
+            return;
+        mascot.setAttribute('audio', replayAudio);
+        this.goodJobPlaybackContext = {};
+        this.goodJobPlaybackId = undefined;
+        executeActions("this.avatarAnimate='Idle speak'", mascot);
+        await AudioPlayer.getI().play(mascot, true, this.goodJobPlaybackContext, originalAudio);
+    }
     /* ---------- Render ---------- */
     render() {
-        return (h(Host, { key: '57b9dc5ecf618dc381a58e107fa2990b84f5517a', value: this.value, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, type: this.type, onClick: (event) => {
+        return (h(Host, { key: 'b6012ba4855d142b6fdbad9dcfd7251bfcbb932b', value: this.value, "tab-index": this.tabIndex, style: this.style, "aria-label": this.ariaLabel, "aria-hidden": this.ariaHidden, audio: this.audio, onTouch: this.onTouch, onCorrect: this.onCorrect, onInCorrect: this.onInCorrect, onEntry: this.onEntry, type: this.type, onClick: (event) => {
                 var _a, _b;
                 if ((_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.closest) === null || _b === void 0 ? void 0 : _b.call(_a, '#lido-avatar'))
                     return;
                 this.handleFlip();
-            }, "disable-speak": this.disableSpeak }, h("div", { key: '3712fc66e33323bdd55e0abb747370ee461dc808', class: `card ${this.flipped ? 'flipped' : ''}` }, h("div", { key: 'eb8af2e445393592c0e8a3e4c5934c71dcab4b4e', class: "card-face card-front" }, this.front != null ? this.front : h("slot", { name: "front" })), h("div", { key: 'efa14cc7ea506714342151b12a9724bdcdb1eba8', class: "card-face card-back" }, this.back != null ? this.back : h("slot", { name: "back" })))));
+            }, "disable-speak": this.disableSpeak }, h("div", { key: 'fecb100c8ac0f227d8bd685d02f8314e9018fe02', class: `card ${this.flipped ? 'flipped' : ''}` }, h("div", { key: 'e89512323ad8eb884548a1dead734f635c096c8f', class: "card-face card-front" }, this.front != null ? this.front : h("slot", { name: "front" })), h("div", { key: '82820aaf5b5febcf8247f96faca59976b8fade8e', class: "card-face card-back" }, this.back != null ? this.back : h("slot", { name: "back" })))));
     }
     static get is() { return "lido-flash-card"; }
     static get originalStyleUrls() {
@@ -752,7 +787,7 @@ export class LidoFlash {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The number of child elements that should be displayed inside the row.\nThis value is dynamically adjusted based on `minLength` and `maxLength`."
+                    "text": "The number of child elements that should be displayed inside the row.\r\nThis value is dynamically adjusted based on `minLength` and `maxLength`."
                 },
                 "getter": false,
                 "setter": false,
@@ -828,7 +863,7 @@ export class LidoFlash {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Whether the card is flipped (back side visible).\n`mutable` lets the component toggle itself on click;\n`reflect` keeps the `<lido-flash-card flipped>` attribute in sync."
+                    "text": "Whether the card is flipped (back side visible).\r\n`mutable` lets the component toggle itself on click;\r\n`reflect` keeps the `<lido-flash-card flipped>` attribute in sync."
                 },
                 "getter": false,
                 "setter": false,
@@ -868,7 +903,7 @@ export class LidoFlash {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "CSS margin value applied to each child element inside the container.\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
+                    "text": "CSS margin value applied to each child element inside the container.\r\nAccepts standard CSS margin formats (e.g., '10px', '5px 10px', etc.)."
                 },
                 "getter": false,
                 "setter": false,
@@ -923,6 +958,31 @@ export class LidoFlash {
             "style": {}
         };
     }
+    static get methods() {
+        return {
+            "replayGoodJobAudio": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{

package/dist/collection/components/float/lido-float.css

@@ -1,30 +1,30 @@
-.lido-float {
-  position: relative;
-}
-
-.lido-float > * {
-  position: absolute;
-  cursor: pointer;
-}
-
-@keyframes float-up {
-  from {
-    top: var(--el-top);
-  }
-  to {
-    top: -500px;
-  }
-}
-
-#removeShadow {
-  box-shadow: unset !important;
-}
-
-@keyframes float-lr {
-  from {
-    right: var(--el-left);
-  }
-  to {
-    right: -500px;
-  }
-}
+.lido-float {
+  position: relative;
+}
+
+.lido-float > * {
+  position: absolute;
+  cursor: pointer;
+}
+
+@keyframes float-up {
+  from {
+    top: var(--el-top);
+  }
+  to {
+    top: -500px;
+  }
+}
+
+#removeShadow {
+  box-shadow: unset !important;
+}
+
+@keyframes float-lr {
+  from {
+    right: var(--el-left);
+  }
+  to {
+    right: -500px;
+  }
+}

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

@@ -85,7 +85,7 @@ export class LidoFloat {
         };
     }
     render() {
-        return (h(Host, { key: '26ada4c2834a58fe1f45348a32f9d1dcecb79a14', class: "lido-float", "float-direction": this.floatDirection, id: this.id, "tab-index": this.tabIndex, style: this.style, onEntry: this.onEntry }, h("slot", { key: '6f4ca358f564e268390f221cc1f84af1f303761b' })));
+        return (h(Host, { key: 'c461f1142dd6addd9ceb41ade183b044b875681f', class: "lido-float", "float-direction": this.floatDirection, id: this.id, "tab-index": this.tabIndex, style: this.style, onEntry: this.onEntry }, h("slot", { key: '240439bfda6a9e4e2d67e6ae2b5c878d99e632b3' })));
     }
     static get is() { return "lido-float"; }
     static get originalStyleUrls() {
@@ -328,7 +328,7 @@ export class LidoFloat {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Direction of the float element's movement (e.g., 'leftToRight', 'bottomToTop').\nThis can be used to control the animation or positioning of the float elements."
+                    "text": "Direction of the float element's movement (e.g., 'leftToRight', 'bottomToTop').\r\nThis can be used to control the animation or positioning of the float elements."
                 },
                 "getter": false,
                 "setter": false,