mirrors/ympd
1
0
Fork 0
mirror of https://github.com/SuperBFG7/ympd synced 2025-10-30 21:33:00 +00:00
Code Issues Releases Wiki Activity

Add visiual feedback on actions

Browse Source
This commit is contained in:
jcorporation
2018-07-05 22:56:42 +01:00
parent c782c05003
commit aa2efa5ed9
3 changed files with 58 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
CMakeLists.txt
View File

@@ -4,7 +4,7 @@ project (mympd C)
set(CMAKE_MODULE_PATH ${CMAKE_MODULE_PATH} "${PROJECT_SOURCE_DIR}/cmake/") set(CMAKE_MODULE_PATH ${CMAKE_MODULE_PATH} "${PROJECT_SOURCE_DIR}/cmake/")
set(CPACK_PACKAGE_VERSION_MAJOR "3") set(CPACK_PACKAGE_VERSION_MAJOR "3")
set(CPACK_PACKAGE_VERSION_MINOR "1") set(CPACK_PACKAGE_VERSION_MINOR "1")
set(CPACK_PACKAGE_VERSION_PATCH "0") set(CPACK_PACKAGE_VERSION_PATCH "1")
if(CMAKE_BUILD_TYPE MATCHES RELEASE) if(CMAKE_BUILD_TYPE MATCHES RELEASE)
set(ASSETS_PATH "${CMAKE_INSTALL_PREFIX}/share/${PROJECT_NAME}/htdocs") set(ASSETS_PATH "${CMAKE_INSTALL_PREFIX}/share/${PROJECT_NAME}/htdocs")

4
htdocs/css/mpd.css
View File

