Album Art + Lazy Load

This commit is contained in:
IrosTheBeggar 2017-09-26 02:15:46 -04:00
parent 349c4a5063
commit d91ed58deb
5 changed files with 40 additions and 12 deletions

View File

@ -244,7 +244,7 @@ exports.setup = function (mstream, dbSettings){
var albums = {"albums":[]};
// TODO: Make a list of all songs without null albums and add them to the response
var sql = "SELECT DISTINCT album FROM items WHERE artist = ? AND user = ? ORDER BY album COLLATE NOCASE ASC;";
var sql = "SELECT album, album_art_file FROM items WHERE artist = ? AND user = ? GROUP BY album ORDER BY album COLLATE NOCASE ASC;";
var searchTerms = [];
searchTerms.push(req.body.artist);
searchTerms.push(req.user.username);
@ -256,11 +256,11 @@ exports.setup = function (mstream, dbSettings){
}
var returnArray = [];
for (var i = 0; i < rows.length; i++) {
if(rows[i].album){
for (let row in rows){
if(row.album){
albums.albums.push({
name: rows[i].album,
album_art_file: rows[i].album_art_file
name: row.album,
album_art_file: row.album_art_file
});
}
}

View File

@ -143,7 +143,7 @@ div#jp_container_N {
font-weight: 300;
border-bottom: solid 1px #b4b4b4;
padding: 13px 10px; }
.filez:hover, .dirz:hover, .back:hover, .artistz:hover, .albumz:hover, .playlistz:hover, .playlist-item:hover #playlist_container ul li:hover {
.filez:hover, .back:hover, .artistz:hover, .playlistz:hover, .playlist-item:hover #playlist_container ul li:hover {
background-color: #F5F5F5; }
.dirz {
@ -192,7 +192,7 @@ div#jp_container_N {
list-style-type: none;
overflow: hidden; }
.dirz:hover {
.dirz:hover, .albumz:hover, .artistz:hover, .playlistz:hover {
background-color: rgba(230, 154, 23, 0.15); }
.back:hover {
@ -513,3 +513,15 @@ h3 {
.hover-fill:hover{
opacity: 1;
}
.explorer-label-1{
font-family: 'Jura', sans-serif;
font-style: normal;
font-size: 17px;
line-height: 100%;
}
.album-art-box{
height: 50px;
margin-right: 10px;
}

File diff suppressed because one or more lines are too long

View File

@ -569,11 +569,16 @@ $(document).ready(function(){
//parse through the json array and make an array of corresponding divs
var albums = [];
$.each(response.albums, function(index, value) {
albums.push('<div data-album="'+value.name+'" class="albumz">'+value.name+' </div>');
if(value.album_art_file){
albums.push('<div data-album="'+value.name+'" class="albumz"><img class="album-art-box" data-original="album-art/'+value.album_art_file+'"><span class="explorer-label-1">'+value.name+'</span></div>');
}else{
albums.push('<div data-album="'+value.name+'" class="albumz"><img class="album-art-box" src="/public/img/default.png"><span class="explorer-label-1">'+value.name+'</span></div>');
}
currentBrowsingList.push({type: 'album', name: value.name});
});
$('#filelist').html(albums);
ll.update();
});
});
@ -633,6 +638,7 @@ $(document).ready(function(){
$("#filelist").on('click', '.artistz', function() {
var artist = $(this).data('artist');
resetPanel('Artist', 'scrollBoxHeight1');
MSTREAMAPI.artistAlbums(artist, function(response, error){
$('#search_folders').val('');
@ -641,18 +647,20 @@ $(document).ready(function(){
return boilerplateFailure(response, error);
}
//clear the list
$('#filelist').empty();
currentBrowsingList = [];
var albums = [];
$.each(response.albums, function(index, value) {
albums.push('<div data-album="'+value.name+'" class="albumz">'+value.name+' </div>');
if(value.album_art_file){
albums.push('<div data-album="'+value.name+'" class="albumz"><img class="album-art-box" data-original="album-art/'+value.album_art_file+'"><span class="explorer-label-1">'+value.name+'</span></div>');
}else{
albums.push('<div data-album="'+value.name+'" class="albumz"><img class="album-art-box" src="/public/img/default.png"><span class="explorer-label-1">'+value.name+'</span></div>');
}
currentBrowsingList.push({type: 'album', name: value.name})
});
$('#filelist').html(albums);
$('.panel_one_name').html('Albums');
$('.directoryName').html('Artist: ' + artist);
ll.update();
});
});

View File

@ -376,4 +376,11 @@
$(document).foundation();
</script>
<script type="text/javascript" src="/public/js/lib/lazy-load.js"></script>
<script>
var ll =new LazyLoad({
container: document.getElementById('filelist')
});
</script>
</body>