diff --git a/htdocs/index.html b/htdocs/index.html index 48f7aac..8c3c1b5 100644 --- a/htdocs/index.html +++ b/htdocs/index.html @@ -81,6 +81,12 @@
Playback +
+ + +
diff --git a/htdocs/js/mympd.js b/htdocs/js/mympd.js index ed8d92c..621a500 100644 --- a/htdocs/js/mympd.js +++ b/htdocs/js/mympd.js @@ -25,6 +25,7 @@ var socket; var lastSong = ''; +var lastSongObj = {}; var lastState; var currentSong = new Object(); var playstate = ''; @@ -564,6 +565,12 @@ function appInit() { if (event.target.nodeName == 'INPUT') { event.stopPropagation(); } + }, false); + + document.getElementById('PlaybackColsDropdown').addEventListener('click', function(event) { + if (event.target.nodeName == 'INPUT') { + event.stopPropagation(); + } }, false); document.getElementById('search').addEventListener('submit', function() { @@ -980,12 +987,12 @@ function filterCols(x) { tags.push('Duration'); if (x == 'colsQueue' || x == 'colsBrowsePlaylistsDetail') tags.push('Pos'); - if (x == 'colsBrowseFilesystem') + else if (x == 'colsBrowseFilesystem') tags.push('Type'); var cols = []; for (var i = 0; i < settings[x].length; i++) { - if (tags.includes(settings[x][i])) + if (tags.includes(settings[x][i])) cols.push(settings[x][i]); } settings[x] = cols; @@ -1067,12 +1074,13 @@ function parseSettings(obj) { else { var pbtl = ''; for (var i = 0; i < settings.colsPlayback.length; i++) { - pbtl += '' + settings.colsPlayback[i] + '' + - '

' + + '' + settings.colsPlayback[i] + '' + + '' + - ( lastSong ? lastSong[settings.colsPlayback[i]] : '') + '

'; + pbtl += ' class="clickable"'; + pbtl += '>' + (lastSongObj.data ? lastSongObj.data[settings.colsPlayback[i]] : '') + '
'; } document.getElementById('cardPlaybackTags').innerHTML = pbtl; } @@ -1156,6 +1164,7 @@ function parseSettings(obj) { setCols('BrowseFilesystem'); setCols('BrowsePlaylistsDetail'); setCols('BrowseDatabase', '.tblAlbumTitles'); + setCols('Playback'); if (app.current.app == 'Queue') getQueue(); else if (app.current.app == 'Search') @@ -1182,6 +1191,8 @@ function setCols(table, className) { tags.sort(); for (var i = 0; i < tags.length; i++) { + if (table == 'Playback' && tags[i] == 'Title') + continue; tagChks += '
' + ''; - if (h == 'Track' || h == 'Pos') - h = '#'; - heading += h + ''; - } - heading += ''; - if (className == undefined) - document.getElementById(table + 'List').getElementsByTagName('tr')[0].innerHTML = heading; - else { - var tbls = document.querySelectorAll(className); - for (var i = 0; i < tbls.length; i++) { - tbls[i].getElementsByTagName('tr')[0].innerHTML = heading; + if (table != 'Playback') { + var heading = ''; + for (var i = 0; i < settings['cols' + table].length; i++) { + var h = settings['cols' + table][i]; + heading += ''; + if (h == 'Track' || h == 'Pos') + h = '#'; + heading += h + ''; + } + heading += ''; + if (className == undefined) + document.getElementById(table + 'List').getElementsByTagName('tr')[0].innerHTML = heading; + else { + var tbls = document.querySelectorAll(className); + for (var i = 0; i < tbls.length; i++) { + tbls[i].getElementsByTagName('tr')[0].innerHTML = heading; + } } } } @@ -1249,6 +1262,35 @@ function saveCols(table, tableEl) { sendAPI(cols, getSettings); } +function saveColsPlayback(table) { + var colInputs = document.getElementById(table + 'ColsDropdown').firstChild.getElementsByTagName('input'); + var header = document.getElementById('cardPlaybackTags'); + + for (var i = 0; i < colInputs.length; i++) { + var th = document.getElementById('current' + colInputs[i].name); + if (colInputs[i].checked == false) { + if (th) + th.remove(); + } + else if (!th) { + th = document.createElement('div'); + th.innerHTML = '' + colInputs[i].name + '

'; + th.setAttribute('id', 'current'+ colInputs[i].name); + th.setAttribute('data-tag', colInputs[i].name); + header.appendChild(th); + } + } + + var cols = {"cmd": "MPD_API_COLS_SAVE", "data": {"table": "cols" + table, "cols": []}}; + var ths = header.getElementsByTagName('div'); + for (var i = 0; i < ths.length; i++) { + var name = ths[i].getAttribute('data-tag'); + if (name) + cols.data.cols.push(name); + } + sendAPI(cols, getSettings); +} + function parseOutputs(obj) { var btns = ''; var outputsLen = obj.data.outputs.length; @@ -1905,8 +1947,8 @@ function titleClick() { } function gotoBrowse(x) { - var tag = x.getAttribute('data-tag'); - var name = decodeURI(x.getAttribute('data-name')); + var tag = x.parentNode.getAttribute('data-tag'); + var name = decodeURI(x.parentNode.getAttribute('data-name')); if (tag != '' && name != '' && settings.browsetags.includes(tag)) appGoto('Browse', 'Database', tag, '0/-/' + name); } @@ -2717,7 +2759,7 @@ function songChange(obj) { 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.getElementsByTagName('h4')[0].innerText = obj.data[settings.colsPlayback[i]]; c.setAttribute('data-name', encodeURI(obj.data[settings.colsPlayback[i]])); } @@ -2728,6 +2770,7 @@ function songChange(obj) { showNotification(obj.data.Title, textNotification, htmlNotification, 'success'); lastSong = curSong; + lastSongObj = obj; } function doSetFilterLetter(x) { diff --git a/src/mpd_client.c b/src/mpd_client.c index 1b409a4..cad1d58 100644 --- a/src/mpd_client.c +++ b/src/mpd_client.c @@ -138,6 +138,10 @@ void callback_mympd(struct mg_connection *nc, const struct mg_str msg) { free(mympd_state.colsBrowseFilesystem); mympd_state.colsBrowseFilesystem = strdup(cols); } + else if (strcmp(p_charbuf1,"colsPlayback")==0) { + free(mympd_state.colsPlayback); + mympd_state.colsPlayback = strdup(cols); + } mympd_state_set(p_charbuf1, cols); free(p_charbuf1); }