Feat: configurable tags in playback card

htdocs/index.html

@@ -89,13 +89,8 @@
       <div class="card-body">
         <div class="album-cover featCoverimage" id="currentCover"></div>
         <div class="album-desc">
-          <h2 id="currentTrack" data-href='{"cmd": "songClick", "options": []}'></h2>
+          <h2 id="currentTitle" data-href='{"cmd": "titleClick", "options": []}'></h2>
-          <div class="featTags">  
+          <div class="featTags" id="cardPlaybackTags"></div>
-            <small>Artist</small>
-            <h4 id="currentArtist" data-href='{"cmd": "artistClick", "options": []}'></h4>
-            <small>Album</small>
-            <h4 id="currentAlbum" data-href='{"cmd": "albumClick", "options": []}'></h4>
-          </div>
         </div>
       </div>
       <div class="card-footer card-footer-playback">

htdocs/js/mympd.js

@@ -77,10 +77,8 @@ domCache.progressBar = document.getElementById('progressBar');
 domCache.volumeBar = document.getElementById('volumeBar');
 domCache.outputs = document.getElementById('outputs');
 domCache.btnAdd = document.getElementById('nav-add2homescreen');
-domCache.currentTrack = document.getElementById('currentTrack');
-domCache.currentArtist = document.getElementById('currentArtist');
-domCache.currentAlbum = document.getElementById('currentAlbum');
 domCache.currentCover = document.getElementById('currentCover');
+domCache.currentTitle = document.getElementById('currentTitle');
 domCache.btnVoteUp = document.getElementById('btnVoteUp');
 domCache.btnVoteDown = document.getElementById('btnVoteDown');
 
@@ -416,6 +414,11 @@ function appInit() {
         }, false);
     }
 
