Feat: configureable columns in queue view #47

contrib/archlinux.install

@@ -66,6 +66,11 @@ post_upgrade() {
   [ -f /var/lib/mympd/state/jukeboxQueueLength ] || echo -n "1" > /var/lib/mympd/state/jukeboxQueueLength
   [ -f /var/lib/mympd/state/notificationPage ] || echo -n "true" > /var/lib/mympd/state/notificationPage
   [ -f /var/lib/mympd/state/notificationWeb ] || echo -n "false" > /var/lib/mympd/state/notificationWeb
+  [ -f /var/lib/mympd/state/colsBrowseDatabase ] || echo -n '["Track","Title"]' > /var/lib/mympd/state/colsBrowseDatabase
+  [ -f /var/lib/mympd/state/colsBrowseFilesystem ] || echo -n '["Type","Title","Artist","Album","Duration"]' > /var/lib/mympd/state/colsBrowseFilesystem
+  [ -f /var/lib/mympd/state/colsBrowsePlaylistsDetails ] || echo -n '["Pos","Title","Artist","Album","Duration"]' > /var/lib/mympd/state/colsBrowsePlaylistsDetails
+  [ -f /var/lib/mympd/state/colsQueue ] || echo -n '["Pos","Title","Artist","Album","Duration"]' > /var/lib/mympd/state/colsQueue
+  [ -f /var/lib/mympd/state/colsSearch ] || echo -n '["Title","Artist","Album","Duration"]' > /var/lib/mympd/state/colsSearch
 
   # fix ownership of /var/lib/mympd
   echo "INFO: Fixing ownership of /var/lib/mympd"

contrib/myMPD.spec

@@ -81,6 +81,11 @@ done
 [ -f /var/lib/mympd/state/jukeboxQueueLength ] || echo -n "1" > /var/lib/mympd/state/jukeboxQueueLength
 [ -f /var/lib/mympd/state/notificationPage ] || echo -n "true" > /var/lib/mympd/state/notificationPage
 [ -f /var/lib/mympd/state/notificationWeb ] || echo -n "false" > /var/lib/mympd/state/notificationWeb
+[ -f /var/lib/mympd/state/colsBrowseDatabase ] || echo -n '["Track","Title"]' > /var/lib/mympd/state/colsBrowseDatabase
+[ -f /var/lib/mympd/state/colsBrowseFilesystem ] || echo -n '["Type","Title","Artist","Album","Duration"]' > /var/lib/mympd/state/colsBrowseFilesystem
+[ -f /var/lib/mympd/state/colsBrowsePlaylistsDetails ] || echo -n '["Pos","Title","Artist","Album","Duration"]' > /var/lib/mympd/state/colsBrowsePlaylistsDetails
+[ -f /var/lib/mympd/state/colsQueue ] || echo -n '["Pos","Title","Artist","Album","Duration"]' > /var/lib/mympd/state/colsQueue
+[ -f /var/lib/mympd/state/colsSearch ] || echo -n '["Title","Artist","Album","Duration"]' > /var/lib/mympd/state/colsSearch
 
 echo "Fixing ownership of /var/lib/mympd"
 chown -R mympd.mympd /var/lib/mympd

debian/postinst

@@ -61,6 +61,11 @@ fi
 [ -f /var/lib/mympd/state/jukeboxQueueLength ] || echo -n "1" > /var/lib/mympd/state/jukeboxQueueLength
 [ -f /var/lib/mympd/state/notificationPage ] || echo -n "true" > /var/lib/mympd/state/notificationPage
 [ -f /var/lib/mympd/state/notificationWeb ] || echo -n "false" > /var/lib/mympd/state/notificationWeb
+[ -f /var/lib/mympd/state/colsBrowseDatabase ] || echo -n '["Track","Title"]' > /var/lib/mympd/state/colsBrowseDatabase
+[ -f /var/lib/mympd/state/colsBrowseFilesystem ] || echo -n '["Type","Title","Artist","Album","Duration"]' > /var/lib/mympd/state/colsBrowseFilesystem
+[ -f /var/lib/mympd/state/colsBrowsePlaylistsDetails ] || echo -n '["Pos","Title","Artist","Album","Duration"]' > /var/lib/mympd/state/colsBrowsePlaylistsDetails
+[ -f /var/lib/mympd/state/colsQueue ] || echo -n '["Pos","Title","Artist","Album","Duration"]' > /var/lib/mympd/state/colsQueue
+[ -f /var/lib/mympd/state/colsSearch ] || echo -n '["Title","Artist","Album","Duration"]' > /var/lib/mympd/state/colsSearch
 
 echo "Fixing ownership of /var/lib/mympd"
 chown -R mympd.mympd /var/lib/mympd

htdocs/css/mympd.css

@@ -249,7 +249,11 @@ caption {
 }
 
 .dragover > td {
-  border-top:25px solid transparent;
+  border-top:2px solid #28a745;
+}
+
+.dragover-th {
+  border-left:2px solid #28a745;
 }
 
 [draggable] {
@@ -260,6 +264,7 @@ caption {
   /* Required to make elements draggable in old WebKit */
   -khtml-user-drag: element;
   -webkit-user-drag: element;
+  cursor: pointer;
 }
 
 @keyframes changewidth {

htdocs/index.html

@@ -117,8 +117,7 @@
             </button>
           </div>
           <div class="btn-group mr-2">
-            <button type="button" class="btn btn-secondary material-icons"
+            <button type="button" class="btn btn-secondary material-icons" data-href='{"cmd": "sendAPI", "options": [{"cmd": "MPD_API_QUEUE_SHUFFLE"}]}' title="Shuffle queue">
-            data-href='{"cmd": "sendAPI", "options": [{"cmd": "MPD_API_QUEUE_SHUFFLE"}]}' title="Shuffle queue">
               shuffle
             </button>
           </div>
@@ -154,16 +153,16 @@
               </div>            
             <button data-href='{"cmd": "gotoPage", "options": ["next"]}' id="QueuePaginationTopNext" title="Next Page" type="button" class="btn btn-secondary input-group-append">&raquo;</button>
           </div>
+          <div class="btn-group mr-2">
+            <button id="QueueColsBtn" class="btn btn-secondary dropdown-toggle material-icons" type="button" data-toggle="dropdown">settings</button>
+            <div class="dropdown-menu bg-dark px-2" id="QueueColsDropdown"><form></form>
+              <button data-href='{"cmd": "saveCols", "options": ["Queue"]}' class="btn btn-success btn-block btn-sm mt-2">Apply</button>
+            </div>          
+          </div>
         </div>
 
         <div class="table-responsive-md">
           <table id="QueueList" class="table table-hover table-sm" data-version="">
-            <col class="tblnum"/>
-            <col class="tbltitle"/>
-            <col class="tblartist"/>
-            <col class="tblalbum"/>
-            <col class="tbllength"/>
-            <col class="tblaction"/>
             <thead>
               <tr>
                 <th>#</th>

htdocs/js/mympd.js

@@ -534,6 +534,12 @@ function appInit() {
             appGoto(app.current.app, app.current.tab, app.current.view, app.current.page + '/' + event.target.getAttribute('data-tag') + '/' + app.current.search);
     }, false);
 
+    document.getElementById('QueueColsDropdown').addEventListener('click', function(event) {
+        if (event.target.nodeName == 'INPUT') {
+            event.stopPropagation();
+        }
+    }, false);
+
     document.getElementById('search').addEventListener('submit', function() {
         return false;
     }, false);
@@ -557,6 +563,7 @@ function appInit() {
 
     dragAndDropTable('QueueList');
     dragAndDropTable('BrowsePlaylistsDetailList');
+    dragAndDropTableHeader('Queue');
 
     window.addEventListener('hashchange', appRoute, false);
 
@@ -668,7 +675,9 @@ function dragAndDropTable(table) {
         }
     }, false);
     tableBody.addEventListener('dragleave', function(event) {
-        event.preventDefault();        
+        event.preventDefault();
+        if (dragEl.nodeName != 'TR')
+            return;
         var target = event.target;
         if (event.target.nodeName == 'TD')
             target = event.target.parentNode;
@@ -677,6 +686,8 @@ function dragAndDropTable(table) {
     }, false);
     tableBody.addEventListener('dragover', function(event) {
         event.preventDefault();
+        if (dragEl.nodeName != 'TR')
+            return;
         var tr = tableBody.getElementsByClassName('dragover');
         var trLen = tr.length;
         for (var i = 0; i < trLen; i++) {
@@ -690,6 +701,9 @@ function dragAndDropTable(table) {
         event.dataTransfer.dropEffect = 'move';
     }, false);
     tableBody.addEventListener('dragend', function(event) {
+        event.preventDefault();
+        if (dragEl.nodeName != 'TR')
+            return;
         var tr = tableBody.getElementsByClassName('dragover');
         var trLen = tr.length;
         for (var i = 0; i < trLen; i++) {
@@ -701,6 +715,8 @@ function dragAndDropTable(table) {
     tableBody.addEventListener('drop', function(event) {
         event.stopPropagation();
         event.preventDefault();
+        if (dragEl.nodeName != 'TR')
+            return;
         var target = event.target;
         if (event.target.nodeName == 'TD')
             target = event.target.parentNode;
@@ -722,6 +738,67 @@ function dragAndDropTable(table) {
     }, false);
 }
 
+function dragAndDropTableHeader(table) {
+    var tableHeader=document.getElementById(table + 'List').getElementsByTagName('tr')[0];
+    tableHeader.addEventListener('dragstart', function(event) {
+        if (event.target.nodeName == 'TH') {
+            event.target.classList.add('opacity05');
+            event.dataTransfer.setDragImage(event.target, 0, 0);
+            event.dataTransfer.effectAllowed = 'move';
+            event.dataTransfer.setData('Text', event.target.getAttribute('data-col'));
+            dragEl = event.target.cloneNode(true);
+        }
+    }, false);
+    tableHeader.addEventListener('dragleave', function(event) {
+        event.preventDefault();
+        if (dragEl.nodeName != 'TH')
+            return;
+        if (event.target.nodeName == 'TH')
+            event.target.classList.remove('dragover-th');
+    }, false);
+    tableHeader.addEventListener('dragover', function(event) {
+        event.preventDefault();
+        if (dragEl.nodeName != 'TH')
+            return;
+        var th = tableHeader.getElementsByClassName('dragover-th');
+        var thLen = th.length;
+        for (var i = 0; i < thLen; i++) {
+            th[i].classList.remove('dragover-th');
+        }
+        if (event.target.nodeName == 'TH')
+            event.target.classList.add('dragover-th');
+        event.dataTransfer.dropEffect = 'move';
+    }, false);
+    tableHeader.addEventListener('dragend', function(event) {
+        event.preventDefault();
+        if (dragEl.nodeName != 'TH')
+            return;
+        var th = tableHeader.getElementsByClassName('dragover-th');
+        var thLen = th.length;
+        for (var i = 0; i < thLen; i++) {
+            th[i].classList.remove('dragover-th');
+        }
+        if (this.querySelector('[data-col=' + event.dataTransfer.getData('Text') + ']'))
+            this.querySelector('[data-col=' + event.dataTransfer.getData('Text') + ']').classList.remove('opacity05');
+    }, false);
+    tableHeader.addEventListener('drop', function(event) {
+        event.stopPropagation();
+        event.preventDefault();
+        if (dragEl.nodeName != 'TH')
+            return;
+        this.querySelector('[data-col=' + event.dataTransfer.getData('Text') + ']').remove();
+        dragEl.classList.remove('opacity05');
+        tableHeader.insertBefore(dragEl, event.target);
+        var th = tableHeader.getElementsByClassName('dragover-th');
+        var thLen = th.length;
+        for (var i = 0; i < thLen; i++) {
+            th[i].classList.remove('dragover-th');
+        }
+        document.getElementById(table + 'List').classList.add('opacity05');
+        saveCols(table);
+    }, false);
+}
+
 function playlistMoveTrack(from, to) {
     sendAPI({"cmd": "MPD_API_PLAYLIST_MOVE_TRACK","data": { "plist": app.current.search, "from": from, "to": to}});
 }
@@ -954,12 +1031,75 @@ function parseSettings(obj) {
                 obj.data.syscmds[i] + '"]}\'>' + obj.data.syscmds[i] + '</a>';
     }
     document.getElementById('syscmds').innerHTML = syscmdsList;
+    
+    setCols('Queue');
+}
+
+function setCols(table) {
+    var tagChks = '';
+    var tags = settings.tags;
+    tags.push('Duration');
+    if (table == 'Queue')
+        tags.push('Pos');
+    
+    for (var i = 0; i < tags.length; i++) {
+        tagChks += '<div class="form-check">' +
+            '<input class="form-check-input" type="checkbox" value="1" name="' + tags[i] + '"';
+        if (settings['cols' + table].includes(tags[i]))
+            tagChks += 'checked';
+        tagChks += '>' +
+            '<label class="form-check-label text-light" for="' + tags[i] + '">&nbsp;&nbsp;' + tags[i] + '</label>' +
+            '</div>';
+    }
+    document.getElementById(table + 'ColsDropdown').firstChild.innerHTML = tagChks;
+    
+    var heading = '';
+    for (var i = 0; i < settings['cols' + table].length; i++) {
+        var h = settings['cols' + table][i];
+        heading += '<th draggable="true" data-col="' + h  + '">';
+        if (h == 'Track' || h == 'Pos')
+            h = '#';
+        heading += h + '</th>';
+    }
+    heading += '<th></th>';
+    document.getElementById(table + 'List').getElementsByTagName('tr')[0].innerHTML = heading;
 }
 
 function getSettings() {
     sendAPI({"cmd": "MPD_API_SETTINGS_GET"}, parseSettings);
 }
 
+function saveCols(table) {
+    var colInputs = document.getElementById(table + 'ColsDropdown').firstChild.getElementsByTagName('input');
+    var header = document.getElementById(table + 'List').getElementsByTagName('tr')[0];
+    
+    for (var i = 0; i < colInputs.length; i++) {
+        var th = header.querySelector('[data-col=' + colInputs[i].name + ']');
+        if (colInputs[i].checked == false) {
+            if (th)
+                th.remove();
+        } 
+        else if (!th) {
+            th = document.createElement('th');
+            th.innerText = colInputs[i].name;
+            th.setAttribute('data-col', colInputs[i].name);
+            header.appendChild(th);
+        }
+    }
+    
+    var cols = {"cmd": "MPD_API_COLS_SAVE", "data": {"table": "cols" + table, "cols": []}};
+    var ths = header.getElementsByTagName('th');
+    for (var i = 0; i < ths.length; i++) {
+        var name = ths[i].getAttribute('data-col');
+        if (name)
+            cols.data.cols.push(name);
+    }
+    sendAPI(cols);
+    getSettings();
+    if (table == 'Queue')
+        getQueue();
+}
+
 function parseOutputs(obj) {
     var btns = '';
     var outputsLen = obj.data.outputs.length;
@@ -992,19 +1132,27 @@ function setCounter(currentSongId, totalTime, elapsedTime) {
     if (lastState) {
         var tr = document.getElementById('queueTrackId' + lastState.data.currentSongId);
         if (tr) {
-            var trtds = tr.getElementsByTagName('td');
+            var durationTd = tr.querySelector('[data-col=Duration]');
-            trtds[4].innerText = tr.getAttribute('data-duration');
+            if (durationTd)
-            trtds[0].classList.remove('material-icons');
+                durationTd.innerText = tr.getAttribute('data-duration');
-            trtds[0].innerText = tr.getAttribute('data-songpos');
+            var posTd = tr.querySelector('[data-col=Pos]');
+            if (posTd) {
+                posTd.classList.remove('material-icons');
+                posTd.innerText = tr.getAttribute('data-songpos');
+            }
             tr.classList.remove('font-weight-bold');
         }
     }
     var tr = document.getElementById('queueTrackId' + currentSongId);
     if (tr) {
-        var trtds = tr.getElementsByTagName('td');
+        var durationTd = tr.querySelector('[data-col=Duration]');
-        trtds[4].innerText = counterText;
+        if (durationTd)
-        trtds[0].classList.add('material-icons');
+            durationTd.innerText = counterText;
-        trtds[0].innerText = 'play_arrow';
+        var posTd = tr.querySelector('[data-col=Pos]');
+        if (posTd) {
+            posTd.classList.add('material-icons');
+            posTd.innerText = 'play_arrow';
+        }
         tr.classList.add('font-weight-bold');
     }
     
@@ -1120,22 +1268,22 @@ function parseQueue(obj) {
             if (tr[i].getAttribute('data-trackid') == obj.data[i].id && tr[i].getAttribute('data-songpos') == (obj.data[i].pos + 1))
                 continue;
                 
-        var minutes = Math.floor(obj.data[i].duration / 60);
+        var minutes = Math.floor(obj.data[i].Duration / 60);
-        var seconds = obj.data[i].duration - minutes * 60;
+        var seconds = obj.data[i].Duration - minutes * 60;
-        var duration = minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
+        obj.data[i].Duration = minutes + ':' + (seconds < 10 ? '0' : '') + seconds;
         var row = document.createElement('tr');
         row.setAttribute('draggable','true');
         row.setAttribute('data-trackid', obj.data[i].id);
         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-duration', obj.data[i].Duration);
         row.setAttribute('data-uri', obj.data[i].uri);
-        row.innerHTML = '<td>' + (obj.data[i].pos + 1) + '</td>' +
+        var tds = '';
-                        '<td>' + obj.data[i].Title + '</td>' +
+        for (var c = 0; c < settings.colsQueue.length; c++) {
-                        '<td>' + obj.data[i].Artist + '</td>' + 
+            tds += '<td data-col="' + settings.colsQueue[c] + '">' + obj.data[i][settings.colsQueue[c]] + '</td>';
-                        '<td>' + obj.data[i].Album + '</td>' +
+        }
-                        '<td>' + duration + '</td>' +
+        tds += '<td><a href="#" class="material-icons color-darkgrey">playlist_add</a></td>';
-                        '<td><a href="#" class="material-icons color-darkgrey">playlist_add</a></td>';
+        row.innerHTML = tds;
         if (i < tr.length)
             tr[i].replaceWith(row); 
         else 
@@ -1198,8 +1346,8 @@ function parseFilesystem(obj) {
                                 '<td><a href="#" class="material-icons color-darkgrey">playlist_add</a></td>';
                 break;
             case 'song':
-                var minutes = Math.floor(obj.data[i].duration / 60);
+                var minutes = Math.floor(obj.data[i].Duration / 60);
-                var seconds = obj.data[i].duration - minutes * 60;
+                var seconds = obj.data[i].Duration - minutes * 60;
                 row.innerHTML = '<td><span class="material-icons">music_note</span></td>' + 
                                 '<td>' + obj.data[i].Title + '</td>' +
                                 '<td>' + obj.data[i].Artist + '</td>' + 
@@ -1300,8 +1448,8 @@ function parsePlaylists(obj) {
             row.setAttribute('data-uri', uri);
             row.setAttribute('data-name', obj.data[i].Title);
             row.setAttribute('data-songpos', songpos);
-            var minutes = Math.floor(obj.data[i].duration / 60);
+            var minutes = Math.floor(obj.data[i].Duration / 60);
-            var seconds = obj.data[i].duration - minutes * 60;
+            var seconds = obj.data[i].Duration - minutes * 60;
             row.innerHTML = '<td>' + songpos + '</td>' + 
                             '<td>' + obj.data[i].Title + '</td>' +
                             '<td>' + obj.data[i].Artist + '</td>' + 
@@ -1600,7 +1748,7 @@ function parseSongDetails(obj) {
     for (var i = 0; i < settings.tags.length; i++) {
         songDetails += '<tr><th>' + settings.tags[i] + '</th><td>' + obj.data[settings.tags[i]] + '</td></tr>';
     }
-    var duration = obj.data.duration;
+    var duration = obj.data.Duration;
     var minutes = Math.floor(duration / 60);
     var seconds = duration - minutes * 60;
     duration = minutes + ':' + (seconds < 10 ? '0' : '') + seconds;

src/mpd_client.c

@@ -109,6 +109,40 @@ void callback_mympd(struct mg_connection *nc, const struct mg_str msg) {
                 n = snprintf(mpd.buf, MAX_SIZE, "{\"type\": \"error\", \"data\": \"MPD stickers are disabled\"}");
             }
             break;
+        case MPD_API_COLS_SAVE:
+            je = json_scanf(msg.p, msg.len, "{data: {table: %Q}}", &p_charbuf1);
+            if (je == 1) {
+                char column_list[800];
+                snprintf(column_list, 800, "%.*s", msg.len, msg.p);
+                char *cols = strchr(column_list, '[');
+                int len = strlen(cols); 
+                if (len > 1)
+                    cols[len - 2]  = '\0';
+                if (strcmp(p_charbuf1,"colsQueue")==0) {
+                    free(mympd_state.colsQueue);
+                    mympd_state.colsQueue = strdup(cols);
+                }
+                else if (strcmp(p_charbuf1,"colsSearch")==0) {
+                    free(mympd_state.colsSearch);
+                    mympd_state.colsSearch = strdup(cols);
+                }
+                else if (strcmp(p_charbuf1,"colsBrowseDatabase")==0) {
+                    free(mympd_state.colsBrowseDatabase);
+                    mympd_state.colsBrowseDatabase = strdup(cols);
+                }
+                else if (strcmp(p_charbuf1,"colsBrowsePlaylistsDetails")==0) {
+                    free(mympd_state.colsBrowsePlaylistsDetails);
+                    mympd_state.colsBrowsePlaylistsDetails = strdup(cols);
+                }
+                else if (strcmp(p_charbuf1,"colsBrowseFilesystem")==0) {
+                    free(mympd_state.colsBrowseFilesystem);
+                    mympd_state.colsBrowseFilesystem = strdup(cols);
+                }
+                mympd_state_set(p_charbuf1, cols);
+                free(p_charbuf1);
+            }
+            n = snprintf(mpd.buf, MAX_SIZE, "{\"type\": \"result\", \"data\": \"ok\"}");
+            break;
         case MPD_API_SYSCMD:
             je = json_scanf(msg.p, msg.len, "{data: {cmd: %Q}}", &p_charbuf1);
             if (je == 1) {
@@ -1308,9 +1342,7 @@ int mympd_put_settings(char *buffer) {
         len += json_printf(&out, "%Q", current->data);
         current = current->next;
     }
-
     len += json_printf(&out, "], syscmds: [");
-
     nr = 0;
     current = syscmds.list;
     while (current != NULL) {
@@ -1319,8 +1351,13 @@ int mympd_put_settings(char *buffer) {
         len += json_printf(&out, "%Q", current->data);
         current = current->next;
     }
-    
+    len += json_printf(&out, "]");
-    len += json_printf(&out, "]}}");    
+    len += json_printf(&out, ", colsQueue: %s", mympd_state.colsQueue);
+    len += json_printf(&out, ", colsSearch: %s", mympd_state.colsSearch);
+    len += json_printf(&out, ", colsBrowseDatabase: %s", mympd_state.colsBrowseFilesystem);
+    len += json_printf(&out, ", colsBrowsePlaylistsDetails: %s", mympd_state.colsBrowsePlaylistsDetails);
+    len += json_printf(&out, ", colsBrowseFilesystem: %s", mympd_state.colsBrowseFilesystem);
+    len += json_printf(&out, "}}");    
 
     CHECK_RETURN_LEN();
     return len;
@@ -1505,7 +1542,7 @@ int mympd_put_queue(char *buffer, unsigned int offset, unsigned *queue_version,
             entity_count++;
             if (entities_returned++) 
                 len += json_printf(&out, ",");
-            len += json_printf(&out, "{id: %d, pos: %d, ",
+            len += json_printf(&out, "{id: %d, Pos: %d, ",
                 mpd_song_get_id(song),
                 mpd_song_get_pos(song)
             );
@@ -1564,7 +1601,7 @@ int mympd_put_browse(char *buffer, char *path, unsigned int offset, char *filter
                     ) {
                         if (entities_returned++) 
                             len += json_printf(&out, ",");
-                        len += json_printf(&out, "{type: song, ");
+                        len += json_printf(&out, "{Type: song, ");
                         PUT_SONG_TAGS();
                         len += json_printf(&out, "}");
                     } else {
@@ -1587,7 +1624,7 @@ int mympd_put_browse(char *buffer, char *path, unsigned int offset, char *filter
                     ) {                
                         if (entities_returned++) 
                             len += json_printf(&out, ",");
-                        len += json_printf(&out, "{type: dir, uri: %Q, name: %Q}",
+                        len += json_printf(&out, "{Type: dir, uri: %Q, name: %Q}",
                             entityName,
                             dirName
                         );
@@ -1615,7 +1652,7 @@ int mympd_put_browse(char *buffer, char *path, unsigned int offset, char *filter
                             smartpls = true;
                         else
                             smartpls = false;                    
-                        len += json_printf(&out, "{type: %Q, uri: %Q, name: %Q}",
+                        len += json_printf(&out, "{Type: %Q, uri: %Q, name: %Q}",
                             (smartpls == true ? "smartpls" : "plist"),
                             entityName,
                             plName
@@ -1734,7 +1771,7 @@ int mympd_put_songs_in_album(char *buffer, char *album, char *search, char *tag)
                     mympd_get_cover(mpd_song_get_uri(song), cover, 500);
                     albumartist = strdup(mympd_get_tag(song, MPD_TAG_ALBUM_ARTIST));
                 }
-                len += json_printf(&out, "{type: song, uri: %Q, duration: %d, Title: %Q, Track: %Q}",
+                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_tag(song, MPD_TAG_TITLE),

src/mpd_client.h

@@ -59,7 +59,7 @@
         len += json_printf(&out, "%Q: %Q", current->data, mympd_get_tag(song, mpd_tag_name_parse(current->data))); \
         current = current->next; \
     } \
-    len += json_printf(&out, ", duration: %d, uri: %Q", mpd_song_get_duration(song), mpd_song_get_uri(song)); \
+    len += json_printf(&out, ", Duration: %d, uri: %Q", mpd_song_get_duration(song), mpd_song_get_uri(song)); \
 } while (0)
 
 
@@ -123,6 +123,7 @@
     X(MPD_API_WELCOME) \
     X(MPD_API_LIKE) \
     X(MPD_API_SYSCMD) \
+    X(MPD_API_COLS_SAVE) \
     X(MPD_API_UNKNOWN)
 
 enum mpd_cmd_ids {
@@ -202,6 +203,11 @@ typedef struct {
     int jukeboxMode;
     const char* jukeboxPlaylist;
     int jukeboxQueueLength;
+    char* colsQueue;
+    char* colsSearch;
+    char* colsBrowseDatabase;
+    char* colsBrowsePlaylistsDetails;
+    char* colsBrowseFilesystem;
 } t_mympd_state;
 
 t_mympd_state mympd_state;

src/mympd.c

@@ -242,7 +242,7 @@ void read_statefiles() {
     if (mympd_state_get("jukeboxPlaylist", value))
         mympd_state.jukeboxPlaylist = strdup(value);
     else {
-        mympd_state.jukeboxPlaylist = "Database";
+        mympd_state.jukeboxPlaylist = strdup("Database");
         mympd_state_set("jukeboxPlaylist", "Database");
     }
 
@@ -252,6 +252,41 @@ void read_statefiles() {
         mympd_state.jukeboxQueueLength = 1;
         mympd_state_set("jukeboxQueueLength", "1");
     }
+    
+    if (mympd_state_get("colsQueue", value))
+        mympd_state.colsQueue = strdup(value);
+    else {
+        mympd_state.colsQueue = strdup("[\"Pos\",\"Title\",\"Artist\",\"Album\",\"Duration\"]");
+        mympd_state_set("colsQueue", mympd_state.colsQueue);
+    }
+    
+    if (mympd_state_get("colsSearch", value))
+        mympd_state.colsSearch = strdup(value);
+    else {
+        mympd_state.colsSearch = strdup("[\"Title\",\"Artist\",\"Album\",\"Duration\"]");
+        mympd_state_set("colsSearch", mympd_state.colsSearch);
+    }
+    
+    if (mympd_state_get("colsBrowseDatabase", value))
+        mympd_state.colsBrowseDatabase = strdup(value);
+    else {
+        mympd_state.colsBrowseDatabase = strdup("[\"Track\",\"Title\"]");
+        mympd_state_set("colsBrowseDatabase", mympd_state.colsBrowseDatabase);
+    }
+    
+    if (mympd_state_get("colsBrowsePlaylistsDetails", value))
+        mympd_state.colsBrowsePlaylistsDetails = strdup(value);
+    else {
+        mympd_state.colsBrowsePlaylistsDetails = strdup("[\"Pos\",\"Title\",\"Artist\",\"Album\",\"Duration\"]");
+        mympd_state_set("colsBrowsePlaylistsDetails", mympd_state.colsBrowsePlaylistsDetails);
+    }
+    
+    if (mympd_state_get("colsBrowseFilesystem", value))
+        mympd_state.colsBrowseFilesystem = strdup(value);
+    else {
+        mympd_state.colsBrowseFilesystem = strdup("[\"Type\",\"Title\",\"Artist\",\"Album\",\"Duration\"]");
+        mympd_state_set("colsBrowseFilesystem", mympd_state.colsBrowseFilesystem);
+    }
 }
 
 bool testdir(char *name, char *dirname) {