From 468b20d227f7b6c17aab90364e3d9699bae0ac9d Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Mon, 13 Aug 2018 23:42:12 +1000
Subject: [PATCH] Moved mute button inside plyr__volume

---
 src/js/controls.js              | 57 +++++++++++++++++----------------
 src/sass/components/volume.scss |  7 ++--
 2 files changed, 35 insertions(+), 29 deletions(-)

diff --git a/src/js/controls.js b/src/js/controls.js
index a9957be9..9152f338 100644
--- a/src/js/controls.js
+++ b/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);
-        }
-        // If closing, re-focus the button
-        else if (!show && !hidden) {
+        } else if (!show && !hidden) {
+            // If closing, re-focus the button
             setFocus.call(this, button, is.keyboardEvent(input));
         }
     },
@@ -1297,36 +1296,39 @@ const controls = {
             container.appendChild(controls.createTime.call(this, 'duration'));
         }
 
-        // Toggle mute button
-        if (this.config.controls.includes('mute')) {
-            container.appendChild(controls.createButton.call(this, 'mute'));
-        }
-
-        // Volume range control
-        if (this.config.controls.includes('volume')) {
+        // Volume controls
+        if (this.config.controls.includes('mute') || this.config.controls.includes('volume')) {
             const volume = createElement('div', {
                 class: 'plyr__volume',
             });
 
-            // Set the attributes
-            const attributes = {
-                max: 1,
-                step: 0.05,
-                value: this.config.volume,
-            };
+            // Toggle mute button
+            if (this.config.controls.includes('mute')) {
+                volume.appendChild(controls.createButton.call(this, 'mute'));
+            }
 
-            // Create the volume range slider
-            volume.appendChild(
-                controls.createRange.call(
-                    this,
-                    'volume',
-                    extend(attributes, {
-                        id: `plyr-volume-${data.id}`,
-                    }),
-                ),
-            );
+            // Volume range control
+            if (this.config.controls.includes('volume')) {
+                // Set the attributes
+                const attributes = {
+                    max: 1,
+                    step: 0.05,
+                    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));
         }
diff --git a/src/sass/components/volume.scss b/src/sass/components/volume.scss
index d22b7cba..82a6dd36 100644
--- a/src/sass/components/volume.scss
+++ b/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;
     }
 }