Improved Shuffling, better UI

css/main.css

@@ -1,5 +1,10 @@
 html,body {
     height: 100%;
+    background-color: #111;
+    color: #666;
+    background-position: top;
+    background-image:url("../img/chem.png");
+    background-repeat: repeat-x;
 }
 * {
     margin:0;
@@ -11,20 +16,26 @@ html,body {
 #wrapper { 
     position:relative;
     height: auto !important;
-    min-height: 90%;
+    min-height: 85%;
     margin: 0 auto 0;    
 }
 #headerPage {
     position:relative;
-    min-height:10%;
+    min-height:15%;
     width: 100%;
 }
-#controls {
+.controls ul li {
     width: 50%;
     display: inline;
     margin-left:auto;
     margin-right: auto;
 }
+.controls ul{
+margin: 0;
+padding: 0;
+list-style-type: none;
+text-align: center;
+}
 
 .list-name{
     font-size:small;
@@ -37,3 +48,28 @@ html,body {
     float:right;
     right:2em;
 }
+.control-button{
+    width:2em;
+}
+.ui-accordion {
+    font-size:small;
+}
+
+#spider {
+    position:absolute;
+    height:10%;
+    vertical-align: bottom;
+    text-align: center;
+    color: #FE0;
+}
+
+#spiderlogo{
+    height:60px;
+}
+
+#skull {
+    position:absolute;
+    right:0px;
+    height:10%;
+
+}

js/app.js

@@ -1,10 +1,10 @@
 $(document).ready(function(){
     var audio;
     var tracks;
-    var shuffle = ko.observable(false);
-    var repeat = ko.observable(false);
+    var shuffle = ko.observable();
+    var repeat = ko.observable();
     var current = ko.observable();
-    var repeatAll = ko.observable(false);
+    var repeatAll = ko.observable();
     var playlist = ko.observableArray();
     var playHistory = [];
 
@@ -19,7 +19,38 @@ $(document).ready(function(){
         }
         console.log(JSON.stringify(cleanList));
         localStorage.playlist = JSON.stringify(cleanList);
-        console.log("prueba");
+        localStorage.shuffle = shuffle() == true;
+        localStorage.repeat = repeat() == true;
+        localStorage.repeatAll = repeatAll() == true;
+        console.log("REPEATALL:"+localStorage.repeatAll);
+    }
+
+    function loadState(){
+        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));
+        }
+
+        shuffle(localStorage.shuffle == 'true');
+        repeat(localStorage.repeat == 'true');
+        repeatAll(localStorage.repeatAll == 'true');
     }
     //Audio control
 
@@ -38,9 +69,9 @@ $(document).ready(function(){
 
     function playNext(){
         var now = playlist().indexOf(current());
-
+        var len = playlist().length;
         if(shuffle()){
-            var rand=Math.floor(Math.random()*playlist().length);
+            var rand=(now+Math.floor(Math.random()*(len)+1))%len;
             console.log("NOW: "+now+", NEXT:"+rand);
             playSong(playlist()[rand]);
         }
@@ -68,20 +99,27 @@ $(document).ready(function(){
         current().isPlaying(false);
     }
 
+    function resume(){
+        audio.play();
+        current().isPlaying(true);
+    }
+
     function playSong(song){
         var id = song.id();
+        console.log("Going to play "+song.title());
         if(typeof current() != 'undefined'){
             current().isPlaying(false);
         }
-        if(audio.src.indexOf(id)==-1){
+        //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());
-                    console.log("Not adding to playlist");
-                }        
+            }else{
+                console.log("Not adding to playlist>"+playlist().indexOf(song));
             }
+        //}
         audio.play();
         current().isPlaying(true);
     }
@@ -100,9 +138,6 @@ $(document).ready(function(){
     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) {
@@ -110,6 +145,7 @@ $(document).ready(function(){
             playNext();
         }
         playlist.remove(song);
+        saveState();
     }
 
 
@@ -158,6 +194,10 @@ $(document).ready(function(){
             return this.playlist.indexOf(this.current())+"/"+this.playlist().length;
         },this);
 
+        self.isPlaying = ko.computed(function(){
+            return (typeof current() != 'undefined') && current().isPlaying();
+        },this);
+
         self.addSong = function(song){
             console.log("Adding song");
             addSelected(song);
@@ -169,47 +209,31 @@ $(document).ready(function(){
                 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));
-        }
+            loadState();
 
             $(window).unload(function(){
                 saveState();
             });
         }
 
+
+        self.playNext = playNext;
+        self.playPrevious = playPrevious;
+        self.resume = resume;
+        self.playSong = playSong;
+        self.pause = pause;
+        self.stop = stop;
+        self.removeSong = removeSong;
+    }
+
+
     ko.applyBindings(new PlaylistViewModel());
 
 

player.js

@@ -15,7 +15,7 @@ var parser = new xml2js.Parser();
 app.use("/css", express.static(__dirname + '/css'));
 app.use("/", express.static(__dirname + '/public'));
 app.use("/js", express.static(__dirname + '/js'));
-app.use("/skin", express.static(__dirname + '/skin'));
+app.use("/img", express.static(__dirname + '/img'));
 
 app.get('/', function(req,res){
     res.sendfile("public/index.html");

public/index.html

@@ -11,19 +11,23 @@
 
     </head>
     <body>
+        <div id="spider"><div><img id="spiderlogo" src="img/spider.png"/></div>BETA</div>
+        <img src="img/skull.png" id="skull"/>
         <div id="headerPage">
-             <div id="controls">
-                <input type="checkbox" data-bind="checked: shuffle" /> Shuffle
-                <input type="checkbox" data-bind="checked: repeatAll" /> RepeatAll
-                <input type="checkbox" data-bind="checked: repeat" /> RepeatOne
-     <!--           <ul data-bind="foreach: playlist">
-                    <li data-bind="text: title"></li>
-                </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 class="controls">
+                    <ul>
+                        <li data-bind="click: playPrevious"><img class="control-button" src="img/left.png"></li>
+                        <li data-bind="click: stop"><img class="control-button" src="img/stop.png"></li>
+                        <li data-bind="click: resume, visible: (! isPlaying())"><img class="control-button" src="img/play.png"></li>
+                        <li data-bind="click: pause,visible: isPlaying"><img class="control-button" src="img/pause.png"></li>
+                        <li data-bind="click: playNext"><img class="control-button" src="img/right.png"></li>
+                    </ul>
+                    <ul>
+                        <li><input type="checkbox" data-bind="checked: shuffle" /> Shuffle</li>
+                        <li><input type="checkbox" data-bind="checked: repeatAll" /> RepeatAll</li>
+                        <li><input type="checkbox" data-bind="checked: repeat" /> RepeatOne</li>
+                    </ul>
                 </div>
         </div>