Browse database view completed

htdocs/css/mpd.css

@@ -184,3 +184,15 @@ main {
  min-width:28px;
 }
 
+.col-md {
+ min-width:250px;
+ max-width:350px;
+}
+
+.card-img-top {
+ min-height:250px;
+ background-image:url('/assets/coverimage-notavailable.png');
+ background-repeat:no-repeat;
+ background-color:#d45500;
+ cursor:pointer;
+}

htdocs/index.html

@@ -30,7 +30,7 @@
             </form>
             <div class="dropdown-divider"></div>
             <a id="nav-addstream" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#addstream">Add Stream</a>
-            <a id="nav-updatedb" class="dropdown-item text-light bg-dark" href="#" onclick="updateDB();">Update Database</a>
+            <a id="nav-updatedb" class="dropdown-item text-light bg-dark" href="#" onclick="updateDB(event);">Update Database</a>
             <a id="nav-localplayer" class="dropdown-item text-light bg-dark" href="#" data-toggle="dropdown" onclick="window.open('/player.html','LocalPlayer');">Local Player</a>
             <a id="nav-settings" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#settings">Settings</a>
             <a id="nav-about" class="dropdown-item text-light bg-dark" href="#" data-toggle="modal" data-target="#about">About</a>
@@ -266,16 +266,9 @@
       <div class="card-body hide" id="cardBrowseDatabase">
 
         <div class="btn-toolbar collapse show" id="browseDatabaseButtons" role="toolbar">
-<!--
-          <div class="btn-group mr-2 pull-right">
-            <button id="browseDatabaseAddAllSongs" class="btn btn-secondary">Add all</button>
-          </div>
           <div class="btn-group mr-2">
-            <button id="browseDatabaseFilter" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Filter</button>
+            <button id="btnBrowseDatabaseArtist" onclick="app.setLocation('#/browse/database/0/');" type="button" class="btn btn-secondary hide">&laquo; Artists</button>
-            <div class="dropdown-menu bg-dark px-2" id="browseDatabaseFilterLetters">
           </div>
-          </div>
--->
           <div id="browseDatabasePaginationTop" class="btn-group mr-2">
             <button onclick="gotoPage('prev',this,event)" id="browseDatabasePaginationTopPrev" title="Previous Page" type="button" class="btn btn-secondary">&laquo;</button>
               <div class="input-group-append">
@@ -304,7 +297,7 @@
           </table>
         </div>
         
-        <div id="browseDatabaseCards" class="card-columns"></div>
+        <div id="browseDatabaseCards" class="row"></div>
         
         <div class="btn-toolbar" id="browseDatabaseButtonsBottom" role="toolbar">
           <div class="btn-group mr-2">

htdocs/js/mpd.js

