mirrors/ympd
1
0
Fork 0
mirror of https://github.com/SuperBFG7/ympd synced 2025-05-07 18:04:05 +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
Show Stats 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

@ -211,3 +211,7 @@ div.alertBoxActive {
padding-top:4px; padding-top:4px;
padding-bottom:4px; padding-bottom:4px;
} }
.opacity05 {
opacity:0.5;
}

44
htdocs/js/mpd.js
View File

@ -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');
@ -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}});