nodebb-plugin-ezoic-infinite 1.5.38 → 1.5.40

package/package.json

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

package/public/client.js

@@ -8,24 +8,14 @@
   const PLACEHOLDER_PREFIX = 'ezoic-pub-ad-placeholder-';
 
   // Insert at most N ads per run to keep the UI smooth on infinite scroll
-  const MAX_INSERTS_PER_RUN = 6;
+  const MAX_INSERTS_PER_RUN = 3;
 
   // Preload before viewport (earlier load for smoother scroll)
-  // Preload far enough ahead that fast scroll doesn't outrun ad loading.
-  // Slightly more aggressive margins to reduce “I scrolled past it before it loaded”.
-  const PRELOAD_MARGIN_DESKTOP = '6000px 0px 6000px 0px';
-  const PRELOAD_MARGIN_MOBILE = '3500px 0px 3500px 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 = '8500px 0px 8500px 0px';
-  const PRELOAD_MARGIN_MOBILE_BOOST = '5500px 0px 5500px 0px';
-  const BOOST_DURATION_MS = 2500;
-  const BOOST_SPEED_PX_PER_MS = 2.2; // ~2200px/s
-
-  // Allow a bit more parallelism; the perf profile can still dial this down on low-end devices.
-  const MAX_INFLIGHT_DESKTOP = 8;
-  const MAX_INFLIGHT_MOBILE = 6;
+  const PRELOAD_MARGIN_DESKTOP = '2600px 0px 2600px 0px';
+  const PRELOAD_MARGIN_MOBILE = '1500px 0px 1500px 0px';
+
+  const MAX_INFLIGHT_DESKTOP = 4;
+  const MAX_INFLIGHT_MOBILE = 3;
 
   
 // Adaptive performance profile (device/network aware)
