nodebb-plugin-ezoic-infinite 1.7.83 → 1.7.85

package/package.json

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

package/public/client.js

@@ -76,8 +76,17 @@
   const A_WRAPID    = 'data-ezoic-wrapid';   // id Ezoic
   const A_CREATED   = 'data-ezoic-created';  // timestamp création ms
   const A_SHOWN     = 'data-ezoic-shown';    // timestamp dernier showAds ms
+  const A_FILLED    = 'data-ezoic-filled';   // timestamp premier fill réel ms
+  const A_LAST_W    = 'data-ezoic-lastw';    // dernière largeur pub connue
+  const A_LAST_H    = 'data-ezoic-lasth';    // dernière hauteur pub connue
 
   const EMPTY_CHECK_MS    = 20_000;  // délai avant collapse d'un wrap vide post-show
+  const EMPTY_RECHECK_2_MS = EMPTY_CHECK_MS + 5_000;
+  const EMPTY_RECHECK_3_MS = EMPTY_CHECK_MS + 15_000;
+  const MIN_LIVE_AFTER_SHOW_MS = 15_000;
+  const MIN_LIVE_AFTER_FILL_MS = 25_000;
+  const KEEP_SHELL_AFTER_UNUSED_MS = 90_000;
+  const MIN_SHELL_HEIGHT = 120;
   const MIN_PRUNE_AGE_MS  = 8_000;   // délai de grâce avant pruning (stabilisation DOM)
   const MAX_INSERTS_RUN   = 6;       // max insertions par appel runCore
   const MAX_INFLIGHT      = 4;       // max showAds() simultanés
@@ -127,12 +136,12 @@
     pending:      [],    // ids en attente de slot inflight
     pendingSet:   new Set(),
     wrapByKey:    new Map(),  // anchorKey → wrap DOM node
+    emptyChecks:  new Map(),  // id -> timeout ids
     runQueued:    false,
     burstActive:  false,
     burstDeadline: 0,
     burstCount:   0,
     lastBurstTs:  0,
-    emptyChecks:   new Map(), // id -> timeout ids[]
   };
 
   let blockedUntil = 0;
@@ -143,47 +152,185 @@
   const normBool  = v  => v === true || v === 'true' || v === 1 || v === '1' || v === 'on';
   const isFilled  = n  => !!(n?.querySelector?.('iframe, ins, img, video, [data-google-container-id]'));
 
+  function mutate(fn) {
+    S.mutGuard++;
+    try { fn(); } finally { S.mutGuard--; }
+  }
+
   function clearEmptyChecks(id) {
     const timers = S.emptyChecks.get(id);
     if (!timers) return;
-    for (const t of timers) { try { clearTimeout(t); } catch (_) {} }
+    for (const t of timers) clearTimeout(t);
     S.emptyChecks.delete(id);
   }
 
   function queueEmptyCheck(id, timerId) {
-    const arr = S.emptyChecks.get(id) || [];
-    arr.push(timerId);
-    S.emptyChecks.set(id, arr);
+    if (!S.emptyChecks.has(id)) S.emptyChecks.set(id, []);
+    S.emptyChecks.get(id).push(timerId);
   }
 
