mirrors/ympd
1
0
Fork 0
mirror of https://github.com/SuperBFG7/ympd synced 2025-01-28 09:54:53 +00:00
Code Issues Releases Wiki Activity

Replaced sammy.js with own router small router implementation with state savinf functionality

Browse Source
This commit is contained in:
jcorporation 2018-06-07 19:47:40 +01:00
parent 8556be5c80
commit de36d91ca9
3 changed files with 204 additions and 2278 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
htdocs/index.html
View File

@ -203,13 +203,13 @@
<div class="card-header" id="panel-heading-browse"> <div class="card-header" id="panel-heading-browse">
<ul class="nav nav-tabs card-header-tabs"> <ul class="nav nav-tabs card-header-tabs">
<li class="nav-item"> <li class="nav-item">
<a class="nav-link text-dark" href="#/browse/filesystem/0/!/" id="cardBrowseNavFilesystem">Filesystem</a> <a class="nav-link text-dark" href="#" id="cardBrowseNavFilesystem">Filesystem</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link text-dark" href="#/browse/playlists/0/!/" id="cardBrowseNavPlaylists">Playlists</a> <a class="nav-link text-dark" href="#" id="cardBrowseNavPlaylists">Playlists</a>
</li> </li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link text-dark" href="#/browse/database/0/!/" id="cardBrowseNavDatabase">Database</a> <a class="nav-link text-dark" href="#" id="cardBrowseNavDatabase">Database</a>
</li> </li>
</ul> </ul>
</div> </div>
@ -272,7 +272,7 @@
<div class="btn-toolbar collapse show" id="browseDatabaseButtons" role="toolbar"> <div class="btn-toolbar collapse show" id="browseDatabaseButtons" role="toolbar">
<div class="btn-group mr-2"> <div class="btn-group mr-2">
<button id="btnBrowseDatabaseArtist" onclick="app.setLocation('#/browse/database/0/!/');" type="button" class="btn btn-secondary hide">&laquo; Artists</button> <button id="btnBrowseDatabaseArtist" type="button" class="btn btn-secondary hide">&laquo; Artists</button>
</div> </div>
<div class="btn-group mr-2"> <div class="btn-group mr-2">
<button id="browseDatabaseFilter" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Filter</button> <button id="browseDatabaseFilter" class="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown">Filter</button>
@ -475,10 +475,10 @@
<footer class="footer"> <footer class="footer">
<nav class="navbar navbar-expand navbar-dark fixed-bottom bg-dark"> <nav class="navbar navbar-expand navbar-dark fixed-bottom bg-dark">
<div class="d-flex flex-fill navbar-nav" id="navbar-bottom"> <div class="d-flex flex-fill navbar-nav" id="navbar-bottom">
<div class="nav-item flex-fill text-center" id="navPlayback"><a class="nav-link" href="#/playing/">Playback</a></div> <div class="nav-item flex-fill text-center" id="navPlayback"><a class="nav-link" href="#">Playback</a></div>
<div class="nav-item flex-fill text-center" id="navQueue"><a class="nav-link" href="#/queue/0/Any%20Tag/">Queue</a></div> <div class="nav-item flex-fill text-center" id="navQueue"><a class="nav-link" href="#">Queue</a></div>
<div class="nav-item flex-fill text-center" id="navBrowse"><a class="nav-link" href="#/browse/filesystem/0/!/">Browse</a></div> <div class="nav-item flex-fill text-center" id="navBrowse"><a class="nav-link" href="#">Browse</a></div>
<div class="nav-item flex-fill text-center" id="navSearch"><a class="nav-link" href="#/search/0/Any%20Tag/">Search</a></div> <div class="nav-item flex-fill text-center" id="navSearch"><a class="nav-link" href="#">Search</a></div>
</div> </div>
</nav> </nav>
</footer> </footer>
@ -688,7 +688,6 @@
<script src="js/bootstrap.bundle.min.js"></script> <script src="js/bootstrap.bundle.min.js"></script>
<script src="js/bootstrap-slider.min.js"></script> <script src="js/bootstrap-slider.min.js"></script>
<script src="js/bootstrap-notify.min.js"></script> <script src="js/bootstrap-notify.min.js"></script>
<script src="js/sammy.js"></script>
<script src="js/mpd.js"></script> <script src="js/mpd.js"></script>
</body> </body>
</html> </html>

304
htdocs/js/mpd.js
View File

