Ajax improvements, js reorganized
This commit is contained in:
magnolia-fan
@@ -0,0 +1,77 @@
|
||||
var Ajax = {
|
||||
loadArtistData: function(name) {
|
||||
$('#search-container input').attr('disabled', 'disabled').blur();
|
||||
$('#search-container img').show();
|
||||
name = name.replace(' ', '+');
|
||||
Ajax.setArchor('/artist/'+ name +'/');
|
||||
$.get('/artist/'+ name +'/', function(data){
|
||||
if (typeof data.error != 'undefined') {
|
||||
if (data.error == 'loading') {
|
||||
Ajax.loadArtistData(name);
|
||||
} else if (data.error == 404) {
|
||||
Ajax.load404Page();
|
||||
}
|
||||
return false;
|
||||
}
|
||||
Pages.renderArtist(data);
|
||||
})
|
||||
},
|
||||
|
||||
loadSearchPage: function() {
|
||||
Ajax.setArchor('/search/');
|
||||
$.get('/demo/search.html', function(data){
|
||||
$('#data-container').html(data);
|
||||
})
|
||||
},
|
||||
|
||||
loadWheePage: function() {
|
||||
$.get('/demo/whee.html', function(data){
|
||||
$('#data-container').html(data);
|
||||
})
|
||||
},
|
||||
|
||||
load404Page: function() {
|
||||
$.get('/demo/404.html', function(data){
|
||||
$('#data-container').html(data);
|
||||
})
|
||||
},
|
||||
|
||||
setArchor: function(anchor) {
|
||||
window.location = '#'+ anchor;
|
||||
},
|
||||
|
||||
getAnchor: function() {
|
||||
var tmp = window.location.href.split('#');
|
||||
if (typeof tmp[1] !== 'undefined') {
|
||||
return tmp[1];
|
||||
}
|
||||
return '';
|
||||
},
|
||||
|
||||
detectStartPage: function() {
|
||||
if (m = this.getAnchor().match(/\/artist\/(.+)\//)) {
|
||||
this.loadArtistData(m[1]);
|
||||
} else if (this.getAnchor() === '' || this.getAnchor().match(/\/search\//)) {
|
||||
this.loadSearchPage();
|
||||
} else {
|
||||
this.load404Page();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
$(function(){
|
||||
$('a.data.artist').live('click', function(){
|
||||
Ajax.loadArtistData($(this).html());
|
||||
return false;
|
||||
});
|
||||
$('.search').live('click', function(){
|
||||
Ajax.loadSearchPage();
|
||||
return false;
|
||||
});
|
||||
$('#search_form').live('submit', function(){
|
||||
$('.autocomplete-container').remove();
|
||||
Ajax.loadArtistData($('#search_field').val());
|
||||
return false;
|
||||
});
|
||||
})
|
||||
@@ -0,0 +1,82 @@
|
||||
var Audio = {
|
||||
|
||||
audio: null,
|
||||
tid: null,
|
||||
|
||||
play: function() {
|
||||
try {
|
||||
this.audio.play();
|
||||
} catch(e) {}
|
||||
},
|
||||
|
||||
pause: function() {
|
||||
try {
|
||||
this.audio.pause();
|
||||
} catch(e) {}
|
||||
},
|
||||
|
||||
rewind: function() {
|
||||
try {
|
||||
this.audio.currentTime = 0;
|
||||
} catch(e) {}
|
||||
},
|
||||
|
||||
addTrack: function(id, url) {
|
||||
if ($('#a'+ id).length == 0) {
|
||||
$('#audiobox').append('<audio id="a'+ id +'" src="'+ url +'"></audio>')
|
||||
}
|
||||
},
|
||||
|
||||
setTrack: function(id) {
|
||||
this.audio = document.getElementById('a'+ id);
|
||||
$(this.audio).bind('play',function() {
|
||||
$('#player .controls .play').hide();
|
||||
$('#player .controls .pause').show();
|
||||
}).bind('pause ended', function() {
|
||||
$('#player .controls .pause').hide();
|
||||
$('#player .controls .play').show();
|
||||
});
|
||||
},
|
||||
|
||||
getLoadedPercent: function() {
|
||||
try {
|
||||
return Audio.audio.buffered.end(0) / Audio.audio.duration;
|
||||
} catch(e) {}
|
||||
return 0;
|
||||
},
|
||||
|
||||
getPlayedPercent: function() {
|
||||
try {
|
||||
return Audio.audio.currentTime / Audio.audio.duration;
|
||||
} catch(e) {}
|
||||
return 0;
|
||||
},
|
||||
|
||||
setPlayedPercent: function(val) {
|
||||
if (typeof(this.audio.duration) != undefined) {
|
||||
this.audio.currentTime = Math.round(val * this.audio.duration / 100);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
|
||||
startListener: function() {
|
||||
Audio.tid = window.setTimeout(Audio.startListener, 100);
|
||||
Player.updateUI(
|
||||
Audio.getLoadedPercent(),
|
||||
Audio.getPlayedPercent()
|
||||
);
|
||||
},
|
||||
|
||||
killListener: function() {
|
||||
window.clearTimeout(this.tid);
|
||||
}
|
||||
}
|
||||
|
||||
$('#player .controls .play').live('click', function(){
|
||||
Audio.play();
|
||||
});
|
||||
|
||||
$('#player .controls .pause').live('click', function(){
|
||||
Audio.pause();
|
||||
});
|
||||
@@ -0,0 +1,20 @@
|
||||
$(function(){
|
||||
beathaven.init();
|
||||
$(window).resize(beathaven.adjustSizes)
|
||||
})
|
||||
var beathaven = {
|
||||
|
||||
init: function () {
|
||||
this.drawInterface();
|
||||
this.adjustSizes();
|
||||
Ajax.detectStartPage();
|
||||
},
|
||||
drawInterface: function() {
|
||||
},
|
||||
adjustSizes: function() {
|
||||
$('#data-container').height($(window).height() - $('#header-container').height());
|
||||
$('#data-container').width($(window).width() - $('#player').width()).scrollbar();
|
||||
$('#player-container').height($(window).height());
|
||||
$('#playlist').height($(window).height() - $('#player').height()).scrollbar();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
var Pages = {
|
||||
|
||||
renderArtist: function(data){
|
||||
var artist_info = $('\
|
||||
<div class="artist-info">\
|
||||
<div class="pic">\
|
||||
<img src="'+ data.artist.pic +'" alt="'+ data.artist.name +'" width="250" />\
|
||||
</div>\
|
||||
<h1 class="name">'+ data.artist.name +'</h1>\
|
||||
<div class="info">\
|
||||
'+ data.artist.desc +'\
|
||||
</div>\
|
||||
</div>\
|
||||
');
|
||||
|
||||
var albums_info = $('<div class="albums"></div>');
|
||||
$.each(data.albums, function(i, album){
|
||||
if (album.year != null) {
|
||||
var album_info = $('\
|
||||
<div class="album">\
|
||||
<h2 class="name">'+ album.name +' ('+ album.year +')</h2>\
|
||||
<div class="pic">\
|
||||
<img src="'+ album.pic +'" alt="'+ album.name +' by '+ data.artist.name +'" width="250" height="250"/>\
|
||||
<div class="add-album-button-container">\
|
||||
<div class="add-album button gray">Add to Now Playing</div>\
|
||||
</div>\
|
||||
</div>\
|
||||
<div class="tracklist">\
|
||||
<ul>\
|
||||
</ul>\
|
||||
</div>\
|
||||
</div>\
|
||||
');
|
||||
|
||||
$.each(album.tracks.album, function(i, track){
|
||||
var track_info = $('\
|
||||
<li>\
|
||||
<div class="add-track button gray">+</div>\
|
||||
<div class="track-container">\
|
||||
<span class="index">'+ (i+1) +'</span>\
|
||||
<div class="trackname">'+ track.name +'</div>\
|
||||
<div class="length">'+ track.duration +'</div>\
|
||||
</div>\
|
||||
</li>\
|
||||
');
|
||||
|
||||
$(album_info).find('.tracklist ul').append(track_info);
|
||||
});
|
||||
|
||||
$(albums_info).append(album_info);
|
||||
}
|
||||
})
|
||||
|
||||
$('#data-container').html('').append(artist_info).append(albums_info).scrollbar();
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
var Player = {
|
||||
|
||||
bar_width: 330,
|
||||
|
||||
getTrackUrl: function(data) {
|
||||
|
||||
},
|
||||
|
||||
addTrack: function(artist, track, length) {
|
||||
$('.playlist-tracks').append('\
|
||||
<li id="i'+ Math.round(Math.random() * 999999) +'">\
|
||||
<div class="item">\
|
||||
<span class="title">'+ artist +' — '+ track +'</span>\
|
||||
<span class="duration">'+ length +'</span>\
|
||||
</div>\
|
||||
</li>\
|
||||
');
|
||||
|
||||
$('#playlist').html($('.playlist-tracks')).scrollbar();
|
||||
},
|
||||
|
||||
setTrack: function(obj) {
|
||||
if (typeof obj == 'string') {
|
||||
var id = obj;
|
||||
obj = $('#i'+ obj);
|
||||
} else {
|
||||
var id = $(obj).attr('id').split('i')[1];
|
||||
}
|
||||
var query = $(obj).find('.title').html();
|
||||
var length = $(obj).find('.duration').html();
|
||||
|
||||
$('#player .now-playing').html(query);
|
||||
$('.playlist-tracks li').removeClass('now');
|
||||
$('#i'+ id).addClass('now');
|
||||
|
||||
loadTracksData(query, this.playSource);
|
||||
},
|
||||
|
||||
playSource: function(url) {
|
||||
var id = $('.playlist-tracks .now').attr('id').split('i')[1];
|
||||
Audio.pause();
|
||||
Audio.rewind();
|
||||
Audio.addTrack(id, url);
|
||||
Audio.setTrack(id);
|
||||
Audio.play();
|
||||
Audio.startListener();
|
||||
},
|
||||
|
||||
nextTrack: function() {
|
||||
if (true) { // Shuffle off
|
||||
if ($('.playlist-tracks .now').next().length == 0 && true) { // Last track in the playlist and repeat is on
|
||||
return $('.playlist-tracks li').first().attr('id').split('i')[1];
|
||||
} else {
|
||||
return $('.playlist-tracks .now').next().attr('id').split('i')[1];
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
prevTrack: function() {
|
||||
if (true) { // Shuffle off
|
||||
if ($('.playlist-tracks .now').prev().length == 0 && true) { // First track in the playlist
|
||||
return $('.playlist-tracks li').last().attr('id').split('i')[1];
|
||||
} else {
|
||||
return $('.playlist-tracks .now').prev().attr('id').split('i')[1];
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
updateUI: function(buffered, played) {
|
||||
$('#player .loaded').width(Math.round(buffered * this.bar_width));
|
||||
$('#player .played').width(Math.round(played * this.bar_width));
|
||||
if (played == 1) {
|
||||
Audio.killListener();
|
||||
Player.setTrack(Player.nextTrack());
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$('#player .controls .prev').live('click', function(){
|
||||
Player.setTrack(Player.prevTrack());
|
||||
});
|
||||
|
||||
$('#player .controls .next').live('click', function(){
|
||||
Player.setTrack(Player.nextTrack());
|
||||
});
|
||||
|
||||
$('.add-album').live('click', function() {
|
||||
var artist = $('.artist-info .name').html();
|
||||
$(this).parent().parent().parent().find('.tracklist li').each(function(i, item){
|
||||
var track_name = $(item).find('.trackname').html();
|
||||
var length = $(item).find('.length').html();
|
||||
Player.addTrack(artist, track_name, length);
|
||||
});
|
||||
})
|
||||
$('.add-track').live('click', function(){
|
||||
var artist = $('.artist-info .name').html();
|
||||
var track_name = $(this).parent().find('.trackname').html();
|
||||
var length = $(this).parent().find('.length').html();
|
||||
Player.addTrack(artist, track_name, length);
|
||||
});
|
||||
|
||||
$('.tracklist li').live('mouseover mouseout', function(e){
|
||||
if (e.type == 'mouseover') {
|
||||
$(this).find('.add-track').show();
|
||||
} else {
|
||||
$(this).find('.add-track').hide();
|
||||
}
|
||||
});
|
||||
|
||||
$('.playlist-tracks li').live('dblclick', function(){
|
||||
Player.setTrack(this);
|
||||
});
|
||||
@@ -0,0 +1,28 @@
|
||||
function authInfo(response) {
|
||||
if (typeof response != 'undefined' && response.session) {
|
||||
$('#vk_login').hide();
|
||||
$('#vk_logout').show();
|
||||
} else {
|
||||
$('#vk_login').show();
|
||||
$('#vk_logout').hide();
|
||||
}
|
||||
}
|
||||
$(function(){
|
||||
VK.init({
|
||||
apiId: 2335068,
|
||||
nameTransportPath: "/demo/xd_receiver.html"
|
||||
});
|
||||
VK.Auth.getLoginStatus(authInfo);
|
||||
$('#vk_login').click(function(){
|
||||
VK.Auth.login(authInfo, 8);
|
||||
});
|
||||
$('#vk_logout').click(function(){
|
||||
VK.Auth.logout(authInfo);
|
||||
});
|
||||
})
|
||||
|
||||
function loadTracksData(query, callback) {
|
||||
VK.Api.call('audio.search', {q:query}, function(r){
|
||||
callback(r.response[1].url);
|
||||
})
|
||||
}
|
||||
Reference in New Issue
Block a user