v3.4.3

Fix bug with nodeList for play buttons

changelog.md

@@ -1,3 +1,11 @@
+# v3.4.3
+
+-   Fixed issue with nodeList for custom playback controls
+
+# v3.4.2
+
+-   Fix play/pause button state
+
 # v3.4.1
 
 -   Bug fix for custom controls (fixes #1161)

dist/plyr.js

@@ -2942,8 +2942,7 @@ typeof navigator === "object" && (function (global, factory) {
 
             // Add pressed property to buttons
             if (!is.empty(this.elements.buttons)) {
-                // Toggle classname when pressed property is set
-                Object.values(this.elements.buttons).filter(Boolean).forEach(function (button) {
+                var addProperty = function addProperty(button) {
                     var className = _this10.config.classNames.controlPressed;
                     Object.defineProperty(button, 'pressed', {
                         enumerable: true,
@@ -2956,6 +2955,15 @@ typeof navigator === "object" && (function (global, factory) {
                             toggleClass(button, className, pressed);
                         }
                     });
+                };
+
+                // Toggle classname when pressed property is set
+                Object.values(this.elements.buttons).filter(Boolean).forEach(function (button) {
+                    if (is.array(button) || is.nodeList(button)) {
+                        Array.from(button).filter(Boolean).forEach(addProperty);
+                    } else {
+                        addProperty(button);
+                    }
                 });
             }
 

dist/plyr.polyfilled.js

@@ -8369,8 +8369,7 @@ typeof navigator === "object" && (function (global, factory) {
 
 	        // Add pressed property to buttons
 	        if (!is$1.empty(this.elements.buttons)) {
-	            // Toggle classname when pressed property is set
-	            Object.values(this.elements.buttons).filter(Boolean).forEach(function (button) {
+	            var addProperty = function addProperty(button) {
 	                var className = _this10.config.classNames.controlPressed;
 	                Object.defineProperty(button, 'pressed', {
 	                    enumerable: true,
@@ -8383,6 +8382,15 @@ typeof navigator === "object" && (function (global, factory) {
 	                        toggleClass(button, className, pressed);
 	                    }
 	                });
+	            };
+
+	            // Toggle classname when pressed property is set
+	            Object.values(this.elements.buttons).filter(Boolean).forEach(function (button) {
+	                if (is$1.array(button) || is$1.nodeList(button)) {
+	                    Array.from(button).filter(Boolean).forEach(addProperty);
+	                } else {
+	                    addProperty(button);
+	                }
 	            });
 	        }
 

gulpfile.js

@@ -44,7 +44,7 @@ const paths = {
         // Source paths
         src: {
             sass: path.join(root, 'src/sass/**/*.scss'),
-            js: path.join(root, 'src/js/**/*'),
+            js: path.join(root, 'src/js/**/*.js'),
             sprite: path.join(root, 'src/sprite/*.svg'),
         },
 
@@ -55,7 +55,7 @@ const paths = {
         // Source paths
         src: {
             sass: path.join(root, 'demo/src/sass/**/*.scss'),
-            js: path.join(root, 'demo/src/js/**/*'),
+            js: path.join(root, 'demo/src/js/**/*.js'),
         },
 
         // Output paths

package.json

@@ -1,6 +1,6 @@
 {
     "name": "plyr",
-    "version": "3.4.1",
+    "version": "3.4.3",
     "description": "A simple, accessible and customizable HTML5, YouTube and Vimeo media player",
     "homepage": "https://plyr.io",
     "author": "Sam Potts <sam@potts.es>",

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.4.1/plyr.js"></script>
+<script src="https://cdn.plyr.io/3.4.3/plyr.js"></script>
 ```
 
 ...or...
 
 ```html
-<script src="https://cdn.plyr.io/3.4.1/plyr.polyfilled.js"></script>
+<script src="https://cdn.plyr.io/3.4.3/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.4.1/plyr.css">
+<link rel="stylesheet" href="https://cdn.plyr.io/3.4.3/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.4.1/plyr.svg`.
+reference, the CDN hosted SVG sprite can be found at `https://cdn.plyr.io/3.4.3/plyr.svg`.
 
 ## Ads
 

src/js/controls.js

@@ -1610,20 +1610,28 @@ const controls = {
 
         // Add pressed property to buttons
         if (!is.empty(this.elements.buttons)) {
+            const addProperty = button => {
+                const className = this.config.classNames.controlPressed;
+                Object.defineProperty(button, 'pressed', {
+                    enumerable: true,
+                    get() {
+                        return hasClass(button, className);
+                    },
+                    set(pressed = false) {
+                        toggleClass(button, className, pressed);
+                    },
+                });
+            };
+
             // Toggle classname when pressed property is set
             Object.values(this.elements.buttons)
                 .filter(Boolean)
                 .forEach(button => {
-                    const className = this.config.classNames.controlPressed;
-                    Object.defineProperty(button, 'pressed', {
-                        enumerable: true,
-                        get() {
-                            return hasClass(button, className);
-                        },
-                        set(pressed = false) {
-                            toggleClass(button, className, pressed);
-                        },
-                    });
+                    if (is.array(button) || is.nodeList(button)) {
+                        Array.from(button).filter(Boolean).forEach(addProperty);
+                    } else {
+                        addProperty(button);
+                    }
                 });
         }
 

src/js/plyr.js

@@ -1,6 +1,6 @@
 // ==========================================================================
 // Plyr
-// plyr.js v3.4.1
+// plyr.js v3.4.3
 // 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.4.1
+// plyr.js v3.4.3
 // https://github.com/sampotts/plyr
 // License: The MIT License (MIT)
 // ==========================================================================