@ -25,7 +25,6 @@
var socket; var socket;
var last_state; var last_state;
var last_outputs; var last_outputs;
var current_app;
var pagination = 0; var pagination = 0;
var filterLetter = '!' var filterLetter = '!'
var browsepath = ''; var browsepath = '';
@ -39,9 +38,20 @@ var progressBar;
var volumeBar; var volumeBar;
var coverImageFile = ''; var coverImageFile = '';
var app = $.sammy(function() { var app = {};
function prepare() { app.apps = {"playback": { "state": "" },
"queue": { "state": "0/Any Tag/" },
"browsePlaylists": { "state": "0/!/" },
"browseDatabase": { "state": "0/!/" },
"browseDatabaseArtist": { "state": "0/!/" },
"browseFilesystem": { "state": "0/!/" },
"search": { "state": "0/Any Tag/" }
};
app.currentApp='';
app.prepare=function() {
$('#navbar-bottom > div').removeClass('active'); $('#navbar-bottom > div').removeClass('active');
$('#cardPlayback').addClass('hide'); $('#cardPlayback').addClass('hide');
$('#cardQueue').addClass('hide'); $('#cardQueue').addClass('hide');
@ -54,25 +64,34 @@ var app = $.sammy(function() {
$('#cardBrowseNavPlaylists').removeClass('active'); $('#cardBrowseNavPlaylists').removeClass('active');
$('#cardBrowseNavDatabase').removeClass('active'); $('#cardBrowseNavDatabase').removeClass('active');
$('#cardBrowseNavFilesystem').removeClass('active'); $('#cardBrowseNavFilesystem').removeClass('active');
pagination = 0; }
browsepath = '';
app.goto=function(a,p) {
//use saved state if p is undefined
location.hash = '/'+a+'/'+ encodeURI(p == undefined ? app.apps[a].state : p);
}
app.route=function() {
var hash=decodeURI(location.hash);
if (params=hash.match(/^\#\/(\w+)\/(.*)$/)) {
app.currentApp=params[1];
app.apps[app.currentApp].state=params[2];
} else {
app.currentApp='';
} }
this.get (/\#\/playing\//, function() { if (params=hash.match(/^\#\/(playback)\//)) {
prepare(); app.prepare();
current_app = 'nowplaying';
$('#cardPlayback').removeClass('hide'); $('#cardPlayback').removeClass('hide');
$('#navPlayback').addClass('active'); $('#navPlayback').addClass('active');
}); }
else if (params=hash.match(/^\#\/(queue)\/(\d+)\/([^\/]+)\/(.*)$/)) {
this.get(/\#\/queue\/(\d+)\/([^\/]+)\/(.*)/, function() { pagination = parseInt(params[2]);
current_app = 'queue'; var mpdtag = params[3];
pagination = parseInt(this.params['splat'][0]); var searchstr = params[4];
var mpdtag = this.params['splat'][1];
var searchstr = this.params['splat'][2];
if ($('#cardQueue').hasClass('hide')) { if ($('#cardQueue').hasClass('hide')) {
prepare(); app.prepare();
if (searchstr == '') { if (searchstr == '') {
setPagination(pagination); setPagination(pagination);
} }
@ -91,45 +110,46 @@ var app = $.sammy(function() {
else { else {
socket.send('MPD_API_GET_QUEUE,'+pagination); socket.send('MPD_API_GET_QUEUE,'+pagination);
} }
}); }
else if (params=hash.match(/^\#\/(browsePlaylists)\/(\d+)\/(\w|\!)\/$/)) {
this.get(/\#\/browse\/playlists\/(\d+)\/(\w|\!)/, function() { pagination = parseInt(params[2]);
prepare(); filterLetter = params[3];
pagination = parseInt(this.params['splat'][0]); app.prepare();
filterLetter = this.params['splat'][1];
current_app = 'browsePlaylists';
$('#navBrowse').addClass('active'); $('#navBrowse').addClass('active');
$('#cardBrowse').removeClass('hide'); $('#cardBrowse').removeClass('hide');
$('#cardBrowsePlaylists').removeClass('hide'); $('#cardBrowsePlaylists').removeClass('hide');
$('#cardBrowseNavPlaylists').addClass('active'); $('#cardBrowseNavPlaylists').addClass('active');
socket.send('MPD_API_GET_PLAYLISTS,'+pagination+','+filterLetter); socket.send('MPD_API_GET_PLAYLISTS,'+pagination+','+filterLetter);
doSetFilterLetter('#browsePlaylistsFilter'); doSetFilterLetter('#browsePlaylistsFilter');
}); }
else if (params=hash.match(/^\#\/(browseDatabase)\/(\d+)\/(\w|\!)\/$/)) {
this.get(/\#\/browse\/database\/(\d+)\/(\w|\!)\/(.*)/, function() { app.prepare();
prepare(); pagination = parseInt(params[2]);
pagination = parseInt(this.params['splat'][0]); filterLetter = params[3];
filterLetter = this.params['splat'][1];
artist = this.params['splat'][2];
current_app = 'browseDatabase';
$('#navBrowse').addClass('active'); $('#navBrowse').addClass('active');
$('#cardBrowse').removeClass('hide'); $('#cardBrowse').removeClass('hide');
$('#cardBrowseDatabase').removeClass('hide'); $('#cardBrowseDatabase').removeClass('hide');
$('#cardBrowseNavDatabase').addClass('active'); $('#cardBrowseNavDatabase').addClass('active');
if (artist == "") {
socket.send('MPD_API_GET_ARTISTS,' + pagination + ',' + filterLetter); socket.send('MPD_API_GET_ARTISTS,' + pagination + ',' + filterLetter);
} else {
socket.send('MPD_API_GET_ARTISTALBUMS,' + pagination+',' + filterLetter + ',' + decodeURI(artist));
}
doSetFilterLetter('#browseDatabaseFilter'); doSetFilterLetter('#browseDatabaseFilter');
}); }
else if (params=hash.match(/^\#\/(browseDatabaseArtist)\/(\d+)\/(\w|\!)\/(.*)$/)) {
this.get(/\#\/browse\/filesystem\/(\d+)\/(\w|\!)\/(.*)/, function() { app.prepare();
prepare(); pagination = parseInt(params[2]);
pagination = parseInt(this.params['splat'][0]); filterLetter = params[3];
filterLetter = this.params['splat'][1]; artist = params[4];
browsepath = this.params['splat'][2]; $('#navBrowse').addClass('active');
current_app = 'browseFilesystem'; $('#cardBrowse').removeClass('hide');
$('#cardBrowseDatabase').removeClass('hide');
$('#cardBrowseNavDatabase').addClass('active');
socket.send('MPD_API_GET_ARTISTALBUMS,' + pagination+',' + filterLetter + ',' + decodeURI(artist));
doSetFilterLetter('#browseDatabaseFilter');
}
else if (params=hash.match(/^\#\/(browseFilesystem)\/(\d+)\/(\w|\!)\/(.*)$/)) {
app.prepare();
pagination = parseInt(params[2]);
filterLetter = params[3];
browsepath = params[4];
$('#navBrowse').addClass('active'); $('#navBrowse').addClass('active');
$('#cardBrowse').removeClass('hide'); $('#cardBrowse').removeClass('hide');
$('#cardBrowseFilesystem').removeClass('hide'); $('#cardBrowseFilesystem').removeClass('hide');
@ -161,16 +181,14 @@ var app = $.sammy(function() {
$('#browseBreadcrumb').append("<li class=\"breadcrumb-item\"><a uri=\"" + full_path + "\">"+chunk+"</a></li>"); $('#browseBreadcrumb').append("<li class=\"breadcrumb-item\"><a uri=\"" + full_path + "\">"+chunk+"</a></li>");
full_path += "/"; full_path += "/";
}); });
}); }
else if (params=hash.match(/^\#\/(search)\/(\d+)\/([^\/]+)\/(.*)$/)) {
this.get(/\#\/search\/(\d+)\/([^\/]+)\/(.*)/, function() { pagination = parseInt(params[2]);
current_app = 'search'; var mpdtag = params[3];
pagination = parseInt(this.params['splat'][0]); var searchstr = params[4];
var mpdtag = this.params['splat'][1];
var searchstr = this.params['splat'][2];
if ($('#cardSearch').hasClass('hide')) { if ($('#cardSearch').hasClass('hide')) {
prepare(); app.prepare();
if (searchstr != '') { if (searchstr != '') {
$('#searchList > tbody').append( $('#searchList > tbody').append(
"<tr><td><span class=\"material-icons\">search</span></td>" + "<tr><td><span class=\"material-icons\">search</span></td>" +
@ -197,13 +215,11 @@ var app = $.sammy(function() {
$('#searchList > tbody').empty(); $('#searchList > tbody').empty();
$('#searchAddAllSongs').attr('disabled','disabled').addClass('disabled'); $('#searchAddAllSongs').attr('disabled','disabled').addClass('disabled');
} }
}); }
else {
this.get("/", function(context) { app.goto("playback");
context.redirect("#/playing/"); }
}); };
});
$(document).ready(function(){ $(document).ready(function(){
webSocketConnect(); webSocketConnect();
@ -257,6 +273,8 @@ $(document).ready(function(){
add_filter('#browseFilesystemFilterLetters'); add_filter('#browseFilesystemFilterLetters');
add_filter('#browseDatabaseFilterLetters'); add_filter('#browseDatabaseFilterLetters');
add_filter('#browsePlaylistsFilterLetters'); add_filter('#browsePlaylistsFilterLetters');
window.addEventListener("hashchange", app.route, false);
}); });
function webSocketConnect() { function webSocketConnect() {
@ -275,7 +293,7 @@ function webSocketConnect() {
socket.send('MPD_API_GET_OUTPUTS'); socket.send('MPD_API_GET_OUTPUTS');
showNotification('Connected to myMPD','','','success'); showNotification('Connected to myMPD','','','success');
$('#modalConnectionError').modal('hide'); $('#modalConnectionError').modal('hide');
app.run(); app.route();
} }
socket.onmessage = function got_packet(msg) { socket.onmessage = function got_packet(msg) {
@ -291,7 +309,7 @@ function webSocketConnect() {
case 'queuesearch': case 'queuesearch':
//Do the same as queue //Do the same as queue
case 'queue': case 'queue':
if(current_app !== 'queue') if(app.currentApp !== 'queue')
break; break;
$('#panel-heading-queue').empty(); $('#panel-heading-queue').empty();
if (obj.totalEntities > 0) { if (obj.totalEntities > 0) {
@ -302,7 +320,7 @@ function webSocketConnect() {
} }
var nrItems=0; var nrItems=0;
var tr=document.getElementById(current_app+'List').getElementsByTagName('tbody')[0].getElementsByTagName('tr'); var tr=document.getElementById(app.currentApp+'List').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
for (var song in obj.data) { for (var song in obj.data) {
nrItems++; nrItems++;
var minutes = Math.floor(obj.data[song].duration / 60); var minutes = Math.floor(obj.data[song].duration / 60);
@ -315,7 +333,7 @@ function webSocketConnect() {
"<td>"+ minutes + ":" + (seconds < 10 ? '0' : '') + seconds + "<td>"+ minutes + ":" + (seconds < 10 ? '0' : '') + seconds +
"</td><td></td></tr>"; "</td><td></td></tr>";
if (nrItems <= tr.length) { $(tr[nrItems-1]).replaceWith(row); } if (nrItems <= tr.length) { $(tr[nrItems-1]).replaceWith(row); }
else { $('#'+current_app+'List > tbody').append(row); } else { $('#'+app.currentApp+'List > tbody').append(row); }
} }
for (var i=tr.length;i>nrItems;i--) { for (var i=tr.length;i>nrItems;i--) {
$(tr[tr.length-1]).remove(); $(tr[tr.length-1]).remove();
@ -372,10 +390,10 @@ function webSocketConnect() {
}); });
break; break;
case 'playlists': case 'playlists':
if(current_app !== 'browsePlaylists') if(app.currentApp !== 'browsePlaylists')
break; break;
var nrItems=0; var nrItems=0;
var tr=document.getElementById(current_app+'List').getElementsByTagName('tbody')[0].getElementsByTagName('tr'); var tr=document.getElementById(app.currentApp+'List').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
for (var item in obj.data) { for (var item in obj.data) {
nrItems++; nrItems++;
var d = new Date(obj.data[item].last_modified * 1000); var d = new Date(obj.data[item].last_modified * 1000);
@ -384,19 +402,19 @@ function webSocketConnect() {
'<td><a>' + basename(obj.data[item].plist) + '</a></td>' + '<td><a>' + basename(obj.data[item].plist) + '</a></td>' +
'<td>'+d.toUTCString()+'</td><td></td></tr>'; '<td>'+d.toUTCString()+'</td><td></td></tr>';
if (nrItems <= tr.length) { $(tr[nrItems-1]).replaceWith(row); } if (nrItems <= tr.length) { $(tr[nrItems-1]).replaceWith(row); }
else { $('#'+current_app+'List > tbody').append(row); } else { $('#'+app.currentApp+'List > tbody').append(row); }
} }
for (var i=tr.length;i>nrItems;i--) { for (var i=tr.length;i>nrItems;i--) {
$(tr[tr.length-1]).remove(); $(tr[tr.length-1]).remove();
} }
setPagination(obj.totalEntities); setPagination(obj.totalEntities);
if ( isTouch ) { if ( isTouch ) {
$('#'+current_app+'List > tbody > tr > td:last-child').append( $('#'+app.currentApp+'List > tbody > tr > td:last-child').append(
'<a class="pull-right btn-group-hover color-darkgrey" href="#/browse/playlists/' + pagination + '" '+ '<a class="pull-right btn-group-hover color-darkgrey" href="#/browse/playlists/' + pagination + '" '+
'onclick="delPlaylist($(this).parents(\'tr\'));">' + 'onclick="delPlaylist($(this).parents(\'tr\'));">' +
'<span class="material-icons">delete</span></a>'); '<span class="material-icons">delete</span></a>');
} else { } else {
$('#'+current_app+'List > tbody > tr').on({ $('#'+app.currentApp+'List > tbody > tr').on({
mouseover: function(){ mouseover: function(){
if($(this).children().last().has('a').length == 0) if($(this).children().last().has('a').length == 0)
$(this).children().last().append( $(this).children().last().append(
@ -410,14 +428,14 @@ function webSocketConnect() {
} }
}); });
}; };
$('#'+current_app+'List > tbody > tr').on({ $('#'+app.currentApp+'List > tbody > tr').on({
click: function() { click: function() {
socket.send('MPD_API_ADD_PLAYLIST,' + decodeURI($(this).attr('uri'))); socket.send('MPD_API_ADD_PLAYLIST,' + decodeURI($(this).attr('uri')));
showNotification('"' + $('td:nth-last-child(3)', this).text() + '" added','','','success'); showNotification('"' + $('td:nth-last-child(3)', this).text() + '" added','','','success');
} }
}); });
if (nrItems == 0) { if (nrItems == 0) {
$('#'+current_app+'List > tbody').append( $('#'+app.currentApp+'List > tbody').append(
'<tr><td><span class="material-icons">error_outline</span></td>' + '<tr><td><span class="material-icons">error_outline</span></td>' +
'<td colspan="3">No playlists found.</td>' + '<td colspan="3">No playlists found.</td>' +
'<td></td><td></td></tr>' '<td></td><td></td></tr>'
@ -426,35 +444,34 @@ function webSocketConnect() {
break; break;
case 'listDBtags': case 'listDBtags':
if(current_app !== 'browseDatabase') if(app.currentApp !== 'browseDatabase' && app.currentApp !== 'browseDatabaseArtist')
break; break;
if (obj.tagtype == 'AlbumArtist') { if (obj.tagtype == 'AlbumArtist') {
$('#browseDatabaseCards').addClass('hide'); $('#browseDatabaseCards').addClass('hide');
$('#browseDatabaseList').removeClass('hide'); $('#browseDatabaseList').removeClass('hide');
$('#btnBrowseDatabaseArtist').addClass('hide'); $('#btnBrowseDatabaseArtist').addClass('hide');
var nrItems=0; var nrItems=0;
var tr=document.getElementById(current_app+'List').getElementsByTagName('tbody')[0].getElementsByTagName('tr'); var tr=document.getElementById(app.currentApp+'List').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
for (var item in obj.data) { for (var item in obj.data) {
nrItems++; nrItems++;
var row='<tr uri="' + encodeURI(obj.data[item].value) + '">' + var row='<tr uri="' + encodeURI(obj.data[item].value) + '">' +
'<td><span class="material-icons">album</span></td>' + '<td><span class="material-icons">album</span></td>' +
'<td><a>' + obj.data[item].value + '</a></td></tr>'; '<td><a>' + obj.data[item].value + '</a></td></tr>';
if (nrItems <= tr.length) { $(tr[nrItems-1]).replaceWith(row); } if (nrItems <= tr.length) { $(tr[nrItems-1]).replaceWith(row); }
else { $('#'+current_app+'List > tbody').append(row); } else { $('#'+app.currentApp+'List > tbody').append(row); }
} }
for (var i=tr.length;i>nrItems;i--) { for (var i=tr.length;i>nrItems;i--) {
$(tr[tr.length-1]).remove(); $(tr[tr.length-1]).remove();
} }
setPagination(obj.totalEntities); setPagination(obj.totalEntities);
$('#'+current_app+'List > tbody > tr').on({ $('#'+app.currentApp+'List > tbody > tr').on({
click: function() { click: function() {
pagination = 0; app.goto('browseDatabaseArtist','0/!/'+$(this).attr('uri'));
app.setLocation('#/browse/database/'+pagination+'/!/'+$(this).attr('uri'));
} }
}); });
if (nrItems == 0) { if (nrItems == 0) {
$('#'+current_app+'List > tbody').append( $('#'+app.currentApp+'List > tbody').append(
'<tr><td><span class="material-icons">error_outline</span></td>' + '<tr><td><span class="material-icons">error_outline</span></td>' +
'<td colspan="3">No entries found.</td>' + '<td colspan="3">No entries found.</td>' +
'<td></td><td></td></tr>' '<td></td><td></td></tr>'
@ -515,7 +532,7 @@ function webSocketConnect() {
$('#searchAddAllSongs').attr('disabled','disabled').addClass('disabled'); $('#searchAddAllSongs').attr('disabled','disabled').addClass('disabled');
} }
case 'browse': case 'browse':
if(current_app !== 'browseFilesystem' && current_app !== 'search') if(app.currentApp !== 'browseFilesystem' && app.currentApp !== 'search')
break; break;
/* The use of encodeURI() below might seem useless, but it's not. It prevents /* The use of encodeURI() below might seem useless, but it's not. It prevents
@ -523,7 +540,7 @@ function webSocketConnect() {
* URI from NFD to NFC, breaking our link with MPD. * URI from NFD to NFC, breaking our link with MPD.
*/ */
var nrItems=0; var nrItems=0;
var tr=document.getElementById(current_app+'List').getElementsByTagName('tbody')[0].getElementsByTagName('tr'); var tr=document.getElementById(app.currentApp+'List').getElementsByTagName('tbody')[0].getElementsByTagName('tr');
for (var item in obj.data) { for (var item in obj.data) {
nrItems++; nrItems++;
var row=''; var row='';
@ -553,7 +570,7 @@ function webSocketConnect() {
break; break;
} }
if (nrItems <= tr.length) { $(tr[nrItems-1]).replaceWith(row); } if (nrItems <= tr.length) { $(tr[nrItems-1]).replaceWith(row); }
else { $('#'+current_app+'List > tbody').append(row); } else { $('#'+app.currentApp+'List > tbody').append(row); }
} }
for (var i=tr.length;i>nrItems;i--) { for (var i=tr.length;i>nrItems;i--) {
$(tr[tr.length-1]).remove(); $(tr[tr.length-1]).remove();
@ -561,7 +578,7 @@ function webSocketConnect() {
setPagination(obj.totalEntities); setPagination(obj.totalEntities);
if (nrItems == 0) { if (nrItems == 0) {
$('#'+current_app+'List > tbody').append( $('#'+app.currentApp+'List > tbody').append(
'<tr><td><span class="material-icons">error_outline</span></td>' + '<tr><td><span class="material-icons">error_outline</span></td>' +
'<td colspan="3">No results</td>' + '<td colspan="3">No results</td>' +
'<td></td><td></td></tr>'); '<td></td><td></td></tr>');
@ -579,10 +596,10 @@ function webSocketConnect() {
} }
if ( isTouch ) { if ( isTouch ) {
appendClickableIcon($('#'+current_app+'List > tbody > tr.dir > td:last-child'), 'MPD_API_ADD_TRACK', 'playlist_add'); appendClickableIcon($('#'+app.currentApp+'List > tbody > tr.dir > td:last-child'), 'MPD_API_ADD_TRACK', 'playlist_add');
appendClickableIcon($('#'+current_app+'List > tbody > tr.song > td:last-child'), 'MPD_API_ADD_TRACK', 'playlist_add'); appendClickableIcon($('#'+app.currentApp+'List > tbody > tr.song > td:last-child'), 'MPD_API_ADD_TRACK', 'playlist_add');
} else { } else {
$('#'+current_app+'List > tbody > tr').on({ $('#'+app.currentApp+'List > tbody > tr').on({
mouseenter: function() { mouseenter: function() {
if($(this).is(".dir")) if($(this).is(".dir"))
appendClickableIcon($(this).children().last(), 'MPD_API_ADD_TRACK', 'playlist_add'); appendClickableIcon($(this).children().last(), 'MPD_API_ADD_TRACK', 'playlist_add');
@ -594,14 +611,14 @@ function webSocketConnect() {
} }
}); });
}; };
$('#'+current_app+'List > tbody > tr').on({ $('#'+app.currentApp+'List > tbody > tr').on({
click: function() { click: function() {
switch($(this).attr('class')) { switch($(this).attr('class')) {
case 'dir': case 'dir':
pagination = 0; pagination = 0;
browsepath = $(this).attr("uri"); browsepath = $(this).attr("uri");
$("#browseFilesystemList > a").attr("href", '#/browse/filesystem/'+pagination+'/'+filterLetter+'/'+browsepath); //$("#browseFilesystemList > a").attr("href", '#/browse/filesystem/'+pagination+'/'+filterLetter+'/'+browsepath);
app.setLocation('#/browse/filesystem/'+pagination+'/'+filterLetter+'/'+browsepath); app.goto('browseFilesystem',pagination+'/'+filterLetter+'/'+browsepath);
break; break;
case 'song': case 'song':
socket.send("MPD_API_ADD_TRACK," + decodeURI($(this).attr("uri"))); socket.send("MPD_API_ADD_TRACK," + decodeURI($(this).attr("uri")));
@ -619,8 +636,8 @@ function webSocketConnect() {
click: function() { click: function() {
pagination = 0; pagination = 0;
browsepath = $(this).attr("uri"); browsepath = $(this).attr("uri");
$("#browseFilesystemList > a").attr("href", '#/browse/filesystem/'+pagination+'/'+filterLetter+'/'+browsepath); //$("#browseFilesystemList > a").attr("href", '#/browse/filesystem/'+pagination+'/'+filterLetter+'/'+browsepath);
app.setLocation('#/browse/filesystem/'+pagination+'/'+filterLetter+'/'+browsepath); app.goto('browseFilesystem',pagination+'/'+filterLetter+'/'+browsepath);
} }
}); });
@ -692,7 +709,7 @@ function webSocketConnect() {
showNotification('myMPD lost connection to MPD','','','danger'); showNotification('myMPD lost connection to MPD','','','danger');
break; break;
case 'update_queue': case 'update_queue':
if(current_app === 'queue') if(app.currentApp === 'queue')
socket.send('MPD_API_GET_QUEUE,'+pagination); socket.send('MPD_API_GET_QUEUE,'+pagination);
break; break;
case "song_change": case "song_change":
@ -810,38 +827,38 @@ function get_appropriate_ws_url()
function setPagination(number) { function setPagination(number) {
var totalPages=Math.ceil(number / MAX_ELEMENTS_PER_PAGE); var totalPages=Math.ceil(number / MAX_ELEMENTS_PER_PAGE);
if (totalPages==0) { totalPages=1; } if (totalPages==0) { totalPages=1; }
$('#'+current_app+'PaginationTopPage').text('Page '+(pagination / MAX_ELEMENTS_PER_PAGE + 1)+' / '+totalPages); $('#'+app.currentApp+'PaginationTopPage').text('Page '+(pagination / MAX_ELEMENTS_PER_PAGE + 1)+' / '+totalPages);
$('#'+current_app+'PaginationBottomPage').text('Page '+(pagination / MAX_ELEMENTS_PER_PAGE + 1)+' / '+totalPages); $('#'+app.currentApp+'PaginationBottomPage').text('Page '+(pagination / MAX_ELEMENTS_PER_PAGE + 1)+' / '+totalPages);
if (totalPages > 1) { if (totalPages > 1) {
$('#'+current_app+'PaginationTopPage').removeClass('disabled').removeAttr('disabled'); $('#'+app.currentApp+'PaginationTopPage').removeClass('disabled').removeAttr('disabled');
$('#'+current_app+'PaginationBottomPage').removeClass('disabled').removeAttr('disabled'); $('#'+app.currentApp+'PaginationBottomPage').removeClass('disabled').removeAttr('disabled');
$('#'+current_app+'PaginationTopPages').empty(); $('#'+app.currentApp+'PaginationTopPages').empty();
$('#'+current_app+'PaginationBottomPages').empty(); $('#'+app.currentApp+'PaginationBottomPages').empty();
for (var i=0;i<totalPages;i++) { for (var i=0;i<totalPages;i++) {
$('#'+current_app+'PaginationTopPages').append('<button onclick="gotoPage('+(i * MAX_ELEMENTS_PER_PAGE)+',this,event)" type="button" class="mr-1 mb-1 btn-sm btn btn-secondary">'+(i+1)+'</button>'); $('#'+app.currentApp+'PaginationTopPages').append('<button onclick="gotoPage('+(i * MAX_ELEMENTS_PER_PAGE)+',this,event)" type="button" class="mr-1 mb-1 btn-sm btn btn-secondary">'+(i+1)+'</button>');
$('#'+current_app+'PaginationBottomPages').append('<button onclick="gotoPage('+(i * MAX_ELEMENTS_PER_PAGE)+',this,event)" type="button" class="mr-1 mb-1 btn-sm btn btn-secondary">'+(i+1)+'</button>'); $('#'+app.currentApp+'PaginationBottomPages').append('<button onclick="gotoPage('+(i * MAX_ELEMENTS_PER_PAGE)+',this,event)" type="button" class="mr-1 mb-1 btn-sm btn btn-secondary">'+(i+1)+'</button>');
} }
} else { } else {
$('#'+current_app+'PaginationTopPage').addClass('disabled').attr('disabled','disabled'); $('#'+app.currentApp+'PaginationTopPage').addClass('disabled').attr('disabled','disabled');
$('#'+current_app+'PaginationBottomPage').addClass('disabled').attr('disabled','disabled'); $('#'+app.currentApp+'PaginationBottomPage').addClass('disabled').attr('disabled','disabled');
} }
if(number > pagination + MAX_ELEMENTS_PER_PAGE) { if(number > pagination + MAX_ELEMENTS_PER_PAGE) {
$('#'+current_app+'PaginationTopNext').removeClass('disabled').removeAttr('disabled'); $('#'+app.currentApp+'PaginationTopNext').removeClass('disabled').removeAttr('disabled');
$('#'+current_app+'PaginationBottomNext').removeClass('disabled').removeAttr('disabled'); $('#'+app.currentApp+'PaginationBottomNext').removeClass('disabled').removeAttr('disabled');
$('#'+current_app+'ButtonsBottom').removeClass('hide'); $('#'+app.currentApp+'ButtonsBottom').removeClass('hide');
} else { } else {
$('#'+current_app+'PaginationTopNext').addClass('disabled').attr('disabled','disabled'); $('#'+app.currentApp+'PaginationTopNext').addClass('disabled').attr('disabled','disabled');
$('#'+current_app+'PaginationBottomNext').addClass('disabled').attr('disabled','disabled'); $('#'+app.currentApp+'PaginationBottomNext').addClass('disabled').attr('disabled','disabled');
$('#'+current_app+'ButtonsBottom').addClass('hide'); $('#'+app.currentApp+'ButtonsBottom').addClass('hide');
} }
if(pagination > 0) { if(pagination > 0) {
$('#'+current_app+'PaginationTopPrev').removeClass('disabled').removeAttr('disabled'); $('#'+app.currentApp+'PaginationTopPrev').removeClass('disabled').removeAttr('disabled');
$('#'+current_app+'PaginationBottomPrev').removeClass('disabled').removeAttr('disabled'); $('#'+app.currentApp+'PaginationBottomPrev').removeClass('disabled').removeAttr('disabled');
} else { } else {
$('#'+current_app+'PaginationTopPrev').addClass('disabled').attr('disabled','disabled'); $('#'+app.currentApp+'PaginationTopPrev').addClass('disabled').attr('disabled','disabled');
$('#'+current_app+'PaginationBottomPrev').addClass('disabled').attr('disabled','disabled'); $('#'+app.currentApp+'PaginationBottomPrev').addClass('disabled').attr('disabled','disabled');
} }
} }
@ -962,6 +979,51 @@ $('#btnrepeat').on('click', function (e) {
toggleBtn(this); toggleBtn(this);
}); });
$('#cardBrowseNavFilesystem').on('click', function (e) {
app.goto('browseFilesystem');
e.preventDefault();
});
$('#cardBrowseNavDatabase').on('click', function (e) {
app.goto('browseDatabase');
e.preventDefault();
});
$('#btnBrowseDatabaseArtist').on('click', function (e) {
app.goto('browseDatabase');
e.preventDefault();
});
$('#cardBrowseNavPlaylists').on('click', function (e) {
app.goto('browsePlaylists');
e.preventDefault();
});
$('#cardBrowseNavFilesystem').on('click', function (e) {
app.goto('browseFilesystem');
e.preventDefault();
});
$('#navPlayback').on('click', function (e) {
app.goto('playback');
e.preventDefault();
});
$('#navQueue').on('click', function (e) {
app.goto('queue');
e.preventDefault();
});
$('#navBrowse').on('click', function (e) {
app.goto('browseFilesystem');
e.preventDefault();
});
$('#navSearch').on('click', function (e) {
app.goto('search');
e.preventDefault();
});
function confirmSettings() { function confirmSettings() {
var formOK=true; var formOK=true;
if (!$('#inputCrossfade').is(':disabled')) { if (!$('#inputCrossfade').is(':disabled')) {
@ -1058,7 +1120,7 @@ $('#search > input').keypress(function (event) {
}); });
$('#search').submit(function () { $('#search').submit(function () {
app.setLocation('#/search/' + pagination + '/Any Tag/' + $('#search > input').val()); app.goto('search',pagination + '/Any Tag/' + $('#search > input').val());
return false; return false;
}); });
@ -1067,7 +1129,7 @@ function doSearch(searchstr) {
$('#searchtags2 > button').each(function() { $('#searchtags2 > button').each(function() {
if ($(this).hasClass('btn-success')) { mpdtag=$(this).text(); } if ($(this).hasClass('btn-success')) { mpdtag=$(this).text(); }
}); });
app.setLocation('#/search/' + pagination + '/' + mpdtag + '/' + searchstr); app.goto('search',pagination + '/' + mpdtag + '/' + searchstr);
} }
$('#search2').submit(function () { $('#search2').submit(function () {
@ -1117,7 +1179,7 @@ function doQueueSearch() {
$('#searchqueuetag > button').each(function() { $('#searchqueuetag > button').each(function() {
if ($(this).hasClass('btn-success')) { mpdtag=$(this).text(); } if ($(this).hasClass('btn-success')) { mpdtag=$(this).text(); }
}); });
app.setLocation('#/queue/' + pagination + '/' + mpdtag + '/' + searchstr); app.goto('queue', pagination + '/' + mpdtag + '/' + searchstr);
} }
$('#searchqueue').submit(function () { $('#searchqueue').submit(function () {
@ -1147,7 +1209,7 @@ function gotoPage(x,element,event) {
pagination = x; pagination = x;
} }
switch(current_app) { switch(app.currentApp) {
case "queue": case "queue":
if ($('#searchqueuestr').val().length >=3) { if ($('#searchqueuestr').val().length >=3) {
doQueueSearch(); doQueueSearch();
@ -1156,20 +1218,20 @@ function gotoPage(x,element,event) {
$('#searchqueuetag > button').each(function() { $('#searchqueuetag > button').each(function() {
if ($(this).hasClass('btn-success')) { mpdtag=$(this).text(); } if ($(this).hasClass('btn-success')) { mpdtag=$(this).text(); }
}); });
app.setLocation('#/queue/'+pagination+'/'+mpdtag+'/'); app.goto('queue', pagination+'/'+mpdtag+'/');
} }
break; break;
case "search": case "search":
doSearch($('#searchstr2').val()); doSearch($('#searchstr2').val());
break; break;
case "browseFilesystem": case "browseFilesystem":
app.setLocation('#/browse/filesystem/'+pagination+'/'+filterLetter+'/'+browsepath); app.goto('browseFilesystem', pagination+'/'+filterLetter+'/'+browsepath);
break; break;
case "browsePlaylists": case "browsePlaylists":
app.setLocation('#/browse/playlists/'+pagination+'/'+filterLetter); app.goto('browsePlaylists', pagination+'/'+filterLetter);
break; break;
case "browseDatabase": case "browseDatabase":
app.setLocation('#/browse/database/'+pagination+'/'+filterLetter+'/'+artist); app.goto('browseDatabase', pagination+'/'+filterLetter+'/'+artist);
break; break;
} }
event.preventDefault(); event.preventDefault();
@ -1279,15 +1341,15 @@ $(document).keydown(function(e){
function setFilterLetter(filter) { function setFilterLetter(filter) {
pagination = 0; pagination = 0;
switch(current_app) { switch(app.currentApp) {
case 'browseFilesystem': case 'browseFilesystem':
app.setLocation('#/browse/filesystem/'+pagination+'/'+filter+'/'+browsepath); app.goto('browseFilesystem', pagination+'/'+filter+'/'+browsepath);
break; break;
case 'browseDatabase': case 'browseDatabase':
app.setLocation('#/browse/database/'+pagination+'/'+filter+'/'+artist); app.goto('browseDatabase', pagination+'/'+filter+'/'+artist);
break; break;
case 'browsePlaylists': case 'browsePlaylists':
app.setLocation('#/browse/playlists/'+pagination+'/'+filter+'/'+artist); app.goto('browsePlaylists', pagination+'/'+filter+'/'+artist);
break; break;
} }
} }

2135
htdocs/js/sammy.js
View File

File diff suppressed because it is too large Load Diff