nodebb-plugin-ezoic-infinite 1.5.34 → 1.5.36

package/package.json

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

package/public/client.js

@@ -11,18 +11,20 @@
   const MAX_INSERTS_PER_RUN = 3;
 
   // Preload before viewport (earlier load for smoother scroll)
-  const PRELOAD_MARGIN_DESKTOP = '2600px 0px 2600px 0px';
-  const PRELOAD_MARGIN_MOBILE = '1500px 0px 1500px 0px';
+  // Preload far enough ahead that fast scroll doesn't outrun ad loading.
+  const PRELOAD_MARGIN_DESKTOP = '3200px 0px 3200px 0px';
+  const PRELOAD_MARGIN_MOBILE = '1800px 0px 1800px 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 PRELOAD_MARGIN_DESKTOP_BOOST = '5200px 0px 5200px 0px';
+  const PRELOAD_MARGIN_MOBILE_BOOST = '3200px 0px 3200px 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;
+  // Allow a bit more parallelism; the perf profile can still dial this down on low-end devices.
+  const MAX_INFLIGHT_DESKTOP = 5;
+  const MAX_INFLIGHT_MOBILE = 4;
 
   
 // Adaptive performance profile (device/network aware)
@@ -383,7 +385,33 @@ function withInternalDomChange(fn) {
     } catch (e) {}
   }
 
-  function pruneOrphanWraps(kindClass, items) {
+  
+  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) {
     if (!items || !items.length) return 0;
     const itemSet = new Set(items);
     const wraps = document.querySelectorAll(`.${WRAP_CLASS}.${kindClass}`);
@@ -421,8 +449,10 @@ function buildWrap(id, kindClass, afterPos) {
     wrap.style.width = '100%';
 
     const ph = document.createElement('div');
-    ph.id = `${PLACEHOLDER_PREFIX}${id}`;
+    // 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.setAttribute('data-ezoic-id', String(id));
+    ph.setAttribute('data-ezoic-ph', '1');
     wrap.appendChild(ph);
 
     return wrap;
@@ -437,8 +467,8 @@ function buildWrap(id, kindClass, afterPos) {
     if (findWrap(kindClass, afterPos)) return null;
     if (insertingIds.has(id)) return null;
 
-    const existingPh = document.getElementById(`${PLACEHOLDER_PREFIX}${id}`);
-    if (existingPh && existingPh.isConnected) return null;
+        const existingWrap = findWrapById(id);
+    if (existingWrap && existingWrap.isConnected) return null;
 
     insertingIds.add(id);
     try {
@@ -460,8 +490,8 @@ function buildWrap(id, kindClass, afterPos) {
       state[cursorKey] = (state[cursorKey] + 1) % n;
 
       const id = allIds[idx];
-      const ph = document.getElementById(`${PLACEHOLDER_PREFIX}${id}`);
-      if (ph && ph.isConnected) continue;
+            const w = findWrapById(id);
+      if (w && w.isConnected) continue;
 
       return id;
     }
@@ -488,8 +518,8 @@ function buildWrap(id, kindClass, afterPos) {
       withInternalDomChange(() => {
         // Unobserve placeholder if still observed
         try {
-          const ph = victim.querySelector && victim.querySelector(`[id^="${PLACEHOLDER_PREFIX}"]`);
-          if (ph && state.io) state.io.unobserve(ph);
+          const t = victim;
+          if (t && state.io) state.io.unobserve(t);
         } catch (e) {}
 
         try { if (id) safeDestroyById(id); } catch (e) {}
@@ -604,9 +634,12 @@ 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-id');
+          const idAttr = el && el.getAttribute && el.getAttribute('data-ezoic-wrapid');
           const id = parseInt(idAttr, 10);
-          if (Number.isFinite(id) && id > 0) enqueueShow(id);
+          if (Number.isFinite(id) && id > 0) {
+            armPlaceholder(el, id);
+            enqueueShow(id);
+          }
         }
       }, { root: null, rootMargin: desiredMargin, threshold: 0 });
       state.ioMargin = desiredMargin;
@@ -618,7 +651,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(`[id^="${PLACEHOLDER_PREFIX}"]`);
+        const nodes = document.querySelectorAll(`.${WRAP_CLASS}[data-ezoic-wrapid]`);
         nodes.forEach((n) => { try { state.io.observe(n); } catch (e) {} });
       }
     } catch (e) {}
@@ -626,17 +659,22 @@ function startShow(id) {
   }
 
   function observePlaceholder(id) {
-    const ph = document.getElementById(`${PLACEHOLDER_PREFIX}${id}`);
-    if (!ph || !ph.isConnected) return;
+    const wrap = findWrapById(id);
+    if (!wrap || !wrap.isConnected) return;
     const io = ensurePreloadObserver();
-    try { io && io.observe(ph); } catch (e) {}
+    try { io && io.observe(wrap); } catch (e) {}
 
-    // If already above fold, fire immediately
+    // If already near the fold, arm & fire immediately
     try {
-      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);
+      const r = wrap.getBoundingClientRect();
+      // Fire early enough that the ad is likely ready when the user reaches it.
+      // During boost (fast scroll), preload even farther.
+      const screens = isBoosted() ? 6.0 : 4.0;
+      const h = (window.innerHeight || 800);
+      if (r.top < screens * h && r.bottom > -screens * h) {
+        armPlaceholder(wrap, id);
+        enqueueShow(id);
+      }
     } catch (e) {}
   }
 

package/public/style.css

@@ -1,9 +1,26 @@
 /* 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.
+
+   Goals:
+   - prevent flex/centering styles from parent lists from affecting ad internals
+   - reduce layout jank when iframes resize during scroll
 */
 
 .ezoic-ad {
-  display: block;
+  display: block !important;
+  position: relative;
   width: 100%;
+  overflow: hidden;
+
+  /* limit how far layout/paint changes propagate */
+  contain: layout paint style;
+}
+
+/* Keep ad content aligned to the top (avoids the "slides to bottom" look) */
+.ezoic-ad iframe,
+.ezoic-ad ins,
+.ezoic-ad > div {
+  display: block !important;
+  vertical-align: top !important;
 }