mirror of
https://github.com/balkian/go5ears.git
synced 2024-11-21 21:02:29 +00:00
Working playlist and persistence.
This commit is contained in:
J.Fernando Sánchez
parent
27388ebc09
commit
4ab5485cae
18
css/main.css
18
css/main.css
@ -17,5 +17,23 @@ html,body {
|
||||
#headerPage {
|
||||
position:relative;
|
||||
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;
|
||||
}
|
||||
|
||||
233
js/app.js
233
js/app.js
@ -3,8 +3,115 @@ $(document).ready(function(){
|
||||
var tracks;
|
||||
var shuffle = ko.observable(false);
|
||||
var repeat = ko.observable(false);
|
||||
var current = ko.observable();
|
||||
var repeatAll = ko.observable(false);
|
||||
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() {
|
||||
$( ".sortable" ).sortable();
|
||||
@ -17,15 +124,6 @@ $(document).ready(function(){
|
||||
return false;
|
||||
}).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) {
|
||||
var self = this;
|
||||
self.id = ko.observable(id);
|
||||
@ -36,19 +134,11 @@ $(document).ready(function(){
|
||||
|
||||
// Computed data
|
||||
self.formattedName = ko.computed(function() {
|
||||
console.log("Recomputed");
|
||||
return playlist().indexOf(self)+"/"+playlist().length+" "+self.group() +" - "+self.title();
|
||||
var index = playlist().indexOf(self);
|
||||
index = index>=0?index+"/"+playlist().length+" ":"";
|
||||
return index+self.group() +" - "+self.title();
|
||||
}, 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.queryString = ko.observable();
|
||||
self.shuffle = shuffle;
|
||||
self.current = ko.observable();
|
||||
self.current = current;
|
||||
self.repeat = repeat;
|
||||
self.repeatAll = repeatAll;
|
||||
self.playlist = playlist;
|
||||
|
||||
self.trackNumber = ko.computed(function(){
|
||||
console.log("Recomputed");
|
||||
return this.playlist.indexOf(this.current())+"/"+this.playlist().length;
|
||||
},this);
|
||||
|
||||
@ -76,86 +165,54 @@ $(document).ready(function(){
|
||||
// Operations
|
||||
|
||||
self.getResults = function(form) {
|
||||
// console.log("Form:"+JSON.stringify(form));
|
||||
$.getJSON("/search?id="+self.queryString(), function(allData) {
|
||||
$.getJSON(encodeURI('/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) });
|
||||
self.results(results);
|
||||
});
|
||||
}
|
||||
|
||||
self.playNext = playNext;
|
||||
|
||||
self.playPrevious = playPrevious;
|
||||
self.playSong = playSong;
|
||||
self.pauseSong = pause;
|
||||
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());
|
||||
|
||||
//Audio control
|
||||
|
||||
audio = $('audio')[0];
|
||||
|
||||
audio.addEventListener('ended', function(){
|
||||
if(repeatOne){
|
||||
audio.play();
|
||||
}
|
||||
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();
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
function stop(){
|
||||
audio.src = "";
|
||||
audio.load();
|
||||
current.isPlaying(false);
|
||||
}
|
||||
|
||||
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);
|
||||
// }
|
||||
audio.play();
|
||||
song.isPlaying(true);
|
||||
current = song;
|
||||
}
|
||||
|
||||
function addSelected(song){
|
||||
playlist.push(new Song(song.id(),song.group(),song.title()));
|
||||
}
|
||||
|
||||
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
@ -12,25 +12,22 @@
|
||||
</head>
|
||||
<body>
|
||||
<div id="headerPage">
|
||||
<p>Go5ears. Because Flash simply sucks!</p>
|
||||
<p><audio controls="controls" preload="auto" tabindex="0" type="audio/mpeg">No funciona el tag html5</audio></p>
|
||||
</div>
|
||||
<div id="wrapper">
|
||||
<div id="results">
|
||||
<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">
|
||||
<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>
|
||||
</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>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div id="wrapper">
|
||||
<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">
|
||||
<span class="ui-icon ui-icon-triangle-1-s"></span>
|
||||
@ -40,14 +37,15 @@
|
||||
<ul id="playlist" class="sortable" data-bind="sortable: playlist">
|
||||
<li class="ui-state-default" data-bind="sortableItem: { item: $data, parentList: playlist }">
|
||||
<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-pause" data-bind="click: pauseSong, 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: $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-arrowthickstop-1-s"></span>
|
||||
</div>
|
||||
<div class="list-name" data-bind="text: formattedName()">
|
||||
<span class="list-name" data-bind="text: formattedName()">
|
||||
Name - Title
|
||||
</div>
|
||||
</span>
|
||||
<span class="deletesong ui-icon ui-icon-trash" data-bind="click: $root.removeSong">Remove</span>
|
||||
</li>
|
||||
</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>
|
||||
@ -57,15 +55,15 @@
|
||||
<form method="POST" action="#" data-bind="submit: getResults">
|
||||
Search GoEar: <input type="search" name="goearsearch" data-bind="value: queryString">
|
||||
</form>
|
||||
<ul id="searchresults" class="sortable" data-bind="foreach: results">
|
||||
<ul id="searchResults" class="sortable" data-bind="foreach: results">
|
||||
<li class="ui-state-default">
|
||||
<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-pause" data-bind="click: pauseSong, 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: $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-arrowthickstop-1-s"></span>
|
||||
</div>
|
||||
<div class="list-name" data-bind="text: formattedName(), click: playSong">
|
||||
<div class="list-name" data-bind="text: formattedName()">
|
||||
Name - Title
|
||||
</div>
|
||||
</li>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user