nodebb-plugin-ezoic-infinite 1.7.83 → 1.7.84

package/package.json

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

package/public/client.js

@@ -76,6 +76,7 @@
   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 EMPTY_CHECK_MS    = 20_000;  // délai avant collapse d'un wrap vide post-show
   const MIN_PRUNE_AGE_MS  = 8_000;   // délai de grâce avant pruning (stabilisation DOM)
@@ -83,6 +84,8 @@
   const MAX_INFLIGHT      = 4;       // max showAds() simultanés
   const SHOW_THROTTLE_MS  = 900;     // anti-spam showAds() par id
   const BURST_COOLDOWN_MS = 200;     // délai min entre deux déclenchements de burst
+  const MIN_LIVE_AFTER_SHOW_MS = 15_000; // grâce post-show avant drop/recycle
+  const MIN_LIVE_AFTER_FILL_MS = 25_000; // grâce post-fill réel avant drop/recycle
 
   // Marges IO larges et fixes — observer créé une seule fois au boot
   const IO_MARGIN_DESKTOP = '2500px 0px 2500px 0px';
@@ -127,12 +130,13 @@
     pending:      [],    // ids en attente de slot inflight
     pendingSet:   new Set(),
     wrapByKey:    new Map(),  // anchorKey → wrap DOM node
+    emptyChecks:   new Map(),  // id -> timeout ids for empty checks
+    fillObs:       new Map(),  // id -> MutationObserver (late fill uncollapse + responsive fit)
     runQueued:    false,
     burstActive:  false,
     burstDeadline: 0,
     burstCount:   0,
     lastBurstTs:  0,
-    emptyChecks:   new Map(), // id -> timeout ids[]
   };
 
   let blockedUntil = 0;
