ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Moved the logic for pausing and playing the video to content pause/ resume IMA events to avoid flickering. Also used events for resolving the adsmanager and adsloader promises.

Browse Source
This commit is contained in:
Arthur Hulsman 2018-01-17 11:32:13 +01:00
parent 8348f79742
commit 12a7a4142c
1 changed files with 32 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
src/js/plugins/ads.js
View File

@ -51,20 +51,20 @@ class Ads {
this.events = {}; this.events = {};
this.safetyTimer = null; this.safetyTimer = null;
// Set listeners on the Plyr instance.
this.setupListeners();
// Setup a simple promise to resolve if the IMA loader is ready. // Setup a simple promise to resolve if the IMA loader is ready.
this.adsLoaderResolve = () => {};
this.adsLoaderPromise = new Promise((resolve) => { this.adsLoaderPromise = new Promise((resolve) => {
this.adsLoaderResolve = resolve; this.on('ADS_LOADER_LOADED', () => resolve());
}); });
this.adsLoaderPromise.then(() => { this.adsLoaderPromise.then(() => {
this.player.debug.log(`[${(Date.now() - this.time) / 1000}s][IMA SDK] adsLoader resolved!`, this.adsLoader); this.player.debug.log(`[${(Date.now() - this.time) / 1000}s][IMA SDK] adsLoader resolved!`, this.adsLoader);
}); });
// Setup a promise to resolve if the IMA manager is ready. // Setup a promise to resolve if the IMA manager is ready.
this.adsManagerResolve = () => {};
this.adsManagerPromise = new Promise((resolve) => { this.adsManagerPromise = new Promise((resolve) => {
// Resolve our promise. this.on('ADS_MANAGER_LOADED', () => resolve());
this.adsManagerResolve = resolve;
}); });
this.adsManagerPromise.then(() => { this.adsManagerPromise.then(() => {
// Clear the safety timer. // Clear the safety timer.
@ -81,9 +81,6 @@ class Ads {
// Setup the IMA SDK. // Setup the IMA SDK.
this.setupIMA(); this.setupIMA();
// Set listeners on the Plyr instance.
this.setupListeners();
} }
setupIMA() { setupIMA() {
@ -109,7 +106,7 @@ class Ads {
this.adsLoader.requestAds(adsRequest); this.adsLoader.requestAds(adsRequest);
this.adsLoaderResolve(); this.handleEventListeners('ADS_LOADER_LOADED');
} }
onAdsManagerLoaded(adsManagerLoadedEvent) { onAdsManagerLoaded(adsManagerLoadedEvent) {
@ -141,7 +138,7 @@ class Ads {
this.adsManager.addEventListener(google.ima.AdEvent.Type.COMPLETE, event => this.onAdEvent(event)); this.adsManager.addEventListener(google.ima.AdEvent.Type.COMPLETE, event => this.onAdEvent(event));
// Resolve our adsManager. // Resolve our adsManager.
this.adsManagerResolve(); this.handleEventListeners('ADS_MANAGER_LOADED');
} }
onAdEvent(event) { onAdEvent(event) {
@ -160,12 +157,7 @@ class Ads {
switch (event.type) { switch (event.type) {
case google.ima.AdEvent.Type.AD_BREAK_READY: case google.ima.AdEvent.Type.AD_BREAK_READY:
// This event indicates that a mid-roll ad is ready to start.
// We pause the player and tell the adsManager to start playing the ad.
this.player.debug.log(`[${(Date.now() - this.time) / 1000}s][IMA SDK] AD_BREAK_READY |`, 'Fired when an ad rule or a VMAP ad break would have played if autoPlayAdBreaks is false.'); this.player.debug.log(`[${(Date.now() - this.time) / 1000}s][IMA SDK] AD_BREAK_READY |`, 'Fired when an ad rule or a VMAP ad break would have played if autoPlayAdBreaks is false.');
// this.handleEventListeners('AD_BREAK_READY');
// this.playing = true;
// this.adsManager.start();
break; break;
case google.ima.AdEvent.Type.AD_METADATA: case google.ima.AdEvent.Type.AD_METADATA:
this.player.debug.log(`[${(Date.now() - this.time) / 1000}s][IMA SDK] AD_METADATA |`, 'Fired when an ads list is loaded.'); this.player.debug.log(`[${(Date.now() - this.time) / 1000}s][IMA SDK] AD_METADATA |`, 'Fired when an ads list is loaded.');
@ -178,29 +170,36 @@ class Ads {
this.player.debug.log(`[${(Date.now() - this.time) / 1000}s][IMA SDK] CLICK |`, 'Fired when the ad is clicked.'); this.player.debug.log(`[${(Date.now() - this.time) / 1000}s][IMA SDK] CLICK |`, 'Fired when the ad is clicked.');
break; break;
case google.ima.AdEvent.Type.COMPLETE: case google.ima.AdEvent.Type.COMPLETE:
this.player.debug.log(`[${(Date.now() - this.time) / 1000}s][IMA SDK] COMPLETE |`, 'Fired when the ad completes playing.');
break;
case google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED:
// This event indicates the ad has started - the video player
// can adjust the UI, for example display a pause button and
// remaining time.
this.player.debug.log(`[${(Date.now() - this.time) / 1000}s][IMA SDK] CONTENT_PAUSE_REQUESTED |`, 'Fired when content should be paused. This usually happens right before an ad is about to cover the content.');
this.handleEventListeners('CONTENT_PAUSE_REQUESTED');
// Show our advertiment container.
this.adsDisplayElement.style.display = 'block';
this.playing = true;
// Pause our video.
this.player.pause();
break;
case google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED:
// This event indicates the ad has finished - the video player // This event indicates the ad has finished - the video player
// can perform appropriate UI actions, such as removing the timer for // can perform appropriate UI actions, such as removing the timer for
// remaining time detection. // remaining time detection.
// clearInterval(intervalTimer);
this.player.debug.log(`[${(Date.now() - this.time) / 1000}s][IMA SDK] COMPLETE |`, 'Fired when the ad completes playing.');
this.handleEventListeners('COMPLETE');
this.playing = false;
this.adsDisplayElement.style.display = 'none';
if (this.player.currentTime < this.player.duration) {
this.player.play();
}
break;
case google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED:
this.player.debug.log(`[${(Date.now() - this.time) / 1000}s][IMA SDK] CONTENT_PAUSE_REQUESTED |`, 'Fired when content should be paused. This usually happens right before an ad is about to cover the content.');
this.handleEventListeners('CONTENT_PAUSE_REQUESTED');
this.player.pause();
break;
case google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED:
this.player.debug.log(`[${(Date.now() - this.time) / 1000}s][IMA SDK] CONTENT_RESUME_REQUESTED |`, 'Fired when content should be resumed. This usually happens when an ad finishes or collapses.'); this.player.debug.log(`[${(Date.now() - this.time) / 1000}s][IMA SDK] CONTENT_RESUME_REQUESTED |`, 'Fired when content should be resumed. This usually happens when an ad finishes or collapses.');
this.handleEventListeners('CONTENT_RESUME_REQUESTED'); this.handleEventListeners('CONTENT_RESUME_REQUESTED');
// Hide the advertisement container.
this.adsDisplayElement.style.display = 'none';
this.playing = false;
// Play our video.
if (this.player.currentTime < this.player.duration) { if (this.player.currentTime < this.player.duration) {
this.player.play(); this.player.play();
} }
@ -211,9 +210,6 @@ class Ads {
this.player.debug.log(`[${(Date.now() - this.time) / 1000}s][IMA SDK] LOADED |`, event.getAd().getContentType()); this.player.debug.log(`[${(Date.now() - this.time) / 1000}s][IMA SDK] LOADED |`, event.getAd().getContentType());
this.handleEventListeners('LOADED'); this.handleEventListeners('LOADED');
// Show the ad display element.
this.adsDisplayElement.style.display = 'block';
if (!ad.isLinear()) { if (!ad.isLinear()) {
// Position AdDisplayContainer correctly for overlay. // Position AdDisplayContainer correctly for overlay.
ad.width = container.offsetWidth; ad.width = container.offsetWidth;
@ -224,13 +220,7 @@ class Ads {
// console.info('Ad time: ' + event.getAd().getAdPodInfo().getTimeOffset()); // console.info('Ad time: ' + event.getAd().getAdPodInfo().getTimeOffset());
break; break;
case google.ima.AdEvent.Type.STARTED: case google.ima.AdEvent.Type.STARTED:
// This event indicates the ad has started - the video player
// can adjust the UI, for example display a pause button and
// remaining time.
this.player.debug.log(`[${(Date.now() - this.time) / 1000}s][IMA SDK] STARTED |`, 'Fired when the ad starts playing.'); this.player.debug.log(`[${(Date.now() - this.time) / 1000}s][IMA SDK] STARTED |`, 'Fired when the ad starts playing.');
this.player.pause();
this.playing = true;
this.handleEventListeners('STARTED');
break; break;
case google.ima.AdEvent.Type.DURATION_CHANGE: case google.ima.AdEvent.Type.DURATION_CHANGE:
this.player.debug.log(`[${(Date.now() - this.time) / 1000}s][IMA SDK] DURATION_CHANGE |`, 'Fired when the ad\'s duration changes.'); this.player.debug.log(`[${(Date.now() - this.time) / 1000}s][IMA SDK] DURATION_CHANGE |`, 'Fired when the ad\'s duration changes.');