diff --git a/css/main.css b/css/main.css
index 5c702f1..25aa9b4 100644
--- a/css/main.css
+++ b/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%;
+
+}
diff --git a/img/chem.png b/img/chem.png
new file mode 100644
index 0000000..18463bb
Binary files /dev/null and b/img/chem.png differ
diff --git a/img/infinity.png b/img/infinity.png
new file mode 100644
index 0000000..011f53c
Binary files /dev/null and b/img/infinity.png differ
diff --git a/img/left.png b/img/left.png
new file mode 100644
index 0000000..919a4e6
Binary files /dev/null and b/img/left.png differ
diff --git a/img/pause.png b/img/pause.png
new file mode 100644
index 0000000..2bbbfaa
Binary files /dev/null and b/img/pause.png differ
diff --git a/img/play.png b/img/play.png
new file mode 100644
index 0000000..d547eb9
Binary files /dev/null and b/img/play.png differ
diff --git a/img/right.png b/img/right.png
new file mode 100644
index 0000000..ef8cbdd
Binary files /dev/null and b/img/right.png differ
diff --git a/img/shuffle.png b/img/shuffle.png
new file mode 100644
index 0000000..d846c47
Binary files /dev/null and b/img/shuffle.png differ
diff --git a/img/skull.png b/img/skull.png
new file mode 100644
index 0000000..57c21b0
Binary files /dev/null and b/img/skull.png differ
diff --git a/img/spider.png b/img/spider.png
new file mode 100644
index 0000000..c7c1af2
Binary files /dev/null and b/img/spider.png differ
diff --git a/img/stop.png b/img/stop.png
new file mode 100644
index 0000000..3344fac
Binary files /dev/null and b/img/stop.png differ
diff --git a/js/app.js b/js/app.js
index 4957fdb..91d467c 100644
--- a/js/app.js
+++ b/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){
- audio.src = 'play?id='+id;
- audio.load();
- current(song)
- if (playlist().indexOf(song)>=0) {
- playHistory.push(current());
- console.log("Not adding to playlist");
- }
- }
+ //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));
+ }
+ //}
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);
});
+
}
+
+ if(typeof(LocalStorage)!=="undefined"){
+ alert("Bad luck!");
+
+ }else{
+ loadState();
+
+ $(window).unload(function(){
+ saveState();
+ });
+ }
+
self.playNext = playNext;
self.playPrevious = playPrevious;
+ self.resume = resume;
self.playSong = playSong;
- self.pauseSong = pause;
+ self.pause = pause;
+ self.stop = stop;
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());
diff --git a/player.js b/player.js
index 279b6d9..06d70ff 100644
--- a/player.js
+++ b/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");
diff --git a/public/index.html b/public/index.html
index 62d9000..f2f9182 100644
--- a/public/index.html
+++ b/public/index.html
@@ -11,19 +11,23 @@
+
+ 
