Working playlist and persistence.

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;
+}

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,15 +124,6 @@ $(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);
@@ -36,19 +134,11 @@ $(document).ready(function(){
 
         // Computed data
         self.formattedName = ko.computed(function() {
-            console.log("Recomputed");
+            var index = playlist().indexOf(self);
-            return playlist().indexOf(self)+"/"+playlist().length+" "+self.group() +" - "+self.title();   
+            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(encodeURI('/search?id="'+self.queryString()+'"'), function(allData) {
-            $.getJSON("/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;
     }
 
+
+    if(typeof(LocalStorage)!=="undefined"){
+        alert("Bad luck!");
+
+    }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"};
+
+            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));
+        }
+
+        $(window).unload(function(){
+            saveState();
+        });
+    }
 
     ko.applyBindings(new PlaylistViewModel());
 
-    //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();
-            }
-
-        }
-    };
-
-    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();
-        }
-    //     else{
-    //         console.log("Not playing:"+audio.src);
-    //     }
-        audio.play();
-        song.isPlaying(true);
-        current = song;
-    }
-
-    function addSelected(song){
-        playlist.push(new Song(song.id(),song.group(),song.title()));
-    }
-
 
 });
 
 
-

public/index.html

@@ -12,25 +12,22 @@
     </head>
     <body>
         <div id="headerPage">
-            <p>Go5ears. Because Flash simply sucks!</p>
+             <div id="controls">
-            <p><audio controls="controls" preload="auto" tabindex="0" type="audio/mpeg">No funciona el tag html5</audio></p>
+                <input type="checkbox" data-bind="checked: shuffle" /> Shuffle
-        </div>
+                <input type="checkbox" data-bind="checked: repeatAll" /> RepeatAll
-        <div id="wrapper">
+                <input type="checkbox" data-bind="checked: repeat" /> RepeatOne
-            <div id="results">
+     <!--           <ul data-bind="foreach: playlist">
-                <h3>Playlist</h3>
-                <p><input type="checkbox" data-bind="checked: shuffle" /> Shuffle</p>
-                <p><input type="checkbox" data-bind="checked: repeatAll" /> RepeatAll</p>
-                <p><input type="checkbox" data-bind="checked: repeat" /> RepeatOne</p>
-                <div data-bind="text: trackNumber">:)</div>
-                <div data-bind="text: current">:D</div>
-                <a href="#" data-bind="click: playNext">Next!</a>
-                <ul data-bind="foreach: playlist">
                     <li data-bind="text: title"></li>
-                </ul>
+                </ul>-->
+            </div>
+                <audio id="audio" controls="controls" preload="auto" tabindex="0" type="audio/mpeg">No funciona el tag html5</audio>
+                <div>
+                    <a href="#" data-bind="click: playPrevious">Prev!</a>
+                    <a href="#" data-bind="click: playNext">Next!</a>
+                </div>
         </div>
         
-            
+        <div id="wrapper">
-            
             <div id="accordion" class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons">
                 <h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" role="tab" aria-expanded="true" aria-selected="true" tabindex="0">
                     <span class="ui-icon ui-icon-triangle-1-s"></span>
@@ -40,14 +37,15 @@
                     <ul id="playlist" class="sortable" data-bind="sortable: playlist">
                         <li class="ui-state-default" data-bind="sortableItem: { item: $data, parentList: playlist }">
                             <div class="list-controls">
-                                <span class="ui-icon ui-icon-play" data-bind="click: playSong, visible: ! isPlaying()">Play</span>
+                                <span class="ui-icon ui-icon-play" data-bind="click: $root.playSong, visible: ! isPlaying()">Play</span>
-                                <span class="ui-icon ui-icon-pause" data-bind="click: pauseSong, visible: isPlaying()">Play</span>
+                                <span class="ui-icon ui-icon-pause" data-bind="click: $root.pauseSong, visible: isPlaying()">Play</span>
                                 <span class="ui-icon ui-icon-circle-plus" data-bind="click: $root.addSong">Add</span>
                                 <span class="ui-icon ui-icon-arrowthickstop-1-s"></span>
                             </div>
-                            <div class="list-name" data-bind="text: formattedName()">
+                            <span class="list-name" data-bind="text: formattedName()">
                                 Name - Title
-                            </div>
+                            </span>
+                            <span class="deletesong ui-icon ui-icon-trash" data-bind="click: $root.removeSong">Remove</span>
                         </li>
                     </ul>
                     </div>    <h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" role="tab" aria-expanded="true" aria-selected="true" tabindex="0"><span class="ui-icon ui-icon-triangle-1-s"></span>
@@ -57,15 +55,15 @@
                     <form method="POST" action="#" data-bind="submit: getResults">
                         Search GoEar: <input type="search" name="goearsearch" data-bind="value: queryString">
                     </form>
-                    <ul id="searchresults" class="sortable" data-bind="foreach: results">
+                    <ul id="searchResults" class="sortable" data-bind="foreach: results">
                         <li class="ui-state-default">
                             <div class="list-controls">
-                                <span class="ui-icon ui-icon-play" data-bind="click: playSong, visible: ! isPlaying()">Play</span>
+                                <span class="ui-icon ui-icon-play" data-bind="click: $root.playSong, visible: ! isPlaying()">Play</span>
-                                <span class="ui-icon ui-icon-pause" data-bind="click: pauseSong, visible: isPlaying()">Play</span>
+                                <span class="ui-icon ui-icon-pause" data-bind="click: $root.pauseSong, visible: isPlaying()">Play</span>
                                 <span class="ui-icon ui-icon-circle-plus" data-bind="click: $root.addSong">Add</span>
                                 <span class="ui-icon ui-icon-arrowthickstop-1-s"></span>
                             </div>
-                            <div class="list-name" data-bind="text: formattedName(), click: playSong">
+                            <div class="list-name" data-bind="text: formattedName()">
                                 Name - Title
                             </div>
                         </li>