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

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;
+  }
+
 }

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>';
 

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
     }
-}
+}

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
     }
-}
+}