diff options
Diffstat (limited to 'static')
| -rw-r--r-- | static/icons/loading.gif | bin | 0 -> 1737 bytes | |||
| -rw-r--r-- | static/icons/music_nocache.png | bin | 0 -> 646 bytes | |||
| -rw-r--r-- | static/icons/music_playing.png | bin | 0 -> 633 bytes | |||
| -rw-r--r-- | static/init.js | 29 | ||||
| -rw-r--r-- | static/style.css | 3 |
5 files changed, 30 insertions, 2 deletions
diff --git a/static/icons/loading.gif b/static/icons/loading.gif Binary files differnew file mode 100644 index 0000000..1560b64 --- /dev/null +++ b/static/icons/loading.gif diff --git a/static/icons/music_nocache.png b/static/icons/music_nocache.png Binary files differnew file mode 100644 index 0000000..5034c06 --- /dev/null +++ b/static/icons/music_nocache.png diff --git a/static/icons/music_playing.png b/static/icons/music_playing.png Binary files differnew file mode 100644 index 0000000..6802f99 --- /dev/null +++ b/static/icons/music_playing.png diff --git a/static/init.js b/static/init.js index 0dd0af6..cdb806d 100644 --- a/static/init.js +++ b/static/init.js @@ -13,6 +13,16 @@ function pause() { sound.togglePause(); } +function preload_images() { + var cache_images = new Array( + 'loading.gif', + 'music_playing.png' + ); + $.each(cache_images, function() { + (new Image()).src = '/static/icons/' + this; + }); +} + Handlebars.registerHelper('trackname', function() { var item = this; if(!item.metadata) @@ -33,7 +43,7 @@ Handlebars.registerHelper('trackname', function() { }); var templates = new (function Templates() { - this.directory_item = Handlebars.compile('<li class="{{type}}"><a href="#">{{trackname}}</a>'); + this.directory_item = Handlebars.compile('<li id="{{type}}-{{id}}" class="{{type}}{{#if nocache}} nocache{{/if}}"><a href="#">{{trackname}}</a>'); })(); function load_directory(dir_id, dir_item) { @@ -54,11 +64,15 @@ function load_directory(dir_id, dir_item) { ); } $.each(data, function(i, item) { + if(item.type == "track") + item.nocache = !item.cache; var el = $(templates.directory_item(item)); + var id = el.attr('id'); if(item.type == "track") { $(el, 'a').click(function() { - console.log(item); + el.addClass('loading'); if(sound) { + sound.stop(); sound.destruct(); } sound = soundManager.createSound({ @@ -67,7 +81,11 @@ function load_directory(dir_id, dir_item) { whileloading: function() { $('#status').text('Loading... ' + this.bytesLoaded); }, + onload: function(success) { + el.removeClass('loading').removeClass('nocache'); + }, whileplaying: function() { + $('#' + id).addClass('playing'); var seconds = (this.position / 1000).toFixed(0); var minutes = Math.floor(seconds / 60).toFixed(0); seconds %= 60; @@ -75,6 +93,12 @@ function load_directory(dir_id, dir_item) { seconds = '0' + seconds; var pos = minutes + ':' + seconds; $('#status').text(pos); + }, + onstop: function() { + $('#' + id).removeClass('playing'); + }, + onfinish: function() { + $('#' + id).removeClass('playing'); } }); sound.play(); @@ -93,5 +117,6 @@ function load_directory(dir_id, dir_item) { } $(document).ready(function() { + preload_images(); load_directory(0); }); diff --git a/static/style.css b/static/style.css index 28fea31..a7ea139 100644 --- a/static/style.css +++ b/static/style.css @@ -5,3 +5,6 @@ #directory-list .dir, #directory-list .track { background-repeat: no-repeat; padding-left: 20px; } #directory-list .dir { background-image: url('/static/icons/folder.png'); } #directory-list .track { background-image: url('/static/icons/music.png'); } +#directory-list .nocache { background-image: url('/static/icons/music_nocache.png'); } +#directory-list .loading { background-image: url('/static/icons/loading.gif'); } +#directory-list .playing { background-image: url('/static/icons/music_playing.png'); } |
