Audio response perfect match, auth improvements

public/demo/index.html

@@ -25,7 +25,7 @@
 		<div id="player-container">
 			<div id="player">
 				<div id="audiobox"></div>
-				<div class="now-playing">Jet &mdash; Black Hearts</div>
+				<div class="now-playing">Add some music to playlist</div>
 				<div class="progress">
 					<div class="loaded">
 						<div class="played"></div>
@@ -46,12 +46,13 @@
 		
 		<!-- START HEADER -->
 		<div id="header-container">
+			<div class="hello"></div>
 			<ul id="navigation">
 				<li class="logo search">BeatHaven</li>
 				<li class="search">Search</li>
 				<li><a href="https://twitter.com/#!/beat_haven" target="_blank">News</a></li>
-				<li id="vk_login">Login</li>
+				<li class="vk_auth" id="vk_login">Login</li>
-				<li id="vk_logout">Logout</li>
+				<li class="vk_auth" id="vk_logout">Logout</li>
 			</ul>
 		</div>
 		<!-- END HEADER -->
@@ -63,5 +64,6 @@
 		<!-- END DATA -->
 		
 		<div id="vk_api_transport"></div>
+		<div class="auth_notice"><div class="arrow">&uarr;</div>Don't forget to log in, please. It's simple.</div>
 	</body>
 </html>

public/javascripts/beathaven/ajax.js

