nodebb-plugin-ezoic-infinite 1.5.79 → 1.5.81

package/package.json

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

package/public/client.js

@@ -1,6 +1,26 @@
 (function () {
   'use strict';
 
+  // Track scroll direction to avoid aggressive recycling when the user scrolls upward.
+  // Recycling while scrolling up is a common cause of ads "bunching" and a "disappearing too fast" feeling.
+  let lastScrollY = 0;
+  let scrollDir = 1; // 1 = down, -1 = up
+  try {
+    lastScrollY = window.scrollY || 0;
+    window.addEventListener(
+      'scroll',
+      () => {
+        const y = window.scrollY || 0;
+        const d = y - lastScrollY;
+        if (Math.abs(d) > 4) {
+          scrollDir = d > 0 ? 1 : -1;
+          lastScrollY = y;
+        }
+      },
+      { passive: true }
+    );
+  } catch (e) {}
+
   // NodeBB client context
   const $ = (typeof window.jQuery === 'function') ? window.jQuery : null;
 
@@ -83,6 +103,22 @@
     } catch (e) {}
   }
 
+  // Some CMP/TCF stubs rely on a hidden iframe named `__tcfapiLocator` to route postMessage calls.
+  // In SPA/Ajaxify navigations, that iframe can be removed/replaced unexpectedly, causing noisy
+  // "postMessage" / "addtlConsent" null errors. Ensuring it's present makes the environment stable.
+  function ensureTcfApiLocator() {
+    try {
+      // If a CMP is not present, do nothing.
+      if (typeof window.__tcfapi !== 'function' && typeof window.__cmp !== 'function') return;
+      if (document.getElementById('__tcfapiLocator')) return;
+      const f = document.createElement('iframe');
+      f.style.display = 'none';
+      f.id = '__tcfapiLocator';
+      f.name = '__tcfapiLocator';
+      (document.body || document.documentElement).appendChild(f);
+    } catch (e) {}
+  }
+
   
 
 function isFilledNode(node) {
@@ -668,9 +704,10 @@ function globalGapFixInit() {
   }
 
   function pruneOrphanWraps(kindClass, items) {
-    // Message ads should remain stable (desktop + mobile). Pruning them can make it look like
-    // ads vanish on scroll and can reduce fill on long topics.
-    if (kindClass === 'ezoic-ad-message') return 0;
+    // Topic pages can be virtualized (posts removed from DOM as you scroll).
+    // When that happens, previously-inserted ad wraps may become "orphan" nodes with no
+    // nearby post containers, which leads to ads clustering together when scrolling back up.
+    // We prune only *true* orphans that are far offscreen to keep the UI stable.
     if (!items || !items.length) return 0;
     const itemSet = new Set(items);
     const wraps = document.querySelectorAll(`.${WRAP_CLASS}.${kindClass}`);
@@ -701,7 +738,10 @@ function globalGapFixInit() {
         if (wrap.getAttribute('data-ezoic-pin') === '1') return;
       } catch (e) {}
 
-      if (isFilled(wrap)) return; // never prune filled ads
+      // For message/topic pages we may prune filled or empty orphans if they are far away,
+      // otherwise consecutive "stacks" can appear when posts are virtualized.
+      const isMessage = (kindClass === 'ezoic-ad-message');
+      if (!isMessage && isFilled(wrap)) return; // never prune filled ads for non-message lists
 
       // Never prune a fresh wrap: it may fill late.
       try {
@@ -711,6 +751,20 @@ function globalGapFixInit() {
 
       if (hasNearbyItem(wrap)) return;
 
+      // For message ads: only prune if far offscreen to avoid perceived "vanishing".
+      if (isMessage) {
+        try {
+          const r = wrap.getBoundingClientRect();
+          const vh = Math.max(1, window.innerHeight || 1);
+          const farAbove = r.bottom < -vh * 2;
+          const farBelow = r.top > vh * 4;
+          if (!farAbove && !farBelow) return;
+        } catch (e) {
+          // If we can't measure, be conservative.
+          return;
+        }
+      }
+
       withInternalDomChange(() => releaseWrapNode(wrap));
       removed++;
     });
@@ -1003,12 +1057,31 @@ function globalGapFixInit() {
       if (isAdjacentAd(el)) continue;
       if (findWrap(kindClass, afterPos)) continue;
 
-      const id = pickIdFromAll(allIds, cursorKey);
+      let id = pickIdFromAll(allIds, cursorKey);
+      let recycledWrap = null;
+
+      // If the pool is exhausted (all placeholder ids already mounted), recycle a wrap that is far
+      // above the viewport by moving it to the new target instead of creating a new placeholder.
+      // This avoids "Placeholder Id X has already been defined" and also ensures ads keep
+      // appearing on very long infinite scroll sessions.
+      if (!id) {
+        // Only recycle while scrolling down. Recycling while scrolling up tends to
+        // cause perceived instability (ads bunching/disappearing).
+        recycledWrap = scrollDir > 0 ? pickRecyclableWrap(kindClass) : null;
+        if (recycledWrap) {
+          id = recycledWrap.getAttribute('data-ezoic-wrapid') || '';
+        }
+      }
+
       if (!id) break;
 
-      const wrap = insertAfter(el, id, kindClass, afterPos);
+      const wrap = recycledWrap
+        ? moveWrapAfter(el, recycledWrap, kindClass, afterPos)
+        : insertAfter(el, id, kindClass, afterPos);
       if (!wrap) continue;
 
+      // observePlaceholder is safe for existing ids (it is idempotent) and helps with "late fill"
+      // after ajaxify/infinite scroll mutations.
       observePlaceholder(id);
       inserted++;
     }
@@ -1016,6 +1089,60 @@ function globalGapFixInit() {
     return inserted;
   }
 
+  function pickRecyclableWrap(kindClass) {
+    // Only recycle wrappers that are well above the viewport to avoid visible "disappearing".
+    // With very small id pools (e.g. 6 ids), recycling is the only way to keep ads appearing
+    // on long topics without redefining placeholders.
+    const wraps = document.querySelectorAll('.' + kindClass + '[data-ezoic-wrapid]');
+    if (!wraps || !wraps.length) return null;
+
+    const vh = Math.max(300, window.innerHeight || 800);
+    // Recycle only when the wrapper is far above the viewport.
+    // This keeps ads on-screen longer (especially on mobile) and reduces "blink".
+    const threshold = -Math.min(9000, Math.round(vh * 6));
+
+    let best = null;
+    let bestBottom = Infinity;
+    for (const w of wraps) {
+      if (!w || !w.isConnected) continue;
+      const rect = w.getBoundingClientRect();
+      if (rect.bottom < threshold) {
+        if (rect.bottom < bestBottom) {
+          bestBottom = rect.bottom;
+          best = w;
+        }
+      }
+    }
+    return best;
+  }
+
+  function moveWrapAfter(anchorEl, wrap, kindClass, afterPos) {
+    try {
+      if (!anchorEl || !wrap || !wrap.isConnected) return null;
+
+      wrap.setAttribute('data-ezoic-after', String(afterPos));
+      anchorEl.insertAdjacentElement('afterend', wrap);
+
+      // Ensure minimal layout impact.
+      try { wrap.style.contain = 'layout style paint'; } catch (e) {}
+      try { tightenStickyIn(wrap); } catch (e) {}
+
+      const id = wrap.getAttribute('data-ezoic-wrapid');
+      if (id) {
+        setTimeout(() => {
+          try {
+            if (window.ezstandalone && typeof window.ezstandalone.showAds === 'function') {
+              window.ezstandalone.showAds(id);
+            }
+          } catch (e) {}
+        }, 0);
+      }
+      return wrap;
+    } catch (e) {
+      return null;
+    }
+  }
+
   async function runCore() {
     if (isBlocked()) return 0;
 
@@ -1268,6 +1395,7 @@ function globalGapFixInit() {
       blockedUntil = 0;
 
       muteNoisyConsole();
+      ensureTcfApiLocator();
       warmUpNetwork();
       patchShowAds();
       globalGapFixInit();
@@ -1339,6 +1467,7 @@ function globalGapFixInit() {
 
   state.pageKey = getPageKey();
   muteNoisyConsole();
+  ensureTcfApiLocator();
   warmUpNetwork();
   patchShowAds();
   ensurePreloadObserver();