-  function uncollapseIfFilled(ph) {
+  function hasEverFilled(wrap) { return !!wrap?.getAttribute?.(A_FILLED); }
+  function getFilledTs(wrap) { return parseInt(wrap?.getAttribute?.(A_FILLED) || '0', 10) || 0; }
+  function shouldKeepShellAfterUnused(wrap) {
+    const t = getFilledTs(wrap);
+    return !!t && (Date.now() - t) < KEEP_SHELL_AFTER_UNUSED_MS;
+  }
+  function markFilledOnce(ph) {
     try {
       const wrap = ph?.closest?.(`.${WRAP_CLASS}`);
-      if (!wrap) return false;
-      if (!isFilled(ph)) return false;
+      if (!wrap) return;
+      if (!wrap.getAttribute(A_FILLED) && isFilled(ph)) wrap.setAttribute(A_FILLED, String(Date.now()));
+    } catch (_) {}
+  }
+  function rememberAdSize(ph, w, h) {
+    try {
+      const wrap = ph?.closest?.(`.${WRAP_CLASS}`);
+      if (!wrap) return;
+      const ww = Math.round(w || 0), hh = Math.round(h || 0);
+      if (ww > 0) wrap.setAttribute(A_LAST_W, String(ww));
+      if (hh > 0) wrap.setAttribute(A_LAST_H, String(hh));
+    } catch (_) {}
+  }
+  function getAdIntrinsicSize(ph) {
+    if (!ph) return null;
+    const iframe = ph.querySelector('iframe');
+    if (iframe) {
+      const wAttr = parseInt(iframe.getAttribute('width') || iframe.getAttribute('ezaw') || '0', 10);
+      const hAttr = parseInt(iframe.getAttribute('height') || iframe.getAttribute('ezah') || '0', 10);
+      const cs = window.getComputedStyle(iframe);
+      const w = wAttr || Math.round(parseFloat(cs.width) || iframe.offsetWidth || 0);
+      const h = hAttr || Math.round(parseFloat(cs.height) || iframe.offsetHeight || 0);
+      if (w > 0 && h > 0) return { w, h };
+    }
+    const c = ph.querySelector('[id$="__container__"]') || ph.querySelector('.ezoic-ad');
+    if (c) {
+      const cs = window.getComputedStyle(c);
+      const w = Math.round(parseFloat(cs.width) || c.offsetWidth || 0);
+      const h = Math.round(parseFloat(cs.height) || c.offsetHeight || 0);
+      if (w > 0 && h > 0) return { w, h };
+    }
+    return null;
+  }
+  function rememberCurrentAdSize(ph) {
+    try {
+      const size = getAdIntrinsicSize(ph);
+      if (size?.w > 0 && size?.h > 0) return rememberAdSize(ph, size.w, size.h);
+      const r = ph.getBoundingClientRect?.();
+      if (r && (r.width > 0 || r.height > 0)) rememberAdSize(ph, r.width, r.height);
+    } catch (_) {}
+  }
+  function ensureScaleBox(ph) {
+    let box = ph.querySelector(':scope > .nbb-ez-scale-box');
+    if (box) return box;
+    let hasChild = false;
+    for (const n of Array.from(ph.childNodes)) {
+      if (n.nodeType === 1) { hasChild = true; break; }
+      if (n.nodeType === 3 && (n.textContent || '').trim()) { hasChild = true; break; }
+    }
+    if (!hasChild) return null;
+    box = document.createElement('div');
+    box.className = 'nbb-ez-scale-box';
+    while (ph.firstChild) box.appendChild(ph.firstChild);
+    ph.appendChild(box);
+    return box;
+  }
+  function clearAdScale(ph) {
+    const wrap = ph?.closest?.(`.${WRAP_CLASS}`);
+    if (!wrap) return;
+    wrap.classList.remove('is-scaled');
+    wrap.style.removeProperty('height');
+    const box = ph.querySelector(':scope > .nbb-ez-scale-box');
+    if (box) {
+      box.style.removeProperty('transform');
+      box.style.removeProperty('width');
+      box.style.removeProperty('height');
+    }
+    ph.style.removeProperty('height');
+  }
+  function fitWideAd(ph) {
+    try {
+      if (!ph?.isConnected) return;
+      const wrap = ph.closest?.(`.${WRAP_CLASS}`);
+      if (!wrap) return;
+      if (!isFilled(ph)) return clearAdScale(ph);
+      const size = getAdIntrinsicSize(ph);
+      if (!size?.w || !size?.h) return;
+      rememberAdSize(ph, size.w, size.h);
+      const wrapWidth = Math.max(0, Math.floor(wrap.clientWidth || wrap.getBoundingClientRect().width || 0));
+      if (!wrapWidth) return;
+      if (size.w <= wrapWidth + 2) return clearAdScale(ph);
+      const scale = Math.max(0.1, Math.min(1, wrapWidth / size.w));
+      const scaledH = Math.ceil(size.h * scale);
+      const box = ensureScaleBox(ph);
+      if (!box) return;
+      wrap.classList.add('is-scaled');
+      box.style.width = `${size.w}px`;
+      box.style.height = `${size.h}px`;
+      box.style.transform = `scale(${scale})`;
+      ph.style.height = `${scaledH}px`;
+      wrap.style.height = `${scaledH}px`;
+    } catch (_) {}
+  }
+  function applyUnusedShell(wrap, ph) {
+    try {
+      if (!wrap) return;
+      const lastH = parseInt(wrap.getAttribute(A_LAST_H) || '0', 10) || 0;
+      const h = Math.max(MIN_SHELL_HEIGHT, lastH || 0);
       wrap.classList.remove('is-empty');
-      return true;
-    } catch (_) { return false; }
+      wrap.classList.add('is-unused-shell');
+      wrap.style.minHeight = `${h}px`;
+      if (ph) ph.style.minHeight = `${h}px`;
+    } catch (_) {}
   }
