audioaxis/static/script.js

var player;
var litColor = '#eee';
var dimmedColor = '#555';
var interval;
$(document).ready(function () {
	$('body').click(function (e) {
		if (e.target.id !== 'results') {
			$('#results').slideUp(100);
		}
	});
	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) {
	var canvas = document.getElementById('c_' + id);
	canvas.height = canvas.height; //clear
	var context = canvas.getContext("2d");

	if (current_id == id && player) {
		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;
		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;
		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);
	}
}

// function name is defined by youtube player api
function onYouTubePlayerReady(playerId) {
	player = document.getElementById('player');
	player.addEventListener('onStateChange', 'onStateChange');
}

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

function play(yid) {
	if (current_id != yid) {
		player.loadVideoById(yid, 0, 'hd720');
		drawBar(current_id, dimmedColor);
		current_id = yid;
	}
	if (player.getPlayerState() in {'-1':1, '0':1, '5':1}) { // unstarted, ended, cued
		player.seekTo(0, true);
	}
	player.playVideo();
	for (var i = 0; i < ids.length; i++) {
		if (ids[i] == yid)
			showPause(ids[i]);
		else
			showPlay(ids[i]);
	}
}
function pause(yid) {
	if (current_id != yid)
		return
	player.pauseVideo();
	showPlay(yid);
}
function stop(yid) {
	if (current_id != yid)
		return
	player.stopVideo();
	showPlay(yid);
	drawBar(yid);
}

function showPlay(yid) {
	var play = document.getElementById('play_' + yid);
	var pause = document.getElementById('pause_' + yid);
	play.style.display = 'inline';
	pause.style.display = 'none';
}
function showPause(yid) {
	var pause = document.getElementById('pause_' + yid);
	var play = document.getElementById('play_' + yid);
	pause.style.display = 'inline';
	play.style.display = 'none';
}

function search(query) {
	params = {
		'q': query,
		'max-results': 10,
		'v': 2,
		'strict': true,
		'alt': 'json',
		'fields': 'entry(title,media:group(yt:videoid))',
		'safeSearch': 'none',
		'key': 'AI39si7SaaRqtvAZTa8lePOq6XC5r7S5Xzp3AB6oYPfeCArPbA4dIq7tSVeuIDwAkcFFDeI3rzNmYxkyN_fg8X_7w800pIvVOA'
	}
	$.getJSON('https://gdata.youtube.com/feeds/api/videos', params,
		function (data) {
			var entries = data.feed.entry;
			var items = [];
			for (var i = 0; i < entries.length; i++) {
				var title = entries[i].title.$t;
				var id = entries[i].media$group.yt$videoid.$t;
				var html = '<li id="r_' + id + '">';
				html += '<a href="javascript:add(\'' + id + '\', \'' + escape(title) + '\')">';
				html += '<img src="http://i.ytimg.com/vi/' + id  + '/1.jpg" alt="' + id + '">';
				html +=	title;
				html += '</a></li>';
				items.push(html);
			}
			var results = $('#results ul').html(items.join('\n'));
			$('#results').slideDown(100);
		}
	);
	return false;
}

function add(id, title) {
	var user = $('#user').val();
	params = {
		'pid': pid,
		'yid': id,
		'title': title,
		'user': user
	}
	$.getJSON('/add/', params,
		function (data) {
			if (data != 1)
				return;
			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 = {
		'pid': pid,
		'yid': id,
	}
	$.getJSON('/remove/', params,
		function (data) {
			if (data == 1) {
				var element = $('#' + id);
				element.slideUp(100, function () {
					element.remove();
				});
			}
		}
	);
}