Working recoding on demand for single files and cue sheets.

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
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
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
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'); }