nodebb-plugin-ezoic-infinite 1.5.70 → 1.5.72

package/package.json

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

package/public/client.js

@@ -12,6 +12,10 @@
   // Smoothness caps
   const MAX_INSERTS_PER_RUN = 3;
 
+  // Keep empty (unfilled) wraps alive for a while. Topics/messages can fill late (auction/CMP).
+  // Pruning too early makes ads look like they "disappear" while scrolling.
+  const KEEP_EMPTY_WRAP_MS = 30000;
+
   // Preload margins
   const PRELOAD_MARGIN_DESKTOP = '2600px 0px 2600px 0px';
   const PRELOAD_MARGIN_MOBILE = '1500px 0px 1500px 0px';
@@ -207,6 +211,22 @@
     return el;
   }
 
+  function primePlaceholderPool(allIds) {
+    try {
+      if (!Array.isArray(allIds) || !allIds.length) return;
+      const pool = getPoolEl();
+      for (const id of allIds) {
+        if (!id) continue;
+        const domId = `${PLACEHOLDER_PREFIX}${id}`;
+        if (document.getElementById(domId)) continue;
+        const ph = document.createElement('div');
+        ph.id = domId;
+        ph.setAttribute('data-ezoic-id', String(id));
+        pool.appendChild(ph);
+      }
+    } catch (e) {}
+  }
+
   function isInPool(ph) {
     try { return !!(ph && ph.closest && ph.closest('#' + POOL_ID)); } catch (e) { return false; }
   }
@@ -319,6 +339,13 @@
     if (!state.allTopics.length) state.allTopics = parsePool(cfg.placeholderIds);
     if (!state.allPosts.length) state.allPosts = parsePool(cfg.messagePlaceholderIds);
     if (!state.allCategories.length) state.allCategories = parsePool(cfg.categoryPlaceholderIds);
+
+    // Create placeholders up-front in an offscreen pool.
+    // Ezoic may attempt to define/show ids during load; if they don't exist yet,
+    // it can spam errors and sometimes short-circuit. Pooling keeps ids existing without layout.
+    primePlaceholderPool(state.allTopics);
+    primePlaceholderPool(state.allPosts);
+    primePlaceholderPool(state.allCategories);
   }
 
   // ---------------- insertion primitives ----------------
@@ -328,6 +355,7 @@
     wrap.className = `${WRAP_CLASS} ${kindClass}`;
     wrap.setAttribute('data-ezoic-after', String(afterPos));
     wrap.setAttribute('data-ezoic-wrapid', String(id));
