Improved Shuffling, better UI
42
css/main.css
@ -1,5 +1,10 @@
|
|||||||
html,body {
|
html,body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
background-color: #111;
|
||||||
|
color: #666;
|
||||||
|
background-position: top;
|
||||||
|
background-image:url("../img/chem.png");
|
||||||
|
background-repeat: repeat-x;
|
||||||
}
|
}
|
||||||
* {
|
* {
|
||||||
margin:0;
|
margin:0;
|
||||||
@ -11,20 +16,26 @@ html,body {
|
|||||||
#wrapper {
|
#wrapper {
|
||||||
position:relative;
|
position:relative;
|
||||||
height: auto !important;
|
height: auto !important;
|
||||||
min-height: 90%;
|
min-height: 85%;
|
||||||
margin: 0 auto 0;
|
margin: 0 auto 0;
|
||||||
}
|
}
|
||||||
#headerPage {
|
#headerPage {
|
||||||
position:relative;
|
position:relative;
|
||||||
min-height:10%;
|
min-height:15%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
#controls {
|
.controls ul li {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
display: inline;
|
display: inline;
|
||||||
margin-left:auto;
|
margin-left:auto;
|
||||||
margin-right: auto;
|
margin-right: auto;
|
||||||
}
|
}
|
||||||
|
.controls ul{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style-type: none;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
.list-name{
|
.list-name{
|
||||||
font-size:small;
|
font-size:small;
|
||||||
@ -37,3 +48,28 @@ html,body {
|
|||||||
float:right;
|
float:right;
|
||||||
right:2em;
|
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%;
|
||||||
|
|
||||||
|
}
|
||||||
|
BIN
img/chem.png
Normal file
After Width: | Height: | Size: 5.2 KiB |
BIN
img/infinity.png
Normal file
After Width: | Height: | Size: 5.6 KiB |
BIN
img/left.png
Normal file
After Width: | Height: | Size: 4.9 KiB |
BIN
img/pause.png
Normal file
After Width: | Height: | Size: 5.3 KiB |
BIN
img/play.png
Normal file
After Width: | Height: | Size: 5.5 KiB |
BIN
img/right.png
Normal file
After Width: | Height: | Size: 4.9 KiB |
BIN
img/shuffle.png
Normal file
After Width: | Height: | Size: 5.7 KiB |
BIN
img/skull.png
Normal file
After Width: | Height: | Size: 6.8 KiB |
BIN
img/spider.png
Normal file
After Width: | Height: | Size: 9.1 KiB |
BIN
img/stop.png
Normal file
After Width: | Height: | Size: 5.2 KiB |
124
js/app.js
@ -1,10 +1,10 @@
|
|||||||
$(document).ready(function(){
|
$(document).ready(function(){
|
||||||
var audio;
|
var audio;
|
||||||
var tracks;
|
var tracks;
|
||||||
var shuffle = ko.observable(false);
|
var shuffle = ko.observable();
|
||||||
var repeat = ko.observable(false);
|
var repeat = ko.observable();
|
||||||
var current = ko.observable();
|
var current = ko.observable();
|
||||||
var repeatAll = ko.observable(false);
|
var repeatAll = ko.observable();
|
||||||
var playlist = ko.observableArray();
|
var playlist = ko.observableArray();
|
||||||
var playHistory = [];
|
var playHistory = [];
|
||||||
|
|
||||||
@ -19,7 +19,38 @@ $(document).ready(function(){
|
|||||||
}
|
}
|
||||||
console.log(JSON.stringify(cleanList));
|
console.log(JSON.stringify(cleanList));
|
||||||
localStorage.playlist = 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
|
//Audio control
|
||||||
|
|
||||||
@ -38,9 +69,9 @@ $(document).ready(function(){
|
|||||||
|
|
||||||
function playNext(){
|
function playNext(){
|
||||||
var now = playlist().indexOf(current());
|
var now = playlist().indexOf(current());
|
||||||
|
var len = playlist().length;
|
||||||
if(shuffle()){
|
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);
|
console.log("NOW: "+now+", NEXT:"+rand);
|
||||||
playSong(playlist()[rand]);
|
playSong(playlist()[rand]);
|
||||||
}
|
}
|
||||||
@ -68,20 +99,27 @@ $(document).ready(function(){
|
|||||||
current().isPlaying(false);
|
current().isPlaying(false);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function resume(){
|
||||||
|
audio.play();
|
||||||
|
current().isPlaying(true);
|
||||||
|
}
|
||||||
|
|
||||||
function playSong(song){
|
function playSong(song){
|
||||||
var id = song.id();
|
var id = song.id();
|
||||||
|
console.log("Going to play "+song.title());
|
||||||
if(typeof current() != 'undefined'){
|
if(typeof current() != 'undefined'){
|
||||||
current().isPlaying(false);
|
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.src = 'play?id='+id;
|
||||||
audio.load();
|
audio.load();
|
||||||
current(song)
|
current(song)
|
||||||
if (playlist().indexOf(song)>=0) {
|
if (playlist().indexOf(song)>=0) {
|
||||||
playHistory.push(current());
|
playHistory.push(current());
|
||||||
console.log("Not adding to playlist");
|
}else{
|
||||||
}
|
console.log("Not adding to playlist>"+playlist().indexOf(song));
|
||||||
}
|
}
|
||||||
|
//}
|
||||||
audio.play();
|
audio.play();
|
||||||
current().isPlaying(true);
|
current().isPlaying(true);
|
||||||
}
|
}
|
||||||
@ -100,9 +138,6 @@ $(document).ready(function(){
|
|||||||
function addSelected(song){
|
function addSelected(song){
|
||||||
playlist.push(new Song(song.id(),song.group(),song.title()));
|
playlist.push(new Song(song.id(),song.group(),song.title()));
|
||||||
saveState();
|
saveState();
|
||||||
console.log("prueba");
|
|
||||||
console.log(localStorage.playlist);
|
|
||||||
console.log(playlist());
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function removeSong(song) {
|
function removeSong(song) {
|
||||||
@ -110,6 +145,7 @@ $(document).ready(function(){
|
|||||||
playNext();
|
playNext();
|
||||||
}
|
}
|
||||||
playlist.remove(song);
|
playlist.remove(song);
|
||||||
|
saveState();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -158,6 +194,10 @@ $(document).ready(function(){
|
|||||||
return this.playlist.indexOf(this.current())+"/"+this.playlist().length;
|
return this.playlist.indexOf(this.current())+"/"+this.playlist().length;
|
||||||
},this);
|
},this);
|
||||||
|
|
||||||
|
self.isPlaying = ko.computed(function(){
|
||||||
|
return (typeof current() != 'undefined') && current().isPlaying();
|
||||||
|
},this);
|
||||||
|
|
||||||
self.addSong = function(song){
|
self.addSong = function(song){
|
||||||
console.log("Adding song");
|
console.log("Adding song");
|
||||||
addSelected(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) });
|
var results = $.map(allData, function(item) { console.log(JSON.stringify(item)); return new Song(item.id,item.group,item.title) });
|
||||||
self.results(results);
|
self.results(results);
|
||||||
});
|
});
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if(typeof(LocalStorage)!=="undefined"){
|
||||||
|
alert("Bad luck!");
|
||||||
|
|
||||||
|
}else{
|
||||||
|
loadState();
|
||||||
|
|
||||||
|
$(window).unload(function(){
|
||||||
|
saveState();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
self.playNext = playNext;
|
self.playNext = playNext;
|
||||||
self.playPrevious = playPrevious;
|
self.playPrevious = playPrevious;
|
||||||
|
self.resume = resume;
|
||||||
self.playSong = playSong;
|
self.playSong = playSong;
|
||||||
self.pauseSong = pause;
|
self.pause = pause;
|
||||||
|
self.stop = stop;
|
||||||
self.removeSong = removeSong;
|
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());
|
ko.applyBindings(new PlaylistViewModel());
|
||||||
|
|
||||||
|
|
||||||
|
@ -15,7 +15,7 @@ var parser = new xml2js.Parser();
|
|||||||
app.use("/css", express.static(__dirname + '/css'));
|
app.use("/css", express.static(__dirname + '/css'));
|
||||||
app.use("/", express.static(__dirname + '/public'));
|
app.use("/", express.static(__dirname + '/public'));
|
||||||
app.use("/js", express.static(__dirname + '/js'));
|
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){
|
app.get('/', function(req,res){
|
||||||
res.sendfile("public/index.html");
|
res.sendfile("public/index.html");
|
||||||
|
@ -11,19 +11,23 @@
|
|||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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="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>
|
<audio id="audio" controls="controls" preload="auto" tabindex="0" type="audio/mpeg">No funciona el tag html5</audio>
|
||||||
<div>
|
<div class="controls">
|
||||||
<a href="#" data-bind="click: playPrevious">Prev!</a>
|
<ul>
|
||||||
<a href="#" data-bind="click: playNext">Next!</a>
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|