only show the bar for the current song

static/script.js

@@ -73,29 +73,22 @@ function drawBar(id) {
 	var canvas = document.getElementById('c_' + id);
 	if (!canvas) return;
 	canvas.height = canvas.height; //clear
-	var context = canvas.getContext("2d");
 
 	if (current_id == id && player) {
+		var context = canvas.getContext("2d");
 		context.fillStyle = dimmedColor;
 		context.fillRect(0, 9, 700, 2);
-		var loaded_start = player.getVideoStartBytes() / player.getVideoBytesTotal() * 700;
-		var loaded_length = player.getVideoBytesLoaded() / player.getVideoBytesTotal() * 700;
+		var loaded_start = player.getVideoStartBytes() / player.getVideoBytesTotal() * 700,
+		    loaded_length = player.getVideoBytesLoaded() / player.getVideoBytesTotal() * 700;
 		context.fillStyle = litColor;
 		context.fillRect(loaded_start, 9, loaded_length, 2);
 
-		var current_time = player.getVideoStartBytes() + player.getCurrentTime();
-		var current_pos = current_time / player.getDuration() * 690 + 5;
+		var current_time = player.getVideoStartBytes() + player.getCurrentTime(),
+		    current_pos = current_time / player.getDuration() * 690 + 5;
 		context.beginPath();
 		context.arc(current_pos, 10, 5, 0, Math.PI * 2, false);
 		context.closePath();
 		context.fill();
-	} else {
-		context.fillStyle = dimmedColor;
-		context.beginPath();
-		context.arc(5, 10, 5, 0, Math.PI * 2, false);
-		context.closePath();
-		context.fill();
-		context.fillRect(0, 9, 700, 2);
 	}
 }
 
@@ -131,8 +124,9 @@ function onStateChange(state) {
 function play(yid) {
 	if (current_id != yid) {
 		player.loadVideoById(yid, 0, 'hd720');
-		drawBar(current_id, dimmedColor);
+		var previous_id = current_id;
 		current_id = yid;
+		drawBar(previous_id);
 	}
 	if (player.getPlayerState() in {'-1':1, '0':1, '5':1}) { // unstarted, ended, cued
 		player.seekTo(0, true);
@@ -305,7 +299,6 @@ function drawAdd(s) {
 					.addClass('clear')
 				)
 			);
-	drawBar(s.yid);
 }
 
 function remove(id) {