Home Explore Help
Sign In
raylu
/
audioaxis
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

search works

raylu 14 years ago
parent
55f8d5a0d4
commit
7d59ab2eac
3 changed files with 139 additions and 3 deletions
Split View Show Diff Stats
  1. 90 0
      static/base.css
  2. 37 3
      static/script.js
  3. 12 0
      templates/p.html

+ 90 - 0
static/base.css
View File 

@@ -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;

+ 37 - 3
static/script.js
View File 

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

+ 12 - 0
templates/p.html
View File 

@@ -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&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">