diff options
Diffstat (limited to 'static')
| -rw-r--r-- | static/icons/control_pause_blue.png | bin | 0 -> 721 bytes | |||
| -rw-r--r-- | static/icons/control_play_blue.png | bin | 0 -> 717 bytes | |||
| -rw-r--r-- | static/index.html | 8 | ||||
| -rw-r--r-- | static/init.js | 63 |
4 files changed, 60 insertions, 11 deletions
diff --git a/static/icons/control_pause_blue.png b/static/icons/control_pause_blue.png Binary files differnew file mode 100644 index 0000000..ec61099 --- /dev/null +++ b/static/icons/control_pause_blue.png diff --git a/static/icons/control_play_blue.png b/static/icons/control_play_blue.png Binary files differnew file mode 100644 index 0000000..f8c8ec6 --- /dev/null +++ b/static/icons/control_play_blue.png 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); }); |
