@folklore/ads 0.0.76 → 0.0.78

package/dist/cjs.js

@@ -276,7 +276,7 @@ class AdSlot extends EventEmitter__default["default"] {
 }
 
 /* globals refreshDisabledLineItems: [] */
-const debug = createDebug__default["default"]('folklore:ads');
+const debug$1 = createDebug__default["default"]('folklore:ads');
 class AdsManager extends EventEmitter__default["default"] {
   // static index = 0;
 
@@ -384,7 +384,7 @@ class AdsManager extends EventEmitter__default["default"] {
     if (this.disabled) {
       return;
     }
-    debug('Initializing GPT...');
+    debug$1('Initializing GPT...');
     const {
       disabled,
       personnalizedAdsDisabled
@@ -398,19 +398,19 @@ class AdsManager extends EventEmitter__default["default"] {
       fetchMarginPercent = 300
     } = this.options;
     if (disabled) {
-      debug('Disable initial load');
+      debug$1('Disable initial load');
       googletag.pubads().disableInitialLoad();
     }
     if (!disableSingleRequest) {
-      debug('Enable single request');
+      debug$1('Enable single request');
       googletag.pubads().enableSingleRequest();
     }
     if (personnalizedAdsDisabled) {
-      debug('Disable personalized ads');
+      debug$1('Disable personalized ads');
       googletag.pubads().setRequestNonPersonalizedAds(1);
     }
     if (!disableLazyLoad) {
-      debug('Enable lazy loading %o', {
+      debug$1('Enable lazy loading %o', {
         fetchMarginPercent,
         renderMarginPercent,
         mobileScaling
@@ -422,13 +422,13 @@ class AdsManager extends EventEmitter__default["default"] {
       });
     }
     if (!disableVideoAds) {
-      debug('Enable video ads');
+      debug$1('Enable video ads');
       googletag.pubads().enableVideoAds();
     }
     googletag.pubads().addEventListener('slotRenderEnded', this.onSlotRenderEnded);
     googletag.pubads().addEventListener('impressionViewable', this.onSlotImpressionViewable);
     googletag.enableServices();
-    debug('GPT is ready');
+    debug$1('GPT is ready');
     this.enabled = true;
     this.ready = true;
     this.emit('ready');
@@ -448,9 +448,9 @@ class AdsManager extends EventEmitter__default["default"] {
       renderSlot.setRefreshDisabled();
     }
     if (event.isEmpty) {
-      debug('Render ended for slot #%s(%s). Slot is empty.', eventSlot.getSlotElementId(), eventSlot.getAdUnitPath());
+      debug$1('Render ended for slot #%s(%s). Slot is empty.', eventSlot.getSlotElementId(), eventSlot.getAdUnitPath());
     } else {
-      debug('Render ended for slot #%s(%s) with size %s.', eventSlot.getSlotElementId(), eventSlot.getAdUnitPath(), size !== null ? size.join('x') : '-');
+      debug$1('Render ended for slot #%s(%s) with size %s.', eventSlot.getSlotElementId(), eventSlot.getAdUnitPath(), size !== null ? size.join('x') : '-');
     }
   }
   onSlotImpressionViewable(event) {
@@ -461,12 +461,12 @@ class AdsManager extends EventEmitter__default["default"] {
     if (impressionSlot !== null) {
       impressionSlot.setViewable(true);
     }
-    debug('Impression viewable for slot #%s(%s).', eventSlot.getSlotElementId(), eventSlot.getAdUnitPath());
+    debug$1('Impression viewable for slot #%s(%s).', eventSlot.getSlotElementId(), eventSlot.getAdUnitPath());
   }
 
   // eslint-disable-next-line class-methods-use-this
   onSlotVisibleChange(visible, slot) {
-    debug('Slot #%s(%s) visibility change to %s', slot.getElementId(), slot.getAdPath(), visible ? 'visible' : 'not visible');
+    debug$1('Slot #%s(%s) visibility change to %s', slot.getElementId(), slot.getAdPath(), visible ? 'visible' : 'not visible');
   }
   isReady() {
     return this.ready && this.enabled && !this.disabled;
@@ -504,7 +504,7 @@ class AdsManager extends EventEmitter__default["default"] {
       id: providedId = null
     } = opts;
     const id = providedId || this.createAdId();
-    debug('Creating slot #%s(%s)...', id, path);
+    debug$1('Creating slot #%s(%s)...', id, path);
     const slot = new AdSlot(id, path, size, {
       ...opts
     });
@@ -523,7 +523,7 @@ class AdsManager extends EventEmitter__default["default"] {
       const id = slot.getElementId();
       const path = slot.getAdPath();
       const size = slot.getAdSize();
-      debug('Defining slot #%s(%s)...', id, path);
+      debug$1('Defining slot #%s(%s)...', id, path);
       const adSlot = googletag.defineSlot(path, size, id).addService(googletag.pubads());
       slot.setAdSlot(adSlot);
     });
@@ -532,7 +532,7 @@ class AdsManager extends EventEmitter__default["default"] {
     const slotsToDisplay = this.slots.filter(slot => slot.canBeDisplayed());
     const slotsCount = slotsToDisplay.length;
     if (slotsCount > 0) {
-      debug('Displaying %i slot(s)...', slotsCount);
+      debug$1('Displaying %i slot(s)...', slotsCount);
       slotsToDisplay.forEach(slot => this.callDisplaySlot(slot));
     }
     return true;
@@ -552,7 +552,7 @@ class AdsManager extends EventEmitter__default["default"] {
     googletag.cmd.push(() => {
       const id = slot.getElementId();
       const path = slot.getAdPath();
-      debug('Displaying slot #%s(%s)...', id, path);
+      debug$1('Displaying slot #%s(%s)...', id, path);
       googletag.display(slot.getAdSlot());
       if (googletag.pubads().isInitialLoadDisabled()) {
         googletag.pubads().refresh([slot.getAdSlot()]);
@@ -574,7 +574,7 @@ class AdsManager extends EventEmitter__default["default"] {
     slot.destroy();
     this.slots = this.slots.filter(it => it !== slot);
     if (adSlot !== null) {
-      debug('Destroying slot #%s(%s)...', adSlot.getAdUnitPath(), adSlot.getSlotElementId());
+      debug$1('Destroying slot #%s(%s)...', adSlot.getAdUnitPath(), adSlot.getSlotElementId());
       googletag.cmd.push(() => {
         googletag.destroySlots([adSlot]);
       });
@@ -591,7 +591,7 @@ class AdsManager extends EventEmitter__default["default"] {
     }
     const adSlot = slot.getAdSlot();
     if (adSlot !== null) {
-      debug('Refreshing slot #%s(%s)...', adSlot.getAdUnitPath(), slot.getElementId());
+      debug$1('Refreshing slot #%s(%s)...', adSlot.getAdUnitPath(), slot.getElementId());
       googletag.cmd.push(() => {
         googletag.pubads().refresh([adSlot], {
           changeCorrelator: false
@@ -607,7 +607,7 @@ class AdsManager extends EventEmitter__default["default"] {
     if (slots.length === 0) {
       return;
     }
-    debug('Refreshing slots %o...', slots.map(slot => `#${slot.getElementId()}(${slot.getAdUnitPath()})`));
+    debug$1('Refreshing slots %o...', slots.map(slot => `#${slot.getElementId()}(${slot.getAdUnitPath()})`));
     googletag.cmd.push(() => {
       googletag.pubads().refresh(slots);
     });
@@ -616,7 +616,7 @@ class AdsManager extends EventEmitter__default["default"] {
     const {
       googletag
     } = this;
-    debug('Refreshing all slots...');
+    debug$1('Refreshing all slots...');
     googletag.cmd.push(() => {
       googletag.pubads().refresh();
     });
@@ -1065,27 +1065,46 @@ function useAd(path, size) {
   };
 }
 
-function useRichAd(containerRef, id) {
+const debug = createDebug__default["default"]('folklore:ads');
+function parseRichAd(data) {
+  let richAd = null;
+  try {
+    const eventData = JSON.parse(data) || null;
+    richAd = eventData !== null ? eventData.richAd || null : null;
+  } catch (e) {}
+  return richAd;
+}
+function useRichAd(containerRef, id, opts) {
   const [richAd, setRichAd] = React.useState(null);
+  const {
+    onRichAd = null
+  } = opts || {};
   React.useEffect(() => {
     setRichAd(null);
-    window.addEventListener('message', event => {
-      if (event.origin.match(/safeframe\.googlesyndication\.com/) !== null) {
-        let newRichAd = null;
-        try {
-          const eventData = JSON.parse(event.data) || null;
-          newRichAd = eventData !== null ? eventData.richAd || null : null;
-        } catch (e) {}
-        if (newRichAd !== null) {
-          const container = containerRef.current || document;
-          const iframe = container.querySelector('iframe') || null;
-          if (iframe !== null && iframe.contentWindow === event.source) {
-            setRichAd(newRichAd);
-          }
-        }
+    function onMessage(event) {
+      if (event.origin.match(/safeframe\.googlesyndication\.com/) === null) {
+        return;
       }
-    });
-  }, [id]);
+      const container = containerRef.current || document;
+      const iframe = container.querySelector('iframe') || null;
+      if (iframe === null || iframe.contentWindow !== event.source) {
+        return;
+      }
+      const newRichAd = parseRichAd(event.data);
+      if (newRichAd === null) {
+        return;
+      }
+      debug('Received rich ad for %s %O', id, newRichAd);
+      setRichAd(newRichAd);
+      if (onRichAd !== null) {
+        onRichAd(newRichAd);
+      }
+    }
+    window.addEventListener('message', onMessage);
+    return () => {
+      window.removeEventListener('message', onMessage);
+    };
+  }, [id, onRichAd]);
   return richAd;
 }
 
@@ -1106,8 +1125,10 @@ const propTypes = {
   emptyClassName: PropTypes__default["default"].string,
   adClassName: PropTypes__default["default"].string,
   richAdClassName: PropTypes__default["default"].string,
+  richAdIframeClassName: PropTypes__default["default"].string,
   onRender: PropTypes__default["default"].func,
   onDestroy: PropTypes__default["default"].func,
+  onRichAd: PropTypes__default["default"].func,
   slotRef: PropTypes__default["default"].oneOfType([PropTypes__default["default"].func, PropTypes__default["default"].object])
 };
 const defaultProps = {
@@ -1126,8 +1147,10 @@ const defaultProps = {
   emptyClassName: null,
   adClassName: null,
   richAdClassName: null,
+  richAdIframeClassName: null,
   onRender: null,
   onDestroy: null,
+  onRichAd: null,
   slotRef: null
 };
 function Ad(_ref) {
@@ -1148,8 +1171,10 @@ function Ad(_ref) {
     emptyClassName,
     adClassName,
     richAdClassName,
+    richAdIframeClassName,
     onRender,
     onDestroy,
+    onRichAd,
     slotRef
   } = _ref;
   const {
@@ -1248,7 +1273,9 @@ function Ad(_ref) {
     disableTracking
   });
   const adContainerRef = React.useRef(null);
-  const richAd = useRichAd(adContainerRef, id);
+  const richAd = useRichAd(adContainerRef, id, {
+    onRichAd
+  });
   if (slotRef !== null && isFunction__default["default"](slotRef)) {
     slotRef(slotObject);
   } else if (slotRef !== null && isObject__default["default"](slotRef)) {
@@ -1306,9 +1333,9 @@ function Ad(_ref) {
       ref: adContainerRef,
       children: [/*#__PURE__*/jsxRuntime.jsx("div", {
         id: id,
-        style: {
-          position: isRendered && richAd !== null ? 'absolute' : null
-        }
+        className: classNames__default["default"]([{
+          [richAdIframeClassName]: richAdIframeClassName !== null && isRendered && richAd !== null
+        }])
       }), isRendered && richAd !== null ? /*#__PURE__*/jsxRuntime.jsx(RichAd, {
         richAd: richAd,
         isFluid: isFluid,

package/dist/es.js

@@ -258,7 +258,7 @@ class AdSlot extends EventEmitter {
 }
 
 /* globals refreshDisabledLineItems: [] */
-const debug = createDebug('folklore:ads');
+const debug$1 = createDebug('folklore:ads');
 class AdsManager extends EventEmitter {
   // static index = 0;
 
@@ -366,7 +366,7 @@ class AdsManager extends EventEmitter {
     if (this.disabled) {
       return;
     }
-    debug('Initializing GPT...');
+    debug$1('Initializing GPT...');
     const {
       disabled,
       personnalizedAdsDisabled
@@ -380,19 +380,19 @@ class AdsManager extends EventEmitter {
       fetchMarginPercent = 300
     } = this.options;
     if (disabled) {
-      debug('Disable initial load');
+      debug$1('Disable initial load');
       googletag.pubads().disableInitialLoad();
     }
     if (!disableSingleRequest) {
-      debug('Enable single request');
+      debug$1('Enable single request');
       googletag.pubads().enableSingleRequest();
     }
     if (personnalizedAdsDisabled) {
-      debug('Disable personalized ads');
+      debug$1('Disable personalized ads');
       googletag.pubads().setRequestNonPersonalizedAds(1);
     }
     if (!disableLazyLoad) {
-      debug('Enable lazy loading %o', {
+      debug$1('Enable lazy loading %o', {
         fetchMarginPercent,
         renderMarginPercent,
         mobileScaling
@@ -404,13 +404,13 @@ class AdsManager extends EventEmitter {
       });
     }
     if (!disableVideoAds) {
-      debug('Enable video ads');
+      debug$1('Enable video ads');
       googletag.pubads().enableVideoAds();
     }
     googletag.pubads().addEventListener('slotRenderEnded', this.onSlotRenderEnded);
     googletag.pubads().addEventListener('impressionViewable', this.onSlotImpressionViewable);
     googletag.enableServices();
-    debug('GPT is ready');
+    debug$1('GPT is ready');
     this.enabled = true;
     this.ready = true;
     this.emit('ready');
@@ -430,9 +430,9 @@ class AdsManager extends EventEmitter {
       renderSlot.setRefreshDisabled();
     }
     if (event.isEmpty) {
-      debug('Render ended for slot #%s(%s). Slot is empty.', eventSlot.getSlotElementId(), eventSlot.getAdUnitPath());
+      debug$1('Render ended for slot #%s(%s). Slot is empty.', eventSlot.getSlotElementId(), eventSlot.getAdUnitPath());
     } else {
-      debug('Render ended for slot #%s(%s) with size %s.', eventSlot.getSlotElementId(), eventSlot.getAdUnitPath(), size !== null ? size.join('x') : '-');
+      debug$1('Render ended for slot #%s(%s) with size %s.', eventSlot.getSlotElementId(), eventSlot.getAdUnitPath(), size !== null ? size.join('x') : '-');
     }
   }
   onSlotImpressionViewable(event) {
@@ -443,12 +443,12 @@ class AdsManager extends EventEmitter {
     if (impressionSlot !== null) {
       impressionSlot.setViewable(true);
     }
-    debug('Impression viewable for slot #%s(%s).', eventSlot.getSlotElementId(), eventSlot.getAdUnitPath());
+    debug$1('Impression viewable for slot #%s(%s).', eventSlot.getSlotElementId(), eventSlot.getAdUnitPath());
   }
 
   // eslint-disable-next-line class-methods-use-this
   onSlotVisibleChange(visible, slot) {
-    debug('Slot #%s(%s) visibility change to %s', slot.getElementId(), slot.getAdPath(), visible ? 'visible' : 'not visible');
+    debug$1('Slot #%s(%s) visibility change to %s', slot.getElementId(), slot.getAdPath(), visible ? 'visible' : 'not visible');
   }
   isReady() {
     return this.ready && this.enabled && !this.disabled;
@@ -486,7 +486,7 @@ class AdsManager extends EventEmitter {
       id: providedId = null
     } = opts;
     const id = providedId || this.createAdId();
-    debug('Creating slot #%s(%s)...', id, path);
+    debug$1('Creating slot #%s(%s)...', id, path);
     const slot = new AdSlot(id, path, size, {
       ...opts
     });
@@ -505,7 +505,7 @@ class AdsManager extends EventEmitter {
       const id = slot.getElementId();
       const path = slot.getAdPath();
       const size = slot.getAdSize();
-      debug('Defining slot #%s(%s)...', id, path);
+      debug$1('Defining slot #%s(%s)...', id, path);
       const adSlot = googletag.defineSlot(path, size, id).addService(googletag.pubads());
       slot.setAdSlot(adSlot);
     });
@@ -514,7 +514,7 @@ class AdsManager extends EventEmitter {
     const slotsToDisplay = this.slots.filter(slot => slot.canBeDisplayed());
     const slotsCount = slotsToDisplay.length;
     if (slotsCount > 0) {
-      debug('Displaying %i slot(s)...', slotsCount);
+      debug$1('Displaying %i slot(s)...', slotsCount);
       slotsToDisplay.forEach(slot => this.callDisplaySlot(slot));
     }
     return true;
@@ -534,7 +534,7 @@ class AdsManager extends EventEmitter {
     googletag.cmd.push(() => {
       const id = slot.getElementId();
       const path = slot.getAdPath();
-      debug('Displaying slot #%s(%s)...', id, path);
+      debug$1('Displaying slot #%s(%s)...', id, path);
       googletag.display(slot.getAdSlot());
       if (googletag.pubads().isInitialLoadDisabled()) {
         googletag.pubads().refresh([slot.getAdSlot()]);
@@ -556,7 +556,7 @@ class AdsManager extends EventEmitter {
     slot.destroy();
     this.slots = this.slots.filter(it => it !== slot);
     if (adSlot !== null) {
-      debug('Destroying slot #%s(%s)...', adSlot.getAdUnitPath(), adSlot.getSlotElementId());
+      debug$1('Destroying slot #%s(%s)...', adSlot.getAdUnitPath(), adSlot.getSlotElementId());
       googletag.cmd.push(() => {
         googletag.destroySlots([adSlot]);
       });
@@ -573,7 +573,7 @@ class AdsManager extends EventEmitter {
     }
     const adSlot = slot.getAdSlot();
     if (adSlot !== null) {
-      debug('Refreshing slot #%s(%s)...', adSlot.getAdUnitPath(), slot.getElementId());
+      debug$1('Refreshing slot #%s(%s)...', adSlot.getAdUnitPath(), slot.getElementId());
       googletag.cmd.push(() => {
         googletag.pubads().refresh([adSlot], {
           changeCorrelator: false
@@ -589,7 +589,7 @@ class AdsManager extends EventEmitter {
     if (slots.length === 0) {
       return;
     }
-    debug('Refreshing slots %o...', slots.map(slot => `#${slot.getElementId()}(${slot.getAdUnitPath()})`));
+    debug$1('Refreshing slots %o...', slots.map(slot => `#${slot.getElementId()}(${slot.getAdUnitPath()})`));
     googletag.cmd.push(() => {
       googletag.pubads().refresh(slots);
     });
@@ -598,7 +598,7 @@ class AdsManager extends EventEmitter {
     const {
       googletag
     } = this;
-    debug('Refreshing all slots...');
+    debug$1('Refreshing all slots...');
     googletag.cmd.push(() => {
       googletag.pubads().refresh();
     });
@@ -1047,27 +1047,46 @@ function useAd(path, size) {
   };
 }
 
-function useRichAd(containerRef, id) {
+const debug = createDebug('folklore:ads');
+function parseRichAd(data) {
+  let richAd = null;
+  try {
+    const eventData = JSON.parse(data) || null;
+    richAd = eventData !== null ? eventData.richAd || null : null;
+  } catch (e) {}
+  return richAd;
+}
+function useRichAd(containerRef, id, opts) {
   const [richAd, setRichAd] = useState(null);
+  const {
+    onRichAd = null
+  } = opts || {};
   useEffect(() => {
     setRichAd(null);
-    window.addEventListener('message', event => {
-      if (event.origin.match(/safeframe\.googlesyndication\.com/) !== null) {
-        let newRichAd = null;
-        try {
-          const eventData = JSON.parse(event.data) || null;
-          newRichAd = eventData !== null ? eventData.richAd || null : null;
-        } catch (e) {}
-        if (newRichAd !== null) {
-          const container = containerRef.current || document;
-          const iframe = container.querySelector('iframe') || null;
-          if (iframe !== null && iframe.contentWindow === event.source) {
-            setRichAd(newRichAd);
-          }
-        }
+    function onMessage(event) {
+      if (event.origin.match(/safeframe\.googlesyndication\.com/) === null) {
+        return;
       }
-    });
-  }, [id]);
+      const container = containerRef.current || document;
+      const iframe = container.querySelector('iframe') || null;
+      if (iframe === null || iframe.contentWindow !== event.source) {
+        return;
+      }
+      const newRichAd = parseRichAd(event.data);
+      if (newRichAd === null) {
+        return;
+      }
+      debug('Received rich ad for %s %O', id, newRichAd);
+      setRichAd(newRichAd);
+      if (onRichAd !== null) {
+        onRichAd(newRichAd);
+      }
+    }
+    window.addEventListener('message', onMessage);
+    return () => {
+      window.removeEventListener('message', onMessage);
+    };
+  }, [id, onRichAd]);
   return richAd;
 }
 
@@ -1088,8 +1107,10 @@ const propTypes = {
   emptyClassName: PropTypes.string,
   adClassName: PropTypes.string,
   richAdClassName: PropTypes.string,
+  richAdIframeClassName: PropTypes.string,
   onRender: PropTypes.func,
   onDestroy: PropTypes.func,
+  onRichAd: PropTypes.func,
   slotRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 };
 const defaultProps = {
@@ -1108,8 +1129,10 @@ const defaultProps = {
   emptyClassName: null,
   adClassName: null,
   richAdClassName: null,
+  richAdIframeClassName: null,
   onRender: null,
   onDestroy: null,
+  onRichAd: null,
   slotRef: null
 };
 function Ad(_ref) {
@@ -1130,8 +1153,10 @@ function Ad(_ref) {
     emptyClassName,
     adClassName,
     richAdClassName,
+    richAdIframeClassName,
     onRender,
     onDestroy,
+    onRichAd,
     slotRef
   } = _ref;
   const {
@@ -1230,7 +1255,9 @@ function Ad(_ref) {
     disableTracking
   });
   const adContainerRef = useRef(null);
-  const richAd = useRichAd(adContainerRef, id);
+  const richAd = useRichAd(adContainerRef, id, {
+    onRichAd
+  });
   if (slotRef !== null && isFunction(slotRef)) {
     slotRef(slotObject);
   } else if (slotRef !== null && isObject(slotRef)) {
@@ -1288,9 +1315,9 @@ function Ad(_ref) {
       ref: adContainerRef,
       children: [/*#__PURE__*/jsx("div", {
         id: id,
-        style: {
-          position: isRendered && richAd !== null ? 'absolute' : null
-        }
+        className: classNames([{
+          [richAdIframeClassName]: richAdIframeClassName !== null && isRendered && richAd !== null
+        }])
       }), isRendered && richAd !== null ? /*#__PURE__*/jsx(RichAd, {
         richAd: richAd,
         isFluid: isFluid,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@folklore/ads",
-    "version": "0.0.76",
+    "version": "0.0.78",
     "description": "Ads library",
     "keywords": [
         "javascript",
@@ -50,7 +50,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "4c607d1f1a031278d3cf2249a84452a214af57b0",
+    "gitHead": "305e55290b425a9b60853ce4b1a9688956f77f68",
     "dependencies": {
         "@folklore/hooks": "^0.0.65",
         "@folklore/tracking": "^0.0.25",