From 28844275e622fd2be5c590e3df4ea1128c6965b7 Mon Sep 17 00:00:00 2001
From: SuperBFG7 <daniel@despite.ch>
Date: Thu, 17 Jun 2021 09:55:45 +0200
Subject: [PATCH] Enable volume slider again Add volume number Move love button
 to song info box

---
 htdocs/css/mpd.css | 16 ++++++++++++++++
 htdocs/index.html  | 37 +++++++++++++++++++------------------
 htdocs/js/mpd.js   |  1 +
 3 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/htdocs/css/mpd.css b/htdocs/css/mpd.css
index a510ecf..1987ce2 100644
--- a/htdocs/css/mpd.css
+++ b/htdocs/css/mpd.css
@@ -9,6 +9,7 @@ body {
 
 #volumeslider {
   width: 150px;
+  float: left;
 }
 
 #volumeslider .progress {
@@ -25,6 +26,20 @@ button {
   margin-top: 2px;
 }
 
+#volume-number {
+  float: right;
+  margin-top: 2px;
+  margin-left: 10px;
+}
+
+#love {
+  float: right;
+}
+
+#love > button > span {
+  color: red;
+}
+
 #breadcrump {
   display: block;
   overflow: auto;
@@ -169,5 +184,6 @@ button {
   .sticky {
     position: sticky;
     top: 55px;
+	z-index: 99;
   }
 }
diff --git a/htdocs/index.html b/htdocs/index.html
index 0fed0d4..4c5e951 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -94,24 +94,6 @@
                 <span class="glyphicon glyphicon-forward"></span>
               </button>
             </div>
-            <div class="btn-group">
-              <button
-                id="btnlove"
-                type="button"
-                class="btn btn-default"
-                onclick="clickLove();"
-              >
-                <span class="glyphicon glyphicon-heart"></span>
-              </button>
-            </div>
-            <!--          
-          <div class="btn-group">
-            <div class="btn btn-toolbar btn-default">
-              <span id="volume-icon" class="glyphicon glyphicon-volume-up"></span>
-              <div id="volumeslider"></div>
-            </div>
-          </div>
--->
             <div class="btn-group" role="group">
               <button
                 type="button"
@@ -125,6 +107,16 @@
                 ></span>
               </button>
             </div>
+            <div class="btn-group" role="group">
+              <div class="btn btn-toolbar btn-default">
+                <span
+                  id="volume-icon"
+                  class="glyphicon glyphicon-volume-up"
+                ></span>
+                <div id="volumeslider"></div>
+                <span id="volume-number"></span>
+              </div>
+            </div>
           </div>
 
           <form id="search" class="navbar-form navbar-right" role="search">
@@ -156,6 +148,15 @@
                   class="glyphicon glyphicon-play"
                 ></span>
                 <span id="currenttrack"></span>
+                <span id="love">
+                  <button
+                    id="btnlove"
+                    type="button"
+                    class="btn btn-default"
+                    onclick="clickLove();"
+                  >
+                    <span class="glyphicon glyphicon-heart"></span></button
+                ></span>
               </h1>
               <h4>
                 <span id="artist" class="text"></span>
diff --git a/htdocs/js/mpd.js b/htdocs/js/mpd.js
index 83c5374..e77e888 100644
--- a/htdocs/js/mpd.js
+++ b/htdocs/js/mpd.js
@@ -736,6 +736,7 @@ function webSocketConnect() {
                         obj.data.elapsedTime - elapsed_minutes * 60;
 
                     $('#volumeslider').slider(obj.data.volume);
+                    $('#volume-number').text(obj.data.volume + '%');
                     var progress = Math.floor(
                         (100 * obj.data.elapsedTime) / obj.data.totalTime
                     );