1
0
mirror of https://github.com/balkian/go5ears.git synced 2024-11-14 18:12:29 +00:00

Improved Shuffling, better UI

This commit is contained in:
J.Fernando Sánchez 2012-10-08 08:26:37 +02:00
parent 4ab5485cae
commit 43e2f072bb
14 changed files with 129 additions and 65 deletions

View File

@ -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

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

BIN
img/infinity.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.6 KiB

BIN
img/left.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
img/pause.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
img/play.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.5 KiB

BIN
img/right.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

BIN
img/shuffle.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.7 KiB

BIN
img/skull.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

BIN
img/spider.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.1 KiB

BIN
img/stop.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

124
js/app.js
View File

@ -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());

View File

@ -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");

View File

@ -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>