mirror of
https://github.com/SuperBFG7/ympd
synced 2026-09-21 16:38:42 +00:00
fix buttons, added auto-reconnect, code cleanup
This commit is contained in:
Andrew Karpow
@@ -1,7 +1,22 @@
|
||||
body {
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
.starter-template {
|
||||
padding: 40px 15px;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.slider.slider-horizontal {
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.slider.slider-horizontal .slider-track {
|
||||
height: 10px;
|
||||
margin-top: -6px;
|
||||
}
|
||||
|
||||
.progress {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
+110
-76
@@ -13,79 +13,85 @@
|
||||
<link href="css/bootstrap.css" rel="stylesheet">
|
||||
|
||||
<!-- Custom styles for this template -->
|
||||
<link href="css/starter-template.css" rel="stylesheet">
|
||||
<link href="css/slider.css" rel="stylesheet">
|
||||
<link href="css/starter-template.css" rel="stylesheet">
|
||||
|
||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||
<!--[if lt IE 9]>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
|
||||
<div class="container">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">ympd</a>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse">
|
||||
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="active"><a href="#">Playlist</a></li>
|
||||
<li><a href="#about">Browse</a></li>
|
||||
<li><a href="#contact">About</a></li>
|
||||
</ul>
|
||||
|
||||
<form class="navbar-form navbar-right" role="search">
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-default">
|
||||
<span class="glyphicon glyphicon-search"></span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="btn-toolbar navbar-btn navbar-right" role="toolbar">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default">
|
||||
<span class="glyphicon glyphicon-backward" onclick="socket.send('MPD_API_SET_NEXT')"></span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-default" onclick="socket.send('MPD_API_SET_PAUSE')">
|
||||
<span id="play-icon" class="glyphicon glyphicon-pause"></span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-default" onclick="socket.send('MPD_API_SET_PREV')">
|
||||
<span class="glyphicon glyphicon-forward"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-toolbar btn-default">
|
||||
<span id="volume-icon" class="glyphicon glyphicon-volume-up"></span>
|
||||
<input type="text" class="span2" value="0" data-slider-min="0" data-slider-max="100" data-slider-step="5" id="volumeslider" data-slider-tooltip="hide">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div><!--/.nav-collapse -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="progress progress-striped active">
|
||||
<div id="progressbar" class="progress-bar" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
|
||||
<span class="sr-only">60% Complete</span>
|
||||
</div>
|
||||
</div>
|
||||
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
|
||||
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
|
||||
<![endif]-->
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
|
||||
<div class="container">
|
||||
<div class="starter-template">
|
||||
<div class="panel panel-default">
|
||||
<div class="navbar-header">
|
||||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
</button>
|
||||
<a class="navbar-brand" href="#">ympd</a>
|
||||
</div>
|
||||
<div class="collapse navbar-collapse">
|
||||
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="active"><a href="#">Playlist</a></li>
|
||||
<li><a href="#about">Browse</a></li>
|
||||
<li><a href="#contact">About</a></li>
|
||||
</ul>
|
||||
|
||||
<form class="navbar-form navbar-right" role="search">
|
||||
<div class="form-group">
|
||||
<input type="text" class="form-control" placeholder="Search">
|
||||
</div>
|
||||
<button type="submit" class="btn btn-default">
|
||||
<span class="glyphicon glyphicon-search"></span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="btn-toolbar navbar-btn navbar-right" role="toolbar">
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-default">
|
||||
<span class="glyphicon glyphicon-backward" onclick="socket.send('MPD_API_SET_NEXT')"></span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-default" onclick="socket.send('MPD_API_SET_PAUSE')">
|
||||
<span id="play-icon" class="glyphicon glyphicon-pause"></span>
|
||||
</button>
|
||||
<button type="button" class="btn btn-default" onclick="socket.send('MPD_API_SET_PREV')">
|
||||
<span class="glyphicon glyphicon-forward"></span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<button type="button" class="btn btn-toolbar btn-default">
|
||||
<span id="volume-icon" class="glyphicon glyphicon-volume-up"></span>
|
||||
|
||||
<input type="text" class="span2" value="0" data-slider-min="0" data-slider-max="100" data-slider-step="5" id="volumeslider" data-slider-tooltip="hide">
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div><!--/.nav-collapse -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container starter-template">
|
||||
<div class="row">
|
||||
|
||||
<div class="col-md-10">
|
||||
<div id="alert" class="alert hide"></div>
|
||||
<div class="panel panel-primary">
|
||||
<!-- Default panel contents -->
|
||||
<div class="panel-heading">Playlist</div>
|
||||
<div class="panel-body">
|
||||
<h2><span id="track-icon" class="glyphicon glyphicon-play"></span> Playing track xyz</h2>
|
||||
<p class="text pull-right"> 2:13/4:12</p>
|
||||
|
||||
<div class="progress progress-striped active">
|
||||
<div id="progressbar" class="progress-bar navbar-left" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Table -->
|
||||
<table id="salamisandwich" class="table">
|
||||
@@ -101,17 +107,45 @@
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div><!-- /.container -->
|
||||
|
||||
<div class="col-md-2" >
|
||||
<div data-spy="affix">
|
||||
<div class="btn-group-vertical btn-block btn-group-lg" data-toggle="buttons">
|
||||
<button id="btnrandom" type="button" class="btn btn-default" onclick="toggleButton(this.id)">
|
||||
<span class="glyphicon glyphicon-random"></span> Random
|
||||
</button>
|
||||
<button id="btnconsume" type="button" class="btn btn-default" onclick="toggleButton(this.id)">
|
||||
<span class="glyphicon glyphicon-fire"></span> Consume
|
||||
</button>
|
||||
<button id="btnsingle" type="button" class="btn btn-default" onclick="toggleButton(this.id)">
|
||||
<span class="glyphicon glyphicon-star"></span> Single
|
||||
</button>
|
||||
<button id="btnrepeat" type="button" class="btn btn-default" onclick="toggleButton(this.id)">
|
||||
<span class="glyphicon glyphicon-repeat"></span> Repeat
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<button type="button" class="btn btn-block btn-default btn-lg dropdown-toggle" data-toggle="dropdown">
|
||||
<span class="glyphicon glyphicon-wrench"></span> Options <span class="caret"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu">
|
||||
<li><a href="#" onclick="updateDB()"><span class="glyphicon glyphicon-refresh"></span> Update Database</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div><!-- /.col-md-2 -->
|
||||
|
||||
</div><!-- /.row -->
|
||||
</div><!-- /.container -->
|
||||
|
||||
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="js/jquery-1.10.2.min.js"></script>
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
<script src="js/bootstrap-slider.js"></script>
|
||||
<script src="js/mpd.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<!-- Bootstrap core JavaScript
|
||||
================================================== -->
|
||||
<!-- Placed at the end of the document so the pages load faster -->
|
||||
<script src="js/jquery-1.10.2.min.js"></script>
|
||||
<script src="js/bootstrap.min.js"></script>
|
||||
<script src="js/bootstrap-slider.js"></script>
|
||||
<script src="js/mpd.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
+152
-64
@@ -1,68 +1,128 @@
|
||||
var socket;
|
||||
|
||||
if (typeof MozWebSocket != "undefined") {
|
||||
socket = new MozWebSocket(get_appropriate_ws_url(), "ympd-client");
|
||||
} else {
|
||||
socket = new WebSocket(get_appropriate_ws_url(), "ympd-client");
|
||||
}
|
||||
|
||||
try {
|
||||
socket.onopen = function() {
|
||||
console.log("Connected");
|
||||
init();
|
||||
}
|
||||
|
||||
socket.onmessage =function got_packet(msg) {
|
||||
console.log(msg.data);
|
||||
var obj = JSON.parse(msg.data);
|
||||
switch (obj.type) {
|
||||
case "playlist":
|
||||
for (var song in obj.data) {
|
||||
var minutes = Math.floor(obj.data[song].duration / 60);
|
||||
var seconds = obj.data[song].duration - minutes * 60;
|
||||
|
||||
$('#salamisandwich tr:last').after(
|
||||
"<tr id=\"playlist_" + obj.data[song].id + "\"><td>" + obj.data[song].id + "</td>" +
|
||||
"<td>"+ obj.data[song].uri +"</td>" +
|
||||
"<td>"+ obj.data[song].title.replace(/%07/g, '"') +"</td>" +
|
||||
"<td>"+ minutes + ":" + (seconds < 10 ? '0' : '') + seconds +"</td></tr>");
|
||||
}
|
||||
break;
|
||||
case "state":
|
||||
$('#volumeslider').slider('setValue', obj.data.volume)
|
||||
var progress = Math.floor(100*obj.data.elapsedTime/obj.data.totalTime) + "%";
|
||||
$('#progressbar').width(progress);
|
||||
$('#playlist_'+obj.data.currentsongid).addClass('active');
|
||||
updatePlayIcon(obj.data.state);
|
||||
updateVolumeIcon(obj.data.volume);
|
||||
|
||||
break;
|
||||
default:
|
||||
alert("Sie bleiben leider dumm");
|
||||
break;
|
||||
}
|
||||
}
|
||||
socket.onclose = function(){
|
||||
console.log("Disconnected");
|
||||
|
||||
}
|
||||
} catch(exception) {
|
||||
alert('<p>Error' + exception);
|
||||
}
|
||||
var last_state;
|
||||
|
||||
$('#volumeslider').slider().on('slide', function(event) {
|
||||
socket.send("MPD_API_SET_VOLUME,"+event.value);
|
||||
socket.send("MPD_API_SET_VOLUME,"+event.value);
|
||||
});
|
||||
|
||||
webSocketConnect();
|
||||
|
||||
function webSocketConnect() {
|
||||
|
||||
if (typeof MozWebSocket != "undefined") {
|
||||
socket = new MozWebSocket(get_appropriate_ws_url(), "ympd-client");
|
||||
} else {
|
||||
socket = new WebSocket(get_appropriate_ws_url(), "ympd-client");
|
||||
}
|
||||
|
||||
try {
|
||||
socket.onopen = function() {
|
||||
console.log("Connected");
|
||||
socket.send("MPD_API_GET_PLAYLIST");
|
||||
socket.send("MPD_API_GET_STATE");
|
||||
}
|
||||
|
||||
socket.onmessage =function got_packet(msg) {
|
||||
console.log(msg.data);
|
||||
if(msg.data === last_state)
|
||||
return;
|
||||
|
||||
var obj = JSON.parse(msg.data);
|
||||
switch (obj.type) {
|
||||
case "playlist":
|
||||
for (var song in obj.data) {
|
||||
var minutes = Math.floor(obj.data[song].duration / 60);
|
||||
var seconds = obj.data[song].duration - minutes * 60;
|
||||
|
||||
$('#salamisandwich tr:last').after(
|
||||
"<tr id=\"playlist_" + obj.data[song].id + "\"><td>" + obj.data[song].id + "</td>" +
|
||||
"<td>"+ obj.data[song].uri +"</td>" +
|
||||
"<td>"+ obj.data[song].title.replace(/%07/g, '"') +"</td>" +
|
||||
"<td>"+ minutes + ":" + (seconds < 10 ? '0' : '') + seconds +"</td></tr>");
|
||||
}
|
||||
break;
|
||||
case "state":
|
||||
if(JSON.stringify(obj) === JSON.stringify(last_state))
|
||||
break;
|
||||
|
||||
$('#volumeslider').slider('setValue', obj.data.volume);
|
||||
var progress = Math.floor(100*obj.data.elapsedTime/obj.data.totalTime) + "%";
|
||||
$('#progressbar').width(progress);
|
||||
$('#playlist_'+obj.data.currentsongid).addClass('success');
|
||||
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.repeat)
|
||||
$('#btnrepeat').addClass("active")
|
||||
else
|
||||
$('#btnrepeat').removeClass("active");
|
||||
|
||||
if(last_state && (obj.data.state !== last_state.data.state))
|
||||
updatePlayIcon(obj.data.state);
|
||||
if(last_state && (obj.data.volume !== last_state.data.volume))
|
||||
updateVolumeIcon(obj.data.volume);
|
||||
break;
|
||||
case "disconnected":
|
||||
$('#alert').text("Error: Connection to MPD failed.");
|
||||
$('#alert').removeClass("hide alert-info").addclass("alert-danger");
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
last_state = obj;
|
||||
|
||||
}
|
||||
socket.onclose = function(){
|
||||
console.log("Disconnected");
|
||||
|
||||
var seconds = 5;
|
||||
var tm = setInterval(disconnectAlert,1000);
|
||||
|
||||
function disconnectAlert() {
|
||||
$('#alert')
|
||||
.text("Connection to MPD lost, retrying in " + seconds + " seconds")
|
||||
.removeClass("hide alert-info")
|
||||
.addClass("alert-danger");
|
||||
|
||||
if(seconds-- <= 0) {
|
||||
webSocketConnect();
|
||||
seconds = 5;
|
||||
$('#alert').addClass("hide");
|
||||
clearInterval(tm);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
} catch(exception) {
|
||||
alert('<p>Error' + exception);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function get_appropriate_ws_url()
|
||||
{
|
||||
var pcol;
|
||||
var u = document.URL;
|
||||
|
||||
/*
|
||||
* We open the websocket encrypted if this page came on an
|
||||
* https:// url itself, otherwise unencrypted
|
||||
*/
|
||||
/* We open the websocket encrypted if this page came on an
|
||||
/* https:// url itself, otherwise unencrypted
|
||||
/*/
|
||||
|
||||
if (u.substring(0, 5) == "https") {
|
||||
pcol = "wss://";
|
||||
@@ -95,26 +155,54 @@ var updateVolumeIcon = function(volume)
|
||||
|
||||
var updatePlayIcon = function(state)
|
||||
{
|
||||
$("#play-icon").removeClass("glyphicon-play");
|
||||
$("#play-icon").removeClass("glyphicon-pause");
|
||||
$("#play-icon").removeClass("glyphicon-stop");
|
||||
|
||||
$("#play-icon").removeClass("glyphicon-play")
|
||||
.removeClass("glyphicon-pause")
|
||||
.removeClass("glyphicon-stop");
|
||||
$('#track-icon').removeClass("glyphicon-play")
|
||||
.removeClass("glyphicon-pause")
|
||||
.removeClass("glyphicon-stop");
|
||||
|
||||
if(state == 1) {
|
||||
$("#play-icon").addClass("glyphicon-stop");
|
||||
$('#track-icon').addClass("glyphicon-stop");
|
||||
} else if(state == 2) {
|
||||
$("#play-icon").addClass("glyphicon-pause");
|
||||
$('#track-icon').addClass("glyphicon-play");
|
||||
} else {
|
||||
$("#play-icon").addClass("glyphicon-play");
|
||||
$('#track-icon').addClass("glyphicon-pause");
|
||||
}
|
||||
}
|
||||
|
||||
function updateDB()
|
||||
{
|
||||
socket.send('MPD_API_UPDATE_DB');
|
||||
|
||||
function init() {
|
||||
socket.send("MPD_API_GET_PLAYLIST");
|
||||
socket.send("MPD_API_GET_STATE");
|
||||
$('#alert')
|
||||
.text("Updating MPD Database...")
|
||||
.removeClass("hide alert-danger")
|
||||
.addClass("alert-info");
|
||||
|
||||
setTimeout(function() {
|
||||
$('#alert').addClass("hide");
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
function test() {
|
||||
socket.send("MPD_API_GET_PLAYLIST");
|
||||
function toggleButton(id) {
|
||||
switch (obj.type) {
|
||||
case "btnrandom":
|
||||
socket.send("MPD_API_TOGGLE_RANDOM");
|
||||
break;
|
||||
case "btnconsume":
|
||||
socket.send("MPD_API_TOGGLE_CONSUME");
|
||||
break;
|
||||
case "btnsingle":
|
||||
socket.send("MPD_API_TOGGLE_SINGLE");
|
||||
break;
|
||||
case "btnrepeat":
|
||||
socket.send("MPD_API_TOGGLE_REPEAT");
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user