nodebb-plugin-ezoic-infinite 1.5.47 → 1.5.49

package/package.json

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

package/public/client.js

@@ -14,66 +14,32 @@
   const PRELOAD_MARGIN_DESKTOP = '2600px 0px 2600px 0px';
   const PRELOAD_MARGIN_MOBILE = '1500px 0px 1500px 0px';
 
+  // When the user scrolls very fast, temporarily preload more aggressively.
+  // This helps ensure ads are already in-flight before the user reaches them.
+  const PRELOAD_MARGIN_DESKTOP_BOOST = '4200px 0px 4200px 0px';
+  const PRELOAD_MARGIN_MOBILE_BOOST = '2500px 0px 2500px 0px';
+  const BOOST_DURATION_MS = 2500;
+  const BOOST_SPEED_PX_PER_MS = 2.2; // ~2200px/s
+
   const MAX_INFLIGHT_DESKTOP = 4;
   const MAX_INFLIGHT_MOBILE = 3;
 
-  
-// Adaptive performance profile (device/network aware)
-const PERF_DEFAULTS = Object.freeze({
-  maxInflightDesktop: MAX_INFLIGHT_DESKTOP,
-  maxInflightMobile: MAX_INFLIGHT_MOBILE,
-  maxInsertsPerRun: MAX_INSERTS_PER_RUN,
-});
-
-function getPerfProfile() {
-  // Cache result for this pageview; recomputed on navigation via cleanup()
-  if (state.perfProfile) return state.perfProfile;
-  const p = {
-    maxInflightDesktop: PERF_DEFAULTS.maxInflightDesktop,
-    maxInflightMobile: PERF_DEFAULTS.maxInflightMobile,
-    maxInsertsPerRun: PERF_DEFAULTS.maxInsertsPerRun,
-  };
-
-  try {
-    const mem = typeof navigator !== 'undefined' ? navigator.deviceMemory : undefined; // GB
-    const cores = typeof navigator !== 'undefined' ? navigator.hardwareConcurrency : undefined;
-
-    // Conservative tuning for low-end devices
-    if (typeof mem === 'number' && mem > 0 && mem <= 2) {
-      p.maxInflightDesktop = Math.max(2, p.maxInflightDesktop - 1);
-      p.maxInflightMobile = Math.max(1, p.maxInflightMobile - 1);
-      p.maxInsertsPerRun = Math.max(1, p.maxInsertsPerRun - 1);
-    }
-    if (typeof cores === 'number' && cores > 0 && cores <= 4) {
-      p.maxInflightDesktop = Math.max(2, p.maxInflightDesktop - 1);
-      p.maxInflightMobile = Math.max(1, p.maxInflightMobile - 1);
-      p.maxInsertsPerRun = Math.max(1, p.maxInsertsPerRun - 1);
-    }
-
-    const conn = typeof navigator !== 'undefined' ? navigator.connection : undefined;
-    const eff = conn && conn.effectiveType ? String(conn.effectiveType).toLowerCase() : '';
-    // Slow connections: don't ramp concurrency too high (keeps page responsive).
-    if (eff.includes('2g')) {
-      p.maxInflightDesktop = Math.max(2, p.maxInflightDesktop - 1);
-      p.maxInflightMobile = Math.max(1, p.maxInflightMobile - 1);
-    }
-  } catch (e) {}
-
-  state.perfProfile = p;
-  return p;
-}
+  function isBoosted() {
+    try { return Date.now() < (state.scrollBoostUntil || 0); } catch (e) { return false; }
+  }
 
   function isMobile() {
     try { return window && window.innerWidth && window.innerWidth < 768; } catch (e) { return false; }
   }
 
   function getPreloadRootMargin() {
-    return isMobile() ? PRELOAD_MARGIN_MOBILE : PRELOAD_MARGIN_DESKTOP;
+    if (isMobile()) return isBoosted() ? PRELOAD_MARGIN_MOBILE_BOOST : PRELOAD_MARGIN_MOBILE;
+    return isBoosted() ? PRELOAD_MARGIN_DESKTOP_BOOST : PRELOAD_MARGIN_DESKTOP;
   }
 
   function getMaxInflight() {
-    const perf = getPerfProfile();
-    return isMobile() ? perf.maxInflightMobile : perf.maxInflightDesktop;
+    const base = isMobile() ? MAX_INFLIGHT_MOBILE : MAX_INFLIGHT_DESKTOP;
+    return base + (isBoosted() ? 1 : 0);
   }
 
   const SELECTORS = {
@@ -82,31 +48,6 @@ function getPerfProfile() {
     categoryItem: 'li[component="categories/category"]',
   };
 
-const RELEVANT_MATCHERS = [
-  SELECTORS.postItem,
-  SELECTORS.topicItem,
-  SELECTORS.categoryItem,
-];
-
-function mutationHasRelevantAddedNodes(mutations) {
-  try {
-    for (const m of mutations) {
-      if (!m || !m.addedNodes || !m.addedNodes.length) continue;
-      for (const n of m.addedNodes) {
-        if (!n || n.nodeType !== 1) continue;
-        const el = /** @type {Element} */ (n);
-        for (const sel of RELEVANT_MATCHERS) {
-          if (el.matches && el.matches(sel)) return true;
-          if (el.querySelector && el.querySelector(sel)) return true;
-        }
-      }
-    }
-  } catch (e) {}
-  return false;
-}
-
-
-
   // Soft block during navigation / heavy DOM churn to avoid “placeholder does not exist” spam
   let blockedUntil = 0;
   function isBlocked() {
@@ -117,7 +58,6 @@ function mutationHasRelevantAddedNodes(mutations) {
     pageKey: null,
     cfg: null,
 
-    navSeq: 0,
     // Full lists (never consumed) + cursors for round-robin reuse
     allTopics: [],
     allPosts: [],
@@ -136,8 +76,6 @@ function mutationHasRelevantAddedNodes(mutations) {
 
     // observers / schedulers
     domObs: null,
-    tightenObs: null,
-    fillObs: null,
     io: null,
     runQueued: false,
 
@@ -145,6 +83,11 @@ function mutationHasRelevantAddedNodes(mutations) {
     inflight: 0,
     pending: [],
     pendingSet: new Set(),
+
+    // fast scroll boosting
+    scrollBoostUntil: 0,
+    lastScrollY: 0,
+    lastScrollTs: 0,
     ioMargin: null,
 
     // hero)
@@ -152,6 +95,29 @@ function mutationHasRelevantAddedNodes(mutations) {
   };
 
   const insertingIds = new Set();
+
+
+  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() {}
 
@@ -266,7 +232,7 @@ function mutationHasRelevantAddedNodes(mutations) {
         const orig = ez.showAds;
 
         ez.showAds = function (...args) {
-          if (isBlocked()) { return; }
+          if (isBlocked()) return;
 
           let ids = [];
           if (args.length === 1 && Array.isArray(args[0])) ids = args[0];
@@ -295,124 +261,6 @@ function mutationHasRelevantAddedNodes(mutations) {
     }
   }
 
-  // ---------- Ezoic min-height tightening (lightweight) ----------
-  // Some Ezoic placements reserve a large min-height (e.g. 400px) even when
-  // the rendered iframe/container is smaller (often 250px). That creates a
-  // visible empty gap and can make creatives appear to "slide" inside the slot.
-  // We correct ONLY those cases, without scroll listeners or full-page rescans.
-
-  function getRenderedAdHeight(adSpan) {
-    try {
-      const c = adSpan.querySelector('div[id$="__container__"]');
-      if (c && c.offsetHeight) return c.offsetHeight;
-      const f = adSpan.querySelector('iframe');
-      if (!f) return 0;
-      const attr = parseInt(f.getAttribute('height') || '', 10);
-      if (Number.isFinite(attr) && attr > 0) return attr;
-      if (f.offsetHeight) return f.offsetHeight;
-    } catch (e) {}
-    return 0;
-  }
-
-  function tightenMinHeight(adSpan) {
-    try {
-      if (!adSpan || adSpan.nodeType !== 1) return;
-      if (adSpan.tagName !== 'SPAN') return;
-      if (!adSpan.classList || !adSpan.classList.contains('ezoic-ad')) return;
-
-      // Some Ezoic templates apply sticky/fixed positioning inside the ad slot
-      // (e.g. .ezads-sticky-intradiv) which can make the creative appear to
-      // "slide" within an oversized container. Neutralize it inside the slot.
-      try {
-        const sticky = adSpan.querySelectorAll('.ezads-sticky-intradiv');
-        sticky.forEach((el) => {
-          el.style.setProperty('position', 'static', 'important');
-          el.style.setProperty('top', 'auto', 'important');
-          el.style.setProperty('bottom', 'auto', 'important');
-        });
-
-        // Safety net: any descendant that ends up sticky/fixed via inline style
-        // (rare, but causes "floating" creatives).
-        const positioned = adSpan.querySelectorAll('[style*="position: sticky"], [style*="position:sticky"], [style*="position: fixed"], [style*="position:fixed"]');
-        positioned.forEach((el) => {
-          el.style.setProperty('position', 'static', 'important');
-          el.style.setProperty('top', 'auto', 'important');
-          el.style.setProperty('bottom', 'auto', 'important');
-        });
-      } catch (e) {}
-
-      const mhStr = adSpan.style && adSpan.style.minHeight ? String(adSpan.style.minHeight) : '';
-      const mh = mhStr ? parseInt(mhStr, 10) : 0;
-      if (!mh || mh < 350) return; // only fix the "400px"-style reservations
-
-      const h = getRenderedAdHeight(adSpan);
-      if (!h || h <= 0) return;
-      if (h >= mh) return;
-
-      adSpan.style.setProperty('min-height', `${h}px`, 'important');
-    } catch (e) {}
-  }
-
-  function closestEzoicAdSpan(node) {
-    try {
-      if (!node || node.nodeType !== 1) return null;
-      const el = /** @type {Element} */ (node);
-      if (el.tagName === 'SPAN' && el.classList && el.classList.contains('ezoic-ad')) return el;
-      if (el.closest) return el.closest('span.ezoic-ad');
-    } catch (e) {}
-    return null;
-  }
-
-  function ensureTightenObserver() {
-    if (state.tightenObs) return;
-
-    let raf = 0;
-    const pending = new Set();
-    const schedule = (adSpan) => {
-      if (!adSpan) return;
-      pending.add(adSpan);
-      if (raf) return;
-      raf = requestAnimationFrame(() => {
-        raf = 0;
-        for (const el of pending) tightenMinHeight(el);
-        pending.clear();
-      });
-    };
-
-    state.tightenObs = new MutationObserver((mutations) => {
-      try {
-        for (const m of mutations) {
-          if (m.type === 'attributes') {
-            const ad = closestEzoicAdSpan(m.target);
-            if (ad) schedule(ad);
-            continue;
-          }
-          if (!m.addedNodes || !m.addedNodes.length) continue;
-          for (const n of m.addedNodes) {
-            const ad = closestEzoicAdSpan(n);
-            if (ad) schedule(ad);
-            if (n && n.nodeType === 1 && n.querySelectorAll) {
-              n.querySelectorAll('span.ezoic-ad').forEach(schedule);
-            }
-          }
-        }
-      } catch (e) {}
-    });
-
-    try {
-      state.tightenObs.observe(document.documentElement, {
-        subtree: true,
-        childList: true,
-        attributes: true,
-        attributeFilter: ['style', 'class', 'data-load-complete', 'height'],
-      });
-    } catch (e) {}
-
-    try {
-      document.querySelectorAll('span.ezoic-ad[style*="min-height"]').forEach(tightenMinHeight);
-    } catch (e) {}
-  }
-
     const RECYCLE_COOLDOWN_MS = 1500;
 
     function kindKeyFromClass(kindClass) {
@@ -486,33 +334,7 @@ function withInternalDomChange(fn) {
     } catch (e) {}
   }
 
-  
-  function findWrapById(id) {
-    try {
-      return document.querySelector(`.${WRAP_CLASS}[data-ezoic-wrapid="${id}"]`);
-    } catch (e) {}
-    return null;
-  }
-
-  function armPlaceholder(wrap, id) {
-    try {
-      if (!wrap || !wrap.isConnected) return null;
-      const domId = `${PLACEHOLDER_PREFIX}${id}`;
-
-      // If the id is already present somewhere, do not reassign it.
-      const existing = document.getElementById(domId);
-      if (existing && existing.isConnected) return existing;
-
-      const ph = wrap.querySelector('[data-ezoic-ph="1"]');
-      if (!ph) return null;
-
-      if (!ph.id) ph.id = domId;
-      return ph;
-    } catch (e) {}
-    return null;
-  }
-
-function pruneOrphanWraps(kindClass, items) {
+  function pruneOrphanWraps(kindClass, items) {
     if (!items || !items.length) return 0;
     const itemSet = new Set(items);
     const wraps = document.querySelectorAll(`.${WRAP_CLASS}.${kindClass}`);
@@ -542,120 +364,37 @@ function pruneOrphanWraps(kindClass, items) {
     if (removed) dbg('prune-orphan', kindClass, { removed });
     return removed;
   }
+
+  function refreshEmptyState(id) {
+    // After Ezoic has had a moment to fill the placeholder, toggle the CSS class.
+    window.setTimeout(() => {
+      try {
+        const ph = document.getElementById(`${PLACEHOLDER_PREFIX}${id}`);
+        if (!ph || !ph.isConnected) return;
+        const wrap = ph.closest(`.${WRAP_CLASS}`);
+        if (!wrap) return;
+        const hasContent = ph.childElementCount > 0 || ph.offsetHeight > 0;
+        if (hasContent) wrap.classList.remove('is-empty');
+        else wrap.classList.add('is-empty');
+      } catch (e) {}
+    }, 3500);
+  }
+
 function buildWrap(id, kindClass, afterPos) {
     const wrap = document.createElement('div');
-    wrap.className = `${WRAP_CLASS} ${kindClass} ez-pending`;
+    wrap.className = `${WRAP_CLASS} ${kindClass}`;
     wrap.setAttribute('data-ezoic-after', String(afterPos));
     wrap.setAttribute('data-ezoic-wrapid', String(id));
     wrap.style.width = '100%';
 
     const ph = document.createElement('div');
-    // Do not assign the Ezoic placeholder id until we actually want to load the ad.
-    // This avoids Ezoic defining placeholders too early during DOM churn/infinite scroll.
+    ph.id = `${PLACEHOLDER_PREFIX}${id}`;
     ph.setAttribute('data-ezoic-id', String(id));
-    ph.setAttribute('data-ezoic-ph', '1');
     wrap.appendChild(ph);
 
     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}"]`);
   }
@@ -665,8 +404,8 @@ function buildWrap(id, kindClass, afterPos) {
     if (findWrap(kindClass, afterPos)) return null;
     if (insertingIds.has(id)) return null;
 
-        const existingWrap = findWrapById(id);
-    if (existingWrap && existingWrap.isConnected) return null;
+    const existingPh = document.getElementById(`${PLACEHOLDER_PREFIX}${id}`);
+    if (existingPh && existingPh.isConnected) return null;
 
     insertingIds.add(id);
     try {
@@ -688,8 +427,8 @@ function buildWrap(id, kindClass, afterPos) {
       state[cursorKey] = (state[cursorKey] + 1) % n;
 
       const id = allIds[idx];
-            const w = findWrapById(id);
-      if (w && w.isConnected) continue;
+      const ph = document.getElementById(`${PLACEHOLDER_PREFIX}${id}`);
+      if (ph && ph.isConnected) continue;
 
       return id;
     }
@@ -711,20 +450,13 @@ function buildWrap(id, kindClass, afterPos) {
       // Otherwise remove the earliest one in the document
       if (!victim) victim = wraps[0];
 
-      const id = getWrapIdFromWrap(victim);
-
-      withInternalDomChange(() => {
-        // Unobserve placeholder if still observed
-        try {
-          const t = victim;
-          if (t && state.io) state.io.unobserve(t);
-        } catch (e) {}
-
-        try { if (id) safeDestroyById(id); } catch (e) {}
-
-        try { victim.remove(); } catch (e) {}
-      });
+      // Unobserve placeholder if still observed
+      try {
+        const ph = victim.querySelector && victim.querySelector(`[id^="${PLACEHOLDER_PREFIX}"]`);
+        if (ph && state.io) state.io.unobserve(ph);
+      } catch (e) {}
 
+      victim.remove();
       return true;
     } catch (e) {
       return false;
@@ -763,7 +495,6 @@ function drainQueue() {
 function startShow(id) {
   if (!id || isBlocked()) return;
 
-  const seq = state.navSeq;
   state.inflight++;
   let released = false;
   const release = () => {
@@ -779,50 +510,27 @@ function startShow(id) {
     try {
       if (isBlocked()) return;
 
-      // 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) { try { clearTimeout(hardTimer); } catch (e) {} release(); return; }
+      const ph = document.getElementById(`${PLACEHOLDER_PREFIX}${id}`);
+      if (!ph || !ph.isConnected) return;
 
       const now2 = Date.now();
       const last2 = state.lastShowById.get(id) || 0;
-      if (now2 - last2 < 900) { try { clearTimeout(hardTimer); } catch (e) {} release(); return; }
+      if (now2 - last2 < 900) return;
       state.lastShowById.set(id, now2);
 
       window.ezstandalone = window.ezstandalone || {};
       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);
+          if (state.usedOnce && state.usedOnce.has(id) && typeof ez.destroyPlaceholders === 'function') {
+            try { ez.destroyPlaceholders(id); } catch (e) {}
           }
         } 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 { ez.showAds(id); } catch (e) {}
         try { state.usedOnce && state.usedOnce.add(id); } catch (e) {}
+        try { markEmptyWrapper(id); } catch (e) {}
 
         setTimeout(() => { clearTimeout(hardTimer); release(); }, 650);
       };
@@ -857,12 +565,9 @@ function startShow(id) {
           const el = ent.target;
           try { state.io && state.io.unobserve(el); } catch (e) {}
 
-          const idAttr = el && el.getAttribute && el.getAttribute('data-ezoic-wrapid');
+          const idAttr = el && el.getAttribute && el.getAttribute('data-ezoic-id');
           const id = parseInt(idAttr, 10);
-          if (Number.isFinite(id) && id > 0) {
-            armPlaceholder(el, id);
-            enqueueShow(id);
-          }
+          if (Number.isFinite(id) && id > 0) enqueueShow(id);
         }
       }, { root: null, rootMargin: desiredMargin, threshold: 0 });
       state.ioMargin = desiredMargin;
@@ -874,7 +579,7 @@ function startShow(id) {
     // If we rebuilt the observer, re-observe existing placeholders so we don't miss them.
     try {
       if (state.io) {
-        const nodes = document.querySelectorAll(`.${WRAP_CLASS}[data-ezoic-wrapid]`);
+        const nodes = document.querySelectorAll(`[id^="${PLACEHOLDER_PREFIX}"]`);
         nodes.forEach((n) => { try { state.io.observe(n); } catch (e) {} });
       }
     } catch (e) {}
@@ -882,20 +587,17 @@ function startShow(id) {
   }
 
   function observePlaceholder(id) {
-    const wrap = findWrapById(id);
-    if (!wrap || !wrap.isConnected) return;
+    const ph = document.getElementById(`${PLACEHOLDER_PREFIX}${id}`);
+    if (!ph || !ph.isConnected) return;
     const io = ensurePreloadObserver();
-    try { io && io.observe(wrap); } catch (e) {}
+    try { io && io.observe(ph); } catch (e) {}
 
-    // If already near the fold, arm & fire immediately
+    // If already above fold, fire immediately
     try {
-      const r = wrap.getBoundingClientRect();
-      const screens = 3.0;
-      const h = (window.innerHeight || 800);
-      if (r.top < screens * h && r.bottom > -screens * h) {
-        armPlaceholder(wrap, id);
-        enqueueShow(id);
-      }
+      const r = ph.getBoundingClientRect();
+      const screens = isBoosted() ? 5.0 : 3.0;
+      const minBottom = isBoosted() ? -1500 : -800;
+      if (r.top < window.innerHeight * screens && r.bottom > minBottom) enqueueShow(id);
     } catch (e) {}
   }
 
@@ -916,8 +618,7 @@ function startShow(id) {
 
     const targets = computeTargets(items.length, interval, showFirst);
     let inserted = 0;
-    const perf = getPerfProfile();
-    const maxInserts = perf.maxInsertsPerRun;
+    const maxInserts = MAX_INSERTS_PER_RUN + (isBoosted() ? 1 : 0);
 
     for (const afterPos of targets) {
       if (inserted >= maxInserts) break;
@@ -1084,27 +785,13 @@ 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(() => {
-        document.querySelectorAll(`.${WRAP_CLASS}`).forEach((el) => {
-          try { el.remove(); } catch (e) {}
-        });
+      document.querySelectorAll(`.${WRAP_CLASS}`).forEach((el) => {
+        try { el.remove(); } catch (e) {}
       });
     } catch (e) {}
 
-    // reset perf profile cache
-    state.perfProfile = null;
-
-    // tighten observer is global; keep it across ajaxify navigation but ensure it exists
-    // (do not disconnect here to avoid missing late style rewrites during transitions)
-
     // reset state
     state.cfg = null;
     state.allTopics = [];
@@ -1125,11 +812,9 @@ function startShow(id) {
 
   function ensureDomObserver() {
     if (state.domObs) return;
-    state.domObs = new MutationObserver((mutations) => {
+    state.domObs = new MutationObserver(() => {
       if (state.internalDomChange > 0) return;
-      if (isBlocked()) return;
-      // Only rescan when NodeBB actually added posts/topics/categories.
-      if (mutationHasRelevantAddedNodes(mutations)) scheduleRun();
+      if (!isBlocked()) scheduleRun();
     });
     try {
       state.domObs.observe(document.body, { childList: true, subtree: true });
@@ -1151,8 +836,6 @@ function startShow(id) {
 
       warmUpNetwork();
       patchShowAds();
-      ensureTightenObserver();
-      ensureFillObserver();
       ensurePreloadObserver();
       ensureDomObserver();
 
@@ -1170,35 +853,51 @@ function startShow(id) {
     });
   }
 
+  function bindScroll() {
+    let ticking = false;
+    window.addEventListener('scroll', () => {
+      // Detect very fast scrolling and temporarily boost preload/parallelism.
+      try {
+        const now = Date.now();
+        const y = window.scrollY || window.pageYOffset || 0;
+        if (state.lastScrollTs) {
+          const dt = now - state.lastScrollTs;
+          const dy = Math.abs(y - (state.lastScrollY || 0));
+          if (dt > 0) {
+            const speed = dy / dt; // px/ms
+            if (speed >= BOOST_SPEED_PX_PER_MS) {
+              const wasBoosted = isBoosted();
+              state.scrollBoostUntil = Math.max(state.scrollBoostUntil || 0, now + BOOST_DURATION_MS);
+              if (!wasBoosted) {
+                // margin changed -> rebuild IO so existing placeholders get earlier preload
+                ensurePreloadObserver();
+              }
+            }
+          }
+        }
+        state.lastScrollY = y;
+        state.lastScrollTs = now;
+      } catch (e) {}
+
+      if (ticking) return;
+      ticking = true;
+      window.requestAnimationFrame(() => {
+        ticking = false;
+        if (!isBlocked()) scheduleRun();
+      });
+    }, { passive: true });
+  }
+
   // ---------- boot ----------
 
   state.pageKey = getPageKey();
   warmUpNetwork();
   patchShowAds();
-  ensureTightenObserver();
-  ensureFillObserver();
   ensurePreloadObserver();
   ensureDomObserver();
-  bindNodeBB();
 
-  // Lightweight scroll kick: NodeBB infinite scroll can keep many nodes and only append occasionally.
-  // Without a scroll trigger, we might not inject new placeholders until another DOM mutation occurs.
-  // This is throttled and only triggers near the bottom to keep CPU usage minimal.
-  state.lastScrollKick = 0;
-  window.addEventListener('scroll', () => {
-    const now = Date.now();
-    if (now - state.lastScrollKick < 250) return;
-    state.lastScrollKick = now;
-
-    // Only kick when user is approaching the end of currently rendered content
-    const doc = document.documentElement;
-    const scrollTop = window.pageYOffset || doc.scrollTop || 0;
-    const viewportH = window.innerHeight || doc.clientHeight || 0;
-    const fullH = Math.max(doc.scrollHeight, document.body ? document.body.scrollHeight : 0);
-    if (scrollTop + viewportH > fullH - 2000) {
-      if (!isBlocked()) scheduleRun();
-    }
-  }, { passive: true });
+  bindNodeBB();
+  bindScroll();
 
   // First paint: try hero + run
   blockedUntil = 0;

package/public/style.css

@@ -1,34 +1,40 @@
-/* Minimal styling for injected Ezoic wrappers.
-   Spacing (margins/padding) is intentionally NOT forced here, because it can be
-   configured inside Ezoic and may vary by placement/device.
-*/
-
+/* Keep Ezoic wrappers “CLS-safe” and remove the extra vertical spacing Ezoic often injects */
 .ezoic-ad {
   display: block;
   width: 100%;
-  clear: both;
-  position: relative;
+  margin: 0 !important;
+  padding: 0 !important;
+  overflow: hidden;
 }
 
-/*
-  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;
+.ezoic-ad > [id^="ezoic-pub-ad-placeholder-"] {
+  margin: 0 !important;
+  padding: 0 !important;
+  min-height: 1px; /* keeps placeholder measurable for IO */
 }
 
-div.ezoic-ad.ez-ready {
-  height: auto !important;
-  overflow: visible !important;
+/* Ezoic sometimes wraps in extra spans/divs with margins */
+.ezoic-ad span.ezoic-ad,
+.ezoic-ad .ezoic-ad {
+  margin: 0 !important;
+  padding: 0 !important;
 }
 
-/* Remove baseline gaps under iframes inside Ezoic creatives */
-span.ezoic-ad iframe,
-span.ezoic-ad div[id$="__container__"] iframe {
+
+/* Collapse empty ad blocks (prevents "holes" when an ad doesn't fill or gets destroyed) */
+.ezoic-ad.is-empty {
   display: block !important;
-  vertical-align: top !important;
+  margin: 0 !important;
+  padding: 0 !important;
+  height: 0 !important;
+  min-height: 0 !important;
+  overflow: hidden !important;
+}
+
+.ezoic-ad {
+  min-height: 0 !important;
+}
+
+.ezoic-ad > [id^="ezoic-pub-ad-placeholder-"] {
+  min-height: 0 !important;
 }