-
-  function watchPlaceholderFill(ph) {
-    if (!ph || ph.__nbbFillObs) return;
+  function clearUnusedShell(wrap, ph) {
     try {
-      const obs = new MutationObserver(() => { if (uncollapseIfFilled(ph)) return; });
-      obs.observe(ph, { childList: true, subtree: true, attributes: true });
-      ph.__nbbFillObs = obs;
+      wrap?.classList?.remove('is-unused-shell');
+      wrap?.style?.removeProperty('min-height');
+      ph?.style?.removeProperty('min-height');
     } catch (_) {}
+  }
+  function isProtectedFromDrop(wrap) {
+    try {
+      const now = Date.now();
+      const shownTs = parseInt(wrap?.getAttribute?.(A_SHOWN) || '0', 10) || 0;
+      const filledTs = parseInt(wrap?.getAttribute?.(A_FILLED) || '0', 10) || 0;
+      if (shownTs && (now - shownTs) < MIN_LIVE_AFTER_SHOW_MS) return true;
+      if (filledTs && (now - filledTs) < MIN_LIVE_AFTER_FILL_MS) return true;
+      if (shouldKeepShellAfterUnused(wrap)) return true;
+    } catch (_) {}
+    return false;
+  }
+  function uncollapseIfFilled(ph) {
+    try {
+      const wrap = ph?.closest?.(`.${WRAP_CLASS}`);
+      if (!wrap) return;
+      if (isFilled(ph)) {
+        wrap.classList.remove('is-empty');
+        clearUnusedShell(wrap, ph);
+        markFilledOnce(ph);
+        rememberCurrentAdSize(ph);
+        fitWideAd(ph);
+      }
+    } catch (_) {}
+  }
+  function watchPlaceholderFill(ph) {
+    if (!ph || ph.__nbbEzFillObs) return;
+    const obs = new MutationObserver(() => { uncollapseIfFilled(ph); });
+    try { obs.observe(ph, { childList: true, subtree: true, attributes: true }); } catch (_) { return; }
+    ph.__nbbEzFillObs = obs;
     uncollapseIfFilled(ph);
   }
-
   function unwatchPlaceholderFill(ph) {
-    try { ph?.__nbbFillObs?.disconnect?.(); } catch (_) {}
-    try { if (ph) delete ph.__nbbFillObs; } catch (_) {}
+    try { ph?.__nbbEzFillObs?.disconnect?.(); } catch (_) {}
+    try { delete ph.__nbbEzFillObs; } catch (_) {}
   }
-
-  function mutate(fn) {
-    S.mutGuard++;
-    try { fn(); } finally { S.mutGuard--; }
+  let fitRaf = 0;
+  function scheduleRefitAll() {
+    if (fitRaf) return;
+    fitRaf = requestAnimationFrame(() => {
+      fitRaf = 0;
+      document.querySelectorAll(`[id^="${PH_PREFIX}"]`).forEach(ph => { try { fitWideAd(ph); } catch (_) {} });
+    });
   }
 
   // ── Config ─────────────────────────────────────────────────────────────────
@@ -373,25 +520,27 @@
 
     const best = bestEmpty ?? bestFilled;
     if (!best) return null;
+    if (isProtectedFromDrop(best)) return null;
     const id = parseInt(best.getAttribute(A_WRAPID), 10);
     if (!Number.isFinite(id)) return null;
 
     const oldKey = best.getAttribute(A_ANCHOR);
     // Neutraliser l'IO sur ce wrap avant déplacement — évite un showAds
     // parasite si le nœud était encore dans la zone IO_MARGIN.
-    try { const ph = best.querySelector(`#${PH_PREFIX}${id}`); if (ph) S.io?.unobserve(ph); } catch (_) {}
-    clearEmptyChecks(id);
+    try { const ph = best.querySelector(`#${PH_PREFIX}${id}`); if (ph) { S.io?.unobserve(ph); unwatchPlaceholderFill(ph); clearAdScale(ph); clearUnusedShell(best, ph); } } catch (_) {}
     mutate(() => {
       best.setAttribute(A_ANCHOR,  newKey);
       best.setAttribute(A_CREATED, String(ts()));
       best.setAttribute(A_SHOWN,   '0');
-      best.classList.remove('is-empty');
+      best.classList.remove('is-empty', 'is-unused-shell');
       const ph = best.querySelector(`#${PH_PREFIX}${id}`);
-      if (ph) { ph.innerHTML = ''; watchPlaceholderFill(ph); }
+      if (ph) { ph.innerHTML = ''; ph.style.removeProperty('min-height'); ph.style.removeProperty('height'); }
+      best.removeAttribute(A_FILLED); best.removeAttribute(A_LAST_W); best.removeAttribute(A_LAST_H);
       targetEl.insertAdjacentElement('afterend', best);
     });
     if (oldKey && S.wrapByKey.get(oldKey) === best) S.wrapByKey.delete(oldKey);
     S.wrapByKey.set(newKey, best);
+    try { const ph2 = best.querySelector(`#${PH_PREFIX}${id}`); if (ph2) watchPlaceholderFill(ph2); } catch (_) {}
 
     // Délais requis : destroyPlaceholders est asynchrone en interne
     const doDestroy = () => { try { ez.destroyPlaceholders([id]); } catch (_) {} setTimeout(doDefine,  300); };
@@ -428,20 +577,26 @@
     mutate(() => el.insertAdjacentElement('afterend', w));
     S.mountedIds.add(id);
     S.wrapByKey.set(key, w);
-    try { watchPlaceholderFill(w.querySelector(`#${PH_PREFIX}${id}`)); } catch (_) {}
     return w;
   }
 
   function dropWrap(w) {
     try {
+      if (isProtectedFromDrop(w)) {
+        const keepPh = w.querySelector(`[id^="${PH_PREFIX}"]`);
+        if (shouldKeepShellAfterUnused(w)) applyUnusedShell(w, keepPh);
+        return false;
+      }
       const ph = w.querySelector(`[id^="${PH_PREFIX}"]`);
-      if (ph instanceof Element) { S.io?.unobserve(ph); unwatchPlaceholderFill(ph); }
+      if (ph instanceof Element) { S.io?.unobserve(ph); unwatchPlaceholderFill(ph); clearAdScale(ph); clearUnusedShell(w, ph); }
       const id = parseInt(w.getAttribute(A_WRAPID), 10);
       if (Number.isFinite(id)) { S.mountedIds.delete(id); clearEmptyChecks(id); }
       const key = w.getAttribute(A_ANCHOR);
       if (key && S.wrapByKey.get(key) === w) S.wrapByKey.delete(key);
       w.remove();
+      return true;
     } catch (_) {}
+    return false;
   }
 
   // ── Prune (topics de catégorie uniquement) ────────────────────────────────
@@ -545,7 +700,7 @@
   function observePh(id) {
     const ph = document.getElementById(`${PH_PREFIX}${id}`);
     if (!ph?.isConnected) return;
-    watchPlaceholderFill(ph);
+    try { watchPlaceholderFill(ph); } catch (_) {}
     try { getIO()?.observe(ph); } catch (_) {}
   }
 
@@ -584,21 +739,27 @@
       try {
         if (isBlocked()) { clearTimeout(timer); return release(); }
         const ph = document.getElementById(`${PH_PREFIX}${id}`);
-        if (!ph?.isConnected || isFilled(ph)) { clearTimeout(timer); return release(); }
-        clearEmptyChecks(id);
-        try { ph.closest?.(`.${WRAP_CLASS}`)?.classList.remove('is-empty'); } catch (_) {}
+        if (!ph?.isConnected || isFilled(ph)) { try { if (ph) uncollapseIfFilled(ph); } catch (_) {} clearTimeout(timer); return release(); }
 
         const t = ts();
         if (t - (S.lastShow.get(id) ?? 0) < SHOW_THROTTLE_MS) { clearTimeout(timer); return release(); }
         S.lastShow.set(id, t);
 
-        try { ph.closest?.(`.${WRAP_CLASS}`)?.setAttribute(A_SHOWN, String(t)); } catch (_) {}
+        try {
+          const wrap = ph.closest?.(`.${WRAP_CLASS}`);
+          wrap?.setAttribute(A_SHOWN, String(t));
+          wrap?.classList?.remove('is-empty');
+          clearUnusedShell(wrap, ph);
+          clearEmptyChecks(id);
+        } catch (_) {}
 
         window.ezstandalone = window.ezstandalone || {};
         const ez = window.ezstandalone;
         const doShow = () => {
           try { ez.showAds(id); } catch (_) {}
           scheduleEmptyCheck(id, t);
+          setTimeout(() => { try { const p = document.getElementById(`${PH_PREFIX}${id}`); if (p) fitWideAd(p); } catch (_) {} }, 500);
+          setTimeout(() => { try { const p = document.getElementById(`${PH_PREFIX}${id}`); if (p) fitWideAd(p); } catch (_) {} }, 2500);
           setTimeout(() => { clearTimeout(timer); release(); }, 700);
         };
         Array.isArray(ez.cmd) ? ez.cmd.push(doShow) : doShow();
@@ -608,18 +769,37 @@
 
   function scheduleEmptyCheck(id, showTs) {
     clearEmptyChecks(id);
-    const delays = [EMPTY_CHECK_MS, EMPTY_CHECK_MS + 5000, EMPTY_CHECK_MS + 15000];
+
     const runCheck = () => {
       try {
         const ph   = document.getElementById(`${PH_PREFIX}${id}`);
         const wrap = ph?.closest?.(`.${WRAP_CLASS}`);
         if (!wrap || !ph?.isConnected) return;
         if (parseInt(wrap.getAttribute(A_SHOWN) || '0', 10) > showTs) return;
-        if (uncollapseIfFilled(ph)) return;
+
+        if (isFilled(ph)) {
+          wrap.classList.remove('is-empty');
+          clearUnusedShell(wrap, ph);
+          markFilledOnce(ph);
+          rememberCurrentAdSize(ph);
+          fitWideAd(ph);
+          return;
+        }
+
+        if (hasEverFilled(wrap) || shouldKeepShellAfterUnused(wrap)) {
+          applyUnusedShell(wrap, ph);
+          return;
+        }
+
+        clearUnusedShell(wrap, ph);
+        clearAdScale(ph);
         wrap.classList.add('is-empty');
       } catch (_) {}
     };
-    for (const d of delays) queueEmptyCheck(id, setTimeout(runCheck, d));
+
+    queueEmptyCheck(id, setTimeout(runCheck, EMPTY_CHECK_MS));
+    queueEmptyCheck(id, setTimeout(runCheck, EMPTY_RECHECK_2_MS));
+    queueEmptyCheck(id, setTimeout(runCheck, EMPTY_RECHECK_3_MS));
   }
 
   // ── Patch Ezoic showAds ────────────────────────────────────────────────────
@@ -746,11 +926,11 @@
     S.mountedIds.clear();
     S.lastShow.clear();
     S.wrapByKey.clear();
+    for (const timers of S.emptyChecks.values()) for (const t of timers) clearTimeout(t);
+    S.emptyChecks.clear();
     S.inflight     = 0;
     S.pending      = [];
     S.pendingSet.clear();
-    for (const timers of S.emptyChecks.values()) for (const t of timers) { try { clearTimeout(t); } catch (_) {} }
-    S.emptyChecks.clear();
     S.burstActive  = false;
     S.runQueued    = false;
   }
@@ -879,6 +1059,10 @@
     }, { passive: true });
   }
 
