nodebb-plugin-ezoic-infinite 1.5.50 → 1.5.51

package/package.json

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

package/public/client.js

@@ -96,53 +96,11 @@
 
   const insertingIds = new Set();
 
-  // ---------- lightweight "fade-in" for ad iframes ----------
-  // This reduces the perception of "flashing" when a slot appears empty then fills.
-  // We avoid scroll listeners and only react to DOM insertions.
-  const _faded = new WeakSet();
-  function _fadeInIframe(iframe) {
-    try {
-      if (!iframe || _faded.has(iframe)) return;
-      _faded.add(iframe);
-      iframe.style.opacity = '0';
-      iframe.style.transition = 'opacity 140ms ease';
-      // Next frame: show
-      requestAnimationFrame(() => {
-        try { iframe.style.opacity = '1'; } catch (e) {}
-      });
-    } catch (e) {}
-  }
-
-  const _adFillObserver = new MutationObserver((muts) => {
-    try {
-      for (const m of muts) {
-        if (m.addedNodes && m.addedNodes.length) {
-          for (const n of m.addedNodes) {
-            if (!n || n.nodeType !== 1) continue;
-            if (n.tagName === 'IFRAME') {
-              const w = n.closest && n.closest(`.${WRAP_CLASS}`);
-              if (w) _fadeInIframe(n);
-              continue;
-            }
-            // If a subtree is added, look for iframes inside ad wrappers only.
-            const ifs = n.querySelectorAll ? n.querySelectorAll(`.${WRAP_CLASS} iframe`) : null;
-            if (ifs && ifs.length) ifs.forEach(_fadeInIframe);
-          }
-        }
-      }
-    } catch (e) {}
-  });
-
-  try {
-    _adFillObserver.observe(document.documentElement, { subtree: true, childList: true });
-  } catch (e) {}
-
-
 
   function markEmptyWrapper(id) {
     try {
       const ph = document.getElementById(`${PLACEHOLDER_PREFIX}${id}`);
-      if (!ph || !ph.isConnected) return;
+      if (!ph || !ph.isConnected) { try { clearTimeout(hardTimer); } catch (e) {} release(); return; }
       const wrap = ph.closest ? ph.closest(`.${WRAP_CLASS}`) : null;
       if (!wrap) return;
       // If still empty after a delay, collapse it.
@@ -247,18 +205,13 @@
         ['dns-prefetch', 'https://g.ezoic.net', false],
         ['preconnect', 'https://go.ezoic.net', true],
         ['dns-prefetch', 'https://go.ezoic.net', false],
-
-        // Google ad stack (helps Safeframe/GPT warm up)
+        // Google Ads / Safeframe warm-up (helps cold-start latency)
         ['preconnect', 'https://pagead2.googlesyndication.com', true],
         ['dns-prefetch', 'https://pagead2.googlesyndication.com', false],
         ['preconnect', 'https://securepubads.g.doubleclick.net', true],
         ['dns-prefetch', 'https://securepubads.g.doubleclick.net', false],
         ['preconnect', 'https://tpc.googlesyndication.com', true],
         ['dns-prefetch', 'https://tpc.googlesyndication.com', false],
-        ['preconnect', 'https://googleads.g.doubleclick.net', true],
-        ['dns-prefetch', 'https://googleads.g.doubleclick.net', false],
-        ['preconnect', 'https://static.doubleclick.net', true],
-        ['dns-prefetch', 'https://static.doubleclick.net', false],
       ];
       for (const [rel, href, cors] of links) {
         const key = `${rel}|${href}`;
@@ -286,7 +239,7 @@
         const orig = ez.showAds;
 
         ez.showAds = function (...args) {
-          if (isBlocked()) return;
+          if (isBlocked()) { try { clearTimeout(hardTimer); } catch (e) {} release(); return; }
 
           let ids = [];
           if (args.length === 1 && Array.isArray(args[0])) ids = args[0];
@@ -424,7 +377,7 @@ function withInternalDomChange(fn) {
     window.setTimeout(() => {
       try {
         const ph = document.getElementById(`${PLACEHOLDER_PREFIX}${id}`);
-        if (!ph || !ph.isConnected) return;
+        if (!ph || !ph.isConnected) { try { clearTimeout(hardTimer); } catch (e) {} release(); return; }
         const wrap = ph.closest(`.${WRAP_CLASS}`);
         if (!wrap) return;
         const hasContent = ph.childElementCount > 0 || ph.offsetHeight > 0;
@@ -439,7 +392,6 @@ function buildWrap(id, kindClass, afterPos) {
     wrap.className = `${WRAP_CLASS} ${kindClass}`;
     wrap.setAttribute('data-ezoic-after', String(afterPos));
     wrap.setAttribute('data-ezoic-wrapid', String(id));
-    wrap.setAttribute('data-ezoic-ts', String(Date.now()));
     wrap.style.width = '100%';
 
     const ph = document.createElement('div');
@@ -496,23 +448,14 @@ function buildWrap(id, kindClass, afterPos) {
       const wraps = Array.from(document.querySelectorAll(`.${WRAP_CLASS}.${kindClass}`));
       if (!wraps.length) return false;
 
-      const now = Date.now();
-
-      // Only recycle wraps that are clearly out of view AND old enough.
-      // This avoids the "unstable" feeling where ads disappear when the user scrolls back a bit.
-      const MIN_AGE_MS = 20000;      // 20s
-      const OFFSCREEN_PX = -5000;    // far above viewport
-
+      // Prefer a wrap far above the viewport
       let victim = null;
       for (const w of wraps) {
         const r = w.getBoundingClientRect();
-        const ts = parseInt(w.getAttribute('data-ezoic-ts') || '0', 10);
-        const ageOk = !ts || (now - ts) >= MIN_AGE_MS;
-        if (ageOk && r.bottom < OFFSCREEN_PX) { victim = w; break; }
+        if (r.bottom < -2000) { victim = w; break; }
       }
-
-      // If nothing is eligible, do not recycle. We'll simply skip inserting new ads this run.
-      if (!victim) return false;
+      // Otherwise remove the earliest one in the document
+      if (!victim) victim = wraps[0];
 
       // Unobserve placeholder if still observed
       try {
@@ -547,7 +490,7 @@ function buildWrap(id, kindClass, afterPos) {
 }
 
 function drainQueue() {
-  if (isBlocked()) return;
+  if (isBlocked()) { try { clearTimeout(hardTimer); } catch (e) {} release(); return; }
   const max = getMaxInflight();
   while (state.inflight < max && state.pending.length) {
     const id = state.pending.shift();
@@ -572,14 +515,14 @@ function startShow(id) {
 
   requestAnimationFrame(() => {
     try {
-      if (isBlocked()) return;
+      if (isBlocked()) { try { clearTimeout(hardTimer); } catch (e) {} release(); return; }
 
       const ph = document.getElementById(`${PLACEHOLDER_PREFIX}${id}`);
-      if (!ph || !ph.isConnected) return;
+      if (!ph || !ph.isConnected) { try { clearTimeout(hardTimer); } catch (e) {} release(); return; }
 
       const now2 = Date.now();
       const last2 = state.lastShowById.get(id) || 0;
-      if (now2 - last2 < 900) return;
+      if (now2 - last2 < 900) { try { clearTimeout(hardTimer); } catch (e) {} release(); return; }
       state.lastShowById.set(id, now2);
 
       window.ezstandalone = window.ezstandalone || {};
@@ -587,16 +530,35 @@ function startShow(id) {
 
       const doShow = () => {
         try {
+          // Re-check at execution time: ajaxify/infinite-scroll may have removed the placeholder.
+          const phNow = document.getElementById(`${PLACEHOLDER_PREFIX}${id}`);
+          if (!phNow || !phNow.isConnected) {
+            try { clearTimeout(hardTimer); } catch (e) {}
+            release();
+            return;
+          }
+        } catch (e) {}
+
+        try {
+          // If we reused an id in this pageview, destroy first (use DOM id string form).
           if (state.usedOnce && state.usedOnce.has(id) && typeof ez.destroyPlaceholders === 'function') {
-            try { ez.destroyPlaceholders(id); } catch (e) {}
+            try { ez.destroyPlaceholders([`${PLACEHOLDER_PREFIX}${id}`]); } catch (e) {}
           }
         } catch (e) {}
 
-        try { ez.showAds(id); } catch (e) {}
+        try {
+          // Call Ezoic. Our showAds patch will also filter if DOM disappeared.
+          ez.showAds(id);
+        } catch (e) {}
+
         try { state.usedOnce && state.usedOnce.add(id); } catch (e) {}
         try { markEmptyWrapper(id); } catch (e) {}
 
-        setTimeout(() => { clearTimeout(hardTimer); release(); }, 650);
+        // Release budget quickly; rendering continues async in ad stack.
+        setTimeout(() => {
+          try { clearTimeout(hardTimer); } catch (e) {}
+          release();
+        }, 300);
       };
 
       if (Array.isArray(ez.cmd)) {
@@ -652,7 +614,7 @@ function startShow(id) {
 
   function observePlaceholder(id) {
     const ph = document.getElementById(`${PLACEHOLDER_PREFIX}${id}`);
-    if (!ph || !ph.isConnected) return;
+    if (!ph || !ph.isConnected) { try { clearTimeout(hardTimer); } catch (e) {} release(); return; }
     const io = ensurePreloadObserver();
     try { io && io.observe(ph); } catch (e) {}
 
@@ -912,7 +874,7 @@ function startShow(id) {
 
     // Infinite scroll / partial updates
     $(window).on('action:posts.loaded.ezoicInfinite action:topics.loaded.ezoicInfinite action:category.loaded.ezoicInfinite action:topic.loaded.ezoicInfinite', () => {
-      if (isBlocked()) return;
+      if (isBlocked()) { try { clearTimeout(hardTimer); } catch (e) {} release(); return; }
       scheduleRun();
     });
   }

package/public/style.css

@@ -39,8 +39,15 @@
   min-height: 0 !important;
 }
 
-/* Avoid baseline gap under iframes (can look like extra space) */
+
+/* Smooth fill: avoid harsh flash when safeframe/iframe arrives */
 .ezoic-ad iframe {
+  opacity: 0;
+  transition: opacity 140ms ease;
   display: block !important;
   vertical-align: top !important;
 }
+.ezoic-ad iframe[data-load-complete="true"],
+.ezoic-ad iframe[src] {
+  opacity: 1;
+}