Fix: use mpd taglist in songdetails modal

Feat: link album in playback card

htdocs/index.html

@@ -87,7 +87,7 @@
           <small>Artist</small>
           <h4 id="currentArtist" data-href="{'cmd': 'artistClick', 'options': []}"></h4>
           <small>Album</small>
-          <h4 id="currentAlbum"></h4>
+          <h4 id="currentAlbum" data-href="{'cmd': 'albumClick', 'options': []}"></h4>
         </div>
       </div>
       <div class="card-footer card-footer-playback">
@@ -805,20 +805,6 @@
           <div class="table-responsive-md">
             <table class="table table-sm">
               <tbody>
-                <tr data-name="artist"><th>Artist</th><td></td></tr>
-                <tr data-name="album"><th>Album</th><td></td></tr>
-                <tr data-name="track"><th>Track</th><td></td></tr>
-                <tr data-name="albumartist"><th>Albumartist</th><td></td></tr>
-                <tr data-name="composer"><th>Composer</th><td></td></tr>
-                <tr data-name="performer"><th>Performer</th><td></td></tr>                
-                <tr data-name="genre"><th>Genre</th><td></td></tr>
-                <tr data-name="date"><th>Date</th><td></td></tr>
-                <tr data-name="uri"><th>Uri</th><td></td></tr>
-                <tr class="stickers"><th colspan="2">Statistics</th></tr>
-                <tr class="stickers" data-name="playCount"><th>Play count</th><td></td></tr>
-                <tr class="stickers" data-name="skipCount"><th>Skip count</th><td></td></tr>
-                <tr class="stickers" data-name="lastPlayed"><th>Last played</th><td></td></tr>
-                <tr class="stickers" data-name="like"><th>Like</th><td></td></tr>
               </tbody>
             </table>
           </div>

htdocs/js/mympd.js

