summaryrefslogtreecommitdiff
path: root/static
diff options
context:
space:
mode:
authorJon Bergli Heier <snakebite@jvnv.net>2012-02-18 14:31:43 +0100
committerJon Bergli Heier <snakebite@jvnv.net>2012-02-18 14:31:43 +0100
commitcec08e05eb0da0b6965ddec56522ee4c9045f3bc (patch)
treeb21b83aed37bde32a78e7bd5f91e8a1792e203c7 /static
parentc797394d45a1ff820b4f4ffc465bc51c00fed7b1 (diff)
Fixed directory browsing and added player control buttons.
Diffstat (limited to 'static')
-rw-r--r--static/icons/control_pause_blue.pngbin0 -> 721 bytes
-rw-r--r--static/icons/control_play_blue.pngbin0 -> 717 bytes
-rw-r--r--static/index.html8
-rw-r--r--static/init.js63
4 files changed, 60 insertions, 11 deletions
diff --git a/static/icons/control_pause_blue.png b/static/icons/control_pause_blue.png
new file mode 100644
index 0000000..ec61099
--- /dev/null
+++ b/static/icons/control_pause_blue.png
Binary files differ
diff --git a/static/icons/control_play_blue.png b/static/icons/control_play_blue.png
new file mode 100644
index 0000000..f8c8ec6
--- /dev/null
+++ b/static/icons/control_play_blue.png
Binary files differ
diff --git a/static/index.html b/static/index.html
index 47f7e70..6adf3eb 100644
--- a/static/index.html
+++ b/static/index.html
@@ -9,10 +9,14 @@
</head>
<body>
<div id="content">
- <ul id="directory-list">
- </ul>
<span id="status">
</span>
+ <div id="control">
+ <a href="javascript:play()"><img src="/static/icons/control_play_blue.png" alt="Play" /></a>
+ <a href="javascript:pause()"><img src="/static/icons/control_pause_blue.png" alt="Play" /></a>
+ </div>
+ <ul id="directory-list">
+ </ul>
</div>
</body>
</html>
diff --git a/static/init.js b/static/init.js
index 6ec2725..fc8e800 100644
--- a/static/init.js
+++ b/static/init.js
@@ -1,20 +1,51 @@
soundManager.useHTML5Audio = true;
soundManager.preferFlash = false;
-$(document).ready(function() {
- $.get('/json/list', function(data) {
+var sound = null;
+
+function play() {
+ if(sound)
+ sound.play();
+}
+
+function pause() {
+ if(sound)
+ sound.togglePause();
+}
+
+function load_directory(dir_id, dir_item) {
+ $.get('/json/list/' + dir_id, function(data) {
var dir_list = $('#directory-list');
- $.each(data, function(i, item) {
+ dir_list.html('');
+ if(dir_item && dir_item.parent) {
dir_list.append($('<li></li>')
- .text(item.name)
- .addClass(item.type)
- .click(function() {
+ .addClass('dir')
+ .append($('<a></a>')
+ .attr('href', '#')
+ .text('..')
+ .click(function() {
+ load_directory(dir_item.parent.id, dir_item.parent);
+ return false;
+ })
+ )
+ );
+ }
+ $.each(data, function(i, item) {
+ var a = $('<a></a>').attr('href', '#').text(item.name);
+ if(item.type == "track") {
+ a.click(function() {
console.log(item);
- var sound = soundManager.createSound({
+ if(sound) {
+ sound.destruct();
+ }
+ sound = soundManager.createSound({
id: 'audio',
url: '/track/' + item.id,
+ whileloading: function() {
+ $('#status').text('Loading... ' + this.bytesLoaded);
+ },
whileplaying: function() {
- var seconds = (sound.position / 1000).toFixed(0);
+ var seconds = (this.position / 1000).toFixed(0);
var minutes = Math.floor(seconds / 60).toFixed(0);
seconds %= 60;
if(seconds < 10)
@@ -24,8 +55,22 @@ $(document).ready(function() {
}
});
sound.play();
- })
+ return false;
+ });
+ } else if(item.type == "dir") {
+ a.click(function() {
+ load_directory(item.id, item);
+ return false;
+ });
+ }
+ dir_list.append($('<li></li>')
+ .addClass(item.type)
+ .append(a)
);
});
});
+}
+
+$(document).ready(function() {
+ load_directory(0);
});