nodebb-plugin-ezoic-infinite 1.7.2 → 1.7.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nodebb-plugin-ezoic-infinite",
-  "version": "1.7.2",
+  "version": "1.7.4",
   "description": "Production-ready Ezoic infinite ads integration for NodeBB 4.x",
   "main": "library.js",
   "license": "MIT",

package/public/client.js

@@ -60,19 +60,25 @@
   };
 
   /**
-   * Table centrale : kindClass → { selector DOM, attribut d'ancre stable }
+   * Table centrale par kindClass :
    *
-   * L'attribut d'ancre est l'identifiant que NodeBB pose TOUJOURS sur l'élément,
-   * quelle que soit la page ou la virtualisation :
-   *   posts    → data-pid   (id du message, unique et permanent)
-   *   topics   → data-index (position 0-based dans la liste, fourni par NodeBB)
-   *   catégories → data-cid (id de la catégorie, unique et permanent)
-   *                          ← C'était le bug v19 : on cherchait data-index ici
+   *  sel        : sélecteur CSS complet de l'élément cible
+   *  baseTag    : tag CSS à préfixer dans les querySelector de recherche
+   *               (déduit manuellement — évite le fragile split('[')[0])
+   *  anchorAttr : attribut DOM STABLE qui identifie l'élément de façon unique
+   *               et permanente, utilisé comme clé d'ancre du wrap.
+   *               → data-pid   pour posts    (id message, immuable)
+   *               → data-index pour topics   (position dans la liste)
+   *               → data-cid   pour catégories (id catégorie, immuable)
+   *  ordinalAttr: attribut utilisé pour calculer l'intervalle d'injection.
+   *               Doit être un entier 0-based fourni par NodeBB.
+   *               Pour posts ET topics : data-index (0-based, toujours présent).
+   *               Pour catégories : pas d'infinite scroll → fallback positionnel.
    */
   const KIND = {
-    'ezoic-ad-message':    { sel: SEL.post,     anchorAttr: 'data-pid'   },
-    'ezoic-ad-between':    { sel: SEL.topic,    anchorAttr: 'data-index' },
-    'ezoic-ad-categories': { sel: SEL.category, anchorAttr: 'data-cid'   },
+    'ezoic-ad-message':    { sel: SEL.post,     baseTag: '',   anchorAttr: 'data-pid',   ordinalAttr: 'data-index' },
+    'ezoic-ad-between':    { sel: SEL.topic,    baseTag: 'li', anchorAttr: 'data-index', ordinalAttr: 'data-index' },
+    'ezoic-ad-categories': { sel: SEL.category, baseTag: 'li', anchorAttr: 'data-cid',   ordinalAttr: null         },
   };
 
   // ── État ───────────────────────────────────────────────────────────────────
@@ -261,17 +267,45 @@
     return w;
   }
 
+  /**
+   * Retire proprement un wrap du DOM.
+   *
+   * Sans précaution, retirer un wrap contenant un player vidéo Ezoic (wyvern.js)
+   * déclenche des erreurs async sur des nœuds détachés :
+   *   "Cannot read properties of null (reading 'paused')"
+   *   "Cannot read properties of null (reading 'offsetWidth')"
+   *   "Invalid target for null#trigger / null#on"
+   *
+   * On pause les media et on tente de notifier l'API wyvern avant remove().
+   */
   function dropWrap(w) {
     try {
-      const id = parseInt(w.getAttribute(A_WRAPID), 10);
-      if (Number.isFinite(id)) S.mountedIds.delete(id);
-      // IMPORTANT : ne passer unobserve que si c'est un vrai Element.
-      // unobserve(null) corrompt l'état interne de l'IO (pubads lève ensuite
-      // "parameter 1 is not of type Element" sur le prochain observe).
+      // 1. Pause tous les media actifs avant détachement
+      try {
+        w.querySelectorAll('video, audio').forEach(m => {
+          try { if (!m.paused) m.pause(); } catch (_) {}
+        });
+      } catch (_) {}
+
+      // 2. Notifier l'API wyvern si disponible
+      try {
+        if (window.wyvern && typeof window.wyvern === 'object') {
+          w.querySelectorAll('[id^="ezoic-"],[class*="wyvern"],[class*="ezoic-video"]')
+            .forEach(n => { try { window.wyvern.destroy?.(n); } catch (_) {} });
+        }
+      } catch (_) {}
+
+      // 3. Unobserve (guard instanceof Element — unobserve(null) corrompt l'IO)
       try {
         const ph = w.querySelector(`[id^="${PH_PREFIX}"]`);
         if (ph instanceof Element) S.io?.unobserve(ph);
       } catch (_) {}
+
+      // 4. Libérer l'id du pool
+      const id = parseInt(w.getAttribute(A_WRAPID), 10);
+      if (Number.isFinite(id)) S.mountedIds.delete(id);
+
+      // 5. Retrait DOM
       w.remove();
     } catch (_) {}
   }
