saltfish 0.3.57 → 0.3.59

package/dist/saltfish-playlist-player.es.js

@@ -6692,6 +6692,55 @@ const DEFAULT_CONFIG = {
   minSize: 1
   // Minimum 1x1px (reject only zero-size elements)
 };
+function normalizeText(text) {
+  return text.trim().replace(/\s+/g, " ");
+}
+function matchesExpectedElement(element, expected) {
+  if (element.tagName.toUpperCase() !== expected.tagName.toUpperCase()) {
+    return false;
+  }
+  const actualText = normalizeText(element.textContent || "");
+  const expectedText = normalizeText(expected.textContent);
+  return actualText === expectedText;
+}
+function findElementByTagAndText(elements, expected, config) {
+  const matches = [];
+  for (const element of elements) {
+    const rejection = getBasicRejectionReason(element, config);
+    if (rejection) {
+      continue;
+    }
+    if (matchesExpectedElement(element, expected)) {
+      matches.push(element);
+    }
+  }
+  if (matches.length === 0) {
+    log(`ElementValidator: No tag+text match for tagName='${expected.tagName}', text='${expected.textContent.substring(0, 50)}${expected.textContent.length > 50 ? "..." : ""}'`);
+    return null;
+  }
+  if (matches.length === 1) {
+    return matches[0];
+  }
+  return matches[0];
+}
+function findAllElementsByTagAndText(elements, expected, config) {
+  const matches = [];
+  for (const element of elements) {
+    const rejection = getBasicRejectionReason(element, config);
+    if (rejection) {
+      continue;
+    }
+    if (matchesExpectedElement(element, expected)) {
+      matches.push(element);
+    }
+  }
+  if (matches.length > 0) {
+    log(`ElementValidator: Found ${matches.length} element(s) matching tag+text`);
+  } else {
+    log(`ElementValidator: No tag+text match for tagName='${expected.tagName}'`);
+  }
+  return matches;
+}
 function getBasicRejectionReason(element, config) {
   const rect = element.getBoundingClientRect();
   if (rect.width === 0 || rect.height === 0) {
@@ -6708,20 +6757,32 @@ function calculateSizeScore(element, expected) {
   const heightRatio = Math.min(rect.height, expected.height) / Math.max(rect.height, expected.height);
   return (widthRatio + heightRatio) / 2 * 100;
 }
-function findValidElement(selector, expectedSize, config = DEFAULT_CONFIG) {
+function findValidElement(selector, expectedElement, expectedSize, config = DEFAULT_CONFIG) {
   const elements = document.querySelectorAll(selector);
   if (elements.length === 0) {
     return null;
   }
-  if (!expectedSize) {
-    for (const element of elements) {
-      const rejection = getBasicRejectionReason(element, config);
-      if (!rejection) {
-        return element;
-      }
+  if (expectedElement) {
+    const tagTextMatch = findElementByTagAndText(elements, expectedElement, config);
+    if (tagTextMatch) {
+      return tagTextMatch;
+    }
+    if (!expectedSize) {
+      return null;
+    }
+  }
+  if (expectedSize) {
+    return findValidElementBySize(selector, elements, expectedSize, config);
+  }
+  for (const element of elements) {
+    const rejection = getBasicRejectionReason(element, config);
+    if (!rejection) {
+      return element;
     }
-    return elements[0];
   }
+  return elements[0];
+}
+function findValidElementBySize(selector, elements, expectedSize, config) {
   const threshold = (1 - config.tolerance) * 100;
   const scored = [];
   for (const element of elements) {
@@ -6757,49 +6818,63 @@ function findValidElement(selector, expectedSize, config = DEFAULT_CONFIG) {
   log(`ElementValidator: Selected element with ${valid[0].score.toFixed(0)}% match`);
   return valid[0].element;
 }
-function findAllValidElements(selector, expectedSize, config = DEFAULT_CONFIG) {
+function findAllValidElements(selector, expectedElement, expectedSize, config = DEFAULT_CONFIG) {
   const elements = document.querySelectorAll(selector);
   if (elements.length === 0) {
     return [];
   }
-  if (!expectedSize) {
+  if (expectedElement) {
+    const tagTextMatches = findAllElementsByTagAndText(elements, expectedElement, config);
+    if (tagTextMatches.length > 0) {
+      return tagTextMatches;
+    }
+    if (!expectedSize) {
+      return [];
+    }
+  }
+  if (expectedSize) {
+    const threshold = (1 - config.tolerance) * 100;
     const valid2 = [];
     for (const element of elements) {
       const rejection = getBasicRejectionReason(element, config);
-      if (!rejection) {
+      if (rejection) {
+        continue;
+      }
+      const score = calculateSizeScore(element, expectedSize);
+      if (score >= threshold) {
         valid2.push(element);
       }
     }
-    return valid2.length > 0 ? valid2 : Array.from(elements);
+    if (valid2.length > 0) {
+      log(`ElementValidator: Found ${valid2.length} valid element(s) for '${selector}'`);
+    }
+    return valid2;
   }
-  const threshold = (1 - config.tolerance) * 100;
   const valid = [];
   for (const element of elements) {
     const rejection = getBasicRejectionReason(element, config);
-    if (rejection) {
-      continue;
-    }
-    const score = calculateSizeScore(element, expectedSize);
-    if (score >= threshold) {
+    if (!rejection) {
       valid.push(element);
     }
   }
-  if (valid.length > 0) {
-    log(`ElementValidator: Found ${valid.length} valid element(s) for '${selector}'`);
-  }
-  return valid;
+  return valid.length > 0 ? valid : Array.from(elements);
 }
-function isElementValid(element, expectedSize, config = DEFAULT_CONFIG) {
+function isElementValid(element, expectedElement, expectedSize, config = DEFAULT_CONFIG) {
   const rejection = getBasicRejectionReason(element, config);
   if (rejection) {
     return false;
   }
-  if (!expectedSize) {
-    return true;
+  if (expectedElement) {
+    if (matchesExpectedElement(element, expectedElement)) {
+      return true;
+    }
   }
-  const threshold = (1 - config.tolerance) * 100;
-  const score = calculateSizeScore(element, expectedSize);
-  return score >= threshold;
+  if (expectedSize) {
+    const threshold = (1 - config.tolerance) * 100;
+    const score = calculateSizeScore(element, expectedSize);
+    return score >= threshold;
+  }
+  return true;
 }
 class CursorManager {
   constructor() {
@@ -6974,9 +7049,10 @@ class CursorManager {
    * Sets up a MutationObserver to wait for an element to appear in the DOM
    * @param selector - CSS selector to wait for
    * @param callback - Callback to execute when element is found
+   * @param expectedElement - Optional expected tag+text for validation
    * @param expectedSize - Optional expected size for validation
    */
-  waitForElement(selector, callback, expectedSize) {
+  waitForElement(selector, callback, expectedElement, expectedSize) {
     if (this.targetMutationObserver) {
       this.targetMutationObserver.disconnect();
       this.targetMutationObserver = null;
@@ -7001,7 +7077,7 @@ class CursorManager {
         cleanupWatchers();
         return null;
       }
-      return this.findElementAndScrollIntoView(selector, expectedSize);
+      return this.findElementAndScrollIntoView(selector, expectedElement, expectedSize);
     };
     this.targetMutationObserver = new MutationObserver(async () => {
       if (this.isAutoplayBlocked()) {
@@ -7026,7 +7102,7 @@ class CursorManager {
         cleanupWatchers();
         return;
       }
-      const found = this.findElement(selector, expectedSize);
+      const found = this.findElement(selector, expectedElement, expectedSize);
       if (found) {
         cleanupWatchers();
         callback(found);
@@ -7080,15 +7156,16 @@ class CursorManager {
   }
   /**
    * Helper function to find an element in the document
-   * Uses size validation when expectedSize is provided
-   * Falls back to viewport-based selection when no expectedSize or when validation passes
+   * Uses tag+text validation first (if provided), then size validation
+   * Falls back to viewport-based selection when no validation criteria or when validation passes
    * @param selector - CSS selector
+   * @param expectedElement - Optional expected tag+text for validation
    * @param expectedSize - Optional expected size for validation
    * @returns - The found element or null
    */
-  findElement(selector, expectedSize) {
-    if (expectedSize) {
-      const validElement = findValidElement(selector, expectedSize);
+  findElement(selector, expectedElement, expectedSize) {
+    if (expectedElement || expectedSize) {
+      const validElement = findValidElement(selector, expectedElement, expectedSize);
       if (validElement) {
         return validElement;
       }
@@ -7233,11 +7310,12 @@ class CursorManager {
   /**
    * Finds an element and scrolls it into view if necessary
    * @param selector - CSS selector
+   * @param expectedElement - Optional expected tag+text for validation
    * @param expectedSize - Optional expected size for validation
    * @returns - Promise that resolves with the element or null
    */
-  async findElementAndScrollIntoView(selector, expectedSize) {
-    const element = this.findElement(selector, expectedSize);
+  async findElementAndScrollIntoView(selector, expectedElement, expectedSize) {
+    const element = this.findElement(selector, expectedElement, expectedSize);
     if (!element) {
       return null;
     }
@@ -7577,12 +7655,12 @@ class CursorManager {
     if (this.isAutoplayBlocked()) {
       return;
     }
-    const targetElement = await this.findElementAndScrollIntoView(animation.targetSelector, animation.expectedSize);
+    const targetElement = await this.findElementAndScrollIntoView(animation.targetSelector, animation.expectedElement, animation.expectedSize);
     if (!targetElement) {
       console.warn("CursorManager: Target element not found in animate:", animation.targetSelector);
       this.setShouldShowCursor(false);
       this.hideCursorElements();
-      this.waitForElement(animation.targetSelector, () => this.animate(animation), animation.expectedSize);
+      this.waitForElement(animation.targetSelector, () => this.animate(animation), animation.expectedElement, animation.expectedSize);
       return;
     }
     this.setShouldShowCursor(true);
@@ -9256,7 +9334,7 @@ class TransitionManager {
         element.addEventListener("click", handler, { capture: true });
       });
     };
-    const initialElements = transition.expectedSize ? findAllValidElements(selector, transition.expectedSize) : Array.from(document.querySelectorAll(selector));
+    const initialElements = transition.expectedElement || transition.expectedSize ? findAllValidElements(selector, transition.expectedElement, transition.expectedSize) : Array.from(document.querySelectorAll(selector));
     addClickHandlersToElements(initialElements);
     mutationObserver = new MutationObserver((mutationsList) => {
       for (const mutation of mutationsList) {
@@ -9265,13 +9343,13 @@ class TransitionManager {
             if (node.nodeType === Node.ELEMENT_NODE) {
               const elementNode = node;
               if (elementNode.matches(selector)) {
-                if (!transition.expectedSize || isElementValid(elementNode, transition.expectedSize)) {
+                if (!transition.expectedElement && !transition.expectedSize || isElementValid(elementNode, transition.expectedElement, transition.expectedSize)) {
                   addClickHandlersToElements([elementNode]);
                 }
               }
               const matchingDescendants = elementNode.querySelectorAll(selector);
               if (matchingDescendants.length > 0) {
-                const validDescendants = transition.expectedSize ? Array.from(matchingDescendants).filter((el) => isElementValid(el, transition.expectedSize)) : Array.from(matchingDescendants);
+                const validDescendants = transition.expectedElement || transition.expectedSize ? Array.from(matchingDescendants).filter((el) => isElementValid(el, transition.expectedElement, transition.expectedSize)) : Array.from(matchingDescendants);
                 if (validDescendants.length > 0) {
                   log(`TransitionManager: Found ${validDescendants.length} valid descendants matching '${selector}'`);
                   addClickHandlersToElements(validDescendants);
@@ -9607,7 +9685,7 @@ class TransitionManager {
         mutationObserver = null;
       }
     };
-    const initialElement = transition.expectedSize ? findValidElement(selector, transition.expectedSize) : document.querySelector(selector);
+    const initialElement = transition.expectedElement || transition.expectedSize ? findValidElement(selector, transition.expectedElement, transition.expectedSize) : document.querySelector(selector);
     if (initialElement) {
       setupIntersectionObserver(initialElement);
     } else {
@@ -9618,12 +9696,12 @@ class TransitionManager {
               if (node.nodeType === Node.ELEMENT_NODE) {
                 const elementNode = node;
                 if (elementNode.matches(selector)) {
-                  if (!transition.expectedSize || isElementValid(elementNode, transition.expectedSize)) {
+                  if (!transition.expectedElement && !transition.expectedSize || isElementValid(elementNode, transition.expectedElement, transition.expectedSize)) {
                     setupIntersectionObserver(elementNode);
                     return;
                   }
                 }
-                const matchingDescendant = transition.expectedSize ? findValidElement(selector, transition.expectedSize) : elementNode.querySelector(selector);
+                const matchingDescendant = transition.expectedElement || transition.expectedSize ? findValidElement(selector, transition.expectedElement, transition.expectedSize) : elementNode.querySelector(selector);
                 if (matchingDescendant) {
                   setupIntersectionObserver(matchingDescendant);
                   return;
@@ -9644,7 +9722,7 @@ class TransitionManager {
           }
           return;
         }
-        const element = transition.expectedSize ? findValidElement(selector, transition.expectedSize) : document.querySelector(selector);
+        const element = transition.expectedElement || transition.expectedSize ? findValidElement(selector, transition.expectedElement, transition.expectedSize) : document.querySelector(selector);
         if (element && element.offsetWidth > 0 && element.offsetHeight > 0) {
           if (periodicCheck) {
             clearInterval(periodicCheck);
@@ -10106,6 +10184,7 @@ class TriggerManager {
         this.setupElementClickListener(
           playlist.id,
           playlist.triggers.elementClicked,
+          playlist.triggers.elementClickedExpectedElement,
           playlist.triggers.elementClickedExpectedSize
         );
       }
@@ -10115,11 +10194,12 @@ class TriggerManager {
    * Sets up a click event listener for a specific playlist and selector
    * @param playlistId - The playlist ID
    * @param selector - CSS selector for the target element
+   * @param expectedElement - Optional expected tag+text for validation
    * @param expectedSize - Optional expected size for validation
    */
-  setupElementClickListener(playlistId, selector, expectedSize) {
+  setupElementClickListener(playlistId, selector, expectedElement, expectedSize) {
     try {
-      const element = expectedSize ? findValidElement(selector, expectedSize) : document.querySelector(selector);
+      const element = expectedElement || expectedSize ? findValidElement(selector, expectedElement, expectedSize) : document.querySelector(selector);
       if (!element) {
         log(`TriggerManager: Element not found for selector '${selector}' (playlist: ${playlistId})`);
         return;
@@ -10171,6 +10251,7 @@ class TriggerManager {
         this.setupElementVisibleObserver(
           playlist.id,
           playlist.triggers.elementVisible,
+          playlist.triggers.elementVisibleExpectedElement,
           playlist.triggers.elementVisibleExpectedSize
         );
       }
@@ -10180,9 +10261,10 @@ class TriggerManager {
    * Sets up a visibility observer for a specific playlist and selector
    * @param playlistId - The playlist ID
    * @param selector - CSS selector for the target element
+   * @param expectedElement - Optional expected tag+text for validation
    * @param expectedSize - Optional expected size for validation
    */
-  setupElementVisibleObserver(playlistId, selector, expectedSize) {
+  setupElementVisibleObserver(playlistId, selector, expectedElement, expectedSize) {
     try {
       const observerId = `${playlistId}-${selector}`;
       if (this.elementVisibleObservers.has(observerId)) {
@@ -10240,7 +10322,7 @@ class TriggerManager {
           });
         }
       };
-      const initialElement = expectedSize ? findValidElement(selector, expectedSize) : document.querySelector(selector);
+      const initialElement = expectedElement || expectedSize ? findValidElement(selector, expectedElement, expectedSize) : document.querySelector(selector);
       if (initialElement) {
         log(`TriggerManager: Found element matching '${selector}' immediately`);
         setupIntersectionObserver(initialElement);
@@ -10253,12 +10335,12 @@ class TriggerManager {
                 if (node.nodeType === Node.ELEMENT_NODE) {
                   const elementNode = node;
                   if (elementNode.matches(selector)) {
-                    if (!expectedSize || isElementValid(elementNode, expectedSize)) {
+                    if (!expectedElement && !expectedSize || isElementValid(elementNode, expectedElement, expectedSize)) {
                       log(`TriggerManager: Added node matches '${selector}'`);
                       setupIntersectionObserver(elementNode);
                     }
                   } else {
-                    const matchingDescendant = expectedSize ? findValidElement(selector, expectedSize) : elementNode.querySelector(selector);
+                    const matchingDescendant = expectedElement || expectedSize ? findValidElement(selector, expectedElement, expectedSize) : elementNode.querySelector(selector);
                     if (matchingDescendant) {
                       log(`TriggerManager: Found descendant matching '${selector}'`);
                       setupIntersectionObserver(matchingDescendant);
@@ -12172,7 +12254,7 @@ const SaltfishPlayer$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.de
   __proto__: null,
   SaltfishPlayer
 }, Symbol.toStringTag, { value: "Module" }));
-const version = "0.3.57";
+const version = "0.3.59";
 const packageJson = {
   version
 };