diff --git a/css/main.css b/css/main.css index b7a19a2..5c702f1 100644 --- a/css/main.css +++ b/css/main.css @@ -17,5 +17,23 @@ html,body { #headerPage { position:relative; min-height:10%; + width: 100%; +} +#controls { + width: 50%; + display: inline; + margin-left:auto; + margin-right: auto; } +.list-name{ + font-size:small; +} +#audio { + width:100%; +} + +.deletesong{ + float:right; + right:2em; +} diff --git a/js/app.js b/js/app.js index badbb6b..4957fdb 100644 --- a/js/app.js +++ b/js/app.js @@ -3,8 +3,115 @@ $(document).ready(function(){ var tracks; var shuffle = ko.observable(false); var repeat = ko.observable(false); + var current = ko.observable(); var repeatAll = ko.observable(false); var playlist = ko.observableArray(); + var playHistory = []; + + + + function saveState(){ + var cleanList = []; + var pl = playlist(); + for (var i = 0; i < pl.length; i += 1) { + var obj = {id: pl[i].id(), group: pl[i].group(),title: pl[i].title()}; + cleanList.push(obj); + } + console.log(JSON.stringify(cleanList)); + localStorage.playlist = JSON.stringify(cleanList); + console.log("prueba"); + } + //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()); + + if(shuffle()){ + var rand=Math.floor(Math.random()*playlist().length); + 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); + } + + function playSong(song){ + var id = song.id(); + if(typeof current() != 'undefined'){ + current().isPlaying(false); + } + if(audio.src.indexOf(id)==-1){ + audio.src = 'play?id='+id; + audio.load(); + current(song) + if (playlist().indexOf(song)>=0) { + playHistory.push(current()); + console.log("Not adding to playlist"); + } + } + 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){ + playlist.push(new Song(song.id(),song.group(),song.title())); + saveState(); + console.log("prueba"); + console.log(localStorage.playlist); + console.log(playlist()); + } + + function removeSong(song) { + if(song.isPlaying()){ + playNext(); + } + playlist.remove(song); + } + $(function() { $( ".sortable" ).sortable(); @@ -17,38 +124,21 @@ $(document).ready(function(){ return false; }).next().hide(); - var champions = { id:"4b9ed95", - title:"We are the champions", - group:"Queen"}; - - var libertine = { id:"fe7e4f9", - title:"Libertine", - group:"Kate Ryan"}; - - var playlist = ko.observableArray(); function Song(id, group, title) { var self = this; self.id = ko.observable(id); self.group = ko.observable(group); self.title = ko.observable(title); - + self.isPlaying = ko.observable(false); // Computed data self.formattedName = ko.computed(function() { - console.log("Recomputed"); - return playlist().indexOf(self)+"/"+playlist().length+" "+self.group() +" - "+self.title(); + var index = playlist().indexOf(self); + index = index>=0?index+"/"+playlist().length+" ":""; + return index+self.group() +" - "+self.title(); }, this); - - self.playSong = function(){ - console.log("Playing song"); - playSelected(self); - } - - self.pauseSong = function(){ - console.log("Pausing song"); - pauseSelected(self); - } + } @@ -59,13 +149,12 @@ $(document).ready(function(){ self.results = ko.observableArray([]); self.queryString = ko.observable(); self.shuffle = shuffle; - self.current = ko.observable(); + self.current = current; self.repeat = repeat; self.repeatAll = repeatAll; self.playlist = playlist; self.trackNumber = ko.computed(function(){ - console.log("Recomputed"); return this.playlist.indexOf(this.current())+"/"+this.playlist().length; },this); @@ -76,86 +165,54 @@ $(document).ready(function(){ // Operations self.getResults = function(form) { - // console.log("Form:"+JSON.stringify(form)); - $.getJSON("/search?id="+self.queryString(), function(allData) { + $.getJSON(encodeURI('/search?id="'+self.queryString()+'"'), function(allData) { var results = $.map(allData, function(item) { console.log(JSON.stringify(item)); return new Song(item.id,item.group,item.title) }); self.results(results); }); } self.playNext = playNext; - + self.playPrevious = playPrevious; + self.playSong = playSong; + self.pauseSong = pause; + self.removeSong = removeSong; } - playlist.push(new Song(champions.id,champions.group,champions.title)); - playlist.push(new Song(libertine.id,libertine.group,libertine.title)); - ko.applyBindings(new PlaylistViewModel()); + if(typeof(LocalStorage)!=="undefined"){ + alert("Bad luck!"); - //Audio control - - audio = $('audio')[0]; - - audio.addEventListener('ended', function(){ - if(repeatOne){ - audio.play(); - } - else{ - playNext(); - } - }); - - function playNext(){ - var now = playlist().indexOf(current); - var next = (now+1)%playlist().length; - - console.log("NOW: "+now+", NEXT:"+next); - if(shuffle()){ - var rand=Math.floor(Math.random()*playlist().length); - playSelected(playlist()[rand]); - } - else{ - if(next>now || repeatAll()){ - playSelected(playlist()[next]); - }else{ - stop(); + }else{ + if (localStorage.playlist) { + console.log("State recovered. Happy listening!"); + var pl = JSON.parse(localStorage.playlist); + for (var i = 0; i < pl.length; i++){ + var obj = new Song(pl[i].id,pl[i].group,pl[i].title); + playlist.push(obj); } } - }; + if(playlist().length < 2){ + console.log("No playlist found. Adding recommendation!"); + var champions = { id:"4b9ed95", + title:"We are the champions", + group:"Queen"}; - function stop(){ - audio.src = ""; - audio.load(); - current.isPlaying(false); - } - - function pauseSelected(song){ - var id = song.id(); - audio.pause(); - song.isPlaying(false); - } - - function playSelected(song){ - var id = song.id(); - if(audio.src.indexOf(id)==-1){ - audio.src = 'play?id='+id; - audio.load(); + var libertine = { id:"fe7e4f9", + title:"Libertine", + group:"Kate Ryan"}; + playlist.push(new Song(champions.id,champions.group,champions.title)); + playlist.push(new Song(libertine.id,libertine.group,libertine.title)); } - // else{ - // console.log("Not playing:"+audio.src); - // } - audio.play(); - song.isPlaying(true); - current = song; + + $(window).unload(function(){ + saveState(); + }); } - function addSelected(song){ - playlist.push(new Song(song.id(),song.group(),song.title())); - } + ko.applyBindings(new PlaylistViewModel()); }); - diff --git a/public/index.html b/public/index.html index 3ee5aae..62d9000 100644 --- a/public/index.html +++ b/public/index.html @@ -12,25 +12,22 @@
-

Go5ears. Because Flash simply sucks!

-

-
-
-
-

Playlist

-

Shuffle

-

RepeatAll

-

RepeatOne

-
:)
-
:D
- Next! -
+ +