From cfd20a36fdbdeca362f8532b864676e7c1880f85 Mon Sep 17 00:00:00 2001
From: jcorporation <mail@jcgames.de>
Date: Mon, 9 Jul 2018 16:36:45 +0100
Subject: [PATCH 1/6] Display kbitrate for current playing song, save scrollPos
 on card/tab/view change

---
 htdocs/index.html | 13 ++++++------
 htdocs/js/mpd.js  | 51 ++++++++++++++++++++++++++++++++---------------
 2 files changed, 42 insertions(+), 22 deletions(-)

diff --git a/htdocs/index.html b/htdocs/index.html
index 5fd1e3e92..80c742b37 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -87,7 +87,8 @@ <h4 id="album"></h4>
           <div class="col-4">
             <p id="counter" class="text">&nbsp;&nbsp;</p>
           </div>
-        </div>          
+        </div> 
+        <p id="kbitrate"></p>         
       </div>
     </div>
     
@@ -162,7 +163,7 @@ <h6 class="dropdown-header text-light">Search in Tag</h6>
         </div>
         <div class="btn-toolbar" id="QueueButtonsBottom" role="toolbar">
           <div class="btn-group mr-2">
-            <button type="button" class="btn btn-secondary" data-href="{'cmd':'scrollToTop','options':[]}" title="To top">
+            <button type="button" class="btn btn-secondary" data-href="{'cmd':'scrollTo','options':[0]}" title="To top">
               <span class="material-icons">keyboard_arrow_up</span>
             </button>
           </div>        
@@ -232,7 +233,7 @@ <h6 class="dropdown-header text-light">Search in Tag</h6>
         </div>
         <div class="btn-toolbar" id="BrowsePlaylistsButtonsBottom" role="toolbar">
           <div class="btn-group mr-2">
-            <button type="button" class="btn btn-secondary" data-href="{'cmd': 'scrollToTop', 'options': []}" title="To top">
+            <button type="button" class="btn btn-secondary" data-href="{'cmd': 'scrollTo', 'options': [0]}" title="To top">
               <span class="material-icons">keyboard_arrow_up</span>
             </button>
           </div>        
@@ -291,7 +292,7 @@ <h6 class="dropdown-header text-light">Search in Tag</h6>
         
         <div class="btn-toolbar" id="BrowseDatabaseButtonsBottom" role="toolbar">
           <div class="btn-group mr-2">
-            <button type="button" class="btn btn-secondary" data-href="{'cmd': 'scrollToTop', 'options': []}" title="To top">
+            <button type="button" class="btn btn-secondary" data-href="{'cmd': 'scrollTo', 'options': [0]}" title="To top">
               <span class="material-icons">keyboard_arrow_up</span>
             </button>
           </div>        
@@ -356,7 +357,7 @@ <h6 class="dropdown-header text-light">Search in Tag</h6>
         </div>
         <div class="btn-toolbar" id="BrowseFilesystemButtonsBottom" role="toolbar">
           <div class="btn-group mr-2">
-            <button type="button" class="btn btn-secondary" data-href="{'cmd': 'scrollToTop', 'options': []}" title="To top">
+            <button type="button" class="btn btn-secondary" data-href="{'cmd': 'scrollTo', 'options': [0]}" title="To top">
               <span class="material-icons">keyboard_arrow_up</span>
             </button>
           </div>        
@@ -434,7 +435,7 @@ <h6 class="dropdown-header text-light">Search in Tag</h6>
         </div>
         <div class="btn-toolbar" id="SearchButtonsBottom" role="toolbar">
           <div class="btn-group mr-2">
-            <button type="button" class="btn btn-secondary" data-href="{'cmd': 'scrollToTop', 'options': []}" title="To top">
+            <button type="button" class="btn btn-secondary" data-href="{'cmd': 'scrollTo', 'options': [0]}" title="To top">
               <span class="material-icons">keyboard_arrow_up</span>
             </button>
           </div>        
diff --git a/htdocs/js/mpd.js b/htdocs/js/mpd.js
index a4607a704..6256bee95 100644
--- a/htdocs/js/mpd.js
+++ b/htdocs/js/mpd.js
@@ -31,25 +31,25 @@ var settings = {};
 var alertTimeout;
 
 var app = {};
