Moved mute button inside plyr__volume

src/js/controls.js

@@ -1142,9 +1142,8 @@ const controls = {
         // Focus the first item if key interaction
         if (show && is.keyboardEvent(input)) {
             controls.focusFirstMenuItem.call(this, null, true);
-        }
+        } else if (!show && !hidden) {
-        // If closing, re-focus the button
+            // If closing, re-focus the button
-        else if (!show && !hidden) {
             setFocus.call(this, button, is.keyboardEvent(input));
         }
     },
@@ -1297,36 +1296,39 @@ const controls = {
             container.appendChild(controls.createTime.call(this, 'duration'));
         }
 
-        // Toggle mute button
+        // Volume controls
-        if (this.config.controls.includes('mute')) {
+        if (this.config.controls.includes('mute') || this.config.controls.includes('volume')) {
-            container.appendChild(controls.createButton.call(this, 'mute'));
-        }
-
-        // Volume range control
-        if (this.config.controls.includes('volume')) {
             const volume = createElement('div', {
                 class: 'plyr__volume',
             });
 
-            // Set the attributes
+            // Toggle mute button
-            const attributes = {
+            if (this.config.controls.includes('mute')) {
-                max: 1,
+                volume.appendChild(controls.createButton.call(this, 'mute'));
-                step: 0.05,
+            }
-                value: this.config.volume,
-            };
 
-            // Create the volume range slider
+            // Volume range control
-            volume.appendChild(
+            if (this.config.controls.includes('volume')) {
-                controls.createRange.call(
+                // Set the attributes
-                    this,
+                const attributes = {
-                    'volume',
+                    max: 1,
-                    extend(attributes, {
+                    step: 0.05,
-                        id: `plyr-volume-${data.id}`,
+                    value: this.config.volume,
-                    }),
+                };
-                ),
-            );
 
-            this.elements.volume = volume;
+                // Create the volume range slider
+                volume.appendChild(
+                    controls.createRange.call(
+                        this,
+                        'volume',
+                        extend(attributes, {
+                            id: `plyr-volume-${data.id}`,
+                        }),
+                    ),
+                );
+
+                this.elements.volume = volume;
+            }
 
             container.appendChild(volume);
         }
@@ -1512,6 +1514,7 @@ const controls = {
 
         this.elements.controls = container;
 
+        // Set available quality levels
         if (this.isHTML5) {
             controls.setQualityMenu.call(this, html5.getQualityOptions.call(this));
         }

src/sass/components/volume.scss

@@ -3,20 +3,23 @@
 // --------------------------------------------------------------
 
 .plyr__volume {
+    align-items: center;
+    display: flex;
     flex: 1;
     position: relative;
 
     input[type='range'] {
+        margin-left: ($plyr-control-spacing / 2);
         position: relative;
         z-index: 2;
     }
 
     @media (min-width: $plyr-bp-sm) {
-        max-width: 50px;
+        max-width: 90px;
     }
 
     @media (min-width: $plyr-bp-md) {
-        max-width: 80px;
+        max-width: 110px;
     }
 }