mirror of
https://github.com/SuperBFG7/ympd
synced 2025-10-26 03:17:40 +00:00
Merge branch 'master' into filter
This commit is contained in:
199
htdocs/js/mpd.js
199
htdocs/js/mpd.js
@@ -16,6 +16,8 @@
|
||||
Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
|
||||
*/
|
||||
|
||||
var TOKEN = "";
|
||||
|
||||
var socket;
|
||||
var last_state;
|
||||
var last_outputs;
|
||||
@@ -45,6 +47,8 @@ var app = $.sammy(function() {
|
||||
socket.send('MPD_API_GET_QUEUE,'+pagination);
|
||||
|
||||
$('#panel-heading').text("Queue");
|
||||
$('#panel-heading-info').empty();
|
||||
|
||||
$('#queue').addClass('active');
|
||||
}
|
||||
|
||||
@@ -111,6 +115,9 @@ var app = $.sammy(function() {
|
||||
});
|
||||
|
||||
this.get(/\#\/dirble\/(\d+)\/(\d+)/, function() {
|
||||
|
||||
if (TOKEN === "") context.redirect("#/0");
|
||||
|
||||
prepare();
|
||||
current_app = 'dirble';
|
||||
$('#breadcrump').removeClass('hide').empty().append("<li><a href=\"#/dirble/\">Categories</a></li><li>"+dirble_selected_cat+"</li>");
|
||||
@@ -121,6 +128,8 @@ var app = $.sammy(function() {
|
||||
$('#dirble_right').find("tr:gt(0)").remove();
|
||||
|
||||
$('#panel-heading').text("Dirble");
|
||||
$('#panel-heading-info').empty();
|
||||
|
||||
$('#dirble').addClass('active');
|
||||
|
||||
$('#next').addClass('hide');
|
||||
@@ -137,6 +146,9 @@ var app = $.sammy(function() {
|
||||
});
|
||||
|
||||
this.get(/\#\/dirble\//, function() {
|
||||
|
||||
if (TOKEN === "") context.redirect("#/0");
|
||||
|
||||
prepare();
|
||||
current_app = 'dirble';
|
||||
$('#breadcrump').removeClass('hide').empty().append("<li>Categories</li>");
|
||||
@@ -147,6 +159,8 @@ var app = $.sammy(function() {
|
||||
$('#dirble_right').find("tr:gt(0)").remove();
|
||||
|
||||
$('#panel-heading').text("Dirble");
|
||||
$('#panel-heading-info').empty();
|
||||
|
||||
$('#dirble').addClass('active');
|
||||
|
||||
dirble_stations = false;
|
||||
@@ -187,6 +201,67 @@ $(document).ready(function(){
|
||||
$('#btnnotify').addClass("active")
|
||||
|
||||
add_filter();
|
||||
|
||||
document.getElementById('player').addEventListener('stalled', function() {
|
||||
if ( !document.getElementById('player').paused ) {
|
||||
this.pause();
|
||||
clickLocalPlay();
|
||||
$('.top-right').notify({
|
||||
message:{text:"music stream stalled - trying to recover..."},
|
||||
type: "danger",
|
||||
fadeOut: { enabled: true, delay: 1000 },
|
||||
}).show();
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('player').addEventListener('pause', function() {
|
||||
this.src='';
|
||||
this.removeAttribute("src");
|
||||
$("#localplay-icon").removeClass("glyphicon-pause").addClass("glyphicon-play");
|
||||
});
|
||||
|
||||
document.getElementById('player').addEventListener('error', function failed(e) {
|
||||
this.pause();
|
||||
switch (e.target.error.code) {
|
||||
case e.target.error.MEDIA_ERR_ABORTED:
|
||||
$('.top-right').notify({
|
||||
message:{text:"Audio playback aborted by user."},
|
||||
type: "info",
|
||||
fadeOut: { enabled: true, delay: 1000 },
|
||||
}).show();
|
||||
break;
|
||||
case e.target.error.MEDIA_ERR_NETWORK:
|
||||
$('.top-right').notify({
|
||||
message:{text:"Network error while playing audio."},
|
||||
type: "danger",
|
||||
fadeOut: { enabled: true, delay: 1000 },
|
||||
}).show();
|
||||
break;
|
||||
case e.target.error.MEDIA_ERR_DECODE:
|
||||
$('.top-right').notify({
|
||||
message:{text:"Audio playback aborted. Did you unplug your headphones?"},
|
||||
type: "danger",
|
||||
fadeOut: { enabled: true, delay: 1000 },
|
||||
}).show();
|
||||
break;
|
||||
case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED:
|
||||
$('.top-right').notify({
|
||||
message:{text:"Error while loading audio (server, network or format error)."},
|
||||
type: "danger",
|
||||
fadeOut: { enabled: true, delay: 1000 },
|
||||
}).show();
|
||||
break;
|
||||
default:
|
||||
$('.top-right').notify({
|
||||
message:{text:"Unknown error while playing audio."},
|
||||
type: "danger",
|
||||
fadeOut: { enabled: true, delay: 1000 },
|
||||
}).show();
|
||||
break;
|
||||
}
|
||||
}, true);
|
||||
|
||||
if (TOKEN === "") $('#dirble').addClass('hide');
|
||||
});
|
||||
|
||||
function webSocketConnect() {
|
||||
@@ -216,12 +291,25 @@ function webSocketConnect() {
|
||||
return;
|
||||
|
||||
var obj = JSON.parse(msg.data);
|
||||
|
||||
|
||||
switch (obj.type) {
|
||||
case 'queue':
|
||||
if(current_app !== 'queue')
|
||||
break;
|
||||
|
||||
if (obj.totalTime > 0) {
|
||||
var hours = Math.floor(obj.totalTime / 3600);
|
||||
var minutes = Math.floor(obj.totalTime / 60) - hours * 60;
|
||||
var seconds = obj.totalTime - hours * 3600 - minutes * 60;
|
||||
|
||||
$('#panel-heading-info').text('Total: ' +
|
||||
(hours > 0 ? hours + '\u2009h ' + (minutes < 10 ? '0' : '') : '') +
|
||||
minutes + '\u2009m ' + (seconds < 10 ? '0' : '') + seconds + '\u2009s');
|
||||
} else {
|
||||
$('#panel-heading-info').empty();
|
||||
}
|
||||
|
||||
$('#salamisandwich > tbody').empty();
|
||||
for (var song in obj.data) {
|
||||
var minutes = Math.floor(obj.data[song].duration / 60);
|
||||
@@ -229,9 +317,10 @@ function webSocketConnect() {
|
||||
|
||||
$('#salamisandwich > tbody').append(
|
||||
"<tr trackid=\"" + obj.data[song].id + "\"><td>" + (obj.data[song].pos + 1) + "</td>" +
|
||||
"<td>" + obj.data[song].artist + "<br /><span>" + obj.data[song].album + "</span></td>" +
|
||||
"<td>" + obj.data[song].title + "</td>" +
|
||||
"<td>" + minutes + ":" + (seconds < 10 ? '0' : '') + seconds +
|
||||
"<td>"+ obj.data[song].artist +"</td>" +
|
||||
"<td>"+ obj.data[song].album +"</td>" +
|
||||
"<td>"+ obj.data[song].title +"</td>" +
|
||||
"<td>"+ minutes + ":" + (seconds < 10 ? '0' : '') + seconds +
|
||||
"</td><td></td></tr>");
|
||||
}
|
||||
|
||||
@@ -326,7 +415,7 @@ function webSocketConnect() {
|
||||
$('#salamisandwich > tbody').append(
|
||||
"<tr uri=\"" + encodeURI(obj.data[item].dir) + "\" class=\"" + clazz + "\">" +
|
||||
"<td><span class=\"glyphicon glyphicon-folder-open\"></span></td>" +
|
||||
"<td colspan=\"2\"><a>" + basename(obj.data[item].dir) + "</a></td>" +
|
||||
"<td colspan=\"3\"><a>" + basename(obj.data[item].dir) + "</a></td>" +
|
||||
"<td></td><td></td></tr>"
|
||||
);
|
||||
break;
|
||||
@@ -338,7 +427,7 @@ function webSocketConnect() {
|
||||
$('#salamisandwich > tbody').append(
|
||||
"<tr uri=\"" + encodeURI(obj.data[item].plist) + "\" class=\"" + clazz + "\">" +
|
||||
"<td><span class=\"glyphicon glyphicon-list\"></span></td>" +
|
||||
"<td colspan=\"2\"><a>" + basename(obj.data[item].plist) + "</a></td>" +
|
||||
"<td colspan=\"3\"><a>" + basename(obj.data[item].plist) + "</a></td>" +
|
||||
"<td></td><td></td></tr>"
|
||||
);
|
||||
break;
|
||||
@@ -346,15 +435,19 @@ function webSocketConnect() {
|
||||
var minutes = Math.floor(obj.data[item].duration / 60);
|
||||
var seconds = obj.data[item].duration - minutes * 60;
|
||||
|
||||
if (typeof obj.data[item].artist === 'undefined') {
|
||||
var details = "<td colspan=\"2\">" + obj.data[item].title + "</td>";
|
||||
if (obj.data[item].artist == null) {
|
||||
var artist = "<td colspan=\"2\">";
|
||||
} else {
|
||||
var details = "<td>" + obj.data[item].artist + "<br /><span>" + obj.data[item].album + "</span></td><td>" + obj.data[item].title + "</td>";
|
||||
var artist = "<td>" + obj.data[item].artist +
|
||||
"<span>" + obj.data[item].album + "</span></td><td>";
|
||||
}
|
||||
|
||||
$('#salamisandwich > tbody').append(
|
||||
$('#salamisandwich > tbody').append(
|
||||
"<tr uri=\"" + encodeURI(obj.data[item].uri) + "\" class=\"song\">" +
|
||||
"<td><span class=\"glyphicon glyphicon-music\"></span></td>" + details +
|
||||
"<td><span class=\"glyphicon glyphicon-music\"></span></td>" +
|
||||
"<td>" + obj.data[item].artist + "</td>" +
|
||||
"<td>" + obj.data[item].album + "</td>" +
|
||||
"<td>" + obj.data[item].title + "</td>" +
|
||||
"<td>" + minutes + ":" + (seconds < 10 ? '0' : '') + seconds +
|
||||
"</td><td></td></tr>"
|
||||
);
|
||||
@@ -365,7 +458,7 @@ function webSocketConnect() {
|
||||
} else {
|
||||
$('#salamisandwich > tbody').append(
|
||||
"<tr><td><span class=\"glyphicon glyphicon-remove\"></span></td>" +
|
||||
"<td colspan=\"2\">Too many results, please refine your search!</td>" +
|
||||
"<td colspan=\"3\">Too many results, please refine your search!</td>" +
|
||||
"<td></td><td></td></tr>"
|
||||
);
|
||||
}
|
||||
@@ -506,7 +599,7 @@ function webSocketConnect() {
|
||||
break;
|
||||
case 'outputnames':
|
||||
$('#btn-outputs-block button').remove();
|
||||
if (obj.data.length > 1) {
|
||||
if ( Object.keys(obj.data).length ) {
|
||||
$.each(obj.data, function(id, name){
|
||||
var btn = $('<button id="btnoutput'+id+'" class="btn btn-default" onclick="toggleoutput(this, '+id+')"><span class="glyphicon glyphicon-volume-up"></span> '+name+'</button>');
|
||||
btn.appendTo($('#btn-outputs-block'));
|
||||
@@ -541,7 +634,7 @@ function webSocketConnect() {
|
||||
socket.send('MPD_API_GET_QUEUE,'+pagination);
|
||||
break;
|
||||
case 'song_change':
|
||||
|
||||
updatePageTitle(obj.data);
|
||||
$('#album').text("");
|
||||
$('#artist').text("");
|
||||
|
||||
@@ -550,14 +643,14 @@ function webSocketConnect() {
|
||||
$('#currenttrack').text(" " + obj.data.title);
|
||||
var notification = "<strong><h4>" + obj.data.title + "</h4></strong>";
|
||||
|
||||
if(obj.data.album) {
|
||||
$('#album').text(obj.data.album);
|
||||
notification += obj.data.album + "<br />";
|
||||
}
|
||||
if(obj.data.artist) {
|
||||
$('#artist').text(obj.data.artist);
|
||||
notification += obj.data.artist + "<br />";
|
||||
}
|
||||
if(obj.data.album) {
|
||||
$('#album').text(obj.data.album);
|
||||
notification += obj.data.album + "<br />";
|
||||
}
|
||||
|
||||
if ($.cookie("notification") === "true")
|
||||
songNotify(obj.data.title, obj.data.artist, obj.data.album );
|
||||
@@ -565,11 +658,11 @@ function webSocketConnect() {
|
||||
$('.top-right').notify({
|
||||
message:{html: notification},
|
||||
type: "info",
|
||||
}).show();
|
||||
|
||||
}).show();
|
||||
break;
|
||||
case 'mpdhost':
|
||||
$('#mpdhost').val(obj.data.host);
|
||||
setLocalStream(obj.data.host);
|
||||
$('#mpdport').val(obj.data.port);
|
||||
if(obj.data.passwort_set)
|
||||
$('#mpd_password_set').removeClass('hide');
|
||||
@@ -671,12 +764,28 @@ var updatePlayIcon = function(state)
|
||||
if(state == 1) { // stop
|
||||
$("#play-icon").addClass("glyphicon-play");
|
||||
$('#track-icon').addClass("glyphicon-stop");
|
||||
} else if(state == 2) { // pause
|
||||
document.getElementById('player').pause();
|
||||
} else if(state == 2) { // play
|
||||
$("#play-icon").addClass("glyphicon-pause");
|
||||
$('#track-icon').addClass("glyphicon-play");
|
||||
} else { // play
|
||||
} else { // pause
|
||||
$("#play-icon").addClass("glyphicon-play");
|
||||
$('#track-icon').addClass("glyphicon-pause");
|
||||
document.getElementById('player').pause();
|
||||
}
|
||||
}
|
||||
|
||||
var updatePageTitle = function(songInfo) {
|
||||
if(!songInfo || (!songInfo.artist && !songInfo.title)) {
|
||||
document.title = 'ympd';
|
||||
return;
|
||||
}
|
||||
if(songInfo.artist) {
|
||||
if(songInfo.title) {
|
||||
document.title = songInfo.artist + ' - ' + songInfo.title;
|
||||
}
|
||||
} else {
|
||||
document.title = songInfo.title;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -694,6 +803,52 @@ function clickPlay() {
|
||||
socket.send('MPD_API_SET_PAUSE');
|
||||
}
|
||||
|
||||
function clickLocalPlay() {
|
||||
var player = document.getElementById('player');
|
||||
$("#localplay-icon").removeClass("glyphicon-play").removeClass("glyphicon-pause");
|
||||
|
||||
|
||||
if ( !$('#track-icon').hasClass('glyphicon-play') ) {
|
||||
clickPlay();
|
||||
}
|
||||
|
||||
if ( player.paused ) {
|
||||
var mpdstream = $.cookie("mpdstream");
|
||||
|
||||
if ( mpdstream ) {
|
||||
player.src = mpdstream;
|
||||
console.log("playing mpd stream: " + player.src);
|
||||
player.load();
|
||||
player.play();
|
||||
$("#localplay-icon").addClass("glyphicon-pause");
|
||||
} else {
|
||||
$("#mpdstream").change(function(){ clickLocalPlay(); $(this).unbind("change"); });
|
||||
$("#localplay-icon").addClass("glyphicon-play");
|
||||
getHost();
|
||||
}
|
||||
} else {
|
||||
player.pause();
|
||||
}
|
||||
}
|
||||
|
||||
function setLocalStream(mpdhost) {
|
||||
var mpdstream = $.cookie("mpdstream");
|
||||
|
||||
if ( !mpdstream ) {
|
||||
mpdstream = "http://";
|
||||
if ( mpdhost == "127.0.0.1" )
|
||||
mpdstream += window.location.hostname;
|
||||
else
|
||||
mpdstream += mpdhost;
|
||||
mpdstream += ":8000/";
|
||||
|
||||
$.cookie("mpdstream", mpdstream, { expires: 424242 });
|
||||
}
|
||||
|
||||
$("#mpdstream").val(mpdstream);
|
||||
$("#mpdstream").change();
|
||||
}
|
||||
|
||||
function trash(tr) {
|
||||
if ( $('#btntrashmodeup').hasClass('active') ) {
|
||||
socket.send('MPD_API_RM_RANGE,0,' + (tr.index() + 1));
|
||||
@@ -784,6 +939,7 @@ function getHost() {
|
||||
|
||||
$('#mpdhost').keypress(onEnter);
|
||||
$('#mpdport').keypress(onEnter);
|
||||
$('#mpdstream').keypress(onEnter);
|
||||
$('#mpd_pw').keypress(onEnter);
|
||||
$('#mpd_pw_con').keypress(onEnter);
|
||||
}
|
||||
@@ -856,6 +1012,7 @@ function confirmSettings() {
|
||||
socket.send('MPD_API_SET_MPDPASS,'+$('#mpd_pw').val());
|
||||
}
|
||||
socket.send('MPD_API_SET_MPDHOST,'+$('#mpdport').val()+','+$('#mpdhost').val());
|
||||
$.cookie("mpdstream", $("#mpdstream").val(), { expires: 424242 });
|
||||
$('#settings').modal('hide');
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user