saltfish 0.3.55 → 0.3.57

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

@@ -2754,6 +2754,7 @@ class PlaylistOrchestrator {
       }
       const runId = this.managers.sessionManager.startNewRun();
       log(`PlaylistOrchestrator: Starting playlist ${playlistId} with runId: ${runId}`);
+      this.managers.triggerManager.markPlaylistAsTriggered(playlistId);
       const userDataLoadedPromise = (_c = this.userManagementService) == null ? void 0 : _c.getUserDataLoadedPromise();
       if (userDataLoadedPromise) {
         log("[PlaylistOrchestrator.startPlaylist] Waiting for user data to load before checking A/B test assignments");
@@ -6685,6 +6686,121 @@ const THRESHOLDS = {
   /** Minimum scroll distance in pixels to trigger scroll events */
   SCROLL_THRESHOLD_PX: 10
 };
+const DEFAULT_CONFIG = {
+  tolerance: 0.3,
+  // 30% size difference allowed (70% match required)
+  minSize: 1
+  // Minimum 1x1px (reject only zero-size elements)
+};
+function getBasicRejectionReason(element, config) {
+  const rect = element.getBoundingClientRect();
+  if (rect.width === 0 || rect.height === 0) {
+    return "zero size";
+  }
+  if (rect.width < config.minSize || rect.height < config.minSize) {
+    return `too small (${rect.width.toFixed(0)}x${rect.height.toFixed(0)})`;
+  }
+  return null;
+}
+function calculateSizeScore(element, expected) {
+  const rect = element.getBoundingClientRect();
+  const widthRatio = Math.min(rect.width, expected.width) / Math.max(rect.width, expected.width);
+  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) {
+  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;
+      }
+    }
+    return elements[0];
+  }
+  const threshold = (1 - config.tolerance) * 100;
+  const scored = [];
+  for (const element of elements) {
+    const rejection = getBasicRejectionReason(element, config);
+    if (rejection) {
+      scored.push({ element, score: -1, rejection });
+      continue;
+    }
+    const score = calculateSizeScore(element, expectedSize);
+    if (score < threshold) {
+      const rect = element.getBoundingClientRect();
+      scored.push({
+        element,
+        score,
+        rejection: `size mismatch: expected ~${expectedSize.width.toFixed(0)}x${expectedSize.height.toFixed(0)}, got ${rect.width.toFixed(0)}x${rect.height.toFixed(0)}`
+      });
+    } else {
+      scored.push({ element, score });
+    }
+  }
+  log(`ElementValidator: ${scored.length} element(s) for '${selector}' (expected ~${expectedSize.width.toFixed(0)}x${expectedSize.height.toFixed(0)})`);
+  for (let i = 0; i < scored.length; i++) {
+    const s = scored[i];
+    const rect = s.element.getBoundingClientRect();
+    const status = s.rejection ? `REJECTED (${s.rejection})` : `OK (${s.score.toFixed(0)}%)`;
+    log(`  [${i}] ${rect.width.toFixed(0)}x${rect.height.toFixed(0)} - ${status}`);
+  }
+  const valid = scored.filter((s) => !s.rejection);
+  if (valid.length === 0) {
+    return null;
+  }
+  valid.sort((a, b) => b.score - a.score);
+  log(`ElementValidator: Selected element with ${valid[0].score.toFixed(0)}% match`);
+  return valid[0].element;
+}
+function findAllValidElements(selector, expectedSize, config = DEFAULT_CONFIG) {
+  const elements = document.querySelectorAll(selector);
+  if (elements.length === 0) {
+    return [];
+  }
+  if (!expectedSize) {
+    const valid2 = [];
+    for (const element of elements) {
+      const rejection = getBasicRejectionReason(element, config);
+      if (!rejection) {
+        valid2.push(element);
+      }
+    }
+    return valid2.length > 0 ? valid2 : Array.from(elements);
+  }
+  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) {
+      valid.push(element);
+    }
+  }
+  if (valid.length > 0) {
+    log(`ElementValidator: Found ${valid.length} valid element(s) for '${selector}'`);
+  }
+  return valid;
+}
+function isElementValid(element, expectedSize, config = DEFAULT_CONFIG) {
+  const rejection = getBasicRejectionReason(element, config);
+  if (rejection) {
+    return false;
+  }
+  if (!expectedSize) {
+    return true;
+  }
+  const threshold = (1 - config.tolerance) * 100;
+  const score = calculateSizeScore(element, expectedSize);
+  return score >= threshold;
+}
 class CursorManager {
   constructor() {
     __publicField(this, "cursor", null);
@@ -6858,40 +6974,61 @@ 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 expectedSize - Optional expected size for validation
    */
-  waitForElement(selector, callback) {
+  waitForElement(selector, callback, expectedSize) {
     if (this.targetMutationObserver) {
       this.targetMutationObserver.disconnect();
       this.targetMutationObserver = null;
     }
-    this.targetMutationObserver = new MutationObserver(async (_, observer) => {
-      if (this.isAutoplayBlocked()) {
-        observer.disconnect();
+    const MAX_RETRIES = 10;
+    let retryCount = 0;
+    let periodicCheckId = null;
+    const cleanupWatchers = () => {
+      if (this.targetMutationObserver) {
+        this.targetMutationObserver.disconnect();
         this.targetMutationObserver = null;
+      }
+      if (periodicCheckId !== null) {
+        clearInterval(periodicCheckId);
+        periodicCheckId = null;
+      }
+    };
+    const tryFindElement = async () => {
+      retryCount++;
+      if (retryCount > MAX_RETRIES) {
+        console.warn(`CursorManager: Stopped waiting for element '${selector}' after ${MAX_RETRIES} attempts`);
+        cleanupWatchers();
+        return null;
+      }
+      return this.findElementAndScrollIntoView(selector, expectedSize);
+    };
+    this.targetMutationObserver = new MutationObserver(async () => {
+      if (this.isAutoplayBlocked()) {
+        cleanupWatchers();
         return;
       }
-      const el = await this.findElementAndScrollIntoView(selector);
+      const el = await tryFindElement();
       if (el) {
-        observer.disconnect();
-        this.targetMutationObserver = null;
+        cleanupWatchers();
         callback(el);
       }
     });
     this.targetMutationObserver.observe(document.body, { childList: true, subtree: true });
-    const periodicCheck = setInterval(() => {
+    periodicCheckId = setInterval(() => {
       if (!this.targetMutationObserver || this.isAutoplayBlocked()) {
-        clearInterval(periodicCheck);
-        if (this.targetMutationObserver) {
-          this.targetMutationObserver.disconnect();
-          this.targetMutationObserver = null;
-        }
+        cleanupWatchers();
+        return;
+      }
+      retryCount++;
+      if (retryCount > MAX_RETRIES) {
+        console.warn(`CursorManager: Stopped waiting for element '${selector}' after ${MAX_RETRIES} attempts`);
+        cleanupWatchers();
         return;
       }
-      const found = this.findElement(selector);
+      const found = this.findElement(selector, expectedSize);
       if (found) {
-        clearInterval(periodicCheck);
-        this.targetMutationObserver.disconnect();
-        this.targetMutationObserver = null;
+        cleanupWatchers();
         callback(found);
       }
     }, 1e3);
@@ -6943,11 +7080,20 @@ class CursorManager {
   }
   /**
    * Helper function to find an element in the document
-   * Prioritizes elements that are visible in the viewport
+   * Uses size validation when expectedSize is provided
+   * Falls back to viewport-based selection when no expectedSize or when validation passes
    * @param selector - CSS selector
+   * @param expectedSize - Optional expected size for validation
    * @returns - The found element or null
    */
-  findElement(selector) {
+  findElement(selector, expectedSize) {
+    if (expectedSize) {
+      const validElement = findValidElement(selector, expectedSize);
+      if (validElement) {
+        return validElement;
+      }
+      return null;
+    }
     const elements = document.querySelectorAll(selector);
     if (elements.length === 0) {
       return null;
@@ -7087,10 +7233,11 @@ class CursorManager {
   /**
    * Finds an element and scrolls it into view if necessary
    * @param selector - CSS selector
+   * @param expectedSize - Optional expected size for validation
    * @returns - Promise that resolves with the element or null
    */
-  async findElementAndScrollIntoView(selector) {
-    const element = this.findElement(selector);
+  async findElementAndScrollIntoView(selector, expectedSize) {
+    const element = this.findElement(selector, expectedSize);
     if (!element) {
       return null;
     }
@@ -7099,10 +7246,29 @@ class CursorManager {
     }
     return element;
   }
+  /**
+   * Cleans up any existing cursor elements from the DOM
+   * This prevents duplicate elements when switching playlists
+   */
+  cleanupExistingElements() {
+    const existingCursors = document.querySelectorAll(".sf-cursor");
+    existingCursors.forEach((el) => el.remove());
+    const existingLabels = document.querySelectorAll(".sf-cursor-label");
+    existingLabels.forEach((el) => el.remove());
+    const existingSelections = document.querySelectorAll(".sf-selection");
+    existingSelections.forEach((el) => el.remove());
+    const existingFlashlights = document.querySelectorAll(".sf-flashlight-overlay");
+    existingFlashlights.forEach((el) => el.remove());
+    this.cursor = null;
+    this.labelElement = null;
+    this.selectionElement = null;
+    this.flashlightOverlay = null;
+  }
   /**
    * Creates the virtual cursor element
    */
   create() {
+    this.cleanupExistingElements();
     this.injectCursorStyles();
     this.cursor = document.createElement("div");
     this.cursor.className = "sf-cursor";
@@ -7411,12 +7577,12 @@ class CursorManager {
     if (this.isAutoplayBlocked()) {
       return;
     }
-    const targetElement = await this.findElementAndScrollIntoView(animation.targetSelector);
+    const targetElement = await this.findElementAndScrollIntoView(animation.targetSelector, 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));
+      this.waitForElement(animation.targetSelector, () => this.animate(animation), animation.expectedSize);
       return;
     }
     this.setShouldShowCursor(true);
@@ -9090,7 +9256,7 @@ class TransitionManager {
         element.addEventListener("click", handler, { capture: true });
       });
     };
-    const initialElements = document.querySelectorAll(selector);
+    const initialElements = transition.expectedSize ? findAllValidElements(selector, transition.expectedSize) : Array.from(document.querySelectorAll(selector));
     addClickHandlersToElements(initialElements);
     mutationObserver = new MutationObserver((mutationsList) => {
       for (const mutation of mutationsList) {
@@ -9099,12 +9265,17 @@ class TransitionManager {
             if (node.nodeType === Node.ELEMENT_NODE) {
               const elementNode = node;
               if (elementNode.matches(selector)) {
-                addClickHandlersToElements([elementNode]);
+                if (!transition.expectedSize || isElementValid(elementNode, transition.expectedSize)) {
+                  addClickHandlersToElements([elementNode]);
+                }
               }
               const matchingDescendants = elementNode.querySelectorAll(selector);
               if (matchingDescendants.length > 0) {
-                log(`TransitionManager: Found ${matchingDescendants.length} descendants matching '${selector}'`);
-                addClickHandlersToElements(matchingDescendants);
+                const validDescendants = transition.expectedSize ? Array.from(matchingDescendants).filter((el) => isElementValid(el, transition.expectedSize)) : Array.from(matchingDescendants);
+                if (validDescendants.length > 0) {
+                  log(`TransitionManager: Found ${validDescendants.length} valid descendants matching '${selector}'`);
+                  addClickHandlersToElements(validDescendants);
+                }
               }
             }
           });
@@ -9436,7 +9607,7 @@ class TransitionManager {
         mutationObserver = null;
       }
     };
-    const initialElement = document.querySelector(selector);
+    const initialElement = transition.expectedSize ? findValidElement(selector, transition.expectedSize) : document.querySelector(selector);
     if (initialElement) {
       setupIntersectionObserver(initialElement);
     } else {
@@ -9447,10 +9618,12 @@ class TransitionManager {
               if (node.nodeType === Node.ELEMENT_NODE) {
                 const elementNode = node;
                 if (elementNode.matches(selector)) {
-                  setupIntersectionObserver(elementNode);
-                  return;
+                  if (!transition.expectedSize || isElementValid(elementNode, transition.expectedSize)) {
+                    setupIntersectionObserver(elementNode);
+                    return;
+                  }
                 }
-                const matchingDescendant = elementNode.querySelector(selector);
+                const matchingDescendant = transition.expectedSize ? findValidElement(selector, transition.expectedSize) : elementNode.querySelector(selector);
                 if (matchingDescendant) {
                   setupIntersectionObserver(matchingDescendant);
                   return;
@@ -9471,7 +9644,7 @@ class TransitionManager {
           }
           return;
         }
-        const element = document.querySelector(selector);
+        const element = transition.expectedSize ? findValidElement(selector, transition.expectedSize) : document.querySelector(selector);
         if (element && element.offsetWidth > 0 && element.offsetHeight > 0) {
           if (periodicCheck) {
             clearInterval(periodicCheck);
@@ -9930,7 +10103,11 @@ class TriggerManager {
     this.triggeredPlaylists.forEach((playlist) => {
       var _a;
       if ((_a = playlist.triggers) == null ? void 0 : _a.elementClicked) {
-        this.setupElementClickListener(playlist.id, playlist.triggers.elementClicked);
+        this.setupElementClickListener(
+          playlist.id,
+          playlist.triggers.elementClicked,
+          playlist.triggers.elementClickedExpectedSize
+        );
       }
     });
   }
@@ -9938,10 +10115,11 @@ 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 expectedSize - Optional expected size for validation
    */
-  setupElementClickListener(playlistId, selector) {
+  setupElementClickListener(playlistId, selector, expectedSize) {
     try {
-      const element = document.querySelector(selector);
+      const element = expectedSize ? findValidElement(selector, expectedSize) : document.querySelector(selector);
       if (!element) {
         log(`TriggerManager: Element not found for selector '${selector}' (playlist: ${playlistId})`);
         return;
@@ -9990,7 +10168,11 @@ class TriggerManager {
     this.triggeredPlaylists.forEach((playlist) => {
       var _a;
       if ((_a = playlist.triggers) == null ? void 0 : _a.elementVisible) {
-        this.setupElementVisibleObserver(playlist.id, playlist.triggers.elementVisible);
+        this.setupElementVisibleObserver(
+          playlist.id,
+          playlist.triggers.elementVisible,
+          playlist.triggers.elementVisibleExpectedSize
+        );
       }
     });
   }
@@ -9998,8 +10180,9 @@ 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 expectedSize - Optional expected size for validation
    */
-  setupElementVisibleObserver(playlistId, selector) {
+  setupElementVisibleObserver(playlistId, selector, expectedSize) {
     try {
       const observerId = `${playlistId}-${selector}`;
       if (this.elementVisibleObservers.has(observerId)) {
@@ -10057,7 +10240,7 @@ class TriggerManager {
           });
         }
       };
-      const initialElement = document.querySelector(selector);
+      const initialElement = expectedSize ? findValidElement(selector, expectedSize) : document.querySelector(selector);
       if (initialElement) {
         log(`TriggerManager: Found element matching '${selector}' immediately`);
         setupIntersectionObserver(initialElement);
@@ -10070,10 +10253,12 @@ class TriggerManager {
                 if (node.nodeType === Node.ELEMENT_NODE) {
                   const elementNode = node;
                   if (elementNode.matches(selector)) {
-                    log(`TriggerManager: Added node matches '${selector}'`);
-                    setupIntersectionObserver(elementNode);
+                    if (!expectedSize || isElementValid(elementNode, expectedSize)) {
+                      log(`TriggerManager: Added node matches '${selector}'`);
+                      setupIntersectionObserver(elementNode);
+                    }
                   } else {
-                    const matchingDescendant = elementNode.querySelector(selector);
+                    const matchingDescendant = expectedSize ? findValidElement(selector, expectedSize) : elementNode.querySelector(selector);
                     if (matchingDescendant) {
                       log(`TriggerManager: Found descendant matching '${selector}'`);
                       setupIntersectionObserver(matchingDescendant);
@@ -10166,6 +10351,16 @@ class TriggerManager {
   getTriggeredPlaylists() {
     return Array.from(this.triggeredPlaylistsSet);
   }
+  /**
+   * Marks a playlist as triggered to prevent re-triggering during URL changes
+   * This should be called when a playlist is started programmatically
+   * @param playlistId - The playlist ID to mark as triggered
+   */
+  markPlaylistAsTriggered(playlistId) {
+    if (!this.triggeredPlaylistsSet.has(playlistId)) {
+      this.triggeredPlaylistsSet.add(playlistId);
+    }
+  }
   /**
    * Cleanup method to be called on destroy
    */
@@ -11977,7 +12172,7 @@ const SaltfishPlayer$1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.de
   __proto__: null,
   SaltfishPlayer
 }, Symbol.toStringTag, { value: "Module" }));
-const version = "0.3.55";
+const version = "0.3.57";
 const packageJson = {
   version
 };