@@ -442,6 +442,7 @@ function webSocketConnect() {
                     if (obj.tagtype == 'AlbumArtist') {
                         $('#browseDatabaseCards').addClass('hide');
                         $('#browseDatabaseList').removeClass('hide');
+                        $('#btnBrowseDatabaseArtist').addClass('hide');
                         var nrItems=0;
                         var tr=document.getElementById(current_app+'List').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
                         for (var item in obj.data) {
@@ -474,16 +475,17 @@ function webSocketConnect() {
                         $('#browseDatabaseList').addClass('hide');
                         $('#browseDatabaseCards').empty();
                         $('#browseDatabaseCards').removeClass('hide');
+                        $('#btnBrowseDatabaseArtist').removeClass('hide');
                         var nrItems=0;
                         for (var item in obj.data) {
-                          var card='<div class="card" style="width: 18rem;" uri="'+encodeURI(obj.data[item].value)+'">'+
+                          var card='<div class="col-md"><div class="card mb-4" id="'+genId(obj.data[item].value)+'">'+
-                                   ' <img class="card-img-top" src="" alt="Coverimage">'+
+                                   ' <img class="card-img-top" src="" alt="">'+
                                    ' <div class="card-body">'+
                                    '  <h5 class="card-title">'+obj.searchstr+'</h5>'+
                                    '  <h4 class="card-title">'+obj.data[item].value+'</h4>'+
-                                   '  <ul class="card-text"></ul>'+
+                                   '  <table class="table table-sm table-hover" id="tbl'+genId(obj.data[item].value)+'"><tbody></tbody></table'+
                                    ' </div>'+
-                                   '</div>';
+                                   '</div></div>';
                           $('#browseDatabaseCards').append(card);
                           socket.send('MPD_API_GET_ARTISTALBUMTITLES,' + obj.searchstr + ','+obj.data[item].value);
                         }
@@ -491,13 +493,30 @@ function webSocketConnect() {
                     }
                     break;
                 case 'listTitles':
-                    var album=$('div[uri="'+encodeURI(obj.album)+'"] > div > ul');
+                    var album=$('#'+genId(obj.album)+' > div > table > tbody');
-                    $('div[uri="'+encodeURI(obj.album)+'"] > img').attr('src','/library/'+obj.data[0].uri.replace(/\/[^\/]+$/,'\/'+coverImageFile));
+                    $('#'+genId(obj.album)+' > img').attr('src','/library/'+obj.data[0].uri.replace(/\/[^\/]+$/,'\/')+coverImageFile);
+                    $('#'+genId(obj.album)+' > img').attr('uri',obj.data[0].uri.replace(/\/[^\/]+$/,''));
+                    $('#'+genId(obj.album)+' > img').attr('data-album',encodeURI(obj.album));
                     var titleList='';
                     for (var item in obj.data) {
-                        titleList+='<li>'+obj.data[item].title+'</li>';
+                        titleList+='<tr uri="' + encodeURI(obj.data[item].uri) + '" class="song">'+
+                            '<td>'+obj.data[item].track+'</td><td>'+obj.data[item].title+'</td></tr>';
                     }
                     album.append(titleList);
+
+                    $('#'+genId(obj.album)+' > img').on({
+                        click: function() {
+                                    socket.send('MPD_API_ADD_TRACK,' + decodeURI($(this).attr('uri')));
+                                    showNotification('"'+decodeURI($(this).attr('data-album'))+'" added','','','success');
+                        }
+                    });
+                    
+                    $('#tbl'+genId(obj.album)+' > tbody > tr').on({
+                        click: function() {
+                                    socket.send('MPD_API_ADD_TRACK,' + decodeURI($(this).attr('uri')));
+                                    showNotification('"' + $('td:nth-last-child(1)', this).text() + '" added','','','success');
+                        }
+                    });
                     break;
                 case 'search':
                     $('#panel-heading-search').text(obj.totalEntities + ' Songs found');
@@ -597,7 +616,7 @@ function webSocketConnect() {
                                     break;
                                 case 'song':
                                     socket.send("MPD_API_ADD_TRACK," + decodeURI($(this).attr("uri")));
-                                    showNotification('"' + $('td:nth-last-child(3)', this).text() + '" added','','','success');
+                                    showNotification('"' + $('td:nth-last-child(5)', this).text() + '" added','','','success');
                                     break;
                                 case 'plist':
                                     socket.send("MPD_API_ADD_PLAYLIST," + decodeURI($(this).attr("uri")));
@@ -886,9 +905,10 @@ function updatePlayIcon(obj) {
     }    
 }
 
-function updateDB() {
+function updateDB(event) {
     socket.send('MPD_API_UPDATE_DB');
     showNotification('Updating MPD Database...','','','success');
+    event.preventDefault();
 }
 
 function clickPlay() {
@@ -1293,3 +1313,7 @@ function beautifyDuration(x) {
          (hours > 0 ? hours + '\u2009h ' + (minutes < 10 ? '0' : '') : '') +
          minutes + '\u2009m ' + (seconds < 10 ? '0' : '') + seconds + '\u2009s';
 }
+
+function genId(x) {
+ return 'id'+x.replace(/[^\w]/g,'');
+}

src/mpd_client.c

@@ -445,7 +445,7 @@ out_set_replaygain:
     }
 
     if(n > 0) {
-        fprintf(stdout,"Send response:\n %s\n",mpd.buf);
+        //fprintf(stdout,"Send response:\n %s\n",mpd.buf);
         mg_websocket_write(c, 1, mpd.buf, n);
     }
 
@@ -595,6 +595,19 @@ char* mpd_get_title(struct mpd_song const *song)
     return str;
 }
 
+char* mpd_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* mpd_get_album(struct mpd_song const *song)
 {
     char *str;
@@ -1024,7 +1037,7 @@ int mympd_put_songs_in_album(char *buffer, char *albumartist, char *album)
     unsigned long entity_count = 0;
     unsigned long entities_returned = 0;
 
-    if(mpd_search_db_songs(mpd.conn, false) == false) {
+    if(mpd_search_db_songs(mpd.conn, true) == false) {
         RETURN_ERROR_AND_RECOVER("mpd_search_db_songs");
     }
     
@@ -1050,6 +1063,8 @@ int mympd_put_songs_in_album(char *buffer, char *albumartist, char *album)
                 cur += json_emit_int(cur, end - cur, mpd_song_get_duration(song));
                 cur += json_emit_raw_str(cur, end - cur, ",\"title\":");
                 cur += json_emit_quoted_str(cur, end - cur, mpd_get_title(song));
+                cur += json_emit_raw_str(cur, end - cur, ",\"track\":");
+                cur += json_emit_quoted_str(cur, end - cur, mpd_get_track(song));
                 cur += json_emit_raw_str(cur, end - cur, "},");
             }
             mpd_song_free(song);