+    wrap.setAttribute('data-created', String(now()));
     wrap.style.width = '100%';
 
     if (createPlaceholder) {
@@ -391,43 +419,79 @@
     const wraps = document.querySelectorAll(`.${WRAP_CLASS}.${kindClass}`);
     let removed = 0;
 
-    wraps.forEach((wrap) => {
-      let ok = false;
-      // NodeBB/skins can insert helper nodes between posts (clearfix, separators, etc.).
-      // Be tolerant so we don't remove a valid ad too early ("disappears too fast").
+    const isFilled = (wrap) => {
+      return !!(wrap.querySelector('iframe, ins, img, video, [data-google-container-id]'));
+    };
+
+    const hasNearbyItem = (wrap) => {
+      // NodeBB/skins can inject separators/spacers; be tolerant.
       let prev = wrap.previousElementSibling;
-      for (let i = 0; i < 8 && prev; i++) {
-        if (itemSet.has(prev)) { ok = true; break; }
+      for (let i = 0; i < 14 && prev; i++) {
+        if (itemSet.has(prev)) return true;
         prev = prev.previousElementSibling;
       }
-
-      if (!ok) {
-        let next = wrap.nextElementSibling;
-        for (let i = 0; i < 3 && next; i++) {
-          if (itemSet.has(next)) { ok = true; break; }
-          next = next.nextElementSibling;
-        }
+      let next = wrap.nextElementSibling;
+      for (let i = 0; i < 14 && next; i++) {
+        if (itemSet.has(next)) return true;
+        next = next.nextElementSibling;
       }
+      return false;
+    };
 
-      if (!ok) {
-        withInternalDomChange(() => releaseWrapNode(wrap));
-        removed++;
-      }
+    wraps.forEach((wrap) => {
+      if (isFilled(wrap)) return; // never prune filled ads
+
+      // Never prune a fresh wrap: it may fill late.
+      try {
+        const created = parseInt(wrap.getAttribute('data-created') || '0', 10);
+        if (created && (now() - created) < KEEP_EMPTY_WRAP_MS) return;
+      } catch (e) {}
+
+      if (hasNearbyItem(wrap)) return;
+
+      withInternalDomChange(() => releaseWrapNode(wrap));
+      removed++;
     });
 
     return removed;
   }
 
   function decluster(kindClass) {
-    // Remove consecutive wraps (keep the first)
+    // Remove "near-consecutive" wraps (keep the first). Be tolerant of spacer nodes.
     const wraps = Array.from(document.querySelectorAll(`.${WRAP_CLASS}.${kindClass}`));
     if (wraps.length < 2) return 0;
+
+    const isWrap = (el) => !!(el && el.classList && el.classList.contains(WRAP_CLASS));
+
+    const isFilled = (wrap) => {
+      return !!(wrap && wrap.querySelector && wrap.querySelector('iframe, ins, img, video, [data-google-container-id]'));
+    };
+
+    const isFresh = (wrap) => {
+      try {
+        const created = parseInt(wrap.getAttribute('data-created') || '0', 10);
+        return created && (now() - created) < KEEP_EMPTY_WRAP_MS;
+      } catch (e) {
+        return false;
+      }
+    };
+
     let removed = 0;
     for (const w of wraps) {
-      const prev = w.previousElementSibling;
-      if (prev && prev.classList && prev.classList.contains(WRAP_CLASS)) {
-        withInternalDomChange(() => releaseWrapNode(w));
-        removed++;
+      let prev = w.previousElementSibling;
+      for (let i = 0; i < 3 && prev; i++) {
+        if (isWrap(prev)) {
+          // Don't decluster two "fresh" empty wraps — it can reduce fill on slow auctions.
+          // Only decluster when at least one is filled, or when the newer one is stale.
+          const prevFilled = isFilled(prev);
+          const curFilled = isFilled(w);
+          if (prevFilled || curFilled || !isFresh(w)) {
+            withInternalDomChange(() => releaseWrapNode(w));
+            removed++;
+          }
+          break;
+        }
+        prev = prev.previousElementSibling;
       }
     }
     return removed;
@@ -479,9 +543,6 @@
     if (!ph || !ph.isConnected) return;
     ph.setAttribute('data-ezoic-id', String(id));
 
-    // When the ad actually fills, tighten height to the real iframe height and remove empty-collapsing.
-    armFillObserver(ph);
-
     const io = ensurePreloadObserver();
     try { io && io.observe(ph); } catch (e) {}
 
@@ -494,56 +555,6 @@
     } catch (e) {}
   }
 
-  // ---------------- fill tightening ----------------
-
-  const _fillObserved = new WeakSet();
-  function tightenFilled(ph) {
-    if (!ph || !ph.isConnected) return;
-    const wrap = ph.closest ? ph.closest(`.${WRAP_CLASS}`) : null;
-    if (!wrap) return;
-
-    // If we have any real ad content, we should not be in "empty" mode.
-    const frame = ph.querySelector ? ph.querySelector('iframe') : null;
-    const hasAd = !!(frame || (ph.querySelector && ph.querySelector('ins, img, .ez-ad, .ezoic-ad')));
-    if (!hasAd) return;
-
-    try { wrap.classList.remove('is-empty'); } catch (e) {}
-
-    // Remove the common "extra reserved space" created by Ezoic's min-height styles.
-    // Set minHeight to the actual iframe height when available.
-    try {
-      if (frame && frame.offsetHeight) {
-        const h = frame.offsetHeight;
-        const ezoicSpan = ph.closest ? ph.closest('span.ezoic-ad, .ezoic-ad') : null;
-        if (ezoicSpan && ezoicSpan.style) {
-          ezoicSpan.style.minHeight = `${h}px`;
-        }
-        // Also tighten the wrapper itself to avoid "space under" when the parent is taller.
-        wrap.style.minHeight = `${h}px`;
-      }
-    } catch (e) {}
-  }
-
-  function armFillObserver(ph) {
-    if (!ph || _fillObserved.has(ph)) return;
-    _fillObserved.add(ph);
-
-    // Fast path: already filled
-    try { tightenFilled(ph); } catch (e) {}
-
-    // Observe until it fills, then disconnect.
-    try {
-      const mo = new MutationObserver(() => {
-        try {
-          tightenFilled(ph);
-          const hasFrame = !!(ph.querySelector && ph.querySelector('iframe'));
-          if (hasFrame) mo.disconnect();
-        } catch (e) {}
-      });
-      mo.observe(ph, { childList: true, subtree: true });
-    } catch (e) {}
-  }
-
   function enqueueShow(id) {
     if (!id || isBlocked()) return;
 
@@ -588,10 +599,17 @@
           if (!ph2 || !ph2.isConnected) return;
           const w2 = ph2.closest ? ph2.closest(`.${WRAP_CLASS}`) : null;
           if (!w2) return;
+
+          // Don't collapse "fresh" placements; slow auctions/CMP can fill late.
+          try {
+            const created = parseInt(w2.getAttribute('data-created') || '0', 10);
+            if (created && (now() - created) < KEEP_EMPTY_WRAP_MS) return;
+          } catch (e) {}
+
           const hasAd = !!(ph2.querySelector && ph2.querySelector('iframe, ins, img, .ez-ad, .ezoic-ad'));
           if (!hasAd) w2.classList.add('is-empty');
         } catch (e) {}
-      }, 3500);
+      }, 15000);
     } catch (e) {}
   }
 

package/public/style.css

@@ -22,10 +22,6 @@
 .nodebb-ezoic-wrap .ezoic-ad {
   margin: 0 !important;
   padding: 0 !important;
-  /* Ezoic sometimes reserves extra height (e.g. min-height: 400px) even when the filled iframe is smaller.
-     We prefer zero unused space; JS will also tighten after fill to the real iframe height. */
-  min-height: 0 !important;
-  height: auto !important;
 }
 
 /* Remove the classic "gap under iframe" (baseline/inline-block) */
@@ -66,3 +62,9 @@
   margin: 0 !important;
   padding: 0 !important;
 }
+/* Remove Ezoic's large reserved min-height inside our wrappers (topics/messages) */
+.nodebb-ezoic-wrap .ezoic-ad,
+.nodebb-ezoic-wrap span.ezoic-ad {
+  min-height: 1px !important; /* kill 400px gaps */
+  height: auto !important;
+}