@@ -2,7 +2,6 @@ var Ajax = {
 	loadArtistData: function(name) {
 		$('#search-container input').attr('disabled', 'disabled').blur();
 		$('#search-container img').show();
-		console.log(1);
 		name = name.replace(' ', '+');
 		Ajax.setArchor('/artist/'+ name +'/');
 		$.get('/artist/'+ name +'/', function(data){

public/javascripts/beathaven/audio.js

@@ -60,6 +60,12 @@ var Audio = {
 		return false;
 	},
 	
+	skipToPercent: function(val) {
+		try {
+			this.audio.currentTime = this.audio.duration * val;
+		} catch(e) {}
+	},
+	
 	startListener: function() {
 		Audio.tid = window.setTimeout(Audio.startListener, 100);
 		Player.updateUI(

public/javascripts/beathaven/player.js

@@ -26,14 +26,15 @@ var Player = {
 		} else {
 			var id = $(obj).attr('id').split('i')[1];
 		}
-		var query = $(obj).find('.title').html();
+		var query = $(obj).find('.title').text();
-		var length = $(obj).find('.duration').html();
+		var length = $(obj).find('.duration').text();
+		var tmp = query.split(' — ');
 		
 		$('#player .now-playing').html(query);
 		$('.playlist-tracks li').removeClass('now');
 		$('#i'+ id).addClass('now');
 		
-		loadTracksData(query, this.playSource);
+		loadTracksData(tmp[0], tmp[1], length, this.playSource);
 	},
 	
 	playSource: function(url) {
@@ -110,3 +111,7 @@ $('.tracklist li').live('mouseover mouseout', function(e){
 $('.playlist-tracks li').live('dblclick', function(){
 	Player.setTrack(this);
 });
+
+$('#player .progress').live('click', function(e){
+	Audio.skipToPercent(e.offsetX / Player.bar_width);
+});

public/javascripts/beathaven/vkontakte.js

@@ -1,9 +1,15 @@
 function authInfo(response) {
 	if (typeof response != 'undefined' && response.session) {
-		$('#vk_login').hide();
+		$('#vk_login, .auth_notice').hide();
-		$('#vk_logout').show();
+		$('#vk_logout').css('display', 'block');
+		if ($('#search_field').length > 0) {
+			$('#search_field').focus();
+		}
+		VK.Api.call('getVariable', {key: 1281}, function(r) {
+			$('#header-container .hello').text('Hi there, '+ r.response +'!');
+		});
 	} else {
-		$('#vk_login').show();
+		$('#vk_login, .auth_notice').css('display', 'block');
 		$('#vk_logout').hide();
 	}
 }
@@ -21,8 +27,49 @@ $(function(){
 	});
 })
 
-function loadTracksData(query, callback) {
+function loadTracksData(artist, track, duration, callback) {
-	VK.Api.call('audio.search', {q:query}, function(r){
+	VK.Api.call('audio.search', {q: artist +' '+ track}, function(r){
-		callback(r.response[1].url);
+		callback(matchPerfectResult(r.response, artist, track, duration));
 	})
 }
+
+function matchPerfectResult(data, artist, track, duration) {
+	var duration = duration.split(':');
+	if (duration[1].charAt(0) === '0') {
+		duration[1] = duration[1].substring(1);
+	}
+	duration = parseInt(duration[0]) * 60 + parseInt(duration[1]);
+	var best_score = 0;
+	var best_result = null;
+	for (var i = 1; i < data.length; i++) {
+		var score = 0;
+		if (data[i].artist === artist) {
+			score += 10;
+		} else if (data[i].artist.split(artist).length === 2) {
+			score += 5;
+		} else if (data[i].title.split(artist).length === 2) {
+			score += 4;
+		}
+		if (data[i].title === track) {
+			score += 10;
+		} else if (data[i].title.split(track).length === 2) {
+			score += 5;
+		}
+		if (parseInt(data[i].duration) === duration) {
+			score += 15;
+		} else {
+			var delta = Math.abs(parseInt(data[i].duration) - duration);
+			if (delta < 10) {
+				score += (10 - delta);
+			}
+		}
+		if (score > best_score) {
+			best_score = score;
+			best_result = data[i];
+		}
+		if (score === 35) {
+			return best_result.url;
+		}
+	}
+	return best_result.url;
+}

public/stylesheets/layout.css

@@ -8,6 +8,10 @@ body {
 	overflow: hidden;
 	font-family: Helvetica, Arial, sans-serif;
 	font-size: 14px;
+	-moz-user-select: none;
+	-khtml-user-select: none;
+	-webkit-user-select: none;
+	user-select: none;
 }
 
 #header-container {

public/stylesheets/misc.css

@@ -28,15 +28,26 @@
 			font-weight: bold;
 			margin-right: 12px;
 		}
+		#navigation li.vk_auth {
+			display: none;
+		}
 		#navigation li a {
 			color: inherit;
 			text-decoration: inherit;
 		}
+#header-container .hello {
+	float: right;
+	margin: 6px 10px 0 0;
+	color: #FFF;
+}
+
 .button {
 	display: inline;
 	width: auto;
 	padding: 5px 10px;
 	border-radius: 3px;
+	-webkit-border-radius: 3px;
+	-moz-border-radius: 3px;
 	border: 1px solid;
 	cursor: pointer;
 }
@@ -46,10 +57,6 @@
 		border-color: #DDD;
 	}
 
-#vk_login, #vk_logout {
-	display: none;
-}
-
 .scrollbar-pane {
     margin-right: 8px;
 }
@@ -82,6 +89,8 @@
 		font-size: 24px;
 		padding: 4px;
 		border: #CCC 1px solid;
+		-webkit-border-radius: 3px;
+		-moz-border-radius: 3px;
 		border-radius: 3px;
 	}
 	#search-container #search_button {
@@ -90,6 +99,8 @@
 		padding: 4px;
 		background-color: #DDD;
 		border: #CCC 1px solid;
+		-webkit-border-radius: 3px;
+		-moz-border-radius: 3px;
 		border-radius: 3px;
 	}
 	#search-container img {
@@ -131,6 +142,26 @@
 	clear: both;
 }
 
+.auth_notice {
+	display: none;
+	position: absolute;
+	background-color: #07F;
+	color: #FFF;
+	top: 32px;
+	left: 230px;
+	padding: 8px;
+	border: #05D 1px solid;
+	border-radius: 3px;
+	-webkit-border-radius: 3px;
+	-moz-border-radius: 3px;
+}
+	.auth_notice .arrow {
+		float: left;
+		margin: -8px 15px 0 8px;
+		font-size: 25px;
+		font-weight: bold;
+	}
+
 /* Colorizing *
 #player-container	{ background-color: #CFC; }
 #data-container		{ background-color: #CCF; }