mirror of
https://github.com/balkian/go5ears.git
synced 2024-12-22 09:28:13 +00:00
Added playlist persistence
This commit is contained in:
parent
898af95ceb
commit
517acf4bce
@ -16,12 +16,12 @@ html,body {
|
||||
#wrapper {
|
||||
position:relative;
|
||||
height: auto !important;
|
||||
min-height: 85%;
|
||||
min-height: 80%;
|
||||
margin: 0 auto 0;
|
||||
}
|
||||
#headerPage {
|
||||
position:relative;
|
||||
min-height:15%;
|
||||
min-height:20%;
|
||||
width: 100%;
|
||||
}
|
||||
.controls ul li {
|
||||
@ -71,5 +71,7 @@ text-align: center;
|
||||
position:absolute;
|
||||
right:0px;
|
||||
height:10%;
|
||||
|
||||
}
|
||||
.hidden{
|
||||
display:none;
|
||||
}
|
||||
|
68
js/app.js
68
js/app.js
@ -9,12 +9,53 @@ $(document).ready(function(){
|
||||
var playHistory = [];
|
||||
|
||||
|
||||
|
||||
function clearPlaylist(){
|
||||
playlist.removeAll();
|
||||
}
|
||||
|
||||
function savePlaylist(){
|
||||
saveState();
|
||||
uriContent = "data:application/json," + encodeURIComponent(localStorage.playlist);
|
||||
window.open(uriContent,"PlayList.json");
|
||||
}
|
||||
|
||||
|
||||
function loadPlaylist(evt){
|
||||
if (window.File && window.FileReader && window.FileList && window.Blob) {
|
||||
// Great success! All the File APIs are supported.
|
||||
var file = evt.target.files[0]; // FileList object
|
||||
console.log(evt.target.files);
|
||||
// files is a FileList of File objects. List some properties.
|
||||
var reader = new FileReader();
|
||||
reader.onload = function (event) {
|
||||
var content = event.target.result;
|
||||
console.log("Content:"+content);
|
||||
if (typeof content != 'undefined'){
|
||||
localStorage.playlist = content;
|
||||
loadState();
|
||||
}
|
||||
}
|
||||
reader.readAsText(file);
|
||||
|
||||
} else {
|
||||
// alert('The File APIs are not fully supported in this browser.');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
$("#clearPlaylist").click(clearPlaylist);
|
||||
$("#savePlaylist").click(savePlaylist);
|
||||
$("#file").change(loadPlaylist);
|
||||
$('#fileSelector').click(function(){
|
||||
$('#file').click();
|
||||
});
|
||||
|
||||
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()};
|
||||
var obj = {id: pl[i].id(), group: pl[i].group(),title: pl[i].title(), quality:pl[i].quality()};
|
||||
cleanList.push(obj);
|
||||
}
|
||||
console.log(JSON.stringify(cleanList));
|
||||
@ -27,25 +68,26 @@ $(document).ready(function(){
|
||||
|
||||
function loadState(){
|
||||
if (localStorage.playlist) {
|
||||
playlist.removeAll();
|
||||
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);
|
||||
var obj = new Song(pl[i].id,pl[i].group,pl[i].title,pl[i].quality);
|
||||
playlist.push(obj);
|
||||
}
|
||||
|
||||
}
|
||||
if(playlist().length < 2){
|
||||
if(playlist().length < 1){
|
||||
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));
|
||||
// var libertine = { id:"fe7e4f9",
|
||||
// title:"Libertine",
|
||||
// group:"Kate Ryan"};
|
||||
playlist.push(new Song(champions.id,champions.group,champions.title,'Example Song'));
|
||||
// playlist.push(new Song(libertine.id,libertine.group,libertine.title));
|
||||
}
|
||||
|
||||
shuffle(localStorage.shuffle == 'true');
|
||||
@ -136,7 +178,7 @@ $(document).ready(function(){
|
||||
}
|
||||
|
||||
function addSelected(song){
|
||||
playlist.push(new Song(song.id(),song.group(),song.title()));
|
||||
playlist.push(new Song(song.id(),song.group(),song.title(),song.quality()));
|
||||
saveState();
|
||||
}
|
||||
|
||||
@ -160,19 +202,19 @@ $(document).ready(function(){
|
||||
return false;
|
||||
}).next().hide();
|
||||
|
||||
function Song(id, group, title) {
|
||||
function Song(id, group, title, quality) {
|
||||
var self = this;
|
||||
self.id = ko.observable(id);
|
||||
self.group = ko.observable(group);
|
||||
self.title = ko.observable(title);
|
||||
|
||||
self.quality = ko.observable(quality);
|
||||
self.isPlaying = ko.observable(false);
|
||||
|
||||
// Computed data
|
||||
self.formattedName = ko.computed(function() {
|
||||
var index = playlist().indexOf(self);
|
||||
index = index>=0?index+"/"+playlist().length+" ":"";
|
||||
return index+self.group() +" - "+self.title();
|
||||
return index+self.group() +" - "+self.title()+" ["+self.quality()+"]";
|
||||
}, this);
|
||||
|
||||
}
|
||||
@ -206,7 +248,7 @@ $(document).ready(function(){
|
||||
|
||||
self.getResults = function(form) {
|
||||
$.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) });
|
||||
var results = $.map(allData, function(item) { console.log(JSON.stringify(item)); return new Song(item.id,item.group,item.title,item.quality) });
|
||||
self.results(results);
|
||||
});
|
||||
|
||||
|
@ -40,14 +40,10 @@ app.get('/search', function(req, resp){
|
||||
var prev = $(elem).prevAll('a');
|
||||
var title = $(prev).children('.song').text();
|
||||
var quality = $(elem).next("p").text().split("|")[0].trim();
|
||||
title+=" ["+quality+"]";
|
||||
if($(elem).prev().is("img")){
|
||||
title+=" HD!";
|
||||
}
|
||||
var group = $(prev).children('.group').text();
|
||||
var id = prev.attr('href').split('/')[1];
|
||||
if(typeof title != 'undefined' && typeof group != 'undefined' ){
|
||||
results.push({id:id,title:title,group:group})
|
||||
results.push({id:id,title:title,group:group,quality:quality})
|
||||
}
|
||||
});
|
||||
console.log("Results:"+JSON.stringify(results));
|
||||
|
@ -8,7 +8,7 @@
|
||||
<script type='text/javascript' src='js/knockout-2.1.0.js'></script>
|
||||
<script type='text/javascript' src='https://github.com/downloads/rniemeyer/knockout-sortable/knockout-sortable.js'></script>
|
||||
<script type='text/javascript' src='js/app.js'></script>
|
||||
|
||||
<title>Go5Ears, listen in html5!</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="spider"><div><img id="spiderlogo" src="img/spider.png"/></div>BETA</div>
|
||||
@ -28,6 +28,11 @@
|
||||
<li><input type="checkbox" data-bind="checked: repeatAll" /> RepeatAll</li>
|
||||
<li><input type="checkbox" data-bind="checked: repeat" /> RepeatOne</li>
|
||||
</ul>
|
||||
<ul>
|
||||
<li><button id="clearPlaylist">Clear!</button></li>
|
||||
<li><button id="savePlaylist">Save</button></li>
|
||||
<li><input class="hidden" type="file" id="file" name="file"/><button id="fileSelector">Load</button></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user