Merge pull request #802 from gehaktmolen/ad-hotfixes

Advertisement couldnt be loaded when creative dimensions do not align after resizing

src/js/defaults.js

@@ -259,7 +259,7 @@ const defaults = {
         // Ads
         'adsloaded',
         'adscontentpause',
-        'adsconentresume',
+        'adscontentresume',
         'adstarted',
         'adsmidpoint',
         'adscomplete',

src/js/plugins/ads.js

@@ -35,36 +35,6 @@ class Ads {
         this.enabled = player.config.ads.enabled;
         this.playing = false;
         this.initialized = false;
-        this.blocked = false;
-        this.enabled = utils.is.url(player.config.ads.tag);
-
-        // Check if a tag URL is provided.
-        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,
@@ -76,28 +46,50 @@ class Ads {
         this.safetyTimer = 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();
+            }
+        }
 
+        // 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()');
 
-        // Setup a simple promise to resolve if the IMA loader is ready
-        this.loaderPromise = new Promise(resolve => {
-            this.on('ADS_LOADER_LOADED', () => resolve());
-        });
-
-        // Setup a promise to resolve if the IMA manager is ready
-        this.managerPromise = new Promise(resolve => {
-            this.on('ADS_MANAGER_LOADED', () => resolve());
-        });
-
         // Clear the safety timer
         this.managerPromise.then(() => {
             this.clearSafetyTimer('onAdsManagerLoaded()');
         });
 
+        // Set listeners on the Plyr instance
+        this.listeners();
+
         // Setup the IMA SDK
         this.setupIMA();
     }
@@ -114,7 +106,6 @@ class Ads {
         // Create the container for our advertisements
         this.elements.container = utils.createElement('div', {
             class: this.player.config.classNames.ads,
-            hidden: '',
         });
         this.player.elements.container.appendChild(this.elements.container);
 
@@ -209,7 +200,7 @@ class Ads {
 
         // Add advertisement cue's within the time line if available
         this.cuePoints.forEach(cuePoint => {
-            if (cuePoint !== 0 && cuePoint !== -1) {
+            if (cuePoint !== 0 && cuePoint !== -1 && cuePoint < this.player.duration) {
                 const seekElement = this.player.elements.progress;
 
                 if (seekElement) {
@@ -454,8 +445,8 @@ class Ads {
      * Resume our video.
      */
     resumeContent() {
-        // Hide our ad container
+        // Hide the advertisement container
-        utils.toggleHidden(this.elements.container, true);
+        this.elements.container.style.zIndex = '';
 
         // Ad is stopped
         this.playing = false;
@@ -470,8 +461,8 @@ class Ads {
      * Pause our video
      */
     pauseContent() {
-        // Show our ad container.
+        // Show the advertisement container
-        utils.toggleHidden(this.elements.container, false);
+        this.elements.container.style.zIndex = '3';
 
         // Ad is playing.
         this.playing = true;
@@ -512,7 +503,7 @@ class Ads {
 
             // Re-set our adsManager promises
             this.managerPromise = new Promise(resolve => {
-                this.on('ADS_MANAGER_LOADED', () => resolve());
+                this.on('ADS_MANAGER_LOADED', resolve);
                 this.player.debug.log(this.manager);
             });
 

src/js/plyr.js

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

src/sass/plugins/ads.scss

@@ -9,7 +9,15 @@
     position: absolute;
     right: 0;
     top: 0;
-    z-index: 3; // Above the controls
+    z-index: -1; // Hide it.
+
+    // Make sure the inner container is big enough for the ad creative.
+    > div,
+    > div iframe {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+    }
 
     &::after {
         background: rgba($plyr-color-gunmetal, 0.8);