From 6d1f0437b33796bc623176cb837f89f4445ac12d Mon Sep 17 00:00:00 2001
From: jcorporation <mail@juergenmang.de>
Date: Sat, 18 Aug 2018 15:23:02 +0200
Subject: [PATCH] Feat: improved layout of playback card

---
 htdocs/css/mpd.css | 36 ++++++++++++++++++++++++------------
 htdocs/index.html  | 30 +++++++++++++-----------------
 htdocs/js/mpd.js   | 17 +++++++++++------
 3 files changed, 48 insertions(+), 35 deletions(-)

diff --git a/htdocs/css/mpd.css b/htdocs/css/mpd.css
index 18e5da1..7ae8555 100644
--- a/htdocs/css/mpd.css
+++ b/htdocs/css/mpd.css
@@ -33,13 +33,6 @@ button {
 }
 
 
-#counter {
-  font-size: 22px;
-/*  margin-left: 10px;
-  min-width: 50px;
-*/
-}
-
 .card {
   min-height: 350px;
 }
@@ -58,15 +51,31 @@ button {
   width: 30px;
 }
 
+small {
+  color: #aaa;
+}
+
+.card-footer-playback {
+  padding-top: 0px;
+  padding-bottom: 0px;
+}
+
 .album-cover {
   background-size: cover;
-/*  border: 1px solid black;
+  border: 1px solid black;
   border-radius: 5px;
   overflow: hidden;
-  margin-bottom: 20px;*/
   width: 240px;
   height: 240px;
   background-color: #eee;
+  float: left;
+  margin-right: 20px;
+  margin-bottom: 20px;
+}
+
+.album-desc {
+  min-width: 240px;
+  float: left;
 }
 
 .hide {
@@ -140,9 +149,12 @@ button {
   overflow-x:hidden;
 }
 
-#progressBar {
-  width:100%;
-  margin-top:8px;
+.progressBarPlay {
+  font-size: 22px;
+}
+
+#counter {
+  cursor: text;
 }
 
 #volumeBar {
diff --git a/htdocs/index.html b/htdocs/index.html
index 7621d81..cce0f0e 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -39,7 +39,7 @@
             <button data-href="{'cmd':'clickStop','options':[]}" id="btnStop" type="button" class="btn btn-secondary pl-2 pr-2 material-icons">
               stop
             </button>
-            <button data-href="{'cmd':'clickPlay','options':[]}" id="btnPlay" type="button" class="btn btn-secondary pl-2 pr-2 material-icons">
+            <button data-href="{'cmd':'clickPlay','options':[]}" id="btnPlay" type="button" class="btnPlay btn btn-secondary pl-2 pr-2 material-icons">
               pause
             </button>
             <button data-href="{'cmd':'clickNext','options':[]}" id="btnNext" type="button" class="btn btn-secondary pl-2 pr-2 material-icons">
@@ -75,27 +75,23 @@
     <div class="card" id="cardPlayback">
       <div class="card-header">Playback</div>
       <div class="card-body">
-      
         <div class="card">
-          <div class="card-header"><h2 id="currentTrack" data-href="{'cmd': 'songClick', 'options': []}"></h2></div>
-          <div class="card-img-top album-cover" id="currentCover"></div>
           <div class="card-body">
-
+            <div class="album-cover" id="currentCover"></div>
+            <div class="album-desc">
+              <h2 id="currentTrack" data-href="{'cmd': 'songClick', 'options': []}"></h2>
+              <small>Artist</small><h4 id="currentArtist" data-href="{'cmd': 'artistClick', 'options': []}"></h4>
+              <small>Album</small><h4 id="currentAlbum"></h4>
+            </div>
           </div>
-          <div class="card-footer">
-            <div class="row">
-              <div class="col-8">
-                <input type="range" min="0" max="100" step="1" class="form-control-range" id="progressBar">
-              </div>
-              <div class="col-4" id="counter">&nbsp;&nbsp;</div>
-            </div>           
+          <div class="card-footer card-footer-playback">
+            <div class="d-flex">
+              <button data-href="{'cmd':'clickPlay','options':[]}" class="btn btn-light material-icons btnPlay progressBarPlay">pause</button>
+              <input type="range" min="0" max="100" step="1" class="form-control-range flex-grow-1" id="progressBar">
+              <div class="btn" id="counter">&nbsp;&nbsp;</div>
+            </div>
           </div>
         </div>
-
-        
-        <h3 id="currentArtist" data-href="{'cmd': 'artistClick', 'options': []}"></h3>
-        <h4 id="currentAlbum"></h4>
-        
       </div>
     </div>
     
diff --git a/htdocs/js/mpd.js b/htdocs/js/mpd.js
index 502de29..042e482 100644
--- a/htdocs/js/mpd.js
+++ b/htdocs/js/mpd.js
@@ -69,7 +69,7 @@ domCache.counter = document.getElementById('counter');
 domCache.volumePrct = document.getElementById('volumePrct');
 domCache.volumeControl = document.getElementById('volumeControl');
 domCache.volumeIcon = document.getElementById('volumeIcon');
-domCache.btnPlay = document.getElementById('btnPlay');
+domCache.btnsPlay = document.querySelectorAll('.btnPlay');
 domCache.btnPrev = document.getElementById('btnPrev');
 domCache.btnNext = document.getElementById('btnNext');
 domCache.progressBar = document.getElementById('progressBar');
@@ -876,13 +876,16 @@ function parseState(obj) {
 
     //Set playstate
     if (obj.data.state == 1) {
-        domCache.btnPlay.innerText = 'play_arrow';
+        for (var i = 0; i < domCache.btnsPlay.length; i++)
+            domCache.btnsPlay[i].innerText = 'play_arrow';
         playstate = 'stop';
     } else if (obj.data.state == 2) {
-        domCache.btnPlay.innerText = 'pause';
+        for (var i = 0; i < domCache.btnsPlay.length; i++)
+            domCache.btnsPlay[i].innerText = 'pause';
         playstate = 'play';
     } else {
-        domCache.btnPlay.innerText = 'play_arrow';
+        for (var i = 0; i < domCache.btnsPlay.length; i++)
+            domCache.btnsPlay[i].innerText = 'play_arrow';
 	playstate = 'pause';
     }
 
@@ -897,9 +900,11 @@ function parseState(obj) {
         domCache.btnPrev.removeAttribute('disabled');
     
     if (obj.data.queueLength == 0)
-        domCache.btnPlay.setAttribute('disabled','disabled');
+        for (var i = 0; i < domCache.btnsPlay.length; i++)
+            domCache.btnsPlay[i].setAttribute('disabled','disabled');
     else
-        domCache.btnPlay.removeAttribute('disabled');
+        for (var i = 0; i < domCache.btnsPlay.length; i++)
+            domCache.btnsPlay[i].removeAttribute('disabled');
 
     //Set volume
     if (obj.data.volume == -1) {