@@ -1438,7 +1438,13 @@ function songClick() {
 function artistClick() {
     var albumartist = domCache.currentArtist.getAttribute('data-albumartist');
     if (albumartist != '') 
-        appGoto('Browse', 'Database', 'Album', '0/-/' + albumartist);
+        appGoto('Browse', 'Database', 'AlbumArtist', '0/-/' + albumartist);
+}
+
+function albumClick() {
+    var album = domCache.currentAlbum.getAttribute('data-album');
+    if (album != '') 
+        appGoto('Browse', 'Database', 'Album', '0/-/' + album);
 }
 
 function songDetails(uri) {
@@ -1450,36 +1456,36 @@ function parseSongDetails(obj) {
     var modal = document.getElementById('modalSongDetails');
     modal.getElementsByClassName('album-cover')[0].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');
-        if (!key)
-            continue;
-        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 == 'lastPlayed') {
-            if (value == 0) 
-                value = 'never';    
-            else {
-                var d = new Date(value * 1000);
-                value = d.toUTCString();
+    
+    var songDetails = '';
+    for (var key in settings.tags) {
+        if (settings.tags[key] == true) {
+            var value = obj.data[key.toLowerCase()];
+            if (key == 'duration') {
+                var minutes = Math.floor(value / 60);
+                var seconds = value - minutes * 60;
+                value = minutes + ':' + (seconds < 10 ? '0' : '') + seconds;        
             }
+            songDetails += '<tr><th>' + key + '</th><td>' + value + '</td></tr>';
         }
-        else if (key == 'like') {
-            if (value == 0) value = '<span class="material-icons">thumb_down_alt</span>';
-            else if (value == 2) value = '<span class="material-icons">thumb_up_alt</span>';
-            else value = 'not voted';
-        }
-        else if (key == 'uri') {
-            value = '<a class="text-success" href="/library/' + value + '">' + value + '</a>';
-        }
-        tr[i].getElementsByTagName('td')[0].innerHTML = value;
     }
+    
+    songDetails += '<tr><th>Uri</th><td><a class="text-success" href="/library/' + obj.data.uri + '">' + obj.data.uri + '</a></td></tr>';
+    
+    if (settings.stickers == true) {
+        var like = 'not voted';
+        if (obj.data.like == 0)
+            like = '<span class="material-icons">thumb_down_alt</span>';
+        else if (obj.data.like == 2)
+            '<span class="material-icons">thumb_up_alt</span>';
+        songDetails += '<tr class="stickers"><th colspan="2">Statistics</th></tr>' +
+            '<tr><th>Play count</th><td>' + obj.data.playCount + '</td></tr>' +
+            '<tr><th>Skip count</th><td>' + obj.data.skipCount + '</td></tr>' +
+            '<tr><th>Last played</th><td>' + (obj.data.lastPlayed == 0 ? 'never' : new Date(value * 1000).toUTCString()) + '</td></tr>' +
+            '<tr><th>Like</th><td>' + like + '</td></tr>';
+    }
+    
+    modal.getElementsByTagName('tbody')[0].innerHTML = songDetails;
 }
 
 function playlistDetails(uri) {
@@ -2066,6 +2072,7 @@ function songChange(obj) {
         textNotification += ' - ' + obj.data.album;
         htmlNotification += '<br/>' + obj.data.album;
         domCache.currentAlbum.innerText = obj.data.album;
+        domCache.currentAlbum.setAttribute('data-album', obj.data.album);
     }
     else
         domCache.currentAlbum.innerText = '';

src/mpd_client.c

@@ -588,6 +588,7 @@ void mympd_mpd_features() {
     // Defaults
     mpd.feat_sticker = false;
     mpd.tag_artist = false;
+    mpd.tag_album = false;
     mpd.tag_album_artist = false;
     mpd.tag_title = false;
     mpd.tag_track = false;
@@ -615,6 +616,8 @@ void mympd_mpd_features() {
         printf("%s ", pair->value);
         if (strcmp(pair->value, "Artist") == 0)
             mpd.tag_artist = true;
+        else if (strcmp(pair->value, "Album") == 0)
+            mpd.tag_album = true;
         else if (strcmp(pair->value, "AlbumArtist") == 0)
             mpd.tag_album_artist = true;
         else if (strcmp(pair->value, "Title") == 0)
@@ -635,6 +638,8 @@ void mympd_mpd_features() {
     printf("\n");
     if (mpd.tag_artist == false)
         printf("WARNING: Artist tag not enabled in mpd\n");
+    if (mpd.tag_album == false)
+        printf("WARNING: Album tag not enabled in mpd\n");
     if (mpd.tag_album_artist == false)
         printf("WARNING: AlbumArtist tag not enabled in mpd\n");
     if (mpd.tag_title == false)
@@ -979,7 +984,7 @@ int mympd_put_settings(char *buffer) {
         "mixrampdb: %f, mixrampdelay: %f, mpdhost: %Q, mpdport: %d, passwort_set: %B, "
         "streamport: %d, coverimage: %Q, stickers: %B, mixramp: %B, "
         "maxElementsPerPage: %d, replaygain: %Q, notificationWeb: %d, notificationPage: %d, "
-        "tags: { Artist: %B, AlbumArtist: %B, Title: %B, Track: %B, Genre: %B, Date: %B,"
+        "tags: { Artist: %B, Album: %B, AlbumArtist: %B, Title: %B, Track: %B, Genre: %B, Date: %B,"
         "Composer: %B, Performer: %B }"
         "}}", 
         mpd_status_get_repeat(status),
@@ -1001,6 +1006,7 @@ int mympd_put_settings(char *buffer) {
         state.a,
         state.b,
         mpd.tag_artist,
+        mpd.tag_album,
         mpd.tag_album_artist,
         mpd.tag_title,
         mpd.tag_track,

src/mpd_client.h

@@ -131,8 +131,10 @@ struct t_mpd {
     
     // Features
     const unsigned* protocol;
+    // Supported tags
     bool feat_sticker;
     bool tag_artist;
+    bool tag_album;
     bool tag_album_artist;
     bool tag_title;
     bool tag_track;