balkian/go5ears
1
0
Fork 0
mirror of https://github.com/balkian/go5ears.git synced 2024-09-21 03:11:43 +00:00
Code Issues Releases Wiki Activity

Working playlist and persistence.

Browse Source
This commit is contained in:
J.Fernando Sánchez 2012-10-08 06:16:44 +02:00
parent 27388ebc09
commit 4ab5485cae
3 changed files with 183 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
css/main.css
View File

@ -17,5 +17,23 @@ html,body {
#headerPage { #headerPage {
position:relative; position:relative;
min-height:10%; min-height:10%;
width: 100%;
}
#controls {
width: 50%;
display: inline;
margin-left:auto;
margin-right: auto;
} }
.list-name{
font-size:small;
}
#audio {
width:100%;
}
.deletesong{
float:right;
right:2em;
}

227
js/app.js
View File

@ -3,8 +3,115 @@ $(document).ready(function(){
var tracks; var tracks;
var shuffle = ko.observable(false); var shuffle = ko.observable(false);
var repeat = ko.observable(false); var repeat = ko.observable(false);
var current = ko.observable();
var repeatAll = ko.observable(false); var repeatAll = ko.observable(false);
var playlist = ko.observableArray(); var playlist = ko.observableArray();
var playHistory = [];
function saveState(){
var cleanList = [];
var pl = playlist();
for (var i = 0; i < pl.length; i += 1) {
var obj = {id: pl[i].id(), group: pl[i].group(),title: pl[i].title()};
cleanList.push(obj);
}
console.log(JSON.stringify(cleanList));
localStorage.playlist = JSON.stringify(cleanList);
console.log("prueba");
}
//Audio control
audio = $('audio')[0];
audio.addEventListener('ended', function(){
console.log("Ended");
if(repeat()){
audio.play();
}
else{
playNext();
}
});
function playNext(){
var now = playlist().indexOf(current());
if(shuffle()){
var rand=Math.floor(Math.random()*playlist().length);
console.log("NOW: "+now+", NEXT:"+rand);
playSong(playlist()[rand]);
}
else{
var next = (now+1)%playlist().length;
console.log("NOW: "+now+", NEXT:"+next);
if(next>now || repeatAll()){
playSong(playlist()[next]);
}else{
stop();
}
}
};
function stop(){
audio.src = "";
audio.load();
current().isPlaying(false);
}
function pause(){
var id = current().id();
audio.pause();
current().isPlaying(false);
}
function playSong(song){
var id = song.id();
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");
}
}
audio.play();
current().isPlaying(true);
}
function playPrevious(){
if(audio.currentTime < 3.0 && playHistory.length > 0){
// console.log("History:");
// console.log(playHistory);
playSong(playHistory.pop());
}else{
console.log("Tócala otra vez, Sam");
audio.currentTime = 0;
}
}
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) {
if(song.isPlaying()){
playNext();
}
playlist.remove(song);
}
$(function() { $(function() {
$( ".sortable" ).sortable(); $( ".sortable" ).sortable();
@ -17,38 +124,21 @@ $(document).ready(function(){
return false; return false;
}).next().hide(); }).next().hide();
var champions = { id:"4b9ed95",
title:"We are the champions",
group:"Queen"};
var libertine = { id:"fe7e4f9",
title:"Libertine",
group:"Kate Ryan"};
var playlist = ko.observableArray();
function Song(id, group, title) { function Song(id, group, title) {
var self = this; var self = this;
self.id = ko.observable(id); self.id = ko.observable(id);
self.group = ko.observable(group); self.group = ko.observable(group);
self.title = ko.observable(title); self.title = ko.observable(title);
self.isPlaying = ko.observable(false); self.isPlaying = ko.observable(false);
// Computed data // Computed data
self.formattedName = ko.computed(function() { self.formattedName = ko.computed(function() {
console.log("Recomputed"); var index = playlist().indexOf(self);
return playlist().indexOf(self)+"/"+playlist().length+" "+self.group() +" - "+self.title(); index = index>=0?index+"/"+playlist().length+" ":"";
return index+self.group() +" - "+self.title();
}, this); }, this);
self.playSong = function(){
console.log("Playing song");
playSelected(self);
}
self.pauseSong = function(){
console.log("Pausing song");
pauseSelected(self);
}
} }
@ -59,13 +149,12 @@ $(document).ready(function(){
self.results = ko.observableArray([]); self.results = ko.observableArray([]);
self.queryString = ko.observable(); self.queryString = ko.observable();
self.shuffle = shuffle; self.shuffle = shuffle;
self.current = ko.observable(); self.current = current;
self.repeat = repeat; self.repeat = repeat;
self.repeatAll = repeatAll; self.repeatAll = repeatAll;
self.playlist = playlist; self.playlist = playlist;
self.trackNumber = ko.computed(function(){ self.trackNumber = ko.computed(function(){
console.log("Recomputed");
return this.playlist.indexOf(this.current())+"/"+this.playlist().length; return this.playlist.indexOf(this.current())+"/"+this.playlist().length;
},this); },this);
@ -76,86 +165,54 @@ $(document).ready(function(){
// Operations // Operations
self.getResults = function(form) { self.getResults = function(form) {
// console.log("Form:"+JSON.stringify(form)); $.getJSON(encodeURI('/search?id="'+self.queryString()+'"'), function(allData) {
$.getJSON("/search?id="+self.queryString(), function(allData) {
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);
}); });
} }
self.playNext = playNext; self.playNext = playNext;
self.playPrevious = playPrevious;
self.playSong = playSong;
self.pauseSong = pause;
self.removeSong = removeSong;
} }
playlist.push(new Song(champions.id,champions.group,champions.title));
playlist.push(new Song(libertine.id,libertine.group,libertine.title));
ko.applyBindings(new PlaylistViewModel()); if(typeof(LocalStorage)!=="undefined"){
alert("Bad luck!");
//Audio control }else{
if (localStorage.playlist) {
audio = $('audio')[0]; console.log("State recovered. Happy listening!");
var pl = JSON.parse(localStorage.playlist);
audio.addEventListener('ended', function(){ for (var i = 0; i < pl.length; i++){
if(repeatOne){ var obj = new Song(pl[i].id,pl[i].group,pl[i].title);
audio.play(); playlist.push(obj);
}
else{
playNext();
}
});
function playNext(){
var now = playlist().indexOf(current);
var next = (now+1)%playlist().length;
console.log("NOW: "+now+", NEXT:"+next);
if(shuffle()){
var rand=Math.floor(Math.random()*playlist().length);
playSelected(playlist()[rand]);
}
else{
if(next>now || repeatAll()){
playSelected(playlist()[next]);
}else{
stop();
} }
} }
}; if(playlist().length < 2){
console.log("No playlist found. Adding recommendation!");
var champions = { id:"4b9ed95",
title:"We are the champions",
group:"Queen"};
function stop(){ var libertine = { id:"fe7e4f9",
audio.src = ""; title:"Libertine",
audio.load(); group:"Kate Ryan"};
current.isPlaying(false); playlist.push(new Song(champions.id,champions.group,champions.title));
} playlist.push(new Song(libertine.id,libertine.group,libertine.title));
function pauseSelected(song){
var id = song.id();
audio.pause();
song.isPlaying(false);
}
function playSelected(song){
var id = song.id();
if(audio.src.indexOf(id)==-1){
audio.src = 'play?id='+id;
audio.load();
} }
// else{
// console.log("Not playing:"+audio.src); $(window).unload(function(){
// } saveState();
audio.play(); });
song.isPlaying(true);
current = song;
} }
function addSelected(song){ ko.applyBindings(new PlaylistViewModel());
playlist.push(new Song(song.id(),song.group(),song.title()));
}
}); });