+    document.getElementById('cardPlaybackTags').addEventListener('click', function(event) {
+        if (event.target.nodeName == 'H4') 
+            gotoBrowse(event.target);
+    }, false);
+
     document.getElementById('outputs').addEventListener('click', function(event) {
         if (event.target.nodeName == 'BUTTON') 
             event.stopPropagation();
@@ -1061,6 +1064,18 @@ function parseSettings(obj) {
         settings.colsBrowseFilesystem = ["Type", "Title", "Duration"];
         settings.colsBrowseDatabase = ["Track", "Title", "Duration"];
     }
+    else {
+        var pbtl = '';
+        for (var i = 0; i < settings.colsPlayback.length; i++) {
+            pbtl += '<small>' + settings.colsPlayback[i] + '</small>' +
+                  '<h4 ';
+            if (settings.browsetags.includes(settings.colsPlayback[i]))
+                  pbtl += 'class="clickable" ';
+            pbtl += 'id="current' + settings.colsPlayback[i]  + '" data-tag="' + settings.colsPlayback[i] + '">' + 
+                  ( lastSong ? lastSong[settings.colsPlayback[i]] : '') + '</h4>';
+        }
+        document.getElementById('cardPlaybackTags').innerHTML = pbtl;
+    }
 
     if (settings.mixramp == true)
         document.getElementsByClassName('mixramp')[0].style.display = '';
@@ -1100,6 +1115,7 @@ function parseSettings(obj) {
     filterCols('colsBrowsePlaylistsDetail');
     filterCols('colsBrowseFilesystem');
     filterCols('colsBrowseDatabase');
+    filterCols('colsPlayback');
 
     if (settings.featLocalplayer) {
         if (settings.streamurl == '') {
@@ -1350,10 +1366,11 @@ function parseState(obj) {
         sendAPI({"cmd": "MPD_API_PLAYER_CURRENT_SONG"}, songChange);
     //clear playback card if not playing
     if (obj.data.songPos == '-1') {
-        domCache.currentTrack.innerText = 'Not playing';
+        domCache.currentTitle.innerText = 'Not playing';
-        domCache.currentAlbum.innerText = '';
-        domCache.currentArtist.innerText = '';
         domCache.currentCover.style.backgroundImage = '';
+        var pb = document.getElementById('cardPlaybackTags').getElementsByTagName('h4');
+        for (var i = 0; i < pb.length; i++)
+            pb[i].innerText = '';
     }
 
     lastState = obj;                    
@@ -1881,26 +1898,17 @@ function replaceQueue(type, uri, name) {
     }
 }
 
-function songClick() {
+function titleClick() {
-    var uri = domCache.currentTrack.getAttribute('data-uri')
+    var uri = decodeURI(domCache.currentTitle.getAttribute('data-uri'));
     if (uri != '')
         songDetails(uri);
 }
 
-function artistClick() {
+function gotoBrowse(x) {
-    var albumartist = domCache.currentArtist.getAttribute('data-albumartist');
+    var tag = x.getAttribute('data-tag');
-    if (albumartist != '') {
+    var name = decodeURI(x.getAttribute('data-name'));
-        if (settings.tags.includes('AlbumArtist'))
+    if (tag != '' && name != '' && settings.browsetags.includes(tag)) 
-            appGoto('Browse', 'Database', 'AlbumArtist', '0/-/' + albumartist);
+        appGoto('Browse', 'Database', tag, '0/-/' + name);
-        else if (settings.tags.includes('Artist'))
-            appGoto('Browse', 'Database', 'Artist', '0/-/' + albumartist);
-    }
-}
-
-function albumClick() {
-    var album = domCache.currentAlbum.getAttribute('data-album');
-    if (album != '') 
-        appGoto('Browse', 'Database', 'Album', '0/-/' + album);
 }
 
 function songDetails(uri) {
@@ -2685,40 +2693,34 @@ function songChange(obj) {
         textNotification += obj.data.Artist;
         htmlNotification += obj.data.Artist;
         pageTitle += obj.data.Artist + ' - ';
-        domCache.currentArtist.innerText = obj.data.Artist;
+    } 
-        if (obj.data.AlbumArtist != undefined)
-            domCache.currentArtist.setAttribute('data-albumartist', obj.data.AlbumArtist);
-        else if (obj.data.Artist != undefined)
-            domCache.currentArtist.setAttribute('data-albumartist', obj.data.Artist);
-        else
-            domCache.currentArtist.setAttribute('data-albumartist', '');
-    } else
-        domCache.currentArtist.innerText = '';
 
     if (typeof obj.data.Album != 'undefined' && obj.data.Album.length > 0 && obj.data.Album != '-') {
         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 = '';
 
     if (typeof obj.data.Title != 'undefined' && obj.data.Title.length > 0) {
         pageTitle += obj.data.Title;
-        domCache.currentTrack.innerText = obj.data.Title;
+        domCache.currentTitle.innerText = obj.data.Title;
-        domCache.currentTrack.setAttribute('data-uri', obj.data.uri);
+        domCache.currentTitle.setAttribute('data-uri', encodeURI(obj.data.uri));
-    } else {
+    }
-        domCache.currentTrack.innerText = '';
+    else {
-        domCache.currentTrack.setAttribute('data-uri', '');
+        domCache.currentTitle.innerText = '';
+        domCache.currentTitle.setAttribute('data-uri', '');
     }
-
     document.title = pageTitle;
 
     if (settings.featStickers == true) {
         setVoteSongBtns(obj.data.like, obj.data.uri);
     }
 
+    for (var i = 0; i < settings.colsPlayback.length; i++) {
+        var c = document.getElementById('current' + settings.colsPlayback[i]);
+        c.innerText = obj.data[settings.colsPlayback[i]];
+        c.setAttribute('data-name', encodeURI(obj.data[settings.colsPlayback[i]]));
+    }
+    
     //Update Artist in queue view for http streams
     var playingTr = document.getElementById('queueTrackId' + obj.data.currentSongId);
     if (playingTr)

src/mpd_client.c

@@ -786,7 +786,7 @@ void mympd_mpd_features() {
         printf("\nmyMPD enabled searchtags: ");
         token = strtok(searchtaglist, s);
         while (token != NULL) {
-            if (list_get_value(&mpd_tags, token) == 1) {
+            if (list_get_value(&mympd_tags, token) == 1) {
                 list_push(&mympd_searchtags, token, 1);
                 printf("%s ", token);
             }
@@ -795,7 +795,7 @@ void mympd_mpd_features() {
         printf("\nmyMPD enabled browsetags: ");
         token = strtok(browsetaglist, s);
         while (token != NULL) {
-            if (list_get_value(&mpd_tags, token) == 1) {
+            if (list_get_value(&mympd_tags, token) == 1) {
                 list_push(&mympd_browsetags, token, 1);
                 printf("%s ", token);
             }
@@ -1442,6 +1442,7 @@ int mympd_put_settings(char *buffer) {
     len += json_printf(&out, ", colsBrowseDatabase: %s", mympd_state.colsBrowseDatabase);
     len += json_printf(&out, ", colsBrowsePlaylistsDetail: %s", mympd_state.colsBrowsePlaylistsDetail);
     len += json_printf(&out, ", colsBrowseFilesystem: %s", mympd_state.colsBrowseFilesystem);
+    len += json_printf(&out, ", colsPlayback: %s", mympd_state.colsPlayback);
     len += json_printf(&out, "}}");    
 
     CHECK_RETURN_LEN();

src/mpd_client.h

@@ -221,6 +221,7 @@ typedef struct {
     char *colsBrowseDatabase;
     char *colsBrowsePlaylistsDetail;
     char *colsBrowseFilesystem;
+    char *colsPlayback;
 } t_mympd_state;
 
 t_mympd_state mympd_state;

src/mympd.c

@@ -311,6 +311,13 @@ void read_statefiles() {
         mympd_state.colsBrowseFilesystem = strdup("[\"Type\",\"Title\",\"Artist\",\"Album\",\"Duration\"]");
         mympd_state_set("colsBrowseFilesystem", mympd_state.colsBrowseFilesystem);
     }
+    
+    if (mympd_state_get("colsPlayback", value))
+        mympd_state.colsPlayback = strdup(value);
+    else {
+        mympd_state.colsPlayback = strdup("[\"Artist\",\"Album\",\"Genre\"]");
+        mympd_state_set("colsPlayback", mympd_state.colsPlayback);
+    }
 }
 
 bool testdir(char *name, char *dirname) {