mirrors/ympd
1
0
Fork 0
mirror of https://github.com/SuperBFG7/ympd synced 2025-12-04 13:38:06 +00:00
Code Issues Releases Wiki Activity

add browse functionality

Browse Source
This commit is contained in:
Andrew Karpow
2013-11-07 10:09:40 +01:00
parent bc39214dc4
commit 931e975d4e
7 changed files with 278 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
htdocs/css/starter-template.css → htdocs/css/mpd.css
View File

@@ -20,3 +20,11 @@ body {
margin-top: 0px;
margin-bottom: 0px;
}
#counter {
font-size: 24px;
margin-top: -6px;
margin-left: 10px;
min-width: 50px;
}

31
htdocs/index.html
View File

@@ -14,7 +14,7 @@
<!-- Custom styles for this template -->
<link href="css/slider.css" rel="stylesheet">
<link href="css/starter-template.css" rel="stylesheet">
<link href="css/mpd.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
@@ -36,10 +36,10 @@
</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 id="nav_links" class="nav navbar-nav">
<li><a href="#">Playlist</a></li>
<li><a href="#browse">Browse database</a></li>
<li><a href="#about">About</a></li>
</ul>
<form class="navbar-form navbar-right" role="search">
@@ -64,11 +64,11 @@
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-toolbar btn-default">
<div class="btn btn-toolbar btn-default">
<span id="volume-icon" class="glyphicon glyphicon-volume-up"></span>
&nbsp;&nbsp;
<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>
</div><!--/.nav-collapse -->
@@ -80,12 +80,13 @@
<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 id="panel-heading" 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">&nbsp;&nbsp;2:13/4:12</p>
<h1><span id="track-icon" class="glyphicon glyphicon-play"></span><span id="currenttrack"></span></h1>
<p id="counter" class="text pull-right">&nbsp;&nbsp;</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">
@@ -94,7 +95,7 @@
</div>
<!-- Table -->
<table id="salamisandwich" class="table">
<table id="salamisandwich" class="table table-hover">
<thead>
<tr>
<th>#</th>
@@ -111,16 +112,16 @@
<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)">
<button id="btnrandom" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-random"></span> Random
</button>
<button id="btnconsume" type="button" class="btn btn-default" onclick="toggleButton(this.id)">
<button id="btnconsume" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-fire"></span> Consume
</button>
<button id="btnsingle" type="button" class="btn btn-default" onclick="toggleButton(this.id)">
<button id="btnsingle" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-star"></span> Single
</button>
<button id="btnrepeat" type="button" class="btn btn-default" onclick="toggleButton(this.id)">
<button id="btnrepeat" type="button" class="btn btn-default">
<span class="glyphicon glyphicon-repeat"></span> Repeat
</button>
</div>

134
htdocs/js/mpd.js
View File

@@ -5,7 +5,34 @@ $('#volumeslider').slider().on('slide', function(event) {
socket.send("MPD_API_SET_VOLUME,"+event.value);
});
webSocketConnect();
$(window).bind('hashchange', function(e) {
$('#nav_links > li').each(function(value) {
if(window.location.hash === $(this).children().attr('href'))
$(this).addClass('active');
else
$(this).removeClass('active');
});
switch(window.location.hash) {
case "#browse":
$('#panel-heading').text("Browse database");
socket.send('MPD_API_GET_BROWSE,/');
break;
case "#about":
$('#panel-heading').text("About");
break;
default:
$('#panel-heading').text("Playlist");
$('#nav_links > li:first-child').addClass('active');
socket.send("MPD_API_GET_PLAYLIST");
}
socket.send("MPD_API_GET_TRACK_INFO");
});
$(document).ready(function(){
webSocketConnect();
});
function webSocketConnect() {
@@ -18,18 +45,19 @@ function webSocketConnect() {
try {
socket.onopen = function() {
console.log("Connected");
socket.send("MPD_API_GET_PLAYLIST");
socket.send("MPD_API_GET_STATE");
$(window).trigger( 'hashchange' );
}
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":
if(window.location.hash)
break;
$('#salamisandwich').find("tr:gt(0)").remove();
for (var song in obj.data) {
var minutes = Math.floor(obj.data[song].duration / 60);
@@ -38,17 +66,65 @@ function webSocketConnect() {
$('#salamisandwich tr:last').after(
"<tr id=\"playlist_" + obj.data[song].id + "\"><td>" + obj.data[song].pos + "</td>" +
"<td>"+ obj.data[song].title +"</td>" +
"<td>"+ minutes + ":" + (seconds < 10 ? '0' : '') + seconds +"</td></tr>");
"<td>"+ minutes + ":" + (seconds < 10 ? '0' : '') + seconds +
"<span class=\"glyphicon glyphicon-trash pull-right hoverhidden\"></span> </td></tr>");
}
break;
case "browse":
if(window.location.hash !== '#browse')
break;
$('#salamisandwich').find("tr:gt(0)").remove();
for (var item in obj.data) {
switch(obj.data[item].type) {
case "directory":
$('#salamisandwich tr:last').after(
"<tr><td><span class=\"glyphicon glyphicon-folder-open\"></span></td>" +
"<td><a href=\"#browse\">" + obj.data[item].dir +"</a></td>" +
"<td></td></tr>");
break;
case "song":
var minutes = Math.floor(obj.data[item].duration / 60);
var seconds = obj.data[item].duration - minutes * 60;
$('#salamisandwich tr:last').after(
"<tr><td><span class=\"glyphicon glyphicon-music\"></span></td>" +
"<td><a href=\"#browse\">" + obj.data[item].title +"</a></td>" +
"<td>"+ minutes + ":" + (seconds < 10 ? '0' : '') + seconds +"</td></tr>");
break;
case "playlist":
break;
}
}
$('#salamisandwich td:eq(1)').click(function(){
socket.send('MPD_API_GET_BROWSE,'+$(this).text());
});
break;
case "state":
if(JSON.stringify(obj) === JSON.stringify(last_state))
break;
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('setValue', obj.data.volume);
var progress = Math.floor(100*obj.data.elapsedTime/obj.data.totalTime) + "%";
$('#progressbar').width(progress);
$('#counter')
.text(elapsed_minutes + ":" +
(elapsed_seconds < 10 ? '0' : '') + elapsed_seconds + " / " +
total_minutes + ":" + (total_seconds < 10 ? '0' : '') + total_seconds);
$('#salamisandwich > thead > tr').each(function(value) {
$(this).removeClass('success');
});
$('#playlist_'+obj.data.currentsongid).addClass('success');
if(obj.data.random)
$('#btnrandom').addClass("active")
else
@@ -73,11 +149,20 @@ function webSocketConnect() {
updatePlayIcon(obj.data.state);
if(last_state && (obj.data.volume !== last_state.data.volume))
updateVolumeIcon(obj.data.volume);
if(obj.data.elapsedTime <= 1)
socket.send("MPD_API_GET_TRACK_INFO");
break;
case "disconnected":
$('#alert').text("Error: Connection to MPD failed.");
$('#alert').removeClass("hide alert-info").addclass("alert-danger");
break;
$('#alert')
.text("Server lost connection to MPD Host.")
.removeClass("hide alert-info")
.addClass("alert-danger");
break;
case "current_song":
$('#currenttrack').text(" " + obj.data.title);
default:
break;
@@ -188,21 +273,18 @@ function updateDB()
}, 5000);
}
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;
}
}
$('#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));
});
$('#btnrepeat').on('click', function (e) {
socket.send("MPD_API_TOGGLE_REPEAT," + ($(this).hasClass('active') ? 0 : 1));
});