@@ -279,32 +313,33 @@
   // ── Prune ──────────────────────────────────────────────────────────────────
 
   /**
-   * Supprime les wraps dont l'élément-ancre n'est plus dans le DOM.
-   *
-   * L'ancre est retrouvée via l'attribut stable défini dans KIND[kindClass].anchorAttr.
-   * Exemples :
-   *   ezoic-ad-message    → cherche [data-pid="123"]
-   *   ezoic-ad-between    → cherche [data-index="5"]
-   *   ezoic-ad-categories → cherche [data-cid="7"]   ← fix v20
+   * Supprime les wraps VIDES dont l'élément-ancre n'est plus dans le DOM.
    *
-   * On ne prune pas les wraps < MIN_PRUNE_AGE_MS (DOM pas encore stabilisé).
+   * Règles :
+   *  1. Jamais avant MIN_PRUNE_AGE_MS (DOM post-batch pas encore stabilisé).
+   *  2. Jamais un wrap rempli (player wyvern potentiellement actif).
+   *  3. L'ancre est retrouvée via KIND[klass].anchorAttr (stable par design) :
+   *       ezoic-ad-message    → [data-pid="123"]
+   *       ezoic-ad-between    → li[data-index="5"]
+   *       ezoic-ad-categories → li[data-cid="7"]
    */
   function pruneOrphans(klass) {
     const meta = KIND[klass];
     if (!meta) return;
 
-    const baseTag = meta.sel.split('[')[0]; // ex: "li", "[component=..." → "" (géré)
-
     document.querySelectorAll(`.${WRAP_CLASS}.${klass}`).forEach(w => {
       if (ts() - parseInt(w.getAttribute(A_CREATED) || '0', 10) < MIN_PRUNE_AGE_MS) return;
+      if (isFilled(w)) return; // jamais supprimer un wrap rempli (wyvern)
 
       const key = w.getAttribute(A_ANCHOR) ?? '';
-      const sid = key.slice(klass.length + 1); // extrait la partie après "kindClass:"
+      const sid = key.slice(klass.length + 1);
       if (!sid) { mutate(() => dropWrap(w)); return; }
 
-      const anchorEl = document.querySelector(
-        `${baseTag}[${meta.anchorAttr}="${sid.replace(/"/g, '\\"')}"]`
-      );
+      // Construire le sélecteur avec baseTag explicite depuis KIND
+      // baseTag='' pour posts → sélecteur : [data-pid="123"]  (correct, sans tag ambigu)
+      // baseTag='li' pour topics/categories → li[data-index="5"], li[data-cid="7"]
+      const sel = `${meta.baseTag}[${meta.anchorAttr}="${sid.replace(/"/g, '\\"')}"]`;
+      const anchorEl = document.querySelector(sel);
       if (!anchorEl || !anchorEl.isConnected) mutate(() => dropWrap(w));
     });
   }
