Code tweaks

demo/dist/demo.js

@@ -1,3 +1,3 @@
-document.addEventListener("DOMContentLoaded",function(){window.shr&&window.shr.setup({count:{classname:"button__count"}});var e="tab-focus";document.addEventListener("focusout",function(t){t.target.classList.remove(e)}),document.addEventListener("keydown",function(t){9===t.keyCode&&window.setTimeout(function(){document.activeElement.classList.add(e)},0)});var t=new window.Plyr("#player",{debug:!0,title:"View From A Blue Moon",iconUrl:"../dist/plyr.svg",keyboard:{global:!0},tooltips:{controls:!0},captions:{active:!0},keys:{google:"AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c"},ads:{adTagUrl:"http://go.aniview.com/api/adserver6/vast/?AV_PUBLISHERID=58c25bb0073ef448b1087ad6&AV_CHANNELID=5a0458dc28a06145e4519d21&AV_URL=127.0.0.1:3000&cb=1&AV_WIDTH=640&AV_HEIGHT=480"}});window.player=t;var o=document.querySelectorAll("[data-source]"),i={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},a=window.location.hash.replace("#",""),r=window.history&&window.history.pushState;function n(e,t,o){e&&e.classList[o?"add":"remove"](t)}function s(e,r){if(e in i&&(r||e!==a)&&(a.length||e!==i.video)){switch(e){case i.video:t.source={type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"}],poster:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt",default:!0},{kind:"captions",label:"French",srclang:"fr",src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt"}]};break;case i.audio:t.source={type:"audio",title:"Kishi Bashi – “It All Began With A Burst”",sources:[{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]};break;case i.youtube:t.source={type:"video",title:"View From A Blue Moon",sources:[{src:"https://youtube.com/watch?v=bTqVqk7FSmY",provider:"youtube"}]};break;case i.vimeo:t.source={type:"video",sources:[{src:"https://vimeo.com/76979871",provider:"vimeo"}]}}a=e,Array.from(o).forEach(function(e){return n(e.parentElement,"active",!1)}),n(document.querySelector('[data-source="'+e+'"]'),"active",!0),Array.from(document.querySelectorAll(".plyr__cite")).forEach(function(e){e.setAttribute("hidden","")}),document.querySelector(".plyr__cite--"+e).removeAttribute("hidden")}}if(Array.from(o).forEach(function(e){e.addEventListener("click",function(){var t=e.getAttribute("data-source");s(t),r&&window.history.pushState({type:t},"","#"+t)})}),window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&s(e.state.type)}),r){var c=!a.length;c&&(a=i.video),a in i&&window.history.replaceState({type:a},"",c?"":"#"+a),a!==i.video&&s(a,!0)}}),"plyr.io"===window.location.host&&(!function(e,t,o,i,a,r,n){e.GoogleAnalyticsObject="ga",e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,r=t.createElement("script"),n=t.getElementsByTagName("script")[0],r.async=1,r.src="//www.google-analytics.com/analytics.js",n.parentNode.insertBefore(r,n)}(window,document),window.ga("create","UA-40881672-11","auto"),window.ga("send","pageview"));
+document.addEventListener("DOMContentLoaded",function(){window.shr&&window.shr.setup({count:{classname:"button__count"}});document.addEventListener("focusout",function(e){e.target.classList.remove("tab-focus")}),document.addEventListener("keydown",function(e){9===e.keyCode&&window.setTimeout(function(){document.activeElement.classList.add("tab-focus")},0)});var e=new window.Plyr("#player",{debug:!0,title:"View From A Blue Moon",iconUrl:"../dist/plyr.svg",keyboard:{global:!0},tooltips:{controls:!0},captions:{active:!0},keys:{google:"AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c"},ads:{tagUrl:"http://go.aniview.com/api/adserver6/vast/?AV_PUBLISHERID=58c25bb0073ef448b1087ad6&AV_CHANNELID=5a0458dc28a06145e4519d21&AV_URL=127.0.0.1:3000&cb=1&AV_WIDTH=640&AV_HEIGHT=480"}});window.player=e;var t=document.querySelectorAll("[data-source]"),o={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},i=window.location.hash.replace("#",""),a=window.history&&window.history.pushState;function r(e,t,o){e&&e.classList[o?"add":"remove"](t)}function n(a,n){if(a in o&&(n||a!==i)&&(i.length||a!==o.video)){switch(a){case o.video:e.source={type:"video",title:"View From A Blue Moon",sources:[{src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"}],poster:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt",default:!0},{kind:"captions",label:"French",srclang:"fr",src:"https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt"}]};break;case o.audio:e.source={type:"audio",title:"Kishi Bashi – “It All Began With A Burst”",sources:[{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",type:"audio/mp3"},{src:"https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",type:"audio/ogg"}]};break;case o.youtube:e.source={type:"video",title:"View From A Blue Moon",sources:[{src:"https://youtube.com/watch?v=bTqVqk7FSmY",provider:"youtube"}]};break;case o.vimeo:e.source={type:"video",sources:[{src:"https://vimeo.com/76979871",provider:"vimeo"}]}}i=a,Array.from(t).forEach(function(e){return r(e.parentElement,"active",!1)}),r(document.querySelector('[data-source="'+a+'"]'),"active",!0),Array.from(document.querySelectorAll(".plyr__cite")).forEach(function(e){e.setAttribute("hidden","")}),document.querySelector(".plyr__cite--"+a).removeAttribute("hidden")}}if(Array.from(t).forEach(function(e){e.addEventListener("click",function(){var t=e.getAttribute("data-source");n(t),a&&window.history.pushState({type:t},"","#"+t)})}),window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&n(e.state.type)}),a){var s=!i.length;s&&(i=o.video),i in o&&window.history.replaceState({type:i},"",s?"":"#"+i),i!==o.video&&n(i,!0)}}),"plyr.io"===window.location.host&&(!function(e,t,o,i,a,r,n){e.GoogleAnalyticsObject="ga",e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,r=t.createElement("script"),n=t.getElementsByTagName("script")[0],r.async=1,r.src="//www.google-analytics.com/analytics.js",n.parentNode.insertBefore(r,n)}(window,document),window.ga("create","UA-40881672-11","auto"),window.ga("send","pageview"));
 
 //# sourceMappingURL=demo.js.map

demo/src/js/demo.js

@@ -52,7 +52,8 @@ document.addEventListener('DOMContentLoaded', () => {
             google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c',
         },
         ads: {
-            adTagUrl: 'http://go.aniview.com/api/adserver6/vast/?AV_PUBLISHERID=58c25bb0073ef448b1087ad6&AV_CHANNELID=5a0458dc28a06145e4519d21&AV_URL=127.0.0.1:3000&cb=1&AV_WIDTH=640&AV_HEIGHT=480',
+            tagUrl:
+                'http://go.aniview.com/api/adserver6/vast/?AV_PUBLISHERID=58c25bb0073ef448b1087ad6&AV_CHANNELID=5a0458dc28a06145e4519d21&AV_URL=127.0.0.1:3000&cb=1&AV_WIDTH=640&AV_HEIGHT=480',
         },
     });
 

demo/src/sass/bundles/demo.scss

@@ -39,6 +39,3 @@
 
 // Plyr
 @import '../../../../src/sass/plyr';
-
-// Ads Plugin
-@import '../plugins/ads/ads';

demo/src/sass/plugins/ads/ads.scss

@@ -1,18 +0,0 @@
-.plyr--ready {
-    position: relative;
-}
-
-.plyr__ads {
-    bottom: 0;
-    cursor: pointer;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    z-index: 10;
-
-    video {
-        left: 0;
-    }
-}

src/js/defaults.js

@@ -302,6 +302,7 @@ const defaults = {
     classNames: {
         video: 'plyr__video-wrapper',
         embed: 'plyr__video-embed',
+        ads: 'plyr__ads',
         control: 'plyr__control',
         type: 'plyr--{0}',
         provider: 'plyr--{0}',
@@ -345,6 +346,11 @@ const defaults = {
     keys: {
         google: null,
     },
+
+    // Ads
+    ads: {
+        tagUrl: null,
+    },
 };
 
 export default defaults;

src/js/plugins/ads.js

@@ -2,33 +2,35 @@ import utils from '../utils';
 
 // Events are different on various devices. We det the correct events, based on userAgent.
 const getStartEvents = () => {
-    let startEvents = ['click'];
+    let events = ['click'];
 
+    // TODO: Detecting touch is tricky, we should look at other ways?
     // For mobile users the start event will be one of
     // touchstart, touchend and touchmove.
     if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/Android/i)) {
-        startEvents = [
+        events = [
             'touchstart',
             'touchend',
             'touchmove',
         ];
     }
-    return startEvents;
+
+    return events;
 };
 
 export default class Ads {
     constructor(player) {
         this.player = player;
 
-        // Check if an adTagUrl is provided.
+        // Check if a tag URL is provided.
-        if (!player.config.ads.adTagUrl) {
+        if (!utils.is.url(player.config.ads.tagUrl)) {
             return this;
         }
 
-        // Check if the Google IMA3 SDK is loaded.
+        // Check if the Google IMA3 SDK is loaded
         if (!utils.is.object(window.google)) {
             utils.loadScript(player.config.urls.googleIMA.api, () => {
-                this.ready(this);
+                this.ready();
             });
         } else {
             this.ready();
@@ -66,12 +68,12 @@ export default class Ads {
         this.adsLoader.getSettings().setAutoPlayAdBreaks(false);
 
         // Listen and respond to ads loaded and error events.
-        this.adsLoader.addEventListener(window.google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED, adEvent => this.onAdsManagerLoaded(adEvent), false);
+        this.adsLoader.addEventListener(window.google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED, event => this.onAdsManagerLoaded(event), false);
-        this.adsLoader.addEventListener(window.google.ima.AdErrorEvent.Type.AD_ERROR, adError => this.onAdError(adError), false);
+        this.adsLoader.addEventListener(window.google.ima.AdErrorEvent.Type.AD_ERROR, error => this.onAdError(error), false);
 
         // Request video ads.
         const adsRequest = new window.google.ima.AdsRequest();
-        adsRequest.adTagUrl = this.player.config.ads.adTagUrl;
+        adsRequest.adTagUrl = this.player.config.ads.tagUrl;
 
         // Specify the linear and nonlinear slot sizes. This helps the SDK to
         // select the correct creative if multiple are returned.
@@ -87,28 +89,28 @@ export default class Ads {
         const { videoElement } = this;
 
         // Get the ads manager.
-        const adsRenderingSettings = new window.google.ima.AdsRenderingSettings();
+        const settings = new window.google.ima.AdsRenderingSettings();
-        adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true;
+        settings.restoreCustomPlaybackStateOnAdBreakComplete = true;
-        adsRenderingSettings.enablePreloading = true;
+        settings.enablePreloading = true;
 
         // The SDK is polling currentTime on the contentPlayback. And needs a duration
         // so it can determine when to start the mid- and post-roll.
-        this.adsManager = adsManagerLoadedEvent.getAdsManager(videoElement, adsRenderingSettings);
+        this.adsManager = adsManagerLoadedEvent.getAdsManager(videoElement, settings);
 
         // Get the cue points for any mid-rolls by filtering out the pre- and post-roll.
         this.adsCuePoints = this.adsManager.getCuePoints().filter(x => x > 0 && x !== -1);
 
         // Add listeners to the required events.
-        this.adsManager.addEventListener(window.google.ima.AdErrorEvent.Type.AD_ERROR, adError => this.onAdError(adError));
+        this.adsManager.addEventListener(window.google.ima.AdErrorEvent.Type.AD_ERROR, error => this.onAdError(error));
-        this.adsManager.addEventListener(window.google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED, adEvent => this.onAdEvent(adEvent));
+        this.adsManager.addEventListener(window.google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED, event => this.onAdEvent(event));
-        this.adsManager.addEventListener(window.google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED, adEvent => this.onAdEvent(adEvent));
+        this.adsManager.addEventListener(window.google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED, event => this.onAdEvent(event));
-        this.adsManager.addEventListener(window.google.ima.AdEvent.Type.ALL_ADS_COMPLETED, adEvent => this.onAdEvent(adEvent));
+        this.adsManager.addEventListener(window.google.ima.AdEvent.Type.ALL_ADS_COMPLETED, event => this.onAdEvent(event));
-        this.adsManager.addEventListener(window.google.ima.AdEvent.Type.AD_BREAK_READY, adEvent => this.onAdEvent(adEvent));
+        this.adsManager.addEventListener(window.google.ima.AdEvent.Type.AD_BREAK_READY, event => this.onAdEvent(event));
 
         // Listen to any additional events, if necessary.
-        this.adsManager.addEventListener(window.google.ima.AdEvent.Type.LOADED, adEvent => this.onAdEvent(adEvent));
+        this.adsManager.addEventListener(window.google.ima.AdEvent.Type.LOADED, event => this.onAdEvent(event));
-        this.adsManager.addEventListener(window.google.ima.AdEvent.Type.STARTED, adEvent => this.onAdEvent(adEvent));
+        this.adsManager.addEventListener(window.google.ima.AdEvent.Type.STARTED, event => this.onAdEvent(event));
-        this.adsManager.addEventListener(window.google.ima.AdEvent.Type.COMPLETE, adEvent => this.onAdEvent(adEvent));
+        this.adsManager.addEventListener(window.google.ima.AdEvent.Type.COMPLETE, event => this.onAdEvent(event));
     }
 
     onAdEvent(adEvent) {
@@ -140,6 +142,7 @@ export default class Ads {
                     ad.height = container.offsetHeight;
                 }
                 break;
+
             case window.google.ima.AdEvent.Type.STARTED:
                 // This event indicates the ad has started - the video player
                 // can adjust the UI, for example display a pause button and
@@ -159,12 +162,15 @@ export default class Ads {
                 //     300); // every 300ms
                 // }
                 break;
+
             case window.google.ima.AdEvent.Type.CONTENT_PAUSE_REQUESTED:
                 this.handleEventListeners('CONTENT_PAUSE_REQUESTED');
                 break;
+
             case window.google.ima.AdEvent.Type.CONTENT_RESUME_REQUESTED:
                 this.handleEventListeners('CONTENT_RESUME_REQUESTED');
                 break;
+
             case window.google.ima.AdEvent.Type.AD_BREAK_READY:
                 // This event indicates that a mid-roll ad is ready to start.
                 // We pause the player and tell the adsManager to start playing the ad.
@@ -172,6 +178,7 @@ export default class Ads {
                 this.adsManager.start();
                 this.handleEventListeners('AD_BREAK_READY');
                 break;
+
             case window.google.ima.AdEvent.Type.COMPLETE:
                 // This event indicates the ad has finished - the video player
                 // can perform appropriate UI actions, such as removing the timer for
@@ -184,16 +191,17 @@ export default class Ads {
                     this.player.play();
                 }
                 break;
+
             case window.google.ima.AdEvent.Type.ALL_ADS_COMPLETED:
                 this.handleEventListeners('ALL_ADS_COMPLETED');
                 break;
+
             default:
                 break;
         }
     }
 
     onAdError(adErrorEvent) {
-
         // Handle the error logging.
         this.adDisplayElement.remove();
 
@@ -220,7 +228,7 @@ export default class Ads {
         this.adDisplayElement.removeAttribute('style');
 
         // Set class name on the adDisplayContainer element.
-        this.adDisplayElement.setAttribute('class', 'plyr__ads');
+        this.adDisplayElement.setAttribute('class', this.player.config.classNames.ads);
 
         // Play ads when clicked.
         this.setOnClickHandler(this.adDisplayElement, this.playAds);
@@ -277,14 +285,13 @@ export default class Ads {
         this.player.on('seeked', event => {
             const seekedTime = event.detail.plyr.currentTime;
 
-            for (let i = 0; i < this.adsCuePoints.length; i += 1) {
+            this.adsCuePoints.forEach((cuePoint, index) => {
-                const cuePoint = this.adsCuePoints[i];
                 if (time < cuePoint && cuePoint < seekedTime) {
                     this.adsManager.discardAdBreak();
-                    this.adsCuePoints.splice(i, 1);
+                    this.adsCuePoints.splice(index, 1);
-                }
                 }
             });
+        });
 
         // Listen to the resizing of the window. And resize ad accordingly.
         window.addEventListener('resize', () => {

src/js/utils.js

@@ -50,6 +50,9 @@ const utils = {
         track(input) {
             return this.instanceof(input, TextTrack) || (!this.nullOrUndefined(input) && this.string(input.kind));
         },
+        url(input) {
+            return !this.nullOrUndefined(input) && /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/.test(input);
+        },
         nullOrUndefined(input) {
             return input === null || typeof input === 'undefined';
         },

src/sass/plugins/ads.scss

@@ -0,0 +1,17 @@
+// ==========================================================================
+// Advertisments
+// ==========================================================================
+
+.plyr__ads {
+    bottom: 0;
+    cursor: pointer;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    z-index: 10;
+
+    video {
+        left: 0;
+    }
+}

src/sass/plugins/ads/ads.scss

@@ -1,18 +0,0 @@
-.plyr--ready {
-    position: relative;
-}
-
-.plyr__ads {
-    bottom: 0;
-    cursor: pointer;
-    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    z-index: 10;
-
-    video {
-        left: 0;
-    }
-}

src/sass/plyr.scss

@@ -40,7 +40,7 @@
 @import 'states/error';
 @import 'states/fullscreen';
 
+@import 'plugins/ads';
+
 @import 'utils/animation';
 @import 'utils/hidden';
-
-@import 'plugins/ads/ads';