nodebb-plugin-ezoic-infinite 1.5.35 → 1.5.37

package/package.json

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

package/public/client.js

@@ -11,18 +11,21 @@
   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.
+  // Slightly more aggressive margins to reduce “I scrolled past it before it loaded”.
+  const PRELOAD_MARGIN_DESKTOP = '4200px 0px 4200px 0px';
+  const PRELOAD_MARGIN_MOBILE = '2400px 0px 2400px 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 = '6500px 0px 6500px 0px';
+  const PRELOAD_MARGIN_MOBILE_BOOST = '4200px 0px 4200px 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)
@@ -599,6 +602,9 @@ function startShow(id) {
         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) {}
+
         setTimeout(() => { clearTimeout(hardTimer); release(); }, 650);
       };
 
@@ -613,6 +619,83 @@ function startShow(id) {
   });
 }
 
+// ---------- 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();
+
+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);
+    }
+
+    // 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);
+      }
+    }
+
+    if (!h || h < 10) return;
+    const px = `${Math.ceil(h)}px`;
+
+    // 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) {}
+}
+
+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;
+
+    if (ro) {
+      const ad = ph.querySelector('span.ezoic-ad');
+      const container = ad && ad.querySelector && ad.querySelector('div[id$="__container__"]');
+      const iframe = ad && ad.querySelector && ad.querySelector('iframe');
+      try { if (container) ro.observe(container); } catch (e) {}
+      try { if (iframe) ro.observe(iframe); } catch (e) {}
+      try { if (ad) ro.observe(ad); } catch (e) {}
+    }
+
+    _heightObsByPlaceholder.set(id, ro || true);
+  } 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) {}
+}
+
 
   // ---------- preload / above-the-fold ----------
 
@@ -665,7 +748,9 @@ function startShow(id) {
     // If already near the fold, arm & fire immediately
     try {
       const r = wrap.getBoundingClientRect();
-      const screens = isBoosted() ? 5.0 : 3.0;
+      // 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);
@@ -871,6 +956,14 @@ function startShow(id) {
     // reset perf profile cache
     state.perfProfile = null;
 
+    // disconnect any ResizeObservers used for height tightening
+    try {
+      for (const v of _heightObsByPlaceholder.values()) {
+        try { v && v.disconnect && v.disconnect(); } catch (e) {}
+      }
+      _heightObsByPlaceholder.clear();
+    } catch (e) {}
+
     // reset state
     state.cfg = null;
     state.allTopics = [];

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;
 }