diff options
| -rw-r--r-- | main.go | 13 | ||||
| -rw-r--r-- | static/audioaxis-white.png | bin | 0 -> 10190 bytes | |||
| -rw-r--r-- | static/base.css | 54 | ||||
| -rw-r--r-- | static/player_pause.png | bin | 0 -> 398 bytes | |||
| -rw-r--r-- | static/player_play.png | bin | 0 -> 520 bytes | |||
| -rw-r--r-- | static/player_stop.png | bin | 0 -> 370 bytes | |||
| -rw-r--r-- | static/script.js | 99 | ||||
| -rw-r--r-- | templates/p.html | 53 |
8 files changed, 208 insertions, 11 deletions
@@ -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) diff --git a/static/audioaxis-white.png b/static/audioaxis-white.png Binary files differnew file mode 100644 index 0000000..0d1e779 --- /dev/null +++ b/static/audioaxis-white.png diff --git a/static/base.css b/static/base.css new file mode 100644 index 0000000..d2a4ada --- /dev/null +++ b/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; +} diff --git a/static/player_pause.png b/static/player_pause.png Binary files differnew file mode 100644 index 0000000..c384034 --- /dev/null +++ b/static/player_pause.png diff --git a/static/player_play.png b/static/player_play.png Binary files differnew file mode 100644 index 0000000..d863e4e --- /dev/null +++ b/static/player_play.png diff --git a/static/player_stop.png b/static/player_stop.png Binary files differnew file mode 100644 index 0000000..740bed0 --- /dev/null +++ b/static/player_stop.png 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'; +} diff --git a/templates/p.html b/templates/p.html index 14b367c..af095d1 100644 --- a/templates/p.html +++ b/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&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&enablejsapi=1"> + <param name="allowScriptAccess" value="always"> + <embed src="http://www.youtube.com/v/{{$first.Yid}}?version=3&enablejsapi=1" allowScriptAccess="always"> + </object> +</body> + +</html> |
