From d17d657037b65c60310ef574d0323c64338a2a6a Mon Sep 17 00:00:00 2001 From: Joel Pettersson Date: Wed, 11 Sep 2013 01:50:49 +0200 Subject: [PATCH 1/4] Search result (artist, album) in jQuery listviews. 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. --- webclient/index.html | 20 ++++-- webclient/js/library.js | 133 +++++++++++++++++++++++++--------------- 2 files changed, 99 insertions(+), 54 deletions(-) diff --git a/webclient/index.html b/webclient/index.html index 6ce348d..e5064c9 100755 --- a/webclient/index.html +++ b/webclient/index.html @@ -200,12 +200,24 @@
-

Artists

-
    +
    +
    +

    Artists

    +
    +
    +
      +
      +
      -

      Albums

      -
        +
        +
        +

        Albums

        +
        +
        +
          +
          +
          diff --git a/webclient/js/library.js b/webclient/js/library.js index ffd88cb..ded4f4b 100755 --- a/webclient/js/library.js +++ b/webclient/js/library.js @@ -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 += '
        • ' + artists[i].name + "
          • "; - } - $(SEARCH_ARTIST_TABLE).html(child); -// $(SEARCH_ARTIST_TABLE).listview('refresh'); - child = ''; - for (var i = 0; i < albums.length; i++) { - child += '
        • '; - child += "

          " + albums[i].name + "

          "; - for (var j = 0; j < albums[i].artists.length; j++) { - child += albums[i].artists[j].name + " "; - } - child += '

          • '; + $("#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 = '
        • Show {count} more
          • '; + + // Artist results + var child = ''; + var pattern = '
        • {name}
          • '; + 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('
        • ', '
        • '); + } + + 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 = '
        • '; + pattern += '
          {albumName}
          '; + pattern += '

          {artistName} ({albumYear})

          '; + pattern += '
          • '; + + 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('
        • ', '
        • '); + } + + 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); } From 93274f899322fdc4704015d1d7a4dfb0dc917b7e Mon Sep 17 00:00:00 2001 From: Joel Pettersson Date: Wed, 11 Sep 2013 04:07:05 +0200 Subject: [PATCH 2/4] List tracks in jQuery table widget. Currently, the tracks are just listed in the table and no action can be taken on them. Eventually, the same popup menu as before or something equivalent should be added. --- webclient/index.html | 24 ++++++++++++++++++------ webclient/js/library.js | 33 +++++++++++++++++++++++---------- 2 files changed, 41 insertions(+), 16 deletions(-) diff --git a/webclient/index.html b/webclient/index.html index e5064c9..9cfd7cc 100755 --- a/webclient/index.html +++ b/webclient/index.html @@ -222,12 +222,24 @@
          • -
          -

          Tracks

          - +
          +
          +

          Tracks

          +
          +
          + + + + + + + + + + + +
          TrackArtistTimeAlbum
          +
          diff --git a/webclient/js/library.js b/webclient/js/library.js index ded4f4b..a4237f3 100755 --- a/webclient/js/library.js +++ b/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']; @@ -41,10 +38,6 @@ function initSearch() { * process results of a search *********************************************************/ function processSearchResults(resultArr) { - $(SEARCH_TRACK_TABLE).empty(); - $(SEARCH_ARTIST_TABLE).empty(); - $(SEARCH_ALBUM_TABLE).empty(); - // Merge results from different backends. var results = {'tracks': [], 'artists': [], 'albums': []}; var emptyResult = true; @@ -134,10 +127,30 @@ function processSearchResults(resultArr) { // Inject list items, refresh listview and hide superfluous items. $(SEARCH_ALBUM_TABLE).html(child).listview('refresh').find('.overflow').hide(); - $('#expandsearch').show(); - // Track results - playlisttotable(results.tracks, SEARCH_TRACK_TABLE, 'trackresultscache'); + child = ''; + pattern = '{track}{artist}{time}{album}'; + + //playlisttotable(results.tracks, SEARCH_TRACK_TABLE, 'trackresultscache'); + for (var i = 0; i < results.tracks.length; ++i) { + tokens = { + 'track': results.tracks[i].name, + 'artist': '', + 'time': results.tracks[i].length, + 'album': results.tracks[i].album.name, + 'listuri': undefined, + 'trackuri': results.tracks[i].uri, + }; + + for (var j = 0; j < results.tracks[i].artists.length; ++j) { + tokens.artist += results.tracks[i].artists[j].name + ', '; + } + + child += theme(pattern, tokens); + } + + $(SEARCH_TRACK_TABLE).children('tbody').html(child); + $(SEARCH_TRACK_TABLE).table('refresh'); setSongInfo(); showLoading(false); From e80f245d78e037ac664cd28c4d92815126d2f2d1 Mon Sep 17 00:00:00 2001 From: Joel Pettersson Date: Wed, 11 Sep 2013 16:37:26 +0200 Subject: [PATCH 3/4] Add track popup menu in search results view. --- webclient/index.html | 1 + webclient/js/library.js | 8 +++++++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/webclient/index.html b/webclient/index.html index 9cfd7cc..e67cef5 100755 --- a/webclient/index.html +++ b/webclient/index.html @@ -230,6 +230,7 @@ + diff --git a/webclient/js/library.js b/webclient/js/library.js index a4237f3..8cb4f8d 100755 --- a/webclient/js/library.js +++ b/webclient/js/library.js @@ -129,10 +129,14 @@ function processSearchResults(resultArr) { // Track results child = ''; - pattern = ''; + pattern = ''; //playlisttotable(results.tracks, SEARCH_TRACK_TABLE, 'trackresultscache'); for (var i = 0; i < results.tracks.length; ++i) { + popupData[results.tracks[i].uri] = results.tracks[i]; + tokens = { 'track': results.tracks[i].name, 'artist': '', @@ -140,6 +144,7 @@ function processSearchResults(resultArr) { 'album': results.tracks[i].album.name, 'listuri': undefined, 'trackuri': results.tracks[i].uri, + 'domId': SEARCH_TRACK_TABLE.substr(1) + '-' + results.tracks[i].uri, }; for (var j = 0; j < results.tracks[i].artists.length; ++j) { @@ -150,6 +155,7 @@ function processSearchResults(resultArr) { } $(SEARCH_TRACK_TABLE).children('tbody').html(child); + $(SEARCH_TRACK_TABLE).find('tbody tr td a').button(); $(SEARCH_TRACK_TABLE).table('refresh'); setSongInfo(); From 2fc4d9a7b65e17190184e2823cafb409750d3871 Mon Sep 17 00:00:00 2001 From: Joel Pettersson Date: Wed, 11 Sep 2013 16:38:09 +0200 Subject: [PATCH 4/4] Fix formatting of artists and track length. --- webclient/js/library.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/webclient/js/library.js b/webclient/js/library.js index 8cb4f8d..db3419e 100755 --- a/webclient/js/library.js +++ b/webclient/js/library.js @@ -140,16 +140,18 @@ function processSearchResults(resultArr) { tokens = { 'track': results.tracks[i].name, 'artist': '', - 'time': results.tracks[i].length, + 'time': timeFromSeconds(results.tracks[i].length / 1000), 'album': results.tracks[i].album.name, 'listuri': undefined, 'trackuri': results.tracks[i].uri, 'domId': SEARCH_TRACK_TABLE.substr(1) + '-' + results.tracks[i].uri, }; + var as = []; for (var j = 0; j < results.tracks[i].artists.length; ++j) { - tokens.artist += results.tracks[i].artists[j].name + ', '; + as.push(results.tracks[i].artists[j].name); } + tokens.artist = as.join(', '); child += theme(pattern, tokens); }
          Track Artist Time
          {track}{artist}{time}{album}
          '; + pattern += ''; + pattern += '{track}{artist}{time}{album}