Ad block detection would not work when calling play() right after creating the player instance, so the adsManager now also rejects on such a case. Also made sure that calling play() will wait for the adsManager promise to resolve or otherwise return the media.play() method.

This commit is contained in:
Arthur Hulsman 2018-03-09 11:17:24 +01:00
parent 819f7d1080
commit 69ffcbad27
3 changed files with 37 additions and 45 deletions

View File

@ -35,35 +35,6 @@ class Ads {
this.enabled = player.config.ads.enabled; this.enabled = player.config.ads.enabled;
this.playing = false; this.playing = false;
this.initialized = false; this.initialized = false;
this.blocked = false;
// Check if ads are enabled.
if (!this.enabled) {
return;
}
// Check if the Google IMA3 SDK is loaded or load it ourselves
if (!utils.is.object(window.google)) {
utils.loadScript(
player.config.urls.googleIMA.api,
() => {
this.ready();
},
() => {
// Script failed to load or is blocked
this.blocked = true;
this.player.debug.log('Ads error: Google IMA SDK failed to load');
},
);
} else {
this.ready();
}
}
/**
* Get the ads instance ready.
*/
ready() {
this.elements = { this.elements = {
container: null, container: null,
displayContainer: null, displayContainer: null,
@ -75,26 +46,50 @@ class Ads {
this.safetyTimer = null; this.safetyTimer = null;
this.countdownTimer = null; this.countdownTimer = null;
// Set listeners on the Plyr instance if (this.enabled) {
this.listeners(); // Check if the Google IMA3 SDK is loaded or load it ourselves
if (!utils.is.object(window.google)) {
utils.loadScript(
player.config.urls.googleIMA.api,
() => {
this.ready();
},
() => {
// Script failed to load or is blocked
this.handleEventListeners('ERROR');
this.player.debug.log('Ads error: Google IMA SDK failed to load');
},
);
} else {
this.ready();
}
}
// Start ticking our safety timer. If the whole advertisement // Setup a promise to resolve when the IMA manager is ready
// thing doesn't resolve within our set time; we bail
this.startSafetyTimer(12000, 'ready()');
// Setup a promise to resolve if the IMA manager is ready
this.managerPromise = new Promise((resolve, reject) => { this.managerPromise = new Promise((resolve, reject) => {
// The ad is pre-loaded and ready // The ad is pre-loaded and ready
this.on('ADS_MANAGER_LOADED', () => resolve()); this.on('ADS_MANAGER_LOADED', () => resolve());
// Ads failed // Ads failed
this.on('ERROR', () => reject()); this.on('ERROR', () => reject());
}); });
}
/**
* Get the ads instance ready.
*/
ready() {
// Start ticking our safety timer. If the whole advertisement
// thing doesn't resolve within our set time; we bail
this.startSafetyTimer(12000, 'ready()');
// Clear the safety timer // Clear the safety timer
this.managerPromise.then(() => { this.managerPromise.then(() => {
this.clearSafetyTimer('onAdsManagerLoaded()'); this.clearSafetyTimer('onAdsManagerLoaded()');
}); });
// Set listeners on the Plyr instance
this.listeners();
// Setup the IMA SDK // Setup the IMA SDK
this.setupIMA(); this.setupIMA();
} }

View File

@ -309,14 +309,15 @@ class Plyr {
* Play the media, or play the advertisement (if they are not blocked) * Play the media, or play the advertisement (if they are not blocked)
*/ */
play() { play() {
if (this.ads.enabled && !this.ads.initialized && !this.ads.blocked) { // Return the promise (for HTML5)
if (this.ads.enabled && !this.ads.initialized) {
this.ads.managerPromise.then(() => { this.ads.managerPromise.then(() => {
this.ads.play(); this.ads.play();
}).catch(() => { }).catch(() => {
this.media.play(); return this.media.play();
}); });
} else { } else {
this.media.play(); return this.media.play();
} }
} }

View File

@ -12,15 +12,11 @@
z-index: -1; // Hide it. z-index: -1; // Hide it.
// Make sure the inner container is big enough for the ad creative. // Make sure the inner container is big enough for the ad creative.
> div { > div,
> div iframe {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%; height: 100%;
iframe {
position: absolute;
width: 100%;
height: 100%;
}
} }
&::after { &::after {