nodebb-plugin-ezoic-infinite 1.5.71 → 1.5.73

package/package.json

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

package/public/client.js

@@ -12,6 +12,11 @@
   // 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.
+  // Keep empty wraps alive; mobile fills can be slow.
+  function keepEmptyWrapMs() { return isMobile() ? 120000 : 60000; }
+
   // Preload margins
   const PRELOAD_MARGIN_DESKTOP = '2600px 0px 2600px 0px';
   const PRELOAD_MARGIN_MOBILE = '1500px 0px 1500px 0px';
@@ -33,7 +38,64 @@
   // Production build: debug disabled
   function dbg() {}
 
-  // ---------------- state ----------------
+  
+
+function isFilledNode(node) {
+  return !!(node && node.querySelector && node.querySelector('iframe, ins, img, video, [data-google-container-id]'));
+}
+
+// Ezoic often sets inline min-height (e.g. 400px) for adaptive placements.
+// In NodeBB topics/messages this creates visible empty space under 250px creatives.
+// We tighten the outermost Ezoic container to the actual creative height once it exists.
+function tightenEzoicMinHeight(wrap) {
+  try {
+    if (!wrap || !wrap.querySelector) return;
+    const outer = wrap.querySelector('.ezoic-ad-adaptive') ||
+                  wrap.querySelector('.ezoic-ad[style*="min-height"]') ||
+                  wrap.querySelector('.ezoic-ad');
+    if (!outer) return;
+
+    const iframes = outer.querySelectorAll('iframe');
+    if (!iframes || !iframes.length) return;
+
+    let h = 0;
+    iframes.forEach((f) => {
+      const ah = parseInt(f.getAttribute('height') || '0', 10);
+      const oh = f.offsetHeight || 0;
+      h = Math.max(h, ah, oh);
+    });
+    if (!h) return;
+
+    // Override inline min-height with a newer inline important.
+    try { outer.style.setProperty('min-height', h + 'px', 'important'); } catch (e) { outer.style.minHeight = h + 'px'; }
+    try { outer.style.setProperty('height', 'auto', 'important'); } catch (e) {}
+
+    // Mobile friendliness: avoid giant fixed widths causing overflow/reflow.
+    if (isMobile()) {
+      try { outer.style.setProperty('width', '100%', 'important'); } catch (e) {}
+      try { outer.style.setProperty('max-width', '100%', 'important'); } catch (e) {}
+      try { outer.style.setProperty('min-width', '0', 'important'); } catch (e) {}
+    }
+  } catch (e) {}
+}
+
+function watchWrapForFill(wrap) {
+  try {
+    if (!wrap || wrap.__ezFillObs) return;
+    const obs = new MutationObserver(() => {
+      if (isFilledNode(wrap)) {
+        wrap.classList.remove('is-empty');
+        tightenEzoicMinHeight(wrap);
+        try { obs.disconnect(); } catch (e) {}
+        wrap.__ezFillObs = null;
+      }
+    });
+    obs.observe(wrap, { childList: true, subtree: true });
+    wrap.__ezFillObs = obs;
+  } catch (e) {}
+}
+
+// ---------------- state ----------------
 
   const state = {
     pageKey: null,
@@ -207,6 +269,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 +397,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 +413,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) {
@@ -386,6 +472,8 @@
   }
 
   function pruneOrphanWraps(kindClass, items) {
+    // On mobile topics/messages, keep wraps alive longer to avoid 'disappearing' ads.
+    if (kindClass === 'ezoic-ad-message' && isMobile()) return 0;
     if (!items || !items.length) return 0;
     const itemSet = new Set(items);
     const wraps = document.querySelectorAll(`.${WRAP_CLASS}.${kindClass}`);
@@ -398,12 +486,12 @@
     const hasNearbyItem = (wrap) => {
       // NodeBB/skins can inject separators/spacers; be tolerant.
       let prev = wrap.previousElementSibling;
-      for (let i = 0; i < 8 && prev; i++) {
+      for (let i = 0; i < 14 && prev; i++) {
         if (itemSet.has(prev)) return true;
         prev = prev.previousElementSibling;
       }
       let next = wrap.nextElementSibling;
-      for (let i = 0; i < 8 && next; i++) {
+      for (let i = 0; i < 14 && next; i++) {
         if (itemSet.has(next)) return true;
         next = next.nextElementSibling;
       }
@@ -412,6 +500,13 @@
 
     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) < keepEmptyWrapMs()) return;
+      } catch (e) {}
+
       if (hasNearbyItem(wrap)) return;
 
       withInternalDomChange(() => releaseWrapNode(wrap));
@@ -428,13 +523,32 @@
 
     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) < keepEmptyWrapMs();
+      } catch (e) {
+        return false;
+      }
+    };
+
     let removed = 0;
     for (const w of wraps) {
       let prev = w.previousElementSibling;
       for (let i = 0; i < 3 && prev; i++) {
         if (isWrap(prev)) {
-          withInternalDomChange(() => releaseWrapNode(w));
-          removed++;
+          // 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;
@@ -545,10 +659,23 @@
           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) < keepEmptyWrapMs()) return;
+          } catch (e) {}
+
           const hasAd = !!(ph2.querySelector && ph2.querySelector('iframe, ins, img, .ez-ad, .ezoic-ad'));
-          if (!hasAd) w2.classList.add('is-empty');
+          if (!hasAd) {
+            w2.classList.add('is-empty');
+            watchWrapForFill(w2);
+          } else {
+            w2.classList.remove('is-empty');
+            tightenEzoicMinHeight(w2);
+          }
         } catch (e) {}
-      }, 3500);
+      }, 15000);
     } catch (e) {}
   }
 
@@ -584,6 +711,15 @@
         const doShow = () => {
           try { ez.showAds(id); } catch (e) {}
           try { markEmptyWrapper(id); } catch (e) {}
+          try {
+            const phw = document.getElementById(`${PLACEHOLDER_PREFIX}${id}`);
+            const ww = phw && phw.closest ? phw.closest(`.${WRAP_CLASS}`) : null;
+            if (ww) {
+              watchWrapForFill(ww);
+              setTimeout(() => { try { tightenEzoicMinHeight(ww); } catch (e) {} }, 900);
+              setTimeout(() => { try { tightenEzoicMinHeight(ww); } catch (e) {} }, 2200);
+            }
+          } catch (e) {}
           setTimeout(() => { clearTimeout(hardTimer); release(); }, 650);
         };
 

package/public/style.css

@@ -68,3 +68,6 @@
   min-height: 1px !important; /* kill 400px gaps */
   height: auto !important;
 }
+
+/* Ensure Ezoic reportline doesn't affect layout */
+.nodebb-ezoic-wrap .reportline{position:absolute!important;}