Merge pull request #160 from eb041592/verbose_lists

Add artist and album to queue and search results

htdocs/css/mpd.css

@@ -22,10 +22,10 @@ body {
 }
 
 #counter {
-	font-size: 24px;
-	margin-top: -6px;
-	margin-left: 10px;
-	min-width: 50px;
+  font-size: 24px;
+  margin-top: -6px;
+  margin-left: 10px;
+  min-width: 50px;
 }
 
 #search {
@@ -33,7 +33,7 @@ body {
 }
 
 .btn-group-hover {
-    opacity: 20%;
+  opacity: 20%;
 }
 
 .btn:active,
@@ -55,10 +55,15 @@ body {
   }
 }
 
-#salamisandwich td:nth-child(3), th:nth-child(3) {
+#salamisandwich td:nth-last-child(2), th:nth-last-child(2) {
   text-align: right;
 }
 
+#salamisandwich td:nth-child(2) span {
+  font-style:italic;
+  font-size:90%;
+}
+
 tbody {
   cursor: pointer;
 }

htdocs/index.html

@@ -34,7 +34,7 @@
 
         <ul id="nav_links" class="nav navbar-nav">
           <li id="queue"><a href="#/">Queue</a></li>
-          <li id="browse"><a href="#/browse/0/">Browse database</a></li>
+          <li id="browse"><a href="#/browse/0/">Browse Database</a></li>
           <li id="dirble"><a href="#/dirble/">Dirble</a></li>
           <li><a href="#" data-toggle="modal" data-target="#addstream">Add Stream</a></li>
           <li><a href="#" data-toggle="modal" data-target="#settings" onclick="getHost();">Settings</a></li>
@@ -114,7 +114,7 @@
             <thead>
               <tr>
                 <th>#</th>
-                <th>Title</th>
+                <th colspan="2">Track</th>
                 <th>Duration</th>
                 <th></th>
               </tr>
@@ -191,10 +191,10 @@
 
           <div id="btn-responsive-block" class="btn-group-vertical btn-block btn-group-lg">
             <button type="button" class="btn btn-default" onclick="socket.send('MPD_API_RM_ALL');">
-              <span class="glyphicon glyphicon-trash"></span> Clear queue
+              <span class="glyphicon glyphicon-trash"></span> Clear Queue
             </button>
             <a href="#" data-toggle="modal" data-target="#savequeue" class="btn btn-default">
-              <span class="glyphicon glyphicon-save"></span> Save queue
+              <span class="glyphicon glyphicon-save"></span> Save Queue
             </a>
           </div>
 
@@ -242,7 +242,7 @@
               </div>
               <div class="form-group col-md-6">
                 <label class="control-label" for="mpd_pw_con">MPD Password (Confirmation)</label>
-                <input type="password" class="form-control" id="mpd_pw_con"  placeholder="Password confirmation"
+                <input type="password" class="form-control" id="mpd_pw_con"  placeholder="Confirmation"
                 data-placement="right" data-toggle="popover" data-content="Password does not match!"
                 data-trigger="manual" />
               </div>

htdocs/js/mpd.js

