use new exp/template, make stuff work

main.go

@@ -3,7 +3,7 @@ package main
 import (
 	"fmt"
 	"http"
-	"template"
+	"exp/template"
 	mysql "github.com/Philio/GoMySQL"
 	"os"
 )
@@ -67,7 +67,7 @@ func playlist(w http.ResponseWriter, r *http.Request) {
 	}
 
 	if debug {
-		t, err := template.ParseFile("templates/p.html", nil)
+		t, err := template.ParseFile("templates/p.html")
 		if err != nil {
 			http.Error(w, err.String(), http.StatusInternalServerError)
 			return
@@ -88,8 +88,13 @@ func playlist(w http.ResponseWriter, r *http.Request) {
 
 func main() {
 	templates = make(map[string]*template.Template)
-	for _, t:= range []string{"p"} {
-		templates[t] = template.MustParseFile("templates/" + t + ".html", nil)
+	for _, path := range []string{"p"} {
+		t, err := template.ParseFile("templates/" + path + ".html")
+		if err != nil {
+			fmt.Println(err)
+			return
+		}
+		templates[path] = t
 	}
 
 	http.HandleFunc("/", home)

static/base.css

@@ -0,0 +1,54 @@
+body {
+	background-color: #000;
+	color: #ccc;
+	font-family: sans-serif;
+}
+a:link, a:visited {
+	color: #08a;
+	text-decoration: none;
+}
+a:hover {
+	color: #0af;
+	text-decoration: underline;
+}
+img {
+	border-style: none;
+	vertical-align: middle;
+}
+
+header, article {
+	width: 900px;
+	margin: 20px auto;
+}
+
+object#player {
+	position: absolute;
+	left: -1px;
+	top: 0;
+}
+
+section.song {
+	background-color: #111;
+	padding: 15px 20px;
+	margin-top: 10px;
+}
+section.song .info {
+	margin-bottom: 10px;
+}
+section.song div.thumb {
+	float: left;
+	width: 150px;
+	overflow: hidden;
+}
+section.song canvas, section.song > img {
+	position: relative;
+	top: 20px;
+}
+section.song > img[src$='pause.png'] {
+	display: none;
+}
+
+.clear {
+	line-height: 0;
+	clear: both;
+}

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';
+}

templates/p.html

@@ -1,8 +1,47 @@
-Playlist: {Id}
-<br />
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="UTF-8">
+	<title>Audio Axis</title>
+	<link href="/static/base.css" rel="stylesheet">
+</head>
 
-{.repeated section Songs}
-	http://www.youtube.com/watch?v={Yid}
-{.alternates with}
-	<br />
-{.end}
+<body>
+	<header>
+		<img src="/static/audioaxis-white.png" alt="Audio Axis">
+	</header>
+	<article>
+		{{range .Songs}}
+			<section class="song">
+			<div class="info">
+				<a href="http://www.youtube.com/watch?v={{.Yid}}">{{.Name}}</a>
+				{{.User}}
+			</div>
+			<div class="thumb">
+				<img src="http://i.ytimg.com/vi/{{.Yid}}/1.jpg" alt="{{.Name}}">
+			</div>
+			<canvas id="{{.Yid}}" width="700" height="20"></canvas>
+			<br>
+			<img src="/static/player_play.png" alt="Play" onclick="play('{{.Yid}}')" id="play_{{.Yid}}">
+			<img src="/static/player_pause.png" alt="Pause" onclick="pause('{{.Yid}}')" id="pause_{{.Yid}}">
+			<img src="/static/player_stop.png" alt="Stop" onclick="stop('{{.Yid}}')">
+			<br class="clear">
+			</section>
+		{{else}}
+			No songs found
+		{{end}}
+	</article>
+	{{$first := index .Songs 0}}
+	<script>
+		var current_id = '{{$first.Yid}}';
+		var ids = [{{range .Songs}}'{{.Yid}}',{{end}}];
+	</script>
+	<script src="/static/script.js"></script>
+	<object data="http://www.youtube.com/v/{{$first.Yid}}?version=3&amp;enablejsapi=1" id="player" width="1" height="1" type="application/x-shockwave-flash">
+		<param name="movie" value="http://www.youtube.com/v/{{$first.Yid}}?version=3&amp;enablejsapi=1">
+		<param name="allowScriptAccess" value="always">
+		<embed src="http://www.youtube.com/v/{{$first.Yid}}?version=3&amp;enablejsapi=1" allowScriptAccess="always">
+	</object>
+</body>
+
+</html>