From 9439a306b644dc6c72a44093002b748eb8606f94 Mon Sep 17 00:00:00 2001
From: samuel9554 <samuel95_54@hotmail.com>
Date: Sun, 12 Apr 2020 20:15:58 -0400
Subject: [PATCH] Various visual fix

---
 src/components/remotecontrol/remotecontrol.css | 17 +++++++++++++++--
 src/components/remotecontrol/remotecontrol.js  | 12 +++++++++---
 src/nowplaying.html                            | 12 ++++++------
 3 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/src/components/remotecontrol/remotecontrol.css b/src/components/remotecontrol/remotecontrol.css
index 17003a4ec..af03c51e0 100644
--- a/src/components/remotecontrol/remotecontrol.css
+++ b/src/components/remotecontrol/remotecontrol.css
@@ -90,7 +90,10 @@
 .nowPlayingPageImageContainerNoAlbum {
     width: 100%;
     position: relative;
-    background-color: #5ccea9;
+}
+
+.nowPlayingPageImageContainerNoAlbum button {
+    cursor: default;
 }
 
 .nowPlayingPageImageContainerNoAlbum::after {
@@ -368,8 +371,13 @@
         border-radius: 0;
     }
 
+    .playlistSectionButton .volumecontrol {
+        width: 100%;
+    }
+
     .remoteControlSection {
-        margin: 4.2em 0 0 0;
+        margin: 0;
+        padding: 0 0 4.2em 0;
     }
 
     .nowPlayingButtonsContainer {
@@ -554,8 +562,13 @@
         border-radius: 0;
     }
 
+    .playlistSectionButton .volumecontrol {
+        width: 100%;
+    }
+
     .remoteControlSection {
         margin: 4.2em 0 0 0;
+        padding: 0 0 4.2em 0;
     }
 
     .nowPlayingButtonsContainer {
diff --git a/src/components/remotecontrol/remotecontrol.js b/src/components/remotecontrol/remotecontrol.js
index 4e33a1196..135713e36 100644
--- a/src/components/remotecontrol/remotecontrol.js
+++ b/src/components/remotecontrol/remotecontrol.js
@@ -263,6 +263,12 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
                 context.querySelector(".navigationSection").classList.add("hide");
             }
 
+            if (-1 != supportedCommands.indexOf("DisplayMessage") && -1 != supportedCommands.indexOf("SendString") && -1 != supportedCommands.indexOf("Select") && !currentPlayer.isLocalPlayer) {
+                context.querySelector(".remoteControlSection").classList.remove("hide");
+            } else {
+                context.querySelector(".remoteControlSection").classList.add("hide");
+            }
+
             buttonVisible(context.querySelector(".btnStop"), null != item);
             buttonVisible(context.querySelector(".btnNextTrack"), null != item);
             buttonVisible(context.querySelector(".btnPreviousTrack"), null != item);
@@ -416,9 +422,9 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
                 });
 
                 if (items.length) {
-                    context.querySelector(".playlistSection").classList.remove("hide");
+                    context.querySelector(".btnTogglePlaylist").classList.remove("hide");
                 } else {
-                    context.querySelector(".playlistSection").classList.add("hide");
+                    context.querySelector(".btnTogglePlaylist").classList.add("hide");
                 }
 
                 var itemsContainer = context.querySelector(".playlist");
@@ -677,7 +683,7 @@ define(["browser", "datetime", "backdrop", "libraryBrowser", "listView", "imageL
                 }
             }
 
-            var contextmenuHtml = '<button id="toggleContextMenu" is="paper-icon-button-light" class="btnToggleContextMenu" title=' + globalize.translate('ButtonToogleContextMenu') + '><i class="material-icons more_vert"></i></button>';
+            var contextmenuHtml = '<button id="toggleContextMenu" is="paper-icon-button-light" class="btnToggleContextMenu" title=' + globalize.translate('ButtonToggleContextMenu') + '><i class="material-icons more_vert"></i></button>';
             var volumecontrolHtml = '<div class="volumecontrol flex align-items-center flex-wrap-wrap justify-content-center">';
             volumecontrolHtml += '<button is="paper-icon-button-light" class="buttonMute autoSize" title=' + globalize.translate('Mute') + '><i class="xlargePaperIconButton material-icons"></i></button>';
             volumecontrolHtml += '<div class="sliderContainer nowPlayingVolumeSliderContainer"><input is="emby-slider" type="range" step="1" min="0" max="100" value="0" class="nowPlayingVolumeSlider"/></div>';
diff --git a/src/nowplaying.html b/src/nowplaying.html
index c3364f796..a1ddcc26a 100644
--- a/src/nowplaying.html
+++ b/src/nowplaying.html
@@ -1,4 +1,4 @@
-<div id="nowPlayingPage" data-role="page" class="page libraryPage nowPlayingPage noSecondaryNavPage selfBackdropPage" data-title="-" style="padding:5em 0 0!important;">
+<div id="nowPlayingPage" data-role="page" class="page libraryPage nowPlayingPage noSecondaryNavPage selfBackdropPage" data-title="-" style="padding: 5em 0 0 !important;">
 
     <div class="remoteControlContent padded-left padded-right">
 
@@ -10,7 +10,7 @@
 
                     <div class="nowPlayingInfoContainerMedia">
                         <h2 class="nowPlayingPageTitle"></h2>
-                        <div style="font-weight:bold;" class="nowPlayingSongName nowPlayingEpisode"></div>
+                        <div style="font-weight: bold;" class="nowPlayingSongName nowPlayingEpisode"></div>
                         <div class="nowPlayingAlbum nowPlayingSeason"></div>
                         <div class="nowPlayingArtist nowPlayingSerie"></div>
                     </div>
@@ -161,18 +161,18 @@
                 </div>
             </div>
         </div>
-        <div class="playlistSection hide">
+        <div class="playlistSection">
             <div class="playlistSectionButton flex align-items-center justify-content-center">
                 <!--<h2 style="margin:0;">${TabPlaylist}</h2>-->
-                <button id="togglePlaylist" is="paper-icon-button-light" class="btnTogglePlaylist" title="${ButtonTooglePlaylist}">
+                <button id="togglePlaylist" is="paper-icon-button-light" class="btnTogglePlaylist" title="${ButtonTogglePlaylist}">
                     <i class="material-icons">queue_music</i>   
                 </button>
                 <button is="paper-icon-button-light" class="btnSavePlaylist" title="${ButtonSave}">
                     <i class="material-icons">save</i>  
                 </button>
             </div>
-            <div id="playlist" class="playlist itemsContainer vertical-list" is="emby-itemscontainer" data-dragreorder="true"></div>
-            <div id="contextMenu" class="contextMenu itemsContainer vertical-list" is="emby-itemscontainer">
+            <div id="playlist" class="playlist itemsContainer vertical-list hide" is="emby-itemscontainer" data-dragreorder="true"></div>
+            <div id="contextMenu" class="contextMenu itemsContainer vertical-list hide" is="emby-itemscontainer">
                 <div class="listItem listItem-border contextMenuList contextMenuArtist">
                 </div>
                 <div class="listItem listItem-border contextMenuList contextMenuAlbum">