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

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2018
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2018
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/cjs/{decode-BCvdWRyT.js → decode-CE64w_Pc.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-DjM03fsg.js');
+var index = require('./index-Cf9LHdIw.js');
 
 function _mergeNamespaces(n, m) {
   m.forEach(function (e) {

package/dist/cjs/{index-DjM03fsg.js → index-Cf9LHdIw.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index$1 = require('./index-DBCFoh1I.js');
+var index$1 = require('./index-DnaH8sO-.js');
 
 const DragMapKey = 'lidoDragMap';
 const SelectedValuesKey = 'lidoSelectedValues';
@@ -21,6 +21,12 @@ const DropTimeAttr = 'drop-time';
 const LidoContainer = 'lido-container';
 const LIDO_COMMON_AUDIO_PATH = '__LIDO_COMMON_AUDIO_PATH__';
 const LIDO_COMMON_AUDIO_READY_EVENT = 'lidoCommonAudioPathReady';
+const GOOD_JOB_AUDIO_FILE = 'goodJob.mp3';
+const resolveCommonAudioPath = (basePath, fileName) => {
+    if (!basePath || !fileName)
+        return undefined;
+    return `${basePath}/${fileName}`;
+};
 const LIDO_INTERACTION_CLEANUP_EVENT = 'lido:interaction-cleanup';
 const TemplateID = 'template-id';
 const CalculatorOk = 'calculator-ok';
@@ -1351,14 +1357,14 @@ async function onClickDropOrDragElement(element, type) {
     if (!document.querySelector('#dynamic-highlight-style')) {
         const style = document.createElement('style');
         style.id = 'dynamic-highlight-style';
-        style.innerHTML = `
-      .highlight {
-        // border: 4px solid #e74c3c; /* Thicker red border for more visibility */
-        // border-radius: 12px; /* Larger rounded corners */
-        // background-color: rgba(231, 76, 60, 0.3); /* Stronger, more noticeable background */
-        // box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 12px 40px rgba(0, 0, 0, 0.2); /* Stronger shadow */
-        // outline: 4px solid rgba(231, 76, 60, 0.6); /* Glow effect */
-      }
+        style.innerHTML = `
+      .highlight {
+        // border: 4px solid #e74c3c; /* Thicker red border for more visibility */
+        // border-radius: 12px; /* Larger rounded corners */
+        // background-color: rgba(231, 76, 60, 0.3); /* Stronger, more noticeable background */
+        // box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2), 0 12px 40px rgba(0, 0, 0, 0.2); /* Stronger shadow */
+        // outline: 4px solid rgba(231, 76, 60, 0.6); /* Glow effect */
+      }
     `;
         document.head.appendChild(style);
     }
@@ -1546,34 +1552,34 @@ function highlightSpeakingElement(element) {
     if (!document.getElementById(styleId)) {
         const style = document.createElement('style');
         style.id = styleId;
-        style.innerHTML = `
-      .speaking-highlight {
-        --base-transform: ${element.style.transform};
-        box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9) !important; /* Stronger orange glow effect */
-        // border: 3px solid green !important;
-        // transition: box-shadow 0.5s ease-in-out, transform 0.5s ease-in-out;
-        // transform: scale(1.05); /* Subtle scale effect to pop the element */
-        // animation: pulseEffect 1.5s infinite; /* Pulsing animation */
-        
-      }
-
-      @keyframes pulseEffect {
-        0% {
-          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
-          // transform: var(--base-transform) scale(1.05);
-          // background-color: #FFFF0B;
-        }
-        50% {
-          box-shadow: 0 0 30px 15px rgba(255, 165, 0, 1);
-          // transform: var(--base-transform) scale(1.1);
-          // background-color: #FFFF0B;
-        }
-        100% {
-          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
-          // transform: var(--base-transform) scale(1.05);
-          // background-color: #FFFF0B;
-        }
-      }
+        style.innerHTML = `
+      .speaking-highlight {
+        --base-transform: ${element.style.transform};
+        box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9) !important; /* Stronger orange glow effect */
+        // border: 3px solid green !important;
+        // transition: box-shadow 0.5s ease-in-out, transform 0.5s ease-in-out;
+        // transform: scale(1.05); /* Subtle scale effect to pop the element */
+        // animation: pulseEffect 1.5s infinite; /* Pulsing animation */
+        
+      }
+
+      @keyframes pulseEffect {
+        0% {
+          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
+          // transform: var(--base-transform) scale(1.05);
+          // background-color: #FFFF0B;
+        }
+        50% {
+          box-shadow: 0 0 30px 15px rgba(255, 165, 0, 1);
+          // transform: var(--base-transform) scale(1.1);
+          // background-color: #FFFF0B;
+        }
+        100% {
+          box-shadow: 0 0 20px 10px rgba(255, 165, 0, 0.9);
+          // transform: var(--base-transform) scale(1.05);
+          // background-color: #FFFF0B;
+        }
+      }
     `;
         document.head.appendChild(style);
     }
@@ -1749,7 +1755,7 @@ class AudioPlayer {
             return el;
         return el.closest('lido-text');
     }
-    async play(targetElement, suppressHighlight = false, playbackContext) {
+    async play(targetElement, suppressHighlight = false, playbackContext, fallbackAudio) {
         this.registerVisibilityEvents();
         this.playbackHasStarted = false;
         if (!this.isWindowVisible()) {
@@ -1852,7 +1858,12 @@ class AudioPlayer {
                     };
                 });
             }
-            catch (error) { }
+            catch (error) {
+                if (fallbackAudio && fallbackAudio !== audioUrl) {
+                    targetElement.setAttribute('audio', fallbackAudio);
+                    await this.play(targetElement, suppressHighlight, playbackContext);
+                }
+            }
             finally {
                 this.audioElement.onended = null;
                 this.audioElement.onloadedmetadata = null;
@@ -2066,7 +2077,9 @@ class AudioPlayer {
         const duration = timeline[timeline.length - 1].endMs - timeline[0].startMs;
         const averageWordMs = duration / timeline.length;
         const speedLead = averageWordMs < 190 ? 120 : averageWordMs < 260 ? 90 : 60;
-        return Math.max(profile.preemptiveOffsetMs, speedLead);
+        // Advance the estimated highlight slightly to compensate for perceived lag.
+        const playbackLeadAdjustmentMs = 40;
+        return Math.max(profile.preemptiveOffsetMs, speedLead) + playbackLeadAdjustmentMs;
     }
     getTimelineIndex(timeline, currentMs) {
         if (!timeline.length)
@@ -2282,11 +2295,11 @@ function enableReorderDrag(element) {
                     onDropToCategory(element, category);
                 }
                 if (divEl) {
-                    const keyframes = `
-            @keyframes widthDecrease {
-              0% { width: ${divEl.offsetWidth}px; height: ${divEl.offsetHeight}px; }
-              100% { width: 0px; height: 0px;}
-            }
+                    const keyframes = `
+            @keyframes widthDecrease {
+              0% { width: ${divEl.offsetWidth}px; height: ${divEl.offsetHeight}px; }
+              100% { width: 0px; height: 0px;}
+            }
           `;
                     const styleSheet = document.styleSheets[0];
                     styleSheet.insertRule(keyframes, styleSheet.cssRules.length);
@@ -2509,11 +2522,11 @@ function moveWithAnimation(target, overlapped) {
         const dummy = createDummyElement(target);
         dummy.style.visibility = 'hidden';
         dummy.setAttribute('type', 'dummy');
-        const keyframes = `
-      @keyframes widthIncrease {
-        0% { width: 0px; height: 0px; }
-        100% { width: ${target.offsetWidth}px; height: ${target.offsetHeight}px;}
-      }
+        const keyframes = `
+      @keyframes widthIncrease {
+        0% { width: 0px; height: 0px; }
+        100% { width: ${target.offsetWidth}px; height: ${target.offsetHeight}px;}
+      }
     `;
         if (!overlapped) {
             const overlapCategory = findMostoverlappedElement(target, 'category');
@@ -2739,6 +2752,7 @@ function slidingWithScaling(element) {
     };
     // Start observing the element
     observer.observe(parentElement, observerConfig);
+    let mostOverlappedElement;
     const onMove = (event) => {
         if (!isDragging)
             return;
@@ -2759,12 +2773,14 @@ function slidingWithScaling(element) {
         // Get the dimensions and scale-corrected position of the container and element
         const containerRect = parentElement.getBoundingClientRect();
         const elementRect = element.getBoundingClientRect();
-        const numbers = element.style.transform.match(/-?\d+(\.\d+)?/g);
-        const result = numbers.map(Number);
-        const initialElementLeftPx = elementRect.left / parentElementScale - result[0];
-        const initialElementTopPx = elementRect.top - result[1];
-        const initialElementRightPx = elementRect.right / parentElementScale - result[0];
-        const initialElementBottomPx = elementRect.bottom - result[1];
+        // Firefox serializes translate(x, 0) as translate(x), so parsing the
+        // inline string can lose Y and produce NaN. Read the computed matrix instead.
+        const transform = window.getComputedStyle(element).transform;
+        const translation = new DOMMatrixReadOnly(transform === 'none' ? undefined : transform);
+        const initialElementLeftPx = elementRect.left / parentElementScale - translation.m41;
+        const initialElementTopPx = elementRect.top - translation.m42;
+        const initialElementRightPx = elementRect.right / parentElementScale - translation.m41;
+        const initialElementBottomPx = elementRect.bottom - translation.m42;
         const maxRight = containerRect.right - initialElementRightPx;
         const maxLeft = containerRect.left - initialElementLeftPx;
         const maxTop = containerRect.top - initialElementTopPx;
@@ -2774,7 +2790,7 @@ function slidingWithScaling(element) {
         // Apply transform with translation within boundaries
         element.style.transform = `translate(${newLeftClamp}px, ${newTopClamp}px)`;
         // Check for overlaps and highlight only the most overlapping element
-        let mostOverlappedElement = findMostoverlappedElement$1(element, 'slide');
+        mostOverlappedElement = findMostoverlappedElement$1(element, 'slide');
         // Apply styles only to the most overlapped element
         if (mostOverlappedElement) {
             if (mostOverlappedElement != element) {
@@ -2835,6 +2851,7 @@ function slidingWithScaling(element) {
         setTimeout(() => {
             if (overlapElement) {
                 void slideCompleted(element);
+                updateReorderCorrectness(container, element, mostOverlappedElement);
                 overlapElement = false;
             }
         }, 300);
@@ -2877,18 +2894,50 @@ const isArrangeLettersComplete = (slideValues, objectiveString) => {
     return slideValues.length === objectiveValues.length
         && slideValues.every((value, index) => value === objectiveValues[index]);
 };
-const updateReorderCorrectness = (container, slideValues, objectiveValues) => {
-    const slideElements = Array.from(container.querySelectorAll('[type="slide"]'));
-    slideElements.forEach((element, index) => {
-        const isCorrect = index < objectiveValues.length && slideValues[index] === objectiveValues[index].trim();
-        if (isCorrect) {
-            applyBorderToClickableCell(element, '#65BC46');
-        }
-        else {
-            element.style.removeProperty('box-shadow');
-        }
-    });
+const updateReorderCorrectness = (container, slideElement, overlappedElement) => {
+    const allSlideElements = Array.from(container.querySelectorAll('[type="slide"]'));
+    const elementIndex = allSlideElements.indexOf(slideElement);
+    const overlappedElementIndex = allSlideElements.indexOf(overlappedElement);
+    const objectiveString = document.getElementById(LidoContainer)['objective'];
+    const objectiveArray = objectiveString.split(',');
+    const slideValues = getSlideValuesForValidation(container, allSlideElements);
+    const isCorrect = elementIndex >= 0 && elementIndex < objectiveArray.length
+        ? matchStringPattern(slideValues[elementIndex], [objectiveArray[elementIndex].trim()])
+        : false;
+    const isCorrectOverlap = overlappedElementIndex >= 0 && overlappedElementIndex < objectiveArray.length
+        ? matchStringPattern(slideValues[overlappedElementIndex], [objectiveArray[overlappedElementIndex].trim()])
+        : false;
+    if (isCorrect && isCorrectOverlap) {
+        updateElementCategoryClass(slideElement, true);
+        updateElementCategoryClass(overlappedElement, true);
+    }
+    else if (isCorrect) {
+        updateElementCategoryClass(slideElement, true);
+        updateElementCategoryClass(overlappedElement, false);
+    }
+    else if (isCorrectOverlap) {
+        updateElementCategoryClass(slideElement, false);
+        updateElementCategoryClass(overlappedElement, true);
+    }
+    else {
+        updateElementCategoryClass(slideElement, false);
+        updateElementCategoryClass(overlappedElement, false);
+    }
 };
+function updateElementCategoryClass(element, isCorrect) {
+    if (!element)
+        return;
+    const correctClass = 'category-dropped-onCorrect';
+    const incorrectClass = 'category-dropped-onInCorrect';
+    if (isCorrect) {
+        element.classList.add(correctClass);
+        element.classList.remove(incorrectClass);
+    }
+    else {
+        element.classList.add(incorrectClass);
+        element.classList.remove(correctClass);
+    }
+}
 const isReorderComplete = (slideValues, objectiveString) => {
     if (!objectiveString)
         return false;
@@ -2916,7 +2965,10 @@ const slideCompleted = async (slideElement) => {
         updateArrangeLettersCorrectness(container, slideValues, objectiveArray);
     }
     else if (isReorderContainer(container)) {
-        updateReorderCorrectness(container, slideValues, objectiveArray);
+        if (isReorderComplete(slideValues, objectiveString)) {
+            allSlideElements.forEach(item => updateElementCategoryClass(item, true));
+        }
+        // updateReorderCorrectness(container, slideValues, objectiveArray);
     }
     if (container.getAttribute('is-continue-on-correct') === 'true') {
         storingEachActivityScore(true);
@@ -32022,15 +32074,15 @@ function _typeof(o) {
   }, _typeof(o);
 }
 
-function toPrimitive(t, e) {
+function toPrimitive(t, r) {
   if ("object" != _typeof(t) || !t) return t;
-  var r;
-  if ("undefined" != typeof Symbol && void 0 !== (r = t[Symbol.toPrimitive])) {
-    var i = r.call(t, e);
+  var e = t[Symbol.toPrimitive];
+  if (void 0 !== e) {
+    var i = e.call(t, r);
     if ("object" != _typeof(i)) return i;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return ("string" === e ? String : Number)(t);
+  return ("string" === r ? String : Number)(t);
 }
 
 function toPropertyKey(t) {
@@ -72841,6 +72893,44 @@ class Timer {
 let ACTIVYTY_TIME_SPEND_ARRAY = [];
 
 const gameScore = new GameScore();
+const GOOD_JOB_TEMPLATES = new Set(['flashcardtemplate', 'writeCard', 'drawShape', 'storyTale']);
+const isGoodJobAudioTarget = (element) => {
+    var _a;
+    const templateId = (_a = element === null || element === void 0 ? void 0 : element.closest('lido-container')) === null || _a === void 0 ? void 0 : _a.getAttribute('template-id');
+    if (!GOOD_JOB_TEMPLATES.has(templateId || ''))
+        return false;
+    if ((element === null || element === void 0 ? void 0 : element.id) === 'arrow')
+        return true;
+    return templateId === 'storyTale' && (element === null || element === void 0 ? void 0 : element.id) === 'arrow1' && !!element.closest('#arrow');
+};
+const resetGoodJobAudioTracking = (home) => {
+    home.__lidoGoodJobTemplates = new Set();
+};
+const shouldPlayGoodJobAudio = (element) => {
+    var _a;
+    if (!isGoodJobAudioTarget(element))
+        return false;
+    // Standalone templates and editor previews have no lesson host. Preserve
+    // their existing behavior rather than making them depend on lido-home.
+    const home = element.closest('lido-home');
+    if (!home)
+        return true;
+    const templateId = (_a = element.closest('lido-container')) === null || _a === void 0 ? void 0 : _a.getAttribute('template-id');
+    if (!templateId)
+        return true;
+    const played = home.__lidoGoodJobTemplates || (home.__lidoGoodJobTemplates = new Set());
+    if (played.has(templateId))
+        return false;
+    played.add(templateId);
+    return true;
+};
+const getGoodJobAudio = (element) => {
+    if (!element)
+        return undefined;
+    if (!isGoodJobAudioTarget(element))
+        return undefined;
+    return resolveCommonAudioPath(window[LIDO_COMMON_AUDIO_PATH], GOOD_JOB_AUDIO_FILE);
+};
 function buildDragSelectedMapFromDOM() {
     const map = {};
     const draggedEls = document.querySelectorAll(`[${DropToAttr}]`);
@@ -72973,6 +73063,22 @@ const initEventsForElement = async (element, type) => {
     }
     onTouchListenerForOnTouch(element);
 };
+/**
+ * Re-enable the gameplay handlers for interactive children that were created
+ * while the player was in edit mode. This is intentionally limited to the
+ * drag/drop elements used by Food Jar; other templates retain their existing
+ * component-load initialization path.
+ */
+const initializePlayModeDragDropElements = async (root) => {
+    const elements = root.querySelectorAll('[type="drag"], [type="drop"]');
+    for (const element of Array.from(elements)) {
+        const type = element.getAttribute('type') || undefined;
+        const initializedElement = element;
+        if (initializedElement.__lidoInitializationKey === `${type || ''}:true`)
+            continue;
+        await initEventsForElement(element, type);
+    }
+};
 // Function to execute actions parsed from the onMatch string
 const executeActions = async (actionsString, thisElement, element, options = {}) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -73046,7 +73152,21 @@ const executeActions = async (actionsString, thisElement, element, options = {})
                     const val = (action.value || '').toString().trim().toLowerCase();
                     if (val === 'true' || val === '1' || val === 'yes') {
                         try {
-                            await AudioPlayer.getI().play(targetElement);
+                            if (isGoodJobAudioTarget(targetElement) && !shouldPlayGoodJobAudio(targetElement))
+                                break;
+                            const isGoodJobTarget = isGoodJobAudioTarget(targetElement);
+                            const currentAudio = targetElement.getAttribute('audio') || undefined;
+                            const originalAudio = isGoodJobTarget
+                                ? (targetElement.getAttribute('data-lido-original-audio') || currentAudio)
+                                : currentAudio;
+                            const localizedAudio = getGoodJobAudio(targetElement);
+                            if (localizedAudio) {
+                                if (currentAudio && !targetElement.hasAttribute('data-lido-original-audio')) {
+                                    targetElement.setAttribute('data-lido-original-audio', currentAudio);
+                                }
+                                targetElement.setAttribute('audio', localizedAudio);
+                            }
+                            await AudioPlayer.getI().play(targetElement, false, undefined, originalAudio);
                         }
                         catch (err) {
                             console.error('Error playing audio for speak action:', err);
@@ -73256,12 +73376,25 @@ const afterDropDragHandling = (dragElement, dropElement) => {
     const element = dragElement;
     const isAppend = container.getAttribute('drop-action') === exports.DropAction.Move;
     const isInfinite = container.getAttribute('drop-action') === exports.DropAction.InfiniteDrop;
+    const isCreateSentence = container.getAttribute('template-id') === 'createSentence';
+    // Reserve the source slot synchronously so an overlapping drag sees the
+    // updated source layout before the dropped element is reparented.
+    let sourcePlaceholder = null;
+    if (isAppend && isCreateSentence) {
+        const computedStyle = window.getComputedStyle(dragElement);
+        sourcePlaceholder = document.createElement('div');
+        sourcePlaceholder.style.width = `${dragElement.offsetWidth}px`;
+        sourcePlaceholder.style.height = `${dragElement.offsetHeight}px`;
+        sourcePlaceholder.style.margin = computedStyle.margin;
+        sourcePlaceholder.style.visibility = 'hidden';
+        dragElement.replaceWith(sourcePlaceholder);
+    }
     if (isAppend || isInfinite) {
-        setTimeout(() => {
+        const finishDrop = () => {
             var _a, _b;
             dragElement.style.transform = 'translate(0,0)';
             dragElement.style.transition = '';
-            let dummyElement = document.createElement('div');
+            let dummyElement = sourcePlaceholder || document.createElement('div');
             if (isInfinite) {
                 dummyElement = cloneElementWithComputedStyles(dragElement);
                 dummyElement.classList.remove('dropped');
@@ -73276,17 +73409,25 @@ const afterDropDragHandling = (dragElement, dropElement) => {
                 }, 100);
             }
             dummyElement.setAttribute('id', dragElement.getAttribute('id'));
-            dragElement.replaceWith(dummyElement);
-            const keyframes = `
-      @keyframes widthDecrease {
-        0% { width: ${dragElement.style.width}; height: ${dragElement.style.height}; margin: ${dragElement.style.margin}; }
-        100% { width: 0px; height: 0px; margin: 0px;}
-      }
+            if (!sourcePlaceholder) {
+                dragElement.replaceWith(dummyElement);
+            }
+            const keyframes = `
+      @keyframes widthDecrease {
+        0% { width: ${dragElement.style.width}; height: ${dragElement.style.height}; margin: ${dragElement.style.margin}; }
+        100% { width: 0px; height: 0px; margin: 0px;}
+      }
     `;
             if (!isInfinite) {
-                dummyElement.style.width = element.style.width;
-                dummyElement.style.height = element.style.height;
-                dummyElement.style.margin = element.style.margin;
+                dummyElement.style.width = sourcePlaceholder
+                    ? sourcePlaceholder.style.width
+                    : element.style.width;
+                dummyElement.style.height = sourcePlaceholder
+                    ? sourcePlaceholder.style.height
+                    : element.style.height;
+                dummyElement.style.margin = sourcePlaceholder
+                    ? sourcePlaceholder.style.margin
+                    : element.style.margin;
                 const styleSheet = document.styleSheets[0];
                 styleSheet.insertRule(keyframes, styleSheet.cssRules.length);
                 dummyElement.style.animation = `widthDecrease 0.5s`;
@@ -73316,7 +73457,13 @@ const afterDropDragHandling = (dragElement, dropElement) => {
             const scaledLeft = (dropCenterX - dragCenterX) / containerScale;
             const scaledTop = (dropCenterY - dragCenterY) / containerScale;
             dragElement.style.transform = `translate(${scaledLeft}px, ${scaledTop}px)`;
-        }, 700);
+        };
+        if (isAppend && isCreateSentence) {
+            finishDrop();
+        }
+        else {
+            setTimeout(finishDrop, 700);
+        }
     }
 };
 // function cloneElementWithComputedStyles(originalEl: HTMLElement): HTMLElement {
@@ -74579,19 +74726,23 @@ exports.fraction = fraction;
 exports.generateUUIDFallback = generateUUIDFallback;
 exports.getCancelBtnPopup = getCancelBtnPopup;
 exports.getDefaultExportFromCjs = getDefaultExportFromCjs;
+exports.getGoodJobAudio = getGoodJobAudio;
 exports.handleElementClick = handleElementClick;
 exports.handleFloatElementPosition = handleFloatElementPosition;
 exports.handlingChildElements = handlingChildElements;
 exports.highlightElement = highlightElement;
 exports.initEventsForElement = initEventsForElement;
+exports.initializePlayModeDragDropElements = initializePlayModeDragDropElements;
 exports.matchStringPattern = matchStringPattern;
 exports.nextUrl = nextUrl;
 exports.parseProp = parseProp;
 exports.prevUrl = prevUrl;
 exports.resetFloatState = resetFloatState;
+exports.resetGoodJobAudioTracking = resetGoodJobAudioTracking;
 exports.setActiveZipAssets = setActiveZipAssets;
 exports.setCancelBtnPopup = setCancelBtnPopup;
 exports.setVisibilityWithDelay = setVisibilityWithDelay;
+exports.shouldPlayGoodJobAudio = shouldPlayGoodJobAudio;
 exports.speakIcon = speakIcon;
 exports.speakUrl = speakUrl;
 exports.stopHighlightForSpeakingElement = stopHighlightForSpeakingElement;

package/dist/cjs/{index-DBCFoh1I.js → index-DnaH8sO-.js}

@@ -22,7 +22,7 @@ const NAMESPACE = 'lido-player';
 const BUILD = /* lido-player */ { hotModuleReplacement: false, hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: true, slotRelocation: true, state: true, updatable: true};
 
 const globalScripts = () => {};
-const globalStyles = "@font-face{font-family:'Baloo Bhai 2';font-style:normal;font-weight:400 800;font-display:swap;src:url('../assets/offline-assets/fonts/Baloo-Bhai-2/Baloo-Bhai-2-Variable.woff2') format('woff2')}body{overflow:hidden;background-position:center;background-size:cover;background-repeat:no-repeat;height:100vh}*{user-select:none}.lido-disable-check-button{pointer-events:none;background-color:#9393935c !important;color:white}.lido-element-selected{border:2px solid;background-color:#ffdf7d !important}.diagonal-target,.diagonal-drop *{transform:scale(0.8) !important;opacity:1 !important}.cloned-element{display:flex !important;position:absolute !important;filter:grayscale(100%);pointer-events:none}.removeShadow{box-shadow:0px 0px 0px 0px #ff8900 !important}.highlight-element{border:2px solid white;box-shadow:rgb(243, 77, 8) 0px 0px 40px !important}.drop-element.empty{border:4px dashed #f34d08 !important}.drop-element.filled{border:'none' !important}.drag-element{box-shadow:0px 15px 11px rgba(43, 0, 0, 0.3) !important}.drag-element.dropped{box-shadow:none !important}.click-element{background-color:var(--btn-bg-color, rgba(255, 172, 76, 1)) !important;box-shadow:var(--btn-shadow-px) var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;cursor:pointer;transition:box-shadow 0.1s ease-out, transform 0.2s ease-out;}.click-element:active{box-shadow:0px 0px 0px var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;transform:translateY(var(--btn-active));}.click-element:focus{outline:2px solid dodgerblue;outline-offset:3px}.after-drop-popup-container{width:200%;height:200%;background-color:rgba(0, 0, 0, 0.8);position:absolute;display:flex;flex-direction:row-reverse;align-items:center;justify-content:center !important;gap:80px}.after-drop-popup-drag-element{scale:1.5;border-radius:8px;transform:none !important;position:unset !important}.after-drop-popup-drop-element{scale:1.5;border:unset;border-radius:8px;transform:none !important;position:unset !important}@keyframes zoomFadeIn{0%{transform:scale(0.6);opacity:0}100%{transform:scale(1);opacity:1}}.zoom-fade-in{animation:zoomFadeIn 0.8s ease-out forwards}@keyframes zoomFadeOut{0%{transform:scale(1);opacity:1}100%{transform:scale(0.6);opacity:0}}.zoom-fade-out{animation:zoomFadeOut 0.8s ease-in forwards}.slide-numbers{width:70px;height:70px;border:1px solid #f57139;background-color:white;font-weight:500;color:#f57139;font-size:44px;border-radius:40px;display:flex;align-items:center;justify-content:center;font-family:'Baloo Bhai 2', serif}.slide-numbers-bottom{position:absolute;display:flex;justify-content:space-around;align-items:center;bottom:-25px;width:100%;height:50px}.slide-numbers-left{position:absolute;display:flex;flex-direction:column;justify-content:space-around;height:100%;width:50px;left:-25px;bottom:0px}.lido-speak-icon{width:56px;height:56px;position:absolute;top:-25px;right:-25px;z-index:10;background-color:white;border:4px solid #F34D08;border-radius:16px;box-shadow:0px 4px 0px 0px #F34D08;background-size:contain;background-repeat:no-repeat;cursor:pointer}.lido-speak-icon:active{transform:translateY(8px);box-shadow:0px 0px 0px 0px !important}.lido-strong-shake{animation:strongShake 0.3s ease}.lido-scaled-shake{animation:scaledShake 0.6s ease-in-out}.lido-horizontal-shake{animation:horizontalShake 0.6s ease-in-out;border-radius:20px}.lido-vertical-shake{animation:verticalShake 0.6s ease-in-out;border-radius:20px}.lido-diagonal-shake{animation:diagonalShake 0.5s ease-in-out;border-radius:20px;will-change:transform}.lido-glow{animation:glowPulse 1s infinite alternate;transition:opacity 0.5s ease-in-out}.lido-box-highlight{animation:topToPlace 0.3s linear}.lido-display-hiddenvalue{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:80px;font-weight:1000;color:brown;-webkit-text-stroke:2px white;font-family:'Baloo Bhai 2', sans-serif;pointer-events:none}.lido-image-colorize{position:relative;display:inline-block}.lido-image-colorize::after{content:'';position:absolute;inset:0;background:var(--tint-color);mix-blend-mode:multiply;opacity:0.8;pointer-events:none;mask-image:var(--mask-url);mask-size:cover;mask-repeat:no-repeat;mask-position:center}.lido-tts-highlight-overlay{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;background:linear-gradient(\n    180deg,\n    rgba(255, 235, 59, 0.95),\n    rgba(255, 214, 0, 0.95)\n  );border-radius:6px;box-shadow:0 2px 6px rgba(0, 0, 0, 0.18),\n    inset 0 -1px 0 rgba(255, 255, 255, 0.25);transition:width 25ms ease-out,\n    height 25ms ease-out,\n    opacity 80ms ease-out;opacity:0.95;will-change:transform, width, height;contain:layout paint style}.category-dropped-onCorrect{box-shadow:rgba(129, 193, 39, 1) 0px 8px 8px 0px !important}.category-dropped-onInCorrect{box-shadow:rgba(255, 4, 16, 1) 0px 8px 8px 0px !important}";
+const globalStyles = "@font-face{font-family:'Baloo Bhai 2';font-style:normal;font-weight:400 800;font-display:swap;src:url('../assets/offline-assets/fonts/Baloo-Bhai-2/Baloo-Bhai-2-Variable.woff2') format('woff2')}body{overflow:hidden;background-position:center;background-size:cover;background-repeat:no-repeat;height:100vh}*{user-select:none}.lido-disable-check-button{pointer-events:none;background-color:#9393935c !important;color:white}.lido-element-selected{border:2px solid;background-color:#ffdf7d !important}.diagonal-target,.diagonal-drop *{transform:scale(0.8) !important;opacity:1 !important}.cloned-element{display:flex !important;position:absolute !important;filter:grayscale(100%);pointer-events:none}.removeShadow{box-shadow:0px 0px 0px 0px #ff8900 !important}.highlight-element{border:2px solid white;box-shadow:rgb(243, 77, 8) 0px 0px 40px !important}.drop-element.empty{border:4px dashed #f34d08 !important}.drop-element.filled{border:'none' !important}.drag-element{box-shadow:0px 15px 11px rgba(43, 0, 0, 0.3) !important}.drag-element.dropped{box-shadow:none !important}.click-element{background-color:var(--btn-bg-color, rgba(255, 172, 76, 1)) !important;box-shadow:var(--btn-shadow-px) var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;cursor:pointer;transition:box-shadow 0.1s ease-out, transform 0.2s ease-out;}.click-element:active{box-shadow:0px 0px 0px var(--btn-shadow-color, rgba(225, 121, 76, 1)) !important;transform:translateY(var(--btn-active));}.click-element:focus{outline:2px solid dodgerblue;outline-offset:3px}.after-drop-popup-container{width:200%;height:200%;background-color:rgba(0, 0, 0, 0.8);position:absolute;display:flex;flex-direction:row-reverse;align-items:center;justify-content:center !important;gap:80px}.after-drop-popup-drag-element{scale:1.5;border-radius:8px;transform:none !important;position:unset !important}.after-drop-popup-drop-element{scale:1.5;border:unset;border-radius:8px;transform:none !important;position:unset !important}@keyframes zoomFadeIn{0%{transform:scale(0.6);opacity:0}100%{transform:scale(1);opacity:1}}.zoom-fade-in{animation:zoomFadeIn 0.8s ease-out forwards}@keyframes zoomFadeOut{0%{transform:scale(1);opacity:1}100%{transform:scale(0.6);opacity:0}}.zoom-fade-out{animation:zoomFadeOut 0.8s ease-in forwards}.slide-numbers{width:70px;height:70px;border:1px solid #f57139;background-color:white;font-weight:500;color:#f57139;font-size:44px;border-radius:40px;display:flex;align-items:center;justify-content:center;font-family:'Baloo Bhai 2', serif}.slide-numbers-bottom{position:absolute;display:flex;justify-content:space-around;align-items:center;bottom:-25px;width:100%;height:50px}.slide-numbers-left{position:absolute;display:flex;flex-direction:column;justify-content:space-around;height:100%;width:50px;left:-25px;bottom:0px}.lido-speak-icon{width:56px;height:56px;position:absolute;top:-25px;right:-25px;z-index:10;background-color:white;border:4px solid #F34D08;border-radius:16px;box-shadow:0px 4px 0px 0px #F34D08;background-size:contain;background-repeat:no-repeat;cursor:pointer}.lido-speak-icon:active{transform:translateY(8px);box-shadow:0px 0px 0px 0px !important}.lido-strong-shake{animation:strongShake 0.3s ease}.lido-scaled-shake{animation:scaledShake 0.6s ease-in-out}.lido-horizontal-shake{animation:horizontalShake 0.6s ease-in-out;border-radius:20px}.lido-vertical-shake{animation:verticalShake 0.6s ease-in-out;border-radius:20px}.lido-diagonal-shake{animation:diagonalShake 0.5s ease-in-out;border-radius:20px;will-change:transform}.lido-glow{animation:glowPulse 1s infinite alternate;transition:opacity 0.5s ease-in-out}.lido-box-highlight{animation:topToPlace 0.3s linear}.lido-display-hiddenvalue{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:80px;font-weight:1000;color:brown;-webkit-text-stroke:2px white;font-family:'Baloo Bhai 2', sans-serif;pointer-events:none}.lido-image-colorize{position:relative;display:inline-block}.lido-image-colorize::after{content:'';position:absolute;inset:0;background:var(--tint-color);mix-blend-mode:multiply;opacity:0.8;pointer-events:none;mask-image:var(--mask-url);mask-size:cover;mask-repeat:no-repeat;mask-position:center}.lido-tts-highlight-overlay{position:fixed;left:0;top:0;pointer-events:none;z-index:9999;background:linear-gradient(\r\n    180deg,\r\n    rgba(255, 235, 59, 0.95),\r\n    rgba(255, 214, 0, 0.95)\r\n  );border-radius:6px;box-shadow:0 2px 6px rgba(0, 0, 0, 0.18),\r\n    inset 0 -1px 0 rgba(255, 255, 255, 0.25);transition:width 25ms ease-out,\r\n    height 25ms ease-out,\r\n    opacity 80ms ease-out;opacity:0.95;will-change:transform, width, height;contain:layout paint style}.category-dropped-onCorrect{box-shadow:rgba(129, 193, 39, 1) 0px 8px 8px 0px !important}.category-dropped-onInCorrect{box-shadow:rgba(255, 4, 16, 1) 0px 8px 8px 0px !important}";
 
 /*
  Stencil Client Platform v4.43.5 | MIT Licensed | https://stenciljs.com

package/dist/cjs/index.cjs.js

@@ -1,7 +1,7 @@
 'use strict';
 
-var index = require('./index-DjM03fsg.js');
-require('./index-DBCFoh1I.js');
+var index = require('./index-Cf9LHdIw.js');
+require('./index-DnaH8sO-.js');