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

better json generator, various fixups

Browse Source
This commit is contained in:
Andrew Karpow
2014-02-22 02:11:45 +01:00
parent 38b4544542
commit b9a4d83130
9 changed files with 339 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
htdocs/index.html
View File

@@ -39,7 +39,7 @@
<ul id="nav_links" class="nav navbar-nav">
<li id="queue"><a href="#/">Queue</a></li>
<li id="browse"><a href="#/browse/">Browse database</a></li>
<li id="browse"><a href="#/browse/0/">Browse database</a></li>
<li><a href="#" data-toggle="modal" data-target="#settings" onclick="getHost();">Settings</a></li>
</ul>
@@ -82,7 +82,7 @@
<div class="panel panel-primary">
<!-- Default panel contents -->
<div id="panel-heading" class="panel-heading">Queue</div>
<div class="panel-heading"><b id="panel-heading">Queue</b></div>
<div class="panel-body">
<h1>
<span id="track-icon" class="glyphicon glyphicon-play"></span>
@@ -116,6 +116,10 @@
</tbody>
</table>
</div><!-- /.panel -->
<ul class="pager">
<li id="prev" class="page-btn hide"><a href="">Previous</a></li>
<li id="next" class="page-btn"><a href="">Next</a></li>
</ul>
</div><!-- /.col-md-10 -->
<div class="col-md-2 col-xs-12" >
@@ -192,6 +196,10 @@
data-placement="right" data-toggle="popover" data-content="Password does not match!"
data-trigger="manual" />
</div>
<div class="form-group col-md-12">
<div id="mpd_password_set" class="hide alert alert-info">MPD Password is set</div>
</div>
</div>
</form>
</div>
@@ -203,6 +211,22 @@
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade bs-example-modal-sm" id="wait" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h1>Searching...</h1>
</div>
<div class="modal-body">
<div class="progress progress-striped active">
<div class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
<span class="sr-only">Please Wait</span>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript

152
htdocs/js/mpd.js
View File

