Audio response perfect match, auth improvements
This commit is contained in:
parent
5bd2852894
commit
a024f13088
|
@ -25,7 +25,7 @@
|
|||
<div id="player-container">
|
||||
<div id="player">
|
||||
<div id="audiobox"></div>
|
||||
<div class="now-playing">Jet — 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 id="vk_logout">Logout</li>
|
||||
<li class="vk_auth" id="vk_login">Login</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">↑</div>Don't forget to log in, please. It's simple.</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -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){
|
||||
|
|
|
@ -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(
|
||||
|
|
|
@ -26,14 +26,15 @@ var Player = {
|
|||
} else {
|
||||
var id = $(obj).attr('id').split('i')[1];
|
||||
}
|
||||
var query = $(obj).find('.title').html();
|
||||
var length = $(obj).find('.duration').html();
|
||||
var query = $(obj).find('.title').text();
|
||||
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) {
|
||||
|
@ -109,4 +110,8 @@ $('.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);
|
||||
});
|
|
@ -1,9 +1,15 @@
|
|||
function authInfo(response) {
|
||||
if (typeof response != 'undefined' && response.session) {
|
||||
$('#vk_login').hide();
|
||||
$('#vk_logout').show();
|
||||
$('#vk_login, .auth_notice').hide();
|
||||
$('#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) {
|
||||
VK.Api.call('audio.search', {q:query}, function(r){
|
||||
callback(r.response[1].url);
|
||||
function loadTracksData(artist, track, duration, callback) {
|
||||
VK.Api.call('audio.search', {q: artist +' '+ track}, function(r){
|
||||
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;
|
||||
}
|
|
@ -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 {
|
||||
|
|
|
@ -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; }
|
||||
|
|
Loading…
Reference in New Issue