@@ -145,40 +149,150 @@
 
   function clearEmptyChecks(id) {
     const timers = S.emptyChecks.get(id);
-    if (!timers) return;
-    for (const t of timers) { try { clearTimeout(t); } catch (_) {} }
-    S.emptyChecks.delete(id);
+    if (timers) {
+      for (const t of timers) { try { clearTimeout(t); } catch (_) {} }
+      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 markFilledOnce(ph) {
     try {
       const wrap = ph?.closest?.(`.${WRAP_CLASS}`);
+      if (!wrap) return;
+      if (!wrap.getAttribute(A_FILLED) && isFilled(ph)) {
+        wrap.setAttribute(A_FILLED, String(ts()));
+      }
+    } catch (_) {}
+  }
+
+  function isProtectedFromDrop(wrap) {
+    try {
       if (!wrap) return false;
-      if (!isFilled(ph)) return false;
-      wrap.classList.remove('is-empty');
-      return true;
+      const now = ts();
+      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;
+      return false;
     } catch (_) { return false; }
   }
 
-  function watchPlaceholderFill(ph) {
-    if (!ph || ph.__nbbFillObs) return;
+  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 wCss = parseFloat(cs.width) || 0;
+      const hCss = parseFloat(cs.height) || 0;
+      const w = wAttr || Math.round(wCss);
+      const h = hAttr || Math.round(hCss);
+      if (w > 0 && h > 0) return { w, h };
+    }
+    const gpt = ph.querySelector('[id$="__container__"]');
+    if (gpt) {
+      const cs = window.getComputedStyle(gpt);
+      const w = Math.round(parseFloat(cs.width) || gpt.offsetWidth || 0);
+      const h = Math.round(parseFloat(cs.height) || gpt.offsetHeight || 0);
+      if (w > 0 && h > 0) return { w, h };
+    }
+    const ez = ph.querySelector('.ezoic-ad');
+    if (ez) {
+      const cs = window.getComputedStyle(ez);
+      const w = Math.round(parseFloat(cs.width) || ez.offsetWidth || 0);
+      const h = Math.round(parseFloat(cs.height) || ez.offsetHeight || 0);
+      if (w > 0 && h > 0) return { w, h };
+    }
+    return null;
+  }
+
+  function ensureScaleBox(ph) {
+    let box = ph.querySelector(':scope > .nbb-ez-scale-box');
+    if (box) return box;
+    const kids = Array.from(ph.childNodes).filter(n => {
+      if (n.nodeType === 1) return true;
+      if (n.nodeType === 3) return (n.textContent || '').trim().length > 0;
+      return false;
+    });
+    if (!kids.length) 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 {
-      const obs = new MutationObserver(() => { if (uncollapseIfFilled(ph)) return; });
-      obs.observe(ph, { childList: true, subtree: true, attributes: true });
-      ph.__nbbFillObs = obs;
+      if (!ph?.isConnected) return;
+      const wrap = ph.closest?.(`.${WRAP_CLASS}`);
+      if (!wrap) return;
+      if (!isFilled(ph)) { clearAdScale(ph); return; }
+      const size = getAdIntrinsicSize(ph);
+      if (!size?.w || !size?.h) return;
+      const wrapWidth = Math.max(0, Math.floor(wrap.clientWidth || wrap.getBoundingClientRect().width || 0));
+      if (!wrapWidth) return;
+      if (size.w <= wrapWidth + 2) { clearAdScale(ph); return; }
+      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 (_) {}
-    uncollapseIfFilled(ph);
   }
 
-  function unwatchPlaceholderFill(ph) {
-    try { ph?.__nbbFillObs?.disconnect?.(); } catch (_) {}
-    try { if (ph) delete ph.__nbbFillObs; } catch (_) {}
+  function uncollapseIfFilled(ph) {
+    try {
+      const wrap = ph?.closest?.(`.${WRAP_CLASS}`);
+      if (!wrap) return;
+      if (isFilled(ph)) {
+        wrap.classList.remove('is-empty');
+        markFilledOnce(ph);
+        fitWideAd(ph);
+      }
+    } catch (_) {}
+  }
+
+  function unwatchPlaceholderFill(phOrId) {
+    const id = typeof phOrId === 'number' ? phOrId : parseInt(phOrId?.getAttribute?.('data-ezoic-id'), 10);
+    if (!Number.isFinite(id)) return;
+    const obs = S.fillObs.get(id);
+    if (obs) { try { obs.disconnect(); } catch (_) {} S.fillObs.delete(id); }
+  }
+
+  function watchPlaceholderFill(ph) {
+    const id = parseInt(ph?.getAttribute?.('data-ezoic-id'), 10);
+    if (!ph || !Number.isFinite(id) || S.fillObs.has(id)) { try { if (ph) uncollapseIfFilled(ph); } catch (_) {} return; }
+    const obs = new MutationObserver(() => { uncollapseIfFilled(ph); try { fitWideAd(ph); } catch (_) {} });
+    try { obs.observe(ph, { childList: true, subtree: true, attributes: true }); } catch (_) { return; }
+    S.fillObs.set(id, obs);
+    uncollapseIfFilled(ph);
+    try { fitWideAd(ph); } catch (_) {}
   }
 
   function mutate(fn) {
@@ -361,6 +475,7 @@
 
     document.querySelectorAll(`.${WRAP_CLASS}.${klass}`).forEach(wrap => {
       try {
+        if (isProtectedFromDrop(wrap)) return;
         const rect = wrap.getBoundingClientRect();
         if (rect.bottom > threshold) return;
         if (!isFilled(wrap)) {
@@ -379,15 +494,16 @@
     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 (_) {}
+    try { const ph = best.querySelector(`#${PH_PREFIX}${id}`); if (ph) { S.io?.unobserve(ph); clearAdScale(ph); unwatchPlaceholderFill(ph); } } catch (_) {}
     clearEmptyChecks(id);
     mutate(() => {
       best.setAttribute(A_ANCHOR,  newKey);
       best.setAttribute(A_CREATED, String(ts()));
       best.setAttribute(A_SHOWN,   '0');
+      best.setAttribute(A_FILLED,  '0');
       best.classList.remove('is-empty');
       const ph = best.querySelector(`#${PH_PREFIX}${id}`);
-      if (ph) { ph.innerHTML = ''; watchPlaceholderFill(ph); }
+      if (ph) { ph.innerHTML = ''; ph.style.removeProperty('height'); }
       targetEl.insertAdjacentElement('afterend', best);
     });
     if (oldKey && S.wrapByKey.get(oldKey) === best) S.wrapByKey.delete(oldKey);
@@ -399,6 +515,7 @@
     const doDisplay = () => { try { ez.displayMore([id]);         } catch (_) {} };
     try { (typeof ez.cmd?.push === 'function') ? ez.cmd.push(doDestroy) : doDestroy(); } catch (_) {}
 
+    try { const ph = best.querySelector(`#${PH_PREFIX}${id}`); if (ph) { observePh(id); watchPlaceholderFill(ph); } } catch (_) {}
     return { id, wrap: best };
   }
 
@@ -411,6 +528,7 @@
     w.setAttribute(A_WRAPID,  String(id));
     w.setAttribute(A_CREATED, String(ts()));
     w.setAttribute(A_SHOWN,   '0');
+    w.setAttribute(A_FILLED,  '0');
     w.style.cssText = 'width:100%;display:block;';
     const ph = document.createElement('div');
     ph.id = `${PH_PREFIX}${id}`;
@@ -428,14 +546,15 @@
     mutate(() => el.insertAdjacentElement('afterend', w));
     S.mountedIds.add(id);
     S.wrapByKey.set(key, w);
-    try { watchPlaceholderFill(w.querySelector(`#${PH_PREFIX}${id}`)); } catch (_) {}
+    try { const ph = w.querySelector(`#${PH_PREFIX}${id}`); if (ph) watchPlaceholderFill(ph); } catch (_) {}
     return w;
   }
 
   function dropWrap(w) {
     try {
+      if (isProtectedFromDrop(w)) return;
       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); clearAdScale(ph); unwatchPlaceholderFill(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);
@@ -544,9 +663,10 @@
 
   function observePh(id) {
     const ph = document.getElementById(`${PH_PREFIX}${id}`);
-    if (!ph?.isConnected) return;
-    watchPlaceholderFill(ph);
-    try { getIO()?.observe(ph); } catch (_) {}
+    if (ph?.isConnected) {
+      try { getIO()?.observe(ph); } catch (_) {}
+      try { watchPlaceholderFill(ph); } catch (_) {}
+    }
   }
 
   function enqueueShow(id) {
@@ -584,21 +704,29 @@
       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?.isConnected) fitWideAd(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?.setAttribute(A_FILLED, '0');
+          wrap?.classList.remove('is-empty');
+          if (wrap) wrap.style.removeProperty('height');
+          ph.style.removeProperty('height');
+        } catch (_) {}
+        clearEmptyChecks(id);
 
         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 +736,25 @@
 
   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;
-        wrap.classList.add('is-empty');
+        if ((parseInt(wrap.getAttribute(A_FILLED) || '0', 10) || 0) > 0) {
+          wrap.classList.remove('is-empty');
+          if (isFilled(ph)) fitWideAd(ph);
+          return;
+        }
+        wrap.classList.toggle('is-empty', !isFilled(ph));
+        if (isFilled(ph)) fitWideAd(ph);
       } catch (_) {}
     };
-    for (const d of delays) queueEmptyCheck(id, setTimeout(runCheck, d));
+    [EMPTY_CHECK_MS, EMPTY_CHECK_MS + 5000, EMPTY_CHECK_MS + 15000].forEach(delay => {
+      const t = setTimeout(runCheck, delay);
+      queueEmptyCheck(id, t);
+    });
   }
 
   // ── Patch Ezoic showAds ────────────────────────────────────────────────────
@@ -734,6 +869,17 @@
     step();
   }
 
+  let fitRaf = 0;
+  function scheduleRefitAll() {
+    if (fitRaf) return;
+    fitRaf = requestAnimationFrame(() => {
+      fitRaf = 0;
+      document.querySelectorAll(`[id^="${PH_PREFIX}"]`).forEach(ph => {
+        try { fitWideAd(ph); } catch (_) {}
+      });
+    });
+  }
+
   // ── Cleanup navigation ─────────────────────────────────────────────────────
 
   function cleanup() {
@@ -746,13 +892,16 @@
     S.mountedIds.clear();
     S.lastShow.clear();
     S.wrapByKey.clear();
+    for (const [, timers] of S.emptyChecks) { for (const t of timers) { try { clearTimeout(t); } catch (_) {} } }
+    S.emptyChecks.clear();
+    for (const [, obs] of S.fillObs) { try { obs.disconnect(); } catch (_) {} }
+    S.fillObs.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;
+    if (fitRaf) { try { cancelAnimationFrame(fitRaf); } catch (_) {} fitRaf = 0; }
   }
 
   // ── MutationObserver ───────────────────────────────────────────────────────
@@ -890,6 +1039,7 @@
   ensureDomObserver();
   bindNodeBB();
   bindScroll();
+  window.addEventListener('resize', scheduleRefitAll, { passive: true });
   blockedUntil = 0;
   requestBurst();
 

package/public/style.css

@@ -78,10 +78,56 @@
 }
 
 
-/* Filet de sécurité : si Ezoic a rempli le wrap, annuler le collapse même si .is-empty est resté */
+/* Si le wrap contient une pub, ne jamais le laisser en mode vide */
 .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;
 }
+
+/* ── Responsive hardening Ezoic ─────────────────────────────────────────── */
+.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 {
+  display: block !important;
+  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;
+}
+
+@supports not (overflow: clip) {
+  .nodebb-ezoic-wrap { overflow-x: hidden; }
+}