nodebb-plugin-ezoic-infinite 1.5.36 → 1.5.37

package/package.json

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

package/public/client.js

@@ -12,13 +12,14 @@
 
   // Preload before viewport (earlier load for smoother scroll)
   // 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';
+  // 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 = '5200px 0px 5200px 0px';
-  const PRELOAD_MARGIN_MOBILE_BOOST = '3200px 0px 3200px 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
 
@@ -601,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);
       };
 
@@ -615,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 ----------
 
@@ -875,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 = [];