Ads bug fixes

demo/dist/demo.js

@@ -4255,6 +4255,10 @@ typeof navigator === "object" && (function () {
 	  return instanceOf(input, TextTrack) || !isNullOrUndefined(input) && isString$2(input.kind);
 	};
 
+	var isPromise = function isPromise(input) {
+	  return instanceOf(input, Promise);
+	};
+
 	var isEmpty = function isEmpty(input) {
 	  return isNullOrUndefined(input) || (isString$2(input) || isArray$2(input) || isNodeList(input)) && !input.length || isObject$2(input) && !Object.keys(input).length;
 	};
@@ -4300,6 +4304,7 @@ typeof navigator === "object" && (function () {
 	  keyboardEvent: isKeyboardEvent,
 	  cue: isCue,
 	  track: isTrack,
+	  promise: isPromise,
 	  url: isUrl,
 	  empty: isEmpty
 	};
@@ -4791,6 +4796,28 @@ typeof navigator === "object" && (function () {
 	      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 () {
@@ -7283,7 +7310,7 @@ typeof navigator === "object" && (function () {
 	  // 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
@@ -8603,23 +8630,6 @@ typeof navigator === "object" && (function () {
 
 	      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) {
@@ -10180,10 +10190,11 @@ typeof navigator === "object" && (function () {
 
 	      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+
 
-	      this.elements.displayContainer = new google.ima.AdDisplayContainer(this.elements.container); // Request video ads to be pre-loaded
+	      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();
 	    }
@@ -10523,11 +10534,9 @@ typeof navigator === "object" && (function () {
 	      // 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
@@ -10537,11 +10546,11 @@ typeof navigator === "object" && (function () {
 	    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
@@ -10930,8 +10939,8 @@ typeof navigator === "object" && (function () {
 	      }
 	    }
 	  }, {
-	    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
@@ -11773,8 +11782,19 @@ typeof navigator === "object" && (function () {
 	     * Play the media, or play the advertisement (if they are not blocked)
 	     */
 	    value: function play() {
+	      var _this2 = this;
+
 	      if (!is.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)
 
 
@@ -11992,7 +12012,7 @@ typeof navigator === "object" && (function () {
 	  }, {
 	    key: "destroy",
 	    value: function destroy(callback) {
-	      var _this2 = this;
+	      var _this3 = this;
 
 	      var soft = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
 
@@ -12004,20 +12024,20 @@ typeof navigator === "object" && (function () {
 	        // 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
+	            removeElement(_this3.elements.buttons.play);
+	            removeElement(_this3.elements.captions);
+	            removeElement(_this3.elements.controls);
+	            removeElement(_this3.elements.wrapper); // Clear for GC
 
-	            _this2.elements.buttons.play = null;
-	            _this2.elements.captions = null;
-	            _this2.elements.controls = null;
-	            _this2.elements.wrapper = null;
+	            _this3.elements.buttons.play = null;
+	            _this3.elements.captions = null;
+	            _this3.elements.controls = null;
+	            _this3.elements.wrapper = null;
 	          } // Callback
 
 
@@ -12026,22 +12046,22 @@ typeof navigator === "object" && (function () {
 	          }
 	        } 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.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
@@ -12723,7 +12743,12 @@ typeof navigator === "object" && (function () {
 
 	          focused.classList.add(tabClassName);
 	        }, 10);
-	      }); // Setup the player
+	      });
+	      var userType = 'annon';
+	      var contentType = 'on-demand';
+	      var cmsid = 2490180;
+	      var vid = 3788;
+	      var tagUrl = "https://pubads.g.doubleclick.net/gampad/live/ads?sz=640x360&iu=/21736521837/ovo/web&impl=s&gdfp_req=1&env=vp&output=vast&cust_params=usergroup%3D".concat(userType, "%26content-type%3D").concat(contentType, "&cmsid=").concat(cmsid, "&vid=").concat(vid); // Setup the player
 
 	      var player = new Plyr(selector, {
 	        debug: true,
@@ -12742,8 +12767,9 @@ typeof navigator === "object" && (function () {
 	          google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c'
 	        },
 	        ads: {
-	          enabled: env.prod || env.dev,
-	          publisherId: '918848828995742'
+	          enabled: true,
+	          // env.prod || env.dev,
+	          tagUrl: tagUrl
 	        },
 	        previewThumbnails: {
 	          enabled: true,