diff options
| -rw-r--r-- | static/base.css | 90 | ||||
| -rw-r--r-- | static/script.js | 40 | ||||
| -rw-r--r-- | templates/p.html | 12 |
3 files changed, 139 insertions, 3 deletions
diff --git a/static/base.css b/static/base.css index df3d295..656d8ef 100644 --- a/static/base.css +++ b/static/base.css @@ -1,7 +1,10 @@ body { background-color: #000; color: #ccc; +} +body, input { font-family: 'Cantarell', sans-serif; + font-size: 16px; } a:link, a:visited { color: #08a; @@ -15,16 +18,95 @@ img { border-style: none; vertical-align: middle; } +form { + display: inline; + text-align: center; +} +input, button { + background-color: #050505; + border: 1px solid #aaa; + color: #eee; + padding: 2px 5px; +} +input:focus { + border: 1px solid #38a; +} +input[type="submit"] { + background-color: #111; + padding: 2px 5px; +} +label { + cursor: pointer; +} header, article { width: 900px; margin: 20px auto; + clear: both; } img.aa { + float: left; opacity: 0.9; } +header { + position: relative; /* for #results */ +} +header label, header input { + position: absolute; +} +header label[for="user"] { + left: 480px; + top: 5px; +} +header input#user { + left: 570px; +} +header label[for="song"] { + left: 300px; + top: 55px; +} +header input#song { + left: 390px; + top: 50px; + text-align: center; +} +header input[type="submit"] { + left: 830px; + top: 50px; +} +div#results { + display: none; + position: absolute; + width: 428px; + height: 560px; + left: 392px; + top: 82px; + background-color: #111; + border: 1px solid #aaa; + z-index: 1; +} +div#results ul { + margin: 5px 10px; + padding: 0; +} +div#results ul li { + list-style: none; + display: block; + height: 50px; + margin: 5px 0; +} +div#results ul li:hover { + background-color: #024; +} +div#results ul li img { + height: 50px; + width: 66px; + float: left; + margin-right: 10px; +} + object#player { position: absolute; left: -1px; @@ -35,6 +117,7 @@ section.song { background-color: #111; padding: 15px 20px; margin-top: 10px; + position: relative; /* for remove */ } section.song div.info { margin-bottom: 10px; @@ -43,6 +126,13 @@ section.song div.info { section.song div.user { float: right; } +section.song div.remove { + position: absolute; + top: 0px; + right: 5px; + font-weight: bold; + cursor: pointer; +} section.song div.thumb { float: left; width: 150px; diff --git a/static/script.js b/static/script.js index 1a10f88..c55aff6 100644 --- a/static/script.js +++ b/static/script.js @@ -2,9 +2,16 @@ var player; var litColor = '#eee'; var dimmedColor = '#555'; var interval; -for (var i = 0; i < ids.length; i++) { - drawBar(ids[i]); -} +$(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]); + } +}); function drawBar(id) { var canvas = document.getElementById(id); @@ -98,3 +105,30 @@ function showPause(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; + items.push('<li id="r_' + id + '"><img src="http://i.ytimg.com/vi/' + id + '/1.jpg" alt="' + id + '">' + title + '</li>'); + } + var results = $('#results ul').html(items.join('\n')); + $('#results').slideDown(100); + } + ); + return false; +} diff --git a/templates/p.html b/templates/p.html index 0260871..1098e0b 100644 --- a/templates/p.html +++ b/templates/p.html @@ -10,6 +10,16 @@ <body> <header> <img src="/static/audioaxis-white.png" alt="Audio Axis" class="aa"> + <form onsubmit="return search(this.song.value)"> + <label for="user">Username:</label> + <input type="text" id="user" value="anonymous" size="16"> + <br> + <label for="song">Add a song:</label> + <input type="text" id="song" size="58" autocomplete="off"> + <input type="submit" value="Search"> + </form> + <div id="results" onblur="$(this).slideUp()"><ul> + </ul></div> </header> <article> {{range .Songs}} @@ -20,6 +30,7 @@ <div class="user"> {{.User}} </div> + <div class="remove">×</div> <br class="clear"> <div class="thumb"> <img src="http://i.ytimg.com/vi/{{.Yid}}/1.jpg" alt="{{.Name}}"> @@ -40,6 +51,7 @@ var current_id = '{{$first.Yid}}'; var ids = [{{range .Songs}}'{{.Yid}}',{{end}}]; </script> + <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></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"> |