nodebb-plugin-ezoic-infinite 1.5.41 → 1.5.44

package/package.json

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

package/public/client.js

@@ -117,6 +117,7 @@ function mutationHasRelevantAddedNodes(mutations) {
     pageKey: null,
     cfg: null,
 
+    navSeq: 0,
     // Full lists (never consumed) + cursors for round-robin reuse
     allTopics: [],
     allPosts: [],
@@ -136,6 +137,7 @@ function mutationHasRelevantAddedNodes(mutations) {
     // observers / schedulers
     domObs: null,
     tightenObs: null,
+    fillObs: null,
     io: null,
     runQueued: false,
 
@@ -265,6 +267,7 @@ function mutationHasRelevantAddedNodes(mutations) {
 
         ez.showAds = function (...args) {
           if (isBlocked()) return;
+      if (seq !== state.navSeq) return;
 
           let ids = [];
           if (args.length === 1 && Array.isArray(args[0])) ids = args[0];
@@ -542,7 +545,7 @@ function pruneOrphanWraps(kindClass, items) {
   }
 function buildWrap(id, kindClass, afterPos) {
     const wrap = document.createElement('div');
-    wrap.className = `${WRAP_CLASS} ${kindClass}`;
+    wrap.className = `${WRAP_CLASS} ${kindClass} ez-pending`;
     wrap.setAttribute('data-ezoic-after', String(afterPos));
     wrap.setAttribute('data-ezoic-wrapid', String(id));
     wrap.style.width = '100%';
@@ -557,6 +560,103 @@ function buildWrap(id, kindClass, afterPos) {
     return wrap;
   }
 
+  // ---------- Fill detection & collapse handling (lightweight) ----------
+  // If ad fill is slow, showing a big empty slot is visually jarring. We keep
+  // our injected wrapper collapsed (ez-pending) until a creative is present,
+  // then mark it ez-ready.
+
+  function wrapHasFilledCreative(wrap) {
+    try {
+      if (!wrap || !wrap.isConnected) return false;
+      // Safeframe container (most common)
+      const c = wrap.querySelector('div[id$="__container__"]');
+      if (c && c.offsetHeight > 10) return true;
+      // Any iframe with non-trivial height
+      const f = wrap.querySelector('iframe');
+      if (!f) return false;
+      if (f.getAttribute('data-load-complete') === 'true') return true;
+      if (f.offsetHeight > 10) return true;
+      return false;
+    } catch (e) {}
+    return false;
+  }
+
+  function markWrapFilledIfNeeded(wrap) {
+    try {
+      if (!wrap || !wrap.isConnected) return;
+      if (!wrap.classList || !wrap.classList.contains(WRAP_CLASS)) return;
+      // Only our injected wrappers are DIVs with data-ezoic-wrapid.
+      if (wrap.tagName !== 'DIV') return;
+      if (!wrap.getAttribute('data-ezoic-wrapid')) return;
+
+      if (wrapHasFilledCreative(wrap)) {
+        wrap.classList.remove('ez-pending');
+        wrap.classList.add('ez-ready');
+      }
+    } catch (e) {}
+  }
+
+  function ensureFillObserver() {
+    if (state.fillObs) return;
+
+    let raf = 0;
+    const pending = new Set();
+    const schedule = (wrap) => {
+      if (!wrap) return;
+      pending.add(wrap);
+      if (raf) return;
+      raf = requestAnimationFrame(() => {
+        raf = 0;
+        for (const w of pending) markWrapFilledIfNeeded(w);
+        pending.clear();
+      });
+    };
+
+    const closestWrap = (node) => {
+      try {
+        if (!node || node.nodeType !== 1) return null;
+        const el = /** @type {Element} */ (node);
+        if (el.tagName === 'DIV' && el.classList && el.classList.contains(WRAP_CLASS) && el.getAttribute('data-ezoic-wrapid')) return el;
+        if (el.closest) return el.closest(`div.${WRAP_CLASS}[data-ezoic-wrapid]`);
+      } catch (e) {}
+      return null;
+    };
+
+    state.fillObs = new MutationObserver((mutations) => {
+      try {
+        for (const m of mutations) {
+          if (m.type === 'attributes') {
+            const w = closestWrap(m.target);
+            if (w) schedule(w);
+            continue;
+          }
+          if (!m.addedNodes || !m.addedNodes.length) continue;
+          for (const n of m.addedNodes) {
+            const w = closestWrap(n);
+            if (w) schedule(w);
+            if (n && n.nodeType === 1 && n.querySelectorAll) {
+              n.querySelectorAll(`div.${WRAP_CLASS}[data-ezoic-wrapid]`).forEach(schedule);
+            }
+          }
+        }
+      } catch (e) {}
+    });
+
+    try {
+      state.fillObs.observe(document.documentElement, {
+        subtree: true,
+        childList: true,
+        attributes: true,
+        attributeFilter: ['style', 'class', 'data-load-complete', 'height', 'src'],
+      });
+    } catch (e) {}
+
+    // Kick once for already-present wraps
+    try {
+      document.querySelectorAll(`div.${WRAP_CLASS}[data-ezoic-wrapid]`).forEach(markWrapFilledIfNeeded);
+    } catch (e) {}
+  }
+
   function findWrap(kindClass, afterPos) {
     return document.querySelector(`.${WRAP_CLASS}.${kindClass}[data-ezoic-after="${afterPos}"]`);
   }
@@ -664,6 +764,7 @@ function drainQueue() {
 function startShow(id) {
   if (!id || isBlocked()) return;
 
+  const seq = state.navSeq;
   state.inflight++;
   let released = false;
   const release = () => {
@@ -679,7 +780,15 @@ function startShow(id) {
     try {
       if (isBlocked()) return;
 
-      const ph = document.getElementById(`${PLACEHOLDER_PREFIX}${id}`);
+      // Ensure placeholder is armed (arm-on-load). On some NodeBB transitions the
+      // wrapper may exist but the placeholder id is not yet assigned.
+      const wrap = findWrapById(id);
+      if (wrap && wrap.isConnected) {
+        try { armPlaceholder(wrap, id); } catch (e) {}
+      }
+
+      const domId = `${PLACEHOLDER_PREFIX}${id}`;
+      const ph = document.getElementById(domId);
       if (!ph || !ph.isConnected) return;
 
       const now2 = Date.now();
@@ -691,13 +800,29 @@ function startShow(id) {
       const ez = window.ezstandalone;
 
       const doShow = () => {
+        // Re-check right before showing: the placeholder can disappear between
+        // scheduling and execution (ajaxify/infinite scroll DOM churn).
+        if (seq !== state.navSeq) { try { clearTimeout(hardTimer); } catch (e) {} release(); return; }
+        const phNow = document.getElementById(domId);
+        if (!phNow || !phNow.isConnected) {
+          try { clearTimeout(hardTimer); } catch (e) {}
+          release();
+          return;
+        }
+
         try {
           if (state.usedOnce && state.usedOnce.has(id)) {
             safeDestroyById(id);
           }
         } catch (e) {}
 
-        try { ez.showAds(id); } catch (e) {}
+        // Let the DOM settle for one macrotask; NodeBB can reflow/replace nodes right after mutations.
+        setTimeout(() => {
+          if (seq !== state.navSeq) { return; }
+          const phFinal = document.getElementById(domId);
+          if (!phFinal || !phFinal.isConnected) { return; }
+          try { ez.showAds(id); } catch (e) {}
+        }, 0);
         try { state.usedOnce && state.usedOnce.add(id); } catch (e) {}
 
         setTimeout(() => { clearTimeout(hardTimer); release(); }, 650);
@@ -960,6 +1085,12 @@ function startShow(id) {
   function cleanup() {
     blockedUntil = Date.now() + 1200;
 
+    // invalidate any queued showAds from previous view
+    state.navSeq++;
+    state.inflight = 0;
+    state.pending = [];
+    state.pendingSet = new Set();
+
     // remove all wrappers
     try {
       withInternalDomChange(() => {
@@ -1022,6 +1153,7 @@ function startShow(id) {
       warmUpNetwork();
       patchShowAds();
       ensureTightenObserver();
+      ensureFillObserver();
       ensurePreloadObserver();
       ensureDomObserver();
 
@@ -1045,6 +1177,7 @@ function startShow(id) {
   warmUpNetwork();
   patchShowAds();
   ensureTightenObserver();
+  ensureFillObserver();
   ensurePreloadObserver();
   ensureDomObserver();
   bindNodeBB();

package/public/style.css

@@ -9,3 +9,26 @@
   clear: both;
   position: relative;
 }
+
+/*
+  UX: collapse injected wrapper slots until the creative is actually filled.
+  This avoids showing a large empty placeholder when ad fill is slow.
+  Only applies to our injected wrapper DIVs (not Ezoic's internal SPANs).
+*/
+div.ezoic-ad.ez-pending {
+  height: 1px !important;
+  min-height: 1px !important;
+  overflow: hidden !important;
+}
+
+div.ezoic-ad.ez-ready {
+  height: auto !important;
+  overflow: visible !important;
+}
+
+/* Remove baseline gaps under iframes inside Ezoic creatives */
+span.ezoic-ad iframe,
+span.ezoic-ad div[id$="__container__"] iframe {
+  display: block !important;
+  vertical-align: top !important;
+}