@@ -19,34 +19,49 @@
var socket;
var last_state;
var current_app;
var pagination = 0;
var browsepath;
var lastSongTitle = "";
var current_song = new Object();
var MAX_ELEMENTS_PER_PAGE = 512;
var app = $.sammy(function() {
this.before('/', function(e, data) {
$('#nav_links > li').removeClass('active');
});
this.get('#/', function() {
function runBrowse() {
current_app = 'queue';
$('#breadcrump').addClass('hide');
$('#salamisandwich').find("tr:gt(0)").remove();
socket.send('MPD_API_GET_QUEUE');
socket.send('MPD_API_GET_QUEUE,'+pagination);
$('#panel-heading').text("Queue");
$('#queue').addClass('active');
}
function prepare() {
$('#nav_links > li').removeClass('active');
$('.page-btn').addClass('hide');
pagination = 0;
browsepath = '';
}
this.get(/\#\/(\d+)/, function() {
prepare();
pagination = parseInt(this.params['splat'][0]);
runBrowse();
});
this.get(/\#\/browse\/(.*)/, function() {
this.get(/\#\/browse\/(\d+)\/(.*)/, function() {
prepare();
browsepath = this.params['splat'][1];
pagination = parseInt(this.params['splat'][0]);
current_app = 'browse';
$('#breadcrump').removeClass('hide').empty().append("<li><a href=\"#/browse/\">root</a></li>");
$('#breadcrump').removeClass('hide').empty().append("<li><a href=\"#/browse/0/\">root</a></li>");
$('#salamisandwich').find("tr:gt(0)").remove();
var path = this.params['splat'][0];
socket.send('MPD_API_GET_BROWSE,'+pagination+','+(browsepath ? browsepath : "/"));
socket.send('MPD_API_GET_BROWSE,' + path);
$('#panel-heading').text("Browse database: "+path);
var path_array = path.split('/');
$('#panel-heading').text("Browse database: "+browsepath);
var path_array = browsepath.split('/');
var full_path = "";
$.each(path_array, function(index, chunk) {
if(path_array.length - 1 == index) {
@@ -55,7 +70,7 @@ var app = $.sammy(function() {
}
full_path = full_path + chunk;
$('#breadcrump').append("<li><a href=\"#/browse/" + full_path + "\">"+chunk+"</a></li>");
$('#breadcrump').append("<li><a href=\"#/browse/0/" + full_path + "\">"+chunk+"</a></li>");
full_path += "/";
});
$('#browse').addClass('active');
@@ -73,7 +88,7 @@ var app = $.sammy(function() {
});
this.get("/", function(context) {
context.redirect("#/");
context.redirect("#/0");
});
});
@@ -117,8 +132,8 @@ function webSocketConnect() {
app.run();
}
socket.onmessage =function got_packet(msg) {
if(msg.data === last_state)
socket.onmessage = function got_packet(msg) {
if(msg.data === last_state || msg.data.length == 0)
return;
var obj = JSON.parse(msg.data);
@@ -140,6 +155,11 @@ function webSocketConnect() {
"</td><td></td></tr>");
}
if(obj.data[obj.data.length-1].id >= pagination + MAX_ELEMENTS_PER_PAGE)
$('#next').removeClass('hide');
if(pagination > 0)
$('#prev').removeClass('hide');
$('#salamisandwich > tbody > tr').on({
mouseover: function(){
if($(this).children().last().has("a").length == 0)
@@ -160,6 +180,7 @@ function webSocketConnect() {
});
break;
case "search":
$('#wait').modal('hide');
case "browse":
if(current_app !== 'browse' && current_app !== 'search')
break;
@@ -194,7 +215,22 @@ function webSocketConnect() {
"</td><td></td></tr>"
);
break;
case "wrap":
if(current_app == 'browse') {
$('#next').removeClass('hide');
} else {
$('#salamisandwich > tbody').append(
"<tr><td><span class=\"glyphicon glyphicon-remove\"></span></td>" +
"<td>Too many results, please refine your search!</td>" +
"<td></td><td></td></tr>"
);
}
break;
}
if(pagination > 0)
$('#prev').removeClass('hide');
}
function appendClickableIcon(appendTo, onClickAction, glyphicon) {
@@ -219,21 +255,27 @@ function webSocketConnect() {
appendClickableIcon($(this), 'MPD_API_ADD_PLAY_TRACK', 'play');
},
click: function() {
if($(this).is(".dir"))
app.setLocation("#/browse/"+$(this).attr("uri"));
else {
if($(this).is(".song"))
switch($(this).attr('class')) {
case 'dir':
app.setLocation("#/browse/0/"+$(this).attr("uri"));
break;
case 'song':
socket.send("MPD_API_ADD_TRACK," + $(this).attr("uri"));
else
$('.top-right').notify({
message:{
text: $('td:nth-child(2)', this).text() + " added"
}
}).show();
break;
case 'plist':
socket.send("MPD_API_ADD_PLAYLIST," + $(this).attr("uri"));
$('.top-right').notify({
message:{
text: $('td:nth-child(2)', this).text() + " added"
}
}).show();
$('.top-right').notify({
message:{
text: "Playlist " + $('td:nth-child(2)', this).text() + " added"
}
}).show();
break;
}
},
mouseleave: function(){
$(this).children().last().find("a").stop().remove();
@@ -300,7 +342,7 @@ function webSocketConnect() {
break;
case "update_queue":
if(current_app === 'queue')
socket.send('MPD_API_GET_QUEUE');
socket.send('MPD_API_GET_QUEUE,'+pagination);
break;
case "song_change":
$('#currenttrack').text(" " + obj.data.title);
@@ -327,10 +369,8 @@ function webSocketConnect() {
case "mpdhost":
$('#mpdhost').val(obj.data.host);
$('#mpdport').val(obj.data.port);
if(obj.data.passwort_set) {
$('#mpd_pw').attr('placeholder', '*******');
$('#mpd_pw_con').attr('placeholder', '*******');
}
if(obj.data.passwort_set)
$('#mpd_password_set').removeClass('hide');
break;
case "error":
$('.top-right').notify({
@@ -481,11 +521,38 @@ function getHost() {
}
$('#search').submit(function () {
app.setLocation("#/search/"+$('#search > div > input').val());
$('#wait').modal('show');
setTimeout(function() {
$('#wait').modal('hide');
}, 10000);
return false;
});
$('.page-btn').on('click', function (e) {
switch ($(this).text()) {
case "Next":
pagination += MAX_ELEMENTS_PER_PAGE;
break;
case "Previous":
pagination -= MAX_ELEMENTS_PER_PAGE;
if(pagination <= 0)
pagination = 0;
break;
}
switch(current_app) {
case "queue":
app.setLocation('#/'+pagination);
break;
case "browse":
app.setLocation('#/browse/'+pagination+'/'+browsepath);
break;
}
e.preventDefault();
});
function confirmSettings() {
if($('#mpd_pw').val().length + $('#mpd_pw_con').val().length > 0) {
if ($('#mpd_pw').val() !== $('#mpd_pw_con').val())
@@ -507,16 +574,9 @@ function notificationsSupported() {
}
function songNotify(artist, title) {
if (!notificationsSupported())
return;
if (window.webkitNotifications.checkPermission() == 0) {
var notification = window.webkitNotifications.createNotification("assets/favicon.ico", artist, title);
notification.show();
setTimeout(function(notification) {
notification.cancel();
}, 3000, notification);
} else {
window.webkitNotifications.requestPermission();
}
var notification = window.webkitNotifications.createNotification("assets/favicon.ico", artist, title);
notification.show();
setTimeout(function(notification) {
notification.cancel();
}, 3000, notification);
}