Merge pull request #58 from rambler-digital-solutions/resize-slot

fix: 🐜 resize slot on adUnit resize

.size-snapshot.json

@@ -1,13 +1,13 @@
 {
   "main.umd.js": {
-    "bundled": 288868,
-    "minified": 89188,
-    "gzipped": 23733
+    "bundled": 290625,
+    "minified": 89746,
+    "gzipped": 23869
   },
   "main.esm.js": {
-    "bundled": 231019,
-    "minified": 97576,
-    "gzipped": 22527,
+    "bundled": 232690,
+    "minified": 98257,
+    "gzipped": 22716,
     "treeshaked": {
       "rollup": {
         "code": 10005,
@@ -19,8 +19,8 @@
     }
   },
   "main.cjs.js": {
-    "bundled": 236991,
-    "minified": 102496,
-    "gzipped": 22890
+    "bundled": 238662,
+    "minified": 103177,
+    "gzipped": 23076
   }
 }

src/adContainer/VideoAdContainer.js

@@ -3,6 +3,7 @@ import loadScript from './helpers/loadScript';
 import createAdVideoElement from './helpers/createAdVideoElement';
 import createAdContainer from './helpers/createAdContainer';
 import createIframe from './helpers/createIframe';
+import createSlot from './helpers/createSlot';
 import getContentDocument from './helpers/getContentDocument';
 import unique from './helpers/unique';
 
@@ -34,6 +35,7 @@ class VideoAdContainer {
 
     this[hidden].id = nextId();
     this.element = createAdContainer();
+    this.slotElement = null;
     this.executionContext = null;
 
     this.isOriginalVideoElement = Boolean(videoElement);
@@ -75,6 +77,22 @@ class VideoAdContainer {
     });
   }
 
+  /**
+   * Adds the slot to the ad container.
+   *
+   * @param {number} width - Slot width.
+   * @param {number} height - Slot height.
+   */
+  addSlot (width, height) {
+    if (this.isDestroyed()) {
+      throw new Error('VideoAdContainer has been destroyed');
+    }
+
+    if (!this.slotElement) {
+      this.slotElement = createSlot(this.element, width, height);
+    }
+  }
+
   /**
    * Destroys the VideoAdContainer.
    */

src/adContainer/__tests__/VideoAdContainer.spec.js

@@ -75,10 +75,13 @@ describe('VideoAdContainer', () => {
 
       expect(iframe).toBeInstanceOf(HTMLIFrameElement);
       expect(loadScript).toHaveBeenCalledTimes(1);
-      expect(loadScript).toBeCalledWith(src, expect.objectContaining({
-        placeholder: iframeBody,
-        ...scriptOpts
-      }));
+      expect(loadScript).toBeCalledWith(
+        src,
+        expect.objectContaining({
+          placeholder: iframeBody,
+          ...scriptOpts
+        })
+      );
     });
 
     test('must reuse the iframe to add scripts', async () => {
@@ -115,6 +118,19 @@ describe('VideoAdContainer', () => {
     });
   });
 