@@ -227,7 +227,7 @@ function webSocketConnect() {
             var obj = JSON.parse(msg.data);
 
             switch (obj.type) {
-                case "queue":
+                case 'queue':
                     if(current_app !== 'queue')
                         break;
 
@@ -238,8 +238,9 @@ function webSocketConnect() {
 
                         $('#salamisandwich > tbody').append(
                             "<tr trackid=\"" + obj.data[song].id + "\"><td>" + (obj.data[song].pos + 1) + "</td>" +
-                                "<td>"+ obj.data[song].title +"</td>" + 
-                                "<td>"+ minutes + ":" + (seconds < 10 ? '0' : '') + seconds +
+                                "<td>" + obj.data[song].artist + "<br /><span>" + obj.data[song].album  + "</span></td>" +
+                                "<td>" + obj.data[song].title  + "</td>" +
+                                "<td>" + minutes + ":" + (seconds < 10 ? '0' : '') + seconds +
                         "</td><td></td></tr>");
                     }
 
@@ -299,14 +300,14 @@ function webSocketConnect() {
                     };
                     
                     //Make queue table sortable
-                    $("#salamisandwich > tbody").sortable({
+                    $('#salamisandwich > tbody').sortable({
                       helper: fixHelperModified,
                       stop: function(event,ui) {renumber_table('#salamisandwich',ui.item)}
                     }).disableSelection();
                     break;
-                case "search":
+                case 'search':
                     $('#wait').modal('hide');
-                case "browse":
+                case 'browse':
                     if(current_app !== 'browse' && current_app !== 'search')
                         break;
 
@@ -319,7 +320,7 @@ function webSocketConnect() {
                     }
                     for (var item in obj.data) {
                         switch(obj.data[item].type) {
-                            case "directory":
+                            case 'directory':
                                 var clazz = 'dir';
                                 if (filter !== undefined) {
                                     var first = obj.data[item].dir[0];
@@ -334,11 +335,11 @@ function webSocketConnect() {
                                 $('#salamisandwich > tbody').append(
                                     "<tr uri=\"" + encodeURI(obj.data[item].dir) + "\" class=\"" + clazz + "\">" +
                                     "<td><span class=\"glyphicon glyphicon-folder-open\"></span></td>" +
-                                    "<td><a>" + basename(obj.data[item].dir) + "</a></td>" +
+                                    "<td colspan=\"2\"><a>" + basename(obj.data[item].dir) + "</a></td>" +
                                     "<td></td><td></td></tr>"
                                 );
                                 break;
-                            case "playlist":
+                            case 'playlist':
                                 var clazz = 'plist';
                                 if (filter !== "||") {
                                     clazz += ' hide';
@@ -346,29 +347,34 @@ function webSocketConnect() {
                                 $('#salamisandwich > tbody').append(
                                     "<tr uri=\"" + encodeURI(obj.data[item].plist) + "\" class=\"" + clazz + "\">" +
                                     "<td><span class=\"glyphicon glyphicon-list\"></span></td>" +
-                                    "<td><a>" + basename(obj.data[item].plist) + "</a></td>" +
+                                    "<td colspan=\"2\"><a>" + basename(obj.data[item].plist) + "</a></td>" +
                                     "<td></td><td></td></tr>"
                                 );
                                 break;
-                            case "song":
+                            case 'song':
                                 var minutes = Math.floor(obj.data[item].duration / 60);
                                 var seconds = obj.data[item].duration - minutes * 60;
 
-                                $('#salamisandwich > tbody').append(
+                                if (typeof obj.data[item].artist === 'undefined') {
+                                    var details = "<td colspan=\"2\">" + obj.data[item].title + "</td>";
+                                } else {
+                                    var details = "<td>" + obj.data[item].artist + "<br /><span>" + obj.data[item].album + "</span></td><td>" + obj.data[item].title + "</td>";
+                                }
+
+				$('#salamisandwich > tbody').append(
                                     "<tr uri=\"" + encodeURI(obj.data[item].uri) + "\" class=\"song\">" +
-                                    "<td><span class=\"glyphicon glyphicon-music\"></span></td>" +
-                                    "<td>" + obj.data[item].title +"</td>" +
-                                    "<td>"+ minutes + ":" + (seconds < 10 ? '0' : '') + seconds +
+                                    "<td><span class=\"glyphicon glyphicon-music\"></span></td>" + details +
+                                    "<td>" + minutes + ":" + (seconds < 10 ? '0' : '') + seconds +
                                     "</td><td></td></tr>"
                                 );
                                 break;
-                            case "wrap":
+                            case 'wrap':
                                 if(current_app == 'browse') {
                                     $('#next').removeClass('hide');
                                 } else {
                                     $('#salamisandwich > tbody').append(
-                                        "<tr><td><span class=\"glyphicon glyphicon-remove\"></span></td>" + 
-                                        "<td>Too many results, please refine your search!</td>" + 
+                                        "<tr><td><span class=\"glyphicon glyphicon-remove\"></span></td>" +
+                                        "<td colspan=\"2\">Too many results, please refine your search!</td>" +
                                         "<td></td><td></td></tr>"
                                     );
                                 }
@@ -389,7 +395,7 @@ function webSocketConnect() {
                                 socket.send(onClickAction + "," + decodeURI($(this).parents("tr").attr("uri")));
                             $('.top-right').notify({
                                 message:{
-                                    text: $('td:nth-child(2)', $(this).parents("tr")).text() + " added"
+                                    text: "\"" + $('td:nth-last-child(3)', $(this).parents("tr")).text() + "\" added"
                                 } }).show();
                             }).fadeTo('fast',1);
                     }
@@ -423,7 +429,7 @@ function webSocketConnect() {
                                     socket.send("MPD_API_ADD_TRACK," + decodeURI($(this).attr("uri")));
                                     $('.top-right').notify({
                                         message:{
-                                            text: $('td:nth-child(2)', this).text() + " added"
+                                            text: "\"" + $('td:nth-last-child(3)', this).text() + "\" added"
                                         }
                                     }).show();
                                     break;
@@ -431,7 +437,7 @@ function webSocketConnect() {
                                     socket.send("MPD_API_ADD_PLAYLIST," + decodeURI($(this).attr("uri")));
                                     $('.top-right').notify({
                                         message:{
-                                            text: "Playlist " + $('td:nth-child(2)', this).text() + " added"
+                                            text: "\"" + $('td:nth-last-child(3)', this).text() + "\" added"
                                         }
                                     }).show();
                                     break;

src/mpd_client.c

@@ -475,6 +475,30 @@ char* mpd_get_title(struct mpd_song const *song)
     return str;
 }
 
+char* mpd_get_artist(struct mpd_song const *song)
+{
+    char *str;
+
+    str = (char *)mpd_song_get_tag(song, MPD_TAG_ARTIST, 0);
+    if (str == NULL) {
+	return "";
+    } else {
+	return str;
+    }
+}
+
+char* mpd_get_album(struct mpd_song const *song)
+{
+    char *str;
+
+    str = (char *)mpd_song_get_tag(song, MPD_TAG_ALBUM, 0);
+    if (str == NULL) {
+	return "";
+    } else {
+	return str;
+    }
+}
+
 int mpd_put_state(char *buffer, int *current_song_id, unsigned *queue_version)
 {
     struct mpd_status *status;
@@ -559,18 +583,10 @@ int mpd_put_current_song(char *buffer)
     cur += json_emit_int(cur, end - cur, mpd_song_get_pos(song));
     cur += json_emit_raw_str(cur, end - cur, ",\"title\":");
     cur += json_emit_quoted_str(cur, end - cur, mpd_get_title(song));
-
-    if(mpd_song_get_tag(song, MPD_TAG_ARTIST, 0) != NULL)
-    {
-        cur += json_emit_raw_str(cur, end - cur, ",\"artist\":");
-        cur += json_emit_quoted_str(cur, end - cur, mpd_song_get_tag(song, MPD_TAG_ARTIST, 0));
-    }
-
-    if(mpd_song_get_tag(song, MPD_TAG_ALBUM, 0) != NULL)
-    {
-        cur += json_emit_raw_str(cur, end - cur, ",\"album\":");
-        cur += json_emit_quoted_str(cur, end - cur, mpd_song_get_tag(song, MPD_TAG_ALBUM, 0));
-    }
+    cur += json_emit_raw_str(cur, end - cur, ",\"artist\":");
+    cur += json_emit_quoted_str(cur, end - cur, mpd_get_artist(song));
+    cur += json_emit_raw_str(cur, end - cur, ",\"album\":");
+    cur += json_emit_quoted_str(cur, end - cur, mpd_get_album(song));
 
     cur += json_emit_raw_str(cur, end - cur, "}}");
     mpd_song_free(song);
@@ -604,6 +620,10 @@ int mpd_put_queue(char *buffer, unsigned int offset)
             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, ",\"artist\":");
+            cur += json_emit_quoted_str(cur, end - cur, mpd_get_artist(song));
+            cur += json_emit_raw_str(cur, end - cur, ",\"album\":");
+            cur += json_emit_quoted_str(cur, end - cur, mpd_get_album(song));
             cur += json_emit_raw_str(cur, end - cur, "},");
         }
         mpd_entity_free(entity);
@@ -718,6 +738,10 @@ int mpd_search(char *buffer, char *searchstr)
             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, ",\"artist\":");
+            cur += json_emit_quoted_str(cur, end - cur, mpd_get_artist(song));
+            cur += json_emit_raw_str(cur, end - cur, ",\"album\":");
+            cur += json_emit_quoted_str(cur, end - cur, mpd_get_album(song));
             cur += json_emit_raw_str(cur, end - cur, "},");
             mpd_song_free(song);