nodebb-plugin-ezoic-infinite 1.5.72 → 1.5.74

package/package.json

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

package/public/client.js

@@ -14,7 +14,8 @@
 
   // 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;
+  // 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';
@@ -37,7 +38,127 @@
   // 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 injects inline `min-height:400px !important` on one or more nested wrappers.
+// If the creative is 250px, this leaves ~150px empty space. Because it's inline+important,
+// CSS alone cannot fix it reliably — we must rewrite the inline style.
+function tightenEzoicMinHeight(wrap) {
+  try {
+    if (!wrap || !wrap.querySelector) return;
+
+    const iframes = wrap.querySelectorAll('iframe');
+    if (!iframes || !iframes.length) return;
+
+    // Find the closest "big" ezoic container that carries the 400px min-height.
+    const firstIframe = iframes[0];
+    let refNode = null;
+    let p = firstIframe && firstIframe.parentElement;
+    while (p && p !== wrap) {
+      if (p.classList && p.classList.contains('ezoic-ad')) {
+        const st = (p.getAttribute('style') || '').toLowerCase();
+        if (st.includes('min-height:400') || st.includes('min-height: 400') || st.includes('min-height:400px')) {
+          refNode = p;
+          break;
+        }
+      }
+      p = p.parentElement;
+    }
+    if (!refNode) {
+      refNode = wrap.querySelector('.ezoic-ad-adaptive') || wrap.querySelector('.ezoic-ad') || wrap;
+    }
+
+    let refTop = 0;
+    try { refTop = refNode.getBoundingClientRect().top; } catch (e) { refTop = 0; }
+
+    // Compute the rendered height needed inside refNode (visible iframes only).
+    let maxBottom = 0;
+    iframes.forEach((f) => {
+      if (!f || !f.getBoundingClientRect) return;
+      const rect = f.getBoundingClientRect();
+      if (rect.width <= 1 || rect.height <= 1) return;
+      const bottom = rect.bottom - refTop;
+      maxBottom = Math.max(maxBottom, bottom);
+    });
+
+    // Fallback to attr/offset if layout metrics are not available.
+    if (!maxBottom) {
+      iframes.forEach((f) => {
+        const ah = parseInt(f.getAttribute('height') || '0', 10);
+        const oh = f.offsetHeight || 0;
+        maxBottom = Math.max(maxBottom, ah, oh);
+      });
+    }
+    if (!maxBottom) return;
+
+    // Account for the Ezoic badge (reportline) which is absolutely positioned.
+    const report = refNode.querySelector('.reportline');
+    if (report && report.offsetHeight) {
+      maxBottom += report.offsetHeight;
+    }
+
+    const h = Math.max(1, Math.ceil(maxBottom));
+
+    const tightenNode = (node) => {
+      if (!node || !node.style) return;
+      try { node.style.setProperty('min-height', h + 'px', 'important'); } catch (e) { node.style.minHeight = h + 'px'; }
+      try { node.style.setProperty('height', 'auto', 'important'); } catch (e) {}
+      try { node.style.setProperty('line-height', '0', 'important'); } catch (e) {}
+    };
+
+    // Tighten refNode and any ancestor ezoic-ad nodes with the problematic min-height.
+    let cur = refNode;
+    while (cur && cur !== wrap) {
+      if (cur.classList && cur.classList.contains('ezoic-ad')) {
+        const st = (cur.getAttribute('style') || '').toLowerCase();
+        if (st.includes('min-height:400') || st.includes('min-height: 400') || st.includes('min-height:400px')) {
+          tightenNode(cur);
+        }
+      }
+      cur = cur.parentElement;
+    }
+    tightenNode(refNode);
+
+    // Tighten any nested wrappers that also have the 400px min-height inline.
+    refNode.querySelectorAll('.ezoic-ad[style*="min-height"], .ezoic-ad-adaptive').forEach((n) => {
+      const st = (n.getAttribute('style') || '').toLowerCase();
+      if (st.includes('min-height:400') || st.includes('min-height: 400') || st.includes('min-height:400px')) {
+        tightenNode(n);
+      }
+    });
+
+    // Mobile friendliness: avoid giant fixed widths causing overflow/reflow.
+    if (isMobile()) {
+      [refNode].forEach((n) => {
+        try { n.style.setProperty('width', '100%', 'important'); } catch (e) {}
+        try { n.style.setProperty('max-width', '100%', 'important'); } catch (e) {}
+        try { n.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,
@@ -414,6 +535,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}`);
@@ -444,7 +567,7 @@
       // 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;
+        if (created && (now() - created) < keepEmptyWrapMs()) return;
       } catch (e) {}
 
       if (hasNearbyItem(wrap)) return;
@@ -470,7 +593,7 @@
     const isFresh = (wrap) => {
       try {
         const created = parseInt(wrap.getAttribute('data-created') || '0', 10);
-        return created && (now() - created) < KEEP_EMPTY_WRAP_MS;
+        return created && (now() - created) < keepEmptyWrapMs();
       } catch (e) {
         return false;
       }
@@ -603,11 +726,17 @@
           // 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;
+            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) {}
       }, 15000);
     } catch (e) {}
@@ -645,6 +774,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,14 @@
   min-height: 1px !important; /* kill 400px gaps */
   height: auto !important;
 }
+
+/* Ensure Ezoic reportline doesn't affect layout */
+.nodebb-ezoic-wrap .reportline{position:absolute!important;}
+
+/* Ezoic sometimes injects `position: sticky` inside placements. In long NodeBB topics,
+   this can create "gliding" and sudden disappear/reappear effects while scrolling.
+   We neutralize sticky positioning *inside our injected wrappers* only. */
+.nodebb-ezoic-wrap .ezads-sticky-intradiv {
+  position: static !important;
+  top: auto !important;
+}