Remove chaning ability and return promise for play()

demo/dist/demo.js

@@ -1,3 +1,3 @@
-document.addEventListener("DOMContentLoaded",function(){function e(e,t,o){e&&e.classList[o?"add":"remove"](t)}function t(t,o){if(t in a&&(o||t!==n)&&(n.length||t!==a.video)){switch(t){case a.video:i.source={type:"video",title:"View From A Blue Moon",sources:[{src:"media/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"}],poster:"media/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"media/View_From_A_Blue_Moon_Trailer-HD.en.vtt",default:!0},{kind:"captions",label:"French",srclang:"fr",src:"media/View_From_A_Blue_Moon_Trailer-HD.fr.vtt"}]};break;case a.audio:i.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 a.youtube:i.source={type:"video",title:"View From A Blue Moon",sources:[{src:"https://youtube.com/watch?v=bTqVqk7FSmY",provider:"youtube"}]};break;case a.vimeo:i.source={type:"video",sources:[{src:"https://vimeo.com/76979871",provider:"vimeo"}]}}n=t,Array.from(r).forEach(function(t){return e(t.parentElement,"active",!1)}),e(document.querySelector('[data-source="'+t+'"]'),"active",!0),Array.from(document.querySelectorAll(".plyr__cite")).forEach(function(e){e.setAttribute("hidden","")}),document.querySelector(".plyr__cite--"+t).removeAttribute("hidden")}}window.shr&&window.shr.setup({count:{classname:"button__count"}});var o="tab-focus";document.addEventListener("focusout",function(e){e.target.classList.remove(o)}),document.addEventListener("keydown",function(e){9===e.keyCode&&window.setTimeout(function(){document.activeElement.classList.add(o)},0)});var i=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},controls:["play-large","play","progress","current-time","mute","volume","captions","settings","fullscreen","pip","airplay"],keys:{google:"AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c"}});window.player=i;var r=document.querySelectorAll("[data-source]"),a={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},n=window.location.hash.replace("#",""),s=window.history&&window.history.pushState;if(Array.from(r).forEach(function(e){e.addEventListener("click",function(){var o=e.getAttribute("data-source");t(o),s&&window.history.pushState({type:o},"","#"+o)})}),window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),s){var c=!n.length;c&&(n=a.video),n in a&&window.history.replaceState({type:n},"",c?"":"#"+n),n!==a.video&&t(n,!0)}}),"plyr.io"===window.location.host&&(!function(e,t,o,i,r,a,n){e.GoogleAnalyticsObject="ga",e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,a=t.createElement("script"),n=t.getElementsByTagName("script")[0],a.async=1,a.src="//www.google-analytics.com/analytics.js",n.parentNode.insertBefore(a,n)}(window,document),window.ga("create","UA-40881672-11","auto"),window.ga("send","pageview"));
+document.addEventListener("DOMContentLoaded",function(){function e(e,t,o){e&&e.classList[o?"add":"remove"](t)}function t(t,n){if(t in r&&(n||t!==a)&&(a.length||t!==r.video)){switch(t){case r.video:o.source={type:"video",title:"View From A Blue Moon",sources:[{src:"media/View_From_A_Blue_Moon_Trailer-HD.mp4",type:"video/mp4"}],poster:"media/View_From_A_Blue_Moon_Trailer-HD.jpg",tracks:[{kind:"captions",label:"English",srclang:"en",src:"media/View_From_A_Blue_Moon_Trailer-HD.en.vtt",default:!0},{kind:"captions",label:"French",srclang:"fr",src:"media/View_From_A_Blue_Moon_Trailer-HD.fr.vtt"}]};break;case r.audio:o.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 r.youtube:o.source={type:"video",title:"View From A Blue Moon",sources:[{src:"https://youtube.com/watch?v=bTqVqk7FSmY",provider:"youtube"}]};break;case r.vimeo:o.source={type:"video",sources:[{src:"https://vimeo.com/76979871",provider:"vimeo"}]}}a=t,Array.from(i).forEach(function(t){return e(t.parentElement,"active",!1)}),e(document.querySelector('[data-source="'+t+'"]'),"active",!0),Array.from(document.querySelectorAll(".plyr__cite")).forEach(function(e){e.setAttribute("hidden","")}),document.querySelector(".plyr__cite--"+t).removeAttribute("hidden")}}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 o=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},controls:["play-large","play","progress","current-time","mute","volume","captions","settings","fullscreen","pip","airplay"],keys:{google:"AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c"}});window.player=o;var i=document.querySelectorAll("[data-source]"),r={video:"video",audio:"audio",youtube:"youtube",vimeo:"vimeo"},a=window.location.hash.replace("#",""),n=window.history&&window.history.pushState;if(Array.from(i).forEach(function(e){e.addEventListener("click",function(){var o=e.getAttribute("data-source");t(o),n&&window.history.pushState({type:o},"","#"+o)})}),window.addEventListener("popstate",function(e){e.state&&"type"in e.state&&t(e.state.type)}),n){var s=!a.length;s&&(a=r.video),a in r&&window.history.replaceState({type:a},"",s?"":"#"+a),a!==r.video&&t(a,!0)}}),"plyr.io"===window.location.host&&(!function(e,t,o,i,r,a,n){e.GoogleAnalyticsObject="ga",e.ga=e.ga||function(){(e.ga.q=e.ga.q||[]).push(arguments)},e.ga.l=1*new Date,a=t.createElement("script"),n=t.getElementsByTagName("script")[0],a.async=1,a.src="//www.google-analytics.com/analytics.js",n.parentNode.insertBefore(a,n)}(window,document),window.ga("create","UA-40881672-11","auto"),window.ga("send","pageview"));
 
 //# sourceMappingURL=demo.js.map

readme.md

@@ -295,15 +295,15 @@ element.addEventListener('ready', event => {
 
 ### Methods
 
-An example method:
+Methods are not chainable. An example use of a method:
 
 ```javascript
-player.pause();
+player.play();
 ```
 
 | Method                    | Parameters       | Description                                                                                                |
 | ------------------------- | ---------------- | ---------------------------------------------------------------------------------------------------------- |
-| `play()`                  | -                | Start playback.                                                                                            |
+| `play()`¹            | -                | Start playback.                                                                                            |
 | `pause()`                 | -                | Pause playback.                                                                                            |
 | `togglePlay(toggle)`      | Boolean          | Toggle playback, if no parameters are passed, it will toggle based on current status.                      |
 | `stop()`                  | -                | Stop playback and reset to start.                                                                          |
@@ -321,6 +321,8 @@ player.pause();
 | `supports(type)`          | String           | Check support for a mime type.                                                                             |
 | `destroy()`               | -                | Destroy the instance and garbage collect any elements.                                                     |
 
+1. `play()` will return a [`Promise`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) in _some_ browsers - WebKit and Mozilla [according to MDN](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/play) at time of writing.
+
 ### Getters and Setters
 
 An example setter:

src/js/plugins/vimeo.js

@@ -80,11 +80,13 @@ const vimeo = {
                 player.media.paused = false;
             });
         };
+
         player.media.pause = () => {
             player.embed.pause().then(() => {
                 player.media.paused = true;
             });
         };
+
         player.media.stop = () => {
             player.embed.stop().then(() => {
                 player.media.paused = true;
@@ -197,7 +199,10 @@ const vimeo = {
         });
 
         // Set aspect ratio based on video size
-        Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(dimensions => {
+        Promise.all([
+            player.embed.getVideoWidth(),
+            player.embed.getVideoHeight(),
+        ]).then(dimensions => {
             const ratio = utils.getAspectRatio(dimensions[0], dimensions[1]);
             vimeo.setAspectRatio.call(this, ratio);
         });

src/js/plugins/youtube.js

@@ -186,14 +186,17 @@ const youtube = {
                         instance.playVideo();
                         player.media.paused = false;
                     };
+
                     player.media.pause = () => {
                         instance.pauseVideo();
                         player.media.paused = true;
                     };
+
                     player.media.stop = () => {
                         instance.stopVideo();
                         player.media.paused = true;
                     };
+
                     player.media.duration = instance.getDuration();
                     player.media.paused = true;
 

src/js/plyr.js

@@ -276,20 +276,14 @@ class Plyr {
      * Play the media
      */
     play() {
-        if ('play' in this.media) {
+        return this.media.play();
-            this.media.play();
-        }
-        return this;
     }
 
     /**
      * Pause the media
      */
     pause() {
-        if ('pause' in this.media) {
+        return this.media.pause();
-            this.media.pause();
-        }
-        return this;
     }
 
     /**
@@ -320,17 +314,18 @@ class Plyr {
     togglePlay(toggle) {
         // True toggle if nothing passed
         if ((!utils.is.boolean(toggle) && this.media.paused) || toggle) {
-            return this.play();
+            this.play();
+        } else {
+            this.pause();
         }
-
-        return this.pause();
     }
 
     /**
      * Stop playback
      */
     stop() {
-        return this.restart().pause();
+        this.restart();
+        this.pause();
     }
 
     /**
@@ -338,7 +333,6 @@ class Plyr {
      */
     restart() {
         this.currentTime = 0;
-        return this;
     }
 
     /**
@@ -347,7 +341,6 @@ class Plyr {
      */
     rewind(seekTime) {
         this.currentTime = this.currentTime - (utils.is.number(seekTime) ? seekTime : this.config.seekTime);
-        return this;
     }
 
     /**
@@ -356,7 +349,6 @@ class Plyr {
      */
     forward(seekTime) {
         this.currentTime = this.currentTime + (utils.is.number(seekTime) ? seekTime : this.config.seekTime);
-        return this;
     }
 
     /**
@@ -470,7 +462,6 @@ class Plyr {
     increaseVolume(step) {
         const volume = this.media.muted ? 0 : this.volume;
         this.volume = volume + (utils.is.number(step) ? step : 1);
-        return this;
     }
 
     /**
@@ -480,7 +471,6 @@ class Plyr {
     decreaseVolume(step) {
         const volume = this.media.muted ? 0 : this.volume;
         this.volume = volume - (utils.is.number(step) ? step : 1);
-        return this;
     }
 
     /**
@@ -737,7 +727,7 @@ class Plyr {
     toggleCaptions(input) {
         // If there's no full support, or there's no caption toggle
         if (!this.supported.ui || !utils.is.element(this.elements.buttons.captions)) {
-            return this;
+            return;
         }
 
         // If the method is called without parameter, toggle based on current value
@@ -745,7 +735,7 @@ class Plyr {
 
         // Nothing to change...
         if (this.captions.active === show) {
-            return this;
+            return;
         }
 
         // Set global
@@ -759,9 +749,6 @@ class Plyr {
 
         // Trigger an event
         utils.dispatchEvent.call(this, this.media, this.captions.active ? 'captionsenabled' : 'captionsdisabled');
-
-        // Allow chaining
-        return this;
     }
 
     /**
@@ -829,7 +816,7 @@ class Plyr {
                     fullscreen.cancelFullScreen();
                 }
 
-                return this;
+                return;
             }
         } else {
             // Otherwise, it's a simple toggle
@@ -859,8 +846,6 @@ class Plyr {
 
         // Trigger an event
         utils.dispatchEvent.call(this, this.media, this.fullscreen.active ? 'enterfullscreen' : 'exitfullscreen');
-
-        return this;
     }
 
     /**
@@ -902,15 +887,10 @@ class Plyr {
      * TODO: update player with state, support, enabled
      */
     airplay() {
-        // Bail if no support
+        // Show dialog if supported
-        if (!support.airplay) {
+        if (support.airplay) {
-            return this;
-        }
-
-        // Show dialog
             this.media.webkitShowPlaybackTargetPicker();
-
+        }
-        return this;
     }
 
     /**
@@ -920,12 +900,12 @@ class Plyr {
     toggleControls(toggle) {
         // We need controls of course...
         if (!utils.is.element(this.elements.controls)) {
-            return this;
+            return;
         }
 
         // Don't hide if no UI support or it's audio
         if (!this.supported.ui || this.isAudio) {
-            return this;
+            return;
         }
 
         let delay = 0;
@@ -981,7 +961,7 @@ class Plyr {
 
             // Always show controls when paused or if touch
             if (this.paused || this.loading) {
-                return this;
+                return;
             }
 
             // Delay for hiding on touch
@@ -1025,8 +1005,6 @@ class Plyr {
                 }
             }, delay);
         }
-
-        return this;
     }
 
     /**
@@ -1036,7 +1014,6 @@ class Plyr {
      */
     on(event, callback) {
         utils.on(this.elements.container, event, callback);
-        return this;
     }
 
     /**
@@ -1046,7 +1023,6 @@ class Plyr {
      */
     off(event, callback) {
         utils.off(this.elements.container, event, callback);
-        return this;
     }
 
     /**