From 89be94fff347e9a3b2e129be5ed8006e6e956a31 Mon Sep 17 00:00:00 2001
From: xlinbsd <xlinbsd@free.fr>
Date: Tue, 5 Mar 2019 13:09:32 +0100
Subject: [PATCH]  Better progressive playback controls of bottom pages (#164)

* Allow volume change on shrinker width screenview
* Tiny better width compromise in width control fluidity
* Better progressive music control panel
* Delay hiding of album image displayed
* Wider volume slider
---
 .../nowplayingbar/nowplayingbar.css           | 54 ++++++++++++++-----
 .../nowplayingbar/nowplayingbar.js            |  2 +-
 src/css/nowplaying.css                        | 22 ++++++--
 src/css/videoosd.css                          | 11 ++--
 4 files changed, 67 insertions(+), 22 deletions(-)

diff --git a/src/bower_components/emby-webcomponents/nowplayingbar/nowplayingbar.css b/src/bower_components/emby-webcomponents/nowplayingbar/nowplayingbar.css
index 1392541e1..80f078d88 100644
--- a/src/bower_components/emby-webcomponents/nowplayingbar/nowplayingbar.css
+++ b/src/bower_components/emby-webcomponents/nowplayingbar/nowplayingbar.css
@@ -119,38 +119,66 @@
     height: 1.2em !important;
 }
 
-@media all and (max-width: 87.5em) {
 
-    .nowPlayingBarUserDataButtons {
+@media all and (max-width: 70em) {
+
+    .nowPlayingBarRight .nowPlayingBarUserDataButtons {
         display: none;
     }
 }
 
-@media all and (max-width: 68.75em) {
-
-    .nowPlayingBarVolumeSliderContainer, .nowPlayingBar .muteButton, .nowPlayingBar .unmuteButton {
+@media all and (max-width: 66em) {
+    .toggleRepeatButton {
         display: none !important;
     }
 }
 
-@media all and (max-width: 50em) {
+
+@media all and (max-width: 62em) {
+
+    .nowPlayingBarCenter .nowPlayingBarCurrentTime {
+        display: none !important;
+    }
+
+}
+
+@media all and (max-width: 56em) {
 
     .nowPlayingBarCenter {
         display: none !important;
     }
 
-    .toggleRepeatButton {
-        display: none;
-    }
 }
 
-@media all and (min-width: 50em) {
+
+@media all and (min-width: 56em) {
 
     .nowPlayingBarRight .playPauseButton {
         display: none;
     }
 
-    .nowPlayingBarInfoContainer {
-        max-width: 40%;
-    }
+}
+
+@media all and (max-width: 40em) {
+
+    .nowPlayingBarInfoContainer .nowPlayingImage {
+        display: none;
+    }
+
+}
+
+@media all and (max-width: 36em) {
+
+    .nowPlayingBarRight .nowPlayingBarVolumeSliderContainer {
+        display: none !important;
+    }
+
+}
+
+@media all and (max-width: 24em) {
+
+  .nowPlayingBar .muteButton, .nowPlayingBar .unmuteButton {
+    display: none;
+  }
+
 }
diff --git a/src/bower_components/emby-webcomponents/nowplayingbar/nowplayingbar.js b/src/bower_components/emby-webcomponents/nowplayingbar/nowplayingbar.js
index 481155d3b..01c920a50 100644
--- a/src/bower_components/emby-webcomponents/nowplayingbar/nowplayingbar.js
+++ b/src/bower_components/emby-webcomponents/nowplayingbar/nowplayingbar.js
@@ -56,7 +56,7 @@ define(['require', 'datetime', 'itemHelper', 'events', 'browser', 'imageLoader',
 
         html += '<button is="paper-icon-button-light" class="muteButton mediaButton"><i class="md-icon">&#xE050;</i></button>';
 
-        html += '<div class="sliderContainer nowPlayingBarVolumeSliderContainer hide" style="width:100px;vertical-align:middle;display:inline-flex;">';
+        html += '<div class="sliderContainer nowPlayingBarVolumeSliderContainer hide" style="width:9em;vertical-align:middle;display:inline-flex;">';
         html += '<input type="range" is="emby-slider" pin step="1" min="0" max="100" value="0" class="slider-medium-thumb nowPlayingBarVolumeSlider"/>';
         html += '</div>';
 
diff --git a/src/css/nowplaying.css b/src/css/nowplaying.css
index 93765d541..ab8695dee 100644
--- a/src/css/nowplaying.css
+++ b/src/css/nowplaying.css
@@ -186,14 +186,26 @@
 }
 
 .nowPlayingVolumeSliderContainer {
-    width: 6em
+    width: 9em
+}
+
+@media all and (max-width:50em) {
+    .nowPlayingInfoButtons .nowPlayingPageUserDataButtons {
+        display: none !important
+    }
+}
+
+@media all and (max-width:47em) {
+    .nowPlayingInfoButtons .repeatToggleButton {
+        display: none !important
+    }
 }
 
 @media all and (max-width:34em) {
 
-    .btnNowPlayingFastForward,
-    .btnNowPlayingRewind,
-    .playlist .listItemMediaInfo {
+    .nowPlayingInfoButtons .btnNowPlayingFastForward,
+    .nowPlayingInfoButtons .btnNowPlayingRewind,
+    .nowPlayingInfoButtons .playlist .listItemMediaInfo {
         display: none !important
     }
-}
\ No newline at end of file
+}
diff --git a/src/css/videoosd.css b/src/css/videoosd.css
index a8904b994..bd24e4130 100644
--- a/src/css/videoosd.css
+++ b/src/css/videoosd.css
@@ -138,7 +138,7 @@
 }
 
 .osdVolumeSliderContainer {
-    width: 6.5em;
+    width: 9em;
     -webkit-box-flex: 1;
     -webkit-flex-grow: 1;
     flex-grow: 1
@@ -244,14 +244,19 @@
     }
 }
 
-@media all and (max-width:37.5em) {
+@media all and (max-width:43em) {
     .videoOsdBottom .volumeButtons {
         display: none !important
     }
 }
+@media all and (max-width:50em) {
+    .videoOsdBottom .btnFastForward, .videoOsdBottom .btnRewind {
+        display: none !important
+    }
+}
 
 @media all and (max-width:75em) {
     .videoOsdBottom .endsAtText {
         display: none !important
     }
-}
\ No newline at end of file
+}