nodebb-plugin-ezoic-infinite 1.5.29 → 1.5.31

package/package.json

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

package/public/client.js

@@ -10,8 +10,24 @@
   // Insert at most N ads per run to keep the UI smooth on infinite scroll
   const MAX_INSERTS_PER_RUN = 3;
 
-  // Preload before viewport (tune if you want even earlier)
-  const PRELOAD_ROOT_MARGIN = '1200px 0px';
+  // Preload before viewport (earlier load for smoother scroll)
+  const PRELOAD_MARGIN_DESKTOP = '1600px 0px 1600px 0px';
+  const PRELOAD_MARGIN_MOBILE = '900px 0px 900px 0px';
+
+  const MAX_INFLIGHT_DESKTOP = 3;
+  const MAX_INFLIGHT_MOBILE = 2;
+
+  function isMobile() {
+    try { return window && window.innerWidth && window.innerWidth < 768; } catch (e) { return false; }
+  }
+
+  function getPreloadRootMargin() {
+    return isMobile() ? PRELOAD_MARGIN_MOBILE : PRELOAD_MARGIN_DESKTOP;
+  }
+
+  function getMaxInflight() {
+    return isMobile() ? MAX_INFLIGHT_MOBILE : MAX_INFLIGHT_DESKTOP;
+  }
 
   const SELECTORS = {
     topicItem: 'li[component="category/topic"]',
@@ -50,22 +66,64 @@
     io: null,
     runQueued: false,
 
-    // hero
+    // preloading budget
+    inflight: 0,
+    pending: [],
+    pendingSet: new Set(),
+
+    // hero)
     heroDoneForPage: false,
   };
 
   const insertingIds = new Set();
 
