mirrors/ympd
1
0
Fork 0
mirror of https://github.com/SuperBFG7/ympd synced 2025-11-03 15:22:59 +00:00
Code Issues Releases Wiki Activity

Merge branch 'master' into filter

Browse Source
This commit is contained in:
Daniel Schregenberger
2018-05-11 16:59:07 +02:00
committed by GitHub
parent 61ad51ffb7 1e96a921c5
commit 3774a35f4c
12 changed files with 496 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
htdocs/css/mpd.css
View File

@@ -15,12 +15,25 @@ body {
margin-bottom: 0;
}
button {
overflow: hidden;
}
#volume-icon {
float: left;
margin-right: 10px;
margin-top: 2px;
}
#breadcrump {
display: block;
overflow: auto;
white-space: nowrap;
}
#breadcrump > li > a{
cursor: pointer;
}
@@ -59,13 +72,51 @@ body {
}
}
#salamisandwich td:nth-last-child(2), th:nth-last-child(2) {
text-align: right;
h1 {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#salamisandwich td:nth-child(2) span {
font-style:italic;
font-size:90%;
td:nth-child(4), th:nth-child(4) {
/* This *has* to be placed before
any t[dh]:nth-last-child(2) for
the override to work. */
min-width: 50%;
}
td:nth-last-child(2), th:nth-last-child(2) {
text-align: right;
width: 4em;
}
#salamisandwich td:nth-child(4) span {
font-style: italic;
font-size: 90%;
display: block;
}
td:nth-child(2), td:nth-child(3) {
min-width: 25%;
max-width: 10em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media only screen and (max-width: 600px) {
td:nth-child(2), td:nth-child(3) {
min-width: 0;
max-width: 0;
}
td:nth-child(4), th:nth-child(4) {
min-width: 10%;
white-space: normal;
}
}
tbody {
@@ -81,7 +132,7 @@ td:last-child, td:first-child {
z-index: 9999;
}
/* Positioning */
/* Positioning */
.notifications.top-right {
right: 10px;
top: 60px;

48
htdocs/index.html
View File

@@ -34,7 +34,7 @@
<ul id="nav_links" class="nav navbar-nav">
<li id="queue"><a href="#/">Queue</a></li>
<li id="browse"><a href="#/browse/0/">Browse Database</a></li>
<li id="browse"><a href="#/browse/0/">Browse</a></li>
<li id="dirble"><a href="#/dirble/">Dirble</a></li>
<li><a href="#" data-toggle="modal" data-target="#addstream">Add Stream</a></li>
<li><a href="#" data-toggle="modal" data-target="#settings" onclick="getHost();">Settings</a></li>
@@ -60,13 +60,25 @@
<span class="glyphicon glyphicon-heart"></span>
</button>
</div>
<!--
<div class="btn-group">
<div class="btn btn-toolbar btn-default">
<span id="volume-icon" class="glyphicon glyphicon-volume-up"></span>
<div id="volumeslider"></div>
</div>
</div>
</div>
-->
<div class="btn-group" role="group">
<audio id="player" preload="none"></audio>
<button type="button" class="btn btn-default" onclick="clickLocalPlay()">
<span id="localplay-icon" class="glyphicon glyphicon-play"></span>
</button>
<button type="button" class="btn btn-default" onclick="window.open('/player.html');">
<span id="localplay-icon" class="glyphicon glyphicon-new-window"></span>
</button>
</div>
</div>
<form id="search" class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
@@ -81,18 +93,19 @@
<div class="col-md-10 col-xs-12">
<div class="notifications top-right"></div>
<div class="panel panel-primary">
<!-- Default panel contents -->
<div class="panel-heading"><b id="panel-heading">Queue</b></div>
<div class="panel-heading"><b id="panel-heading">Queue</b>
<b id="panel-heading-info" class="text pull-right"></b></div>
<div class="panel-body">
<h1>
<span id="track-icon" onclick="clickPlay();" class="glyphicon glyphicon-play"></span>
<span id="currenttrack"></span>
</h1>
<h4>
<span id="album" class="text"></span>
<span id="artist" class="text pull-right"></span>
<span id="artist" class="text"></span>
<span id="album" class="text pull-right"></span>
</h4>
<p id="counter" class="text pull-right">&nbsp;&nbsp;</p>
@@ -114,8 +127,10 @@
<thead>
<tr>
<th>#</th>
<th colspan="2">Track</th>
<th>Duration</th>
<th>Artist</th>
<th>Album</th>
<th>Title</th>
<th>Length</th>
<th></th>
</tr>
</thead>
@@ -218,7 +233,7 @@
<h5>ympd uses following excellent software:</h5>
<h6><a href="http://cesanta.com/docs.html">Mongoose</a> <small>GPLv2</small></h6>
<h6><a href="http://www.musicpd.org/libs/libmpdclient/">libMPDClient</a> <small>BSD License</small></h6>
<hr />
<hr />
<div class="row">
<div class="form-group col-md-6">
<button type="button" class="btn btn-default btn-block" onclick="updateDB();">
@@ -261,6 +276,19 @@
</div>
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label class="control-label" for="mpdstream">MPD Stream URL</label>
<input type="text" class="form-control" id="mpdstream" />
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<button type="button" class="btn btn-default" onclick="updateDB();">
<span class="glyphicon glyphicon-refresh"></span> Update DB
</button>
</div>
</div>
</form>
</div>
<div class="modal-footer">
@@ -296,7 +324,7 @@
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="savequeue" tabindex="-1" role="dialog" aria-labelledby="savequeueLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">

199
htdocs/js/mpd.js
View File

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

126
htdocs/player.html Normal file
View File

@@ -0,0 +1,126 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0">-->
<meta name="viewport" content="width=320">
<meta name="description" content="ympd - fast and lightweight MPD webclient">
<meta name="author" content="andy@ndyk.de">
<title>ympd player</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/bootstrap-theme.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/mpd.css" rel="stylesheet">
<link href="assets/favicon.ico" rel="shortcut icon" type="image/vnd.microsoft.icon">
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/jquery.cookie.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-notify.js"></script>
<script type="text/javascript">
function clickLocalPlay() {
var player = document.getElementById('player');
$("#localplay-icon").removeClass("glyphicon-play").removeClass("glyphicon-pause");
if ( player.paused ) {
var mpdstream = $.cookie("mpdstream");
player.src = mpdstream;
console.log("playing mpd stream: " + player.src);
player.load();
player.play();
$("#localplay-icon").addClass("glyphicon-pause");
} else {
player.pause();
player.src='';
player.removeAttribute("src");
$("#localplay-icon").addClass("glyphicon-play");
}
}
$(document).ready(function(){
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);
});
</script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
<a class="navbar-brand" href="/" target="_blank"><span class="glyphicon glyphicon-play-circle"></span> ympd</a>
</div>
</div>
<div class="container starter-template">
<div class="row">
<div class="col-md-10 col-xs-12">
<audio id="player" preload="none"></audio>
<button type="button" class="btn btn-default btn-lg center-block" onclick="clickLocalPlay()">
<span id="localplay-icon" class="glyphicon glyphicon-play"></span>
</button>
<div class="notifications top-right"></div>
</div>
</div>
</div>
</body>
</html>