--- /dev/null
+body {
+ padding-top: 50px;
+ padding-bottom: 50px;
+}
+
+.starter-template {
+ padding: 40px 15px;
+}
+
+.slider.slider-horizontal {
+ height: 15px;
+}
+
+.slider.slider-horizontal .slider-track {
+ height: 10px;
+ margin-top: -6px;
+}
+
+.progress {
+ margin-top: 0px;
+ margin-bottom: 0px;
+}
+
+#counter {
+ font-size: 24px;
+ margin-top: -6px;
+ margin-left: 10px;
+ min-width: 50px;
+}
+
+++ /dev/null
-body {
- padding-top: 50px;
- padding-bottom: 50px;
-}
-
-.starter-template {
- padding: 40px 15px;
-}
-
-.slider.slider-horizontal {
- height: 15px;
-}
-
-.slider.slider-horizontal .slider-track {
- height: 10px;
- margin-top: -6px;
-}
-
-.progress {
- margin-top: 0px;
- margin-bottom: 0px;
-}
<!-- 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]>
</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">
</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>
<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 -->
<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"> 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"> </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>
<!-- Table -->
- <table id="salamisandwich" class="table">
+ <table id="salamisandwich" class="table table-hover">
<thead>
<tr>
<th>#</th>
<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>
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() {
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);
$('#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
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;
}, 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));
+});
static const struct serveable whitelist[] = {
{ "/css/bootstrap.css", "text/css" },
- { "/css/starter-template.css", "text/css" },
{ "/css/slider.css", "text/css" },
+ { "/css/mpd.css", "text/css" },
{ "/js/bootstrap.min.js", "text/javascript" },
{ "/js/mpd.js", "text/javascript" },
"ympd-client",
callback_ympd,
sizeof(struct per_session_data__ympd),
- 10,
+ 255,
},
{ NULL, NULL, 0, 0 } /* terminator */
#include <string.h>
#include <unistd.h>
#include <stdlib.h>
+#include <libgen.h>
#include "mpd_client.h"
if(mpd_conn_state != MPD_CONNECTED) {
n = snprintf(p, MAX_SIZE, "{\"type\":\"disconnected\"}");
}
- else if(pss->queue_version != queue_version) {
+ else if((pss->queue_version != queue_version) || (pss->do_send & DO_SEND_PLAYLIST)) {
n = mpd_put_playlist(p);
pss->queue_version = queue_version;
- }
- else if(pss->do_send & DO_SEND_STATE) {
- n = mpd_put_state(p);
- pss->do_send &= ~DO_SEND_STATE;
- }
- else if(pss->do_send & DO_SEND_PLAYLIST) {
- n = mpd_put_playlist(p);
pss->do_send &= ~DO_SEND_PLAYLIST;
}
- else if(pss->do_send & DO_SEND_TRACK_INFO)
+ else if(pss->do_send & DO_SEND_TRACK_INFO) {
n = mpd_put_current_song(p);
+ pss->do_send &= ~DO_SEND_TRACK_INFO;
+ }
+ else if(pss->do_send & DO_SEND_BROWSE) {
+ n = mpd_put_browse(p, pss->browse_path);
+ pss->do_send &= ~DO_SEND_BROWSE;
+ free(pss->browse_path);
+ }
else {
n = mpd_put_state(p);
}
if(n > 0)
- m = libwebsocket_write(wsi, (unsigned char*)p, n, LWS_WRITE_TEXT);
+ m = libwebsocket_write(wsi, (unsigned char *)p, n, LWS_WRITE_TEXT);
+
+ if(p != NULL)
+ printf("Sending out: %s\n", p);
if (m < n) {
lwsl_err("ERROR %d writing to socket\n", n, m);
case LWS_CALLBACK_RECEIVE:
printf("Got %s\n", (char *)in);
- if(!strcmp((const char *)in, MPD_API_GET_STATE))
- pss->do_send |= DO_SEND_STATE;
- else if(!strcmp((const char *)in, MPD_API_GET_PLAYLIST))
+ if(!strcmp((const char *)in, MPD_API_GET_PLAYLIST))
pss->do_send |= DO_SEND_PLAYLIST;
else if(!strcmp((const char *)in, MPD_API_GET_TRACK_INFO))
pss->do_send |= DO_SEND_TRACK_INFO;
mpd_send_next(conn);
mpd_response_finish(conn);
}
+ else if(!strncmp((const char *)in, MPD_API_TOGGLE_RANDOM, sizeof(MPD_API_TOGGLE_RANDOM)-1)) {
+ unsigned random;
+ if(sscanf(in, "MPD_API_TOGGLE_RANDOM,%d", &random))
+ mpd_run_random(conn, random);
+ }
+ else if(!strncmp((const char *)in, MPD_API_TOGGLE_REPEAT, sizeof(MPD_API_TOGGLE_REPEAT)-1)) {
+ unsigned repeat;
+ if(sscanf(in, "MPD_API_TOGGLE_REPEAT,%d", &repeat))
+ mpd_run_repeat(conn, repeat);
+ }
+ else if(!strncmp((const char *)in, MPD_API_TOGGLE_CONSUME, sizeof(MPD_API_TOGGLE_CONSUME)-1)) {
+ unsigned consume;
+ if(sscanf(in, "MPD_API_TOGGLE_CONSUME,%d", &consume))
+ mpd_run_consume(conn, consume);
+ }
+ else if(!strncmp((const char *)in, MPD_API_TOGGLE_SINGLE, sizeof(MPD_API_TOGGLE_SINGLE)-1)) {
+ unsigned single;
+ if(sscanf(in, "MPD_API_TOGGLE_SINGLE,%d", &single))
+ mpd_run_single(conn, single);
+ }
else if(!strncmp((const char *)in, MPD_API_SET_VOLUME, sizeof(MPD_API_SET_VOLUME)-1)) {
unsigned int volume;
if(sscanf(in, "MPD_API_SET_VOLUME,%ud", &volume) && volume < 100)
mpd_run_set_volume(conn, volume);
}
+ else if(!strncmp((const char *)in, MPD_API_GET_BROWSE, sizeof(MPD_API_GET_BROWSE)-1)) {
+ char *dir;
+ if(sscanf(in, "MPD_API_GET_BROWSE,%m[^\t\n]", &dir) && dir != NULL) {
+ printf("sending '%s'\n", dir);
+ pss->do_send |= DO_SEND_BROWSE;
+ pss->browse_path = dir;
+ }
+ }
+
break;
default:
ptr = str;
while(*ptr++ != '\0')
if(*ptr=='"')
- *ptr=' ';
+ *ptr='\'';
- return str;
+ return basename(str);
}
-int mpd_put_state(char* buffer)
+int mpd_put_state(char *buffer)
{
struct mpd_status *status;
int len;
status = mpd_run_status(conn);
if (!status) {
- lwsl_err("MPD status: %s\n", mpd_connection_get_error_message(conn));
+ lwsl_err("MPD mpd_run_status: %s\n", mpd_connection_get_error_message(conn));
mpd_conn_state = MPD_FAILURE;
return 0;
}
mpd_status_get_song_id(status));
queue_version = mpd_status_get_queue_version(status);
- printf("buffer: %s\n", buffer);
mpd_status_free(status);
return len;
}
-int mpd_put_current_song(char* buffer)
+int mpd_put_current_song(char *buffer)
{
struct mpd_song *song;
int len;
song = mpd_run_current_song(conn);
- if (song != NULL) {
- len = snprintf(buffer, MAX_SIZE, "{\"type\": \"current_song\", \"data\": {"
- "{\"id\":%d, \"duration\":%d, \"title\":\"%s\"},",
- mpd_song_get_id(song),
- mpd_song_get_duration(song),
- mpd_get_title(song)
- );
- mpd_song_free(song);
- }
+ if(song == NULL)
+ return 0;
+
+ len = snprintf(buffer, MAX_SIZE, "{\"type\": \"current_song\", \"data\":"
+ "{\"id\":%d, \"pos\":%d, \"duration\":%d, \"title\":\"%s\"}}",
+ mpd_song_get_id(song),
+ mpd_song_get_pos(song),
+ mpd_song_get_duration(song),
+ mpd_get_title(song)
+ );
+ mpd_song_free(song);
mpd_response_finish(conn);
return len;
}
-int mpd_put_playlist(char* buffer)
+int mpd_put_playlist(char *buffer)
{
char *cur = buffer;
const char *end = buffer + MAX_SIZE;
struct mpd_entity *entity;
- struct mpd_song const *song;
- mpd_send_list_queue_meta(conn);
+ if (!mpd_send_list_queue_meta(conn)) {
+ lwsl_err("MPD mpd_send_list_queue_meta: %s\n", mpd_connection_get_error_message(conn));
+ mpd_conn_state = MPD_FAILURE;
+ return 0;
+ }
cur += snprintf(cur, end - cur, "{\"type\": \"playlist\", \"data\": [ ");
- for(entity = mpd_recv_entity(conn); entity; entity = mpd_recv_entity(conn)) {
+ while((entity = mpd_recv_entity(conn)) != NULL) {
+ const struct mpd_song *song;
if(mpd_entity_get_type(entity) == MPD_ENTITY_TYPE_SONG) {
song = mpd_entity_get_song(entity);
mpd_get_title(song)
);
}
+ mpd_entity_free(entity);
+ }
+
+ /* remove last ',' */
+ cur--;
+ cur += snprintf(cur, end - cur, "] }");
+ return cur - buffer;
+}
+int mpd_put_browse(char *buffer, char *path)
+{
+ char *cur = buffer;
+ const char *end = buffer + MAX_SIZE;
+ struct mpd_entity *entity;
+
+ if (!mpd_send_list_meta(conn, path)) {
+ lwsl_err("MPD mpd_send_list_meta: %s\n", mpd_connection_get_error_message(conn));
+ mpd_conn_state = MPD_FAILURE;
+ return 0;
+ }
+ cur += snprintf(cur, end - cur, "{\"type\":\"browse\",\"data\":[ ");
+
+ while((entity = mpd_recv_entity(conn)) != NULL) {
+ const struct mpd_song *song;
+ const struct mpd_directory *dir;
+ const struct mpd_playlist *pl;
+
+ switch (mpd_entity_get_type(entity)) {
+ case MPD_ENTITY_TYPE_UNKNOWN:
+ break;
+
+ case MPD_ENTITY_TYPE_SONG:
+ song = mpd_entity_get_song(entity);
+ cur += snprintf(cur, end - cur,
+ "{\"type\":\"song\",\"uri\":\"%s\",\"duration\":%d,\"title\":\"%s\"},",
+ mpd_song_get_uri(song),
+ mpd_song_get_duration(song),
+ mpd_get_title(song)
+ );
+ break;
+
+ case MPD_ENTITY_TYPE_DIRECTORY:
+ dir = mpd_entity_get_directory(entity);
+ cur += snprintf(cur, end - cur,
+ "{\"type\":\"directory\",\"dir\":\"%s\"},",
+ mpd_directory_get_path(dir)
+ );
+ break;
+
+ case MPD_ENTITY_TYPE_PLAYLIST:
+ pl = mpd_entity_get_playlist(entity);
+ cur += snprintf(cur, end - cur,
+ "{\"type\":\"playlist\",\"plist\":\"%s\"},",
+ mpd_playlist_get_path(pl)
+ );
+ break;
+ }
mpd_entity_free(entity);
}
+ if (mpd_connection_get_error(conn) != MPD_ERROR_SUCCESS || !mpd_response_finish(conn)) {
+ lwsl_err("MPD mpd_send_list_meta: %s\n", mpd_connection_get_error_message(conn));
+ mpd_conn_state = MPD_FAILURE;
+ return 0;
+ }
+
/* remove last ',' */
cur--;
cur += snprintf(cur, end - cur, "] }");
- printf("buffer: %s\n", buffer);
return cur - buffer;
}
#define DO_SEND_STATE (1 << 0)
#define DO_SEND_PLAYLIST (1 << 1)
#define DO_SEND_TRACK_INFO (1 << 2)
+#define DO_SEND_BROWSE (1 << 3)
+
struct libwebsocket_protocols *protocol_array;
struct per_session_data__ympd {
int do_send;
unsigned queue_version;
+ char *browse_path;
};
enum mpd_conn_states {
MPD_CONNECTED
};
-#define MPD_API_GET_STATE "MPD_API_GET_STATE"
#define MPD_API_GET_SEEK "MPD_API_GET_SEEK"
#define MPD_API_GET_PLAYLIST "MPD_API_GET_PLAYLIST"
#define MPD_API_GET_TRACK_INFO "MPD_API_GET_TRACK_INFO"
-#define MPD_API_ADD_TRACK "MPD_API_GET_STATE"
+#define MPD_API_GET_BROWSE "MPD_API_GET_BROWSE"
+#define MPD_API_ADD_TRACK "MPD_API_ADD_TRACK"
#define MPD_API_SET_VOLUME "MPD_API_SET_VOLUME"
#define MPD_API_SET_PAUSE "MPD_API_SET_PAUSE"
#define MPD_API_SET_PLAY "MPD_API_SET_PLAY"
#define MPD_API_SET_NEXT "MPD_API_SET_PREV"
#define MPD_API_SET_PREV "MPD_API_SET_NEXT"
#define MPD_API_UPDATE_DB "MPD_API_UPDATE_DB"
+#define MPD_API_TOGGLE_RANDOM "MPD_API_TOGGLE_RANDOM"
+#define MPD_API_TOGGLE_CONSUME "MPD_API_TOGGLE_CONSUME"
+#define MPD_API_TOGGLE_SINGLE "MPD_API_TOGGLE_SINGLE"
+#define MPD_API_TOGGLE_REPEAT "MPD_API_TOGGLE_REPEAT"
void *user, void *in, size_t len);
void mpd_loop();
-int mpd_put_state(char* buffer);
-int mpd_put_current_song(char* buffer);
-int mpd_put_playlist(char* buffer);
+int mpd_put_state(char *buffer);
+int mpd_put_current_song(char *buffer);
+int mpd_put_playlist(char *buffer);
+int mpd_put_browse(char *buffer, char *path);
\ No newline at end of file
projects / ympd.git / commitdiff