Merge branch 'master' into develop

webclient/index.html

@@ -212,20 +212,50 @@
                 <div id="searchresults">
                     <div class="ui-grid-a srch-breakpoint">
                         <div class="ui-block-a" id="searchartists">
-                            <h4>Artists</h4>
+                            <div data-role="listview" data-inset="true">
-                            <ul class="table" id="artistresulttable"></ul>
+                                <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>
+                            <div data-role="listview" data-inset="true">
-                            <ul class="table" id="albumresulttable"></ul>
+                                <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 -->
-
+<!--
-<!--                    <div class="" style="text-align: center" id="expandsearch">
+                    <div class="" id="searchtracks">
-                        <a href="#" onclick="toggleSearch(); return false;"><img src="images/icons/arrow_down_16x16.png"></a>
+                        <div data-role="header">
+                            <h4>Tracks</h4>
+                        </div>
+                        <div data-role="content">
+                            <table data-role="table" data-mode="reflow" id="trackresulttable" class="ui-responsive table-stroke">
+                                <thead>
+                                    <tr>
+                                        <th></th>
+                                        <th>Track</th>
+                                        <th data-priority="1">Artist</th>
+                                        <th data-priority="2">Time</th>
+                                        <th data-priority="3">Album</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                </tbody>
+                            </table>
+                        </div>
                     </div>
--->                    <div class="" id="searchtracks">
+-->
+		    <div class="" id="searchtracks">
                         <h4>Tracks</h4>
                         <ul id="trackresulttable"  class="table"></ul>
                     </div>

webclient/js/library.js

@@ -22,9 +22,6 @@ function initSearch() {
         document.activeElement.blur();
         $("input").blur();
 
-        $('#artistresulttable').empty();
-        $('#albumresulttable').empty();
-        $('#trackresulttable').empty();
         delete customTracklists['allresultscache'];
         delete customTracklists['artistresultscache'];
         delete customTracklists['albumresultscache'];
@@ -44,71 +41,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-
+    // Merge results from different backends.
-    //    var results = resultArr[0];
+    var results = {'tracks': [], 'artists': [], 'albums': []};
-    //add complete array
+    var emptyResult = true;
-    //results = tracks from spotify
+
-    var results = resultArr[0];
+    console.log(resultArr, 'resultArr');
-    //add tracks from local search
+
-    if (resultArr[1].tracks) {
+    for (var i = 0; i < resultArr.length; ++i) {
-	results.tracks = resultArr[1].tracks.concat(results.tracks);
+        for (var prop in results) {
-    }
+            if (resultArr[i][prop] && resultArr[i][prop].length) {
-    if (resultArr[1].artists) {
+                results[prop] = results[prop].concat(resultArr[i][prop]);
-	results.artists = resultArr[1].artists.concat(results.artists);
+                emptyResult = false;
-    }
+            }
-    if (resultArr[1].albums) {
+        }
-	results.albums = resultArr[1].albums.concat(results.albums);
     }
 
-    var tracks = (results.tracks) ? results.tracks : '';
+    customTracklists['trackresultscache'] = results.tracks;
-    customTracklists['trackresultscache'] = tracks;
+
-    var artists = (results.artists) ? results.artists : '';
+    if (emptyResult) {
-    var albums = (results.albums) ? results.albums : '';
+        toast('No results');
-    if ((tracks == '') && (artists == '') && (albums == '')) {
+        showLoading(false);
-        toast('No results', 1500, true);
         return false;
     }
+
     $("#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)];
+        });
+    }
+
+    // 'Show more' pattern
+    var showMorePattern = '<li onclick="$(this).hide().siblings().show(); return false;"><a>Show {count} more</a></li>';
+
+    // Artist results
     var child = '';
-    for (var i = 0; i < artists.length; i++) {
+    var pattern = '<li><a href="#" onclick="return showArtist(this.id)" id={id}><strong>{name}</strong></a></li>';
-        child += '<li class="resultrow';
+    var tokens;
-        if (i > 9) {
+
-            break;
+    for (var i = 0; i < results.artists.length; i++) {
-            //child += " hidden";
+        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">');
         }
-	if (artists[i]) {
+
-    	    child += '"><a href="#" onclick="return showArtist(this.id)" id="' + artists[i].uri + '">' + artists[i].name + "</a></li>";
+        child += theme(pattern, tokens);
-	}
     }
-    $(SEARCH_ARTIST_TABLE).html(child);
+
-//    $(SEARCH_ARTIST_TABLE).listview('refresh');
+    // Inject list items, refresh listview and hide superfluous items.
+    $(SEARCH_ARTIST_TABLE).html(child).listview('refresh').find('.overflow').hide();
+
+    // Album results
     child = '';
-//    console.log(albums.length);
+    pattern = '<li><a href="#" onclick="return showAlbum(this.id)" id="{albumId}">';
-    for (var i = 0; i < albums.length; i++) {
+    pattern += '<h5 data-role="heading">{albumName}</h5>';
-        child += '<li class="resultrow';
+    pattern += '<p data-role="desc">{artistName} ({albumYear})</p>';
-        if (i > 9) {
+    pattern += '</a></li>';
-            break;
+
-            //child += " hidden";
+    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 + ' ';
         }
-	if(albums[i]) {
+
-            child += '"><a href="#" onclick="return showAlbum(this.id)" id="' + albums[i].uri + '">';
+        // Add 'Show all' item after a certain number of hits.
-	    child += "<h1>" + albums[i].name + "</h1><p>";
+        if (i == 4 && results.albums.length > 5) {
-    	    for (var j = 0; j < albums[i].artists.length; j++) {
+            child += theme(showMorePattern, {'count': results.albums.length - i});
-    		if (albums[i].artists[j]) {
+            pattern = pattern.replace('<li>', '<li class="overflow">');
-		    child += albums[i].artists[j].name + " ";
+        }
-    	        }
+
-	    }
+        child += theme(pattern, tokens);
-    	    child += '</p></a></li>';
-	}
     }
-    $(SEARCH_ALBUM_TABLE).html(child);
+
-//    $(SEARCH_ALBUM_TABLE).listview('refresh');
+    // 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);
 }
@@ -207,4 +234,3 @@ function showAlbum(uri) {
     setSongInfo();
     return false;
 }
-