diff --git a/css/main.css b/css/main.css index 25aa9b4..c5ac17a 100644 --- a/css/main.css +++ b/css/main.css @@ -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; } diff --git a/js/app.js b/js/app.js index 91d467c..9fd1e81 100644 --- a/js/app.js +++ b/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); }); diff --git a/player.js b/player.js index 9ae721d..5748794 100644 --- a/player.js +++ b/player.js @@ -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)); diff --git a/public/index.html b/public/index.html index f2f9182..ee7f67a 100644 --- a/public/index.html +++ b/public/index.html @@ -8,7 +8,7 @@ - +