1 files changed, 52 insertions, 35 deletions

diff --git a/static/script.js b/static/script.js
index d4e24ab..9407689 100644
--- a/static/script.js
+++ b/static/script.js
@@ -11,6 +11,18 @@ $(document).ready(function () {
 	for (var i = 0; i < ids.length; i++) {
 		drawBar(ids[i]);
 	}
+	var poller = new Worker('/static/poller.js');
+	poller.onmessage = function (e) {
+		for (var i = 0; i < e.data.updates.length; i++) {
+			update = e.data.updates[i];
+			switch (update.action) {
+			case 0:
+				drawAdd(update);
+				break;
+			}
+		}
+	}
+	poller.postMessage({'pid': pid});
 });
 
 function drawBar(id) {
@@ -42,6 +54,7 @@ function drawBar(id) {
 	}
 }
 
+// function name is defined by youtube player api
 function onYouTubePlayerReady(playerId) {
 	player = document.getElementById('player');
 	player.addEventListener('onStateChange', 'onStateChange');
@@ -49,16 +62,16 @@ function onYouTubePlayerReady(playerId) {
 
 function onStateChange(state) {
 	switch (state) {
-		case 1: //playing
-			interval = setInterval(drawBar, 100, current_id);
-			break;
-		case 0: //ended
-			showPlay(current_id);
-		case -1: //unstarted
-		case 2: //paused
-		case 3: //buffering
-		case 5: //cued
-			clearInterval(interval);
+	case 1: //playing
+		interval = setInterval(drawBar, 100, current_id);
+		break;
+	case 0: //ended
+		showPlay(current_id);
+	case -1: //unstarted
+	case 2: //paused
+	case 3: //buffering
+	case 5: //cued
+		clearInterval(interval);
 	}
 }
 
@@ -118,7 +131,7 @@ function search(query) {
 		'key': 'AI39si7SaaRqtvAZTa8lePOq6XC5r7S5Xzp3AB6oYPfeCArPbA4dIq7tSVeuIDwAkcFFDeI3rzNmYxkyN_fg8X_7w800pIvVOA'
 	}
 	$.getJSON('https://gdata.youtube.com/feeds/api/videos', params,
-		function(data) {
+		function (data) {
 			var entries = data.feed.entry;
 			var items = [];
 			for (var i = 0; i < entries.length; i++) {
@@ -147,34 +160,38 @@ function add(id, title) {
 		'user': user
 	}
 	$.getJSON('/add/', params,
-		function(data) {
+		function (data) {
 			if (data != 1)
 				return;
-			$('article').append('\
-				<section class="song" id="' + id + '">\
-					<div class="info">\
-						<a href="http://www.youtube.com/watch?v=' + id + '">' + title + '</a>\
-					</div>\
-					<div class="user">' + user + '</div>\
-					<div class="remove" onclick="remove(\'' + id + '\')">×</div>\
-					<br class="clear">\
-					<div class="thumb">\
-						<img src="http://i.ytimg.com/vi/' + id + '/1.jpg" alt="' + id + '">\
-					</div>\
-					<canvas id="c_' + id + '" width="700" height="20"></canvas>\
-					<br>\
-					<img src="/static/player_play.png" alt="Play" onclick="play(\'' + id + '\')" id="play_' + id + '">\
-					<img src="/static/player_pause.png" alt="Pause" onclick="pause(\'' + id + '\')" id="pause_' + id + '">\
-					<img src="/static/player_stop.png" alt="Stop" onclick="stop(\'' + id + '\')">\
-					<br class="clear">\
-				</section>\
-				');
-			ids.push(id);
-			drawBar(id);
+			drawAdd(params);
 		}
 	);
 }
 
+function drawAdd(s) {
+	$('article').append('\
+		<section class="song" id="' + s.yid + '">\
+			<div class="info">\
+				<a href="http://www.youtube.com/watch?v=' + s.yid + '">' + s.title + '</a>\
+			</div>\
+			<div class="user">' + s.user + '</div>\
+			<div class="remove" onclick="remove(\'' + s.yid + '\')">×</div>\
+			<br class="clear">\
+			<div class="thumb">\
+				<img src="http://i.ytimg.com/vi/' + s.yid + '/1.jpg" alt="' + s.yid + '">\
+			</div>\
+			<canvas id="c_' + s.yid + '" width="700" height="20"></canvas>\
+			<br>\
+			<img src="/static/player_play.png" alt="Play" onclick="play(\'' + s.yid + '\')" id="play_' + s.yid + '">\
+			<img src="/static/player_pause.png" alt="Pause" onclick="pause(\'' + s.yid + '\')" id="pause_' + s.yid + '">\
+			<img src="/static/player_stop.png" alt="Stop" onclick="stop(\'' + s.yid + '\')">\
+			<br class="clear">\
+		</section>\
+		');
+	ids.push(s.yid);
+	drawBar(s.yid);
+}
+
 function remove(id) {
 	var user = $('#user').val();
 	params = {
@@ -182,10 +199,10 @@ function remove(id) {
 		'yid': id,
 	}
 	$.getJSON('/remove/', params,
-		function(data) {
+		function (data) {
 			if (data == 1) {
 				var element = $('#' + id);
-				element.slideUp(100, function() {
+				element.slideUp(100, function () {
 					element.remove();
 				});
 			}