mirror of https://github.com/SuperBFG7/ympd
1379 lines
51 KiB
JavaScript
1379 lines
51 KiB
JavaScript
/* ympd
|
|
(c) 2013-2014 Andrew Karpow <andy@ndyk.de>
|
|
This project's homepage is: https://www.ympd.org
|
|
|
|
This program is free software; you can redistribute it and/or modify
|
|
it under the terms of the GNU General Public License as published by
|
|
the Free Software Foundation; version 2 of the License.
|
|
|
|
This program is distributed in the hope that it will be useful,
|
|
but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
GNU General Public License for more details.
|
|
|
|
You should have received a copy of the GNU General Public License along
|
|
with this program; if not, write to the Free Software Foundation, Inc.,
|
|
Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
|
|
*/
|
|
|
|
var TOKEN = '';
|
|
|
|
var socket;
|
|
var last_state;
|
|
var last_outputs;
|
|
var current_app;
|
|
var pagination = 0;
|
|
var browsepath = '';
|
|
var lastSongTitle = '';
|
|
var current_song = new Object();
|
|
var MAX_ELEMENTS_PER_PAGE = 512;
|
|
var isTouch = Modernizr.touch ? 1 : 0;
|
|
var filter = '';
|
|
|
|
var app = $.sammy(function () {
|
|
function runBrowse() {
|
|
current_app = 'queue';
|
|
|
|
$('#breadcrump').addClass('hide');
|
|
$('#filter').addClass('hide');
|
|
$('#salamisandwich').removeClass('hide').find('tr:gt(0)').remove();
|
|
socket.send('MPD_API_GET_QUEUE,' + pagination);
|
|
|
|
$('#panel-heading').text('Queue');
|
|
$('#panel-heading-info').empty();
|
|
|
|
$('#queue').addClass('active');
|
|
}
|
|
|
|
function prepare() {
|
|
$('#nav_links > li').removeClass('active');
|
|
$('.page-btn').addClass('hide');
|
|
$('#add-all-songs').hide();
|
|
pagination = 0;
|
|
browsepath = '';
|
|
}
|
|
|
|
this.get(/\#\/(\d+)/, function () {
|
|
prepare();
|
|
pagination = parseInt(this.params['splat'][0]);
|
|
runBrowse();
|
|
});
|
|
|
|
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 uri="" onclick="set_filter(\'\')">root</a></li>');
|
|
add_filter();
|
|
$('#salamisandwich').removeClass('hide').find('tr:gt(0)').remove();
|
|
socket.send(
|
|
'MPD_API_GET_BROWSE,' +
|
|
pagination +
|
|
',' +
|
|
(browsepath ? browsepath : '/')
|
|
);
|
|
// Don't add all songs from root
|
|
if (browsepath) {
|
|
$('#filter').append(
|
|
'<button id="add-all-songs" class="btn btn-primary pull-right">Add all</button>'
|
|
);
|
|
var add_all_songs = $('#add-all-songs');
|
|
add_all_songs.on('click', function () {
|
|
socket.send('MPD_API_ADD_TRACK,' + browsepath);
|
|
});
|
|
}
|
|
|
|
$('#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) {
|
|
$('#breadcrump').append(
|
|
'<li class="active">' + chunk + '</li>'
|
|
);
|
|
return;
|
|
}
|
|
|
|
full_path = full_path + chunk;
|
|
$('#breadcrump').append(
|
|
'<li><a uri="' + full_path + '">' + chunk + '</a></li>'
|
|
);
|
|
full_path += '/';
|
|
});
|
|
$('#browse').addClass('active');
|
|
});
|
|
|
|
this.get(/\#\/search\/(.*)/, function () {
|
|
current_app = 'search';
|
|
$('#salamisandwich').find('tr:gt(0)').remove();
|
|
var searchstr = this.params['splat'][0];
|
|
|
|
$('#search > div > input').val(searchstr);
|
|
socket.send('MPD_API_SEARCH,' + searchstr);
|
|
|
|
$('#panel-heading').text('Search: ' + searchstr);
|
|
});
|
|
|
|
this.get('/', function (context) {
|
|
context.redirect('#/0');
|
|
});
|
|
});
|
|
|
|
$(document).ready(function () {
|
|
webSocketConnect();
|
|
$('#volumeslider').slider(0);
|
|
$('#volumeslider').on('slider.newValue', function (evt, data) {
|
|
socket.send('MPD_API_SET_VOLUME,' + data.val);
|
|
});
|
|
$('#progressbar').slider(0);
|
|
$('#progressbar').on('slider.newValue', function (evt, data) {
|
|
if (current_song && current_song.currentSongId >= 0) {
|
|
var seekVal = Math.ceil(current_song.totalTime * (data.val / 100));
|
|
socket.send(
|
|
'MPD_API_SET_SEEK,' + current_song.currentSongId + ',' + seekVal
|
|
);
|
|
}
|
|
});
|
|
|
|
$('#addstream').on('shown.bs.modal', function () {
|
|
$('#streamurl').focus();
|
|
});
|
|
$('#addstream form').on('submit', function (e) {
|
|
addStream();
|
|
});
|
|
|
|
if (!notificationsSupported()) $('#btnnotify').addClass('disabled');
|
|
else if ($.cookie('notification') === 'true')
|
|
$('#btnnotify').addClass('active');
|
|
|
|
if ($.cookie('autoplay') === 'true') $('#btnautoplay').addClass('active');
|
|
|
|
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
|
|
);
|
|
});
|
|
|
|
function webSocketConnect() {
|
|
if (typeof MozWebSocket != 'undefined') {
|
|
socket = new MozWebSocket(get_appropriate_ws_url());
|
|
} else {
|
|
socket = new WebSocket(get_appropriate_ws_url());
|
|
}
|
|
|
|
try {
|
|
socket.onopen = function () {
|
|
console.log('connected');
|
|
$('.top-right')
|
|
.notify({
|
|
message: { text: 'Connected to ympd' },
|
|
fadeOut: { enabled: true, delay: 500 },
|
|
})
|
|
.show();
|
|
|
|
app.run();
|
|
/* emit initial request for output names */
|
|
socket.send('MPD_API_GET_OUTPUTS');
|
|
};
|
|
|
|
socket.onmessage = function got_packet(msg) {
|
|
if (msg.data === last_state || msg.data.length == 0) 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);
|
|
var seconds = obj.data[song].duration - minutes * 60;
|
|
|
|
$('#salamisandwich > tbody').append(
|
|
'<tr trackid="' +
|
|
obj.data[song].id +
|
|
'"><td>' +
|
|
(obj.data[song].pos + 1) +
|
|
'</td>' +
|
|
'<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>'
|
|
);
|
|
}
|
|
|
|
if (
|
|
obj.data.length &&
|
|
obj.data[obj.data.length - 1].pos + 1 >=
|
|
pagination + MAX_ELEMENTS_PER_PAGE
|
|
)
|
|
$('#next').removeClass('hide');
|
|
if (pagination > 0) $('#prev').removeClass('hide');
|
|
if (isTouch) {
|
|
$(
|
|
'#salamisandwich > tbody > tr > td:last-child'
|
|
).append(
|
|
'<a class="pull-right btn-group-hover" href="#/" ' +
|
|
'onclick="trash($(this).parents(\'tr\'));">' +
|
|
'<span class="glyphicon glyphicon-trash"></span></a>'
|
|
);
|
|
} else {
|
|
$('#salamisandwich > tbody > tr').on({
|
|
mouseover: function () {
|
|
var doomed = $(this);
|
|
if ($('#btntrashmodeup').hasClass('active'))
|
|
doomed = $(
|
|
'#salamisandwich > tbody > tr:lt(' +
|
|
($(this).index() + 1) +
|
|
')'
|
|
);
|
|
if ($('#btntrashmodedown').hasClass('active'))
|
|
doomed = $(
|
|
'#salamisandwich > tbody > tr:gt(' +
|
|
($(this).index() - 1) +
|
|
')'
|
|
);
|
|
$.each(doomed, function () {
|
|
if (
|
|
$(this).children().last().has('a')
|
|
.length == 0
|
|
)
|
|
$(this)
|
|
.children()
|
|
.last()
|
|
.append(
|
|
'<a class="pull-right btn-group-hover" href="#/" ' +
|
|
'onclick="trash($(this).parents(\'tr\'));">' +
|
|
'<span class="glyphicon glyphicon-trash"></span></a>'
|
|
)
|
|
.find('a')
|
|
.fadeTo('fast', 1);
|
|
});
|
|
},
|
|
mouseleave: function () {
|
|
var doomed = $(this);
|
|
if ($('#btntrashmodeup').hasClass('active'))
|
|
doomed = $(
|
|
'#salamisandwich > tbody > tr:lt(' +
|
|
($(this).index() + 1) +
|
|
')'
|
|
);
|
|
if ($('#btntrashmodedown').hasClass('active'))
|
|
doomed = $(
|
|
'#salamisandwich > tbody > tr:gt(' +
|
|
($(this).index() - 1) +
|
|
')'
|
|
);
|
|
$.each(doomed, function () {
|
|
$(this)
|
|
.children()
|
|
.last()
|
|
.find('a')
|
|
.stop()
|
|
.remove();
|
|
});
|
|
},
|
|
});
|
|
}
|
|
|
|
$('#salamisandwich > tbody > tr').on({
|
|
click: function () {
|
|
$('#salamisandwich > tbody > tr').removeClass(
|
|
'active'
|
|
);
|
|
socket.send(
|
|
'MPD_API_PLAY_TRACK,' + $(this).attr('trackid')
|
|
);
|
|
$(this).addClass('active');
|
|
},
|
|
});
|
|
//Helper function to keep table row from collapsing when being sorted
|
|
var fixHelperModified = function (e, tr) {
|
|
var $originals = tr.children();
|
|
var $helper = tr.clone();
|
|
$helper.children().each(function (index) {
|
|
$(this).width($originals.eq(index).width());
|
|
});
|
|
return $helper;
|
|
};
|
|
|
|
//Make queue table sortable
|
|
$('#salamisandwich > tbody')
|
|
.sortable({
|
|
helper: fixHelperModified,
|
|
stop: function (event, ui) {
|
|
renumber_table('#salamisandwich', ui.item);
|
|
},
|
|
})
|
|
.disableSelection();
|
|
break;
|
|
case 'search':
|
|
$('#wait').modal('hide');
|
|
case 'browse':
|
|
if (current_app !== 'browse' && current_app !== 'search')
|
|
break;
|
|
|
|
/* The use of encodeURI() below might seem useless, but it's not. It prevents
|
|
* some browsers, such as Safari, from changing the normalization form of the
|
|
* URI from NFD to NFC, breaking our link with MPD.
|
|
*/
|
|
if ($('#salamisandwich > tbody').is(':ui-sortable')) {
|
|
$('#salamisandwich > tbody').sortable('destroy');
|
|
}
|
|
for (var item in obj.data) {
|
|
switch (obj.data[item].type) {
|
|
case 'directory':
|
|
var clazz = 'dir';
|
|
if (filter !== '') {
|
|
var first = basename(obj.data[item].dir)[0];
|
|
if (filter === 'num' && isNaN(first)) {
|
|
clazz += ' hide';
|
|
} else if (
|
|
filter >= 'A' &&
|
|
filter <= 'Z' &&
|
|
first.toUpperCase() !== filter
|
|
) {
|
|
clazz += ' hide';
|
|
} else if (filter === 'plist') {
|
|
clazz += ' hide';
|
|
}
|
|
}
|
|
$('#salamisandwich > tbody').append(
|
|
'<tr uri="' +
|
|
encodeURI(obj.data[item].dir) +
|
|
'" class="' +
|
|
clazz +
|
|
'">' +
|
|
'<td><span class="glyphicon glyphicon-folder-open"></span></td>' +
|
|
'<td colspan="3"><a>' +
|
|
basename(obj.data[item].dir) +
|
|
'</a></td>' +
|
|
'<td></td><td></td></tr>'
|
|
);
|
|
break;
|
|
case 'playlist':
|
|
var clazz = 'plist';
|
|
if (filter !== '' && filter !== 'plist') {
|
|
clazz += ' hide';
|
|
}
|
|
$('#salamisandwich > tbody').append(
|
|
'<tr uri="' +
|
|
encodeURI(obj.data[item].plist) +
|
|
'" class="' +
|
|
clazz +
|
|
'">' +
|
|
'<td><span class="glyphicon glyphicon-list"></span></td>' +
|
|
'<td colspan="3"><a>' +
|
|
basename(obj.data[item].plist) +
|
|
'</a></td>' +
|
|
'<td></td><td></td></tr>'
|
|
);
|
|
break;
|
|
case 'song':
|
|
var minutes = Math.floor(
|
|
obj.data[item].duration / 60
|
|
);
|
|
var seconds =
|
|
obj.data[item].duration - minutes * 60;
|
|
|
|
if (obj.data[item].artist == null) {
|
|
var artist = '<td colspan="2">';
|
|
} else {
|
|
var artist =
|
|
'<td>' +
|
|
obj.data[item].artist +
|
|
'<span>' +
|
|
obj.data[item].album +
|
|
'</span></td><td>';
|
|
}
|
|
|
|
$('#salamisandwich > tbody').append(
|
|
'<tr uri="' +
|
|
encodeURI(obj.data[item].uri) +
|
|
'" class="song">' +
|
|
'<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>'
|
|
);
|
|
break;
|
|
case 'wrap':
|
|
if (current_app == 'browse') {
|
|
$('#next').removeClass('hide');
|
|
} else {
|
|
$('#salamisandwich > tbody').append(
|
|
'<tr><td><span class="glyphicon glyphicon-remove"></span></td>' +
|
|
'<td colspan="3">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
|
|
) {
|
|
$(appendTo)
|
|
.append(
|
|
'<a role="button" class="pull-right btn-group-hover">' +
|
|
'<span class="glyphicon glyphicon-' +
|
|
glyphicon +
|
|
'"></span></a>'
|
|
)
|
|
.find('a')
|
|
.click(function (e) {
|
|
e.stopPropagation();
|
|
socket.send(
|
|
onClickAction +
|
|
',' +
|
|
decodeURI(
|
|
$(this).parents('tr').attr('uri')
|
|
)
|
|
);
|
|
$('.top-right')
|
|
.notify({
|
|
message: {
|
|
text:
|
|
'"' +
|
|
$(
|
|
'td:nth-last-child(3)',
|
|
$(this).parents('tr')
|
|
).text() +
|
|
'" added',
|
|
},
|
|
})
|
|
.show();
|
|
})
|
|
.fadeTo('fast', 1);
|
|
}
|
|
|
|
if (isTouch) {
|
|
appendClickableIcon(
|
|
$(
|
|
'#salamisandwich > tbody > tr.dir > td:last-child'
|
|
),
|
|
'MPD_API_ADD_TRACK',
|
|
'plus'
|
|
);
|
|
appendClickableIcon(
|
|
$(
|
|
'#salamisandwich > tbody > tr.song > td:last-child'
|
|
),
|
|
'MPD_API_ADD_TRACK',
|
|
'play'
|
|
);
|
|
} else {
|
|
$('#salamisandwich > tbody > tr').on({
|
|
mouseenter: function () {
|
|
if ($(this).is('.dir'))
|
|
appendClickableIcon(
|
|
$(this).children().last(),
|
|
'MPD_API_ADD_TRACK',
|
|
'plus'
|
|
);
|
|
else if ($(this).is('.song'))
|
|
appendClickableIcon(
|
|
$(this).children().last(),
|
|
'MPD_API_ADD_PLAY_TRACK',
|
|
'play'
|
|
);
|
|
},
|
|
mouseleave: function () {
|
|
$(this)
|
|
.children()
|
|
.last()
|
|
.find('a')
|
|
.stop()
|
|
.remove();
|
|
},
|
|
});
|
|
}
|
|
$('#salamisandwich > tbody > tr').on({
|
|
click: function () {
|
|
switch ($(this).attr('class')) {
|
|
case 'dir':
|
|
pagination = 0;
|
|
browsepath = $(this).attr('uri');
|
|
$('#browse > a').attr(
|
|
'href',
|
|
'#/browse/' +
|
|
pagination +
|
|
'/' +
|
|
browsepath
|
|
);
|
|
$('#filter > a').attr(
|
|
'href',
|
|
'#/browse/' +
|
|
pagination +
|
|
'/' +
|
|
browsepath
|
|
);
|
|
app.setLocation(
|
|
'#/browse/' +
|
|
pagination +
|
|
'/' +
|
|
browsepath
|
|
);
|
|
set_filter('');
|
|
break;
|
|
case 'song':
|
|
socket.send(
|
|
'MPD_API_ADD_TRACK,' +
|
|
decodeURI($(this).attr('uri'))
|
|
);
|
|
$('.top-right')
|
|
.notify({
|
|
message: {
|
|
text:
|
|
'"' +
|
|
$(
|
|
'td:nth-last-child(3)',
|
|
this
|
|
).text() +
|
|
'" added',
|
|
},
|
|
})
|
|
.show();
|
|
break;
|
|
case 'plist':
|
|
socket.send(
|
|
'MPD_API_ADD_PLAYLIST,' +
|
|
decodeURI($(this).attr('uri'))
|
|
);
|
|
$('.top-right')
|
|
.notify({
|
|
message: {
|
|
text:
|
|
'"' +
|
|
$(
|
|
'td:nth-last-child(3)',
|
|
this
|
|
).text() +
|
|
'" added',
|
|
},
|
|
})
|
|
.show();
|
|
break;
|
|
}
|
|
},
|
|
});
|
|
|
|
$('#breadcrump > li > a').on({
|
|
click: function () {
|
|
pagination = 0;
|
|
browsepath = $(this).attr('uri');
|
|
$('#browse > a').attr(
|
|
'href',
|
|
'#/browse/' + pagination + '/' + browsepath
|
|
);
|
|
$('#filter > a').attr(
|
|
'href',
|
|
'#/browse/' + pagination + '/' + browsepath
|
|
);
|
|
app.setLocation(
|
|
'#/browse/' + pagination + '/' + browsepath
|
|
);
|
|
set_filter('');
|
|
},
|
|
});
|
|
|
|
break;
|
|
case 'state':
|
|
updatePlayIcon(obj.data.state);
|
|
updateVolumeIcon(obj.data.volume);
|
|
|
|
if (JSON.stringify(obj) === JSON.stringify(last_state))
|
|
break;
|
|
|
|
current_song.totalTime = obj.data.totalTime;
|
|
current_song.currentSongId = obj.data.currentsongid;
|
|
var total_minutes = Math.floor(obj.data.totalTime / 60);
|
|
var total_seconds = obj.data.totalTime - total_minutes * 60;
|
|
|
|
var elapsed_minutes = Math.floor(obj.data.elapsedTime / 60);
|
|
var elapsed_seconds =
|
|
obj.data.elapsedTime - elapsed_minutes * 60;
|
|
|
|
$('#volumeslider').slider(obj.data.volume);
|
|
var progress = Math.floor(
|
|
(100 * obj.data.elapsedTime) / obj.data.totalTime
|
|
);
|
|
$('#progressbar').slider(progress);
|
|
|
|
$('#counter').text(
|
|
elapsed_minutes +
|
|
':' +
|
|
(elapsed_seconds < 10 ? '0' : '') +
|
|
elapsed_seconds +
|
|
' / ' +
|
|
total_minutes +
|
|
':' +
|
|
(total_seconds < 10 ? '0' : '') +
|
|
total_seconds
|
|
);
|
|
|
|
$('#salamisandwich > tbody > tr')
|
|
.removeClass('active')
|
|
.css('font-weight', '');
|
|
$(
|
|
'#salamisandwich > tbody > tr[trackid=' +
|
|
obj.data.currentsongid +
|
|
']'
|
|
)
|
|
.addClass('active')
|
|
.css('font-weight', 'bold');
|
|
|
|
if (obj.data.random) $('#btnrandom').addClass('active');
|
|
else $('#btnrandom').removeClass('active');
|
|
|
|
if (obj.data.consume) $('#btnconsume').addClass('active');
|
|
else $('#btnconsume').removeClass('active');
|
|
|
|
if (obj.data.single) $('#btnsingle').addClass('active');
|
|
else $('#btnsingle').removeClass('active');
|
|
|
|
if (obj.data.crossfade)
|
|
$('#btncrossfade').addClass('active');
|
|
else $('#btncrossfade').removeClass('active');
|
|
|
|
if (obj.data.repeat) $('#btnrepeat').addClass('active');
|
|
else $('#btnrepeat').removeClass('active');
|
|
|
|
last_state = obj;
|
|
break;
|
|
case 'outputnames':
|
|
$('#btn-outputs-block button').remove();
|
|
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'));
|
|
});
|
|
} else {
|
|
$('#btn-outputs-block').addClass('hide');
|
|
}
|
|
/* remove cache, since the buttons have been recreated */
|
|
last_outputs = '';
|
|
break;
|
|
case 'outputs':
|
|
if (JSON.stringify(obj) === JSON.stringify(last_outputs))
|
|
break;
|
|
$.each(obj.data, function (id, enabled) {
|
|
if (enabled) $('#btnoutput' + id).addClass('active');
|
|
else $('#btnoutput' + id).removeClass('active');
|
|
});
|
|
last_outputs = obj;
|
|
break;
|
|
case 'disconnected':
|
|
if ($('.top-right').has('div').length == 0)
|
|
$('.top-right')
|
|
.notify({
|
|
message: {
|
|
text: 'ympd lost connection to MPD ',
|
|
},
|
|
type: 'danger',
|
|
fadeOut: { enabled: true, delay: 1000 },
|
|
})
|
|
.show();
|
|
break;
|
|
case 'update_queue':
|
|
if (current_app === 'queue')
|
|
socket.send('MPD_API_GET_QUEUE,' + pagination);
|
|
break;
|
|
case 'song_change':
|
|
updatePageTitle(obj.data);
|
|
$('#album').text('');
|
|
$('#artist').text('');
|
|
|
|
$('#btnlove').removeClass('active');
|
|
|
|
$('#currenttrack').text(' ' + obj.data.title);
|
|
var notification =
|
|
'<strong><h4>' + obj.data.title + '</h4></strong>';
|
|
|
|
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
|
|
);
|
|
else
|
|
$('.top-right')
|
|
.notify({
|
|
message: { html: notification },
|
|
type: 'info',
|
|
})
|
|
.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');
|
|
break;
|
|
|
|
case 'error':
|
|
$('.top-right')
|
|
.notify({
|
|
message: { text: obj.data },
|
|
type: 'danger',
|
|
})
|
|
.show();
|
|
default:
|
|
break;
|
|
}
|
|
};
|
|
|
|
socket.onclose = function () {
|
|
console.log('disconnected');
|
|
$('.top-right')
|
|
.notify({
|
|
message: {
|
|
text: 'Connection to ympd lost, retrying in 3 seconds ',
|
|
},
|
|
type: 'danger',
|
|
onClose: function () {
|
|
webSocketConnect();
|
|
},
|
|
})
|
|
.show();
|
|
};
|
|
} catch (exception) {
|
|
alert('<p>Error' + exception);
|
|
}
|
|
}
|
|
|
|
function get_appropriate_ws_url() {
|
|
var pcol;
|
|
var u = document.URL;
|
|
var separator;
|
|
|
|
/*
|
|
/* We open the websocket encrypted if this page came on an
|
|
/* https:// url itself, otherwise unencrypted
|
|
/*/
|
|
|
|
if (u.substring(0, 5) == 'https') {
|
|
pcol = 'wss://';
|
|
u = u.substr(8);
|
|
} else {
|
|
pcol = 'ws://';
|
|
if (u.substring(0, 4) == 'http') u = u.substr(7);
|
|
}
|
|
|
|
u = u.split('#');
|
|
|
|
if (/\/$/.test(u[0])) {
|
|
separator = '';
|
|
} else {
|
|
separator = '/';
|
|
}
|
|
|
|
return pcol + u[0] + separator + 'ws';
|
|
}
|
|
|
|
var updateVolumeIcon = function (volume) {
|
|
$('#volume-icon').removeClass('glyphicon-volume-off');
|
|
$('#volume-icon').removeClass('glyphicon-volume-up');
|
|
$('#volume-icon').removeClass('glyphicon-volume-down');
|
|
|
|
if (volume == 0) {
|
|
$('#volume-icon').addClass('glyphicon-volume-off');
|
|
} else if (volume < 50) {
|
|
$('#volume-icon').addClass('glyphicon-volume-down');
|
|
} else {
|
|
$('#volume-icon').addClass('glyphicon-volume-up');
|
|
}
|
|
};
|
|
|
|
var updatePlayIcon = function (state) {
|
|
$('#play-icon')
|
|
.removeClass('glyphicon-play')
|
|
.removeClass('glyphicon-pause');
|
|
$('#track-icon')
|
|
.removeClass('glyphicon-play')
|
|
.removeClass('glyphicon-pause')
|
|
.removeClass('glyphicon-stop');
|
|
|
|
if (state == 1) {
|
|
// stop
|
|
$('#play-icon').addClass('glyphicon-play');
|
|
$('#track-icon').addClass('glyphicon-stop');
|
|
document.getElementById('player').pause();
|
|
} else if (state == 2) {
|
|
// play
|
|
$('#play-icon').addClass('glyphicon-pause');
|
|
$('#track-icon').addClass('glyphicon-play');
|
|
if ($.cookie('autoplay') === 'true' && player.paused) {
|
|
clickLocalPlay();
|
|
}
|
|
} 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;
|
|
}
|
|
};
|
|
|
|
function updateDB() {
|
|
socket.send('MPD_API_UPDATE_DB');
|
|
$('.top-right')
|
|
.notify({
|
|
message: { text: 'Updating MPD Database... ' },
|
|
})
|
|
.show();
|
|
}
|
|
|
|
function clickPlay() {
|
|
if ($('#track-icon').hasClass('glyphicon-stop'))
|
|
socket.send('MPD_API_SET_PLAY');
|
|
else 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));
|
|
tr.remove();
|
|
} else if ($('#btntrashmodesingle').hasClass('active')) {
|
|
socket.send('MPD_API_RM_TRACK,' + tr.attr('trackid'));
|
|
tr.remove();
|
|
} else if ($('#btntrashmodedown').hasClass('active')) {
|
|
socket.send('MPD_API_RM_RANGE,' + tr.index() + ',-1');
|
|
tr.remove();
|
|
}
|
|
}
|
|
|
|
function renumber_table(tableID, item) {
|
|
was = item.children('td').first().text(); //Check if first item exists!
|
|
is = item.index() + 1; //maybe add pagination
|
|
|
|
if (was != is) {
|
|
socket.send('MPD_API_MOVE_TRACK,' + was + ',' + is);
|
|
socket.send('MPD_API_GET_QUEUE,' + pagination);
|
|
}
|
|
}
|
|
|
|
function basename(path) {
|
|
return path.split('/').reverse()[0];
|
|
}
|
|
|
|
function clickLove() {
|
|
socket.send(
|
|
'MPD_API_SEND_MESSAGE,mpdas,' +
|
|
($('#btnlove').hasClass('active') ? 'unlove' : 'love')
|
|
);
|
|
if ($('#btnlove').hasClass('active')) $('#btnlove').removeClass('active');
|
|
else $('#btnlove').addClass('active');
|
|
}
|
|
|
|
$('#btnrandom').on('click', function (e) {
|
|
socket.send(
|
|
'MPD_API_TOGGLE_RANDOM,' + ($(this).hasClass('active') ? 0 : 1)
|
|
);
|
|
});
|
|
$('#btnconsume').on('click', function (e) {
|
|
socket.send(
|
|
'MPD_API_TOGGLE_CONSUME,' + ($(this).hasClass('active') ? 0 : 1)
|
|
);
|
|
});
|
|
$('#btnsingle').on('click', function (e) {
|
|
socket.send(
|
|
'MPD_API_TOGGLE_SINGLE,' + ($(this).hasClass('active') ? 0 : 1)
|
|
);
|
|
});
|
|
$('#btncrossfade').on('click', function (e) {
|
|
socket.send(
|
|
'MPD_API_TOGGLE_CROSSFADE,' + ($(this).hasClass('active') ? 0 : 1)
|
|
);
|
|
});
|
|
$('#btnrepeat').on('click', function (e) {
|
|
socket.send(
|
|
'MPD_API_TOGGLE_REPEAT,' + ($(this).hasClass('active') ? 0 : 1)
|
|
);
|
|
});
|
|
|
|
function toggleoutput(button, id) {
|
|
socket.send(
|
|
'MPD_API_TOGGLE_OUTPUT,' +
|
|
id +
|
|
',' +
|
|
($(button).hasClass('active') ? 0 : 1)
|
|
);
|
|
}
|
|
|
|
$('#trashmode')
|
|
.children('button')
|
|
.on('click', function (e) {
|
|
$('#trashmode').children('button').removeClass('active');
|
|
$(this).addClass('active');
|
|
});
|
|
|
|
$('#btnnotify').on('click', function (e) {
|
|
if ($.cookie('notification') === 'true') {
|
|
$.cookie('notification', false);
|
|
} else {
|
|
Notification.requestPermission(function (permission) {
|
|
if (!('permission' in Notification)) {
|
|
Notification.permission = permission;
|
|
}
|
|
|
|
if (permission === 'granted') {
|
|
$.cookie('notification', true, { expires: 424242 });
|
|
$('btnnotify').addClass('active');
|
|
}
|
|
});
|
|
}
|
|
});
|
|
|
|
$('#btnautoplay').on('click', function (e) {
|
|
if ($.cookie('autoplay') === 'true') {
|
|
$.cookie('autoplay', false);
|
|
} else {
|
|
$.cookie('autoplay', true, { expires: 424242 });
|
|
$('#btnautoplay').addClass('active');
|
|
}
|
|
});
|
|
|
|
function getHost() {
|
|
socket.send('MPD_API_GET_MPDHOST');
|
|
|
|
function onEnter(event) {
|
|
if (event.which == 13) {
|
|
confirmSettings();
|
|
}
|
|
}
|
|
|
|
$('#mpdhost').keypress(onEnter);
|
|
$('#mpdport').keypress(onEnter);
|
|
$('#mpdstream').keypress(onEnter);
|
|
$('#mpd_pw').keypress(onEnter);
|
|
$('#mpd_pw_con').keypress(onEnter);
|
|
}
|
|
|
|
$('#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 addStream() {
|
|
if ($('#streamurl').val().length > 0) {
|
|
socket.send('MPD_API_ADD_TRACK,' + $('#streamurl').val());
|
|
}
|
|
$('#streamurl').val('');
|
|
$('#addstream').modal('hide');
|
|
}
|
|
|
|
function saveQueue() {
|
|
if ($('#playlistname').val().length > 0) {
|
|
socket.send('MPD_API_SAVE_QUEUE,' + $('#playlistname').val());
|
|
}
|
|
$('#savequeue').modal('hide');
|
|
}
|
|
|
|
function confirmSettings() {
|
|
if ($('#mpd_pw').val().length + $('#mpd_pw_con').val().length > 0) {
|
|
if ($('#mpd_pw').val() !== $('#mpd_pw_con').val()) {
|
|
$('#mpd_pw_con').popover('show');
|
|
setTimeout(function () {
|
|
$('#mpd_pw_con').popover('hide');
|
|
}, 2000);
|
|
return;
|
|
} else 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');
|
|
}
|
|
|
|
$('#mpd_password_set > button').on('click', function (e) {
|
|
socket.send('MPD_API_SET_MPDPASS,');
|
|
$('#mpd_pw').val('');
|
|
$('#mpd_pw_con').val('');
|
|
$('#mpd_password_set').addClass('hide');
|
|
});
|
|
|
|
function notificationsSupported() {
|
|
return 'Notification' in window;
|
|
}
|
|
|
|
function songNotify(title, artist, album) {
|
|
/*var opt = {
|
|
type: "list",
|
|
title: title,
|
|
message: title,
|
|
items: []
|
|
}
|
|
if(artist.length > 0)
|
|
opt.items.push({title: "Artist", message: artist});
|
|
if(album.length > 0)
|
|
opt.items.push({title: "Album", message: album});
|
|
*/
|
|
//chrome.notifications.create(id, options, creationCallback);
|
|
|
|
var textNotification = '';
|
|
if (typeof artist != 'undefined' && artist.length > 0)
|
|
textNotification += ' ' + artist;
|
|
if (typeof album != 'undefined' && album.length > 0)
|
|
textNotification += '\n ' + album;
|
|
|
|
var notification = new Notification(title, {
|
|
icon: 'assets/favicon.ico',
|
|
body: textNotification,
|
|
});
|
|
setTimeout(
|
|
function (notification) {
|
|
notification.close();
|
|
},
|
|
3000,
|
|
notification
|
|
);
|
|
}
|
|
|
|
$(document).keydown(function (e) {
|
|
if (e.target.tagName == 'INPUT') {
|
|
return;
|
|
}
|
|
switch (e.which) {
|
|
case 37: //left
|
|
socket.send('MPD_API_SET_PREV');
|
|
break;
|
|
case 39: //right
|
|
socket.send('MPD_API_SET_NEXT');
|
|
break;
|
|
case 32: //space
|
|
clickPlay();
|
|
break;
|
|
default:
|
|
return;
|
|
}
|
|
e.preventDefault();
|
|
});
|
|
|
|
function set_filter(c) {
|
|
filter = c;
|
|
$('#filter > a').removeClass('active');
|
|
$('#f' + c).addClass('active');
|
|
|
|
if (filter === '') {
|
|
$('#salamisandwich > tbody > tr').removeClass('hide');
|
|
} else if (filter === 'plist') {
|
|
$('#salamisandwich > tbody > tr.dir').addClass('hide');
|
|
$('#salamisandwich > tbody > tr.song').addClass('hide');
|
|
$('#salamisandwich > tbody > tr.plist').removeClass('hide');
|
|
} else {
|
|
$.each($('#salamisandwich > tbody > tr'), function (i, line) {
|
|
var first = basename($(line).attr('uri'))[0];
|
|
if ($(line).hasClass('song')) {
|
|
first = $(line).children().eq(3).text()[0];
|
|
}
|
|
|
|
if (filter === 'num') {
|
|
if (!isNaN(first)) {
|
|
$(line).removeClass('hide');
|
|
} else {
|
|
$(line).addClass('hide');
|
|
}
|
|
} else if (filter >= 'A' && filter <= 'Z') {
|
|
if (first.toUpperCase() === filter) {
|
|
$(line).removeClass('hide');
|
|
} else {
|
|
$(line).addClass('hide');
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function add_filter() {
|
|
$('#filter').empty();
|
|
$('#filter').append(
|
|
' <a onclick="set_filter(\'\')" href="#/browse/' +
|
|
pagination +
|
|
'/' +
|
|
browsepath +
|
|
'">All</a>'
|
|
);
|
|
$('#filter').append(
|
|
' <a id="fnum" onclick="set_filter(\'num\')" href="#/browse/' +
|
|
pagination +
|
|
'/' +
|
|
browsepath +
|
|
'">#</a>'
|
|
);
|
|
|
|
for (i = 65; i <= 90; i++) {
|
|
var c = String.fromCharCode(i);
|
|
$('#filter').append(
|
|
' <a id="f' +
|
|
c +
|
|
'" onclick="set_filter(\'' +
|
|
c +
|
|
'\');" href="#/browse/' +
|
|
pagination +
|
|
'/' +
|
|
browsepath +
|
|
'">' +
|
|
c +
|
|
'</a>'
|
|
);
|
|
}
|
|
|
|
$('#filter').append(
|
|
' <a id="fplist" onclick="set_filter(\'plist\')" href="#/browse/' +
|
|
pagination +
|
|
'/' +
|
|
browsepath +
|
|
'" class="glyphicon glyphicon-list"></a>'
|
|
);
|
|
$('#f' + filter).addClass('active');
|
|
$('#filter').removeClass('hide');
|
|
}
|