1
0
mirror of https://github.com/balkian/go5ears.git synced 2024-11-13 01:32:28 +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 {
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%;
}

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

View File

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

View File

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