-app.apps = { "Playback": { "state": "0/-/" },
-             "Queue": 	 { "state": "0/Any Tag/" },
+app.apps = { "Playback": { "state": "0/-/", "scrollPos": 0 },
+             "Queue": 	 { "state": "0/Any Tag/", "scrollPos": 0 },
              "Browse":   { 
                   "active": "Database", 
-                  "tabs":  { "Filesystem": { "state": "0/-/" },
-                             "Playlists":  { "state": "0/-/" },
+                  "tabs":  { "Filesystem": { "state": "0/-/", "scrollPos": 0 },
+                             "Playlists":  { "state": "0/-/", "scrollPos": 0 },
                              "Database":   { 
                                     "active": "Artist",
-                                    "views": { "Artist": { "state": "0/-/" },
-                                               "Album":  { "state": "0/-/" }
+                                    "views": { "Artist": { "state": "0/-/", "scrollPos": 0 },
+                                               "Album":  { "state": "0/-/", "scrollPos": 0 }
                                      }
                              }
                   }
              },
-             "Search": { "state": "0/Any Tag/" }
+             "Search": { "state": "0/Any Tag/", "scrollPos": 0 }
            };
            
-app.current = { "app": "Playback", "tab": undefined, "view": undefined, "page": 0, "filter": "", "search": "" };
-app.last = { "app": undefined, "tab": undefined, "view": undefined };
+app.current = { "app": "Playback", "tab": undefined, "view": undefined, "page": 0, "filter": "", "search": "", "scrollPos": 0 };
+app.last = { "app": undefined, "tab": undefined, "view": undefined, "filter": "", "search": "",  "scrollPos": 0 };
 
 var domCache = {};
 domCache.navbarBottomBtns = document.getElementById('navbar-bottom').getElementsByTagName('div');
@@ -66,6 +66,7 @@ domCache.btnNext = document.getElementById('btnNext');
 domCache.progressBar = document.getElementById('progressBar');
 domCache.volumeBar = document.getElementById('volumeBar');
 domCache.outputs = document.getElementById('outputs');
+domCache.kbitrate = document.getElementById('kbitrate');
 
 var modalConnectionError = new Modal(document.getElementById('modalConnectionError'));
 var modalSettings = new Modal(document.getElementById('modalSettings'));
@@ -73,7 +74,7 @@ var modalAddstream = new Modal(document.getElementById('modalAddstream'));
 var modalSavequeue = new Modal(document.getElementById('modalSavequeue'));
 var mainMenu = new Dropdown(document.getElementById('mainMenu'));
 
-function appPrepare() {
+function appPrepare(scrollPos) {
     if (app.current.app != app.last.app || app.current.tab != app.last.tab || app.current.view != app.last.view) {
         //Hide all cards + nav
         for (var i = 0; i < domCache.navbarBottomBtnsLen; i ++) {
@@ -96,12 +97,25 @@ function appPrepare() {
             document.getElementById('card' + app.current.app + app.current.tab).classList.remove('hide');
             document.getElementById('card' + app.current.app + 'Nav' + app.current.tab).classList.add('active');    
         }
-        scrollToTop();
+        scrollTo(scrollPos);
     }
 }
 
 function appGoto(a,t,v,s) {
-    var hash='';
+    var scrollPos = 0;
+    if (document.body.scrollTop)
+        scrollPos = document.body.scrollTop
+    else 
+        scrollPos = document.documentElement.scrollTop;
+        
+    if (app.apps[app.current.app].scrollPos != undefined)
+        app.apps[app.current.app].scrollPos = scrollPos
+    else if (app.apps[app.current.app].tabs[app.current.tab].scrollPos != undefined)
+        app.apps[app.current.app].tabs[app.current.tab].scrollPos = scrollPos
+    else if (app.apps[app.current.app].tabs[app.current.tab].views[app.current.view].scrollPos != undefined)
+        app.apps[app.current.app].tabs[app.current.tab].views[app.current.view].scrollPos = scrollPos;
+
+    var hash = '';
     if (app.apps[a].tabs) {
         if (t == undefined) 
             t = app.apps[a].active;
@@ -126,15 +140,18 @@ function appRoute() {
         app.current.view = params[3];
         if (app.apps[app.current.app].state) {
             app.apps[app.current.app].state = params[4];
+            app.current.scrollPos = app.apps[app.current.app].scrollPos;
         }
         else if (app.apps[app.current.app].tabs[app.current.tab].state) {
             app.apps[app.current.app].tabs[app.current.tab].state = params[4];
             app.apps[app.current.app].active = app.current.tab;
+            app.current.scrollPos = app.apps[app.current.app].tabs[app.current.tab].scrollPos;
         }
         else if (app.apps[app.current.app].tabs[app.current.tab].views[app.current.view].state) {
             app.apps[app.current.app].tabs[app.current.tab].views[app.current.view].state = params[4];
             app.apps[app.current.app].active = app.current.tab;
             app.apps[app.current.app].tabs[app.current.tab].active = app.current.view;
+            app.current.scrollPos = app.apps[app.current.app].tabs[app.current.tab].views[app.current.view].scrollPos;
         }
         app.current.page = parseInt(params[5]);
         app.current.filter = params[6];
@@ -144,7 +161,7 @@ function appRoute() {
         return;
     }
 
-    appPrepare();
+    appPrepare(app.current.scrollPos);
 
     if (app.current.app == 'Playback') {
         sendAPI({"cmd":"MPD_API_GET_CURRENT_SONG"}, songChange);
@@ -702,6 +719,8 @@ function parseState(obj) {
         (elapsed_seconds < 10 ? '0' : '') + elapsed_seconds + " / " +
         total_minutes + ":" + (total_seconds < 10 ? '0' : '') + total_seconds;
     domCache.counter.innerText = counterText;
+    
+    domCache.kbitrate.innerText = 'Bitrate: ' + obj.data.kbitrate + ' kbit';
 
     //Set playing track in queue view
     if (last_state) {
@@ -1296,9 +1315,9 @@ function addAllFromSearch() {
     }
 }
 
-function scrollToTop() {
-    document.body.scrollTop = 0; // For Safari
-    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+function scrollTo(pos) {
+    document.body.scrollTop = pos; // For Safari
+    document.documentElement.scrollTop = pos; // For Chrome, Firefox, IE and Opera
 }
 
 function gotoPage(x) {

From ff2b40baf896f02efa30cd9ba5054264d14e80aa Mon Sep 17 00:00:00 2001
From: jcorporation <mail@jcgames.de>
Date: Mon, 9 Jul 2018 18:28:28 +0100
Subject: [PATCH 2/6] Add songdetails modal

---
 htdocs/css/mpd.css |  4 +--
 htdocs/index.html  | 49 ++++++++++++++++++++++++-------
 htdocs/js/mpd.js   | 73 +++++++++++++++++++++++++++++++---------------
 src/mpd_client.c   | 55 ++++++++++++++++++++++++++++++++--
 src/mpd_client.h   |  2 ++
 5 files changed, 144 insertions(+), 39 deletions(-)

diff --git a/htdocs/css/mpd.css b/htdocs/css/mpd.css
index 80408fa74..c02a0cafe 100644
--- a/htdocs/css/mpd.css
+++ b/htdocs/css/mpd.css
@@ -50,7 +50,7 @@ button {
   }
 }
 
-tbody {
+.clickable {
   cursor: pointer;
 }
 
@@ -58,7 +58,7 @@ tbody {
   width: 30px;
 }
 
-#album-cover {
+.album-cover {
   background-size:cover;
   border:1px solid black;
   border-radius:5px;
diff --git a/htdocs/index.html b/htdocs/index.html
index 80c742b37..3b68e5547 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -76,7 +76,7 @@ <h2 class="dropdown-header text-light">Volume: <span id="volumePrct"></span></h2
     <div class="card" id="cardPlayback">
       <div class="card-header">Now playing</div>
       <div class="card-body">
-        <div id="album-cover"></div>
+        <div class="album-cover" id="album-cover"></div>
         <h1 id="currenttrack"></h1>
         <h3 id="artist"></h3>
         <h4 id="album"></h4>
@@ -88,7 +88,6 @@ <h4 id="album"></h4>
             <p id="counter" class="text">&nbsp;&nbsp;</p>
           </div>
         </div> 
-        <p id="kbitrate"></p>         
       </div>
     </div>
     
@@ -157,7 +156,7 @@ <h6 class="dropdown-header text-light">Search in Tag</h6>
                 <th></th>
               </tr>
             </thead>
-            <tbody>
+            <tbody class="clickable">
             </tbody>
           </table>
         </div>
@@ -227,7 +226,7 @@ <h6 class="dropdown-header text-light">Search in Tag</h6>
                 <th></th>
               </tr>
             </thead>
-            <tbody>
+            <tbody class="clickable">
             </tbody>
           </table>
         </div>
@@ -283,7 +282,7 @@ <h6 class="dropdown-header text-light">Search in Tag</h6>
                 <th></th>
               </tr>
             </thead>
-            <tbody>
+            <tbody class="clickable">
             </tbody>
           </table>
         </div>
@@ -351,7 +350,7 @@ <h6 class="dropdown-header text-light">Search in Tag</h6>
                 <th></th>
               </tr>
             </thead>
-            <tbody>
+            <tbody class="clickable">
             </tbody>
           </table>
         </div>
@@ -429,7 +428,7 @@ <h6 class="dropdown-header text-light">Search in Tag</h6>
                 <th></th>
               </tr>
             </thead>
-            <tbody>
+            <tbody class="clickable">
             </tbody>
           </table>
         </div>
@@ -657,7 +656,7 @@ <h5 class="modal-title" id="savequeueLabel"><span class="material-icons">save</s
             <div class="row">
               <div class="form-group col-md-9">
                 <label class="control-label" for="playlistname">Playlist Name</label>
-                <input type="text" class="form-control" id="playlistname" />
+                <input type="text" class="form-control" id="playlistname"/>
               </div>
             </div>
           </form>
@@ -669,7 +668,37 @@ <h5 class="modal-title" id="savequeueLabel"><span class="material-icons">save</s
       </div><!-- /.modal-content -->
     </div><!-- /.modal-dialog -->
   </div><!-- /.modal -->
-  <script src="js/bootstrap-native-v4.min.js"></script>
-  <script src="js/mpd.js"></script>
+
+  <div class="modal fade" id="modalSongDetails" tabindex="-1" role="dialog" aria-hidden="true">
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="savequeueLabel"><span class="material-icons">music_note</span> Song Details</h5>
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+            <span aria-hidden="true">&times;</span>
+          </button>          
+        </div>
+        <div class="modal-body">
+          <div class="album-cover"></div>
+          <h1></h1>
+          <table class="table">
+            <tbody>
+              <tr data-name="artist"><td>Artist</td><td></td></tr>
+              <tr data-name="album"><td>Album</td><td></td></tr>
+              <tr data-name="albumartist"><td>Albumartist</td><td></td></tr>
+              <tr data-name="genre"><td>Genre</td><td></td></tr>
+              <tr data-name="uri"><td>Uri</td><td></td></tr>
+            </tbody>
+          </table>
+        </div>
+        <div class="modal-footer">
+          <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+        </div>
+      </div><!-- /.modal-content -->
+    </div><!-- /.modal-dialog -->
+  </div><!-- /.modal -->
+
+  <script src="js/bootstrap-native-v4.min.js" type="text/javascript"></script>
+  <script src="js/mpd.js" type="text/javascript"></script>
  </body>
 </html>
diff --git a/htdocs/js/mpd.js b/htdocs/js/mpd.js
index 6256bee95..80379bbdb 100644
--- a/htdocs/js/mpd.js
+++ b/htdocs/js/mpd.js
@@ -66,12 +66,12 @@ domCache.btnNext = document.getElementById('btnNext');
 domCache.progressBar = document.getElementById('progressBar');
 domCache.volumeBar = document.getElementById('volumeBar');
 domCache.outputs = document.getElementById('outputs');
-domCache.kbitrate = document.getElementById('kbitrate');
 
 var modalConnectionError = new Modal(document.getElementById('modalConnectionError'));
 var modalSettings = new Modal(document.getElementById('modalSettings'));
 var modalAddstream = new Modal(document.getElementById('modalAddstream'));
 var modalSavequeue = new Modal(document.getElementById('modalSavequeue'));
+var modalSongDetails = new Modal(document.getElementById('modalSongDetails'));
 var mainMenu = new Dropdown(document.getElementById('mainMenu'));
 
 function appPrepare(scrollPos) {
@@ -295,19 +295,19 @@ function appInit() {
     
     document.getElementById('modalAbout').addEventListener('shown.bs.modal', function () {
         sendAPI({"cmd": "MPD_API_GET_STATS"}, parseStats);
-    })
-    
+    });
+        
     document.getElementById('modalSettings').addEventListener('shown.bs.modal', function () {
         getSettings();
         document.getElementById('settingsFrm').classList.remove('was-validated');
         document.getElementById('inputCrossfade').classList.remove('is-invalid');
         document.getElementById('inputMixrampdb').classList.remove('is-invalid');
         document.getElementById('inputMixrampdelay').classList.remove('is-invalid');
-    })
+    });
 
     document.getElementById('modalAddstream').addEventListener('shown.bs.modal', function () {
         document.getElementById('streamurl').focus();
-    })
+    });
     
     document.getElementById('addstreamFrm').addEventListener('submit', function () {
         addStream();
@@ -720,8 +720,6 @@ function parseState(obj) {
         total_minutes + ":" + (total_seconds < 10 ? '0' : '') + total_seconds;
     domCache.counter.innerText = counterText;
     
-    domCache.kbitrate.innerText = 'Bitrate: ' + obj.data.kbitrate + ' kbit';
-
     //Set playing track in queue view
     if (last_state) {
         var tr = document.getElementById('queueTrackId' + last_state.data.currentsongid);
@@ -790,6 +788,7 @@ function parseQueue(obj) {
         row.setAttribute('id','queueTrackId' + obj.data[i].id);
         row.setAttribute('data-songpos', (obj.data[i].pos + 1));
         row.setAttribute('data-duration', duration);
+        row.setAttribute('data-uri', obj.data[i].uri);
         row.innerHTML = '<td>' + (obj.data[i].pos + 1) + '</td>' +
                         '<td>' + obj.data[i].title + '</td>' +
                         '<td>' + obj.data[i].artist + '</td>' + 
@@ -958,7 +957,7 @@ function parseListDBtags(obj) {
 
         if (nrItems == 0) 
             tbody.innerHTML = '<tr><td><span class="material-icons">error_outline</span></td>' +
-                              '<td colspan="5">No entries found.</td></tr>'
+                              '<td colspan="5">No entries found.</td></tr>';
         document.getElementById('BrowseDatabaseArtistList').classList.remove('opacity05');                              
                                
     } else if (obj.tagtype == 'Album') {
@@ -966,7 +965,7 @@ function parseListDBtags(obj) {
         document.getElementById('BrowseDatabaseArtistList').classList.add('hide');
         document.getElementById('btnBrowseDatabaseArtist').classList.remove('hide');    
         var nrItems = obj.data.length;
-        var cardContainer = document.getElementById('BrowseDatabaseAlbumCards')
+        var cardContainer = document.getElementById('BrowseDatabaseAlbumCards');
         var cards = cardContainer.querySelectorAll('.col-md');
         for (var i = 0; i < nrItems; i++) {
             var id=genId(obj.data[i].value);
@@ -1083,15 +1082,15 @@ function appendQueue(type, uri, name) {
     switch(type) {
         case 'song':
             sendAPI({"cmd": "MPD_API_ADD_TRACK", "data": {"uri": uri}});
-            showNotification('"' + name + '" added','','','success');
+            showNotification('"' + name + '" added', '', '', 'success');
             break;
         case 'dir':
             sendAPI({"cmd": "MPD_API_ADD_TRACK", "data": {"uri": uri}});
-            showNotification('"' + name + '" added','','','success');
+            showNotification('"' + name + '" added', '', '', 'success');
             break;
         case 'plist':
             sendAPI({"cmd": "MPD_API_ADD_PLAYLIST", "data": {"plist": uri}});
-            showNotification('"' + name + '" added','','','success');
+            showNotification('"' + name + '" added', '', '', 'success');
             break;
     }
 }
@@ -1113,19 +1112,45 @@ function replaceQueue(type, uri, name) {
     switch(type) {
         case 'song':
             sendAPI({"cmd": "MPD_API_REPLACE_TRACK", "data": {"uri": uri}});
-            showNotification('"' + name + '" replaced','','','success');
+            showNotification('"' + name + '" replaced', '', '', 'success');
             break;
         case 'dir':
             sendAPI({"cmd": "MPD_API_REPLACE_TRACK", "data": {"uri": uri}});
-            showNotification('"' + name + '" replaced','','','success');
+            showNotification('"' + name + '" replaced', '', '', 'success');
             break;
         case 'plist':
             sendAPI({"cmd": "MPD_API_REPLACE_PLAYLIST", "data": {"plist": uri}});
-            showNotification('"' + name + '" replaced','','','success');
+            showNotification('"' + name + '" replaced', '', '', 'success');
             break;
     }
 }
 
+function songDetails(uri) {
+    sendAPI({"cmd": "MPD_API_GET_SONGDETAILS", "data": {"uri": uri}}, parseSongDetails);
+    modalSongDetails.show();
+}
+
+function parseSongDetails(obj) {
+    var modal = document.getElementById('modalSongDetails');
+    modal.querySelector('.album-cover').style.backgroundImage = 'url(' + obj.data.cover + ')';
+    modal.getElementsByTagName('h1')[0].innerText = obj.data.title;
+    var tr = modal.getElementsByTagName('tr');
+    var trLen = tr.length;
+    for (var i = 0; i < trLen; i ++) {
+        var key = tr[i].getAttribute('data-name');
+        var value = obj.data[key];
+        if (key == 'duration') {
+            var minutes = Math.floor(value / 60);
+            var seconds = value - minutes * 60;
+            value = minutes + ':' + (seconds < 10 ? '0' : '') + seconds;        
+        }
+        else if (key == 'uri') {
+            value = '<a class="text-success" href="/library/' + value + '">' + value + '</a>';
+        }
+        tr[i].getElementsByTagName('td')[1].innerHTML = value;
+    }
+}
+
 function showMenu(el) {
     var type = el.getAttribute('data-type');
     var uri = decodeURI(el.getAttribute('data-uri'));
@@ -1144,11 +1169,11 @@ function showMenu(el) {
             ( type != 'plist' ? '<a class="dropdown-item" href="#" data-href="{\'cmd\': \'appendAfterQueue\', \'options\': [\'' + type + '\',\'' +
             uri + '\',' + last_state.data.nextsongpos + ',\'' + name + '\']}">Add after current playing song</a>' : '') +
             '<a class="dropdown-item" href="#" data-href="{\'cmd\': \'replaceQueue\', \'options\': [\'' + type + '\',\'' + 
-            uri + '\',\'' + name + '\']}">Replace queue</a>';
-/*            ( type != 'plist' ? '<div class="dropdown-divider"></div><a class="dropdown-item" href="#">Add to playlist</a>' : '') +
+            uri + '\',\'' + name + '\']}">Replace queue</a>' +
+//            ( type != 'plist' ? '<div class="dropdown-divider"></div><a class="dropdown-item" href="#">Add to playlist</a>' : '') +
             ( type != 'dir' ? '<div class="dropdown-divider"></div>' : '') +
-            ( type == 'song' ? '<a class="dropdown-item" href="#">Songdetails</a>' : '') +
-            ( type == 'plist' ? '<a class="dropdown-item" href="#">Show playlist</a>' : '');*/
+            ( type == 'song' ? '<a class="dropdown-item" data-href="{\'cmd\': \'songDetails\', \'options\': [\'' + uri + '\']}" href="#">Songdetails</a>' : '');
+//            ( type == 'plist' ? '<a class="dropdown-item" href="#">Show playlist</a>' : '');
     }
     else if (app.current.app == 'Browse' && app.current.tab == 'Playlists') {
         menu += '<a class="dropdown-item" href="#" data-href="{\'cmd\': \'appendQueue\', \'options\': [\'' + type + '\',\'' + 
@@ -1167,9 +1192,9 @@ function showMenu(el) {
             '<a class="dropdown-item" href="#" data-href="{\'cmd\': \'delQueueSong\', \'options\': [\'range\',0,'+ 
             el.parentNode.parentNode.getAttribute('data-songpos') + ']}">Remove all upwards</a>' +
             '<a class="dropdown-item" href="#" data-href="{\'cmd\': \'delQueueSong\', \'options\': [\'range\',' + 
-            (parseInt(el.parentNode.parentNode.getAttribute('data-songpos'))-1) + ',-1]}">Remove all downwards</a>';
-//            '<div class="dropdown-divider"></div>' +
-//            '<a class="dropdown-item" href="#">Songdetails</a>';
+            (parseInt(el.parentNode.parentNode.getAttribute('data-songpos'))-1) + ',-1]}">Remove all downwards</a>' +
+            '<div class="dropdown-divider"></div>' +
+            '<a class="dropdown-item" data-href="{\'cmd\': \'songDetails\', \'options\': [\'' + uri + '\']}" href="#">Songdetails</a>';
     }    
     if (el.Popover == undefined) {
         new Popover(el, { trigger: 'click', template: '<div class="popover" role="tooltip">' +
@@ -1363,7 +1388,7 @@ function showNotification(notificationTitle,notificationText,notificationHtml,no
         var alertBox;
         if (!document.getElementById('alertBox')) {
             alertBox = document.createElement('div');
-            alertBox.setAttribute('id','alertBox');
+            alertBox.setAttribute('id', 'alertBox');
         }
         else {
             alertBox = document.getElementById('alertBox');
@@ -1426,7 +1451,7 @@ function songChange(obj) {
     if (playingTr)
         playingTr.getElementsByTagName('td')[1].innerText = obj.data.title;
 
-    showNotification(obj.data.title,textNotification,htmlNotification,'success');
+    showNotification(obj.data.title, textNotification, htmlNotification, 'success');
     last_song = cur_song;
 }
 
diff --git a/src/mpd_client.c b/src/mpd_client.c
index 8e93ae67a..4b3a3ecf4 100644
--- a/src/mpd_client.c
+++ b/src/mpd_client.c
@@ -210,11 +210,18 @@ void callback_mympd(struct mg_connection *nc, const struct mg_str msg)
             break;
         case MPD_API_GET_CURRENT_SONG:
                 n = mympd_put_current_song(mpd.buf);
+            break;
+        case MPD_API_GET_SONGDETAILS:
+            je = json_scanf(msg.p, msg.len, "{ data: { uri:%Q } }", &p_charbuf1);
+            if (je == 1) {
+                n = mympd_put_songdetails(mpd.buf, p_charbuf1);
+                free(p_charbuf1);
+            }
             break;            
         case MPD_API_GET_ARTISTS:
             je = json_scanf(msg.p, msg.len, "{ data: { offset:%u, filter:%Q } }", &uint_buf1, &p_charbuf1);
             if (je == 2) {
-                n = mympd_put_db_tag(mpd.buf, uint_buf1, "AlbumArtist","","",p_charbuf1);
+                n = mympd_put_db_tag(mpd.buf, uint_buf1, "AlbumArtist", "", "", p_charbuf1);
                 free(p_charbuf1);
             }
             break;
@@ -514,6 +521,16 @@ char* mympd_get_title(struct mpd_song const *song)
     return str;
 }
 
+char* mympd_get_genre(struct mpd_song const *song)
+{
+    char *str;
+    str = (char *)mpd_song_get_tag(song, MPD_TAG_GENRE, 0);
+    if(str == NULL){
+        str = "-";
+    }
+    return str;
+}
+
 char* mympd_get_track(struct mpd_song const *song)
 {
     char *str;
@@ -791,6 +808,37 @@ int mympd_put_current_song(char *buffer)
     return len;
 }
 
+int mympd_put_songdetails(char *buffer, char *uri)
+{
+    struct mpd_entity *entity;
+    const struct mpd_song *song;
+    int len;
+    struct json_out out = JSON_OUT_BUF(buffer, MAX_SIZE);
+    char cover[500];
+    
+    len = json_printf(&out, "{type: song_details, data: {");
+    mpd_send_list_all_meta(mpd.conn, uri);
+    while ((entity = mpd_recv_entity(mpd.conn)) != NULL) {
+        song = mpd_entity_get_song(entity);
+        mympd_get_cover(mpd_song_get_uri(song),cover,500);
+        len += json_printf(&out, "duration: %d, artist: %Q, album: %Q, title: %Q, albumartist: %Q, cover: %Q, uri: %Q, genre: %Q",
+                    mpd_song_get_duration(song),
+                    mympd_get_artist(song),
+                    mympd_get_album(song),
+                    mympd_get_title(song),
+                    mympd_get_album_artist(song),
+                    cover,
+                    uri,
+                    mympd_get_genre(song)
+               );
+        mpd_entity_free(entity);
+    }
+    len += json_printf(&out, "}}");
+    
+    if (len > MAX_SIZE) fprintf(stderr,"Buffer truncated\n");
+    return len;
+}
+
 int mympd_put_queue(char *buffer, unsigned int offset)
 {
     struct mpd_entity *entity;
@@ -815,13 +863,14 @@ int mympd_put_queue(char *buffer, unsigned int offset)
             entity_count ++;
             if (entity_count > offset && entity_count <= offset+MAX_ELEMENTS_PER_PAGE) {
                 if (entities_returned ++) len += json_printf(&out,",");
-                len += json_printf(&out, "{ id: %d, pos: %d, duration: %d, artist: %Q, album: %Q, title: %Q }",
+                len += json_printf(&out, "{ id: %d, pos: %d, duration: %d, artist: %Q, album: %Q, title: %Q, uri: %Q }",
                     mpd_song_get_id(song),
                     mpd_song_get_pos(song),
                     mpd_song_get_duration(song),
                     mympd_get_artist(song),
                     mympd_get_album(song),
-                    mympd_get_title(song)
+                    mympd_get_title(song),
+                    mpd_song_get_uri(song)
                 );
             }
         }
diff --git a/src/mpd_client.h b/src/mpd_client.h
index 06b22df68..78affdbf4 100644
--- a/src/mpd_client.h
+++ b/src/mpd_client.h
@@ -80,6 +80,7 @@
     X(MPD_API_GET_ARTISTALBUMTITLES) \
     X(MPD_API_GET_ARTISTS) \
     X(MPD_API_GET_CURRENT_SONG) \
+    X(MPD_API_GET_SONGDETAILS) \
     X(MPD_API_WELCOME) \
     X(MPD_API_GET_SETTINGS) \
     X(MPD_API_SET_SETTINGS)
@@ -144,6 +145,7 @@ int mympd_put_settings(char *buffer);
 int mympd_put_db_tag(char *buffer, unsigned int offset, char *mpdtagtype, char *mpdsearchtagtype, char *searchstr, char *filter);
 int mympd_put_songs_in_album(char *buffer, char *albumartist, char *album);
 int mympd_put_playlists(char *buffer, unsigned int offset, char *filter);
+int mympd_put_songdetails(char *buffer, char *uri);
 void mympd_disconnect();
 #endif
 

From 44d0c1d56ed103e816e366c0dba6383c61b08e90 Mon Sep 17 00:00:00 2001
From: jcorporation <mail@jcgames.de>
Date: Mon, 9 Jul 2018 18:49:55 +0100
Subject: [PATCH 3/6] Central mympd_get_tag function

---
 src/mpd_client.c | 124 +++++++++++++----------------------------------
 1 file changed, 34 insertions(+), 90 deletions(-)

diff --git a/src/mpd_client.c b/src/mpd_client.c
index 4b3a3ecf4..54fbf16a7 100644
--- a/src/mpd_client.c
+++ b/src/mpd_client.c
@@ -511,73 +511,15 @@ void mympd_poll(struct mg_mgr *s)
     }
 }
 
-char* mympd_get_title(struct mpd_song const *song)
+char* mympd_get_tag(struct mpd_song const *song, enum mpd_tag_type tag)
 {
     char *str;
-    str = (char *)mpd_song_get_tag(song, MPD_TAG_TITLE, 0);
-    if(str == NULL){
-        str = basename((char *)mpd_song_get_uri(song));
-    }
-    return str;
-}
-
-char* mympd_get_genre(struct mpd_song const *song)
-{
-    char *str;
-    str = (char *)mpd_song_get_tag(song, MPD_TAG_GENRE, 0);
-    if(str == NULL){
-        str = "-";
-    }
-    return str;
-}
-
-char* mympd_get_track(struct mpd_song const *song)
-{
-    char *str;
-    str = (char *)mpd_song_get_tag(song, MPD_TAG_TRACK, 0);
-    if(str == NULL){
-        str = "-";
-    }
-    return str;
-}
-
-
-char* mympd_get_album(struct mpd_song const *song)
-{
-    char *str;
-    str = (char *)mpd_song_get_tag(song, MPD_TAG_ALBUM, 0);
-    if(str == NULL){
-        str = "-";
-    }
-    return str;
-}
-
-char* mympd_get_artist(struct mpd_song const *song)
-{
-    char *str;
-    str = (char *)mpd_song_get_tag(song, MPD_TAG_ARTIST, 0);
-    if(str == NULL){
-        str = "-";
-    }
-    return str;
-}
-
-char* mympd_get_album_artist(struct mpd_song const *song)
-{
-    char *str;
-    str = (char *)mpd_song_get_tag(song, MPD_TAG_ALBUM_ARTIST, 0);
-    if(str == NULL){
-        str = "-";
-    }
-    return str;
-}
-
-char* mympd_get_year(struct mpd_song const *song)
-{
-    char *str;
-    str = (char *)mpd_song_get_tag(song, MPD_TAG_DATE, 0);
-    if(str == NULL){
-        str = "-";
+    str = (char *)mpd_song_get_tag(song, tag, 0);
+    if (str == NULL){
+        if (tag == MPD_TAG_TITLE)
+            str = basename((char *)mpd_song_get_uri(song));
+        else
+            str = "-";
     }
     return str;
 }
@@ -791,12 +733,12 @@ int mympd_put_current_song(char *buffer)
         "artist: %Q, album: %Q, uri: %Q, currentsongid: %d, albumartist: %Q, "
         "duration: %d, cover: %Q }}",
         mpd_song_get_pos(song),
-        mympd_get_title(song),
-        mympd_get_artist(song),
-        mympd_get_album(song),
+        mympd_get_tag(song, MPD_TAG_TITLE),
+        mympd_get_tag(song, MPD_TAG_ARTIST),
+        mympd_get_tag(song, MPD_TAG_ALBUM),
         mpd_song_get_uri(song),
         mpd.song_id,
-        mympd_get_album_artist(song),
+        mympd_get_tag(song, MPD_TAG_ALBUM_ARTIST),
         mpd_song_get_duration(song),
         cover
     );
@@ -821,15 +763,17 @@ int mympd_put_songdetails(char *buffer, char *uri)
     while ((entity = mpd_recv_entity(mpd.conn)) != NULL) {
         song = mpd_entity_get_song(entity);
         mympd_get_cover(mpd_song_get_uri(song),cover,500);
-        len += json_printf(&out, "duration: %d, artist: %Q, album: %Q, title: %Q, albumartist: %Q, cover: %Q, uri: %Q, genre: %Q",
+        len += json_printf(&out, "duration: %d, artist: %Q, album: %Q, title: %Q, albumartist: %Q, cover: %Q, uri: %Q, genre: %Q, track: %Q, date: %Q",
                     mpd_song_get_duration(song),
-                    mympd_get_artist(song),
-                    mympd_get_album(song),
-                    mympd_get_title(song),
-                    mympd_get_album_artist(song),
+                    mympd_get_tag(song, MPD_TAG_ARTIST),
+                    mympd_get_tag(song, MPD_TAG_ALBUM),
+                    mympd_get_tag(song, MPD_TAG_TITLE),
+                    mympd_get_tag(song, MPD_TAG_ALBUM_ARTIST),
                     cover,
                     uri,
-                    mympd_get_genre(song)
+                    mympd_get_tag(song, MPD_TAG_GENRE),
+                    mympd_get_tag(song, MPD_TAG_TRACK),
+                    mympd_get_tag(song, MPD_TAG_DATE)
                );
         mpd_entity_free(entity);
     }
@@ -867,9 +811,9 @@ int mympd_put_queue(char *buffer, unsigned int offset)
                     mpd_song_get_id(song),
                     mpd_song_get_pos(song),
                     mpd_song_get_duration(song),
-                    mympd_get_artist(song),
-                    mympd_get_album(song),
-                    mympd_get_title(song),
+                    mympd_get_tag(song, MPD_TAG_ARTIST),
+                    mympd_get_tag(song, MPD_TAG_ALBUM),
+                    mympd_get_tag(song, MPD_TAG_TITLE),
                     mpd_song_get_uri(song)
                 );
             }
@@ -914,15 +858,15 @@ int mympd_put_browse(char *buffer, char *path, unsigned int offset, char *filter
                     break;
                 case MPD_ENTITY_TYPE_SONG:
                     song = mpd_entity_get_song(entity);
-                    entityName = mympd_get_title(song);
+                    entityName = mympd_get_tag(song, MPD_TAG_TITLE);
                     if (strncmp(filter,"-",1) == 0 || strncasecmp(filter,entityName,1) == 0 ||
                         ( strncmp(filter,"0",1) == 0 && isalpha(*entityName) == 0 )
                     ) {
                         if (entities_returned ++) len += json_printf(&out,",");
                         len += json_printf(&out, "{type: song, uri: %Q, album: %Q, artist: %Q, duration: %d, title: %Q, name: %Q }",
                             mpd_song_get_uri(song),
-                            mympd_get_album(song),
-                            mympd_get_artist(song),
+                            mympd_get_tag(song, MPD_TAG_ALBUM),
+                            mympd_get_tag(song, MPD_TAG_ARTIST),
                             mpd_song_get_duration(song),
                             entityName,
                             entityName
@@ -1082,8 +1026,8 @@ int mympd_put_songs_in_album(char *buffer, char *albumartist, char *album)
                 len += json_printf(&out, "{ type: song, uri: %Q, duration: %d, title: %Q, track: %Q }",
                     mpd_song_get_uri(song),
                     mpd_song_get_duration(song),
-                    mympd_get_title(song),
-                    mympd_get_track(song)
+                    mympd_get_tag(song, MPD_TAG_TITLE),
+                    mympd_get_tag(song, MPD_TAG_TRACK)
                 );
             }
             mpd_song_free(song);
@@ -1181,11 +1125,11 @@ int mympd_search(char *buffer, char *mpdtagtype, unsigned int offset, char *sear
                 if (entities_returned ++) len += json_printf(&out, ", ");
                 len += json_printf(&out, "{ type: song, uri: %Q, album: %Q, artist: %Q, duration: %d, title: %Q, name: %Q }",
                     mpd_song_get_uri(song),
-                    mympd_get_album(song),
-                    mympd_get_artist(song),
+                    mympd_get_tag(song, MPD_TAG_ALBUM),
+                    mympd_get_tag(song, MPD_TAG_ARTIST),
                     mpd_song_get_duration(song),
-                    mympd_get_title(song),
-                    mympd_get_title(song)
+                    mympd_get_tag(song, MPD_TAG_TITLE),
+                    mympd_get_tag(song, MPD_TAG_TITLE)
                 );
             }
             mpd_song_free(song);
@@ -1267,10 +1211,10 @@ int mympd_search_queue(char *buffer, char *mpdtagtype, unsigned int offset, char
             len += json_printf(&out, "{ type: song, id: %d, pos: %d, album: %Q, artist: %Q, duration: %d, title: %Q }",
                 mpd_song_get_id(song),
                 mpd_song_get_pos(song),
-                mympd_get_album(song),
-                mympd_get_artist(song),
+                mympd_get_tag(song, MPD_TAG_ALBUM),
+                mympd_get_tag(song, MPD_TAG_ARTIST),
                 mpd_song_get_duration(song),
-                mympd_get_title(song)
+                mympd_get_tag(song, MPD_TAG_TITLE)
             );
             mpd_song_free(song);
           }

From 6c1cf3e745875c5e8ffb563af265fb090b4e3df4 Mon Sep 17 00:00:00 2001
From: jcorporation <mail@jcgames.de>
Date: Mon, 9 Jul 2018 18:50:21 +0100
Subject: [PATCH 4/6] More details for songdetails view

---
 htdocs/index.html | 2 ++
 htdocs/js/mpd.js  | 2 +-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/htdocs/index.html b/htdocs/index.html
index 3b68e5547..397dd8f0e 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -685,8 +685,10 @@ <h1></h1>
             <tbody>
               <tr data-name="artist"><td>Artist</td><td></td></tr>
               <tr data-name="album"><td>Album</td><td></td></tr>
+              <tr data-name="track"><td>Track</td><td></td></tr>
               <tr data-name="albumartist"><td>Albumartist</td><td></td></tr>
               <tr data-name="genre"><td>Genre</td><td></td></tr>
+              <tr data-name="date"><td>Date</td><td></td></tr>
               <tr data-name="uri"><td>Uri</td><td></td></tr>
             </tbody>
           </table>
diff --git a/htdocs/js/mpd.js b/htdocs/js/mpd.js
index 80379bbdb..03b6c1227 100644
--- a/htdocs/js/mpd.js
+++ b/htdocs/js/mpd.js
@@ -1132,7 +1132,7 @@ function songDetails(uri) {
 
 function parseSongDetails(obj) {
     var modal = document.getElementById('modalSongDetails');
-    modal.querySelector('.album-cover').style.backgroundImage = 'url(' + obj.data.cover + ')';
+    modal.querySelector('.album-cover').style.backgroundImage = 'url("' + obj.data.cover + '")';
     modal.getElementsByTagName('h1')[0].innerText = obj.data.title;
     var tr = modal.getElementsByTagName('tr');
     var trLen = tr.length;

From b3916fa6f440270a9f4a1f8d8d07c5aa11435347 Mon Sep 17 00:00:00 2001
From: jcorporation <mail@jcgames.de>
Date: Mon, 9 Jul 2018 19:44:42 +0100
Subject: [PATCH 5/6] Improved alignment of icons

---
 htdocs/css/mpd.css | 26 ++++++++++++++------------
 htdocs/index.html  | 20 ++++++++++----------
 htdocs/js/mpd.js   |  2 +-
 3 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/htdocs/css/mpd.css b/htdocs/css/mpd.css
index c02a0cafe..7d898e7a4 100644
--- a/htdocs/css/mpd.css
+++ b/htdocs/css/mpd.css
@@ -114,10 +114,8 @@ button {
   -webkit-font-smoothing: antialiased;
   /* Support for Safari and Chrome. */
   text-rendering: optimizeLegibility;
-
   /* Support for Firefox. */
   -moz-osx-font-smoothing: grayscale;
-
   /* Support for IE. */
   font-feature-settings: 'liga';
 }
@@ -159,28 +157,32 @@ main {
  width:160px;
 }
 
+.title-icon {
+ float:left;
+ margin-right:5px;
+ font-size:1.8rem;
+}
+
 .header-logo {
  font-size:2rem;
  float:left;
  margin-right:5px;
 }
 
-#BrowseFilesystemFilterLetters > button, 
-#BrowseDatabaseFilterLetters > button,
-#BrowsePlaylistsFilterLetters > button
-{
+.letters > button {
  width:28px;
+ height:28px;
 }
 
 .col-md {
- min-width:260px;
- max-width:260px;
+ max-width:250px;
+ min-width:250px;
 }
 
-.card-img-top {
- min-height:250px;
- background-repeat:no-repeat;
- background-color:#eee;
+a.card-img-top {
+ height:250px;
+ overflow:hidden;
+ display:block;
 }
 
 button.active {
diff --git a/htdocs/index.html b/htdocs/index.html
index 397dd8f0e..5c6fb3818 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -198,7 +198,7 @@ <h6 class="dropdown-header text-light">Search in Tag</h6>
         <div class="btn-toolbar card-toolbar" id="BrowsePlaylistsButtons" role="toolbar">
           <div class="btn-group mr-2">
             <button id="BrowsePlaylistsFilter" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Filter</button>
-            <div class="dropdown-menu bg-dark px-2" id="BrowsePlaylistsFilterLetters">
+            <div class="dropdown-menu bg-dark px-2 letters" id="BrowsePlaylistsFilterLetters">
             </div>
           </div>        
           <div id="BrowsePlaylistsPaginationTop" class="btn-group mr-2">
@@ -256,7 +256,7 @@ <h6 class="dropdown-header text-light">Search in Tag</h6>
           </div>
           <div class="btn-group mr-2">
             <button id="BrowseDatabaseFilter" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Filter</button>
-            <div class="dropdown-menu bg-dark px-2" id="BrowseDatabaseFilterLetters">
+            <div class="dropdown-menu bg-dark px-2 letters" id="BrowseDatabaseFilterLetters">
             </div>
           </div>
           <div id="BrowseDatabasePaginationTop" class="btn-group mr-2">
@@ -315,7 +315,7 @@ <h6 class="dropdown-header text-light">Search in Tag</h6>
           </div>
           <div class="btn-group mr-2">
             <button id="BrowseFilesystemFilter" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Filter</button>
-            <div class="dropdown-menu bg-dark px-2" id="BrowseFilesystemFilterLetters">
+            <div class="dropdown-menu bg-dark px-2 letters" id="BrowseFilesystemFilterLetters">
             </div>
           </div>
           <div id="BrowseFilesystemPaginationTop" class="btn-group mr-2">
@@ -468,7 +468,7 @@ <h6 class="dropdown-header text-light">Search in Tag</h6>
     <div class="modal-dialog" role="document">
       <div class="modal-content">
         <div class="modal-header">
-          <h5 class="modal-title"><span class="material-icons">error</span> Connection Error</h5>
+          <h5 class="modal-title"><span class="material-icons title-icon">error</span> Connection Error</h5>
         </div>
         <div class="modal-body">
           <p>Connection to myMPD failed. Trying to reconnect.</p>
@@ -482,7 +482,7 @@ <h5 class="modal-title"><span class="material-icons">error</span> Connection Err
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
-          <h5 class="modal-title" id="settingsLabel"><span class="material-icons">settings</span> Settings</h5>
+          <h5 class="modal-title" id="settingsLabel"><span class="material-icons title-icon">settings</span> Settings</h5>
           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
             <span aria-hidden="true">&times;</span>
           </button>
@@ -576,13 +576,13 @@ <h5 class="modal-title" id="settingsLabel"><span class="material-icons">settings
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
-          <h5 class="modal-title" id="aboutLabel"><span class="material-icons">play_circle_outline</span> About</h5>
+          <h5 class="modal-title" id="aboutLabel"><span class="material-icons title-icon">play_circle_outline</span> About</h5>
           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
             <span aria-hidden="true">&times;</span>
           </button>
         </div>
         <div class="modal-body">
-          <h4><a class="text-success" href="https://github.com/jcorporation/ympd"><span class="material-icons">play_circle_outline</span> myMPD</a>&nbsp;&ndash;&nbsp;<small>MPD Web GUI - written in C, utilizing Websockets and Bootstrap/JS</small></h4>
+          <h4><a class="text-success" href="https://github.com/jcorporation/ympd">myMPD</a>&nbsp;&ndash;&nbsp;<small>MPD Web GUI - written in C, utilizing Websockets and Bootstrap/JS</small></h4>
           <p>myMPD is a lightweight MPD web client that runs without a dedicated webserver or interpreter. It's tuned for minimal resource usage and requires only very litte dependencies. myMPD is a fork of <a class="text-success" href="http://www.ympd.org">ympd</a>.</p>
           <ul>
             <li>Version: <span id="mympdVersion"></span></li>
@@ -619,7 +619,7 @@ <h5>Play Statistics</h5>
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
-          <h5 class="modal-title" id="addstreamLabel"><span class="material-icons">view_stream</span> Add Stream</h5>
+          <h5 class="modal-title" id="addstreamLabel"><span class="material-icons title-icon">view_stream</span> Add Stream</h5>
           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
             <span aria-hidden="true">&times;</span>
           </button>
@@ -646,7 +646,7 @@ <h5 class="modal-title" id="addstreamLabel"><span class="material-icons">view_st
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
-          <h5 class="modal-title" id="savequeueLabel"><span class="material-icons">save</span> Save Queue</h5>
+          <h5 class="modal-title" id="savequeueLabel"><span class="material-icons title-icon">save</span> Save Queue</h5>
           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
             <span aria-hidden="true">&times;</span>
           </button>          
@@ -673,7 +673,7 @@ <h5 class="modal-title" id="savequeueLabel"><span class="material-icons">save</s
     <div class="modal-dialog">
       <div class="modal-content">
         <div class="modal-header">
-          <h5 class="modal-title" id="savequeueLabel"><span class="material-icons">music_note</span> Song Details</h5>
+          <h5 class="modal-title" id="savequeueLabel"><span class="material-icons title-icon">music_note</span> Song Details</h5>
           <button type="button" class="close" data-dismiss="modal" aria-label="Close">
             <span aria-hidden="true">&times;</span>
           </button>          
diff --git a/htdocs/js/mpd.js b/htdocs/js/mpd.js
index 03b6c1227..3bc6ea331 100644
--- a/htdocs/js/mpd.js
+++ b/htdocs/js/mpd.js
@@ -977,7 +977,7 @@ function parseListDBtags(obj) {
             card.classList.add('mr-0');
             card.setAttribute('id', id);
             card.innerHTML = '<div class="card mb-4" id="card' + id + '">' +
-                             ' <a href="#"><img class="card-img-top" src="" ></a>' +
+                             ' <a href="#" class="card-img-top"><img class="card-img-top" src="" ></a>' +
                              ' <div class="card-body">' +
                              '  <h5 class="card-title">' + obj.searchstr + '</h5>' +
                              '  <h4 class="card-title">' + obj.data[i].value + '</h4>' +

From 020d63dfaf45f3ea0979c25fedb9469f23c7a7b2 Mon Sep 17 00:00:00 2001
From: jcorporation <mail@jcgames.de>
Date: Mon, 9 Jul 2018 20:20:09 +0100
Subject: [PATCH 6/6] Update

---
 htdocs/css/mpd.min.css |  2 +-
 htdocs/index.html      |  2 +-
 htdocs/js/mpd.js       |  4 +--
 htdocs/js/mpd.min.js   | 80 +++++++++++++++++++++++-------------------
 4 files changed, 47 insertions(+), 41 deletions(-)

diff --git a/htdocs/css/mpd.min.css b/htdocs/css/mpd.min.css
index 55a99593f..da7f5c023 100644
--- a/htdocs/css/mpd.min.css
+++ b/htdocs/css/mpd.min.css
@@ -1 +1 @@
-html{position:relative;min-height:100%}body{margin-bottom:60px}footer{position:absolute;bottom:0}body{padding-top:50px;padding-bottom:50px;background-color:#888}button{overflow:hidden}#BrowseBreadrumb{overflow:auto;white-space:nowrap}#BrowseBreadcrumb>li>a{cursor:pointer}#counter{font-size:22px;margin-left:10px;min-width:50px}#search{width:200px}.card{min-height:350px}@media only screen and (max-width:576px){.header-logo{display:none!important}}tbody{cursor:pointer}.tblnum,.tblaction{width:30px}#album-cover{background-size:cover;border:1px solid black;border-radius:5px;overflow:hidden;margin-bottom:20px;width:240px;height:240px;background-color:#eee}.hide{display:none!important}.pull-right{float:right!important}.card-toolbar{margin-bottom:10px}.card-toolbar>div,.card-toolbar>form{margin-bottom:5px}@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;src:url(/assets/MaterialIcons-Regular.eot);src:local('Material Icons'),local('MaterialIcons-Regular');src:url(/assets/MaterialIcons-Regular.woff2) format('woff2'),url(/assets/MaterialIcons-Regular.woff) format('woff'),url(/assets/MaterialIcons-Regular.ttf) format('truetype')}.material-icons{font-family:'Material Icons';font-weight:normal;font-style:normal;font-size:18px;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;vertical-align:top;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga'}.material-icons-small{font-size:16px}main{padding-top:20px}.color-darkgrey{color:#6c757d}.color-darkgrey:hover{color:#6c757d!important}#btn-outputs-block>button{margin-bottom:10px}#btn-outputs-block>button:last-child{margin-bottom:0}.card-body{overflow-x:hidden}#progressBar{width:100%;margin-top:8px}#volumeBar{margin-top:2px;width:160px}.header-logo{font-size:2rem;float:left;margin-right:5px}#BrowseFilesystemFilterLetters>button,#BrowseDatabaseFilterLetters>button,#BrowsePlaylistsFilterLetters>button{width:28px}.col-md{min-width:260px;max-width:260px}.card-img-top{min-height:250px;background-repeat:no-repeat;background-color:#eee}button.active{color:#fff;background-color:#28a745!important;border-color:#28a745!important}div#alertBox{position:fixed;top:50px;right:10px;width:80%;max-width:400px;z-index:1000;opacity:0;visibility:visible;transition:opacity .5s ease-in}div.alertBoxActive{opacity:1!important;visibility:visible!important;transition:opacity .5s ease-in}.popover-content{padding-top:4px;padding-bottom:4px}.opacity05{opacity:.5}
\ No newline at end of file
+html{position:relative;min-height:100%}body{margin-bottom:60px}footer{position:absolute;bottom:0}body{padding-top:50px;padding-bottom:50px;background-color:#888}button{overflow:hidden}#BrowseBreadrumb{overflow:auto;white-space:nowrap}#BrowseBreadcrumb>li>a{cursor:pointer}#counter{font-size:22px;margin-left:10px;min-width:50px}#search{width:200px}.card{min-height:350px}@media only screen and (max-width:576px){.header-logo{display:none!important}}.clickable{cursor:pointer}.tblnum,.tblaction{width:30px}.album-cover{background-size:cover;border:1px solid black;border-radius:5px;overflow:hidden;margin-bottom:20px;width:240px;height:240px;background-color:#eee}.hide{display:none!important}.pull-right{float:right!important}.card-toolbar{margin-bottom:10px}.card-toolbar>div,.card-toolbar>form{margin-bottom:5px}@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;src:url(/assets/MaterialIcons-Regular.eot);src:local('Material Icons'),local('MaterialIcons-Regular');src:url(/assets/MaterialIcons-Regular.woff2) format('woff2'),url(/assets/MaterialIcons-Regular.woff) format('woff'),url(/assets/MaterialIcons-Regular.ttf) format('truetype')}.material-icons{font-family:'Material Icons';font-weight:normal;font-style:normal;font-size:18px;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;vertical-align:top;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:'liga'}.material-icons-small{font-size:16px}main{padding-top:20px}.color-darkgrey{color:#6c757d}.color-darkgrey:hover{color:#6c757d!important}#btn-outputs-block>button{margin-bottom:10px}#btn-outputs-block>button:last-child{margin-bottom:0}.card-body{overflow-x:hidden}#progressBar{width:100%;margin-top:8px}#volumeBar{margin-top:2px;width:160px}.title-icon{float:left;margin-right:5px;font-size:1.8rem}.header-logo{font-size:2rem;float:left;margin-right:5px}.letters>button{width:28px;height:28px}.col-md{max-width:250px;min-width:250px}a.card-img-top{height:250px;overflow:hidden;display:block}button.active{color:#fff;background-color:#28a745!important;border-color:#28a745!important}div#alertBox{position:fixed;top:50px;right:10px;width:80%;max-width:400px;z-index:1000;opacity:0;visibility:visible;transition:opacity .5s ease-in}div.alertBoxActive{opacity:1!important;visibility:visible!important;transition:opacity .5s ease-in}.popover-content{padding-top:4px;padding-bottom:4px}.opacity05{opacity:.5}
\ No newline at end of file
diff --git a/htdocs/index.html b/htdocs/index.html
index 5c6fb3818..a5a38d937 100644
--- a/htdocs/index.html
+++ b/htdocs/index.html
@@ -467,7 +467,7 @@ <h6 class="dropdown-header text-light">Search in Tag</h6>
   <div class="modal" id="modalConnectionError" role="dialog">
     <div class="modal-dialog" role="document">
       <div class="modal-content">
-        <div class="modal-header">
+        <div class="modal-header bg-danger text-light">
           <h5 class="modal-title"><span class="material-icons title-icon">error</span> Connection Error</h5>
         </div>
         <div class="modal-body">
diff --git a/htdocs/js/mpd.js b/htdocs/js/mpd.js
index 3bc6ea331..ea32ae3a2 100644
--- a/htdocs/js/mpd.js
+++ b/htdocs/js/mpd.js
@@ -1181,8 +1181,8 @@ function showMenu(el) {
             '<a class="dropdown-item" href="#" data-href="{\'cmd\': \'replaceQueue\', \'options\': [\'' + type + '\',\'' + 
             uri + '\',\'' + name + '\']}">Replace queue</a>' +
             '<div class="dropdown-divider"></div>' +
-/*            '<a class="dropdown-item" href="#">Show playlist</a>' +
-            '<a class="dropdown-item" href="#">Rename playlist</a>' + */
+//            '<a class="dropdown-item" href="#">Show playlist</a>' +
+//            '<a class="dropdown-item" href="#">Rename playlist</a>' + 
             '<a class="dropdown-item" href="#" data-href="{\'cmd\': \'delPlaylist\', \'options\': [\'' + 
             uri + '\',\'' + name + '\']}">Delete playlist</a>';
     }
diff --git a/htdocs/js/mpd.min.js b/htdocs/js/mpd.min.js
index 1c601f99c..1e6d797fb 100644
--- a/htdocs/js/mpd.min.js
+++ b/htdocs/js/mpd.min.js
@@ -5,23 +5,25 @@ $jscomp.iteratorPrototype=function(a){$jscomp.initSymbolIterator();a={next:a};a[
 $jscomp.checkStringArgs=function(a,b,c){if(null==a)throw new TypeError("The 'this' value for String.prototype."+c+" must not be null or undefined");if(b instanceof RegExp)throw new TypeError("First argument to String.prototype."+c+" must not be a regular expression");return a+""};
 $jscomp.polyfill=function(a,b,c,e){if(b){c=$jscomp.global;a=a.split(".");for(e=0;e<a.length-1;e++){var d=a[e];d in c||(c[d]={});c=c[d]}a=a[a.length-1];e=c[a];b=b(e);b!=e&&null!=b&&$jscomp.defineProperty(c,a,{configurable:!0,writable:!0,value:b})}};
 $jscomp.polyfill("String.prototype.repeat",function(a){return a?a:function(a){var b=$jscomp.checkStringArgs(this,null,"repeat");if(0>a||1342177279<a)throw new RangeError("Invalid count value");a|=0;for(var e="";a;)if(a&1&&(e+=b),a>>>=1)b+=b;return e}},"es6","es3");
-var socket,last_song="",last_state,current_song={},playstate="",settings={},alertTimeout,app={apps:{Playback:{state:"0/-/"},Queue:{state:"0/Any Tag/"},Browse:{active:"Database",tabs:{Filesystem:{state:"0/-/"},Playlists:{state:"0/-/"},Database:{active:"Artist",views:{Artist:{state:"0/-/"},Album:{state:"0/-/"}}}}},Search:{state:"0/Any Tag/"}},current:{app:"Playback",tab:void 0,view:void 0,page:0,filter:"",search:""},last:{app:void 0,tab:void 0,view:void 0}},domCache={};domCache.navbarBottomBtns=document.getElementById("navbar-bottom").getElementsByTagName("div");
-domCache.navbarBottomBtnsLen=domCache.navbarBottomBtns.length;domCache.panelHeadingBrowse=document.getElementById("panel-heading-browse").getElementsByTagName("a");domCache.panelHeadingBrowseLen=domCache.panelHeadingBrowse.length;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.btnPrev=document.getElementById("btnPrev");domCache.btnNext=document.getElementById("btnNext");domCache.progressBar=document.getElementById("progressBar");domCache.volumeBar=document.getElementById("volumeBar");domCache.outputs=document.getElementById("outputs");
-var modalConnectionError=new Modal(document.getElementById("modalConnectionError")),modalSettings=new Modal(document.getElementById("modalSettings")),modalAddstream=new Modal(document.getElementById("modalAddstream")),modalSavequeue=new Modal(document.getElementById("modalSavequeue")),mainMenu=new Dropdown(document.getElementById("mainMenu"));
-function appPrepare(){if(app.current.app!=app.last.app||app.current.tab!=app.last.tab||app.current.view!=app.last.view){for(var a=0;a<domCache.navbarBottomBtnsLen;a++)domCache.navbarBottomBtns[a].classList.remove("active");document.getElementById("cardPlayback").classList.add("hide");document.getElementById("cardQueue").classList.add("hide");document.getElementById("cardBrowse").classList.add("hide");document.getElementById("cardSearch").classList.add("hide");for(a=0;a<domCache.panelHeadingBrowseLen;a++)domCache.panelHeadingBrowse[a].classList.remove("active");
+var socket,last_song="",last_state,current_song={},playstate="",settings={},alertTimeout,app={apps:{Playback:{state:"0/-/",scrollPos:0},Queue:{state:"0/Any Tag/",scrollPos:0},Browse:{active:"Database",tabs:{Filesystem:{state:"0/-/",scrollPos:0},Playlists:{state:"0/-/",scrollPos:0},Database:{active:"Artist",views:{Artist:{state:"0/-/",scrollPos:0},Album:{state:"0/-/",scrollPos:0}}}}},Search:{state:"0/Any Tag/",scrollPos:0}},current:{app:"Playback",tab:void 0,view:void 0,page:0,filter:"",search:"",
+scrollPos:0},last:{app:void 0,tab:void 0,view:void 0,filter:"",search:"",scrollPos:0}},domCache={};domCache.navbarBottomBtns=document.getElementById("navbar-bottom").getElementsByTagName("div");domCache.navbarBottomBtnsLen=domCache.navbarBottomBtns.length;domCache.panelHeadingBrowse=document.getElementById("panel-heading-browse").getElementsByTagName("a");domCache.panelHeadingBrowseLen=domCache.panelHeadingBrowse.length;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.btnPrev=document.getElementById("btnPrev");domCache.btnNext=document.getElementById("btnNext");domCache.progressBar=document.getElementById("progressBar");domCache.volumeBar=document.getElementById("volumeBar");domCache.outputs=document.getElementById("outputs");
+var modalConnectionError=new Modal(document.getElementById("modalConnectionError")),modalSettings=new Modal(document.getElementById("modalSettings")),modalAddstream=new Modal(document.getElementById("modalAddstream")),modalSavequeue=new Modal(document.getElementById("modalSavequeue")),modalSongDetails=new Modal(document.getElementById("modalSongDetails")),mainMenu=new Dropdown(document.getElementById("mainMenu"));
+function appPrepare(a){if(app.current.app!=app.last.app||app.current.tab!=app.last.tab||app.current.view!=app.last.view){for(var b=0;b<domCache.navbarBottomBtnsLen;b++)domCache.navbarBottomBtns[b].classList.remove("active");document.getElementById("cardPlayback").classList.add("hide");document.getElementById("cardQueue").classList.add("hide");document.getElementById("cardBrowse").classList.add("hide");document.getElementById("cardSearch").classList.add("hide");for(b=0;b<domCache.panelHeadingBrowseLen;b++)domCache.panelHeadingBrowse[b].classList.remove("active");
 document.getElementById("cardBrowsePlaylists").classList.add("hide");document.getElementById("cardBrowseDatabase").classList.add("hide");document.getElementById("cardBrowseFilesystem").classList.add("hide");document.getElementById("card"+app.current.app).classList.remove("hide");document.getElementById("nav"+app.current.app).classList.add("active");void 0!=app.current.tab&&(document.getElementById("card"+app.current.app+app.current.tab).classList.remove("hide"),document.getElementById("card"+app.current.app+
-"Nav"+app.current.tab).classList.add("active"));scrollToTop()}}function appGoto(a,b,c,e){app.apps[a].tabs?(void 0==b&&(b=app.apps[a].active),app.apps[a].tabs[b].views?(void 0==c&&(c=app.apps[a].tabs[b].active),a="/"+a+"/"+b+"/"+c+"!"+(void 0==e?app.apps[a].tabs[b].views[c].state:e)):a="/"+a+"/"+b+"!"+(void 0==e?app.apps[a].tabs[b].state:e)):a="/"+a+"!"+(void 0==e?app.apps[a].state:e);location.hash=a}
-function appRoute(){if(params=decodeURI(location.hash).match(/^#\/(\w+)\/?(\w+)?\/?(\w+)?!((\d+)\/([^\/]+)\/(.*))$/)){app.current.app=params[1];app.current.tab=params[2];app.current.view=params[3];app.apps[app.current.app].state?app.apps[app.current.app].state=params[4]:app.apps[app.current.app].tabs[app.current.tab].state?(app.apps[app.current.app].tabs[app.current.tab].state=params[4],app.apps[app.current.app].active=app.current.tab):app.apps[app.current.app].tabs[app.current.tab].views[app.current.view].state&&
-(app.apps[app.current.app].tabs[app.current.tab].views[app.current.view].state=params[4],app.apps[app.current.app].active=app.current.tab,app.apps[app.current.app].tabs[app.current.tab].active=app.current.view);app.current.page=parseInt(params[5]);app.current.filter=params[6];app.current.search=params[7];appPrepare();if("Playback"==app.current.app)sendAPI({cmd:"MPD_API_GET_CURRENT_SONG"},songChange);else if("Queue"==app.current.app){document.getElementById("QueueList").classList.add("opacity05");
-app.last.app!=app.current.app&&2>app.current.search.length&&setPagination(app.current.page);for(var a=document.getElementById("searchqueuetag").getElementsByTagName("button"),b=0;b<a.length;b++)a[b].classList.remove("active"),a[b].innerText==app.current.filter&&(a[b].classList.add("active"),document.getElementById("searchqueuetagdesc").innerText=a[b].innerText);getQueue()}else if("Browse"==app.current.app&&"Playlists"==app.current.tab)document.getElementById("BrowsePlaylistsList").classList.add("opacity05"),
-sendAPI({cmd:"MPD_API_GET_PLAYLISTS",data:{offset:app.current.page,filter:app.current.filter}},parsePlaylists),doSetFilterLetter("BrowsePlaylistsFilter");else if("Browse"==app.current.app&&"Database"==app.current.tab&&"Artist"==app.current.view)document.getElementById("BrowseDatabaseArtistList").classList.add("opacity05"),sendAPI({cmd:"MPD_API_GET_ARTISTS",data:{offset:app.current.page,filter:app.current.filter}},parseListDBtags),doSetFilterLetter("BrowseDatabaseFilter");else if("Browse"==app.current.app&&
-"Database"==app.current.tab&&"Album"==app.current.view)document.getElementById("BrowseDatabaseAlbumCards").classList.add("opacity05"),sendAPI({cmd:"MPD_API_GET_ARTISTALBUMS",data:{offset:app.current.page,filter:app.current.filter,albumartist:app.current.search}},parseListDBtags),doSetFilterLetter("BrowseDatabaseFilter");else if("Browse"==app.current.app&&"Filesystem"==app.current.tab){document.getElementById("BrowseFilesystemList").classList.add("opacity05");sendAPI({cmd:"MPD_API_GET_FILESYSTEM",
-data:{offset:app.current.page,path:app.current.search?app.current.search:"/",filter:app.current.filter}},parseFilesystem);app.current.search?document.getElementById("BrowseFilesystemAddAllSongs").removeAttribute("disabled"):document.getElementById("BrowseFilesystemAddAllSongs").setAttribute("disabled","disabled");a='<li class="breadcrumb-item"><a data-uri="">root</a></li>';var c=app.current.search.split("/"),e=c.length,d="";for(b=0;b<e;b++){if(e-1==b){a+='<li class="breadcrumb-item active">'+c[b]+
-"</li>";break}d+=c[b];a+='<li class="breadcrumb-item"><a data-uri="'+d+'">'+c[b]+"</a></li>";d+="/"}b=document.getElementById("BrowseBreadcrumb");b.innerHTML=a;a=b.getElementsByTagName("a");c=a.length;for(b=0;b<c;b++)a[b].addEventListener("click",function(){appGoto("Browse","Filesystem",void 0,"0/"+app.current.filter+"/"+this.getAttribute("data-uri"))},!1);doSetFilterLetter("BrowseFilesystemFilter")}else if("Search"==app.current.app)for(document.getElementById("searchstr2").focus(),document.getElementById("SearchList").classList.add("opacity05"),
-app.last.app!=app.current.app&&(""!=app.current.search?document.getElementById("SearchList").getElementsByTagName("tbody")[0].innerHTML='<tr><td><span class="material-icons">search</span></td><td colspan="5">Searching...</td></tr>':setPagination(app.current.page),document.getElementById("searchstr2").value=app.current.search),2<=app.current.search.length?sendAPI({cmd:"MPD_API_SEARCH",data:{mpdtag:app.current.filter,offset:app.current.page,searchstr:app.current.search}},parseSearch):(document.getElementById("SearchList").getElementsByTagName("tbody")[0].innerHTML=
-"",document.getElementById("searchAddAllSongs").setAttribute("disabled","disabled"),document.getElementById("panel-heading-search").innerText="",setPagination(app.current.page),document.getElementById("SearchList").classList.remove("opacity05")),a=document.getElementById("searchtags2").getElementsByTagName("button"),c=a.length,b=0;b<c;b++)a[b].classList.remove("active"),a[b].innerText==app.current.filter&&(a[b].classList.add("active"),document.getElementById("searchtags2desc").innerText=a[b].innerText);
-else appGoto("Playback");app.last.app=app.current.app;app.last.tab=app.current.tab;app.last.view=app.current.view}else appGoto("Playback")}
+"Nav"+app.current.tab).classList.add("active"));scrollTo(a)}}
+function appGoto(a,b,c,e){var d=document.body.scrollTop?document.body.scrollTop:document.documentElement.scrollTop;void 0!=app.apps[app.current.app].scrollPos?app.apps[app.current.app].scrollPos=d:void 0!=app.apps[app.current.app].tabs[app.current.tab].scrollPos?app.apps[app.current.app].tabs[app.current.tab].scrollPos=d:void 0!=app.apps[app.current.app].tabs[app.current.tab].views[app.current.view].scrollPos&&(app.apps[app.current.app].tabs[app.current.tab].views[app.current.view].scrollPos=d);app.apps[a].tabs?
+(void 0==b&&(b=app.apps[a].active),app.apps[a].tabs[b].views?(void 0==c&&(c=app.apps[a].tabs[b].active),a="/"+a+"/"+b+"/"+c+"!"+(void 0==e?app.apps[a].tabs[b].views[c].state:e)):a="/"+a+"/"+b+"!"+(void 0==e?app.apps[a].tabs[b].state:e)):a="/"+a+"!"+(void 0==e?app.apps[a].state:e);location.hash=a}
+function appRoute(){if(params=decodeURI(location.hash).match(/^#\/(\w+)\/?(\w+)?\/?(\w+)?!((\d+)\/([^\/]+)\/(.*))$/)){app.current.app=params[1];app.current.tab=params[2];app.current.view=params[3];app.apps[app.current.app].state?(app.apps[app.current.app].state=params[4],app.current.scrollPos=app.apps[app.current.app].scrollPos):app.apps[app.current.app].tabs[app.current.tab].state?(app.apps[app.current.app].tabs[app.current.tab].state=params[4],app.apps[app.current.app].active=app.current.tab,app.current.scrollPos=
+app.apps[app.current.app].tabs[app.current.tab].scrollPos):app.apps[app.current.app].tabs[app.current.tab].views[app.current.view].state&&(app.apps[app.current.app].tabs[app.current.tab].views[app.current.view].state=params[4],app.apps[app.current.app].active=app.current.tab,app.apps[app.current.app].tabs[app.current.tab].active=app.current.view,app.current.scrollPos=app.apps[app.current.app].tabs[app.current.tab].views[app.current.view].scrollPos);app.current.page=parseInt(params[5]);app.current.filter=
+params[6];app.current.search=params[7];appPrepare(app.current.scrollPos);if("Playback"==app.current.app)sendAPI({cmd:"MPD_API_GET_CURRENT_SONG"},songChange);else if("Queue"==app.current.app){document.getElementById("QueueList").classList.add("opacity05");app.last.app!=app.current.app&&2>app.current.search.length&&setPagination(app.current.page);for(var a=document.getElementById("searchqueuetag").getElementsByTagName("button"),b=0;b<a.length;b++)a[b].classList.remove("active"),a[b].innerText==app.current.filter&&
+(a[b].classList.add("active"),document.getElementById("searchqueuetagdesc").innerText=a[b].innerText);getQueue()}else if("Browse"==app.current.app&&"Playlists"==app.current.tab)document.getElementById("BrowsePlaylistsList").classList.add("opacity05"),sendAPI({cmd:"MPD_API_GET_PLAYLISTS",data:{offset:app.current.page,filter:app.current.filter}},parsePlaylists),doSetFilterLetter("BrowsePlaylistsFilter");else if("Browse"==app.current.app&&"Database"==app.current.tab&&"Artist"==app.current.view)document.getElementById("BrowseDatabaseArtistList").classList.add("opacity05"),
+sendAPI({cmd:"MPD_API_GET_ARTISTS",data:{offset:app.current.page,filter:app.current.filter}},parseListDBtags),doSetFilterLetter("BrowseDatabaseFilter");else if("Browse"==app.current.app&&"Database"==app.current.tab&&"Album"==app.current.view)document.getElementById("BrowseDatabaseAlbumCards").classList.add("opacity05"),sendAPI({cmd:"MPD_API_GET_ARTISTALBUMS",data:{offset:app.current.page,filter:app.current.filter,albumartist:app.current.search}},parseListDBtags),doSetFilterLetter("BrowseDatabaseFilter");
+else if("Browse"==app.current.app&&"Filesystem"==app.current.tab){document.getElementById("BrowseFilesystemList").classList.add("opacity05");sendAPI({cmd:"MPD_API_GET_FILESYSTEM",data:{offset:app.current.page,path:app.current.search?app.current.search:"/",filter:app.current.filter}},parseFilesystem);app.current.search?document.getElementById("BrowseFilesystemAddAllSongs").removeAttribute("disabled"):document.getElementById("BrowseFilesystemAddAllSongs").setAttribute("disabled","disabled");a='<li class="breadcrumb-item"><a data-uri="">root</a></li>';
+var c=app.current.search.split("/"),e=c.length,d="";for(b=0;b<e;b++){if(e-1==b){a+='<li class="breadcrumb-item active">'+c[b]+"</li>";break}d+=c[b];a+='<li class="breadcrumb-item"><a data-uri="'+d+'">'+c[b]+"</a></li>";d+="/"}b=document.getElementById("BrowseBreadcrumb");b.innerHTML=a;a=b.getElementsByTagName("a");c=a.length;for(b=0;b<c;b++)a[b].addEventListener("click",function(){appGoto("Browse","Filesystem",void 0,"0/"+app.current.filter+"/"+this.getAttribute("data-uri"))},!1);doSetFilterLetter("BrowseFilesystemFilter")}else if("Search"==
+app.current.app)for(document.getElementById("searchstr2").focus(),document.getElementById("SearchList").classList.add("opacity05"),app.last.app!=app.current.app&&(""!=app.current.search?document.getElementById("SearchList").getElementsByTagName("tbody")[0].innerHTML='<tr><td><span class="material-icons">search</span></td><td colspan="5">Searching...</td></tr>':setPagination(app.current.page),document.getElementById("searchstr2").value=app.current.search),2<=app.current.search.length?sendAPI({cmd:"MPD_API_SEARCH",
+data:{mpdtag:app.current.filter,offset:app.current.page,searchstr:app.current.search}},parseSearch):(document.getElementById("SearchList").getElementsByTagName("tbody")[0].innerHTML="",document.getElementById("searchAddAllSongs").setAttribute("disabled","disabled"),document.getElementById("panel-heading-search").innerText="",setPagination(app.current.page),document.getElementById("SearchList").classList.remove("opacity05")),a=document.getElementById("searchtags2").getElementsByTagName("button"),c=
+a.length,b=0;b<c;b++)a[b].classList.remove("active"),a[b].innerText==app.current.filter&&(a[b].classList.add("active"),document.getElementById("searchtags2desc").innerText=a[b].innerText);else appGoto("Playback");app.last.app=app.current.app;app.last.tab=app.current.tab;app.last.view=app.current.view}else appGoto("Playback")}
 function appInit(){getSettings();sendAPI({cmd:"MPD_API_GET_OUTPUTNAMES"},parseOutputnames);webSocketConnect();domCache.volumeBar.value=0;domCache.volumeBar.addEventListener("change",function(a){sendAPI({cmd:"MPD_API_SET_VOLUME",data:{volume:domCache.volumeBar.value}})},!1);domCache.progressBar.value=0;domCache.progressBar.addEventListener("change",function(a){current_song&&0<=current_song.currentSongId&&sendAPI({cmd:"MPD_API_SET_SEEK",data:{songid:current_song.currentSongId,seek:Math.ceil(domCache.progressBar.value/
 100*current_song.totalTime)}})},!1);document.getElementById("modalAbout").addEventListener("shown.bs.modal",function(){sendAPI({cmd:"MPD_API_GET_STATS"},parseStats)});document.getElementById("modalSettings").addEventListener("shown.bs.modal",function(){getSettings();document.getElementById("settingsFrm").classList.remove("was-validated");document.getElementById("inputCrossfade").classList.remove("is-invalid");document.getElementById("inputMixrampdb").classList.remove("is-invalid");document.getElementById("inputMixrampdelay").classList.remove("is-invalid")});
 document.getElementById("modalAddstream").addEventListener("shown.bs.modal",function(){document.getElementById("streamurl").focus()});document.getElementById("addstreamFrm").addEventListener("submit",function(){addStream()});document.getElementById("mainMenu").addEventListener("shown.bs.dropdown",function(){var a=document.getElementById("inputSearch");a.value="";a.focus()});document.getElementById("inputSearch").addEventListener("click",function(a){a.stopPropagation()});addFilterLetter("BrowseFilesystemFilterLetters");
@@ -50,35 +52,39 @@ a.data.totalTime;current_song.currentSongId=a.data.currentsongid;var b=Math.floo
 e[0].classList.remove("material-icons"),e[0].innerText=c.getAttribute("data-songpos"),c.classList.remove("font-weight-bold"));if(c=document.getElementById("queueTrackId"+a.data.currentsongid))e=c.getElementsByTagName("td"),e[4].innerText=b,e[0].classList.add("material-icons"),e[0].innerText="play_arrow",c.classList.add("font-weight-bold");void 0!=last_state&&a.data.queue_version==last_state.data.queue_version||sendAPI({cmd:"MPD_API_GET_CURRENT_SONG"},songChange);b=a.data.outputs.length;for(c=0;c<
 b;c++)toggleBtn("btnoutput"+a.data.outputs[c].id,a.data.outputs[c].state);last_state=a}}function getQueue(){2<=app.current.search.length?sendAPI({cmd:"MPD_API_SEARCH_QUEUE",data:{mpdtag:app.current.filter,offset:app.current.page,searchstr:app.current.search}},parseQueue):sendAPI({cmd:"MPD_API_GET_QUEUE",data:{offset:app.current.page}},parseQueue)}
 function parseQueue(a){if("Queue"===app.current.app){0<a.totalTime?document.getElementById("panel-heading-queue").innerText=a.totalEntities+" Songs \u2013 "+beautifyDuration(a.totalTime):0<a.totalEntities?document.getElementById("panel-heading-queue").innerText=a.totalEntities+" Songs":document.getElementById("panel-heading-queue").innerText="";for(var b=a.data.length,c=document.getElementById(app.current.app+"List").getElementsByTagName("tbody")[0],e=c.getElementsByTagName("tr"),d=0;d<b;d++)if(!e[d]||
-e[d].getAttribute("data-trackid")!=a.data[d].id){var g=Math.floor(a.data[d].duration/60),f=a.data[d].duration-60*g;g=g+":"+(10>f?"0":"")+f;f=document.createElement("tr");f.setAttribute("data-trackid",a.data[d].id);f.setAttribute("id","queueTrackId"+a.data[d].id);f.setAttribute("data-songpos",a.data[d].pos+1);f.setAttribute("data-duration",g);f.innerHTML="<td>"+(a.data[d].pos+1)+"</td><td>"+a.data[d].title+"</td><td>"+a.data[d].artist+"</td><td>"+a.data[d].album+"</td><td>"+g+'</td><td><a href="#" class="material-icons color-darkgrey">playlist_add</a></td>';
-d<e.length?e[d].replaceWith(f):c.append(f)}for(d=e.length-1;d>=b;d--)e[d].remove();"queuesearch"==a.type&&0==b?c.innerHTML='<tr><td><span class="material-icons">error_outline</span></td><td colspan="5">No results, please refine your search!</td></tr>':"queue"==a.type&&0==b&&(c.innerHTML='<tr><td><span class="material-icons">error_outline</span></td><td colspan="5">Empty queue</td></tr>');setPagination(a.totalEntities);document.getElementById("QueueList").classList.remove("opacity05")}}
-function parseSearch(a){"Search"===app.current.app&&(document.getElementById("panel-heading-search").innerHTML=a.totalEntities+" Songs found",0<a.totalEntities?document.getElementById("searchAddAllSongs").removeAttribute("disabled"):document.getElementById("searchAddAllSongs").setAttribute("disabled","disabled"),parseFilesystem(a))}
-function parseFilesystem(a){if("Browse"===app.current.app||"Filesystem"===app.current.tab||"Search"===app.current.app){for(var b=a.data.length,c=document.getElementById(app.current.app+(void 0==app.current.tab?"":app.current.tab)+"List").getElementsByTagName("tbody")[0],e=c.getElementsByTagName("tr"),d=0;d<b;d++){var g=encodeURI(a.data[d].uri);if(!e[d]||e[d].getAttribute("data-uri")!=g){var f=document.createElement("tr");f.setAttribute("data-type",a.data[d].type);f.setAttribute("data-uri",g);f.setAttribute("data-name",
-a.data[d].name);switch(a.data[d].type){case "dir":f.innerHTML='<td><span class="material-icons">folder_open</span></td><td colspan="4">'+a.data[d].name+'</td><td><a href="#" class="material-icons color-darkgrey">playlist_add</a></td>';break;case "song":g=Math.floor(a.data[d].duration/60);var h=a.data[d].duration-60*g;f.innerHTML='<td><span class="material-icons">music_note</span></td><td>'+a.data[d].title+"</td><td>"+a.data[d].artist+"</td><td>"+a.data[d].album+"</td><td>"+g+":"+(10>h?"0":"")+h+'</td><td><a href="#" class="material-icons color-darkgrey">playlist_add</a></td>';
-break;case "plist":f.innerHTML='<td><span class="material-icons">list</span></td><td colspan="4">'+a.data[d].name+'</td><td><a href="#" class="material-icons color-darkgrey">playlist_add</a></td>'}d<e.length?e[d].replaceWith(f):c.append(f)}}for(d=e.length-1;d>=b;d--)e[d].remove();setPagination(a.totalEntities);0==b&&(c.innerHTML='<tr><td><span class="material-icons">error_outline</span></td><td colspan="5">No results</td></tr>');document.getElementById(app.current.app+(void 0==app.current.tab?"":
+e[d].getAttribute("data-trackid")!=a.data[d].id){var f=Math.floor(a.data[d].duration/60),g=a.data[d].duration-60*f;f=f+":"+(10>g?"0":"")+g;g=document.createElement("tr");g.setAttribute("data-trackid",a.data[d].id);g.setAttribute("id","queueTrackId"+a.data[d].id);g.setAttribute("data-songpos",a.data[d].pos+1);g.setAttribute("data-duration",f);g.setAttribute("data-uri",a.data[d].uri);g.innerHTML="<td>"+(a.data[d].pos+1)+"</td><td>"+a.data[d].title+"</td><td>"+a.data[d].artist+"</td><td>"+a.data[d].album+
+"</td><td>"+f+'</td><td><a href="#" class="material-icons color-darkgrey">playlist_add</a></td>';d<e.length?e[d].replaceWith(g):c.append(g)}for(d=e.length-1;d>=b;d--)e[d].remove();"queuesearch"==a.type&&0==b?c.innerHTML='<tr><td><span class="material-icons">error_outline</span></td><td colspan="5">No results, please refine your search!</td></tr>':"queue"==a.type&&0==b&&(c.innerHTML='<tr><td><span class="material-icons">error_outline</span></td><td colspan="5">Empty queue</td></tr>');setPagination(a.totalEntities);
+document.getElementById("QueueList").classList.remove("opacity05")}}function parseSearch(a){"Search"===app.current.app&&(document.getElementById("panel-heading-search").innerHTML=a.totalEntities+" Songs found",0<a.totalEntities?document.getElementById("searchAddAllSongs").removeAttribute("disabled"):document.getElementById("searchAddAllSongs").setAttribute("disabled","disabled"),parseFilesystem(a))}
+function parseFilesystem(a){if("Browse"===app.current.app||"Filesystem"===app.current.tab||"Search"===app.current.app){for(var b=a.data.length,c=document.getElementById(app.current.app+(void 0==app.current.tab?"":app.current.tab)+"List").getElementsByTagName("tbody")[0],e=c.getElementsByTagName("tr"),d=0;d<b;d++){var f=encodeURI(a.data[d].uri);if(!e[d]||e[d].getAttribute("data-uri")!=f){var g=document.createElement("tr");g.setAttribute("data-type",a.data[d].type);g.setAttribute("data-uri",f);g.setAttribute("data-name",
+a.data[d].name);switch(a.data[d].type){case "dir":g.innerHTML='<td><span class="material-icons">folder_open</span></td><td colspan="4">'+a.data[d].name+'</td><td><a href="#" class="material-icons color-darkgrey">playlist_add</a></td>';break;case "song":f=Math.floor(a.data[d].duration/60);var h=a.data[d].duration-60*f;g.innerHTML='<td><span class="material-icons">music_note</span></td><td>'+a.data[d].title+"</td><td>"+a.data[d].artist+"</td><td>"+a.data[d].album+"</td><td>"+f+":"+(10>h?"0":"")+h+'</td><td><a href="#" class="material-icons color-darkgrey">playlist_add</a></td>';
+break;case "plist":g.innerHTML='<td><span class="material-icons">list</span></td><td colspan="4">'+a.data[d].name+'</td><td><a href="#" class="material-icons color-darkgrey">playlist_add</a></td>'}d<e.length?e[d].replaceWith(g):c.append(g)}}for(d=e.length-1;d>=b;d--)e[d].remove();setPagination(a.totalEntities);0==b&&(c.innerHTML='<tr><td><span class="material-icons">error_outline</span></td><td colspan="5">No results</td></tr>');document.getElementById(app.current.app+(void 0==app.current.tab?"":
 app.current.tab)+"List").classList.remove("opacity05")}}
-function parsePlaylists(a){if("Browse"===app.current.app||"Playlists"===app.current.tab){for(var b=a.data.length,c=document.getElementById(app.current.app+app.current.tab+"List").getElementsByTagName("tbody")[0],e=c.getElementsByTagName("tr"),d=0;d<b;d++){var g=encodeURI(a.data[d].uri);if(!e[d]||e[d].getAttribute("data-uri")!=g){var f=new Date(1E3*a.data[d].last_modified),h=document.createElement("tr");h.setAttribute("data-uri",g);h.setAttribute("data-type","plist");h.setAttribute("data-name",a.data[d].name);
-h.innerHTML='<td><span class="material-icons">list</span></td><td>'+a.data[d].name+"</td><td>"+f.toUTCString()+'</td><td><a href="#" class="material-icons color-darkgrey">playlist_add</a></td>';d<e.length?e[d].replaceWith(h):c.append(h)}}for(d=e.length-1;d>=b;d--)e[d].remove();setPagination(a.totalEntities);0==b&&(c.innerHTML='<tr><td><span class="material-icons">error_outline</span></td><td colspan="5">No playlists found.</td></tr>');document.getElementById(app.current.app+(void 0==app.current.tab?
+function parsePlaylists(a){if("Browse"===app.current.app||"Playlists"===app.current.tab){for(var b=a.data.length,c=document.getElementById(app.current.app+app.current.tab+"List").getElementsByTagName("tbody")[0],e=c.getElementsByTagName("tr"),d=0;d<b;d++){var f=encodeURI(a.data[d].uri);if(!e[d]||e[d].getAttribute("data-uri")!=f){var g=new Date(1E3*a.data[d].last_modified),h=document.createElement("tr");h.setAttribute("data-uri",f);h.setAttribute("data-type","plist");h.setAttribute("data-name",a.data[d].name);
+h.innerHTML='<td><span class="material-icons">list</span></td><td>'+a.data[d].name+"</td><td>"+g.toUTCString()+'</td><td><a href="#" class="material-icons color-darkgrey">playlist_add</a></td>';d<e.length?e[d].replaceWith(h):c.append(h)}}for(d=e.length-1;d>=b;d--)e[d].remove();setPagination(a.totalEntities);0==b&&(c.innerHTML='<tr><td><span class="material-icons">error_outline</span></td><td colspan="5">No playlists found.</td></tr>');document.getElementById(app.current.app+(void 0==app.current.tab?
 "":app.current.tab)+"List").classList.remove("opacity05")}}
 function parseListDBtags(a){if("Browse"===app.current.app||"Database"===app.current.tab||"Artist"===app.current.view)if("AlbumArtist"==a.tagtype){document.getElementById("BrowseDatabaseAlbumCards").classList.add("hide");document.getElementById("BrowseDatabaseArtistList").classList.remove("hide");document.getElementById("btnBrowseDatabaseArtist").classList.add("hide");for(var b=a.data.length,c=document.getElementById(app.current.app+app.current.tab+app.current.view+"List").getElementsByTagName("tbody")[0],
-e=c.getElementsByTagName("tr"),d=0;d<b;d++){var g=encodeURI(a.data[d].value);if(!e[d]||e[d].getAttribute("data-uri")!=g){var f=document.createElement("tr");f.setAttribute("data-uri",g);f.innerHTML='<td><span class="material-icons">album</span></td><td>'+a.data[d].value+"</td>";d<e.length?e[d].replaceWith(f):c.append(f)}}for(d=e.length-1;d>=b;d--)e[d].remove();setPagination(a.totalEntities);0==b&&(c.innerHTML='<tr><td><span class="material-icons">error_outline</span></td><td colspan="5">No entries found.</td></tr>');
-document.getElementById("BrowseDatabaseArtistList").classList.remove("opacity05")}else if("Album"==a.tagtype){document.getElementById("BrowseDatabaseAlbumCards").classList.remove("hide");document.getElementById("BrowseDatabaseArtistList").classList.add("hide");document.getElementById("btnBrowseDatabaseArtist").classList.remove("hide");b=a.data.length;c=document.getElementById("BrowseDatabaseAlbumCards");e=c.querySelectorAll(".col-md");for(d=0;d<b;d++)g=genId(a.data[d].value),e[d]&&e[d].getAttribute("id")==
-g||(f=document.createElement("div"),f.classList.add("col-md"),f.classList.add("mr-0"),f.setAttribute("id",g),f.innerHTML='<div class="card mb-4" id="card'+g+'"> <a href="#"><img class="card-img-top" src="" ></a> <div class="card-body">  <h5 class="card-title">'+a.searchstr+'</h5>  <h4 class="card-title">'+a.data[d].value+'</h4>  <table class="table table-sm table-hover" id="tbl'+g+'"><tbody></tbody></table </div></div>',d<e.length?e[d].replaceWith(f):c.append(f),sendAPI({cmd:"MPD_API_GET_ARTISTALBUMTITLES",
+e=c.getElementsByTagName("tr"),d=0;d<b;d++){var f=encodeURI(a.data[d].value);if(!e[d]||e[d].getAttribute("data-uri")!=f){var g=document.createElement("tr");g.setAttribute("data-uri",f);g.innerHTML='<td><span class="material-icons">album</span></td><td>'+a.data[d].value+"</td>";d<e.length?e[d].replaceWith(g):c.append(g)}}for(d=e.length-1;d>=b;d--)e[d].remove();setPagination(a.totalEntities);0==b&&(c.innerHTML='<tr><td><span class="material-icons">error_outline</span></td><td colspan="5">No entries found.</td></tr>');
+document.getElementById("BrowseDatabaseArtistList").classList.remove("opacity05")}else if("Album"==a.tagtype){document.getElementById("BrowseDatabaseAlbumCards").classList.remove("hide");document.getElementById("BrowseDatabaseArtistList").classList.add("hide");document.getElementById("btnBrowseDatabaseArtist").classList.remove("hide");b=a.data.length;c=document.getElementById("BrowseDatabaseAlbumCards");e=c.querySelectorAll(".col-md");for(d=0;d<b;d++)f=genId(a.data[d].value),e[d]&&e[d].getAttribute("id")==
+f||(g=document.createElement("div"),g.classList.add("col-md"),g.classList.add("mr-0"),g.setAttribute("id",f),g.innerHTML='<div class="card mb-4" id="card'+f+'"> <a href="#" class="card-img-top"><img class="card-img-top" src="" ></a> <div class="card-body">  <h5 class="card-title">'+a.searchstr+'</h5>  <h4 class="card-title">'+a.data[d].value+'</h4>  <table class="table table-sm table-hover" id="tbl'+f+'"><tbody></tbody></table </div></div>',d<e.length?e[d].replaceWith(g):c.append(g),sendAPI({cmd:"MPD_API_GET_ARTISTALBUMTITLES",
 data:{albumartist:a.searchstr,album:a.data[d].value}},parseListTitles));for(d=e.length-1;d>=b;d--)e[d].remove();setPagination(a.totalEntities);document.getElementById("BrowseDatabaseAlbumCards").classList.remove("opacity05")}}
-function parseListTitles(a){if("Browse"===app.current.app||"Database"===app.current.tab||"Album"===app.current.view){var b=genId(a.album),c=document.getElementById("card"+b);b=c.getElementsByTagName("tbody")[0];var e=c.getElementsByTagName("img")[0];c=e.parentNode;e.setAttribute("src",a.cover);c.setAttribute("data-uri",encodeURI(a.data[0].uri.replace(/\/[^\/]+$/,"")));c.setAttribute("data-name",a.album);c.setAttribute("data-type","dir");e="";for(var d=a.data.length,g=0;g<d;g++)e+='<tr data-type="song" data-name="'+
-a.data[g].title+'" data-uri="'+encodeURI(a.data[g].uri)+'"><td>'+a.data[g].track+"</td><td>"+a.data[g].title+'</td><td><a href="#" class="material-icons color-darkgrey">playlist_add</a></td></tr>';b.innerHTML=e;c.addEventListener("click",function(a){a.preventDefault();showMenu(this)},!1);b.parentNode.addEventListener("click",function(a){"TD"==a.target.nodeName?appendQueue("song",decodeURI(a.target.parentNode.getAttribute("data-uri")),a.target.parentNode.getAttribute("data-name")):"A"==a.target.nodeName&&
+function parseListTitles(a){if("Browse"===app.current.app||"Database"===app.current.tab||"Album"===app.current.view){var b=genId(a.album),c=document.getElementById("card"+b);b=c.getElementsByTagName("tbody")[0];var e=c.getElementsByTagName("img")[0];c=e.parentNode;e.setAttribute("src",a.cover);c.setAttribute("data-uri",encodeURI(a.data[0].uri.replace(/\/[^\/]+$/,"")));c.setAttribute("data-name",a.album);c.setAttribute("data-type","dir");e="";for(var d=a.data.length,f=0;f<d;f++)e+='<tr data-type="song" data-name="'+
+a.data[f].title+'" data-uri="'+encodeURI(a.data[f].uri)+'"><td>'+a.data[f].track+"</td><td>"+a.data[f].title+'</td><td><a href="#" class="material-icons color-darkgrey">playlist_add</a></td></tr>';b.innerHTML=e;c.addEventListener("click",function(a){a.preventDefault();showMenu(this)},!1);b.parentNode.addEventListener("click",function(a){"TD"==a.target.nodeName?appendQueue("song",decodeURI(a.target.parentNode.getAttribute("data-uri")),a.target.parentNode.getAttribute("data-name")):"A"==a.target.nodeName&&
 (a.preventDefault(),showMenu(a.target))},!1)}}
-function setPagination(a){var b=Math.ceil(a/settings.max_elements_per_page),c=app.current.app+(void 0==app.current.tab?"":app.current.tab);0==b&&(b=1);for(var e=["PaginationTop","PaginationBottom"],d=0;2>d;d++){document.getElementById(c+e[d]+"Page").innerText=app.current.page/settings.max_elements_per_page+1+" / "+b;if(1<b){document.getElementById(c+e[d]+"Page").removeAttribute("disabled");for(var g="",f=0;f<b;f++)g+='<button data-page="'+f*settings.max_elements_per_page+'" type="button" class="mr-1 mb-1 btn-sm btn btn-secondary">'+
-(f+1)+"</button>";document.getElementById(c+e[d]+"Pages").innerHTML=g}else document.getElementById(c+e[d]+"Page").setAttribute("disabled","disabled");a>app.current.page+settings.max_elements_per_page?(document.getElementById(c+e[d]+"Next").removeAttribute("disabled"),document.getElementById(c+"ButtonsBottom").classList.remove("hide")):(document.getElementById(c+e[d]+"Next").setAttribute("disabled","disabled"),document.getElementById(c+"ButtonsBottom").classList.add("hide"));0<app.current.page?(document.getElementById(c+
+function setPagination(a){var b=Math.ceil(a/settings.max_elements_per_page),c=app.current.app+(void 0==app.current.tab?"":app.current.tab);0==b&&(b=1);for(var e=["PaginationTop","PaginationBottom"],d=0;2>d;d++){document.getElementById(c+e[d]+"Page").innerText=app.current.page/settings.max_elements_per_page+1+" / "+b;if(1<b){document.getElementById(c+e[d]+"Page").removeAttribute("disabled");for(var f="",g=0;g<b;g++)f+='<button data-page="'+g*settings.max_elements_per_page+'" type="button" class="mr-1 mb-1 btn-sm btn btn-secondary">'+
+(g+1)+"</button>";document.getElementById(c+e[d]+"Pages").innerHTML=f}else document.getElementById(c+e[d]+"Page").setAttribute("disabled","disabled");a>app.current.page+settings.max_elements_per_page?(document.getElementById(c+e[d]+"Next").removeAttribute("disabled"),document.getElementById(c+"ButtonsBottom").classList.remove("hide")):(document.getElementById(c+e[d]+"Next").setAttribute("disabled","disabled"),document.getElementById(c+"ButtonsBottom").classList.add("hide"));0<app.current.page?(document.getElementById(c+
 e[d]+"Prev").removeAttribute("disabled"),document.getElementById(c+"ButtonsBottom").classList.remove("hide")):document.getElementById(c+e[d]+"Prev").setAttribute("disabled","disabled")}}
 function appendQueue(a,b,c){switch(a){case "song":sendAPI({cmd:"MPD_API_ADD_TRACK",data:{uri:b}});showNotification('"'+c+'" added',"","","success");break;case "dir":sendAPI({cmd:"MPD_API_ADD_TRACK",data:{uri:b}});showNotification('"'+c+'" added',"","","success");break;case "plist":sendAPI({cmd:"MPD_API_ADD_PLAYLIST",data:{plist:b}}),showNotification('"'+c+'" added',"","","success")}}
 function appendAfterQueue(a,b,c,e){switch(a){case "song":sendAPI({cmd:"MPD_API_ADD_TRACK_AFTER",data:{uri:b,to:c}});showNotification('"'+e+'" added to pos '+c,"","","success");break;case "dir":sendAPI({cmd:"MPD_API_ADD_TRACK_AFTER",data:{uri:b,to:c}}),showNotification('"'+e+'" added to pos '+c,"","","success")}}
 function replaceQueue(a,b,c){switch(a){case "song":sendAPI({cmd:"MPD_API_REPLACE_TRACK",data:{uri:b}});showNotification('"'+c+'" replaced',"","","success");break;case "dir":sendAPI({cmd:"MPD_API_REPLACE_TRACK",data:{uri:b}});showNotification('"'+c+'" replaced',"","","success");break;case "plist":sendAPI({cmd:"MPD_API_REPLACE_PLAYLIST",data:{plist:b}}),showNotification('"'+c+'" replaced',"","","success")}}
-function showMenu(a){var b=a.getAttribute("data-type"),c=decodeURI(a.getAttribute("data-uri")),e=a.getAttribute("data-name");if(null==b||null==c)b=a.parentNode.parentNode.getAttribute("data-type"),c=decodeURI(a.parentNode.parentNode.getAttribute("data-uri")),e=a.parentNode.parentNode.getAttribute("data-name");var d="";"Browse"==app.current.app&&"Filesystem"==app.current.tab||"Search"==app.current.app||"Browse"==app.current.app&&"Database"==app.current.tab&&"Album"==app.current.view?d+="<a class=\"dropdown-item\" href=\"#\" data-href=\"{'cmd': 'appendQueue', 'options': ['"+
-b+"','"+c+"','"+e+"']}\">Append to queue</a>"+("plist"!=b?"<a class=\"dropdown-item\" href=\"#\" data-href=\"{'cmd': 'appendAfterQueue', 'options': ['"+b+"','"+c+"',"+last_state.data.nextsongpos+",'"+e+"']}\">Add after current playing song</a>":"")+"<a class=\"dropdown-item\" href=\"#\" data-href=\"{'cmd': 'replaceQueue', 'options': ['"+b+"','"+c+"','"+e+"']}\">Replace queue</a>":"Browse"==app.current.app&&"Playlists"==app.current.tab?d+="<a class=\"dropdown-item\" href=\"#\" data-href=\"{'cmd': 'appendQueue', 'options': ['"+
-b+"','"+c+"','"+e+"']}\">Append to queue</a><a class=\"dropdown-item\" href=\"#\" data-href=\"{'cmd': 'replaceQueue', 'options': ['"+b+"','"+c+"','"+e+"']}\">Replace queue</a><div class=\"dropdown-divider\"></div><a class=\"dropdown-item\" href=\"#\" data-href=\"{'cmd': 'delPlaylist', 'options': ['"+c+"','"+e+"']}\">Delete playlist</a>":"Queue"==app.current.app&&(d+="<a class=\"dropdown-item\" href=\"#\" data-href=\"{'cmd': 'delQueueSong', 'options': ['single',"+a.parentNode.parentNode.getAttribute("data-trackid")+
-"]}\">Remove</a><a class=\"dropdown-item\" href=\"#\" data-href=\"{'cmd': 'delQueueSong', 'options': ['range',0,"+a.parentNode.parentNode.getAttribute("data-songpos")+"]}\">Remove all upwards</a><a class=\"dropdown-item\" href=\"#\" data-href=\"{'cmd': 'delQueueSong', 'options': ['range',"+(parseInt(a.parentNode.parentNode.getAttribute("data-songpos"))-1)+',-1]}">Remove all downwards</a>');void 0==a.Popover&&(new Popover(a,{trigger:"click",template:'<div class="popover" role="tooltip"><div class="arrow"></div><div class="popover-content">'+
-d+"</div></div>"}),b=a.Popover,a.addEventListener("shown.bs.popover",function(a){document.querySelector(".popover-content").addEventListener("click",function(a){a.preventDefault();a.stopPropagation();a=JSON.parse(a.target.getAttribute("data-href").replace(/'/g,'"'));if("function"===typeof window[a.cmd])switch(a.cmd){case "sendAPI":sendAPI.apply(null,$jscomp.arrayFromIterable(a.options));break;default:window[a.cmd].apply(null,$jscomp.arrayFromIterable(a.options))}},!1)},!1),b.show())}
+function songDetails(a){sendAPI({cmd:"MPD_API_GET_SONGDETAILS",data:{uri:a}},parseSongDetails);modalSongDetails.show()}
+function parseSongDetails(a){var b=document.getElementById("modalSongDetails");b.querySelector(".album-cover").style.backgroundImage='url("'+a.data.cover+'")';b.getElementsByTagName("h1")[0].innerText=a.data.title;b=b.getElementsByTagName("tr");for(var c=b.length,e=0;e<c;e++){var d=b[e].getAttribute("data-name"),f=a.data[d];"duration"==d?(d=Math.floor(f/60),f-=60*d,f=d+":"+(10>f?"0":"")+f):"uri"==d&&(f='<a class="text-success" href="/library/'+f+'">'+f+"</a>");b[e].getElementsByTagName("td")[1].innerHTML=
+f}}
+function showMenu(a){var b=a.getAttribute("data-type"),c=decodeURI(a.getAttribute("data-uri")),e=a.getAttribute("data-name");if(null==b||null==c)b=a.parentNode.parentNode.getAttribute("data-type"),c=decodeURI(a.parentNode.parentNode.getAttribute("data-uri")),e=a.parentNode.parentNode.getAttribute("data-name");var d="";"Browse"==app.current.app&&"Filesystem"==app.current.tab||"Search"==app.current.app||"Browse"==app.current.app&&"Database"==app.current.tab&&"Album"==app.current.view?d+="<a class=\"dropdown-item\" href=\"#\" data-href=\"{'cmd': 'appendQueue', 'options': ['"+b+
+"','"+c+"','"+e+"']}\">Append to queue</a>"+("plist"!=b?"<a class=\"dropdown-item\" href=\"#\" data-href=\"{'cmd': 'appendAfterQueue', 'options': ['"+b+"','"+c+"',"+last_state.data.nextsongpos+",'"+e+"']}\">Add after current playing song</a>":"")+"<a class=\"dropdown-item\" href=\"#\" data-href=\"{'cmd': 'replaceQueue', 'options': ['"+b+"','"+c+"','"+e+"']}\">Replace queue</a>"+("dir"!=b?'<div class="dropdown-divider"></div>':"")+("song"==b?"<a class=\"dropdown-item\" data-href=\"{'cmd': 'songDetails', 'options': ['"+
+c+'\']}" href="#">Songdetails</a>':""):"Browse"==app.current.app&&"Playlists"==app.current.tab?d+="<a class=\"dropdown-item\" href=\"#\" data-href=\"{'cmd': 'appendQueue', 'options': ['"+b+"','"+c+"','"+e+"']}\">Append to queue</a><a class=\"dropdown-item\" href=\"#\" data-href=\"{'cmd': 'replaceQueue', 'options': ['"+b+"','"+c+"','"+e+"']}\">Replace queue</a><div class=\"dropdown-divider\"></div><a class=\"dropdown-item\" href=\"#\" data-href=\"{'cmd': 'delPlaylist', 'options': ['"+c+"','"+e+"']}\">Delete playlist</a>":
+"Queue"==app.current.app&&(d+="<a class=\"dropdown-item\" href=\"#\" data-href=\"{'cmd': 'delQueueSong', 'options': ['single',"+a.parentNode.parentNode.getAttribute("data-trackid")+"]}\">Remove</a><a class=\"dropdown-item\" href=\"#\" data-href=\"{'cmd': 'delQueueSong', 'options': ['range',0,"+a.parentNode.parentNode.getAttribute("data-songpos")+"]}\">Remove all upwards</a><a class=\"dropdown-item\" href=\"#\" data-href=\"{'cmd': 'delQueueSong', 'options': ['range',"+(parseInt(a.parentNode.parentNode.getAttribute("data-songpos"))-
+1)+",-1]}\">Remove all downwards</a><div class=\"dropdown-divider\"></div><a class=\"dropdown-item\" data-href=\"{'cmd': 'songDetails', 'options': ['"+c+'\']}" href="#">Songdetails</a>');void 0==a.Popover&&(new Popover(a,{trigger:"click",template:'<div class="popover" role="tooltip"><div class="arrow"></div><div class="popover-content">'+d+"</div></div>"}),b=a.Popover,a.addEventListener("shown.bs.popover",function(a){document.querySelector(".popover-content").addEventListener("click",function(a){a.preventDefault();
+a.stopPropagation();a=JSON.parse(a.target.getAttribute("data-href").replace(/'/g,'"'));if("function"===typeof window[a.cmd])switch(a.cmd){case "sendAPI":sendAPI.apply(null,$jscomp.arrayFromIterable(a.options));break;default:window[a.cmd].apply(null,$jscomp.arrayFromIterable(a.options))}},!1)},!1),b.show())}
 function sendAPI(a,b){var c=new XMLHttpRequest;c.open("POST","/api",!0);c.setRequestHeader("Content-type","application/json");c.onreadystatechange=function(){4==c.readyState&&void 0!=b&&"function"==typeof b&&""!=c.responseText&&b(JSON.parse(c.responseText))};c.send(JSON.stringify(a))}function openLocalPlayer(){window.open("/player.html#"+settings.mpdstream,"LocalPlayer")}function updateDB(){sendAPI({cmd:"MPD_API_UPDATE_DB"});showNotification("Updating MPD Database...","","","success")}
 function clickPlay(){"play"!=playstate?sendAPI({cmd:"MPD_API_SET_PLAY"}):sendAPI({cmd:"MPD_API_SET_PAUSE"})}function clickStop(){sendAPI({cmd:"MPD_API_SET_STOP"})}function clickPrev(){sendAPI({cmd:"MPD_API_SET_PREV"})}function clickNext(){sendAPI({cmd:"MPD_API_SET_NEXT"})}function delQueueSong(a,b,c){"range"==a?sendAPI({cmd:"MPD_API_RM_RANGE",data:{start:b,end:c}}):"single"==a&&sendAPI({cmd:"MPD_API_RM_TRACK",data:{track:b}})}
 function delPlaylist(a,b){sendAPI({cmd:"MPD_API_RM_PLAYLIST",data:{plist:a}});document.getElementById("BrowsePlaylistsList").querySelector("tr[data-uri="+encodeURI(a)+"]").remove()}
@@ -86,7 +92,7 @@ function confirmSettings(){var a=!0,b=document.getElementById("inputCrossfade");
 a=!1):b.value=c);1==a?(a=document.getElementById("selectReplaygain"),sendAPI({cmd:"MPD_API_SET_SETTINGS",data:{consume:document.getElementById("btnConsume").classList.contains("active")?1:0,random:document.getElementById("btnRandom").classList.contains("active")?1:0,single:document.getElementById("btnSingle").classList.contains("active")?1:0,repeat:document.getElementById("btnRepeat").classList.contains("active")?1:0,replaygain:a.options[a.selectedIndex].value,crossfade:document.getElementById("inputCrossfade").value,
 mixrampdb:document.getElementById("inputMixrampdb").value,mixrampdelay:document.getElementById("inputMixrampdelay").vaue,notificationWeb:document.getElementById("btnnotifyWeb").classList.contains("active")?1:0,notificationPage:document.getElementById("btnnotifyPage").classList.contains("active")?1:0}},getSettings),modalSettings.hide()):document.getElementById("settingsFrm").classList.add("was-validated")}
 function addAllFromBrowse(){sendAPI({cmd:"MPD_API_ADD_TRACK",data:{uri:app.current.search}});showNotification("Added all songs","","","success")}function addAllFromSearch(){2<=app.current.search.length&&(sendAPI({cmd:"MPD_API_SEARCH_ADD",data:{filter:app.current.filter,searchstr:app.current.search}}),showNotification("Added "+parseInt(document.getElementById("panel-heading-search").innerText)+" songs from search","","","success"))}
-function scrollToTop(){document.body.scrollTop=0;document.documentElement.scrollTop=0}function gotoPage(a){switch(a){case "next":app.current.page+=settings.max_elements_per_page;break;case "prev":app.current.page-=settings.max_elements_per_page;0>=app.current.page&&(app.current.page=0);break;default:app.current.page=a}appGoto(app.current.app,app.current.tab,app.current.view,app.current.page+"/"+app.current.filter+"/"+app.current.search)}
+function scrollTo(a){document.body.scrollTop=a;document.documentElement.scrollTop=a}function gotoPage(a){switch(a){case "next":app.current.page+=settings.max_elements_per_page;break;case "prev":app.current.page-=settings.max_elements_per_page;0>=app.current.page&&(app.current.page=0);break;default:app.current.page=a}appGoto(app.current.app,app.current.tab,app.current.view,app.current.page+"/"+app.current.filter+"/"+app.current.search)}
 function addStream(){var a=document.getElementById("streamurl");""!=a.value&&sendAPI({cmd:"MPD_API_ADD_TRACK",data:{uri:a.value}});a.value="";modalAddstream.hide()}function saveQueue(){var a=document.getElementById("playlistname");""!=a.value&&sendAPI({cmd:"MPD_API_SAVE_QUEUE",data:{plist:a.value}});a.value="";modalSavequeue.hide()}
 function showNotification(a,b,c,e){1==settings.notificationWeb&&(b=new Notification(a,{icon:"assets/favicon.ico",body:b}),setTimeout(function(a){a.close()},3E3,b));1==settings.notificationPage&&(document.getElementById("alertBox")?b=document.getElementById("alertBox"):(b=document.createElement("div"),b.setAttribute("id","alertBox")),b.classList.add("alert","alert-"+e),b.innerHTML="<div><strong>"+a+"</strong>"+c+"</div>",document.getElementsByTagName("main")[0].append(b),document.getElementById("alertBox").classList.add("alertBoxActive"),
 alertTimeout&&clearTimeout(alertTimeout),alertTimeout=setTimeout(function(){document.getElementById("alertBox")&&document.getElementById("alertBox").classList.remove("alertBoxActive");setTimeout(function(){document.getElementById("alertBox").remove()},600)},3E3))}function notificationsSupported(){return"Notification"in window}