@folklore/ads 0.0.100 → 0.0.101

package/dist/cjs.js

@@ -40,13 +40,10 @@ var propTypes$4 = /*#__PURE__*/Object.freeze({
     adViewports: adViewports
 });
 
-const getAdSizes = sizes => {
-  if (isArray(sizes)) {
-    return uniqBy(isArray(sizes[0]) || sizes[0] === 'fluid' ? sizes.filter(size => size !== 'fluid').reduce((allSizes, size) => [...allSizes, ...getAdSizes(size)], []) : [sizes].filter(size => size !== 'fluid'), size => size.join('x'));
-  }
-  return sizes.split('x').map(it => parseInt(it, 10));
-};
-const getMinimumAdSize = sizes => getAdSizes(sizes).reduce((minimumSize, size) => ({
+function getAdSizes(sizes) {
+  return uniqBy(sizes, size => isArray(size) ? size.join('x') : size);
+}
+const getMinimumAdSize = sizes => getAdSizes(sizes).filter(size => size !== 'fluid').reduce((minimumSize, size) => ({
   width: Math.min(minimumSize.width, size[0]),
   height: Math.min(minimumSize.height, size[1])
 }), {
@@ -82,6 +79,23 @@ const getSizeMappingFromSlot = (_ref3, viewports) => {
   }
   return sizeMapping !== null ? buildSizeMappingFromViewports(sizeMapping, viewports) : null;
 };
+function getSizeFromSizeMapping(sizeMapping) {
+  if (sizeMapping === null) {
+    return null;
+  }
+  return getAdSizes(sizeMapping.reduce((allSizes, sizeMap) => [...allSizes, ...sizeMap[1]], [])).sort((a, b) => {
+    if (a === 'fluid') {
+      return 1;
+    }
+    if (b === 'fluid') {
+      return -1;
+    }
+    if (a[0] === b[0]) {
+      return a[1] > b[1] ? 1 : -1;
+    }
+    return a[0] > b[0] ? 1 : -1;
+  });
+}
 
 class AdSlot extends EventEmitter {
   constructor(id, path, size) {
@@ -615,19 +629,6 @@ const viewports = {
 };
 const slots = {
   top: {
-    size: [[300, 100], [300, 150], [320, 50], [320, 100], [320, 180]
-    // [300, 100],
-    // [300, 150],
-    // [320, 50],
-    // [320, 100],
-    // [640, 350],
-    // [728, 90],
-    // [970, 90],
-    // [970, 250],
-    // [1024, 300],
-    // [1382, 300],
-    // [1382, 600],
-    ],
     sizeMapping: {
       default: [[300, 100], [300, 150], [320, 50], [320, 100], [320, 180]],
       tablet: [[300, 100], [300, 150], [320, 50], [320, 100], [320, 180], [728, 90]],
@@ -639,14 +640,12 @@ const slots = {
     size: [[250, 250], [300, 250]]
   },
   sidebar: {
-    size: [[120, 600], [160, 600], [300, 600], [300, 250]],
     sizeMapping: {
       default: [[300, 250]],
       laptop: [[120, 600], [160, 600], [300, 250], [300, 600]]
     }
   },
   fullwidth: {
-    size: [[250, 250], [300, 100], [300, 150], [300, 250], [320, 50], [320, 100], [320, 180], [336, 280], [634, 634], [640, 360], [640, 350], [728, 90], [960, 540], [970, 90], [970, 250], [970, 415], [1024, 300], [1382, 300], [1382, 600]],
     sizeMapping: {
       default: [[250, 250], [300, 100], [300, 150], [300, 250], [320, 50], [320, 100], [320, 180], [336, 280]],
       tablet: [[250, 250], [300, 100], [300, 150], [300, 250], [320, 50], [320, 100], [320, 180], [336, 280], [634, 634], [640, 350], [640, 360], [728, 90]],
@@ -655,27 +654,6 @@ const slots = {
     }
   },
   content: {
-    size: [[120, 600], [160, 600], [250, 250], [300, 100], [300, 150], [300, 250], [300, 600], [320, 50], [320, 100], [320, 180], [336, 280], [634, 634], [640, 350], [640, 360], [728, 90], [960, 540], [970, 90], [970, 250], [970, 415], [1024, 300], [1382, 300], [1382, 600]
-    // [120, 600],
-    // [160, 600],
-    // [250, 250],
-    // [300, 100],
-    // [300, 150],
-    // [300, 250],
-    // [300, 600],
-    // [320, 50],
-    // [320, 100],
-    // [336, 280],
-    // [634, 634],
-    // [640, 350],
-    // [728, 90],
-    // [970, 90],
-    // [970, 250],
-    // [970, 415],
-    // [1024, 300],
-    // [1382, 300],
-    // [1382, 600],
-    ],
     sizeMapping: {
       default: [[120, 600], [160, 600], [250, 250], [300, 100], [300, 150], [300, 250], [300, 600], [320, 50], [320, 100], [320, 180], [336, 280]],
       tablet: [[120, 600], [160, 600], [250, 250], [300, 100], [300, 150], [300, 250],
@@ -709,13 +687,14 @@ const propTypes$3 = {
   mobileScaling: PropTypes.number,
   renderMarginPercent: PropTypes.number,
   fetchMarginPercent: PropTypes.number,
+  viewport: PropTypes.string,
   slots: adSlots,
   viewports: adViewports,
   richAdComponents: PropTypes.objectOf(PropTypes.elementType),
   disabled: PropTypes.bool,
   disableTracking: PropTypes.bool
 };
-const defaultProps$3 = {
+const defaultProps$2 = {
   defaultSlotPath: null,
   slotsPath: null,
   disableSingleRequest: false,
@@ -727,6 +706,7 @@ const defaultProps$3 = {
   mobileScaling: 1.0,
   renderMarginPercent: 100,
   fetchMarginPercent: 300,
+  viewport: null,
   slots: slots,
   viewports: viewports,
   richAdComponents: null,
@@ -747,6 +727,7 @@ function AdsProvider(_ref) {
     mobileScaling,
     renderMarginPercent,
     fetchMarginPercent,
+    viewport,
     viewports,
     slots,
     richAdComponents,
@@ -803,13 +784,21 @@ function AdsProvider(_ref) {
       onResize.cancel();
     };
   }, [ads, resizeDebounceDelay, refreshOnResize]);
-  const slotsWithSizeMapping = React.useMemo(() => Object.keys(slots || {}).reduce((map, key) => ({
-    ...map,
-    [key]: {
-      ...slots[key],
-      sizeMapping: getSizeMappingFromSlot(slots[key], viewports)
-    }
-  }), {}), []);
+  const slotsWithSizeMapping = React.useMemo(() => Object.keys(slots || {}).reduce((map, key) => {
+    const slot = slots[key];
+    const {
+      size
+    } = slot;
+    const sizeMapping = getSizeMappingFromSlot(slot, viewports);
+    return {
+      ...map,
+      [key]: {
+        ...slot,
+        size: size || getSizeFromSizeMapping(sizeMapping || null),
+        sizeMapping
+      }
+    };
+  }, {}), []);
   const finalSlotsPath = React.useMemo(() => defaultSlotPath !== null ? {
     default: defaultSlotPath,
     ...slotsPath
@@ -820,18 +809,19 @@ function AdsProvider(_ref) {
     ready,
     ads,
     viewports,
+    viewport,
     slots: slotsWithSizeMapping,
     slotsPath: finalSlotsPath,
     trackingDisabled: disableTracking,
     richAdComponents
-  }), [ready, ads, viewports, slotsWithSizeMapping, finalSlotsPath, disableTracking, richAdComponents]);
+  }), [ready, ads, viewports, viewport, slotsWithSizeMapping, finalSlotsPath, disableTracking, richAdComponents]);
   return /*#__PURE__*/jsxRuntime.jsx(AdsContext.Provider, {
     value: value,
     children: children
   });
 }
 AdsProvider.propTypes = propTypes$3;
-AdsProvider.defaultProps = defaultProps$3;
+AdsProvider.defaultProps = defaultProps$2;
 
 const AdsTargetingContext = /*#__PURE__*/React.createContext(null);
 const useAdsTargeting = () => React.useContext(AdsTargetingContext);
@@ -841,7 +831,7 @@ const propTypes$2 = {
   targeting: PropTypes.object,
   replace: PropTypes.bool
 };
-const defaultProps$2 = {
+const defaultProps$1 = {
   targeting: {
     domain: typeof window !== 'undefined' ? `${window.location.protocol}//${window.location.host}` : null
   },
@@ -864,7 +854,7 @@ function AdsTargetingProvider(_ref) {
   });
 }
 AdsTargetingProvider.propTypes = propTypes$2;
-AdsTargetingProvider.defaultProps = defaultProps$2;
+AdsTargetingProvider.defaultProps = defaultProps$1;
 
 /* eslint-disable react/jsx-props-no-spreading */
 const propTypes$1 = {
@@ -872,7 +862,7 @@ const propTypes$1 = {
     type: PropTypes.string.isRequired
   }).isRequired
 };
-const defaultProps$1 = {};
+const defaultProps = {};
 function RichAd(_ref) {
   let {
     richAd,
@@ -892,7 +882,7 @@ function RichAd(_ref) {
   }) : null;
 }
 RichAd.propTypes = propTypes$1;
-RichAd.defaultProps = defaultProps$1;
+RichAd.defaultProps = defaultProps;
 
 function useAdsTracking() {
   const tracking$1 = tracking.useTracking() || null;
@@ -907,6 +897,7 @@ function useAdsTracking() {
 function useAd(path, size) {
   let {
     sizeMapping = null,
+    viewport = null,
     targeting = null,
     categoryExclusions = null,
     refreshInterval = null,
@@ -919,6 +910,7 @@ function useAd(path, size) {
   } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   const {
     ads: adsManager,
+    viewports,
     ready: adsReady,
     trackingDisabled: globalTrackingDisabled = false
   } = useAdsContext();
@@ -952,30 +944,41 @@ function useAd(path, size) {
   const [renderEvent, setRenderEvent] = React.useState(null);
 
   // Create slot
-  // const currentSlot = useRef(null);
-  const [slot, setSlot] = React.useState(null);
-  React.useEffect(() => {
-    // if (currentSlot.current !== null) {
-    //     adsManager.destroySlot(currentSlot.current);
-    //     currentSlot.current = null;
-    // }
-    const newSlot = path !== null && !disabled ? adsManager.createSlot(path, size, {
+  const slotRef = React.useRef(null);
+  // const { current: slot } = slotRef;
+  // const [slot, setSlot] = useState(null);
+  const slot = React.useMemo(() => {
+    const {
+      current: currentSlot = null
+    } = slotRef;
+    if (currentSlot !== null) {
+      adsManager.destroySlot(currentSlot);
+    }
+    const viewportSize = viewport !== null ? viewports[viewport] || null : null;
+    const [, viewportFixedSize = null] = sizeMapping !== null && viewportSize !== null ? sizeMapping.find(_ref => {
+      let [itViewport] = _ref;
+      return itViewport.join('x') === viewportSize.join('x');
+    }) || [] : [];
+    const newSlot = path !== null && !disabled ? adsManager.createSlot(path, viewportFixedSize || size, {
       visible: isVisible,
-      sizeMapping,
+      sizeMapping: viewportFixedSize === null ? sizeMapping : null,
       targeting,
       categoryExclusions
     }) : null;
-    setSlot(newSlot);
-    // if (currentSlot.current !== null && adsReady) {
-    //     adsManager.defineSlot(currentSlot.current);
-    // }
-    // return currentSlot.current;
-    return () => {
-      if (newSlot !== null) {
-        adsManager.destroySlot(newSlot);
-      }
-    };
-  }, [adsManager, path, disabled, size, sizeMapping, categoryExclusions]);
+    slotRef.current = newSlot;
+    return newSlot;
+    // // setSlot(newSlot);
+    // // if (currentSlot.current !== null && adsReady) {
+    // //     adsManager.defineSlot(currentSlot.current);
+    // // }
+    // // return currentSlot.current;
+    // return () => {
+    //     slotRef.current = null;
+    //     if (newSlot !== null) {
+    //         adsManager.destroySlot(newSlot);
+    //     }
+    // };
+  }, [adsManager, path, disabled, size, sizeMapping, viewport, categoryExclusions]);
   React.useEffect(() => {
     if (slot !== null) {
       slot.setTargeting(targeting);
@@ -1138,11 +1141,13 @@ function useRichAd(containerRef, id, opts) {
   return richAd;
 }
 
+/* eslint-disable react/require-default-props */
 const propTypes = {
   slot: PropTypes.string.isRequired,
   path: adPath,
   size: adSize,
   sizeMapping: adSizeMapping,
+  viewport: PropTypes.string,
   targeting: adTargeting,
   refreshInterval: PropTypes.number,
   alwaysRender: PropTypes.bool,
@@ -1161,102 +1166,92 @@ const propTypes = {
   onRichAd: PropTypes.func,
   slotRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 };
-const defaultProps = {
-  path: null,
-  size: null,
-  sizeMapping: null,
-  targeting: null,
-  refreshInterval: null,
-  alwaysRender: true,
-  disabled: false,
-  disableTracking: false,
-  shouldKeepSize: false,
-  withoutStyle: false,
-  withoutMinimumSize: false,
-  className: null,
-  emptyClassName: null,
-  adClassName: null,
-  richAdClassName: null,
-  richAdIframeClassName: null,
-  onRender: null,
-  onDestroy: null,
-  onRichAd: null,
-  slotRef: null
-};
 function Ad(_ref) {
   let {
-    slot: slotName,
-    path,
-    size,
-    sizeMapping,
-    targeting,
-    refreshInterval,
-    alwaysRender,
-    disabled,
-    disableTracking,
-    shouldKeepSize,
-    withoutStyle,
-    withoutMinimumSize,
-    className,
-    emptyClassName,
-    adClassName,
-    richAdClassName,
-    richAdIframeClassName,
-    onRender,
-    onDestroy,
-    onRichAd,
-    slotRef
+    slot: slotName = null,
+    path: providedPath = null,
+    size: providedSize = null,
+    sizeMapping: providedSizeMapping = null,
+    viewport: providedViewport = null,
+    targeting: providedTargeting = null,
+    refreshInterval: providedRefreshInterval = null,
+    alwaysRender = true,
+    disabled: providedDisabled = false,
+    disableTracking = false,
+    shouldKeepSize = false,
+    withoutStyle = false,
+    withoutMinimumSize = false,
+    className = null,
+    emptyClassName = null,
+    adClassName = null,
+    richAdClassName = null,
+    richAdIframeClassName = null,
+    onRender = null,
+    onDestroy = null,
+    onRichAd = null,
+    slotRef = null
   } = _ref;
   const {
     slots = null,
-    slotsPath = {}
+    slotsPath = null,
+    viewport: contextViewport = null
   } = useAdsContext();
+  const {
+    default: defaultSlotPath = null
+  } = slotsPath || {};
   const slot = slotName !== null && slots !== null ? slots[slotName] || null : null;
-  const finalPath = path || (slot !== null ? slot.path || null : null) || (slotName !== null ? slotsPath[slotName] : null) || slotsPath.default || null;
-  const finalSize = size || (slot !== null ? slot.size || null : null);
-  const finalSizeMapping = sizeMapping || (slot !== null ? slot.sizeMapping || null : null);
-  const minimumSize = React.useMemo(() => getMinimumAdSize(finalSizeMapping !== null ? finalSizeMapping.reduce((allSizes, sizeMap) => [...allSizes, sizeMap[1]], [finalSize]) : finalSize), [finalSizeMapping, finalSize]);
+  const {
+    sizeMapping: slotSizeMapping = null,
+    size: slotSize = null,
+    path: slotPath = null
+  } = slot || {};
+  const path = providedPath || slotPath || (slotName !== null && slotsPath !== null ? slotsPath[slotName] : null) || defaultSlotPath || null;
+
+  // Size
+  const size = providedSize || slotSize;
+  const sizeMapping = providedSizeMapping || slotSizeMapping;
+  const minimumSize = React.useMemo(() => getMinimumAdSize(sizeMapping !== null ? sizeMapping.reduce((allSizes, sizeMap) => [...allSizes, sizeMap[1]], [size]) : [size]), [sizeMapping, size]);
 
   // Targeting
   const contextTargeting = useAdsTargeting();
   const {
-    disabled: targetingDisabled = false
-  } = contextTargeting || {};
-  const finalDisabled = disabled || targetingDisabled;
-  const allTargeting = React.useMemo(() => {
-    const {
-      disabled: removedDisabled,
-      ...otherTargeting
-    } = contextTargeting || {};
-    return {
+    targeting,
+    refreshInterval,
+    disabled,
+    viewport
+  } = React.useMemo(() => {
+    const allTargeting = {
       ...(slotName !== null ? {
         slot: slotName
       } : null),
-      ...otherTargeting,
-      ...targeting
+      ...contextTargeting,
+      ...providedTargeting
     };
-  }, [contextTargeting, targeting, slotName]);
-  const finalAdTargeting = React.useMemo(() => {
     const {
       refreshAds = null,
+      disabled: targetingDisabled = false,
+      viewport: targetingViewport = null,
       ...otherProps
     } = allTargeting || {};
     return {
-      refreshInterval: refreshAds !== null && refreshAds === 'inactive' ? null : refreshInterval,
+      refreshInterval: refreshAds !== null && refreshAds === 'inactive' ? null : providedRefreshInterval,
+      disabled: providedDisabled || targetingDisabled,
+      viewport: providedViewport || contextViewport || targetingViewport,
       targeting: otherProps || {}
     };
-  }, [allTargeting, refreshInterval]);
+  }, [contextTargeting, providedTargeting, slotName, providedRefreshInterval]);
   const lastRenderedSize = React.useRef(null);
-  const wasDisabled = React.useRef(finalDisabled);
+  const wasDisabled = React.useRef(disabled);
+  React.useEffect(() => {}, []);
   const onAdRender = React.useCallback(event => {
     const {
       isEmpty: newIsEmpty = true,
       width: newWidth,
       height: newHeight
     } = event || {};
-    if (finalDisabled) {
+    if (disabled) {
       wasDisabled.current = true;
-    } else if (!finalDisabled && !newIsEmpty) {
+    } else if (!disabled && !newIsEmpty) {
       wasDisabled.current = false;
     }
     lastRenderedSize.current = !newIsEmpty ? {
@@ -1266,7 +1261,7 @@ function Ad(_ref) {
     if (onRender !== null) {
       onRender(event);
     }
-  }, [onRender, shouldKeepSize, finalDisabled]);
+  }, [onRender, shouldKeepSize, disabled]);
 
   // useEffect(() => {
   //     if (!disabled) {
@@ -1292,14 +1287,15 @@ function Ad(_ref) {
     isRendered,
     refObserver,
     slot: slotObject = null
-  } = useAd(finalPath, finalSize, {
-    sizeMapping: finalSizeMapping,
-    targeting: finalAdTargeting.targeting,
-    refreshInterval: finalAdTargeting.refreshInterval,
+  } = useAd(path, size, {
+    viewport,
+    sizeMapping,
+    targeting,
+    refreshInterval,
     alwaysRender,
     onRender: onAdRender,
     onDestroy,
-    disabled: finalDisabled,
+    disabled,
     disableTracking
   });
   const adContainerRef = React.useRef(null);
@@ -1312,13 +1308,13 @@ function Ad(_ref) {
     // eslint-disable-next-line no-param-reassign
     slotRef.current = slotObject;
   }
-  if (finalDisabled) {
+  if (disabled) {
     wasDisabled.current = true;
-  } else if (!finalDisabled && isRendered) {
+  } else if (!disabled && isRendered) {
     wasDisabled.current = false;
   }
   const waitingNextRender = wasDisabled.current && !isRendered;
-  const keepSize = shouldKeepSize && (finalDisabled || waitingNextRender) && lastRenderedSize.current !== null;
+  const keepSize = shouldKeepSize && (disabled || waitingNextRender) && lastRenderedSize.current !== null;
   if (id === null && !keepSize) {
     return null;
   }
@@ -1328,7 +1324,7 @@ function Ad(_ref) {
       width,
       height
     } : null;
-  } else if (shouldKeepSize && (finalDisabled || waitingNextRender)) {
+  } else if (shouldKeepSize && (disabled || waitingNextRender)) {
     adStyle = lastRenderedSize.current;
   } else if (!withoutMinimumSize) {
     adStyle = minimumSize;
@@ -1377,7 +1373,6 @@ function Ad(_ref) {
   });
 }
 Ad.propTypes = propTypes;
-Ad.defaultProps = defaultProps;
 
 exports.Ad = Ad;
 exports.AdSlot = AdSlot;
@@ -1390,6 +1385,7 @@ exports.buildSizeMappingFromSizes = buildSizeMappingFromSizes;
 exports.buildSizeMappingFromViewports = buildSizeMappingFromViewports;
 exports.getAdSizes = getAdSizes;
 exports.getMinimumAdSize = getMinimumAdSize;
+exports.getSizeFromSizeMapping = getSizeFromSizeMapping;
 exports.getSizeMappingFromSlot = getSizeMappingFromSlot;
 exports.getSortedViewports = getSortedViewports;
 exports.sizeFitsInViewport = sizeFitsInViewport;

package/dist/es.js

@@ -38,13 +38,10 @@ var propTypes$4 = /*#__PURE__*/Object.freeze({
     adViewports: adViewports
 });
 
-const getAdSizes = sizes => {
-  if (isArray(sizes)) {
-    return uniqBy(isArray(sizes[0]) || sizes[0] === 'fluid' ? sizes.filter(size => size !== 'fluid').reduce((allSizes, size) => [...allSizes, ...getAdSizes(size)], []) : [sizes].filter(size => size !== 'fluid'), size => size.join('x'));
-  }
-  return sizes.split('x').map(it => parseInt(it, 10));
-};
-const getMinimumAdSize = sizes => getAdSizes(sizes).reduce((minimumSize, size) => ({
+function getAdSizes(sizes) {
+  return uniqBy(sizes, size => isArray(size) ? size.join('x') : size);
+}
+const getMinimumAdSize = sizes => getAdSizes(sizes).filter(size => size !== 'fluid').reduce((minimumSize, size) => ({
   width: Math.min(minimumSize.width, size[0]),
   height: Math.min(minimumSize.height, size[1])
 }), {
@@ -80,6 +77,23 @@ const getSizeMappingFromSlot = (_ref3, viewports) => {
   }
   return sizeMapping !== null ? buildSizeMappingFromViewports(sizeMapping, viewports) : null;
 };
+function getSizeFromSizeMapping(sizeMapping) {
+  if (sizeMapping === null) {
+    return null;
+  }
+  return getAdSizes(sizeMapping.reduce((allSizes, sizeMap) => [...allSizes, ...sizeMap[1]], [])).sort((a, b) => {
+    if (a === 'fluid') {
+      return 1;
+    }
+    if (b === 'fluid') {
+      return -1;
+    }
+    if (a[0] === b[0]) {
+      return a[1] > b[1] ? 1 : -1;
+    }
+    return a[0] > b[0] ? 1 : -1;
+  });
+}
 
 class AdSlot extends EventEmitter {
   constructor(id, path, size) {
@@ -613,19 +627,6 @@ const viewports = {
 };
 const slots = {
   top: {
-    size: [[300, 100], [300, 150], [320, 50], [320, 100], [320, 180]
-    // [300, 100],
-    // [300, 150],
-    // [320, 50],
-    // [320, 100],
-    // [640, 350],
-    // [728, 90],
-    // [970, 90],
-    // [970, 250],
-    // [1024, 300],
-    // [1382, 300],
-    // [1382, 600],
-    ],
     sizeMapping: {
       default: [[300, 100], [300, 150], [320, 50], [320, 100], [320, 180]],
       tablet: [[300, 100], [300, 150], [320, 50], [320, 100], [320, 180], [728, 90]],
@@ -637,14 +638,12 @@ const slots = {
     size: [[250, 250], [300, 250]]
   },
   sidebar: {
-    size: [[120, 600], [160, 600], [300, 600], [300, 250]],
     sizeMapping: {
       default: [[300, 250]],
       laptop: [[120, 600], [160, 600], [300, 250], [300, 600]]
     }
   },
   fullwidth: {
-    size: [[250, 250], [300, 100], [300, 150], [300, 250], [320, 50], [320, 100], [320, 180], [336, 280], [634, 634], [640, 360], [640, 350], [728, 90], [960, 540], [970, 90], [970, 250], [970, 415], [1024, 300], [1382, 300], [1382, 600]],
     sizeMapping: {
       default: [[250, 250], [300, 100], [300, 150], [300, 250], [320, 50], [320, 100], [320, 180], [336, 280]],
       tablet: [[250, 250], [300, 100], [300, 150], [300, 250], [320, 50], [320, 100], [320, 180], [336, 280], [634, 634], [640, 350], [640, 360], [728, 90]],
@@ -653,27 +652,6 @@ const slots = {
     }
   },
   content: {
-    size: [[120, 600], [160, 600], [250, 250], [300, 100], [300, 150], [300, 250], [300, 600], [320, 50], [320, 100], [320, 180], [336, 280], [634, 634], [640, 350], [640, 360], [728, 90], [960, 540], [970, 90], [970, 250], [970, 415], [1024, 300], [1382, 300], [1382, 600]
-    // [120, 600],
-    // [160, 600],
-    // [250, 250],
-    // [300, 100],
-    // [300, 150],
-    // [300, 250],
-    // [300, 600],
-    // [320, 50],
-    // [320, 100],
-    // [336, 280],
-    // [634, 634],
-    // [640, 350],
-    // [728, 90],
-    // [970, 90],
-    // [970, 250],
-    // [970, 415],
-    // [1024, 300],
-    // [1382, 300],
-    // [1382, 600],
-    ],
     sizeMapping: {
       default: [[120, 600], [160, 600], [250, 250], [300, 100], [300, 150], [300, 250], [300, 600], [320, 50], [320, 100], [320, 180], [336, 280]],
       tablet: [[120, 600], [160, 600], [250, 250], [300, 100], [300, 150], [300, 250],
@@ -707,13 +685,14 @@ const propTypes$3 = {
   mobileScaling: PropTypes.number,
   renderMarginPercent: PropTypes.number,
   fetchMarginPercent: PropTypes.number,
+  viewport: PropTypes.string,
   slots: adSlots,
   viewports: adViewports,
   richAdComponents: PropTypes.objectOf(PropTypes.elementType),
   disabled: PropTypes.bool,
   disableTracking: PropTypes.bool
 };
-const defaultProps$3 = {
+const defaultProps$2 = {
   defaultSlotPath: null,
   slotsPath: null,
   disableSingleRequest: false,
@@ -725,6 +704,7 @@ const defaultProps$3 = {
   mobileScaling: 1.0,
   renderMarginPercent: 100,
   fetchMarginPercent: 300,
+  viewport: null,
   slots: slots,
   viewports: viewports,
   richAdComponents: null,
@@ -745,6 +725,7 @@ function AdsProvider(_ref) {
     mobileScaling,
     renderMarginPercent,
     fetchMarginPercent,
+    viewport,
     viewports,
     slots,
     richAdComponents,
@@ -801,13 +782,21 @@ function AdsProvider(_ref) {
       onResize.cancel();
     };
   }, [ads, resizeDebounceDelay, refreshOnResize]);
-  const slotsWithSizeMapping = useMemo(() => Object.keys(slots || {}).reduce((map, key) => ({
-    ...map,
-    [key]: {
-      ...slots[key],
-      sizeMapping: getSizeMappingFromSlot(slots[key], viewports)
-    }
-  }), {}), []);
+  const slotsWithSizeMapping = useMemo(() => Object.keys(slots || {}).reduce((map, key) => {
+    const slot = slots[key];
+    const {
+      size
+    } = slot;
+    const sizeMapping = getSizeMappingFromSlot(slot, viewports);
+    return {
+      ...map,
+      [key]: {
+        ...slot,
+        size: size || getSizeFromSizeMapping(sizeMapping || null),
+        sizeMapping
+      }
+    };
+  }, {}), []);
   const finalSlotsPath = useMemo(() => defaultSlotPath !== null ? {
     default: defaultSlotPath,
     ...slotsPath
@@ -818,18 +807,19 @@ function AdsProvider(_ref) {
     ready,
     ads,
     viewports,
+    viewport,
     slots: slotsWithSizeMapping,
     slotsPath: finalSlotsPath,
     trackingDisabled: disableTracking,
     richAdComponents
-  }), [ready, ads, viewports, slotsWithSizeMapping, finalSlotsPath, disableTracking, richAdComponents]);
+  }), [ready, ads, viewports, viewport, slotsWithSizeMapping, finalSlotsPath, disableTracking, richAdComponents]);
   return /*#__PURE__*/jsx(AdsContext.Provider, {
     value: value,
     children: children
   });
 }
 AdsProvider.propTypes = propTypes$3;
-AdsProvider.defaultProps = defaultProps$3;
+AdsProvider.defaultProps = defaultProps$2;
 
 const AdsTargetingContext = /*#__PURE__*/React.createContext(null);
 const useAdsTargeting = () => useContext(AdsTargetingContext);
@@ -839,7 +829,7 @@ const propTypes$2 = {
   targeting: PropTypes.object,
   replace: PropTypes.bool
 };
-const defaultProps$2 = {
+const defaultProps$1 = {
   targeting: {
     domain: typeof window !== 'undefined' ? `${window.location.protocol}//${window.location.host}` : null
   },
@@ -862,7 +852,7 @@ function AdsTargetingProvider(_ref) {
   });
 }
 AdsTargetingProvider.propTypes = propTypes$2;
-AdsTargetingProvider.defaultProps = defaultProps$2;
+AdsTargetingProvider.defaultProps = defaultProps$1;
 
 /* eslint-disable react/jsx-props-no-spreading */
 const propTypes$1 = {
@@ -870,7 +860,7 @@ const propTypes$1 = {
     type: PropTypes.string.isRequired
   }).isRequired
 };
-const defaultProps$1 = {};
+const defaultProps = {};
 function RichAd(_ref) {
   let {
     richAd,
@@ -890,7 +880,7 @@ function RichAd(_ref) {
   }) : null;
 }
 RichAd.propTypes = propTypes$1;
-RichAd.defaultProps = defaultProps$1;
+RichAd.defaultProps = defaultProps;
 
 function useAdsTracking() {
   const tracking = useTracking() || null;
@@ -905,6 +895,7 @@ function useAdsTracking() {
 function useAd(path, size) {
   let {
     sizeMapping = null,
+    viewport = null,
     targeting = null,
     categoryExclusions = null,
     refreshInterval = null,
@@ -917,6 +908,7 @@ function useAd(path, size) {
   } = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
   const {
     ads: adsManager,
+    viewports,
     ready: adsReady,
     trackingDisabled: globalTrackingDisabled = false
   } = useAdsContext();
@@ -950,30 +942,41 @@ function useAd(path, size) {
   const [renderEvent, setRenderEvent] = useState(null);
 
   // Create slot
-  // const currentSlot = useRef(null);
-  const [slot, setSlot] = useState(null);
-  useEffect(() => {
-    // if (currentSlot.current !== null) {
-    //     adsManager.destroySlot(currentSlot.current);
-    //     currentSlot.current = null;
-    // }
-    const newSlot = path !== null && !disabled ? adsManager.createSlot(path, size, {
+  const slotRef = useRef(null);
+  // const { current: slot } = slotRef;
+  // const [slot, setSlot] = useState(null);
+  const slot = useMemo(() => {
+    const {
+      current: currentSlot = null
+    } = slotRef;
+    if (currentSlot !== null) {
+      adsManager.destroySlot(currentSlot);
+    }
+    const viewportSize = viewport !== null ? viewports[viewport] || null : null;
+    const [, viewportFixedSize = null] = sizeMapping !== null && viewportSize !== null ? sizeMapping.find(_ref => {
+      let [itViewport] = _ref;
+      return itViewport.join('x') === viewportSize.join('x');
+    }) || [] : [];
+    const newSlot = path !== null && !disabled ? adsManager.createSlot(path, viewportFixedSize || size, {
       visible: isVisible,
-      sizeMapping,
+      sizeMapping: viewportFixedSize === null ? sizeMapping : null,
       targeting,
       categoryExclusions
     }) : null;
-    setSlot(newSlot);
-    // if (currentSlot.current !== null && adsReady) {
-    //     adsManager.defineSlot(currentSlot.current);
-    // }
-    // return currentSlot.current;
-    return () => {
-      if (newSlot !== null) {
-        adsManager.destroySlot(newSlot);
-      }
-    };
-  }, [adsManager, path, disabled, size, sizeMapping, categoryExclusions]);
+    slotRef.current = newSlot;
+    return newSlot;
+    // // setSlot(newSlot);
+    // // if (currentSlot.current !== null && adsReady) {
+    // //     adsManager.defineSlot(currentSlot.current);
+    // // }
+    // // return currentSlot.current;
+    // return () => {
+    //     slotRef.current = null;
+    //     if (newSlot !== null) {
+    //         adsManager.destroySlot(newSlot);
+    //     }
+    // };
+  }, [adsManager, path, disabled, size, sizeMapping, viewport, categoryExclusions]);
   useEffect(() => {
     if (slot !== null) {
       slot.setTargeting(targeting);
@@ -1136,11 +1139,13 @@ function useRichAd(containerRef, id, opts) {
   return richAd;
 }
 
+/* eslint-disable react/require-default-props */
 const propTypes = {
   slot: PropTypes.string.isRequired,
   path: adPath,
   size: adSize,
   sizeMapping: adSizeMapping,
+  viewport: PropTypes.string,
   targeting: adTargeting,
   refreshInterval: PropTypes.number,
   alwaysRender: PropTypes.bool,
@@ -1159,102 +1164,92 @@ const propTypes = {
   onRichAd: PropTypes.func,
   slotRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
 };
-const defaultProps = {
-  path: null,
-  size: null,
-  sizeMapping: null,
-  targeting: null,
-  refreshInterval: null,
-  alwaysRender: true,
-  disabled: false,
-  disableTracking: false,
-  shouldKeepSize: false,
-  withoutStyle: false,
-  withoutMinimumSize: false,
-  className: null,
-  emptyClassName: null,
-  adClassName: null,
-  richAdClassName: null,
-  richAdIframeClassName: null,
-  onRender: null,
-  onDestroy: null,
-  onRichAd: null,
-  slotRef: null
-};
 function Ad(_ref) {
   let {
-    slot: slotName,
-    path,
-    size,
-    sizeMapping,
-    targeting,
-    refreshInterval,
-    alwaysRender,
-    disabled,
-    disableTracking,
-    shouldKeepSize,
-    withoutStyle,
-    withoutMinimumSize,
-    className,
-    emptyClassName,
-    adClassName,
-    richAdClassName,
-    richAdIframeClassName,
-    onRender,
-    onDestroy,
-    onRichAd,
-    slotRef
+    slot: slotName = null,
+    path: providedPath = null,
+    size: providedSize = null,
+    sizeMapping: providedSizeMapping = null,
+    viewport: providedViewport = null,
+    targeting: providedTargeting = null,
+    refreshInterval: providedRefreshInterval = null,
+    alwaysRender = true,
+    disabled: providedDisabled = false,
+    disableTracking = false,
+    shouldKeepSize = false,
+    withoutStyle = false,
+    withoutMinimumSize = false,
+    className = null,
+    emptyClassName = null,
+    adClassName = null,
+    richAdClassName = null,
+    richAdIframeClassName = null,
+    onRender = null,
+    onDestroy = null,
+    onRichAd = null,
+    slotRef = null
   } = _ref;
   const {
     slots = null,
-    slotsPath = {}
+    slotsPath = null,
+    viewport: contextViewport = null
   } = useAdsContext();
+  const {
+    default: defaultSlotPath = null
+  } = slotsPath || {};
   const slot = slotName !== null && slots !== null ? slots[slotName] || null : null;
-  const finalPath = path || (slot !== null ? slot.path || null : null) || (slotName !== null ? slotsPath[slotName] : null) || slotsPath.default || null;
-  const finalSize = size || (slot !== null ? slot.size || null : null);
-  const finalSizeMapping = sizeMapping || (slot !== null ? slot.sizeMapping || null : null);
-  const minimumSize = useMemo(() => getMinimumAdSize(finalSizeMapping !== null ? finalSizeMapping.reduce((allSizes, sizeMap) => [...allSizes, sizeMap[1]], [finalSize]) : finalSize), [finalSizeMapping, finalSize]);
+  const {
+    sizeMapping: slotSizeMapping = null,
+    size: slotSize = null,
+    path: slotPath = null
+  } = slot || {};
+  const path = providedPath || slotPath || (slotName !== null && slotsPath !== null ? slotsPath[slotName] : null) || defaultSlotPath || null;
+
+  // Size
+  const size = providedSize || slotSize;
+  const sizeMapping = providedSizeMapping || slotSizeMapping;
+  const minimumSize = useMemo(() => getMinimumAdSize(sizeMapping !== null ? sizeMapping.reduce((allSizes, sizeMap) => [...allSizes, sizeMap[1]], [size]) : [size]), [sizeMapping, size]);
 
   // Targeting
   const contextTargeting = useAdsTargeting();
   const {
-    disabled: targetingDisabled = false
-  } = contextTargeting || {};
-  const finalDisabled = disabled || targetingDisabled;
-  const allTargeting = useMemo(() => {
-    const {
-      disabled: removedDisabled,
-      ...otherTargeting
-    } = contextTargeting || {};
-    return {
+    targeting,
+    refreshInterval,
+    disabled,
+    viewport
+  } = useMemo(() => {
+    const allTargeting = {
       ...(slotName !== null ? {
         slot: slotName
       } : null),
-      ...otherTargeting,
-      ...targeting
+      ...contextTargeting,
+      ...providedTargeting
     };
-  }, [contextTargeting, targeting, slotName]);
-  const finalAdTargeting = useMemo(() => {
     const {
       refreshAds = null,
+      disabled: targetingDisabled = false,
+      viewport: targetingViewport = null,
       ...otherProps
     } = allTargeting || {};
     return {
-      refreshInterval: refreshAds !== null && refreshAds === 'inactive' ? null : refreshInterval,
+      refreshInterval: refreshAds !== null && refreshAds === 'inactive' ? null : providedRefreshInterval,
+      disabled: providedDisabled || targetingDisabled,
+      viewport: providedViewport || contextViewport || targetingViewport,
       targeting: otherProps || {}
     };
-  }, [allTargeting, refreshInterval]);
+  }, [contextTargeting, providedTargeting, slotName, providedRefreshInterval]);
   const lastRenderedSize = useRef(null);
-  const wasDisabled = useRef(finalDisabled);
+  const wasDisabled = useRef(disabled);
+  useEffect(() => {}, []);
   const onAdRender = useCallback(event => {
     const {
       isEmpty: newIsEmpty = true,
       width: newWidth,
       height: newHeight
     } = event || {};
-    if (finalDisabled) {
+    if (disabled) {
       wasDisabled.current = true;
-    } else if (!finalDisabled && !newIsEmpty) {
+    } else if (!disabled && !newIsEmpty) {
       wasDisabled.current = false;
     }
     lastRenderedSize.current = !newIsEmpty ? {
@@ -1264,7 +1259,7 @@ function Ad(_ref) {
     if (onRender !== null) {
       onRender(event);
     }
-  }, [onRender, shouldKeepSize, finalDisabled]);
+  }, [onRender, shouldKeepSize, disabled]);
 
   // useEffect(() => {
   //     if (!disabled) {
@@ -1290,14 +1285,15 @@ function Ad(_ref) {
     isRendered,
     refObserver,
     slot: slotObject = null
-  } = useAd(finalPath, finalSize, {
-    sizeMapping: finalSizeMapping,
-    targeting: finalAdTargeting.targeting,
-    refreshInterval: finalAdTargeting.refreshInterval,
+  } = useAd(path, size, {
+    viewport,
+    sizeMapping,
+    targeting,
+    refreshInterval,
     alwaysRender,
     onRender: onAdRender,
     onDestroy,
-    disabled: finalDisabled,
+    disabled,
     disableTracking
   });
   const adContainerRef = useRef(null);
@@ -1310,13 +1306,13 @@ function Ad(_ref) {
     // eslint-disable-next-line no-param-reassign
     slotRef.current = slotObject;
   }
-  if (finalDisabled) {
+  if (disabled) {
     wasDisabled.current = true;
-  } else if (!finalDisabled && isRendered) {
+  } else if (!disabled && isRendered) {
     wasDisabled.current = false;
   }
   const waitingNextRender = wasDisabled.current && !isRendered;
-  const keepSize = shouldKeepSize && (finalDisabled || waitingNextRender) && lastRenderedSize.current !== null;
+  const keepSize = shouldKeepSize && (disabled || waitingNextRender) && lastRenderedSize.current !== null;
   if (id === null && !keepSize) {
     return null;
   }
@@ -1326,7 +1322,7 @@ function Ad(_ref) {
       width,
       height
     } : null;
-  } else if (shouldKeepSize && (finalDisabled || waitingNextRender)) {
+  } else if (shouldKeepSize && (disabled || waitingNextRender)) {
     adStyle = lastRenderedSize.current;
   } else if (!withoutMinimumSize) {
     adStyle = minimumSize;
@@ -1375,6 +1371,5 @@ function Ad(_ref) {
   });
 }
 Ad.propTypes = propTypes;
-Ad.defaultProps = defaultProps;
 
-export { Ad, AdSlot, AdsManager, AdsProvider, AdsTargetingProvider, propTypes$4 as PropTypes, RichAd, buildSizeMappingFromSizes, buildSizeMappingFromViewports, getAdSizes, getMinimumAdSize, getSizeMappingFromSlot, getSortedViewports, sizeFitsInViewport, slots, useAd, useAdsContext, useAdsTargeting, useAdsTracking, useRichAd, viewports };
+export { Ad, AdSlot, AdsManager, AdsProvider, AdsTargetingProvider, propTypes$4 as PropTypes, RichAd, buildSizeMappingFromSizes, buildSizeMappingFromViewports, getAdSizes, getMinimumAdSize, getSizeFromSizeMapping, getSizeMappingFromSlot, getSortedViewports, sizeFitsInViewport, slots, useAd, useAdsContext, useAdsTargeting, useAdsTracking, useRichAd, viewports };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@folklore/ads",
-    "version": "0.0.100",
+    "version": "0.0.101",
     "description": "Ads library",
     "keywords": [
         "javascript",
@@ -50,7 +50,7 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "5c8b1b42f8910f43372d7676fdbfcef1e85b39c3",
+    "gitHead": "4d23bd8673f61fcb67526866cf0366455f4f674a",
     "dependencies": {
         "@folklore/hooks": "^0.0.72",
         "@folklore/tracking": "^0.0.29",