mirrors/ympd
1
0
Fork 0
mirror of https://github.com/SuperBFG7/ympd synced 2024-12-22 17:10:26 +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
commit 3774a35f4c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 496 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CMakeLists.txt
View File

@ -43,6 +43,7 @@ file(GLOB RESOURCES
htdocs/css/*.css htdocs/css/*.css
htdocs/fonts/* htdocs/fonts/*
htdocs/index.html htdocs/index.html
htdocs/player.html
) )
set(SOURCES set(SOURCES

8
README.md
View File

@ -29,6 +29,8 @@ Run flags
``` ```
Usage: ./ympd [OPTION]... Usage: ./ympd [OPTION]...
-D, --digest <htdigest> path to htdigest file for authorization
(realm ympd) [no authorization]
-h, --host <host> connect to mpd at host [localhost] -h, --host <host> connect to mpd at host [localhost]
-p, --port <port> connect to mpd at port [6600] -p, --port <port> connect to mpd at port [6600]
-w, --webport [ip:]<port> listen interface/port for webserver [8080] -w, --webport [ip:]<port> listen interface/port for webserver [8080]
@ -52,6 +54,12 @@ To run ympd with SSL support:
# ./ympd -w "ssl://8081:/path/to/ssl.pem" # ./ympd -w "ssl://8081:/path/to/ssl.pem"
``` ```
Dirble support
--------------
1. Get an API-key from http://dirble.com
2. Add the key at ```var TOKEN = "";```, in ```mpd.js```.
Copyright Copyright
--------- ---------

4
contrib/init.debian
View File

@ -25,6 +25,8 @@ MPD_HOST=localhost
MPD_PORT=6600 MPD_PORT=6600
WEB_PORT=8080 WEB_PORT=8080
DIRBLE_API_TOKEN=2e223c9909593b94fc6577361a DIRBLE_API_TOKEN=2e223c9909593b94fc6577361a
#DIGEST=--digest /path/to/htdigest
#LOCALPORT=8080
# Exit if the package is not installed # Exit if the package is not installed
@ -36,7 +38,7 @@ DIRBLE_API_TOKEN=2e223c9909593b94fc6577361a
# Load the VERBOSE setting and other rcS variables # Load the VERBOSE setting and other rcS variables
[ -f /etc/default/rcS ] && . /etc/default/rcS [ -f /etc/default/rcS ] && . /etc/default/rcS
DAEMON_OPT="--user $YMPD_USER --mpdpass '$MPD_PASSWORD' --webport $WEB_PORT --host $MPD_HOST --port $MPD_PORT --dirbletoken $DIRBLE_API_TOKEN" DAEMON_OPT="--user $YMPD_USER --mpdpass '$MPD_PASSWORD' --webport $WEB_PORT --host $MPD_HOST --port $MPD_PORT --dirbletoken $DIRBLE_API_TOKEN $DIGEST $LOCALPORT"
do_start() do_start()
{ {

2
contrib/ympd.default
View File

@ -4,3 +4,5 @@ MPD_PASSWORD=
WEB_PORT=8080 WEB_PORT=8080
YMPD_USER=nobody YMPD_USER=nobody
DIRBLE_API_TOKEN=2e223c9909593b94fc6577361a DIRBLE_API_TOKEN=2e223c9909593b94fc6577361a
#DIGEST=--digest /path/to/htdigest
#LOCALPORT=--localport 8080

4
contrib/ympd.service
View File

@ -9,8 +9,10 @@ Environment=MPD_PASSWORD=
Environment=WEB_PORT=8080 Environment=WEB_PORT=8080
Environment=YMPD_USER=nobody Environment=YMPD_USER=nobody
Environment=DIRBLE_API_TOKEN=2e223c9909593b94fc6577361a Environment=DIRBLE_API_TOKEN=2e223c9909593b94fc6577361a
Environment=DIGEST=
Environment=LOCALPORT=
EnvironmentFile=/etc/default/ympd EnvironmentFile=/etc/default/ympd
ExecStart=/usr/bin/ympd --user $YMPD_USER --mpdpass "$MPD_PASSWORD" --webport $WEB_PORT --host $MPD_HOST --port $MPD_PORT --dirbletoken $DIRBLE_API_TOKEN ExecStart=/usr/bin/ympd --user $YMPD_USER --webport $WEB_PORT --host $MPD_HOST --port $MPD_PORT --dirbletoken $DIRBLE_API_TOKEN $DIGEST $LOCALPORT
Type=simple Type=simple
[Install] [Install]

63
htdocs/css/mpd.css
View File

@ -15,12 +15,25 @@ body {
margin-bottom: 0; margin-bottom: 0;
} }
button {
overflow: hidden;
}
#volume-icon { #volume-icon {
float: left; float: left;
margin-right: 10px; margin-right: 10px;
margin-top: 2px; margin-top: 2px;
} }
#breadcrump {
display: block;
overflow: auto;
white-space: nowrap;
}
#breadcrump > li > a{ #breadcrump > li > a{
cursor: pointer; cursor: pointer;
} }
@ -59,13 +72,51 @@ body {
} }
} }
#salamisandwich td:nth-last-child(2), th:nth-last-child(2) { h1 {
text-align: right; display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
} }
#salamisandwich td:nth-child(2) span { td:nth-child(4), th:nth-child(4) {
font-style:italic; /* This *has* to be placed before
font-size:90%; 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 { tbody {
@ -81,7 +132,7 @@ td:last-child, td:first-child {
z-index: 9999; z-index: 9999;
} }
/* Positioning */ /* Positioning */
.notifications.top-right { .notifications.top-right {
right: 10px; right: 10px;
top: 60px; top: 60px;

48
htdocs/index.html
View File

@ -34,7 +34,7 @@
<ul id="nav_links" class="nav navbar-nav"> <ul id="nav_links" class="nav navbar-nav">
<li id="queue"><a href="#/">Queue</a></li> <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 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="#addstream">Add Stream</a></li>
<li><a href="#" data-toggle="modal" data-target="#settings" onclick="getHost();">Settings</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> <span class="glyphicon glyphicon-heart"></span>
</button> </button>
</div> </div>
<!--
<div class="btn-group"> <div class="btn-group">
<div class="btn btn-toolbar btn-default"> <div class="btn btn-toolbar btn-default">
<span id="volume-icon" class="glyphicon glyphicon-volume-up"></span> <span id="volume-icon" class="glyphicon glyphicon-volume-up"></span>
<div id="volumeslider"></div> <div id="volumeslider"></div>
</div> </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"> <form id="search" class="navbar-form navbar-right" role="search">
<div class="form-group"> <div class="form-group">
<input type="text" class="form-control" placeholder="Search"> <input type="text" class="form-control" placeholder="Search">
@ -81,18 +93,19 @@
<div class="col-md-10 col-xs-12"> <div class="col-md-10 col-xs-12">
<div class="notifications top-right"></div> <div class="notifications top-right"></div>
<div class="panel panel-primary"> <div class="panel panel-primary">
<!-- Default panel contents --> <!-- 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"> <div class="panel-body">
<h1> <h1>
<span id="track-icon" onclick="clickPlay();" class="glyphicon glyphicon-play"></span> <span id="track-icon" onclick="clickPlay();" class="glyphicon glyphicon-play"></span>
<span id="currenttrack"></span> <span id="currenttrack"></span>
</h1> </h1>
<h4> <h4>
<span id="album" class="text"></span> <span id="artist" class="text"></span>
<span id="artist" class="text pull-right"></span> <span id="album" class="text pull-right"></span>
</h4> </h4>
<p id="counter" class="text pull-right">&nbsp;&nbsp;</p> <p id="counter" class="text pull-right">&nbsp;&nbsp;</p>
@ -114,8 +127,10 @@
<thead> <thead>
<tr> <tr>
<th>#</th> <th>#</th>
<th colspan="2">Track</th> <th>Artist</th>
<th>Duration</th> <th>Album</th>
<th>Title</th>
<th>Length</th>
<th></th> <th></th>
</tr> </tr>
</thead> </thead>
@ -218,7 +233,7 @@
<h5>ympd uses following excellent software:</h5> <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://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> <h6><a href="http://www.musicpd.org/libs/libmpdclient/">libMPDClient</a> <small>BSD License</small></h6>
<hr /> <hr />
<div class="row"> <div class="row">
<div class="form-group col-md-6"> <div class="form-group col-md-6">
<button type="button" class="btn btn-default btn-block" onclick="updateDB();"> <button type="button" class="btn btn-default btn-block" onclick="updateDB();">
@ -261,6 +276,19 @@
</div> </div>
</div> </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> </form>
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
@ -296,7 +324,7 @@
</div><!-- /.modal-content --> </div><!-- /.modal-content -->
</div><!-- /.modal-dialog --> </div><!-- /.modal-dialog -->
</div><!-- /.modal --> </div><!-- /.modal -->
<div class="modal fade" id="savequeue" tabindex="-1" role="dialog" aria-labelledby="savequeueLabel" aria-hidden="true"> <div class="modal fade" id="savequeue" tabindex="-1" role="dialog" aria-labelledby="savequeueLabel" aria-hidden="true">
<div class="modal-dialog"> <div class="modal-dialog">
<div class="modal-content"> <div class="modal-content">

199
htdocs/js/mpd.js
View File

@ -16,6 +16,8 @@
Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA. Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA.
*/ */
var TOKEN = "";
var socket; var socket;
var last_state; var last_state;
var last_outputs; var last_outputs;
@ -45,6 +47,8 @@ var app = $.sammy(function() {
socket.send('MPD_API_GET_QUEUE,'+pagination); socket.send('MPD_API_GET_QUEUE,'+pagination);
$('#panel-heading').text("Queue"); $('#panel-heading').text("Queue");
$('#panel-heading-info').empty();
$('#queue').addClass('active'); $('#queue').addClass('active');
} }
@ -111,6 +115,9 @@ var app = $.sammy(function() {
}); });
this.get(/\#\/dirble\/(\d+)\/(\d+)/, function() { this.get(/\#\/dirble\/(\d+)\/(\d+)/, function() {
if (TOKEN === "") context.redirect("#/0");
prepare(); prepare();
current_app = 'dirble'; current_app = 'dirble';
$('#breadcrump').removeClass('hide').empty().append("<li><a href=\"#/dirble/\">Categories</a></li><li>"+dirble_selected_cat+"</li>"); $('#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(); $('#dirble_right').find("tr:gt(0)").remove();
$('#panel-heading').text("Dirble"); $('#panel-heading').text("Dirble");
$('#panel-heading-info').empty();
$('#dirble').addClass('active'); $('#dirble').addClass('active');
$('#next').addClass('hide'); $('#next').addClass('hide');
@ -137,6 +146,9 @@ var app = $.sammy(function() {
}); });
this.get(/\#\/dirble\//, function() { this.get(/\#\/dirble\//, function() {
if (TOKEN === "") context.redirect("#/0");
prepare(); prepare();
current_app = 'dirble'; current_app = 'dirble';
$('#breadcrump').removeClass('hide').empty().append("<li>Categories</li>"); $('#breadcrump').removeClass('hide').empty().append("<li>Categories</li>");
@ -147,6 +159,8 @@ var app = $.sammy(function() {
$('#dirble_right').find("tr:gt(0)").remove(); $('#dirble_right').find("tr:gt(0)").remove();
$('#panel-heading').text("Dirble"); $('#panel-heading').text("Dirble");
$('#panel-heading-info').empty();
$('#dirble').addClass('active'); $('#dirble').addClass('active');
dirble_stations = false; dirble_stations = false;
@ -187,6 +201,67 @@ $(document).ready(function(){
$('#btnnotify').addClass("active") $('#btnnotify').addClass("active")
add_filter(); 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() { function webSocketConnect() {
@ -216,12 +291,25 @@ function webSocketConnect() {
return; return;
var obj = JSON.parse(msg.data); var obj = JSON.parse(msg.data);
switch (obj.type) { switch (obj.type) {
case 'queue': case 'queue':
if(current_app !== 'queue') if(current_app !== 'queue')
break; 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(); $('#salamisandwich > tbody').empty();
for (var song in obj.data) { for (var song in obj.data) {
var minutes = Math.floor(obj.data[song].duration / 60); var minutes = Math.floor(obj.data[song].duration / 60);
@ -229,9 +317,10 @@ function webSocketConnect() {
$('#salamisandwich > tbody').append( $('#salamisandwich > tbody').append(
"<tr trackid=\"" + obj.data[song].id + "\"><td>" + (obj.data[song].pos + 1) + "</td>" + "<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].artist +"</td>" +
"<td>" + obj.data[song].title + "</td>" + "<td>"+ obj.data[song].album +"</td>" +
"<td>" + minutes + ":" + (seconds < 10 ? '0' : '') + seconds + "<td>"+ obj.data[song].title +"</td>" +
"<td>"+ minutes + ":" + (seconds < 10 ? '0' : '') + seconds +
"</td><td></td></tr>"); "</td><td></td></tr>");
} }
@ -326,7 +415,7 @@ function webSocketConnect() {
$('#salamisandwich > tbody').append( $('#salamisandwich > tbody').append(
"<tr uri=\"" + encodeURI(obj.data[item].dir) + "\" class=\"" + clazz + "\">" + "<tr uri=\"" + encodeURI(obj.data[item].dir) + "\" class=\"" + clazz + "\">" +
"<td><span class=\"glyphicon glyphicon-folder-open\"></span></td>" + "<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>" "<td></td><td></td></tr>"
); );
break; break;
@ -338,7 +427,7 @@ function webSocketConnect() {
$('#salamisandwich > tbody').append( $('#salamisandwich > tbody').append(
"<tr uri=\"" + encodeURI(obj.data[item].plist) + "\" class=\"" + clazz + "\">" + "<tr uri=\"" + encodeURI(obj.data[item].plist) + "\" class=\"" + clazz + "\">" +
"<td><span class=\"glyphicon glyphicon-list\"></span></td>" + "<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>" "<td></td><td></td></tr>"
); );
break; break;
@ -346,15 +435,19 @@ function webSocketConnect() {
var minutes = Math.floor(obj.data[item].duration / 60); var minutes = Math.floor(obj.data[item].duration / 60);
var seconds = obj.data[item].duration - minutes * 60; var seconds = obj.data[item].duration - minutes * 60;
if (typeof obj.data[item].artist === 'undefined') { if (obj.data[item].artist == null) {
var details = "<td colspan=\"2\">" + obj.data[item].title + "</td>"; var artist = "<td colspan=\"2\">";
} else { } 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\">" + "<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>" + minutes + ":" + (seconds < 10 ? '0' : '') + seconds +
"</td><td></td></tr>" "</td><td></td></tr>"
); );
@ -365,7 +458,7 @@ function webSocketConnect() {
} else { } else {
$('#salamisandwich > tbody').append( $('#salamisandwich > tbody').append(
"<tr><td><span class=\"glyphicon glyphicon-remove\"></span></td>" + "<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>" "<td></td><td></td></tr>"
); );
} }
@ -506,7 +599,7 @@ function webSocketConnect() {
break; break;
case 'outputnames': case 'outputnames':
$('#btn-outputs-block button').remove(); $('#btn-outputs-block button').remove();
if (obj.data.length > 1) { if ( Object.keys(obj.data).length ) {
$.each(obj.data, function(id, name){ $.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>'); 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')); btn.appendTo($('#btn-outputs-block'));
@ -541,7 +634,7 @@ function webSocketConnect() {
socket.send('MPD_API_GET_QUEUE,'+pagination); socket.send('MPD_API_GET_QUEUE,'+pagination);
break; break;
case 'song_change': case 'song_change':
updatePageTitle(obj.data);
$('#album').text(""); $('#album').text("");
$('#artist').text(""); $('#artist').text("");
@ -550,14 +643,14 @@ function webSocketConnect() {
$('#currenttrack').text(" " + obj.data.title); $('#currenttrack').text(" " + obj.data.title);
var notification = "<strong><h4>" + obj.data.title + "</h4></strong>"; 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) { if(obj.data.artist) {
$('#artist').text(obj.data.artist); $('#artist').text(obj.data.artist);
notification += obj.data.artist + "<br />"; notification += obj.data.artist + "<br />";
} }
if(obj.data.album) {
$('#album').text(obj.data.album);
notification += obj.data.album + "<br />";
}
if ($.cookie("notification") === "true") if ($.cookie("notification") === "true")
songNotify(obj.data.title, obj.data.artist, obj.data.album ); songNotify(obj.data.title, obj.data.artist, obj.data.album );
@ -565,11 +658,11 @@ function webSocketConnect() {
$('.top-right').notify({ $('.top-right').notify({
message:{html: notification}, message:{html: notification},
type: "info", type: "info",
}).show(); }).show();
break; break;
case 'mpdhost': case 'mpdhost':
$('#mpdhost').val(obj.data.host); $('#mpdhost').val(obj.data.host);
setLocalStream(obj.data.host);
$('#mpdport').val(obj.data.port); $('#mpdport').val(obj.data.port);
if(obj.data.passwort_set) if(obj.data.passwort_set)
$('#mpd_password_set').removeClass('hide'); $('#mpd_password_set').removeClass('hide');
@ -671,12 +764,28 @@ var updatePlayIcon = function(state)
if(state == 1) { // stop if(state == 1) { // stop
$("#play-icon").addClass("glyphicon-play"); $("#play-icon").addClass("glyphicon-play");
$('#track-icon').addClass("glyphicon-stop"); $('#track-icon').addClass("glyphicon-stop");
} else if(state == 2) { // pause document.getElementById('player').pause();
} else if(state == 2) { // play
$("#play-icon").addClass("glyphicon-pause"); $("#play-icon").addClass("glyphicon-pause");
$('#track-icon').addClass("glyphicon-play"); $('#track-icon').addClass("glyphicon-play");
} else { // play } else { // pause
$("#play-icon").addClass("glyphicon-play"); $("#play-icon").addClass("glyphicon-play");
$('#track-icon').addClass("glyphicon-pause"); $('#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'); 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) { function trash(tr) {
if ( $('#btntrashmodeup').hasClass('active') ) { if ( $('#btntrashmodeup').hasClass('active') ) {
socket.send('MPD_API_RM_RANGE,0,' + (tr.index() + 1)); socket.send('MPD_API_RM_RANGE,0,' + (tr.index() + 1));
@ -784,6 +939,7 @@ function getHost() {
$('#mpdhost').keypress(onEnter); $('#mpdhost').keypress(onEnter);
$('#mpdport').keypress(onEnter); $('#mpdport').keypress(onEnter);
$('#mpdstream').keypress(onEnter);
$('#mpd_pw').keypress(onEnter); $('#mpd_pw').keypress(onEnter);
$('#mpd_pw_con').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_MPDPASS,'+$('#mpd_pw').val());
} }
socket.send('MPD_API_SET_MPDHOST,'+$('#mpdport').val()+','+$('#mpdhost').val()); socket.send('MPD_API_SET_MPDHOST,'+$('#mpdport').val()+','+$('#mpdhost').val());
$.cookie("mpdstream", $("#mpdstream").val(), { expires: 424242 });
$('#settings').modal('hide'); $('#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>

67
src/mpd_client.c
View File

@ -475,28 +475,40 @@ char* mpd_get_title(struct mpd_song const *song)
return str; return str;
} }
char* mpd_get_artist(struct mpd_song const *song)
{
char *str;
str = (char *)mpd_song_get_tag(song, MPD_TAG_ARTIST, 0);
if (str == NULL) {
return "";
} else {
return str;
}
}
char* mpd_get_album(struct mpd_song const *song) char* mpd_get_album(struct mpd_song const *song)
{ {
char *str; char *str;
str = (char *)mpd_song_get_tag(song, MPD_TAG_ALBUM, 0); str = (char *)mpd_song_get_tag(song, MPD_TAG_ALBUM, 0);
if (str == NULL) { if(str == NULL){
return ""; str = "-";
} else {
return str;
} }
return str;
}
char* mpd_get_artist(struct mpd_song const *song)
{
char *str;
str = (char *)mpd_song_get_tag(song, MPD_TAG_ARTIST, 0);
if(str == NULL){
str = "-";
}
return str;
}
char* mpd_get_year(struct mpd_song const *song)
{
char *str;
str = (char *)mpd_song_get_tag(song, MPD_TAG_DATE, 0);
if(str == NULL){
str = "-";
}
return str;
} }
int mpd_put_state(char *buffer, int *current_song_id, unsigned *queue_version) int mpd_put_state(char *buffer, int *current_song_id, unsigned *queue_version)
@ -600,6 +612,7 @@ int mpd_put_queue(char *buffer, unsigned int offset)
char *cur = buffer; char *cur = buffer;
const char *end = buffer + MAX_SIZE; const char *end = buffer + MAX_SIZE;
struct mpd_entity *entity; struct mpd_entity *entity;
unsigned long totalTime = 0;
if (!mpd_send_list_queue_range_meta(mpd.conn, offset, offset+MAX_ELEMENTS_PER_PAGE)) if (!mpd_send_list_queue_range_meta(mpd.conn, offset, offset+MAX_ELEMENTS_PER_PAGE))
RETURN_ERROR_AND_RECOVER("mpd_send_list_queue_meta"); RETURN_ERROR_AND_RECOVER("mpd_send_list_queue_meta");
@ -608,16 +621,22 @@ int mpd_put_queue(char *buffer, unsigned int offset)
while((entity = mpd_recv_entity(mpd.conn)) != NULL) { while((entity = mpd_recv_entity(mpd.conn)) != NULL) {
const struct mpd_song *song; const struct mpd_song *song;
unsigned int drtn;
if(mpd_entity_get_type(entity) == MPD_ENTITY_TYPE_SONG) { if(mpd_entity_get_type(entity) == MPD_ENTITY_TYPE_SONG) {
song = mpd_entity_get_song(entity); song = mpd_entity_get_song(entity);
drtn = mpd_song_get_duration(song);
cur += json_emit_raw_str(cur, end - cur, "{\"id\":"); cur += json_emit_raw_str(cur, end - cur, "{\"id\":");
cur += json_emit_int(cur, end - cur, mpd_song_get_id(song)); cur += json_emit_int(cur, end - cur, mpd_song_get_id(song));
cur += json_emit_raw_str(cur, end - cur, ",\"pos\":"); cur += json_emit_raw_str(cur, end - cur, ",\"pos\":");
cur += json_emit_int(cur, end - cur, mpd_song_get_pos(song)); cur += json_emit_int(cur, end - cur, mpd_song_get_pos(song));
cur += json_emit_raw_str(cur, end - cur, ",\"duration\":"); cur += json_emit_raw_str(cur, end - cur, ",\"duration\":");
cur += json_emit_int(cur, end - cur, mpd_song_get_duration(song)); cur += json_emit_int(cur, end - cur, drtn);
cur += json_emit_raw_str(cur, end - cur, ",\"artist\":");
cur += json_emit_quoted_str(cur, end - cur, mpd_get_artist(song));
cur += json_emit_raw_str(cur, end - cur, ",\"album\":");
cur += json_emit_quoted_str(cur, end - cur, mpd_get_album(song));
cur += json_emit_raw_str(cur, end - cur, ",\"title\":"); cur += json_emit_raw_str(cur, end - cur, ",\"title\":");
cur += json_emit_quoted_str(cur, end - cur, mpd_get_title(song)); cur += json_emit_quoted_str(cur, end - cur, mpd_get_title(song));
cur += json_emit_raw_str(cur, end - cur, ",\"artist\":"); cur += json_emit_raw_str(cur, end - cur, ",\"artist\":");
@ -625,6 +644,8 @@ int mpd_put_queue(char *buffer, unsigned int offset)
cur += json_emit_raw_str(cur, end - cur, ",\"album\":"); cur += json_emit_raw_str(cur, end - cur, ",\"album\":");
cur += json_emit_quoted_str(cur, end - cur, mpd_get_album(song)); cur += json_emit_quoted_str(cur, end - cur, mpd_get_album(song));
cur += json_emit_raw_str(cur, end - cur, "},"); cur += json_emit_raw_str(cur, end - cur, "},");
totalTime += drtn;
} }
mpd_entity_free(entity); mpd_entity_free(entity);
} }
@ -632,7 +653,9 @@ int mpd_put_queue(char *buffer, unsigned int offset)
/* remove last ',' */ /* remove last ',' */
cur--; cur--;
cur += json_emit_raw_str(cur, end - cur, "]}"); cur += json_emit_raw_str(cur, end - cur, "],\"totalTime\":");
cur += json_emit_int(cur, end - cur, totalTime);
cur += json_emit_raw_str(cur, end - cur, "}");
return cur - buffer; return cur - buffer;
} }
@ -676,6 +699,10 @@ int mpd_put_browse(char *buffer, char *path, unsigned int offset)
song = mpd_entity_get_song(entity); song = mpd_entity_get_song(entity);
cur += json_emit_raw_str(cur, end - cur, "{\"type\":\"song\",\"uri\":"); cur += json_emit_raw_str(cur, end - cur, "{\"type\":\"song\",\"uri\":");
cur += json_emit_quoted_str(cur, end - cur, mpd_song_get_uri(song)); cur += json_emit_quoted_str(cur, end - cur, mpd_song_get_uri(song));
cur += json_emit_raw_str(cur, end - cur, ",\"album\":");
cur += json_emit_quoted_str(cur, end - cur, mpd_get_album(song));
cur += json_emit_raw_str(cur, end - cur, ",\"artist\":");
cur += json_emit_quoted_str(cur, end - cur, mpd_get_artist(song));
cur += json_emit_raw_str(cur, end - cur, ",\"duration\":"); cur += json_emit_raw_str(cur, end - cur, ",\"duration\":");
cur += json_emit_int(cur, end - cur, mpd_song_get_duration(song)); cur += json_emit_int(cur, end - cur, mpd_song_get_duration(song));
cur += json_emit_raw_str(cur, end - cur, ",\"title\":"); cur += json_emit_raw_str(cur, end - cur, ",\"title\":");
@ -734,6 +761,10 @@ int mpd_search(char *buffer, char *searchstr)
while((song = mpd_recv_song(mpd.conn)) != NULL) { while((song = mpd_recv_song(mpd.conn)) != NULL) {
cur += json_emit_raw_str(cur, end - cur, "{\"type\":\"song\",\"uri\":"); cur += json_emit_raw_str(cur, end - cur, "{\"type\":\"song\",\"uri\":");
cur += json_emit_quoted_str(cur, end - cur, mpd_song_get_uri(song)); cur += json_emit_quoted_str(cur, end - cur, mpd_song_get_uri(song));
cur += json_emit_raw_str(cur, end - cur, ",\"album\":");
cur += json_emit_quoted_str(cur, end - cur, mpd_get_album(song));
cur += json_emit_raw_str(cur, end - cur, ",\"artist\":");
cur += json_emit_quoted_str(cur, end - cur, mpd_get_artist(song));
cur += json_emit_raw_str(cur, end - cur, ",\"duration\":"); cur += json_emit_raw_str(cur, end - cur, ",\"duration\":");
cur += json_emit_int(cur, end - cur, mpd_song_get_duration(song)); cur += json_emit_int(cur, end - cur, mpd_song_get_duration(song));
cur += json_emit_raw_str(cur, end - cur, ",\"title\":"); cur += json_emit_raw_str(cur, end - cur, ",\"title\":");

2
src/mpd_client.h
View File

@ -84,8 +84,10 @@ enum mpd_conn_states {
struct t_mpd { struct t_mpd {
int port; int port;
int local_port;
char host[128]; char host[128];
char *password; char *password;
char *gpass;
struct mpd_connection *conn; struct mpd_connection *conn;
enum mpd_conn_states conn_state; enum mpd_conn_states conn_state;

32
src/ympd.c
View File

@ -39,6 +39,9 @@ void bye()
} }
static int server_callback(struct mg_connection *c, enum mg_event ev) { static int server_callback(struct mg_connection *c, enum mg_event ev) {
int result = MG_FALSE;
FILE *fp = NULL;
switch(ev) { switch(ev) {
case MG_CLOSE: case MG_CLOSE:
mpd_close_handler(c); mpd_close_handler(c);
@ -57,7 +60,16 @@ static int server_callback(struct mg_connection *c, enum mg_event ev) {
return callback_http(c); return callback_http(c);
#endif #endif
case MG_AUTH: case MG_AUTH:
return MG_TRUE; // no auth for websockets since mobile safari does not support it
if ( (mpd.gpass == NULL) || (c->is_websocket) || ((mpd.local_port > 0) && (c->local_port == mpd.local_port)) )
return MG_TRUE;
else {
if ( (fp = fopen(mpd.gpass, "r")) != NULL ) {
result = mg_authorize_digest(c, fp);
fclose(fp);
}
}
return result;
default: default:
return MG_FALSE; return MG_FALSE;
} }
@ -77,12 +89,17 @@ int main(int argc, char **argv)
mg_set_option(server, "document_root", SRC_PATH); mg_set_option(server, "document_root", SRC_PATH);
#endif #endif
mg_set_option(server, "auth_domain", "ympd");
mpd.port = 6600; mpd.port = 6600;
mpd.local_port = 0;
mpd.gpass = NULL;
strcpy(mpd.host, "127.0.0.1"); strcpy(mpd.host, "127.0.0.1");
static struct option long_options[] = { static struct option long_options[] = {
{"digest", required_argument, 0, 'D'},
{"host", required_argument, 0, 'h'}, {"host", required_argument, 0, 'h'},
{"port", required_argument, 0, 'p'}, {"port", required_argument, 0, 'p'},
{"localport", required_argument, 0, 'l'},
{"webport", required_argument, 0, 'w'}, {"webport", required_argument, 0, 'w'},
{"dirbletoken", required_argument, 0, 'd'}, {"dirbletoken", required_argument, 0, 'd'},
{"user", required_argument, 0, 'u'}, {"user", required_argument, 0, 'u'},
@ -92,15 +109,21 @@ int main(int argc, char **argv)
{0, 0, 0, 0 } {0, 0, 0, 0 }
}; };
while((n = getopt_long(argc, argv, "h:p:w:u:vm:", while((n = getopt_long(argc, argv, "D:h:p:l:w:u:d:v:m",
long_options, &option_index)) != -1) { long_options, &option_index)) != -1) {
switch (n) { switch (n) {
case 'D':
mpd.gpass = strdup(optarg);
break;
case 'h': case 'h':
strncpy(mpd.host, optarg, sizeof(mpd.host)); strncpy(mpd.host, optarg, sizeof(mpd.host));
break; break;
case 'p': case 'p':
mpd.port = atoi(optarg); mpd.port = atoi(optarg);
break; break;
case 'l':
mpd.local_port = atoi(optarg);
break;
case 'w': case 'w':
webport = strdup(optarg); webport = strdup(optarg);
break; break;
@ -123,12 +146,15 @@ int main(int argc, char **argv)
break; break;
default: default:
fprintf(stderr, "Usage: %s [OPTION]...\n\n" fprintf(stderr, "Usage: %s [OPTION]...\n\n"
" -D, --digest <htdigest>\tpath to htdigest file for authorization\n"
" \t(realm ympd) [no authorization]\n"
" -h, --host <host>\t\tconnect to mpd at host [localhost]\n" " -h, --host <host>\t\tconnect to mpd at host [localhost]\n"
" -p, --port <port>\t\tconnect to mpd at port [6600]\n" " -p, --port <port>\t\tconnect to mpd at port [6600]\n"
" -l, --localport <port>\t\tskip authorization for local port\n"
" -w, --webport [ip:]<port>\tlisten interface/port for webserver [8080]\n" " -w, --webport [ip:]<port>\tlisten interface/port for webserver [8080]\n"
" -u, --user <username>\t\tdrop priviliges to user after socket bind\n" " -u, --user <username>\t\tdrop priviliges to user after socket bind\n"
" -d, --dirbletoken <apitoken>\tDirble API token\n" " -d, --dirbletoken <apitoken>\tDirble API token\n"
" -V, --version\t\t\tget version\n" " -v, --version\t\t\tget version\n"
" -m, --mpdpass <password>\tspecifies the password to use when connecting to mpd\n" " -m, --mpdpass <password>\tspecifies the password to use when connecting to mpd\n"
" --help\t\t\t\tthis help\n" " --help\t\t\t\tthis help\n"
, argv[0]); , argv[0]);