@@ -73,23 +63,17 @@ function getPerfProfile() {
   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() {
-    if (isMobile()) return isBoosted() ? PRELOAD_MARGIN_MOBILE_BOOST : PRELOAD_MARGIN_MOBILE;
-    return isBoosted() ? PRELOAD_MARGIN_DESKTOP_BOOST : PRELOAD_MARGIN_DESKTOP;
+    return isMobile() ? PRELOAD_MARGIN_MOBILE : PRELOAD_MARGIN_DESKTOP;
   }
 
   function getMaxInflight() {
     const perf = getPerfProfile();
-    const base = isMobile() ? perf.maxInflightMobile : perf.maxInflightDesktop;
-    return base + (isBoosted() ? 1 : 0);
+    return isMobile() ? perf.maxInflightMobile : perf.maxInflightDesktop;
   }
 
   const SELECTORS = {
@@ -151,6 +135,7 @@ function mutationHasRelevantAddedNodes(mutations) {
 
     // observers / schedulers
     domObs: null,
+    tightenObs: null,
     io: null,
     runQueued: false,
 
@@ -158,11 +143,6 @@ function mutationHasRelevantAddedNodes(mutations) {
     inflight: 0,
     pending: [],
     pendingSet: new Set(),
-
-    // fast scroll boosting
-    scrollBoostUntil: 0,
-    lastScrollY: 0,
-    lastScrollTs: 0,
     ioMargin: null,
 
     // hero)
@@ -313,6 +293,103 @@ 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;
+
+      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) {
@@ -575,155 +652,45 @@ function startShow(id) {
     drainQueue();
   };
 
-  // Safety release even if the ad pipeline stalls
   const hardTimer = setTimeout(release, 6500);
 
-  try {
-    if (isBlocked()) return;
-
-    const ph = document.getElementById(`${PLACEHOLDER_PREFIX}${id}`);
-    if (!ph || !ph.isConnected) return;
-
-    // Guard against rapid duplicate calls for the same id
-    const now2 = Date.now();
-    const last2 = state.lastShowById.get(id) || 0;
-    if (now2 - last2 < 250) return;
-    state.lastShowById.set(id, now2);
-
-    window.ezstandalone = window.ezstandalone || {};
-    const ez = window.ezstandalone;
-
-    const doShow = () => {
-      try {
-        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) {}
-
-      // Tighten any oversized reserved height once the creative is in the DOM.
-      try { scheduleTighten(id); } catch (e) {}
-
-      // Release budget quickly; the creative can keep loading independently.
-      setTimeout(() => { clearTimeout(hardTimer); release(); }, 300);
-    };
-
-    // Use cmd queue if present, but don't delay to next frame.
-    if (Array.isArray(ez.cmd)) {
-      try { ez.cmd.push(doShow); } catch (e) { doShow(); }
-    } else {
-      doShow();
-    }
-  } finally {
-    // If we returned early, hardTimer will release.
-  }
-}
+  requestAnimationFrame(() => {
+    try {
+      if (isBlocked()) return;
 
+      const ph = document.getElementById(`${PLACEHOLDER_PREFIX}${id}`);
+      if (!ph || !ph.isConnected) return;
 
-// ---------- height normalization (reduce empty space) ----------
-// Some Ezoic / GPT wrappers reserve a larger min-height (e.g., 400px) than the rendered creative (e.g., 250px),
-// leaving visible empty space. We “tighten” the reserved min-height to the actual iframe/container height after load.
-const _heightObsByPlaceholder = new Map();
+      const now2 = Date.now();
+      const last2 = state.lastShowById.get(id) || 0;
+      if (now2 - last2 < 900) return;
+      state.lastShowById.set(id, now2);
 
-function tightenEzoicHeightFor(id) {
-  try {
-    const ph = document.getElementById(`${PLACEHOLDER_PREFIX}${id}`);
-    if (!ph || !ph.isConnected) return;
-
-    const ad = ph.querySelector('span.ezoic-ad');
-    if (!ad) return;
-
-    // Prefer the safeframe/container size if present.
-    let h = 0;
-    const container = ad.querySelector('div[id$="__container__"]');
-    if (container) {
-      const r = container.getBoundingClientRect();
-      if (r && r.height) h = Math.max(h, r.height);
-    }
-    const iframe = ad.querySelector('iframe');
-    if (iframe) {
-      const r2 = iframe.getBoundingClientRect();
-      if (r2 && r2.height) h = Math.max(h, r2.height);
-      const attrH = parseInt(iframe.getAttribute('height') || '', 10);
-      if (Number.isFinite(attrH) && attrH > 0) h = Math.max(h, attrH);
-    }
+      window.ezstandalone = window.ezstandalone || {};
+      const ez = window.ezstandalone;
 
-    // Fall back to inner wrapper height.
-    if (!h) {
-      const inner = ad.firstElementChild;
-      if (inner) {
-        const r3 = inner.getBoundingClientRect();
-        if (r3 && r3.height) h = Math.max(h, r3.height);
-      }
-    }
+      const doShow = () => {
+        try {
+          if (state.usedOnce && state.usedOnce.has(id)) {
+            safeDestroyById(id);
+          }
+        } catch (e) {}
 
-    if (!h || h < 10) return;
-    const px = `${Math.ceil(h)}px`;
+        try { ez.showAds(id); } catch (e) {}
+        try { state.usedOnce && state.usedOnce.add(id); } catch (e) {}
 
-    // Override inline min-height with an inline !important value.
-    try { ad.style.setProperty('min-height', px, 'important'); } catch (e) {}
-    // Keep height auto so responsive creatives can expand if needed.
-    try { ad.style.setProperty('height', 'auto', 'important'); } catch (e) {}
-  } catch (e) {}
-}
+        setTimeout(() => { clearTimeout(hardTimer); release(); }, 650);
+      };
 
-function ensureHeightObserver(id) {
-  try {
-    if (_heightObsByPlaceholder.has(id)) return;
-    const ph = document.getElementById(`${PLACEHOLDER_PREFIX}${id}`);
-    if (!ph || !ph.isConnected) return;
-
-    const ro = (typeof ResizeObserver === 'function') ? new ResizeObserver(() => {
-      tightenEzoicHeightFor(id);
-    }) : null;
-
-    // Also watch for Ezoic re-applying an oversized inline min-height (style attribute changes).
-    const mo = (typeof MutationObserver === 'function') ? new MutationObserver(() => {
-      tightenEzoicHeightFor(id);
-    }) : null;
-
-    const attach = () => {
-      const ad = ph.querySelector('span.ezoic-ad[data-ez-name], span.ezoic-ad');
-      if (!ad) return false;
-
-      if (ro) {
-        const container = ad.querySelector && ad.querySelector('div[id$="__container__"]');
-        const iframe = ad.querySelector && ad.querySelector('iframe');
-        try { if (container) ro.observe(container); } catch (e) {}
-        try { if (iframe) ro.observe(iframe); } catch (e) {}
-        try { ro.observe(ad); } catch (e) {}
-      }
-      if (mo) {
-        try { mo.observe(ad, { attributes: true, attributeFilter: ['style', 'class'] }); } catch (e) {}
+      if (Array.isArray(ez.cmd)) {
+        try { ez.cmd.push(doShow); } catch (e) { doShow(); }
+      } else {
+        doShow();
       }
-      return true;
-    };
-
-    // If the ad wrapper is injected slightly later, observe the placeholder briefly for children.
-    if (!attach() && typeof MutationObserver === 'function') {
-      try {
-        const tmp = new MutationObserver(() => {
-          if (attach()) {
-            try { tmp.disconnect(); } catch (e) {}
-            tightenEzoicHeightFor(id);
-          }
-        });
-        tmp.observe(ph, { childList: true, subtree: true });
-        setTimeout(() => { try { tmp.disconnect(); } catch (e) {} }, 3000);
-      } catch (e) {}
+    } finally {
+      // If we returned early, hardTimer will release.
     }
-
-    _heightObsByPlaceholder.set(id, { ro: ro || null, mo: mo || null });
-  } catch (e) {}
-}
-
-function scheduleTighten(id) {
-  // Run a couple of times (creatives may resize after initial load)
-  try { setTimeout(() => tightenEzoicHeightFor(id), 250); } catch (e) {}
-  try { setTimeout(() => tightenEzoicHeightFor(id), 1100); } catch (e) {}
-  try { ensureHeightObserver(id); } catch (e) {}
+  });
 }
 
 
@@ -778,9 +745,7 @@ function scheduleTighten(id) {
     // If already near the fold, arm & fire immediately
     try {
       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 screens = 3.0;
       const h = (window.innerHeight || 800);
       if (r.top < screens * h && r.bottom > -screens * h) {
         armPlaceholder(wrap, id);
@@ -807,7 +772,7 @@ function scheduleTighten(id) {
     const targets = computeTargets(items.length, interval, showFirst);
     let inserted = 0;
     const perf = getPerfProfile();
-    const maxInserts = perf.maxInsertsPerRun + (isBoosted() ? 2 : 0);
+    const maxInserts = perf.maxInsertsPerRun;
 
     for (const afterPos of targets) {
       if (inserted >= maxInserts) break;
@@ -986,15 +951,8 @@ function scheduleTighten(id) {
     // reset perf profile cache
     state.perfProfile = null;
 
-    // disconnect any ResizeObservers used for height tightening
-    try {
-      for (const v of _heightObsByPlaceholder.values()) {
-        try { if (v && v.ro && v.ro.disconnect) v.ro.disconnect(); } catch (e) {}
-        try { if (v && v.mo && v.mo.disconnect) v.mo.disconnect(); } catch (e) {}
-        try { if (v && v.disconnect) v.disconnect(); } catch (e) {} // backward compat
-      }
-      _heightObsByPlaceholder.clear();
-    } catch (e) {}
+    // 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;
@@ -1042,6 +1000,7 @@ function scheduleTighten(id) {
 
       warmUpNetwork();
       patchShowAds();
+      ensureTightenObserver();
       ensurePreloadObserver();
       ensureDomObserver();
 
@@ -1059,51 +1018,16 @@ function scheduleTighten(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();
   ensurePreloadObserver();
   ensureDomObserver();
 
   bindNodeBB();
-  bindScroll();
 
   // First paint: try hero + run
   blockedUntil = 0;

package/public/style.css

@@ -1,26 +1,9 @@
 /* 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 !important;
-  position: relative;
+  display: block;
   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;
 }