v3.3.16

changelog.md

@@ -1,3 +1,15 @@
+# v3.3.16
+
+-   Fixed regression relating the play button status (fixes #1048)
+
+# v3.3.15
+
+-   Fix for error relating to play buttons when switching source
+
+# v3.3.14
+
+-   Fix sprite loading regression
+
 # v3.3.13
 
 You guessed it, a load of awesome changes from contributors:

demo/index.html

@@ -96,7 +96,7 @@
                 <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" size="576">
                 <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4" type="video/mp4" size="720">
                 <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4" type="video/mp4" size="1080">
-                <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1440p.mp4" type="video/mp4" size="1440">
+                <!-- <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1440p.mp4" type="video/mp4" size="1440"> -->
 
                 <!-- Caption files -->
                 <track kind="captions" label="English" srclang="en" src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt"

demo/src/js/demo.js

@@ -143,7 +143,11 @@ import Raven from 'raven-js';
             // Set a new source
             function newSource(type, init) {
                 // Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video
-                if (!(type in types) || (!init && type === currentType) || (!currentType.length && type === types.video)) {
+                if (
+                    !(type in types) ||
+                    (!init && type === currentType) ||
+                    (!currentType.length && type === types.video)
+                ) {
                     return;
                 }
 
@@ -215,10 +219,12 @@ import Raven from 'raven-js';
                     case types.youtube:
                         player.source = {
                             type: 'video',
-                            sources: [{
-                                src: 'https://youtube.com/watch?v=bTqVqk7FSmY',
-                                provider: 'youtube',
-                            }],
+                            sources: [
+                                {
+                                    src: 'https://youtube.com/watch?v=bTqVqk7FSmY',
+                                    provider: 'youtube',
+                                },
+                            ],
                         };
 
                         break;
@@ -226,10 +232,12 @@ import Raven from 'raven-js';
                     case types.vimeo:
                         player.source = {
                             type: 'video',
-                            sources: [{
-                                src: 'https://vimeo.com/76979871',
-                                provider: 'vimeo',
-                            }],
+                            sources: [
+                                {
+                                    src: 'https://vimeo.com/76979871',
+                                    provider: 'vimeo',
+                                },
+                            ],
                         };
 
                         break;

dist/plyr.js

@@ -1137,6 +1137,51 @@ typeof navigator === "object" && (function (global, factory) {
         return Storage;
     }();
 
+    // ==========================================================================
+    // Fetch wrapper
+    // Using XHR to avoid issues with older browsers
+    // ==========================================================================
+
+    function fetch(url) {
+        var responseType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'text';
+
+        return new Promise(function (resolve, reject) {
+            try {
+                var request = new XMLHttpRequest();
+
+                // Check for CORS support
+                if (!('withCredentials' in request)) {
+                    return;
+                }
+
+                request.addEventListener('load', function () {
+                    if (responseType === 'text') {
+                        try {
+                            resolve(JSON.parse(request.responseText));
+                        } catch (e) {
+                            resolve(request.responseText);
+                        }
+                    } else {
+                        resolve(request.response);
+                    }
+                });
+
+                request.addEventListener('error', function () {
+                    throw new Error(request.status);
+                });
+
+                request.open('GET', url, true);
+
+                // Set the required response type
+                request.responseType = responseType;
+
+                request.send();
+            } catch (e) {
+                reject(e);
+            }
+        });
+    }
+
     // ==========================================================================
 
     // Load an external SVG sprite
@@ -2709,51 +2754,6 @@ typeof navigator === "object" && (function (global, factory) {
         }
     };
 
-    // ==========================================================================
-    // Fetch wrapper
-    // Using XHR to avoid issues with older browsers
-    // ==========================================================================
-
-    function fetch$1(url) {
-        var responseType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'text';
-
-        return new Promise(function (resolve, reject) {
-            try {
-                var request = new XMLHttpRequest();
-
-                // Check for CORS support
-                if (!('withCredentials' in request)) {
-                    return;
-                }
-
-                request.addEventListener('load', function () {
-                    if (responseType === 'text') {
-                        try {
-                            resolve(JSON.parse(request.responseText));
-                        } catch (e) {
-                            resolve(request.responseText);
-                        }
-                    } else {
-                        resolve(request.response);
-                    }
-                });
-
-                request.addEventListener('error', function () {
-                    throw new Error(request.statusText);
-                });
-
-                request.open('GET', url, true);
-
-                // Set the required response type
-                request.responseType = responseType;
-
-                request.send();
-            } catch (e) {
-                reject(e);
-            }
-        });
-    }
-
     // ==========================================================================
 
     /**
@@ -2833,7 +2833,7 @@ typeof navigator === "object" && (function (global, factory) {
                     var url = parseUrl(src);
 
                     if (url !== null && url.hostname !== window.location.href.hostname && ['http:', 'https:'].includes(url.protocol)) {
-                        fetch$1(src, 'blob').then(function (blob) {
+                        fetch(src, 'blob').then(function (blob) {
                             track.setAttribute('src', window.URL.createObjectURL(blob));
                         }).catch(function () {
                             removeElement(track);
@@ -3997,11 +3997,9 @@ typeof navigator === "object" && (function (global, factory) {
             }
 
             // If there's a play button, set label
-            if (is.nodeList(this.elements.buttons.play)) {
-                Array.from(this.elements.buttons.play).forEach(function (button) {
-                    button.setAttribute('aria-label', label);
-                });
-            }
+            Array.from(this.elements.buttons.play || []).forEach(function (button) {
+                button.setAttribute('aria-label', label);
+            });
 
             // Set iframe title
             // https://github.com/sampotts/plyr/issues/124
@@ -4081,7 +4079,7 @@ typeof navigator === "object" && (function (global, factory) {
             toggleClass(this.elements.container, this.config.classNames.stopped, this.stopped);
 
             // Set state
-            Array.from(this.elements.buttons.play).forEach(function (target) {
+            Array.from(this.elements.buttons.play || []).forEach(function (target) {
                 target.pressed = _this3.playing;
             });
 
@@ -5253,7 +5251,7 @@ typeof navigator === "object" && (function (global, factory) {
             player.media = replaceElement(wrapper, player.media);
 
             // Get poster image
-            fetch$1(format(player.config.urls.vimeo.api, id), 'json').then(function (response) {
+            fetch(format(player.config.urls.vimeo.api, id), 'json').then(function (response) {
                 if (is.empty(response)) {
                     return;
                 }
@@ -5668,7 +5666,7 @@ typeof navigator === "object" && (function (global, factory) {
             if (is.string(key) && !is.empty(key)) {
                 var url = format(this.config.urls.youtube.api, videoId, key);
 
-                fetch$1(url).then(function (result) {
+                fetch(url).then(function (result) {
                     if (is.object(result)) {
                         _this2.config.title = result.items[0].snippet.title;
                         ui.setTitle.call(_this2);

dist/plyr.polyfilled.js

@@ -6523,6 +6523,51 @@ typeof navigator === "object" && (function (global, factory) {
 	    return Storage;
 	}();
 
+	// ==========================================================================
+	// Fetch wrapper
+	// Using XHR to avoid issues with older browsers
+	// ==========================================================================
+
+	function fetch(url) {
+	    var responseType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'text';
+
+	    return new Promise(function (resolve, reject) {
+	        try {
+	            var request = new XMLHttpRequest();
+
+	            // Check for CORS support
+	            if (!('withCredentials' in request)) {
+	                return;
+	            }
+
+	            request.addEventListener('load', function () {
+	                if (responseType === 'text') {
+	                    try {
+	                        resolve(JSON.parse(request.responseText));
+	                    } catch (e) {
+	                        resolve(request.responseText);
+	                    }
+	                } else {
+	                    resolve(request.response);
+	                }
+	            });
+
+	            request.addEventListener('error', function () {
+	                throw new Error(request.status);
+	            });
+
+	            request.open('GET', url, true);
+
+	            // Set the required response type
+	            request.responseType = responseType;
+
+	            request.send();
+	        } catch (e) {
+	            reject(e);
+	        }
+	    });
+	}
+
 	// ==========================================================================
 
 	// Load an external SVG sprite
@@ -8095,51 +8140,6 @@ typeof navigator === "object" && (function (global, factory) {
 	    }
 	};
 
-	// ==========================================================================
-	// Fetch wrapper
-	// Using XHR to avoid issues with older browsers
-	// ==========================================================================
-
-	function fetch$1(url) {
-	    var responseType = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'text';
-
-	    return new Promise(function (resolve, reject) {
-	        try {
-	            var request = new XMLHttpRequest();
-
-	            // Check for CORS support
-	            if (!('withCredentials' in request)) {
-	                return;
-	            }
-
-	            request.addEventListener('load', function () {
-	                if (responseType === 'text') {
-	                    try {
-	                        resolve(JSON.parse(request.responseText));
-	                    } catch (e) {
-	                        resolve(request.responseText);
-	                    }
-	                } else {
-	                    resolve(request.response);
-	                }
-	            });
-
-	            request.addEventListener('error', function () {
-	                throw new Error(request.statusText);
-	            });
-
-	            request.open('GET', url, true);
-
-	            // Set the required response type
-	            request.responseType = responseType;
-
-	            request.send();
-	        } catch (e) {
-	            reject(e);
-	        }
-	    });
-	}
-
 	// ==========================================================================
 
 	/**
@@ -8219,7 +8219,7 @@ typeof navigator === "object" && (function (global, factory) {
 	                var url = parseUrl(src);
 
 	                if (url !== null && url.hostname !== window.location.href.hostname && ['http:', 'https:'].includes(url.protocol)) {
-	                    fetch$1(src, 'blob').then(function (blob) {
+	                    fetch(src, 'blob').then(function (blob) {
 	                        track.setAttribute('src', window.URL.createObjectURL(blob));
 	                    }).catch(function () {
 	                        removeElement(track);
@@ -9383,11 +9383,9 @@ typeof navigator === "object" && (function (global, factory) {
 	        }
 
 	        // If there's a play button, set label
-	        if (is$1.nodeList(this.elements.buttons.play)) {
-	            Array.from(this.elements.buttons.play).forEach(function (button) {
-	                button.setAttribute('aria-label', label);
-	            });
-	        }
+	        Array.from(this.elements.buttons.play || []).forEach(function (button) {
+	            button.setAttribute('aria-label', label);
+	        });
 
 	        // Set iframe title
 	        // https://github.com/sampotts/plyr/issues/124
@@ -9467,7 +9465,7 @@ typeof navigator === "object" && (function (global, factory) {
 	        toggleClass(this.elements.container, this.config.classNames.stopped, this.stopped);
 
 	        // Set state
-	        Array.from(this.elements.buttons.play).forEach(function (target) {
+	        Array.from(this.elements.buttons.play || []).forEach(function (target) {
 	            target.pressed = _this3.playing;
 	        });
 
@@ -10633,7 +10631,7 @@ typeof navigator === "object" && (function (global, factory) {
 	        player.media = replaceElement(wrapper, player.media);
 
 	        // Get poster image
-	        fetch$1(format(player.config.urls.vimeo.api, id), 'json').then(function (response) {
+	        fetch(format(player.config.urls.vimeo.api, id), 'json').then(function (response) {
 	            if (is$1.empty(response)) {
 	                return;
 	            }
@@ -11048,7 +11046,7 @@ typeof navigator === "object" && (function (global, factory) {
 	        if (is$1.string(key) && !is$1.empty(key)) {
 	            var url = format(this.config.urls.youtube.api, videoId, key);
 
-	            fetch$1(url).then(function (result) {
+	            fetch(url).then(function (result) {
 	                if (is$1.object(result)) {
 	                    _this2.config.title = result.items[0].snippet.title;
 	                    ui.setTitle.call(_this2);

package.json

@@ -1,6 +1,6 @@
 {
     "name": "plyr",
-    "version": "3.3.13",
+    "version": "3.3.16",
     "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
     "homepage": "https://plyr.io",
     "main": "./dist/plyr.js",
@@ -49,7 +49,7 @@
         "stylelint-config-recommended": "^2.1.0",
         "stylelint-config-sass-guidelines": "^5.0.0",
         "stylelint-order": "^0.8.1",
-        "stylelint-scss": "^3.1.2",
+        "stylelint-scss": "^3.1.3",
         "stylelint-selector-bem-pattern": "^2.0.0"
     },
     "keywords": ["HTML5 Video", "HTML5 Audio", "Media Player", "DASH", "Shaka", "WordPress", "HLS"],

readme.md

@@ -132,13 +132,13 @@ See [initialising](#initialising) for more information on advanced setups.
 You can use our CDN (provided by [Fastly](https://www.fastly.com/)) for the JavaScript. There's 2 versions; one with and one without [polyfills](#polyfills). My recommendation would be to manage polyfills seperately as part of your application but to make life easier you can use the polyfilled build.
 
 ```html
-<script src="https://cdn.plyr.io/3.3.13/plyr.js"></script>
+<script src="https://cdn.plyr.io/3.3.16/plyr.js"></script>
 ```
 
 ...or...
 
 ```html
-<script src="https://cdn.plyr.io/3.3.13/plyr.polyfilled.js"></script>
+<script src="https://cdn.plyr.io/3.3.16/plyr.polyfilled.js"></script>
 ```
 
 ### CSS
@@ -152,13 +152,13 @@ Include the `plyr.css` stylsheet into your `<head>`
 If you want to use our CDN (provided by [Fastly](https://www.fastly.com/)) for the default CSS, you can use the following:
 
 ```html
-<link rel="stylesheet" href="https://cdn.plyr.io/3.3.13/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/3.3.16/plyr.css">
 ```
 
 ### SVG Sprite
 
 The SVG sprite is loaded automatically from our CDN (provided by [Fastly](https://www.fastly.com/)). To change this, see the [options](#options) below. For
-reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.3.13/plyr.svg`.
+reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.3.16/plyr.svg`.
 
 ## Ads
 

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v3.3.13
+// plyr.js v3.3.16
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================

src/js/plyr.polyfilled.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr Polyfilled Build
-// plyr.js v3.3.13
+// plyr.js v3.3.16
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================

src/js/ui.js

@@ -135,11 +135,9 @@ const ui = {
         }
 
         // If there's a play button, set label
-        if (is.nodeList(this.elements.buttons.play)) {
-            Array.from(this.elements.buttons.play).forEach(button => {
-                button.setAttribute('aria-label', label);
-            });
-        }
+        Array.from(this.elements.buttons.play || []).forEach(button => {
+            button.setAttribute('aria-label', label);
+        });
 
         // Set iframe title
         // https://github.com/sampotts/plyr/issues/124
@@ -214,7 +212,7 @@ const ui = {
         toggleClass(this.elements.container, this.config.classNames.stopped, this.stopped);
 
         // Set state
-        Array.from(this.elements.buttons.play).forEach(target => {
+        Array.from(this.elements.buttons.play || []).forEach(target => {
             target.pressed = this.playing;
         });
 

src/js/utils/fetch.js

@@ -26,7 +26,7 @@ export default function fetch(url, responseType = 'text') {
             });
 
             request.addEventListener('error', () => {
-                throw new Error(request.statusText);
+                throw new Error(request.status);
             });
 
             request.open('GET', url, true);

src/js/utils/loadSprite.js

@@ -3,6 +3,7 @@
 // ==========================================================================
 
 import Storage from './../storage';
+import fetch from './fetch';
 import is from './is';
 
 // Load an external SVG sprite