Ads bug fixes

src/js/config/defaults.js

@@ -60,7 +60,7 @@ const defaults = {
     // Sprite (for icons)
     loadSprite: true,
     iconPrefix: 'plyr',
-    iconUrl: 'https://cdn.plyr.io/3.4.8/plyr.svg',
+    iconUrl: 'https://cdn.plyr.io/3.5.0-beta.3/plyr.svg',
 
     // Blank video (used to prevent errors on source change)
     blankVideo: 'https://cdn.plyr.io/static/blank.mp4',

src/js/listeners.js

@@ -414,20 +414,6 @@ class Listeners {
         // Loading state
         on.call(player, player.media, 'waiting canplay seeked playing', event => ui.checkLoading.call(player, event));
 
-        // If autoplay, then load advertisement if required
-        // TODO: Show some sort of loading state while the ad manager loads else there's a delay before ad shows
-        on.call(player, player.media, 'playing', () => {
-            if (!player.ads) {
-                return;
-            }
-
-            // If ads are enabled, wait for them first
-            if (player.ads.enabled && !player.ads.initialized) {
-                // Wait for manager response
-                player.ads.managerPromise.then(() => player.ads.play()).catch(() => player.play());
-            }
-        });
-
         // Click video
         if (player.supported.ui && player.config.clickToPlay && !player.isAudio) {
             // Re-fetch the wrapper

src/js/plugins/ads.js

@@ -136,6 +136,7 @@ class Ads {
         this.elements.container = createElement('div', {
             class: this.player.config.classNames.ads,
         });
+
         this.player.elements.container.appendChild(this.elements.container);
 
         // So we can run VPAID2
@@ -144,9 +145,11 @@ class Ads {
         // Set language
         google.ima.settings.setLocale(this.player.config.ads.language);
 
-        // We assume the adContainer is the video container of the plyr element
-        // that will house the ads
-        this.elements.displayContainer = new google.ima.AdDisplayContainer(this.elements.container);
+        // Set playback for iOS10+
+        google.ima.settings.setDisableCustomPlaybackForIOS10Plus(this.player.config.playsinline);
+
+        // We assume the adContainer is the video container of the plyr element that will house the ads
+        this.elements.displayContainer = new google.ima.AdDisplayContainer(this.elements.container, this.player.media);
 
         // Request video ads to be pre-loaded
         this.requestAds();
@@ -488,10 +491,8 @@ class Ads {
         // Ad is stopped
         this.playing = false;
 
-        // Play our video
-        if (this.player.currentTime < this.player.duration) {
-            this.player.play();
-        }
+        // Play video
+        this.player.media.play();
     }
 
     /**
@@ -501,11 +502,11 @@ class Ads {
         // Show the advertisement container
         this.elements.container.style.zIndex = 3;
 
-        // Ad is playing.
+        // Ad is playing
         this.playing = true;
 
         // Pause our video.
-        this.player.pause();
+        this.player.media.pause();
     }
 
     /**

src/js/plugins/previewThumbnails.js

@@ -231,7 +231,7 @@ class PreviewThumbnails {
         }
     }
 
-    finishScrubbing() {
+    endScrubbing() {
         this.mouseDown = false;
 
         // Hide scrubbing preview. But wait until the video has successfully seeked before hiding the scrubbing preview

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v3.4.8
+// plyr.js v3.5.0-beta.3
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================
@@ -353,6 +353,11 @@ class Plyr {
             return null;
         }
 
+        // Intecept play with ads
+        if (this.ads && this.ads.enabled) {
+            this.ads.managerPromise.then(() => this.ads.play()).catch(() => this.media.play());
+        }
+
         // Return the promise (for HTML5)
         return this.media.play();
     }

src/js/plyr.polyfilled.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr Polyfilled Build
-// plyr.js v3.4.8
+// plyr.js v3.5.0-beta.3
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================

src/js/utils/is.js

@@ -19,6 +19,7 @@ const isEvent = input => instanceOf(input, Event);
 const isKeyboardEvent = input => instanceOf(input, KeyboardEvent);
 const isCue = input => instanceOf(input, window.TextTrackCue) || instanceOf(input, window.VTTCue);
 const isTrack = input => instanceOf(input, TextTrack) || (!isNullOrUndefined(input) && isString(input.kind));
+const isPromise = input => instanceOf(input, Promise);
 
 const isEmpty = input =>
     isNullOrUndefined(input) ||
@@ -65,6 +66,7 @@ export default {
     keyboardEvent: isKeyboardEvent,
     cue: isCue,
     track: isTrack,
+    promise: isPromise,
     url: isUrl,
     empty: isEmpty,
 };