diff options
Diffstat (limited to 'src/js/plugins/ads.js')
| -rw-r--r-- | src/js/plugins/ads.js | 120 |
1 files changed, 47 insertions, 73 deletions
diff --git a/src/js/plugins/ads.js b/src/js/plugins/ads.js index 4e405962..96e0ce61 100644 --- a/src/js/plugins/ads.js +++ b/src/js/plugins/ads.js @@ -1,8 +1,13 @@ +// ========================================================================== +// Advertisement plugin using Google IMA HTML5 SDK +// Create an account with our ad partner, vi here: +// https://www.vi.ai/publisher-video-monetization/ +// ========================================================================== + +/* global google */ + import utils from '../utils'; -/** - * Advertisements using Google IMA HTML5 SDK. - */ class Ads { /** * Ads constructor. @@ -49,7 +54,7 @@ class Ads { this.startSafetyTimer(12000, 'ready()'); // Setup a simple promise to resolve if the IMA loader is ready. - this.adsLoaderPromise = new Promise((resolve) => { + this.adsLoaderPromise = new Promise(resolve => { this.on('ADS_LOADER_LOADED', () => resolve()); }); this.adsLoaderPromise.then(() => { @@ -57,7 +62,7 @@ class Ads { }); // Setup a promise to resolve if the IMA manager is ready. - this.adsManagerPromise = new Promise((resolve) => { + this.adsManagerPromise = new Promise(resolve => { this.on('ADS_MANAGER_LOADED', () => resolve()); }); this.adsManagerPromise.then(() => { @@ -112,12 +117,8 @@ class Ads { this.adsLoader = new google.ima.AdsLoader(this.adDisplayContainer); // Listen and respond to ads loaded and error events. - this.adsLoader.addEventListener( - google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED, - event => this.onAdsManagerLoaded(event), false); - this.adsLoader.addEventListener( - google.ima.AdErrorEvent.Type.AD_ERROR, - error => this.onAdError(error), false); + this.adsLoader.addEventListener(google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED, event => this.onAdsManagerLoaded(event), false); + this.adsLoader.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, error => this.onAdError(error), false); // Request video ads. const adsRequest = new google.ima.AdsRequest(); @@ -161,7 +162,7 @@ class Ads { this.adsCuePoints = this.adsManager.getCuePoints(); // Add advertisement cue's within the time line if available. - this.adsCuePoints.forEach((cuePoint) => { + this.adsCuePoints.forEach(cuePoint => { if (cuePoint !== 0 && cuePoint !== -1) { const seekElement = this.player.elements.progress; if (seekElement) { @@ -177,56 +178,32 @@ class Ads { // Add listeners to the required events. // Advertisement error events. - this.adsManager.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, - error => this.onAdError(error)); + this.adsManager.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, error => this.onAdError(error)); // Advertisement regular events. - this.adsManager.addEventListener(google.ima.AdEvent.Type.AD_BREAK_READY, - event => this.onAdEvent(event)); - this.adsManager.addEventListener(google.ima.AdEvent.Type.AD_METADATA, - event => this.onAdEvent(event)); - this.adsManager.addEventListener(google.ima.AdEvent.Type.ALL_ADS_COMPLETED, - event => this.onAdEvent(event)); - this.adsManager.addEventListener(google.ima.AdEvent.Type.CLICK, - event => this.onAdEvent(event)); - this.adsManager.addEventListener(google.ima.AdEvent.Type.COMPLETE, - event => this.onAdEvent(event)); - this.adsManager.addEventListener(google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED, - event => this.onAdEvent(event)); - this.adsManager.addEventListener(google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED, - event => this.onAdEvent(event)); - this.adsManager.addEventListener(google.ima.AdEvent.Type.LOADED, - event => this.onAdEvent(event)); - this.adsManager.addEventListener(google.ima.AdEvent.Type.STARTED, - event => this.onAdEvent(event)); - this.adsManager.addEventListener(google.ima.AdEvent.Type.DURATION_CHANGE, - event => this.onAdEvent(event)); - this.adsManager.addEventListener(google.ima.AdEvent.Type.FIRST_QUARTILE, - event => this.onAdEvent(event)); - this.adsManager.addEventListener(google.ima.AdEvent.Type.IMPRESSION, - event => this.onAdEvent(event)); - this.adsManager.addEventListener(google.ima.AdEvent.Type.INTERACTION, - event => this.onAdEvent(event)); - this.adsManager.addEventListener(google.ima.AdEvent.Type.LINEAR_CHANGED, - event => this.onAdEvent(event)); - this.adsManager.addEventListener(google.ima.AdEvent.Type.MIDPOINT, - event => this.onAdEvent(event)); - this.adsManager.addEventListener(google.ima.AdEvent.Type.PAUSED, - event => this.onAdEvent(event)); - this.adsManager.addEventListener(google.ima.AdEvent.Type.RESUMED, - event => this.onAdEvent(event)); - this.adsManager.addEventListener(google.ima.AdEvent.Type.SKIPPABLE_STATE_CHANGED, - event => this.onAdEvent(event)); - this.adsManager.addEventListener(google.ima.AdEvent.Type.SKIPPED, - event => this.onAdEvent(event)); - this.adsManager.addEventListener(google.ima.AdEvent.Type.THIRD_QUARTILE, - event => this.onAdEvent(event)); - this.adsManager.addEventListener(google.ima.AdEvent.Type.USER_CLOSE, - event => this.onAdEvent(event)); - this.adsManager.addEventListener(google.ima.AdEvent.Type.VOLUME_CHANGED, - event => this.onAdEvent(event)); - this.adsManager.addEventListener(google.ima.AdEvent.Type.VOLUME_MUTED, - event => this.onAdEvent(event)); + this.adsManager.addEventListener(google.ima.AdEvent.Type.AD_BREAK_READY, event => this.onAdEvent(event)); + this.adsManager.addEventListener(google.ima.AdEvent.Type.AD_METADATA, event => this.onAdEvent(event)); + this.adsManager.addEventListener(google.ima.AdEvent.Type.ALL_ADS_COMPLETED, event => this.onAdEvent(event)); + this.adsManager.addEventListener(google.ima.AdEvent.Type.CLICK, event => this.onAdEvent(event)); + this.adsManager.addEventListener(google.ima.AdEvent.Type.COMPLETE, event => this.onAdEvent(event)); + this.adsManager.addEventListener(google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED, event => this.onAdEvent(event)); + this.adsManager.addEventListener(google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED, event => this.onAdEvent(event)); + this.adsManager.addEventListener(google.ima.AdEvent.Type.LOADED, event => this.onAdEvent(event)); + this.adsManager.addEventListener(google.ima.AdEvent.Type.STARTED, event => this.onAdEvent(event)); + this.adsManager.addEventListener(google.ima.AdEvent.Type.DURATION_CHANGE, event => this.onAdEvent(event)); + this.adsManager.addEventListener(google.ima.AdEvent.Type.FIRST_QUARTILE, event => this.onAdEvent(event)); + this.adsManager.addEventListener(google.ima.AdEvent.Type.IMPRESSION, event => this.onAdEvent(event)); + this.adsManager.addEventListener(google.ima.AdEvent.Type.INTERACTION, event => this.onAdEvent(event)); + this.adsManager.addEventListener(google.ima.AdEvent.Type.LINEAR_CHANGED, event => this.onAdEvent(event)); + this.adsManager.addEventListener(google.ima.AdEvent.Type.MIDPOINT, event => this.onAdEvent(event)); + this.adsManager.addEventListener(google.ima.AdEvent.Type.PAUSED, event => this.onAdEvent(event)); + this.adsManager.addEventListener(google.ima.AdEvent.Type.RESUMED, event => this.onAdEvent(event)); + this.adsManager.addEventListener(google.ima.AdEvent.Type.SKIPPABLE_STATE_CHANGED, event => this.onAdEvent(event)); + this.adsManager.addEventListener(google.ima.AdEvent.Type.SKIPPED, event => this.onAdEvent(event)); + this.adsManager.addEventListener(google.ima.AdEvent.Type.THIRD_QUARTILE, event => this.onAdEvent(event)); + this.adsManager.addEventListener(google.ima.AdEvent.Type.USER_CLOSE, event => this.onAdEvent(event)); + this.adsManager.addEventListener(google.ima.AdEvent.Type.VOLUME_CHANGED, event => this.onAdEvent(event)); + this.adsManager.addEventListener(google.ima.AdEvent.Type.VOLUME_MUTED, event => this.onAdEvent(event)); // Resolve our adsManager. this.handleEventListeners('ADS_MANAGER_LOADED'); @@ -241,7 +218,7 @@ class Ads { const { container } = this.player.elements; // Listen for events if debugging. - this.player.debug.log(`ads event: ${event.type}`); + this.player.debug.log(`Ads event: ${event.type}`); // Retrieve the ad from the event. Some events (e.g. ALL_ADS_COMPLETED) // don't have ad object associated. @@ -319,7 +296,7 @@ class Ads { */ onAdError(adErrorEvent) { this.cancel(); - this.player.debug.log('Ads error.', adErrorEvent); + this.player.debug.log('Ads error', adErrorEvent); } /** @@ -354,8 +331,7 @@ class Ads { // Listen to the resizing of the window. And resize ad accordingly. window.addEventListener('resize', () => { - this.adsManager.resize(container.offsetWidth, container.offsetHeight, - google.ima.ViewMode.NORMAL); + this.adsManager.resize(container.offsetWidth, container.offsetHeight, google.ima.ViewMode.NORMAL); }); } @@ -376,10 +352,8 @@ class Ads { try { if (!this.initialized) { - // Initialize the ads manager. Ad rules playlist will start at this time. - this.adsManager.init(container.offsetWidth, container.offsetHeight, - google.ima.ViewMode.NORMAL); + this.adsManager.init(container.offsetWidth, container.offsetHeight, google.ima.ViewMode.NORMAL); // Call play to start showing the ad. Single video and overlay ads will // start at this time; the call will be ignored for ad rules. @@ -399,7 +373,7 @@ class Ads { * Resume our video. */ resumeContent() { - this.player.debug.log('Resume video.'); + this.player.debug.log('Resume video'); // Hide our ad container. this.adsContainer.style.display = 'none'; @@ -417,7 +391,7 @@ class Ads { * Pause our video. */ pauseContent() { - this.player.debug.log('Pause video.'); + this.player.debug.log('Pause video'); // Show our ad container. this.adsContainer.style.display = 'block'; @@ -436,7 +410,7 @@ class Ads { * media-ads/docs/sdks/android/faq#8 */ cancel() { - this.player.debug.warn('Ad cancelled.'); + this.player.debug.warn('Ad cancelled'); // Pause our video. this.resumeContent(); @@ -460,7 +434,7 @@ class Ads { } // Re-set our adsManager promises. - this.adsManagerPromise = new Promise((resolve) => { + this.adsManagerPromise = new Promise(resolve => { this.on('ADS_MANAGER_LOADED', () => resolve()); this.player.debug.log(this.adsManager); }); @@ -503,7 +477,7 @@ class Ads { * @param {String} from */ startSafetyTimer(time, from) { - this.player.debug.log(`Safety timer invoked from: ${from}.`); + this.player.debug.log(`Safety timer invoked from: ${from}`); this.safetyTimer = window.setTimeout(() => { this.cancel(); this.clearSafetyTimer('startSafetyTimer()'); @@ -516,7 +490,7 @@ class Ads { */ clearSafetyTimer(from) { if (typeof this.safetyTimer !== 'undefined' && this.safetyTimer !== null) { - this.player.debug.log(`Safety timer cleared from: ${from}.`); + this.player.debug.log(`Safety timer cleared from: ${from}`); clearTimeout(this.safetyTimer); this.safetyTimer = undefined; } |