nodebb-plugin-ezoic-infinite 1.5.36 → 1.5.38

package/package.json

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

package/public/client.js

@@ -8,23 +8,24 @@
   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 = 3;
+  const MAX_INSERTS_PER_RUN = 6;
 
   // 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 = '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 = '5200px 0px 5200px 0px';
-  const PRELOAD_MARGIN_MOBILE_BOOST = '3200px 0px 3200px 0px';
+  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 = 5;
-  const MAX_INFLIGHT_MOBILE = 4;
+  const MAX_INFLIGHT_DESKTOP = 8;
+  const MAX_INFLIGHT_MOBILE = 6;
 
   
 // Adaptive performance profile (device/network aware)
@@ -574,45 +575,155 @@ function startShow(id) {
     drainQueue();
   };
 
+  // Safety release even if the ad pipeline stalls
   const hardTimer = setTimeout(release, 6500);
 
-  requestAnimationFrame(() => {
-    try {
-      if (isBlocked()) return;
+  try {
+    if (isBlocked()) return;
 
-      const ph = document.getElementById(`${PLACEHOLDER_PREFIX}${id}`);
-      if (!ph || !ph.isConnected) return;
+    const ph = document.getElementById(`${PLACEHOLDER_PREFIX}${id}`);
+    if (!ph || !ph.isConnected) return;
 
-      const now2 = Date.now();
-      const last2 = state.lastShowById.get(id) || 0;
-      if (now2 - last2 < 900) return;
-      state.lastShowById.set(id, now2);
+    // 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;
+    window.ezstandalone = window.ezstandalone || {};
+    const ez = window.ezstandalone;
 
-      const doShow = () => {
-        try {
-          if (state.usedOnce && state.usedOnce.has(id)) {
-            safeDestroyById(id);
-          }
-        } catch (e) {}
+    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) {}
 
-        try { ez.showAds(id); } catch (e) {}
-        try { state.usedOnce && state.usedOnce.add(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.
+  }
+}
 
-        setTimeout(() => { clearTimeout(hardTimer); release(); }, 650);
-      };
 
-      if (Array.isArray(ez.cmd)) {
-        try { ez.cmd.push(doShow); } catch (e) { doShow(); }
-      } else {
-        doShow();
+// ---------- 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);
       }
-    } finally {
-      // If we returned early, hardTimer will release.
     }
-  });
+
+    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;
+
+    // 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) {}
+      }
+      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) {}
+    }
+
+    _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) {}
 }
 
 
@@ -696,7 +807,7 @@ function startShow(id) {
     const targets = computeTargets(items.length, interval, showFirst);
     let inserted = 0;
     const perf = getPerfProfile();
-    const maxInserts = perf.maxInsertsPerRun + (isBoosted() ? 1 : 0);
+    const maxInserts = perf.maxInsertsPerRun + (isBoosted() ? 2 : 0);
 
     for (const afterPos of targets) {
       if (inserted >= maxInserts) break;
@@ -875,6 +986,16 @@ 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 { 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) {}
+
     // reset state
     state.cfg = null;
     state.allTopics = [];