@@ -314,11 +349,12 @@
   /**
    * Deux wraps adjacents = situation anormale → supprimer le moins prioritaire.
    * Priorité : filled > en grâce (fill en cours) > vide.
-   * Ne supprime jamais un wrap dont showAds() date de moins de FILL_GRACE_MS.
+   *
+   * Règle de sécurité wyvern : on ne supprime JAMAIS un wrap rempli.
+   * Si les deux wraps adjacents sont remplis, on laisse en place (edge case rare).
    */
   function decluster(klass) {
     for (const w of document.querySelectorAll(`.${WRAP_CLASS}.${klass}`)) {
-      // Grace sur le wrap courant : on le saute entièrement
       const wShown = parseInt(w.getAttribute(A_SHOWN) || '0', 10);
       if (wShown && ts() - wShown < FILL_GRACE_MS) continue;
 
@@ -327,10 +363,16 @@
         if (!prev.classList?.contains(WRAP_CLASS)) { prev = prev.previousElementSibling; continue; }
 
         const pShown = parseInt(prev.getAttribute(A_SHOWN) || '0', 10);
-        if (pShown && ts() - pShown < FILL_GRACE_MS) break; // précédent en grâce → rien
+        if (pShown && ts() - pShown < FILL_GRACE_MS) break;
 
-        if      (!isFilled(w))    mutate(() => dropWrap(w));
-        else if (!isFilled(prev)) mutate(() => dropWrap(prev));
+        const wFilled = isFilled(w);
+        const pFilled = isFilled(prev);
+
+        // Ne jamais retirer un wrap rempli (player actif potentiel)
+        if      (!wFilled && !pFilled) mutate(() => dropWrap(w));    // les deux vides → retirer le courant
+        else if (!wFilled &&  pFilled) mutate(() => dropWrap(w));    // courant vide, précédent rempli → retirer le courant
+        else if ( wFilled && !pFilled) mutate(() => dropWrap(prev)); // courant rempli, précédent vide → retirer le précédent
+        // les deux remplis → rien (on ne touche pas)
         break;
       }
     }
@@ -339,24 +381,35 @@
   // ── Injection ──────────────────────────────────────────────────────────────
 
   /**
-   * Ordinal 0-based pour le calcul de l'intervalle.
-   * Pour posts/topics : data-index (NodeBB 3+/4+, toujours présent).
-   * Pour catégories : position dans le parent (page statique, pas d'infinite scroll).
+   * Ordinal 0-based d'un élément pour le calcul de l'intervalle d'injection.
+   *
+   * Utilise KIND[klass].ordinalAttr en priorité (data-index pour posts et topics,
+   * null pour catégories). Si absent, fallback positionnel dans le parent.
+   *
+   * Pour les posts : KIND.baseTag='' donc le fallback itère sur les enfants directs
+   * du parent en filtrant par sélecteur complet (pas juste le tag).
    */
   function ordinal(klass, el) {
-    const di = el.getAttribute('data-index');
-    if (di !== null && di !== '' && !isNaN(di)) return parseInt(di, 10);
-    // Fallback positionnel
+    const meta = KIND[klass];
+
+    // 1. Attribut ordinal explicite (data-index sur posts et topics)
+    if (meta?.ordinalAttr) {
+      const v = el.getAttribute(meta.ordinalAttr);
+      if (v !== null && v !== '' && !isNaN(v)) return parseInt(v, 10);
+    }
+
+    // 2. Fallback positionnel — compte parmi les frères qui matchent le même sélecteur
     try {
-      const tag = KIND[klass]?.sel?.split('[')?.[0] ?? '';
-      if (tag) {
-        let i = 0;
-        for (const n of el.parentElement?.querySelectorAll(`:scope > ${tag}`) ?? []) {
-          if (n === el) return i;
-          i++;
-        }
+      let i = 0;
+      const siblings = el.parentElement?.children ?? [];
+      const fullSel  = meta?.sel ?? '';
+      for (const s of siblings) {
+        if (s === el) return i;
+        // Compter uniquement les éléments du même type (pas les wraps ou autres)
+        if (!fullSel || s.matches?.(fullSel)) i++;
       }
     } catch (_) {}
+
     return 0;
   }
 
@@ -592,6 +645,16 @@
 
   function cleanup() {
     blockedUntil = ts() + 1500;
+
+    // Pause tous les media dans nos wraps AVANT de les retirer du DOM.
+    // Empêche wyvern.js de continuer d'exécuter ses callbacks async sur des
+    // nœuds détachés (erreurs "Cannot read 'paused'", "offsetWidth"…).
+    try {
+      document.querySelectorAll(`.${WRAP_CLASS} video, .${WRAP_CLASS} audio`).forEach(m => {
+        try { if (!m.paused) m.pause(); } catch (_) {}
+      });
+    } catch (_) {}
+
     mutate(() => document.querySelectorAll(`.${WRAP_CLASS}`).forEach(dropWrap));
     S.cfg          = null;
     S.pools        = { topics: [], posts: [], categories: [] };