From c85bc00df20bd59ded1e2b9202e3c1d2877c8ac5 Mon Sep 17 00:00:00 2001
From: Pat O'Neill <pgoneill@gmail.com>
Date: Thu, 11 Apr 2019 12:37:52 -0400
Subject: [PATCH] fix: always show the mute button by default in responsive
 mode (#5914)

---
 src/css/components/_adaptive.scss | 103 +++++++++++++++++++-----------
 1 file changed, 65 insertions(+), 38 deletions(-)

diff --git a/src/css/components/_adaptive.scss b/src/css/components/_adaptive.scss
index c4ce313bd..1b7f96650 100644
--- a/src/css/components/_adaptive.scss
+++ b/src/css/components/_adaptive.scss
@@ -1,44 +1,71 @@
-// When the player is absurdly tiny, display nothing but:
+// When the player is "medium" and higher, display everything by default.
+//
+// When the player is "small", display only:
 // - Play button
+// - Volume Mute button
+// - Progress bar
+// - Subs-Caps button
+// - Fullscreen button
+//
+// When the player is "small", display only:
+// - Play button
+// - Volume Mute button
+// - Progress bar
+// - Fullscreen button
+//
+// When the player is "tiny", display only:
+// - Play button
+// - Volume Mute button
 // - Fullscreen Button
-.video-js.vjs-layout-tiny:not(.vjs-fullscreen) {
-  .vjs-custom-control-spacer {
-    @include flex(auto);
-    display: block;
+//
+.video-js:not(.vjs-fullscreen) {
+
+  &.vjs-layout-small,
+  &.vjs-layout-x-small,
+  &.vjs-layout-tiny {
+    .vjs-current-time,
+    .vjs-time-divider,
+    .vjs-duration,
+    .vjs-remaining-time,
+    .vjs-playback-rate,
+    .vjs-chapters-button,
+    .vjs-descriptions-button,
+    .vjs-captions-button,
+    .vjs-subtitles-button,
+    .vjs-audio-button,
+    .vjs-volume-control {
+      display: none;
+    }
+
+    // Reset the size of the volume panel to the default so we don't see a big
+    // empty space to the right of the mute button.
+    .vjs-volume-panel.vjs-volume-panel-horizontal:hover,
+    .vjs-volume-panel.vjs-volume-panel-horizontal:active,
+    .vjs-volume-panel.vjs-volume-panel-horizontal.vjs-slider-active {
+      width: auto;
+      width: initial;
+    }
   }
 
-  &.vjs-no-flex .vjs-custom-control-spacer { width: auto; }
+  &.vjs-layout-x-small,
+  &.vjs-layout-tiny {
+    .vjs-subs-caps-button {
+      display: none;
+    }
+  }
 
-  .vjs-current-time, .vjs-time-divider, .vjs-duration, .vjs-remaining-time,
-  .vjs-playback-rate, .vjs-progress-control,
-  .vjs-mute-control, .vjs-volume-control, .vjs-volume-panel,
-  .vjs-chapters-button, .vjs-descriptions-button, .vjs-captions-button,
-  .vjs-subtitles-button, .vjs-subs-caps-button, .vjs-audio-button { display: none; }
-}
-
-// When the player is x-small, display nothing but:
-// - Play button
-// - Progress bar
-// - Fullscreen Button
-.video-js.vjs-layout-x-small:not(.vjs-fullscreen) {
-  .vjs-current-time, .vjs-time-divider, .vjs-duration, .vjs-remaining-time,
-  .vjs-playback-rate,
-  .vjs-mute-control, .vjs-volume-control, .vjs-volume-panel,
-  .vjs-chapters-button, .vjs-descriptions-button, .vjs-captions-button,
-  .vjs-subtitles-button, .vjs-subs-caps-button, .vjs-audio-button { display: none; }
-}
-
-
-// When the player is small, display nothing but:
-// - Play button
-// - Progress bar
-// - Volume menu button
-// - Subs-Caps Button
-// - Fullscreen button
-.video-js.vjs-layout-small:not(.vjs-fullscreen) {
-  .vjs-current-time, .vjs-time-divider, .vjs-duration, .vjs-remaining-time,
-  .vjs-playback-rate,
-  .vjs-mute-control, .vjs-volume-control, .vjs-volume-panel,
-  .vjs-chapters-button, .vjs-descriptions-button, .vjs-captions-button,
-  .vjs-subtitles-button, .vjs-audio-button { display: none; }
+  &.vjs-layout-tiny {
+    .vjs-custom-control-spacer {
+      @include flex(auto);
+      display: block;
+    }
+
+    &.vjs-no-flex .vjs-custom-control-spacer {
+      width: auto;
+    }
+
+    .vjs-progress-control {
+      display: none;
+    }
+  }
 }