boyska/ympd
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

added sammy.js app routing

Browse source
This commit is contained in:
Andrew Karpow 2013-11-07 13:47:31 +01:00
parent 931e975d4e
commit 9a82b44ea9
4 changed files with 2217 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
htdocs/index.html
View file

@ -32,14 +32,14 @@
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">ympd</a>
<a class="navbar-brand" href="/">ympd</a>
</div>
<div class="collapse navbar-collapse">
<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>
<li id="nav_playlist"><a href="#">Playlist</a></li>
<li id="nav_browse"><a href="#/browse/">Browse database</a></li>
<li id="nav_about"><a href="#/about/">About</a></li>
</ul>
<form class="navbar-form navbar-right" role="search">
@ -146,6 +146,7 @@
<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/sammy.js"></script>
<script src="js/mpd.js"></script>
</body>
</html>

106
htdocs/js/mpd.js
View file

@ -1,34 +1,73 @@
var socket;
var last_state;
var current_app;
$('#volumeslider').slider().on('slide', function(event) {
socket.send("MPD_API_SET_VOLUME,"+event.value);
});
$(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");
$('#nav_links > li').on('click', function(e) {
//$('#nav_links > li:contains(' + History.getState().title + ')').removeClass('active');
//History.pushState({state:$(this).attr('id')}, $(this).text(), '?' + $(this).attr('id'));
});
var app = $.sammy(function() {
this.before('/', function(e, data) {
socket.send("MPD_API_GET_TRACK_INFO");
});
this.get('#/', function() {
current_app = 'playlist';
$('#salamisandwich').find("tr:gt(0)").remove();
socket.send("MPD_API_GET_PLAYLIST");
$('#panel-heading').text("Playlist");
});
this.get(/\#\/browse\/(.*)/, function() {
current_app = 'browse';
$('#salamisandwich').find("tr:gt(0)").remove();
var path = this.params['splat'];
if(path == '')
path = "/";
socket.send("MPD_API_GET_BROWSE,"+path);
$('#panel-heading').text("Browse database: "+path+"");
});
this.get('#/about', function() {
current_app = 'about';
$('#panel-heading').text("About");
});
this.get("/", function(context) {
context.redirect("#/");
});
});
/*
History.Adapter.bind(window,'statechange',function(){ // Note: We are using statechange instead of popstate
if(!State.data.state) {
//$('#' + State.data).
}
$('#panel-heading').text(State.title);
switch(State.data.state) {
case "nav_browse":
socket.send('MPD_API_GET_BROWSE,/');
break;
case "nav_about":
break;
case "nav_playlist":
default:
}
$(this).addClass('active');
console.log(" Browser State: ");
console.log(State);
socket.send("MPD_API_GET_TRACK_INFO");
});
*/
$(document).ready(function(){
webSocketConnect();
});
@ -45,7 +84,10 @@ function webSocketConnect() {
try {
socket.onopen = function() {
console.log("Connected");
$(window).trigger( 'hashchange' );
app.run();
/* Push Initial state on first visit */
//$(window).trigger("statechange")
}
socket.onmessage =function got_packet(msg) {
@ -55,10 +97,11 @@ function webSocketConnect() {
var obj = JSON.parse(msg.data);
switch (obj.type) {
case "playlist":
if(window.location.hash)
//if(state.data.state !== 'nav_playlist')
// break;
if(current_app !== 'playlist')
break;
$('#salamisandwich').find("tr:gt(0)").remove();
for (var song in obj.data) {
var minutes = Math.floor(obj.data[song].duration / 60);
var seconds = obj.data[song].duration - minutes * 60;
@ -71,16 +114,18 @@ function webSocketConnect() {
}
break;
case "browse":
if(window.location.hash !== '#browse')
//if(state.data.state !== 'nav_browse')
// break;
if(current_app !== 'browse')
break;
$('#salamisandwich').find("tr:gt(0)").remove();
console.log(app);
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><a href=\"#/browse/"+ obj.data[item].dir +"\">" + obj.data[item].dir +"</a></td>" +
"<td></td></tr>");
break;
case "song":
@ -89,7 +134,7 @@ function webSocketConnect() {
$('#salamisandwich tr:last').after(
"<tr><td><span class=\"glyphicon glyphicon-music\"></span></td>" +
"<td><a href=\"#browse\">" + obj.data[item].title +"</a></td>" +
"<td><a href=\"#\">" + obj.data[item].title +"</a></td>" +
"<td>"+ minutes + ":" + (seconds < 10 ? '0' : '') + seconds +"</td></tr>");
break;
case "playlist":
@ -97,7 +142,8 @@ function webSocketConnect() {
}
}
$('#salamisandwich td:eq(1)').click(function(){
socket.send('MPD_API_GET_BROWSE,'+$(this).text());
console.log($(this).children().attr("path"));
//socket.send('MPD_API_GET_BROWSE,'+;
});
break;

2135
htdocs/js/sammy.js Normal file
View file

File diff suppressed because it is too large Load diff

1
src/http_server.c
View file

@ -21,6 +21,7 @@ static const struct serveable whitelist[] = {
{ "/js/mpd.js", "text/javascript" },
{ "/js/jquery-1.10.2.min.js", "text/javascript" },
{ "/js/bootstrap-slider.js", "text/javascript" },
{ "/js/sammy.js", "text/javascript" },
{ "/fonts/glyphicons-halflings-regular.woff", "application/x-font-woff"},
{ "/fonts/glyphicons-halflings-regular.svg", "image/svg+xml"},