Ads bug fixes

1 files changed, 68 insertions, 48 deletions

diff --git a/dist/plyr.polyfilled.js b/dist/plyr.polyfilled.js
index f23fac5f..2371cb37 100644
--- a/dist/plyr.polyfilled.js
+++ b/dist/plyr.polyfilled.js
@@ -3189,6 +3189,10 @@ typeof navigator === "object" && (function (global, factory) {
     return instanceOf(input, TextTrack) || !isNullOrUndefined(input) && isString(input.kind);
   };
 
+  var isPromise = function isPromise(input) {
+    return instanceOf(input, Promise);
+  };
+
   var isEmpty = function isEmpty(input) {
     return isNullOrUndefined(input) || (isString(input) || isArray(input) || isNodeList(input)) && !input.length || isObject(input) && !Object.keys(input).length;
   };
@@ -3234,6 +3238,7 @@ typeof navigator === "object" && (function (global, factory) {
     keyboardEvent: isKeyboardEvent,
     cue: isCue,
     track: isTrack,
+    promise: isPromise,
     url: isUrl,
     empty: isEmpty
   };
@@ -3723,6 +3728,28 @@ typeof navigator === "object" && (function (global, factory) {
         ui: ui
       };
     },
+    // Detect support for autoplay
+
+    /* autoplay: (() => {
+        const video = document.createElement('video');
+        video.src = 'https://cdn.plyr.io/static/blank.mp4';
+        const promise = video.play();
+         if (is.promise(promise)) {
+            console.warn('PROMISE', promise);
+             promise
+                .then(() => {
+                    console.warn('supported');
+                    return true;
+                })
+                .catch(() => {
+                    console.warn('not supported');
+                    return false;
+                });
+        } else {
+            console.warn('supported - no promise');
+            return true;
+        }
+    })(), */
     // Picture-in-picture support
     // Safari & Chrome only currently
     pip: function () {
@@ -6261,7 +6288,7 @@ typeof navigator === "object" && (function (global, factory) {
     // 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',
     // Quality default
@@ -7591,23 +7618,6 @@ typeof navigator === "object" && (function (global, factory) {
 
         on.call(player, player.media, 'waiting canplay seeked playing', function (event) {
           return 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', function () {
-          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(function () {
-              return player.ads.play();
-            }).catch(function () {
-              return player.play();
-            });
-          }
         }); // Click video
 
         if (player.supported.ui && player.config.clickToPlay && !player.isAudio) {
@@ -9215,10 +9225,11 @@ typeof navigator === "object" && (function (global, factory) {
 
         google.ima.settings.setVpaidMode(google.ima.ImaSdkSettings.VpaidMode.ENABLED); // 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
+        google.ima.settings.setLocale(this.player.config.ads.language); // 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); // Request video ads to be pre-loaded
+        this.elements.displayContainer = new google.ima.AdDisplayContainer(this.elements.container, this.player.media); // Request video ads to be pre-loaded
 
         this.requestAds();
       }
@@ -9558,11 +9569,9 @@ typeof navigator === "object" && (function (global, factory) {
         // Hide the advertisement container
         this.elements.container.style.zIndex = ''; // Ad is stopped
 
-        this.playing = false; // Play our video
+        this.playing = false; // Play video
 
-        if (this.player.currentTime < this.player.duration) {
-          this.player.play();
-        }
+        this.player.media.play();
       }
       /**
        * Pause our video
@@ -9572,11 +9581,11 @@ typeof navigator === "object" && (function (global, factory) {
       key: "pauseContent",
       value: function pauseContent() {
         // Show the advertisement container
-        this.elements.container.style.zIndex = 3; // Ad is playing.
+        this.elements.container.style.zIndex = 3; // Ad is playing
 
         this.playing = true; // Pause our video.
 
-        this.player.pause();
+        this.player.media.pause();
       }
       /**
        * Destroy the adsManager so we can grab new ads after this. If we don't then we're not
@@ -9979,8 +9988,8 @@ typeof navigator === "object" && (function (global, factory) {
         }
       }
     }, {
-      key: "finishScrubbing",
-      value: function finishScrubbing() {
+      key: "endScrubbing",
+      value: function endScrubbing() {
         var _this4 = this;
 
         this.mouseDown = false; // Hide scrubbing preview. But wait until the video has successfully seeked before hiding the scrubbing preview
@@ -10822,8 +10831,19 @@ typeof navigator === "object" && (function (global, factory) {
        * Play the media, or play the advertisement (if they are not blocked)
        */
       value: function play() {
+        var _this2 = this;
+
         if (!is$1.function(this.media.play)) {
           return null;
+        } // Intecept play with ads
+
+
+        if (this.ads && this.ads.enabled) {
+          this.ads.managerPromise.then(function () {
+            return _this2.ads.play();
+          }).catch(function () {
+            return _this2.media.play();
+          });
         } // Return the promise (for HTML5)
 
 
@@ -11041,7 +11061,7 @@ typeof navigator === "object" && (function (global, factory) {
     }, {
       key: "destroy",
       value: function destroy(callback) {
-        var _this2 = this;
+        var _this3 = this;
 
         var soft = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
 
@@ -11053,20 +11073,20 @@ typeof navigator === "object" && (function (global, factory) {
           // Reset overflow (incase destroyed while in fullscreen)
           document.body.style.overflow = ''; // GC for embed
 
-          _this2.embed = null; // If it's a soft destroy, make minimal changes
+          _this3.embed = null; // If it's a soft destroy, make minimal changes
 
           if (soft) {
-            if (Object.keys(_this2.elements).length) {
+            if (Object.keys(_this3.elements).length) {
               // Remove elements
-              removeElement(_this2.elements.buttons.play);
-              removeElement(_this2.elements.captions);
-              removeElement(_this2.elements.controls);
-              removeElement(_this2.elements.wrapper); // Clear for GC
-
-              _this2.elements.buttons.play = null;
-              _this2.elements.captions = null;
-              _this2.elements.controls = null;
-              _this2.elements.wrapper = null;
+              removeElement(_this3.elements.buttons.play);
+              removeElement(_this3.elements.captions);
+              removeElement(_this3.elements.controls);
+              removeElement(_this3.elements.wrapper); // Clear for GC
+
+              _this3.elements.buttons.play = null;
+              _this3.elements.captions = null;
+              _this3.elements.controls = null;
+              _this3.elements.wrapper = null;
             } // Callback
 
 
@@ -11075,22 +11095,22 @@ typeof navigator === "object" && (function (global, factory) {
             }
           } else {
             // Unbind listeners
-            unbindListeners.call(_this2); // Replace the container with the original element provided
+            unbindListeners.call(_this3); // Replace the container with the original element provided
 
-            replaceElement(_this2.elements.original, _this2.elements.container); // Event
+            replaceElement(_this3.elements.original, _this3.elements.container); // Event
 
-            triggerEvent.call(_this2, _this2.elements.original, 'destroyed', true); // Callback
+            triggerEvent.call(_this3, _this3.elements.original, 'destroyed', true); // Callback
 
             if (is$1.function(callback)) {
-              callback.call(_this2.elements.original);
+              callback.call(_this3.elements.original);
             } // Reset state
 
 
-            _this2.ready = false; // Clear for garbage collection
+            _this3.ready = false; // Clear for garbage collection
 
             setTimeout(function () {
-              _this2.elements = null;
-              _this2.media = null;
+              _this3.elements = null;
+              _this3.media = null;
             }, 200);
           }
         }; // Stop playback