Player logics fix, move and remove tracks from playlist. Close #47

public/javascripts/beathaven/audio.js

@@ -23,7 +23,7 @@ var Audio = {
 	
 	addTrack: function(id, url) {
 		if ($('#a'+ id).length == 0) {
-			$('#audiobox').append('<audio id="a'+ id +'" src="'+ url +'"></audio>')
+			$('#audiobox').html('<audio id="a'+ id +'" src="'+ url +'"></audio>')
 		}
 	},
 	
@@ -67,6 +67,7 @@ var Audio = {
 	},
 	
 	startListener: function() {
+		Audio.killListener();
 		Audio.tid = window.setTimeout(Audio.startListener, 100);
 		Player.updateUI(
 			Audio.getLoadedPercent(),
@@ -75,7 +76,9 @@ var Audio = {
 	},
 	
 	killListener: function() {
-		window.clearTimeout(this.tid);
+		try {
+			window.clearTimeout(Audio.tid);
+		} catch(e) {}
 	}
 }  
 

public/javascripts/beathaven/player.js

@@ -13,29 +13,28 @@ var Player = {
 				<div class="fade"></div>\
 				<span class="title">'+ artist +' &mdash; '+ track +'</span>\
 				<span class="duration">'+ length +'</span>\
+				<div class="remove">remove</div>\
 			</div>\
 		</li>\
 		');
 		
 		$('#playlist').html($('.playlist-tracks')).scrollbar();
+		$('.playlist-tracks').sortable();
 	},
 	
-	setTrack: function(obj) {
-		if (typeof obj == 'string') {
-			var id = obj;
-			obj = $('#i'+ obj);
-		} else {
-			var id = $(obj).attr('id').split('i')[1];
-		}
-		var query = $(obj).find('.title').text();
-		var length = $(obj).find('.duration').text();
+	setTrack: function(id) {
+		var $obj = $('#i'+ id);
+		var query = $obj.find('.title').text();
+		var length = $obj.find('.duration').text();
 		var tmp = query.split(' — ');
 		
 		$('#player .now-playing').html(query);
 		$('.playlist-tracks li').removeClass('now');
-		$('#i'+ id).addClass('now');
+		$obj.addClass('now');
+		Audio.startListener();
+		$('#player .loaded, #player .played').width(0);
 		
-		loadTracksData(tmp[0], tmp[1], length, this.playSource);
+		loadTracksData(tmp[0], tmp[1], length, Player.playSource);
 	},
 	
 	playSource: function(url) {
@@ -75,6 +74,13 @@ var Player = {
 			Audio.killListener();
 			Player.setTrack(Player.nextTrack());
 		}
+	},
+	
+	reset: function() {
+		Audio.pause();
+		Audio.killListener();
+		$('#player .loaded, #player .played').width(0);
+		$('#player .now-playing').text('Select track');
 	}
 }
 
@@ -109,8 +115,26 @@ $('.tracklist li').live('mouseover mouseout', function(e){
 	}
 });
 
+$('.playlist-tracks li .fade, .playlist-tracks li .duration, .playlist-tracks li .remove').live('mouseover mouseout', function(e){
+	if (e.type == 'mouseover') {
+		$(this).parent().find('.duration').hide();
+		$(this).parent().find('.remove').show();
+	} else {
+		$(this).parent().find('.remove').hide();
+		$(this).parent().find('.duration').show();
+	}
+});
+
+$('.playlist-tracks li .remove').live('click', function(){
+	var $li = $(this).parent().parent();
+	if ($li.hasClass('now')) {
+		Player.reset();
+	}
+	$li.remove();
+});
+
 $('.playlist-tracks li').live('dblclick', function(){
-	Player.setTrack(this);
+	Player.setTrack($(this).attr('id').split('i')[1]);
 });
 
 $('#player .progress').live('click', function(e){