-  // Debug logs (enable with localStorage.ezoicInfiniteDebug = "1")
-  function dbg(...args) {
-    try {
-      if (window && window.localStorage && window.localStorage.getItem('ezoicInfiniteDebug') === '1') {
-        // eslint-disable-next-line no-console
-        console.log('[ezoicInfinite]', ...args);
+  function enqueueShow(id) {
+    if (!id || isBlocked()) return;
+    const max = getMaxInflight();
+    if (state.inflight >= max) {
+      if (!state.pendingSet.has(id)) {
+        state.pending.push(id);
+        state.pendingSet.add(id);
       }
+      return;
+    }
+    startShow(id);
+  }
+
+  function drainQueue() {
+    if (isBlocked()) return;
+    const max = getMaxInflight();
+    while (state.inflight < max && state.pending.length) {
+      const id = state.pending.shift();
+      state.pendingSet.delete(id);
+      startShow(id);
+    }
+  }
+
+  function markEmptyWrapper(id) {
+    try {
+      const ph = document.getElementById(`${PLACEHOLDER_PREFIX}${id}`);
+      if (!ph || !ph.isConnected) return;
+      const wrap = ph.closest ? ph.closest(`.${WRAP_CLASS}`) : null;
+      if (!wrap) return;
+      // If still empty after a delay, collapse it.
+      setTimeout(() => {
+        try {
+          const ph2 = document.getElementById(`${PLACEHOLDER_PREFIX}${id}`);
+          if (!ph2 || !ph2.isConnected) return;
+          const w2 = ph2.closest ? ph2.closest(`.${WRAP_CLASS}`) : null;
+          if (!w2) return;
+          // consider empty if only whitespace and no iframes/ins/img
+          const hasAd = !!(ph2.querySelector && ph2.querySelector('iframe, ins, img, .ez-ad, .ezoic-ad'));
+          if (!hasAd) w2.classList.add('is-empty');
+        } catch (e) {}
+      }, 3500);
     } catch (e) {}
   }
 
+  // Production build: debug disabled
+  function dbg() {}
+
   // ---------- small utils ----------
 
   function normalizeBool(v) {
@@ -286,8 +344,15 @@ function withInternalDomChange(fn) {
     let removed = 0;
 
     wraps.forEach((wrap) => {
-      const prev = wrap.previousElementSibling;
-      if (!prev || !itemSet.has(prev)) {
+      // NodeBB can insert separators/spacers; accept an anchor within a few previous siblings
+      let ok = false;
+      let prev = wrap.previousElementSibling;
+      for (let i = 0; i < 3 && prev; i++) {
+        if (itemSet.has(prev)) { ok = true; break; }
+        prev = prev.previousElementSibling;
+      }
+
+      if (!ok) {
         const id = getWrapIdFromWrap(wrap);
         withInternalDomChange(() => {
           try {
@@ -315,12 +380,12 @@ function withInternalDomChange(fn) {
         if (hasContent) wrap.classList.remove('is-empty');
         else wrap.classList.add('is-empty');
       } catch (e) {}
-    }, 1800);
+    }, 3500);
   }
 
 function buildWrap(id, kindClass, afterPos) {
     const wrap = document.createElement('div');
-    wrap.className = `${WRAP_CLASS} ${kindClass} is-empty`;
+    wrap.className = `${WRAP_CLASS} ${kindClass}`;
     wrap.setAttribute('data-ezoic-after', String(afterPos));
     wrap.setAttribute('data-ezoic-wrapid', String(id));
     wrap.style.width = '100%';
@@ -401,13 +466,28 @@ function buildWrap(id, kindClass, afterPos) {
     }
   }
 
-  function showAd(id) {
+  function enqueueShow(id) {
     if (!id || isBlocked()) return;
 
     const now = Date.now();
     const last = state.lastShowById.get(id) || 0;
     if (now - last < 1500) return; // basic throttle
 
+    // Defer one frame
+
+    // Budget concurrent loads
+    state.inflight++;
+    let released = false;
+    const release = () => {
+      if (released) return;
+      released = true;
+      state.inflight = Math.max(0, state.inflight - 1);
+      drainQueue();
+    };
+
+    // Safety release in case Ezoic never fills
+    const hardTimer = setTimeout(release, 6500);
+
     // Defer one frame so the placeholder is definitely in DOM after insertion/recycle
     requestAnimationFrame(() => {
       if (isBlocked()) return;
@@ -433,6 +513,9 @@ function buildWrap(id, kindClass, afterPos) {
           } catch (e) {}
           try { ez.showAds(id); } catch (e) {}
           try { state.usedOnce && state.usedOnce.add(id); } catch (e) {}
+          try { markEmptyWrapper(id); } catch (e) {}
+          // allow a short time for DOM fill; then release budget
+          setTimeout(() => { clearTimeout(hardTimer); release(); }, 700);
         };
 
         // Fast path
@@ -459,10 +542,12 @@ function buildWrap(id, kindClass, afterPos) {
               } catch (e) {}
               try { ez2.showAds(id); } catch (e) {}
               try { state.usedOnce && state.usedOnce.add(id); } catch (e) {}
+              try { markEmptyWrapper(id); } catch (e) {}
+              setTimeout(() => { clearTimeout(hardTimer); release(); }, 700);
             } catch (e) {}
           });
         }
-      } catch (e) {}
+      } catch (e) { try { clearTimeout(hardTimer); release(); } catch (e2) {} }
     });
   }
 
@@ -480,9 +565,9 @@ function buildWrap(id, kindClass, afterPos) {
 
           const idAttr = el && el.getAttribute && el.getAttribute('data-ezoic-id');
           const id = parseInt(idAttr, 10);
-          if (Number.isFinite(id) && id > 0) showAd(id);
+          if (Number.isFinite(id) && id > 0) enqueueShow(id);
         }
-      }, { root: null, rootMargin: PRELOAD_ROOT_MARGIN, threshold: 0.01 });
+      }, { root: null, rootMargin: getPreloadRootMargin(), threshold: 0 });
     } catch (e) {
       state.io = null;
     }
@@ -498,7 +583,7 @@ function buildWrap(id, kindClass, afterPos) {
     // If already above fold, fire immediately
     try {
       const r = ph.getBoundingClientRect();
-      if (r.top < window.innerHeight * 1.5 && r.bottom > -200) showAd(id);
+      if (r.top < window.innerHeight * 1.5 && r.bottom > -200) enqueueShow(id);
     } catch (e) {}
   }
 
@@ -701,6 +786,9 @@ function buildWrap(id, kindClass, afterPos) {
     state.curPosts = 0;
     state.curCategories = 0;
     state.lastShowById.clear();
+    state.inflight = 0;
+    state.pending = [];
+    try { state.pendingSet && state.pendingSet.clear(); } catch (e) {}
     try { state.usedOnce && state.usedOnce.clear(); } catch (e) {}
     state.heroDoneForPage = false;
 

package/public/style.css

@@ -23,11 +23,12 @@
 
 /* Collapse empty ad blocks (prevents "holes" when an ad doesn't fill or gets destroyed) */
 .ezoic-ad.is-empty {
-  display: none !important;
+  display: block !important;
   margin: 0 !important;
   padding: 0 !important;
   height: 0 !important;
   min-height: 0 !important;
+  overflow: hidden !important;
 }
 
 .ezoic-ad {