summaryrefslogtreecommitdiff
path: root/static
diff options
context:
space:
mode:
Diffstat (limited to 'static')
-rw-r--r--static/icons/loading.gifbin0 -> 1737 bytes
-rw-r--r--static/icons/music_nocache.pngbin0 -> 646 bytes
-rw-r--r--static/icons/music_playing.pngbin0 -> 633 bytes
-rw-r--r--static/init.js29
-rw-r--r--static/style.css3
5 files changed, 30 insertions, 2 deletions
diff --git a/static/icons/loading.gif b/static/icons/loading.gif
new file mode 100644
index 0000000..1560b64
--- /dev/null
+++ b/static/icons/loading.gif
Binary files differ
diff --git a/static/icons/music_nocache.png b/static/icons/music_nocache.png
new file mode 100644
index 0000000..5034c06
--- /dev/null
+++ b/static/icons/music_nocache.png
Binary files differ
diff --git a/static/icons/music_playing.png b/static/icons/music_playing.png
new file mode 100644
index 0000000..6802f99
--- /dev/null
+++ b/static/icons/music_playing.png
Binary files differ
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'); }