From 4188075b891dc736b821d1dcb8a2f86a9886ed90 Mon Sep 17 00:00:00 2001 From: Andrey Polischuk Date: Sat, 8 Oct 2022 00:27:01 +0300 Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=90=9C=20resize=20slot=20on=20adUn?= =?UTF-8?q?it=20resize?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit fix #57 --- .size-snapshot.json | 18 +++++------ src/adContainer/VideoAdContainer.js | 18 +++++++++++ .../__tests__/VideoAdContainer.spec.js | 24 +++++++++++--- .../__snapshots__/createSlot.spec.js.snap | 7 ++++ .../helpers/__tests__/createSlot.spec.js | 12 +++++++ src/adContainer/helpers/createSlot.js | 21 ++++++++++++ src/adUnit/VpaidAdUnit.js | 7 ++++ src/adUnit/__tests__/VpaidAdUnit.spec.js | 1 + .../helpers/vpaid/__tests__/initAd.spec.js | 32 +++++++++---------- src/adUnit/helpers/vpaid/initAd.js | 29 ++++------------- 10 files changed, 116 insertions(+), 53 deletions(-) create mode 100644 src/adContainer/helpers/__tests__/__snapshots__/createSlot.spec.js.snap create mode 100644 src/adContainer/helpers/__tests__/createSlot.spec.js create mode 100644 src/adContainer/helpers/createSlot.js diff --git a/.size-snapshot.json b/.size-snapshot.json index 180cb5e4..8cd1a8b2 100644 --- a/.size-snapshot.json +++ b/.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 } } diff --git a/src/adContainer/VideoAdContainer.js b/src/adContainer/VideoAdContainer.js index 5ab09ec7..aec6ccd9 100644 --- a/src/adContainer/VideoAdContainer.js +++ b/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. */ diff --git a/src/adContainer/__tests__/VideoAdContainer.spec.js b/src/adContainer/__tests__/VideoAdContainer.spec.js index d5b7f873..d61a40a0 100644 --- a/src/adContainer/__tests__/VideoAdContainer.spec.js +++ b/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); diff --git a/src/adContainer/helpers/__tests__/__snapshots__/createSlot.spec.js.snap b/src/adContainer/helpers/__tests__/__snapshots__/createSlot.spec.js.snap new file mode 100644 index 00000000..efd1365e --- /dev/null +++ b/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`] = ` +
+`; diff --git a/src/adContainer/helpers/__tests__/createSlot.spec.js b/src/adContainer/helpers/__tests__/createSlot.spec.js new file mode 100644 index 00000000..99282b0c --- /dev/null +++ b/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); + }); +}); diff --git a/src/adContainer/helpers/createSlot.js b/src/adContainer/helpers/createSlot.js new file mode 100644 index 00000000..acd7c286 --- /dev/null +++ b/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; diff --git a/src/adUnit/VpaidAdUnit.js b/src/adUnit/VpaidAdUnit.js index 6022089a..b43dc4d8 100644 --- a/src/adUnit/VpaidAdUnit.js +++ b/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); } } diff --git a/src/adUnit/__tests__/VpaidAdUnit.spec.js b/src/adUnit/__tests__/VpaidAdUnit.spec.js index 8dbadce2..c5d1fa19 100644 --- a/src/adUnit/__tests__/VpaidAdUnit.spec.js +++ b/src/adUnit/__tests__/VpaidAdUnit.spec.js @@ -96,6 +96,7 @@ describe('VpaidAdUnit', () => { } ]; videoAdContainer = new VideoAdContainer(document.createElement('DIV')); + videoAdContainer.slotElement = document.createElement('DIV'); }); afterEach(() => { diff --git a/src/adUnit/helpers/vpaid/__tests__/initAd.spec.js b/src/adUnit/helpers/vpaid/__tests__/initAd.spec.js index eaaa5780..9828cd77 100644 --- a/src/adUnit/helpers/vpaid/__tests__/initAd.spec.js +++ b/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' + }) + ); }); }); diff --git a/src/adUnit/helpers/vpaid/initAd.js b/src/adUnit/helpers/vpaid/initAd.js index 1e5f1f28..2273c22d 100644 --- a/src/adUnit/helpers/vpaid/initAd.js +++ b/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); };