Plugin tweaks for ads and previews

demo/dist/demo.js

@@ -4156,8 +4156,10 @@ typeof navigator === "object" && (function () {
 	          google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c'
 	        },
 	        ads: {
-	          enabled: env.prod || env.dev,
+	          enabled: true,
-	          publisherId: '918848828995742'
+	          // env.prod || env.dev,
+	          publisherId: '918848828995742',
+	          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%3Dannon%26content-type%3Don-demand&cmsid=2490180&vid=3788'
 	        },
 	        previewThumbnails: {
 	          enabled: true,

demo/src/js/demo.js

@@ -75,8 +75,10 @@ import Raven from 'raven-js';
                     google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c',
                 },
                 ads: {
-                    enabled: env.prod || env.dev,
+                    enabled: true, // env.prod || env.dev,
                     publisherId: '918848828995742',
+                    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%3Dannon%26content-type%3Don-demand&cmsid=2490180&vid=3788',
                 },
                 previewThumbnails: {
                     enabled: true,

dist/plyr.js

@@ -3466,7 +3466,8 @@ typeof navigator === "object" && (function (global, factory) {
     // Register for an account here: http://vi.ai/publisher-video-monetization/?aid=plyrio
     ads: {
       enabled: false,
-      publisherId: ''
+      publisherId: '',
+      tagUrl: ''
     },
     // YouTube nocookies mode
     noCookie: false,
@@ -5970,7 +5971,7 @@ typeof navigator === "object" && (function (global, factory) {
       _classCallCheck(this, Ads);
 
       this.player = player;
-      this.publisherId = player.config.ads.publisherId;
+      this.config = player.config.ads;
       this.playing = false;
       this.initialized = false;
       this.elements = {
@@ -6037,7 +6038,7 @@ typeof navigator === "object" && (function (global, factory) {
         this.listeners(); // Setup the IMA SDK
 
         this.setupIMA();
-      } // Build the default tag URL
+      } // Build the tag URL
 
     }, {
       key: "setupIMA",
@@ -6206,7 +6207,8 @@ typeof navigator === "object" && (function (global, factory) {
         var container = this.player.elements.container; // Retrieve the ad from the event. Some events (e.g. ALL_ADS_COMPLETED)
         // don't have ad object associated
 
-        var ad = event.getAd(); // Proxy event
+        var ad = event.getAd();
+        var adData = event.getAdData(); // Proxy event
 
         var dispatchEvent = function dispatchEvent(type) {
           var event = "ads".concat(type.replace(/_/g, '').toLowerCase());
@@ -6288,6 +6290,13 @@ typeof navigator === "object" && (function (global, factory) {
             dispatchEvent(event.type);
             break;
 
+          case google.ima.AdEvent.Type.LOG:
+            if (adData.adError) {
+              this.player.debug.warn("Non-fatal ad error: ".concat(adData.adError.getMessage()));
+            }
+
+            break;
+
           default:
             break;
         }
@@ -6320,9 +6329,8 @@ typeof navigator === "object" && (function (global, factory) {
         this.player.on('ended', function () {
           _this8.loader.contentComplete();
         });
-        this.player.on('seeking', function () {
+        this.player.on('timeupdate', function () {
           time = _this8.player.currentTime;
-          return time;
         });
         this.player.on('seeked', function () {
           var seekedTime = _this8.player.currentTime;
@@ -6540,11 +6548,18 @@ typeof navigator === "object" && (function (global, factory) {
     }, {
       key: "enabled",
       get: function get() {
-        return this.player.isHTML5 && this.player.isVideo && this.player.config.ads.enabled && !is.empty(this.publisherId);
+        var config = this.config;
+        return this.player.isHTML5 && this.player.isVideo && config.enabled && (!is.empty(config.publisherId) || is.url(config.tagUrl));
       }
     }, {
       key: "tagUrl",
       get: function get() {
+        var config = this.config;
+
+        if (is.url(config.tagUrl)) {
+          return config.tagUrl;
+        }
+
         var params = {
           AV_PUBLISHERID: '58c25bb0073ef448b1087ad6',
           AV_CHANNELID: '5a0458dc28a06145e4519d21',
@@ -6860,12 +6875,20 @@ typeof navigator === "object" && (function (global, factory) {
           this.toggleThumbContainer(true);
           this.setThumbContainerSizeAndPos();
         } // Find the desired thumbnail index
+        // TODO: Handle a video longer than the thumbs where thumbNum is null
 
 
         var thumbNum = this.thumbnails[0].frames.findIndex(function (frame) {
           return _this5.seekTime >= frame.startTime && _this5.seekTime <= frame.endTime;
         });
-        var qualityIndex = 0; // Check to see if we've already downloaded higher quality versions of this image
+        var hasThumb = thumbNum >= 0;
+        var qualityIndex = 0;
+        this.toggleThumbContainer(hasThumb); // No matching thumb found
+
+        if (!hasThumb) {
+          return;
+        } // Check to see if we've already downloaded higher quality versions of this image
+
 
         this.thumbnails.forEach(function (thumbnail, index) {
           if (_this5.loadedImages.includes(thumbnail.frames[thumbNum].text)) {

dist/plyr.polyfilled.js

@@ -6528,7 +6528,8 @@ typeof navigator === "object" && (function (global, factory) {
     // Register for an account here: http://vi.ai/publisher-video-monetization/?aid=plyrio
     ads: {
       enabled: false,
-      publisherId: ''
+      publisherId: '',
+      tagUrl: ''
     },
     // YouTube nocookies mode
     noCookie: false,
@@ -9083,7 +9084,7 @@ typeof navigator === "object" && (function (global, factory) {
       _classCallCheck(this, Ads);
 
       this.player = player;
-      this.publisherId = player.config.ads.publisherId;
+      this.config = player.config.ads;
       this.playing = false;
       this.initialized = false;
       this.elements = {
@@ -9150,7 +9151,7 @@ typeof navigator === "object" && (function (global, factory) {
         this.listeners(); // Setup the IMA SDK
 
         this.setupIMA();
-      } // Build the default tag URL
+      } // Build the tag URL
 
     }, {
       key: "setupIMA",
@@ -9319,7 +9320,8 @@ typeof navigator === "object" && (function (global, factory) {
         var container = this.player.elements.container; // Retrieve the ad from the event. Some events (e.g. ALL_ADS_COMPLETED)
         // don't have ad object associated
 
-        var ad = event.getAd(); // Proxy event
+        var ad = event.getAd();
+        var adData = event.getAdData(); // Proxy event
 
         var dispatchEvent = function dispatchEvent(type) {
           var event = "ads".concat(type.replace(/_/g, '').toLowerCase());
@@ -9401,6 +9403,13 @@ typeof navigator === "object" && (function (global, factory) {
             dispatchEvent(event.type);
             break;
 
+          case google.ima.AdEvent.Type.LOG:
+            if (adData.adError) {
+              this.player.debug.warn("Non-fatal ad error: ".concat(adData.adError.getMessage()));
+            }
+
+            break;
+
           default:
             break;
         }
@@ -9433,9 +9442,8 @@ typeof navigator === "object" && (function (global, factory) {
         this.player.on('ended', function () {
           _this8.loader.contentComplete();
         });
-        this.player.on('seeking', function () {
+        this.player.on('timeupdate', function () {
           time = _this8.player.currentTime;
-          return time;
         });
         this.player.on('seeked', function () {
           var seekedTime = _this8.player.currentTime;
@@ -9653,11 +9661,18 @@ typeof navigator === "object" && (function (global, factory) {
     }, {
       key: "enabled",
       get: function get() {
-        return this.player.isHTML5 && this.player.isVideo && this.player.config.ads.enabled && !is$1.empty(this.publisherId);
+        var config = this.config;
+        return this.player.isHTML5 && this.player.isVideo && config.enabled && (!is$1.empty(config.publisherId) || is$1.url(config.tagUrl));
       }
     }, {
       key: "tagUrl",
       get: function get() {
+        var config = this.config;
+
+        if (is$1.url(config.tagUrl)) {
+          return config.tagUrl;
+        }
+
         var params = {
           AV_PUBLISHERID: '58c25bb0073ef448b1087ad6',
           AV_CHANNELID: '5a0458dc28a06145e4519d21',
@@ -9987,12 +10002,20 @@ typeof navigator === "object" && (function (global, factory) {
           this.toggleThumbContainer(true);
           this.setThumbContainerSizeAndPos();
         } // Find the desired thumbnail index
+        // TODO: Handle a video longer than the thumbs where thumbNum is null
 
 
         var thumbNum = this.thumbnails[0].frames.findIndex(function (frame) {
           return _this5.seekTime >= frame.startTime && _this5.seekTime <= frame.endTime;
         });
-        var qualityIndex = 0; // Check to see if we've already downloaded higher quality versions of this image
+        var hasThumb = thumbNum >= 0;
+        var qualityIndex = 0;
+        this.toggleThumbContainer(hasThumb); // No matching thumb found
+
+        if (!hasThumb) {
+          return;
+        } // Check to see if we've already downloaded higher quality versions of this image
+
 
         this.thumbnails.forEach(function (thumbnail, index) {
           if (_this5.loadedImages.includes(thumbnail.frames[thumbNum].text)) {

src/js/config/defaults.js

@@ -404,6 +404,7 @@ const defaults = {
     ads: {
         enabled: false,
         publisherId: '',
+        tagUrl: '',
     },
 
     // YouTube nocookies mode

src/js/plugins/ads.js

@@ -22,7 +22,7 @@ class Ads {
      */
     constructor(player) {
         this.player = player;
-        this.publisherId = player.config.ads.publisherId;
+        this.config = player.config.ads;
         this.playing = false;
         this.initialized = false;
         this.elements = {
@@ -49,8 +49,13 @@ class Ads {
     }
 
     get enabled() {
+        const { config } = this;
+
         return (
-            this.player.isHTML5 && this.player.isVideo && this.player.config.ads.enabled && !is.empty(this.publisherId)
+            this.player.isHTML5 &&
+            this.player.isVideo &&
+            config.enabled &&
+            (!is.empty(config.publisherId) || is.url(config.tagUrl))
         );
     }
 
@@ -95,8 +100,14 @@ class Ads {
         this.setupIMA();
     }
 
-    // Build the default tag URL
+    // Build the tag URL
     get tagUrl() {
+        const { config } = this;
+
+        if (is.url(config.tagUrl)) {
+            return config.tagUrl;
+        }
+
         const params = {
             AV_PUBLISHERID: '58c25bb0073ef448b1087ad6',
             AV_CHANNELID: '5a0458dc28a06145e4519d21',
@@ -233,7 +244,7 @@ class Ads {
                     const seekElement = this.player.elements.progress;
 
                     if (is.element(seekElement)) {
-                        const cuePercentage = 100 / this.player.duration * cuePoint;
+                        const cuePercentage = (100 / this.player.duration) * cuePoint;
                         const cue = createElement('span', {
                             class: this.player.config.classNames.cues,
                         });
@@ -273,6 +284,7 @@ class Ads {
         // Retrieve the ad from the event. Some events (e.g. ALL_ADS_COMPLETED)
         // don't have ad object associated
         const ad = event.getAd();
+        const adData = event.getAdData();
 
         // Proxy event
         const dispatchEvent = type => {
@@ -368,6 +380,12 @@ class Ads {
                 dispatchEvent(event.type);
                 break;
 
+            case google.ima.AdEvent.Type.LOG:
+                if (adData.adError) {
+                    this.player.debug.warn(`Non-fatal ad error: ${adData.adError.getMessage()}`);
+                }
+                break;
+
             default:
                 break;
         }
@@ -396,9 +414,8 @@ class Ads {
             this.loader.contentComplete();
         });
 
-        this.player.on('seeking', () => {
+        this.player.on('timeupdate', () => {
             time = this.player.currentTime;
-            return time;
         });
 
         this.player.on('seeked', () => {

src/js/plugins/previewThumbnails.js

@@ -301,11 +301,20 @@ class PreviewThumbnails {
         }
 
         // Find the desired thumbnail index
+        // TODO: Handle a video longer than the thumbs where thumbNum is null
         const thumbNum = this.thumbnails[0].frames.findIndex(
             frame => this.seekTime >= frame.startTime && this.seekTime <= frame.endTime,
         );
+        const hasThumb = thumbNum >= 0;
         let qualityIndex = 0;
 
+        this.toggleThumbContainer(hasThumb);
+
+        // No matching thumb found
+        if (!hasThumb) {
+            return;
+        }
+
         // Check to see if we've already downloaded higher quality versions of this image
         this.thumbnails.forEach((thumbnail, index) => {
             if (this.loadedImages.includes(thumbnail.frames[thumbNum].text)) {

src/sass/plugins/previewThumbnails.scss

@@ -2,14 +2,26 @@
 // Preview Thumbnails
 // --------------------------------------------------------------
 
+$plyr-preview-padding: $plyr-tooltip-padding !default;
+$plyr-preview-bg: $plyr-tooltip-bg !default;
+$plyr-preview-radius: $plyr-tooltip-radius !default;
+$plyr-preview-shadow: $plyr-tooltip-shadow !default;
+$plyr-preview-arrow-size: $plyr-tooltip-arrow-size !default;
+$plyr-preview-image-bg: $plyr-color-heather !default;
+$plyr-preview-time-font-size: $plyr-font-size-time !default;
+$plyr-preview-time-padding: 3px 6px !default;
+$plyr-preview-time-bg: rgba(0, 0, 0, 0.55);
+$plyr-preview-time-color: #fff;
+$plyr-preview-time-bottom-offset: 6px;
+
 .plyr__preview-thumb {
-    background-color: $plyr-tooltip-bg;
+    background-color: $plyr-preview-bg;
     border-radius: 3px;
     bottom: 100%;
-    box-shadow: $plyr-tooltip-shadow;
+    box-shadow: $plyr-preview-shadow;
-    margin-bottom: $plyr-tooltip-padding * 2;
+    margin-bottom: $plyr-preview-padding * 2;
     opacity: 0;
-    padding: 3px;
+    padding: $plyr-preview-radius;
     pointer-events: none;
     position: absolute;
     transform: translate(0, 10px) scale(0.8);
@@ -24,10 +36,10 @@
 
     // The background triangle
     &::before {
-        border-left: $plyr-tooltip-arrow-size solid transparent;
+        border-left: $plyr-preview-arrow-size solid transparent;
-        border-right: $plyr-tooltip-arrow-size solid transparent;
+        border-right: $plyr-preview-arrow-size solid transparent;
-        border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-bg;
+        border-top: $plyr-preview-arrow-size solid $plyr-preview-bg;
-        bottom: -$plyr-tooltip-arrow-size;
+        bottom: -$plyr-preview-arrow-size;
         content: '';
         height: 0;
         left: 50%;
@@ -38,14 +50,14 @@
     }
 
     &__image-container {
-        background: $plyr-color-heather;
+        background: $plyr-preview-image-bg;
-        border-radius: 2px;
+        border-radius: ($plyr-preview-radius - 1px);
         overflow: hidden;
         position: relative;
         z-index: 0;
 
         img {
-            height: 100%; // Non-jpeg-sprite images are 100%. Jpeg sprites will have their size applied by javascript
+            height: 100%; // Non sprite images are 100%. Sprites will have their size applied by JavaScript
             left: 0;
             max-height: none;
             max-width: none;
@@ -57,7 +69,7 @@
 
     // Seek time text
     &__time-container {
-        bottom: 6px;
+        bottom: $plyr-preview-time-bottom-offset;
         left: 0;
         position: absolute;
         right: 0;
@@ -65,11 +77,11 @@
         z-index: 3;
 
         span {
-            background-color: rgba(0, 0, 0, 0.55);
+            background-color: $plyr-preview-time-bg;
-            border-radius: 2px;
+            border-radius: ($plyr-preview-radius - 1px);
-            color: #fff;
+            color: $plyr-preview-time-color;
-            font-size: $plyr-font-size-time;
+            font-size: $plyr-preview-time-font-size;
-            padding: 3px 6px;
+            padding: $plyr-preview-time-padding;
         }
     }
 }
@@ -79,7 +91,7 @@
     filter: blur(1px);
     height: 100%;
     left: 0;
-    margin: auto; // Required when video is different dimensions to container (e.g., fullscreen)
+    margin: auto; // Required when video is different dimensions to container (e.g. fullscreen)
     opacity: 0;
     overflow: hidden;
     position: absolute;
@@ -89,6 +101,10 @@
     width: 100%;
     z-index: 1;
 
+    &--is-shown {
+        opacity: 1;
+    }
+
     img {
         height: 100%;
         left: 0;
@@ -99,8 +115,4 @@
         top: 0;
         width: 100%;
     }
-
-    &--is-shown {
-        opacity: 1;
-    }
 }

src/sass/settings/sliders.scss

@@ -6,13 +6,13 @@
 $plyr-range-thumb-active-shadow-width: 3px !default;
 
 // Thumb
-$plyr-range-thumb-height: 14px !default;
+$plyr-range-thumb-height: 13px !default;
 $plyr-range-thumb-bg: #fff !default;
 $plyr-range-thumb-border: 2px solid transparent !default;
 $plyr-range-thumb-shadow: 0 1px 1px rgba(#000, 0.15), 0 0 0 1px rgba($plyr-color-gunmetal, 0.2) !default;
 
 // Track
-$plyr-range-track-height: 4px !default;
+$plyr-range-track-height: 5px !default;
 $plyr-range-max-height: ($plyr-range-thumb-active-shadow-width * 2) + $plyr-range-thumb-height !default;
 
 // Fill