+  function bindResize() {
+    window.addEventListener('resize', scheduleRefitAll, { passive: true });
+  }
+
   // ── Boot ───────────────────────────────────────────────────────────────────
 
   S.pageKey = pageKey();
@@ -890,6 +1074,7 @@
   ensureDomObserver();
   bindNodeBB();
   bindScroll();
+  bindResize();
   blockedUntil = 0;
   requestBurst();
 

package/public/style.css

@@ -77,11 +77,59 @@
   padding: 0 !important;
 }
 
-
-/* Filet de sécurité : si Ezoic a rempli le wrap, annuler le collapse même si .is-empty est resté */
+/* ── Hardening async fill + responsive creatives ───────────────────────── */
 .nodebb-ezoic-wrap.is-empty:has(iframe, ins, img, video, [data-google-container-id]) {
   height: auto !important;
   min-height: 1px !important;
   max-height: none !important;
   overflow: visible !important;
 }
+
+.nodebb-ezoic-wrap {
+  max-width: 100%;
+  overflow-x: clip;
+  overflow-y: visible;
+}
+
+.nodebb-ezoic-wrap > [id^="ezoic-pub-ad-placeholder-"] {
+  max-width: 100%;
+}
+
+.nodebb-ezoic-wrap .ezoic-ad,
+.nodebb-ezoic-wrap span.ezoic-ad {
+  max-width: 100% !important;
+  min-width: 0 !important;
+  box-sizing: border-box !important;
+}
+
+.nodebb-ezoic-wrap [id^="google_ads_iframe_"][id$="__container__"],
+.nodebb-ezoic-wrap div[id$="__container__"] {
+  max-width: 100% !important;
+  margin-left: auto !important;
+  margin-right: auto !important;
+  overflow: visible !important;
+}
+
+.nodebb-ezoic-wrap iframe {
+  margin-left: auto !important;
+  margin-right: auto !important;
+  max-width: none !important;
+}
+
+.nodebb-ezoic-wrap.is-scaled {
+  overflow: hidden !important;
+}
+
+.nodebb-ezoic-wrap .nbb-ez-scale-box {
+  transform-origin: top center;
+  will-change: transform;
+}
+
+.nodebb-ezoic-wrap.is-unused-shell {
+  overflow: hidden !important;
+}
+
+.nodebb-ezoic-wrap.is-unused-shell > [id^="ezoic-pub-ad-placeholder-"] {
+  display: block;
+  width: 100%;
+}