@@ -210,4 +210,8 @@ div.alertBoxActive {
.popover-content { .popover-content {
padding-top:4px; padding-top:4px;
padding-bottom:4px; padding-bottom:4px;
}
.opacity05 {
opacity:0.5;
} }

102
htdocs/js/mpd.js
View File

@@ -76,14 +76,14 @@ var mainMenu = new Dropdown(document.getElementById('mainMenu'));
function appPrepare() { function appPrepare() {
if (app.current.app != app.last.app || app.current.tab != app.last.tab || app.current.view != app.last.view) { if (app.current.app != app.last.app || app.current.tab != app.last.tab || app.current.view != app.last.view) {
//Hide all cards + nav //Hide all cards + nav
for ( var i = 0; i < domCache.navbarBottomBtnsLen; i ++) { for (var i = 0; i < domCache.navbarBottomBtnsLen; i ++) {
domCache.navbarBottomBtns[i].classList.remove('active'); domCache.navbarBottomBtns[i].classList.remove('active');
} }
document.getElementById('cardPlayback').classList.add('hide'); document.getElementById('cardPlayback').classList.add('hide');
document.getElementById('cardQueue').classList.add('hide'); document.getElementById('cardQueue').classList.add('hide');
document.getElementById('cardBrowse').classList.add('hide'); document.getElementById('cardBrowse').classList.add('hide');
document.getElementById('cardSearch').classList.add('hide'); document.getElementById('cardSearch').classList.add('hide');
for ( var i = 0; i < domCache.panelHeadingBrowseLen; i ++) { for (var i = 0; i < domCache.panelHeadingBrowseLen; i ++) {
domCache.panelHeadingBrowse[i].classList.remove('active'); domCache.panelHeadingBrowse[i].classList.remove('active');
} }
document.getElementById('cardBrowsePlaylists').classList.add('hide'); document.getElementById('cardBrowsePlaylists').classList.add('hide');
@@ -150,6 +150,7 @@ function appRoute() {
sendAPI({"cmd":"MPD_API_GET_CURRENT_SONG"}, songChange); sendAPI({"cmd":"MPD_API_GET_CURRENT_SONG"}, songChange);
} }
else if (app.current.app == 'Queue' ) { else if (app.current.app == 'Queue' ) {
document.getElementById('QueueList').classList.add('opacity05');
if (app.last.app != app.current.app) { if (app.last.app != app.current.app) {
if (app.current.search.length < 2) { if (app.current.search.length < 2) {
setPagination(app.current.page); setPagination(app.current.page);
@@ -166,18 +167,22 @@ function appRoute() {
getQueue(); getQueue();
} }
else if (app.current.app == 'Browse' && app.current.tab == 'Playlists') { else if (app.current.app == 'Browse' && app.current.tab == 'Playlists') {
document.getElementById('BrowsePlaylistsList').classList.add('opacity05');
sendAPI({"cmd":"MPD_API_GET_PLAYLISTS","data": {"offset": app.current.page, "filter": app.current.filter}},parsePlaylists); sendAPI({"cmd":"MPD_API_GET_PLAYLISTS","data": {"offset": app.current.page, "filter": app.current.filter}},parsePlaylists);
doSetFilterLetter('BrowsePlaylistsFilter'); doSetFilterLetter('BrowsePlaylistsFilter');
} }
else if (app.current.app == 'Browse' && app.current.tab == 'Database' && app.current.view == 'Artist') { else if (app.current.app == 'Browse' && app.current.tab == 'Database' && app.current.view == 'Artist') {
document.getElementById('BrowseDatabaseArtistList').classList.add('opacity05');
sendAPI({"cmd":"MPD_API_GET_ARTISTS","data": {"offset": app.current.page, "filter": app.current.filter}}, parseListDBtags); sendAPI({"cmd":"MPD_API_GET_ARTISTS","data": {"offset": app.current.page, "filter": app.current.filter}}, parseListDBtags);
doSetFilterLetter('BrowseDatabaseFilter'); doSetFilterLetter('BrowseDatabaseFilter');
} }
else if (app.current.app == 'Browse' && app.current.tab == 'Database' && app.current.view == 'Album') { else if (app.current.app == 'Browse' && app.current.tab == 'Database' && app.current.view == 'Album') {
document.getElementById('BrowseDatabaseAlbumCards').classList.add('opacity05');
sendAPI({"cmd":"MPD_API_GET_ARTISTALBUMS","data": {"offset": app.current.page, "filter": app.current.filter, "albumartist": app.current.search}}, parseListDBtags); sendAPI({"cmd":"MPD_API_GET_ARTISTALBUMS","data": {"offset": app.current.page, "filter": app.current.filter, "albumartist": app.current.search}}, parseListDBtags);
doSetFilterLetter('BrowseDatabaseFilter'); doSetFilterLetter('BrowseDatabaseFilter');
} }
else if (app.current.app == 'Browse' && app.current.tab == 'Filesystem') { else if (app.current.app == 'Browse' && app.current.tab == 'Filesystem') {
document.getElementById('BrowseFilesystemList').classList.add('opacity05');
sendAPI({"cmd":"MPD_API_GET_FILESYSTEM","data": {"offset": app.current.page, "path": (app.current.search ? app.current.search : "/"), "filter": app.current.filter}}, parseFilesystem); sendAPI({"cmd":"MPD_API_GET_FILESYSTEM","data": {"offset": app.current.page, "path": (app.current.search ? app.current.search : "/"), "filter": app.current.filter}}, parseFilesystem);
// Don't add all songs from root // Don't add all songs from root
if (app.current.search) if (app.current.search)
@@ -210,6 +215,8 @@ function appRoute() {
doSetFilterLetter('BrowseFilesystemFilter'); doSetFilterLetter('BrowseFilesystemFilter');
} }
else if (app.current.app == 'Search') { else if (app.current.app == 'Search') {
document.getElementById('searchstr2').focus();
document.getElementById('SearchList').classList.add('opacity05');
if (app.last.app != app.current.app) { if (app.last.app != app.current.app) {
if (app.current.search != '') if (app.current.search != '')
document.getElementById('SearchList').getElementsByTagName('tbody')[0].innerHTML= document.getElementById('SearchList').getElementsByTagName('tbody')[0].innerHTML=
@@ -228,6 +235,7 @@ function appRoute() {
document.getElementById('searchAddAllSongs').setAttribute('disabled', 'disabled'); document.getElementById('searchAddAllSongs').setAttribute('disabled', 'disabled');
document.getElementById('panel-heading-search').innerText = ''; document.getElementById('panel-heading-search').innerText = '';
setPagination(app.current.page); setPagination(app.current.page);
document.getElementById('SearchList').classList.remove('opacity05');
} }
var btns = document.getElementById('searchtags2').getElementsByTagName('button'); var btns = document.getElementById('searchtags2').getElementsByTagName('button');
@@ -257,7 +265,7 @@ function appInit() {
domCache.volumeBar.value = 0; domCache.volumeBar.value = 0;
domCache.volumeBar.addEventListener('change', function(event) { domCache.volumeBar.addEventListener('change', function(event) {
sendAPI({"cmd": "MPD_API_SET_VOLUME","data": {"volume": domCache.volumeBar.value}}); sendAPI({"cmd": "MPD_API_SET_VOLUME","data": {"volume": domCache.volumeBar.value}});
}, false); }, false);
domCache.progressBar.value = 0; domCache.progressBar.value = 0;
@@ -335,6 +343,7 @@ function appInit() {
if (event.target.nodeName == 'BUTTON') if (event.target.nodeName == 'BUTTON')
event.stopPropagation(); event.stopPropagation();
sendAPI({"cmd": "MPD_API_TOGGLE_OUTPUT", "data": {"output": event.target.getAttribute('data-output-id'), "state": (event.target.classList.contains('active') ? 0 : 1)}}); sendAPI({"cmd": "MPD_API_TOGGLE_OUTPUT", "data": {"output": event.target.getAttribute('data-output-id'), "state": (event.target.classList.contains('active') ? 0 : 1)}});
toggleBtn(event.target.id);
}, false); }, false);
document.getElementById('QueueList').addEventListener('click', function(event) { document.getElementById('QueueList').addEventListener('click', function(event) {
@@ -466,6 +475,7 @@ function webSocketConnect() {
socket.onmessage = function got_packet(msg) { socket.onmessage = function got_packet(msg) {
if(msg.data === last_state || msg.data.length == 0) if(msg.data === last_state || msg.data.length == 0)
return; return;
try { try {
var obj = JSON.parse(msg.data); var obj = JSON.parse(msg.data);
} catch(e) { } catch(e) {
@@ -522,11 +532,11 @@ function getWsUrl() {
} }
u = u.split('#'); u = u.split('#');
if (/\/$/.test(u[0])) { if (/\/$/.test(u[0]))
separator = ''; separator = '';
} else { else
separator = '/'; separator = '/';
}
return pcol + u[0] + separator + 'ws'; return pcol + u[0] + separator + 'ws';
} }
@@ -766,7 +776,7 @@ function parseQueue(obj) {
'<td>' + obj.data[i].artist + '</td>' + '<td>' + obj.data[i].artist + '</td>' +
'<td>' + obj.data[i].album + '</td>' + '<td>' + obj.data[i].album + '</td>' +
'<td>' + duration + '</td>' + '<td>' + duration + '</td>' +
'<td><a href="#" class="material-icons">playlist_add</a></td>'; '<td><a href="#" class="material-icons color-darkgrey">playlist_add</a></td>';
if (i < tr.length) if (i < tr.length)
tr[i].replaceWith(row); tr[i].replaceWith(row);
else else
@@ -785,6 +795,7 @@ function parseQueue(obj) {
'<td colspan="5">Empty queue</td></tr>'; '<td colspan="5">Empty queue</td></tr>';
setPagination(obj.totalEntities); setPagination(obj.totalEntities);
document.getElementById('QueueList').classList.remove('opacity05');
} }
function parseSearch(obj) { function parseSearch(obj) {
@@ -818,7 +829,7 @@ function parseFilesystem(obj) {
case 'dir': case 'dir':
row.innerHTML = '<td><span class="material-icons">folder_open</span></td>' + row.innerHTML = '<td><span class="material-icons">folder_open</span></td>' +
'<td colspan="4">' + obj.data[i].name + '</td>' + '<td colspan="4">' + obj.data[i].name + '</td>' +
'<td><a href="#" class="material-icons">playlist_add</a></td>'; '<td><a href="#" class="material-icons color-darkgrey">playlist_add</a></td>';
break; break;
case 'song': case 'song':
var minutes = Math.floor(obj.data[i].duration / 60); var minutes = Math.floor(obj.data[i].duration / 60);
@@ -828,12 +839,12 @@ function parseFilesystem(obj) {
'<td>' + obj.data[i].artist + '</td>' + '<td>' + obj.data[i].artist + '</td>' +
'<td>' + obj.data[i].album + '</td>' + '<td>' + obj.data[i].album + '</td>' +
'<td>' + minutes + ':' + (seconds < 10 ? '0' : '') + seconds + '<td>' + minutes + ':' + (seconds < 10 ? '0' : '') + seconds +
'</td><td><a href="#" class="material-icons">playlist_add</a></td>'; '</td><td><a href="#" class="material-icons color-darkgrey">playlist_add</a></td>';
break; break;
case 'plist': case 'plist':
row.innerHTML = '<td><span class="material-icons">list</span></td>' + row.innerHTML = '<td><span class="material-icons">list</span></td>' +
'<td colspan="4">' + obj.data[i].name + '</td>' + '<td colspan="4">' + obj.data[i].name + '</td>' +
'<td><a href="#" class="material-icons">playlist_add</a></td>'; '<td><a href="#" class="material-icons color-darkgrey">playlist_add</a></td>';
break; break;
} }
if (i < tr.length) if (i < tr.length)
@@ -851,6 +862,7 @@ function parseFilesystem(obj) {
if (nrItems == 0) if (nrItems == 0)
tbody.innerHTML = '<tr><td><span class="material-icons">error_outline</span></td>' + tbody.innerHTML = '<tr><td><span class="material-icons">error_outline</span></td>' +
'<td colspan="5">No results</td></tr>'; '<td colspan="5">No results</td></tr>';
document.getElementById(app.current.app + (app.current.tab==undefined ? '' : app.current.tab) + 'List').classList.remove('opacity05');
} }
function parsePlaylists(obj) { function parsePlaylists(obj) {
@@ -873,7 +885,7 @@ function parsePlaylists(obj) {
row.innerHTML = '<td><span class="material-icons">list</span></td>' + row.innerHTML = '<td><span class="material-icons">list</span></td>' +
'<td>' + obj.data[i].name + '</td>' + '<td>' + obj.data[i].name + '</td>' +
'<td>'+ d.toUTCString() + '</td>' + '<td>'+ d.toUTCString() + '</td>' +
'<td><a href="#" class="material-icons">playlist_add</a></td>'; '<td><a href="#" class="material-icons color-darkgrey">playlist_add</a></td>';
if (i < tr.length) if (i < tr.length)
tr[i].replaceWith(row); tr[i].replaceWith(row);
else else
@@ -889,6 +901,7 @@ function parsePlaylists(obj) {
if (nrItems == 0) if (nrItems == 0)
tbody.innerHTML = '<tr><td><span class="material-icons">error_outline</span></td>' + tbody.innerHTML = '<tr><td><span class="material-icons">error_outline</span></td>' +
'<td colspan="5">No playlists found.</td></tr>' '<td colspan="5">No playlists found.</td></tr>'
document.getElementById(app.current.app + (app.current.tab==undefined ? '' : app.current.tab) + 'List').classList.remove('opacity05');
} }
function parseListDBtags(obj) { function parseListDBtags(obj) {
@@ -927,6 +940,7 @@ function parseListDBtags(obj) {
if (nrItems == 0) if (nrItems == 0)
tbody.innerHTML = '<tr><td><span class="material-icons">error_outline</span></td>' + tbody.innerHTML = '<tr><td><span class="material-icons">error_outline</span></td>' +
'<td colspan="5">No entries found.</td></tr>' '<td colspan="5">No entries found.</td></tr>'
document.getElementById('BrowseDatabaseArtistList').classList.remove('opacity05');
} else if (obj.tagtype == 'Album') { } else if (obj.tagtype == 'Album') {
document.getElementById('BrowseDatabaseAlbumCards').classList.remove('hide'); document.getElementById('BrowseDatabaseAlbumCards').classList.remove('hide');
@@ -965,6 +979,7 @@ function parseListDBtags(obj) {
cards[i].remove(); cards[i].remove();
} }
setPagination(obj.totalEntities); setPagination(obj.totalEntities);
document.getElementById('BrowseDatabaseAlbumCards').classList.remove('opacity05');
} }
} }
@@ -987,13 +1002,12 @@ function parseListTitles(obj) {
for (var i = 0; i < nrItems; i ++) { for (var i = 0; i < nrItems; i ++) {
titleList += '<tr data-type="song" data-name="' + obj.data[i].title + '" data-uri="' + encodeURI(obj.data[i].uri) + '">' + titleList += '<tr data-type="song" data-name="' + obj.data[i].title + '" data-uri="' + encodeURI(obj.data[i].uri) + '">' +
'<td>' + obj.data[i].track + '</td><td>' + obj.data[i].title + '</td>' + '<td>' + obj.data[i].track + '</td><td>' + obj.data[i].title + '</td>' +
'<td><a href="#" class="material-icons">playlist_add</a></td>' + '<td><a href="#" class="material-icons color-darkgrey">playlist_add</a></td>' +
'</tr>'; '</tr>';
} }
tbody.innerHTML = titleList; tbody.innerHTML = titleList;
imga.addEventListener('click', function(event) { imga.addEventListener('click', function(event) {
//appendQueue('song', decodeURI(this.getAttribute('data-uri')), this.getAttribute('data-name'));
event.preventDefault(); event.preventDefault();
showMenu(this); showMenu(this);
}, false); }, false);
@@ -1044,7 +1058,6 @@ function setPagination(number) {
document.getElementById(cat + p[i] + 'Prev').setAttribute('disabled', 'disabled'); document.getElementById(cat + p[i] + 'Prev').setAttribute('disabled', 'disabled');
} }
} }
} }
function appendQueue(type, uri, name) { function appendQueue(type, uri, name) {
@@ -1165,14 +1178,6 @@ function showMenu(el) {
} }
} }
function shuffleQueue() {
sendAPI({"cmd":"MPD_API_SEND_SHUFFLE"});
}
function clearQueue() {
sendAPI({"cmd":"MPD_API_RM_ALL"});
}
function sendAPI(request, callback) { function sendAPI(request, callback) {
var ajaxRequest=new XMLHttpRequest(); var ajaxRequest=new XMLHttpRequest();
ajaxRequest.open('POST', '/api', true); ajaxRequest.open('POST', '/api', true);
@@ -1214,7 +1219,6 @@ function clickNext() {
sendAPI({"cmd": "MPD_API_SET_NEXT"}); sendAPI({"cmd": "MPD_API_SET_NEXT"});
} }
function delQueueSong(mode, start, end) { function delQueueSong(mode, start, end) {
if (mode == 'range') if (mode == 'range')
sendAPI({"cmd": "MPD_API_RM_RANGE", "data": {"start": start, "end": end}}); sendAPI({"cmd": "MPD_API_RM_RANGE", "data": {"start": start, "end": end}});
@@ -1231,34 +1235,34 @@ function confirmSettings() {
var formOK = true; var formOK = true;
var inputCrossfade = document.getElementById('inputCrossfade'); var inputCrossfade = document.getElementById('inputCrossfade');
if (!inputCrossfade.getAttribute('disabled')) { if (!inputCrossfade.getAttribute('disabled')) {
var value = parseInt(inputCrossfade.value); var value = parseInt(inputCrossfade.value);
if (!isNaN(value)) { if (!isNaN(value)) {
inputCrossfade.value = value; inputCrossfade.value = value;
} else { } else {
inputCrossfade.classList.add('is-invalid'); inputCrossfade.classList.add('is-invalid');
formOK = false; formOK = false;
} }
} }
var inputMixrampdb = document.getElementById('inputMixrampdb'); var inputMixrampdb = document.getElementById('inputMixrampdb');
if (!inputMixrampdb.getAttribute('disabled')) { if (!inputMixrampdb.getAttribute('disabled')) {
var value = parseFloat(inputMixrampdb.value); var value = parseFloat(inputMixrampdb.value);
if (!isNaN(value)) { if (!isNaN(value)) {
inputMixrampdb.value = value; inputMixrampdb.value = value;
} else { } else {
inputMixrampdb.classList.add('is-invalid'); inputMixrampdb.classList.add('is-invalid');
formOK = false; formOK = false;
} }
} }
var inputMixrampdelay = document.getElementById('inputMixrampdelay'); var inputMixrampdelay = document.getElementById('inputMixrampdelay');
if (!inputMixrampdelay.getAttribute('disabled')) { if (!inputMixrampdelay.getAttribute('disabled')) {
if (inputMixrampdelay.value == 'nan') inputMixrampdelay.value = '-1'; if (inputMixrampdelay.value == 'nan') inputMixrampdelay.value = '-1';
var value = parseFloat(inputMixrampdelay.value); var value = parseFloat(inputMixrampdelay.value);
if (!isNaN(value)) { if (!isNaN(value)) {
inputMixrampdelay.value = value; inputMixrampdelay.value = value;
} else { } else {
inputMixrampdelay.classList.add('is-invalid'); inputMixrampdelay.classList.add('is-invalid');
formOK = false; formOK = false;
} }
} }
if (formOK == true) { if (formOK == true) {
var selectReplaygain = document.getElementById('selectReplaygain'); var selectReplaygain = document.getElementById('selectReplaygain');
@@ -1288,7 +1292,7 @@ function addAllFromBrowse() {
function addAllFromSearch() { function addAllFromSearch() {
if (app.current.search.length >= 2) { if (app.current.search.length >= 2) {
sendAPI({"cmd":"MPD_API_SEARCH_ADD", "data":{"filter": app.current.filter, "searchstr": app.current.search}}); sendAPI({"cmd":"MPD_API_SEARCH_ADD", "data":{"filter": app.current.filter, "searchstr": app.current.search}});
showNotification('Added '+ parseInt(document.getElementById('panel-heading-search').innerText) +' songs from search','','','success'); showNotification('Added '+ parseInt(document.getElementById('panel-heading-search').innerText) +' songs from search', '', '', 'success');
} }
} }
@@ -1316,7 +1320,7 @@ function gotoPage(x) {
function addStream() { function addStream() {
var streamUrl = document.getElementById('streamurl'); var streamUrl = document.getElementById('streamurl');
if (streamUrl.value != '') if (streamUrl.value != '')
sendAPI({"cmd": "MPD_API_ADD_TRACK","data": {"uri": streamUrl.value}}); sendAPI({"cmd": "MPD_API_ADD_TRACK", "data": {"uri": streamUrl.value}});
streamUrl.value = ''; streamUrl.value = '';
modalAddstream.hide(); modalAddstream.hide();
} }
@@ -1324,7 +1328,7 @@ function addStream() {
function saveQueue() { function saveQueue() {
var plName = document.getElementById('playlistname'); var plName = document.getElementById('playlistname');
if (plName.value != '') if (plName.value != '')
sendAPI({"cmd":"MPD_API_SAVE_QUEUE","data":{"plist": plName.value}}); sendAPI({"cmd":"MPD_API_SAVE_QUEUE", "data": {"plist": plName.value}});
plName.value = ''; plName.value = '';
modalSavequeue.hide(); modalSavequeue.hide();
} }
@@ -1479,4 +1483,4 @@ function genId(x) {
} }
//Init app //Init app
appInit(); appInit();