+  test('must create a slot element and add it to the ad container', () => {
+    const videoAdContainer = new VideoAdContainer(placeholder);
+    const adContainerElement = videoAdContainer.element;
+
+    videoAdContainer.addSlot(300, 200);
+
+    expect(videoAdContainer.slotElement).toBeInstanceOf(Element);
+    expect(videoAdContainer.slotElement.tagName).toBe('DIV');
+    expect(videoAdContainer.slotElement.style.width).toBe('300px');
+    expect(videoAdContainer.slotElement.style.height).toBe('200px');
+    expect(videoAdContainer.slotElement.parentNode).toBe(adContainerElement);
+  });
+
   test('destroy must remove the adContainer from the placeHolder', async () => {
     const videoAdContainer = new VideoAdContainer(placeholder);
 

src/adContainer/helpers/__tests__/__snapshots__/createSlot.spec.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`createSlot must return a slot element 1`] = `
+<div
+  style="border: 0px; cursor: pointer; height: 200px; left: 0px; margin: 0px; padding: 0px; position: absolute; top: 0px; width: 300px;"
+/>
+`;

src/adContainer/helpers/__tests__/createSlot.spec.js

@@ -0,0 +1,12 @@
+import createSlot from '../createSlot';
+
+describe('createSlot', () => {
+  test('must return a slot element', () => {
+    const slot = createSlot(document.body, 300, 200);
+
+    expect(slot).toBeInstanceOf(HTMLDivElement);
+    expect(slot).toMatchSnapshot();
+
+    slot.parentElement.removeChild(slot);
+  });
+});

src/adContainer/helpers/createSlot.js

@@ -0,0 +1,21 @@
+const createSlot = (placeholder, width, height) => {
+  const slot = document.createElement('DIV');
+
+  Object.assign(slot.style, {
+    border: '0px',
+    cursor: 'pointer',
+    height: `${height}px`,
+    left: '0px',
+    margin: '0px',
+    padding: '0px',
+    position: 'absolute',
+    top: '0px',
+    width: `${width}px`
+  });
+
+  placeholder.appendChild(slot);
+
+  return slot;
+};
+
+export default createSlot;

src/adUnit/VpaidAdUnit.js

@@ -513,6 +513,13 @@ class VpaidAdUnit extends VideoAdUnit {
   async resize (width, height, viewmode) {
     await super.resize(width, height, viewmode);
 
+    if (this.isStarted() && !this.isFinished()) {
+      const slot = this.videoAdContainer.slotElement;
+
+      slot.style.height = `${height}px`;
+      slot.style.width = `${width}px`;
+    }
+
     return callAndWait(this.creativeAd, resizeAd, adSizeChange, width, height, viewmode);
   }
 }

src/adUnit/__tests__/VpaidAdUnit.spec.js

@@ -96,6 +96,7 @@ describe('VpaidAdUnit', () => {
       }
     ];
     videoAdContainer = new VideoAdContainer(document.createElement('DIV'));
+    videoAdContainer.slotElement = document.createElement('DIV');
   });
 
   afterEach(() => {

src/adUnit/helpers/vpaid/__tests__/initAd.spec.js

@@ -1,8 +1,4 @@
-import {
-  vpaidInlineAd,
-  vpaidInlineParsedXML,
-  vastVpaidInlineXML
-} from '../../../../../fixtures';
+import {vpaidInlineAd, vpaidInlineParsedXML, vastVpaidInlineXML} from '../../../../../fixtures';
 import VideoAdContainer from '../../../../adContainer/VideoAdContainer';
 import initAd from '../initAd';
 import MockVpaidCreativeAd from '../../../__tests__/MockVpaidCreativeAd';
@@ -59,7 +55,7 @@ describe('initAd', () => {
         xmlEncoded: false
       },
       {
-        slot: expect.any(HTMLDivElement),
+        slot: videoAdContainer.slotElement,
         videoSlot: videoAdContainer.videoElement,
         videoSlotCanAutoPlay: false
       }
@@ -68,16 +64,18 @@ describe('initAd', () => {
     const {slot} = mockCreativeAd.initAd.mock.calls[0][5];
 
     expect(slot).toBeInstanceOf(HTMLDivElement);
-    expect(slot.style).toEqual(expect.objectContaining({
-      border: '0px',
-      cursor: 'pointer',
-      height: '0px',
-      left: '0px',
-      margin: '0px',
-      padding: '0px',
-      position: 'absolute',
-      top: '0px',
-      width: '0px'
-    }));
+    expect(slot.style).toEqual(
+      expect.objectContaining({
+        border: '0px',
+        cursor: 'pointer',
+        height: '0px',
+        left: '0px',
+        margin: '0px',
+        padding: '0px',
+        position: 'absolute',
+        top: '0px',
+        width: '0px'
+      })
+    );
   });
 });

src/adUnit/helpers/vpaid/initAd.js

@@ -1,36 +1,19 @@
 import {getCreativeData} from '../../../vastSelectors';
 import viewmode from './viewmode';
 
-const createSlot = (placeholder, width, height) => {
-  const slot = document.createElement('DIV');
-
-  Object.assign(slot.style, {
-    border: '0px',
-    cursor: 'pointer',
-    height: `${height}px`,
-    left: '0px',
-    margin: '0px',
-    padding: '0px',
-    position: 'absolute',
-    top: '0px',
-    width: `${width}px`
-  });
-
-  placeholder.appendChild(slot);
-
-  return slot;
-};
 const initAd = (creativeAd, videoAdContainer, vastChain) => {
-  const placeholder = videoAdContainer.element;
-  const {width, height} = placeholder.getBoundingClientRect();
+  const {width, height} = videoAdContainer.element.getBoundingClientRect();
   const mode = viewmode(width, height);
   const desiredBitrate = -1;
+  const creativeData = getCreativeData(vastChain[0].XML);
+
+  videoAdContainer.addSlot(width, height);
+
   const environmentVars = {
-    slot: createSlot(placeholder, width, height),
+    slot: videoAdContainer.slotElement,
     videoSlot: videoAdContainer.videoElement,
     videoSlotCanAutoPlay: videoAdContainer.isOriginalVideoElement
   };
-  const creativeData = getCreativeData(vastChain[0].XML);
 
   creativeAd.initAd(width, height, mode, desiredBitrate, creativeData, environmentVars);
 };