nodebb-plugin-ezoic-infinite 1.5.32 → 1.5.34

package/package.json

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

package/public/client.js

@@ -14,19 +14,79 @@
   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() {
-    return isMobile() ? MAX_INFLIGHT_MOBILE : MAX_INFLIGHT_DESKTOP;
+    const perf = getPerfProfile();
+    const base = isMobile() ? perf.maxInflightMobile : perf.maxInflightDesktop;
+    return base + (isBoosted() ? 1 : 0);
   }
 
   const SELECTORS = {
@@ -35,6 +95,31 @@
     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() {
@@ -71,35 +156,17 @@
     pending: [],
     pendingSet: new Set(),
 
+    // fast scroll boosting
+    scrollBoostUntil: 0,
+    lastScrollY: 0,
+    lastScrollTs: 0,
+    ioMargin: null,
+
     // hero)
     heroDoneForPage: false,
   };
 
   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() {}
 
@@ -346,22 +413,6 @@ function withInternalDomChange(fn) {
     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}`;
@@ -432,13 +483,20 @@ function buildWrap(id, kindClass, afterPos) {
       // Otherwise remove the earliest one in the document
       if (!victim) victim = wraps[0];
 
-      // 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) {}
+      const id = getWrapIdFromWrap(victim);
+
+      withInternalDomChange(() => {
+        // 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) {}
+
+        try { if (id) safeDestroyById(id); } catch (e) {}
+
+        try { victim.remove(); } catch (e) {}
+      });
 
-      victim.remove();
       return true;
     } catch (e) {
       return false;
@@ -505,14 +563,13 @@ function startShow(id) {
 
       const doShow = () => {
         try {
-          if (state.usedOnce && state.usedOnce.has(id) && typeof ez.destroyPlaceholders === 'function') {
-            try { ez.destroyPlaceholders(id); } catch (e) {}
+          if (state.usedOnce && state.usedOnce.has(id)) {
+            safeDestroyById(id);
           }
         } catch (e) {}
 
         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);
       };
@@ -532,7 +589,14 @@ function startShow(id) {
   // ---------- preload / above-the-fold ----------
 
   function ensurePreloadObserver() {
-    if (state.io) return state.io;
+    const desiredMargin = getPreloadRootMargin();
+    if (state.io && state.ioMargin === desiredMargin) return state.io;
+
+    // Rebuild IO if margin changed (e.g., scroll boost toggled)
+    if (state.io) {
+      try { state.io.disconnect(); } catch (e) {}
+      state.io = null;
+    }
     try {
       state.io = new IntersectionObserver((entries) => {
         for (const ent of entries) {
@@ -544,10 +608,20 @@ function startShow(id) {
           const id = parseInt(idAttr, 10);
           if (Number.isFinite(id) && id > 0) enqueueShow(id);
         }
-      }, { root: null, rootMargin: getPreloadRootMargin(), threshold: 0 });
+      }, { root: null, rootMargin: desiredMargin, threshold: 0 });
+      state.ioMargin = desiredMargin;
     } catch (e) {
       state.io = null;
+      state.ioMargin = null;
     }
+
+    // If we rebuilt the observer, re-observe existing placeholders so we don't miss them.
+    try {
+      if (state.io) {
+        const nodes = document.querySelectorAll(`[id^="${PLACEHOLDER_PREFIX}"]`);
+        nodes.forEach((n) => { try { state.io.observe(n); } catch (e) {} });
+      }
+    } catch (e) {}
     return state.io;
   }
 
@@ -560,7 +634,9 @@ function startShow(id) {
     // If already above fold, fire immediately
     try {
       const r = ph.getBoundingClientRect();
-      if (r.top < window.innerHeight * 3.0 && r.bottom > -800) enqueueShow(id);
+      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) {}
   }
 
@@ -581,9 +657,11 @@ function startShow(id) {
 
     const targets = computeTargets(items.length, interval, showFirst);
     let inserted = 0;
+    const perf = getPerfProfile();
+    const maxInserts = perf.maxInsertsPerRun + (isBoosted() ? 1 : 0);
 
     for (const afterPos of targets) {
-      if (inserted >= MAX_INSERTS_PER_RUN) break;
+      if (inserted >= maxInserts) break;
 
       const el = items[afterPos - 1];
       if (!el || !el.isConnected) continue;
@@ -749,11 +827,16 @@ function startShow(id) {
 
     // remove all wrappers
     try {
-      document.querySelectorAll(`.${WRAP_CLASS}`).forEach((el) => {
-        try { el.remove(); } catch (e) {}
+      withInternalDomChange(() => {
+        document.querySelectorAll(`.${WRAP_CLASS}`).forEach((el) => {
+          try { el.remove(); } catch (e) {}
+        });
       });
     } catch (e) {}
 
+    // reset perf profile cache
+    state.perfProfile = null;
+
     // reset state
     state.cfg = null;
     state.allTopics = [];
@@ -774,9 +857,11 @@ function startShow(id) {
 
   function ensureDomObserver() {
     if (state.domObs) return;
-    state.domObs = new MutationObserver(() => {
+    state.domObs = new MutationObserver((mutations) => {
       if (state.internalDomChange > 0) return;
-      if (!isBlocked()) scheduleRun();
+      if (isBlocked()) return;
+      // Only rescan when NodeBB actually added posts/topics/categories.
+      if (mutationHasRelevantAddedNodes(mutations)) scheduleRun();
     });
     try {
       state.domObs.observe(document.body, { childList: true, subtree: true });
@@ -818,6 +903,29 @@ 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(() => {

package/public/style.css

@@ -1,40 +1,9 @@
-/* Keep Ezoic wrappers “CLS-safe” and remove the extra vertical spacing Ezoic often injects */
+/* 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.
+*/
+
 .ezoic-ad {
   display: block;
   width: 100%;
-  margin: 0 !important;
-  padding: 0 !important;
-  overflow: hidden;
-}
-
-.ezoic-ad > [id^="ezoic-pub-ad-placeholder-"] {
-  margin: 0 !important;
-  padding: 0 !important;
-  min-height: 1px; /* keeps placeholder measurable for IO */
-}
-
-/* Ezoic sometimes wraps in extra spans/divs with margins */
-.ezoic-ad span.ezoic-ad,
-.ezoic-ad .ezoic-ad {
-  margin: 0 !important;
-  padding: 0 !important;
-}
-
-
-/* Collapse empty ad blocks (prevents "holes" when an ad doesn't fill or gets destroyed) */
-.ezoic-ad.is-empty {
-  display: block !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;
 }