48
public/index.html
View File

@ -12,25 +12,22 @@
</head> </head>
<body> <body>
<div id="headerPage"> <div id="headerPage">
<p>Go5ears. Because Flash simply sucks!</p> <div id="controls">
<p><audio controls="controls" preload="auto" tabindex="0" type="audio/mpeg">No funciona el tag html5</audio></p> <input type="checkbox" data-bind="checked: shuffle" /> Shuffle
</div> <input type="checkbox" data-bind="checked: repeatAll" /> RepeatAll
<div id="wrapper"> <input type="checkbox" data-bind="checked: repeat" /> RepeatOne
<div id="results"> <!-- <ul data-bind="foreach: playlist">
<h3>Playlist</h3>
<p><input type="checkbox" data-bind="checked: shuffle" /> Shuffle</p>
<p><input type="checkbox" data-bind="checked: repeatAll" /> RepeatAll</p>
<p><input type="checkbox" data-bind="checked: repeat" /> RepeatOne</p>
<div data-bind="text: trackNumber">:)</div>
<div data-bind="text: current">:D</div>
<a href="#" data-bind="click: playNext">Next!</a>
<ul data-bind="foreach: playlist">
<li data-bind="text: title"></li> <li data-bind="text: title"></li>
</ul> </ul>-->
</div> </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>
</div>
<div id="wrapper">
<div id="accordion" class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons"> <div id="accordion" class="ui-accordion ui-widget ui-helper-reset ui-accordion-icons">
<h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" role="tab" aria-expanded="true" aria-selected="true" tabindex="0"> <h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" role="tab" aria-expanded="true" aria-selected="true" tabindex="0">
<span class="ui-icon ui-icon-triangle-1-s"></span> <span class="ui-icon ui-icon-triangle-1-s"></span>
@ -40,14 +37,15 @@
<ul id="playlist" class="sortable" data-bind="sortable: playlist"> <ul id="playlist" class="sortable" data-bind="sortable: playlist">
<li class="ui-state-default" data-bind="sortableItem: { item: $data, parentList: playlist }"> <li class="ui-state-default" data-bind="sortableItem: { item: $data, parentList: playlist }">
<div class="list-controls"> <div class="list-controls">
<span class="ui-icon ui-icon-play" data-bind="click: playSong, visible: ! isPlaying()">Play</span> <span class="ui-icon ui-icon-play" data-bind="click: $root.playSong, visible: ! isPlaying()">Play</span>
<span class="ui-icon ui-icon-pause" data-bind="click: pauseSong, visible: isPlaying()">Play</span> <span class="ui-icon ui-icon-pause" data-bind="click: $root.pauseSong, visible: isPlaying()">Play</span>
<span class="ui-icon ui-icon-circle-plus" data-bind="click: $root.addSong">Add</span> <span class="ui-icon ui-icon-circle-plus" data-bind="click: $root.addSong">Add</span>
<span class="ui-icon ui-icon-arrowthickstop-1-s"></span> <span class="ui-icon ui-icon-arrowthickstop-1-s"></span>
</div> </div>
<div class="list-name" data-bind="text: formattedName()"> <span class="list-name" data-bind="text: formattedName()">
Name - Title Name - Title
</div> </span>
<span class="deletesong ui-icon ui-icon-trash" data-bind="click: $root.removeSong">Remove</span>
</li> </li>
</ul> </ul>
</div> <h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" role="tab" aria-expanded="true" aria-selected="true" tabindex="0"><span class="ui-icon ui-icon-triangle-1-s"></span> </div> <h3 class="ui-accordion-header ui-helper-reset ui-state-active ui-corner-top" role="tab" aria-expanded="true" aria-selected="true" tabindex="0"><span class="ui-icon ui-icon-triangle-1-s"></span>
@ -57,15 +55,15 @@
<form method="POST" action="#" data-bind="submit: getResults"> <form method="POST" action="#" data-bind="submit: getResults">
Search GoEar: <input type="search" name="goearsearch" data-bind="value: queryString"> Search GoEar: <input type="search" name="goearsearch" data-bind="value: queryString">
</form> </form>
<ul id="searchresults" class="sortable" data-bind="foreach: results"> <ul id="searchResults" class="sortable" data-bind="foreach: results">
<li class="ui-state-default"> <li class="ui-state-default">
<div class="list-controls"> <div class="list-controls">
<span class="ui-icon ui-icon-play" data-bind="click: playSong, visible: ! isPlaying()">Play</span> <span class="ui-icon ui-icon-play" data-bind="click: $root.playSong, visible: ! isPlaying()">Play</span>
<span class="ui-icon ui-icon-pause" data-bind="click: pauseSong, visible: isPlaying()">Play</span> <span class="ui-icon ui-icon-pause" data-bind="click: $root.pauseSong, visible: isPlaying()">Play</span>
<span class="ui-icon ui-icon-circle-plus" data-bind="click: $root.addSong">Add</span> <span class="ui-icon ui-icon-circle-plus" data-bind="click: $root.addSong">Add</span>
<span class="ui-icon ui-icon-arrowthickstop-1-s"></span> <span class="ui-icon ui-icon-arrowthickstop-1-s"></span>
</div> </div>
<div class="list-name" data-bind="text: formattedName(), click: playSong"> <div class="list-name" data-bind="text: formattedName()">
Name - Title Name - Title
</div> </div>
</li> </li>