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.playing = 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 = {
container: null,
displayContainer: null,
@ -75,26 +46,50 @@ class Ads {
this.safetyTimer = null;
this.countdownTimer = null;
// Set listeners on the Plyr instance
this.listeners();
if (this.enabled) {
// 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
// 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
// Setup a promise to resolve when the IMA manager is ready
this.managerPromise = new Promise((resolve, reject) => {
// The ad is pre-loaded and ready
this.on('ADS_MANAGER_LOADED', () => resolve());
// Ads failed
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
this.managerPromise.then(() => {
this.clearSafetyTimer('onAdsManagerLoaded()');
});
// Set listeners on the Plyr instance
this.listeners();
// Setup the IMA SDK
this.setupIMA();
}

View File

@ -309,14 +309,15 @@ class Plyr {
* Play the media, or play the advertisement (if they are not blocked)
*/
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.play();
}).catch(() => {
this.media.play();
return this.media.play();
});
} else {
this.media.play();
return this.media.play();
}
}

View File

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