andpp/mopidy-musicbox-webclient
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Search result (artist, album) in jQuery listviews.

Browse Source 
Put search result for artists and albums inside jQuery Mobile listviews.
These listviews are limited to a hardcoded number of items to display at
first, with the option of expanding the list with the rest.
This commit is contained in:
Joel Pettersson 2013-09-11 01:50:49 +02:00
parent 4cd9167a01
commit d17d657037
2 changed files with 99 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
webclient/index.html
View File

@ -200,12 +200,24 @@
<div id="searchresults">
<div class="ui-grid-a srch-breakpoint">
<div class="ui-block-a" id="searchartists">
<h4>Artists</h4>
<ul class="table" id="artistresulttable"></ul>
<div data-role="listview" data-inset="true">
<div data-role="header">
<h4>Artists</h4>
</div>
<div data-role="content">
<ul data-role="listview" id="artistresulttable"></ul>
</div>
</div>
</div>
<div class="ui-block-b" id="searchalbums">
<h4>Albums</h4>
<ul class="table" id="albumresulttable"></ul>
<div data-role="listview" data-inset="true">
<div data-role="header">
<h4>Albums</h4>
</div>
<div data-role="content">
<ul data-role="listview" id="albumresulttable"></ul>
</div>
</div>
</div>
</div>
<!-- grid a -->

133
webclient/js/library.js
View File

@ -44,68 +44,101 @@ function processSearchResults(resultArr) {
$(SEARCH_TRACK_TABLE).empty();
$(SEARCH_ARTIST_TABLE).empty();
$(SEARCH_ALBUM_TABLE).empty();
//get the right result
//depends on versioon of mopidy: 0 = 0.14+ 1 = 0.13-
// var results = resultArr[0];
//add complete array
console.log(resultArr);
//results = tracks from spotify
var results = resultArr[0];
//add tracks from local search
if (resultArr[1].tracks) {
results.tracks = resultArr[1].tracks.concat(results.tracks);
}
if (resultArr[1].artists) {
results.artists = resultArr[1].artists.concat(results.artists);
}
if (resultArr[1].albums) {
results.albums = resultArr[1].albums.concat(results.albums);
// Merge results from different backends.
var results = {'tracks': [], 'artists': [], 'albums': []};
var emptyResult = true;
console.log(resultArr, 'resultArr');
for (var i = 0; i < resultArr.length; ++i) {
for (var prop in results) {
if (resultArr[i][prop] && resultArr[i][prop].length) {
results[prop] = results[prop].concat(resultArr[i][prop]);
emptyResult = false;
}
}
}
var tracks = (results.tracks) ? results.tracks : '';
customTracklists['trackresultscache'] = tracks;
var artists = (results.artists) ? results.artists : '';
console.log(artists);
var albums = (results.albums) ? results.albums : '';
if ((tracks == '') && (artists == '') && (albums == '')) {
customTracklists['trackresultscache'] = results.tracks;
if (emptyResult) {
alert('No results');
showLoading(false);
return false;
}
$("#searchresults").show();
var child = '';
for (var i = 0; i < artists.length; i++) {
child += '<li class="resultrow';
if (i > 9) {
break;
//child += " hidden";
}
child += '"><a href="#" onclick="return showArtist(this.id)" id="' + artists[i].uri + '">' + artists[i].name + "</a></li>";
}
$(SEARCH_ARTIST_TABLE).html(child);
// $(SEARCH_ARTIST_TABLE).listview('refresh');
child = '';
for (var i = 0; i < albums.length; i++) {
child += '<li class="resultrow';
if (i > 9) {
break;
//child += " hidden";
}
child += '"><a href="#" onclick="return showAlbum(this.id)" id="' + albums[i].uri + '">';
child += "<h1>" + albums[i].name + "</h1><p>";
for (var j = 0; j < albums[i].artists.length; j++) {
child += albums[i].artists[j].name + " ";
}
child += '</p></a></li>';
$("#searchresults").show();
// Returns a string where {x} in template is replaced by tokens[x].
function theme(template, tokens) {
return template.replace(/{[^}]+}/g, function(match) {
return tokens[match.slice(1,-1)];
});
}
$(SEARCH_ALBUM_TABLE).html(child);
// $(SEARCH_ALBUM_TABLE).listview('refresh');
// 'Show more' pattern
var showMorePattern = '<li onclick="$(this).hide().siblings().show(); return false;"><a>Show {count} more</a></li>';
// Artist results
var child = '';
var pattern = '<li><a href="#" onclick="return showArtist(this.id)" id={id}><strong>{name}</strong></a></li>';
var tokens;
for (var i = 0; i < results.artists.length; i++) {
tokens = {
'id': results.artists[i].uri,
'name': results.artists[i].name
};
// Add 'Show all' item after a certain number of hits.
if (i == 4 && results.artists.length > 5) {
child += theme(showMorePattern, {'count': results.artists.length - i});
pattern = pattern.replace('<li>', '<li class="overflow">');
}
child += theme(pattern, tokens);
}
// Inject list items, refresh listview and hide superfluous items.
$(SEARCH_ARTIST_TABLE).html(child).listview('refresh').find('.overflow').hide();
// Album results
child = '';
pattern = '<li><a href="#" onclick="return showAlbum(this.id)" id="{albumId}">';
pattern += '<h5 data-role="heading">{albumName}</h5>';
pattern += '<p data-role="desc">{artistName} ({albumYear})</p>';
pattern += '</a></li>';
for (var i = 0; i < results.albums.length; i++) {
tokens = {
'albumId': results.albums[i].uri,
'albumName': results.albums[i].name,
'artistName': '',
'albumYear': results.albums[i].date
};
for (var j = 0; j < results.albums[i].artists.length; j++) {
tokens.artistName += results.albums[i].artists[j].name + ' ';
}
// Add 'Show all' item after a certain number of hits.
if (i == 4 && results.albums.length > 5) {
child += theme(showMorePattern, {'count': results.albums.length - i});
pattern = pattern.replace('<li>', '<li class="overflow">');
}
child += theme(pattern, tokens);
}
// Inject list items, refresh listview and hide superfluous items.
$(SEARCH_ALBUM_TABLE).html(child).listview('refresh').find('.overflow').hide();
$('#expandsearch').show();
//console.log(results.tracks);
// Track results
playlisttotable(results.tracks, SEARCH_TRACK_TABLE, 'trackresultscache');
setSongInfo();
showLoading(false);
}