2012-10-08 01:09:30 +00:00
|
|
|
$(document).ready(function(){
|
|
|
|
var audio;
|
|
|
|
var tracks;
|
2012-10-08 06:26:37 +00:00
|
|
|
var shuffle = ko.observable();
|
|
|
|
var repeat = ko.observable();
|
2012-10-08 04:16:44 +00:00
|
|
|
var current = ko.observable();
|
2012-10-08 06:26:37 +00:00
|
|
|
var repeatAll = ko.observable();
|
2012-10-08 01:09:30 +00:00
|
|
|
var playlist = ko.observableArray();
|
2012-10-08 04:16:44 +00:00
|
|
|
var playHistory = [];
|
|
|
|
|
|
|
|
|
2012-10-11 20:49:31 +00:00
|
|
|
|
|
|
|
function clearPlaylist(){
|
|
|
|
playlist.removeAll();
|
|
|
|
}
|
|
|
|
|
|
|
|
function savePlaylist(){
|
|
|
|
saveState();
|
|
|
|
uriContent = "data:application/json," + encodeURIComponent(localStorage.playlist);
|
|
|
|
window.open(uriContent,"PlayList.json");
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function loadPlaylist(evt){
|
|
|
|
if (window.File && window.FileReader && window.FileList && window.Blob) {
|
|
|
|
// Great success! All the File APIs are supported.
|
|
|
|
var file = evt.target.files[0]; // FileList object
|
|
|
|
console.log(evt.target.files);
|
|
|
|
// files is a FileList of File objects. List some properties.
|
|
|
|
var reader = new FileReader();
|
|
|
|
reader.onload = function (event) {
|
|
|
|
var content = event.target.result;
|
|
|
|
console.log("Content:"+content);
|
|
|
|
if (typeof content != 'undefined'){
|
|
|
|
localStorage.playlist = content;
|
|
|
|
loadState();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
reader.readAsText(file);
|
|
|
|
|
|
|
|
} else {
|
|
|
|
// alert('The File APIs are not fully supported in this browser.');
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
$("#clearPlaylist").click(clearPlaylist);
|
|
|
|
$("#savePlaylist").click(savePlaylist);
|
|
|
|
$("#file").change(loadPlaylist);
|
|
|
|
$('#fileSelector').click(function(){
|
|
|
|
$('#file').click();
|
|
|
|
});
|
2012-10-08 04:16:44 +00:00
|
|
|
|
|
|
|
function saveState(){
|
|
|
|
var cleanList = [];
|
|
|
|
var pl = playlist();
|
|
|
|
for (var i = 0; i < pl.length; i += 1) {
|
2012-10-11 20:49:31 +00:00
|
|
|
var obj = {id: pl[i].id(), group: pl[i].group(),title: pl[i].title(), quality:pl[i].quality()};
|
2012-10-08 04:16:44 +00:00
|
|
|
cleanList.push(obj);
|
|
|
|
}
|
|
|
|
console.log(JSON.stringify(cleanList));
|
|
|
|
localStorage.playlist = JSON.stringify(cleanList);
|
2012-10-08 06:26:37 +00:00
|
|
|
localStorage.shuffle = shuffle() == true;
|
|
|
|
localStorage.repeat = repeat() == true;
|
|
|
|
localStorage.repeatAll = repeatAll() == true;
|
|
|
|
console.log("REPEATALL:"+localStorage.repeatAll);
|
|
|
|
}
|
|
|
|
|
|
|
|
function loadState(){
|
|
|
|
if (localStorage.playlist) {
|
2012-10-11 20:49:31 +00:00
|
|
|
playlist.removeAll();
|
2012-10-08 06:26:37 +00:00
|
|
|
console.log("State recovered. Happy listening!");
|
|
|
|
var pl = JSON.parse(localStorage.playlist);
|
|
|
|
for (var i = 0; i < pl.length; i++){
|
2012-10-11 20:49:31 +00:00
|
|
|
var obj = new Song(pl[i].id,pl[i].group,pl[i].title,pl[i].quality);
|
2012-10-08 06:26:37 +00:00
|
|
|
playlist.push(obj);
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
2012-10-11 20:49:31 +00:00
|
|
|
if(playlist().length < 1){
|
2012-10-08 06:26:37 +00:00
|
|
|
console.log("No playlist found. Adding recommendation!");
|
|
|
|
var champions = { id:"4b9ed95",
|
|
|
|
title:"We are the champions",
|
|
|
|
group:"Queen"};
|
|
|
|
|
2012-10-11 20:49:31 +00:00
|
|
|
// var libertine = { id:"fe7e4f9",
|
|
|
|
// title:"Libertine",
|
|
|
|
// group:"Kate Ryan"};
|
|
|
|
playlist.push(new Song(champions.id,champions.group,champions.title,'Example Song'));
|
|
|
|
// playlist.push(new Song(libertine.id,libertine.group,libertine.title));
|
2012-10-08 06:26:37 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
shuffle(localStorage.shuffle == 'true');
|
|
|
|
repeat(localStorage.repeat == 'true');
|
|
|
|
repeatAll(localStorage.repeatAll == 'true');
|
2012-10-08 04:16:44 +00:00
|
|
|
}
|
|
|
|
//Audio control
|
|
|
|
|
|
|
|
audio = $('audio')[0];
|
|
|
|
|
|
|
|
|
|
|
|
audio.addEventListener('ended', function(){
|
|
|
|
console.log("Ended");
|
|
|
|
if(repeat()){
|
|
|
|
audio.play();
|
|
|
|
}
|
|
|
|
else{
|
|
|
|
playNext();
|
|
|
|
}
|
|
|
|
});
|
|
|
|
|
|
|
|
function playNext(){
|
|
|
|
var now = playlist().indexOf(current());
|
2012-10-08 06:26:37 +00:00
|
|
|
var len = playlist().length;
|
2012-10-08 04:16:44 +00:00
|
|
|
if(shuffle()){
|
2012-10-08 06:26:37 +00:00
|
|
|
var rand=(now+Math.floor(Math.random()*(len)+1))%len;
|
2012-10-08 04:16:44 +00:00
|
|
|
console.log("NOW: "+now+", NEXT:"+rand);
|
|
|
|
playSong(playlist()[rand]);
|
|
|
|
}
|
|
|
|
else{
|
|
|
|
var next = (now+1)%playlist().length;
|
|
|
|
console.log("NOW: "+now+", NEXT:"+next);
|
|
|
|
if(next>now || repeatAll()){
|
|
|
|
playSong(playlist()[next]);
|
|
|
|
}else{
|
|
|
|
stop();
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
};
|
|
|
|
|
|
|
|
function stop(){
|
|
|
|
audio.src = "";
|
|
|
|
audio.load();
|
|
|
|
current().isPlaying(false);
|
|
|
|
}
|
|
|
|
|
|
|
|
function pause(){
|
|
|
|
var id = current().id();
|
|
|
|
audio.pause();
|
|
|
|
current().isPlaying(false);
|
|
|
|
}
|
|
|
|
|
2012-10-08 06:26:37 +00:00
|
|
|
function resume(){
|
|
|
|
audio.play();
|
|
|
|
current().isPlaying(true);
|
|
|
|
}
|
|
|
|
|
2012-10-08 04:16:44 +00:00
|
|
|
function playSong(song){
|
|
|
|
var id = song.id();
|
2012-10-08 06:26:37 +00:00
|
|
|
console.log("Going to play "+song.title());
|
2012-10-08 04:16:44 +00:00
|
|
|
if(typeof current() != 'undefined'){
|
|
|
|
current().isPlaying(false);
|
|
|
|
}
|
2012-10-08 06:26:37 +00:00
|
|
|
//if(audio.src.indexOf(id)==-1){ // Check if already playing. Buggy when there are duplicates
|
|
|
|
audio.src = 'play?id='+id;
|
|
|
|
audio.load();
|
|
|
|
current(song)
|
|
|
|
if (playlist().indexOf(song)>=0) {
|
|
|
|
playHistory.push(current());
|
|
|
|
}else{
|
|
|
|
console.log("Not adding to playlist>"+playlist().indexOf(song));
|
|
|
|
}
|
|
|
|
//}
|
2012-10-08 04:16:44 +00:00
|
|
|
audio.play();
|
|
|
|
current().isPlaying(true);
|
|
|
|
}
|
|
|
|
|
|
|
|
function playPrevious(){
|
|
|
|
if(audio.currentTime < 3.0 && playHistory.length > 0){
|
|
|
|
// console.log("History:");
|
|
|
|
// console.log(playHistory);
|
|
|
|
playSong(playHistory.pop());
|
|
|
|
}else{
|
|
|
|
console.log("Tócala otra vez, Sam");
|
|
|
|
audio.currentTime = 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
function addSelected(song){
|
2012-10-11 20:49:31 +00:00
|
|
|
playlist.push(new Song(song.id(),song.group(),song.title(),song.quality()));
|
2012-10-08 04:16:44 +00:00
|
|
|
saveState();
|
|
|
|
}
|
|
|
|
|
|
|
|
function removeSong(song) {
|
|
|
|
if(song.isPlaying()){
|
|
|
|
playNext();
|
|
|
|
}
|
|
|
|
playlist.remove(song);
|
2012-10-08 06:26:37 +00:00
|
|
|
saveState();
|
2012-10-08 04:16:44 +00:00
|
|
|
}
|
|
|
|
|
2012-10-08 01:09:30 +00:00
|
|
|
|
|
|
|
$(function() {
|
|
|
|
$( ".sortable" ).sortable();
|
|
|
|
$( ".sortable" ).disableSelection();
|
|
|
|
$( "#accordion" ).accordion({fillSpace:true});
|
2012-10-07 12:35:56 +00:00
|
|
|
});
|
2012-10-08 01:09:30 +00:00
|
|
|
|
|
|
|
$('.accordion .head').click(function() {
|
|
|
|
$(this).next().toggle();
|
|
|
|
return false;
|
|
|
|
}).next().hide();
|
|
|
|
|
2012-10-11 20:49:31 +00:00
|
|
|
function Song(id, group, title, quality) {
|
2012-10-08 01:09:30 +00:00
|
|
|
var self = this;
|
|
|
|
self.id = ko.observable(id);
|
|
|
|
self.group = ko.observable(group);
|
|
|
|
self.title = ko.observable(title);
|
2012-10-11 20:49:31 +00:00
|
|
|
self.quality = ko.observable(quality);
|
2012-10-08 01:09:30 +00:00
|
|
|
self.isPlaying = ko.observable(false);
|
|
|
|
|
|
|
|
// Computed data
|
|
|
|
self.formattedName = ko.computed(function() {
|
2012-10-08 04:16:44 +00:00
|
|
|
var index = playlist().indexOf(self);
|
|
|
|
index = index>=0?index+"/"+playlist().length+" ":"";
|
2012-10-11 20:49:31 +00:00
|
|
|
return index+self.group() +" - "+self.title()+" ["+self.quality()+"]";
|
2012-10-08 01:09:30 +00:00
|
|
|
}, this);
|
2012-10-08 04:16:44 +00:00
|
|
|
|
2012-10-12 20:38:58 +00:00
|
|
|
self.downloadSong = function(){
|
|
|
|
window.open("/play?id="+self.id(), self.formattedName());
|
|
|
|
}
|
2012-10-07 12:35:56 +00:00
|
|
|
}
|
2012-10-08 01:09:30 +00:00
|
|
|
|
|
|
|
|
|
|
|
function PlaylistViewModel() {
|
|
|
|
// Data
|
|
|
|
var self = this;
|
|
|
|
|
|
|
|
self.results = ko.observableArray([]);
|
2012-10-13 14:51:17 +00:00
|
|
|
self.hasMoreSearch = ko.observable(true);
|
|
|
|
self.currentPage = ko.observable(0);
|
2012-10-08 01:09:30 +00:00
|
|
|
self.queryString = ko.observable();
|
|
|
|
self.shuffle = shuffle;
|
2012-10-08 04:16:44 +00:00
|
|
|
self.current = current;
|
2012-10-08 01:09:30 +00:00
|
|
|
self.repeat = repeat;
|
|
|
|
self.repeatAll = repeatAll;
|
|
|
|
self.playlist = playlist;
|
|
|
|
|
|
|
|
self.trackNumber = ko.computed(function(){
|
|
|
|
return this.playlist.indexOf(this.current())+"/"+this.playlist().length;
|
|
|
|
},this);
|
|
|
|
|
2012-10-08 06:26:37 +00:00
|
|
|
self.isPlaying = ko.computed(function(){
|
|
|
|
return (typeof current() != 'undefined') && current().isPlaying();
|
|
|
|
},this);
|
|
|
|
|
2012-10-08 01:09:30 +00:00
|
|
|
self.addSong = function(song){
|
|
|
|
console.log("Adding song");
|
|
|
|
addSelected(song);
|
2012-10-07 12:35:56 +00:00
|
|
|
}
|
2012-10-08 01:09:30 +00:00
|
|
|
// Operations
|
|
|
|
|
2012-10-13 14:51:17 +00:00
|
|
|
self.search = function(page) {
|
|
|
|
$.getJSON(encodeURI('/search?id='+self.queryString()+'&p='+page), function(allData) {
|
2012-10-11 20:49:31 +00:00
|
|
|
var results = $.map(allData, function(item) { console.log(JSON.stringify(item)); return new Song(item.id,item.group,item.title,item.quality) });
|
2012-10-13 14:51:17 +00:00
|
|
|
console.log("Results:");
|
|
|
|
console.log(results);
|
|
|
|
if(results.length < 10){
|
|
|
|
console.log("No more results");
|
|
|
|
self.hasMoreSearch(false);
|
|
|
|
}else{
|
|
|
|
self.hasMoreSearch(true);
|
|
|
|
}
|
|
|
|
if(results.length > 0){
|
|
|
|
for (var i = 0; i < results.length; i += 1) {
|
|
|
|
self.results.push(results[i])
|
|
|
|
}
|
|
|
|
self.currentPage(page);
|
|
|
|
}
|
2012-10-08 01:09:30 +00:00
|
|
|
});
|
2012-10-08 06:26:37 +00:00
|
|
|
|
2012-10-13 14:51:17 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
self.getResults = function() {
|
|
|
|
self.results.removeAll();
|
|
|
|
self.search(1);
|
2012-10-08 01:09:30 +00:00
|
|
|
}
|
2012-10-08 06:26:37 +00:00
|
|
|
|
2012-10-13 14:51:17 +00:00
|
|
|
self.searchMore = function(){
|
|
|
|
if(self.hasMoreSearch()){
|
|
|
|
self.search(self.currentPage()+1);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2012-10-08 06:26:37 +00:00
|
|
|
if(typeof(LocalStorage)!=="undefined"){
|
|
|
|
alert("Bad luck!");
|
|
|
|
|
|
|
|
}else{
|
|
|
|
loadState();
|
|
|
|
|
|
|
|
$(window).unload(function(){
|
|
|
|
saveState();
|
|
|
|
});
|
|
|
|
}
|
|
|
|
|
2012-10-08 01:09:30 +00:00
|
|
|
|
|
|
|
self.playNext = playNext;
|
2012-10-08 04:16:44 +00:00
|
|
|
self.playPrevious = playPrevious;
|
2012-10-08 06:26:37 +00:00
|
|
|
self.resume = resume;
|
2012-10-08 04:16:44 +00:00
|
|
|
self.playSong = playSong;
|
2012-10-08 06:26:37 +00:00
|
|
|
self.pause = pause;
|
|
|
|
self.stop = stop;
|
2012-10-08 04:16:44 +00:00
|
|
|
self.removeSong = removeSong;
|
2012-10-07 12:35:56 +00:00
|
|
|
}
|
|
|
|
|
2012-10-08 01:09:30 +00:00
|
|
|
|
2012-10-08 04:16:44 +00:00
|
|
|
ko.applyBindings(new PlaylistViewModel());
|
2012-10-07 12:35:56 +00:00
|
|
|
|
2012-10-08 01:09:30 +00:00
|
|
|
|
2012-10-08 04:16:44 +00:00
|
|
|
});
|
2012-10-08 01:09:30 +00:00
|
|
|
|
|
|
|
|