use new exp/template, make stuff work

1 files changed, 99 insertions, 0 deletions

diff --git a/static/script.js b/static/script.js
new file mode 100644
index 0000000..21e01d0
--- /dev/null
+++ b/static/script.js
@@ -0,0 +1,99 @@
+var player;
+var litColor = '#eee';
+var dimmedColor = '#555';
+var interval;
+for (var i = 0; i < ids.length; i++) {
+	drawBar(ids[i]);
+}
+
+function drawBar(id) {
+	var canvas = document.getElementById(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 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)
+}
+
+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';
+}