Remember selection of which backend to search.

Fixes #130.

README.rst

@@ -75,6 +75,8 @@ v2.3.0 (UNRELEASED)
 
 - Enhance build workflow to include style checks and syntax validation for HTML, CSS, and Javascript.
 - Now displays album and artist info when browsing tracks. (Addresses: `#99 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/99>`_).
+- Now remembers which backend was searched previously, and automatically selects that backend as the default search target.
+  (Addresses: `#130 <https://github.com/pimusicbox/mopidy-musicbox-webclient/issues/130>`_).
 
 **Fixes**
 

mopidy_musicbox_webclient/static/index.html

@@ -395,14 +395,10 @@
         <div class="ui-block">
             <form>
                 <p>Search for artists, albums, or specific tracks.
-                <select id="selectSearchService"> 
+                <select id="selectSearchService"></select>
-                    <!-- data-native-menu="false"> 
-                    multiple="multiple" data-native-menu="false">
-                    <option data-placeholder="true">Choose services</option> -->
-                </select>
                 <input id="searchinput" placeholder="Search term" class="span2" data-clear-btn="true"
-                       onkeypress="return searchPressed(event.keyCode);" type="text"/>
+                       onkeypress="return library.searchPressed(event.keyCode);" type="text"/>
-                <button class="btn" type="button" onclick="return initSearch(event.value);">
+                <button class="btn" type="button" onclick="return library.initSearch(event.value);">
                     Search!
                 </button>
             </form>

mopidy_musicbox_webclient/static/js/functionsvars.js

@@ -95,9 +95,9 @@ var uriClassList = [
 
 var uriHumanList = [
     ['spotify', 'Spotify'],
-    ['spotifytunigo', 'Spotify Browse'],
+    ['spotifytunigo', 'Spotify browse'],
-    ['local', 'Local Files'],
+    ['local', 'Local files'],
-    ['m3u', 'Local Playlists'],
+    ['m3u', 'Local playlists'],
     ['podcast', 'Podcasts'],
     ['dirble', 'Dirble'],
     ['tunein', 'TuneIn'],
@@ -249,7 +249,7 @@ function renderSongLiDivider (track, nextTrack, currentIndex, target) {
     if (hasSameAlbum(track, nextTrack)) {
         // Large divider with album cover
         $(target).before(
-            '<li class="albumdivider"><a href="#" onclick="return showAlbum(\'' + track.album.uri + '\');">' +
+            '<li class="albumdivider"><a href="#" onclick="return library.showAlbum(\'' + track.album.uri + '\');">' +
             '<img id="' + getjQueryID(target + '-cover', track.uri) + '" class="artistcover" width="30" height="30"/>' +
             '<h1><i class="' + getMediaClass(track.uri) + '"></i> ' + track.album.name + '</h1><p>' +
             renderSongLiTrackArtists(track) + '</p></a></li>'
@@ -482,11 +482,11 @@ function getMediaClass (uri) {
 function getMediaHuman (uri) {
     var scheme = getScheme(uri)
     for (var i = 0; i < uriHumanList.length; i++) {
-        if (scheme === uriHumanList[i][0]) {
+        if (scheme.toLowerCase() === uriHumanList[i][0].toLowerCase()) {
             return uriHumanList[i][1]
         }
     }
-    return ''
+    return uri
 }
 
 function isServiceUri (uri) {

mopidy_musicbox_webclient/static/js/gui.js

@@ -117,7 +117,7 @@ function setSongInfo (data) {
 
     if (data.track.artists) {
         for (var j = 0; j < data.track.artists.length; j++) {
-            artistshtml += '<a href="#" onclick="return showArtist(\'' + data.track.artists[j].uri + '\');">' + data.track.artists[j].name + '</a>'
+            artistshtml += '<a href="#" onclick="return library.showArtist(\'' + data.track.artists[j].uri + '\');">' + data.track.artists[j].name + '</a>'
             artiststext += data.track.artists[j].name
             if (j !== data.track.artists.length - 1) {
                 artistshtml += ', '
@@ -127,7 +127,7 @@ function setSongInfo (data) {
         arttmp = artistshtml
     }
     if (data.track.album && data.track.album.name) {
-        $('#modalalbum').html('<a href="#" onclick="return showAlbum(\'' + data.track.album.uri + '\');">' + data.track.album.name + '</a>')
+        $('#modalalbum').html('<a href="#" onclick="return library.showAlbum(\'' + data.track.album.uri + '\');">' + data.track.album.name + '</a>')
         coverArt.getCover(data.track.uri, '#infocover, #controlspopupimage', 'extralarge')
     } else {
         $('#modalalbum').html('')
@@ -171,14 +171,14 @@ function popupTracks (e, listuri, trackuri, tlid) {
 
     if (popupData[trackuri].artists) {
         if (popupData[trackuri].artists.length === 1) {
-            child = '<a href="#" onclick="showArtist(\'' + popupData[trackuri].artists[0].uri + '\');">Show Artist</a>'
+            child = '<a href="#" onclick="library.showArtist(\'' + popupData[trackuri].artists[0].uri + '\');">Show Artist</a>'
             $('.popupArtistName').html(popupData[trackuri].artists[0].name)
-            $('.popupArtistHref').attr('onclick', 'showArtist("' + popupData[trackuri].artists[0].uri + '");')
+            $('.popupArtistHref').attr('onclick', 'library.showArtist("' + popupData[trackuri].artists[0].uri + '");')
             $('.popupArtistsDiv').hide()
             $('.popupArtistsLi').show()
         } else {
             for (var j = 0; j < popupData[trackuri].artists.length; j++) {
-                child += '<li><a href="#" onclick="showArtist(\'' + popupData[trackuri].artists[j].uri + '\');"><span class="popupArtistName">' + popupData[trackuri].artists[j].name + '</span></a></li>'
+                child += '<li><a href="#" onclick="library.showArtist(\'' + popupData[trackuri].artists[j].uri + '\');"><span class="popupArtistName">' + popupData[trackuri].artists[j].name + '</span></a></li>'
             }
             $('.popupArtistsLi').hide()
             $('.popupArtistsLv').html(child).show()
@@ -222,7 +222,7 @@ function popupTracks (e, listuri, trackuri, tlid) {
 
 function showAlbumPopup (popupId) {
     uri = $(popupId).data('track')
-    showAlbum(popupData[uri].album.uri)
+    library.showAlbum(popupData[uri].album.uri)
 }
 
 /** ********************
@@ -232,14 +232,14 @@ function showAlbumPopup (popupId) {
 function initSocketevents () {
     mopidy.on('state:online', function () {
         showOffline(false)
-        getCurrentPlaylist()
+        library.getCurrentPlaylist()
         updateStatusOfAll()
-        getPlaylists()
+        library.getPlaylists()
         getUriSchemes().then(function () {
             showFavourites()
         })
-        getBrowseDir()
+        library.getBrowseDir()
-        getSearchSchemes()
+        library.getSearchSchemes()
         showLoading(false)
         $(window).hashchange()
     })
@@ -258,21 +258,21 @@ function initSocketevents () {
 
     mopidy.on('event:playlistsLoaded', function (data) {
         showLoading(true)
-        getPlaylists()
+        library.getPlaylists()
     })
 
     mopidy.on('event:playlistChanged', function (data) {
         $('#playlisttracksdiv').hide()
         $('#playlistslistdiv').show()
         delete playlists[data.playlist.uri]
-        getPlaylists()
+        library.getPlaylists()
     })
 
     mopidy.on('event:playlistDeleted', function (data) {
         $('#playlisttracksdiv').hide()
         $('#playlistslistdiv').show()
         delete playlists[data.uri]
-        getPlaylists()
+        library.getPlaylists()
     })
 
     mopidy.on('event:volumeChanged', function (data) {
@@ -296,7 +296,7 @@ function initSocketevents () {
     })
 
     mopidy.on('event:tracklistChanged', function (data) {
-        getCurrentPlaylist()
+        library.getCurrentPlaylist()
     })
 
     mopidy.on('event:seeked', function (data) {
@@ -424,7 +424,7 @@ function locationHashChanged () {
             $('#navsearch a').addClass($.mobile.activeBtnClass)
             $('#searchinput').focus()
             if (customTracklists['mbw:allresultscache'] === '') {
-                initSearch($('#searchinput').val())
+                library.initSearch($('#searchinput').val())
             }
             break
         case 'stream':
@@ -432,12 +432,12 @@ function locationHashChanged () {
             break
         case 'artists':
             if (uri !== '') {
-                showArtist(uri)
+                library.showArtist(uri)
             }
             break
         case 'albums':
             if (uri !== '') {
-                showAlbum(uri)
+                library.showAlbum(uri)
             }
             break
     }

mopidy_musicbox_webclient/static/js/images.js

@@ -77,7 +77,7 @@ var coverArt = {
                 }
             }
         }, error: function (code, message) {
-            console.log('Error retrieving album info from last.fm', code, message)
+            console.error('Error retrieving album info from last.fm', code, message)
         }})
     },
 
@@ -94,7 +94,7 @@ var coverArt = {
                 }
             }
         }, error: function (code, message) {
-            console.log('Error retrieving artist info from last.fm', code, message)
+            console.error('Error retrieving artist info from last.fm', code, message)
         }})
     }
 }

mopidy_musicbox_webclient/static/js/library.js

@@ -1,21 +1,24 @@
+var library = {
+
 /** *******************************
  * Search
  *********************************/
-function searchPressed (key) {
+    searchPressed: function (key) {
         var value = $('#searchinput').val()
         switchContent('search')
 
         if (key === 13) {
-        initSearch()
+            library.initSearch()
             return false
         }
         return true
-}
+    },
 
     // init search
-function initSearch () {
+    initSearch: function () {
         var value = $('#searchinput').val()
         var searchService = $('#selectSearchService').val()
+        $.cookie('searchScheme', searchService, { expires: 365 })
 
         if ((value.length < 100) && (value.length > 0)) {
             showLoading(true)
@@ -32,7 +35,7 @@ function initSearch () {
             $('#searchtracks').hide()
 
             if (searchService !== 'all') {
-            mopidy.library.search({'query': {any: [value]}, 'uris': [searchService + ':']}).then(processSearchResults, console.error)
+                mopidy.library.search({'query': {any: [value]}, 'uris': [searchService + ':']}).then(library.processSearchResults, console.error)
             } else {
                 mopidy.getUriSchemes().then(function (schemes) {
                     var query = {}
@@ -50,28 +53,16 @@ function initSearch () {
                     } else {
                         query = {any: [value]}
                     }
-                mopidy.library.search({'query': query, 'uris': uris}).then(processSearchResults, console.error)
+                    mopidy.library.search({'query': query, 'uris': uris}).then(library.processSearchResults, console.error)
                 })
             }
         }
-}
+    },
 
 /** ******************************************************
  * process results of a search
  *********************************************************/
-
+    processSearchResults: function (resultArr) {
-// # speed clone http://jsperf.com/cloning-an-object/2
-function clone (obj) {
-    var target = {}
-    for (var i in obj) {
-        if (obj.hasOwnProperty(i)) {
-            target[i] = obj[i]
-        }
-    }
-    return target
-}
-
-function processSearchResults (resultArr) {
         $(SEARCH_TRACK_TABLE).empty()
         $(SEARCH_ARTIST_TABLE).empty()
         $(SEARCH_ALBUM_TABLE).empty()
@@ -139,7 +130,7 @@ function processSearchResults (resultArr) {
 
         // Artist results
         var child = ''
-    var pattern = '<li><a href="#" onclick="return showArtist(this.id)" id={id}><i class="{class}"></i> <strong>{name}</strong></a></li>'
+        var pattern = '<li><a href="#" onclick="return library.showArtist(this.id)" id={id}><i class="{class}"></i> <strong>{name}</strong></a></li>'
         var tokens
 
         for (i = 0; i < results.artists.length; i++) {
@@ -163,7 +154,7 @@ function processSearchResults (resultArr) {
 
         // Album results
         child = ''
-    pattern = '<li><a href="#" onclick="return showAlbum(this.id)" id="{albumId}">'
+        pattern = '<li><a href="#" onclick="return library.showAlbum(this.id)" id="{albumId}">'
         pattern += '<h5 data-role="heading"><i class="{class}"></i> {albumName}</h5>'
         pattern += '<p data-role="desc">{artistName}</p>'
         pattern += '</a></li>'
@@ -201,23 +192,17 @@ function processSearchResults (resultArr) {
         resultsToTables(results.tracks, SEARCH_TRACK_TABLE, URI_SCHEME + ':trackresultscache')
 
         showLoading(false)
-}
+    },
-
-function toggleSearch () {
-    $('#albumresulttable tr').removeClass('hidden')
-    $('#artistresulttable tr').removeClass('hidden')
-}
 
 /** *******************************
  * Playlists & Browse
  *********************************/
-
+    getPlaylists: function () {
-function getPlaylists () {
         //  get playlists without tracks
         mopidy.playlists.asList().then(processGetPlaylists, console.error)
-}
+    },
 
-function getBrowseDir (rootdir) {
+    getBrowseDir: function (rootdir) {
         //  get directory to browse
         showLoading(true)
         if (!rootdir) {
@@ -230,16 +215,16 @@ function getBrowseDir (rootdir) {
             rootdir = null
         }
         mopidy.library.browse({'uri': rootdir}).then(processBrowseDir, console.error)
-}
+    },
 
-function getCurrentPlaylist () {
+    getCurrentPlaylist: function () {
         mopidy.tracklist.getTlTracks().then(processCurrentPlaylist, console.error)
-}
+    },
 
 /** ******************************************************
  * Show tracks of playlist
  ********************************************************/
-function togglePlaylists () {
+    togglePlaylists: function () {
         if ($(window).width() <= 960) {
             $('#playlisttracksdiv').toggle();
             // Hide other div
@@ -249,14 +234,17 @@ function togglePlaylists () {
             $('#playlistslistdiv').show()
         }
         return true
-}
+    },
 
-function showTracklist (uri) {
+/** **********
+ * Lookups
+ ************/
+    showTracklist: function (uri) {
         showLoading(true)
         $(PLAYLIST_TABLE).empty()
-    togglePlaylists()
+        library.togglePlaylists()
         var tracks = getPlaylistTracks(uri).then(function (tracks) {
-        resultsToTables(tracks, PLAYLIST_TABLE, uri, 'return togglePlaylists();', true)
+            resultsToTables(tracks, PLAYLIST_TABLE, uri, 'return library.togglePlaylists();', true)
             showLoading(false)
         })
         updatePlayIcons(uri)
@@ -267,13 +255,9 @@ function showTracklist (uri) {
             }
         })
         return false
-}
+    },
 
-/** ****
+    showArtist: function (nwuri) {
- * Lookups
- */
-
-function showArtist (nwuri) {
         $('#popupQueue').popup('close')
         $('#popupTracks').popup('close')
         $('#controlsmodal').popup('close')
@@ -290,9 +274,9 @@ function showArtist (nwuri) {
         switchContent('artists', nwuri)
         scrollToTop()
         return false
-}
+    },
 
-function showAlbum (uri) {
+    showAlbum: function (uri) {
         $('#popupQueue').popup('close')
         $('#popupTracks').popup('close')
         $('#controlsmodal').popup('close')
@@ -327,22 +311,34 @@ function showAlbum (uri) {
         switchContent('albums', uri)
         scrollToTop()
         return false
+    },
+
+    getSearchSchemes: function () {
+        var backendName
+        var searchScheme = $.cookie('searchScheme')
+        if (searchScheme) {
+            searchScheme = searchScheme.replace(/"/g, '')
+        } else {
+            searchScheme = 'all'
+        }
+        $('#selectSearchService').empty()
+        $('#selectSearchService').append(new Option('All backends', 'all'))
+        mopidy.getUriSchemes().then(function (schemesArray) {
+            for (var i = 0; i < schemesArray.length; i++) {
+                backendName = getMediaHuman(schemesArray[i])
+                backendName = backendName.charAt(0).toUpperCase() + backendName.slice(1)
+                $('#selectSearchService').append(new Option(backendName, schemesArray[i]))
+            }
+            $('#selectSearchService').val(searchScheme)
+            $('#selectSearchService').selectmenu('refresh', true)
+        }, console.error)
+    }
 }
 
-function getSearchSchemes () {
+// TODO: Remove this once JavaScript codebase has been completely modularized
-    mopidy.getUriSchemes().then(
+//       in favour of bundling everything using 'browserify'.
-        function (schemesArray) {
+if (typeof exports !== 'undefined') {
-            var humanIndex
+    if (typeof module !== 'undefined' && module.exports) {
-            $('#selectSearchService').children().remove().end()
+        module.exports = library
-            $('#selectSearchService').append(new Option('All services', 'all'))
-            for (var i = 0; i < schemesArray.length; i++) {
-                for (var j = 0; j < uriHumanList.length; j++) {
-                    if (uriHumanList[j][0] === schemesArray[i].toLowerCase()) {
-                        $('#selectSearchService').append(new Option(uriHumanList[j][1], schemesArray[i]))
     }
 }
-            }
-            $('#selectSearchService').selectmenu('refresh', true)
-        }, console.error
-    )
-}

mopidy_musicbox_webclient/static/js/process_ws.js

@@ -78,7 +78,7 @@ function processPlaystate (data) {
 function processBrowseDir (resultArr) {
     $(BROWSE_TABLE).empty()
     if (browseStack.length > 0) {
-        renderSongLiBackButton(resultArr, BROWSE_TABLE, 'return getBrowseDir();')
+        renderSongLiBackButton(resultArr, BROWSE_TABLE, 'return library.getBrowseDir();')
     }
     if (!resultArr || resultArr.length === 0) {
         showLoading(false)
@@ -113,7 +113,7 @@ function processBrowseDir (resultArr) {
                 iconClass = getMediaClass(resultArr[i].uri)
             }
             $(BROWSE_TABLE).append(
-                '<li><a href="#" onclick="return getBrowseDir(this.id);" id="' + resultArr[i].uri + '">' +
+                '<li><a href="#" onclick="return library.getBrowseDir(this.id);" id="' + resultArr[i].uri + '">' +
                 '<h1><i class="' + iconClass + '"></i> ' + resultArr[i].name + '</h1></a></li>'
             )
         }
@@ -163,7 +163,7 @@ function processGetPlaylists (resultArr) {
     var starred = ''
 
     for (var i = 0; i < resultArr.length; i++) {
-        var li_html = '<li><a href="#" onclick="return showTracklist(this.id);" id="' + resultArr[i].uri + '">'
+        var li_html = '<li><a href="#" onclick="return library.showTracklist(this.id);" id="' + resultArr[i].uri + '">'
         if (isSpotifyStarredPlaylist(resultArr[i])) {
             starred = li_html + '&#9733; Spotify Starred Tracks</a></li>' + tmp
         } else if (isFavouritesPlaylist(resultArr[i])) {

mopidy_musicbox_webclient/static/mb.appcache

@@ -1,6 +1,6 @@
 CACHE MANIFEST
 
-# 2016-03-14:v1
+# 2016-03-19:v1
 
 NETWORK:
 *

tests/test_images.js

@@ -12,12 +12,6 @@ var coverArt = require('../mopidy_musicbox_webclient/static/js/images.js')
 var images
 
 before(function () {
-    html =
-        '<span id="songelapsed" class="pull-left"></span>' +
-        '<span id="songlength" class="pull-right"></span>'
-    $(document).ready(function () {
-        $(document.body).add(html)
-    })
     mopidy = sinon.stub(new Mopidy({callingConvention: 'by-position-or-by-name'}))
     images = $('<img id="img_mock">')
 })
@@ -156,7 +150,7 @@ describe('CoverArt', function () {
             var getInfoStub = sinon.stub(coverArt.lastfm.album, 'getInfo')
             getInfoStub.yieldsTo('error', 'code', 'message')
 
-            var consoleSpy = sinon.spy(console, 'log')
+            var consoleSpy = sinon.spy(console, 'error')
             coverArt.getCoverFromLastFm(track, images, '')
 
             assert(consoleSpy.calledOnce)
@@ -190,7 +184,7 @@ describe('CoverArt', function () {
             var getInfoStub = sinon.stub(coverArt.lastfm.artist, 'getInfo')
             getInfoStub.yieldsTo('error', 'code', 'message')
 
-            var consoleSpy = sinon.spy(console, 'log')
+            var consoleSpy = sinon.spy(console, 'error')
 
             coverArt.getArtistImage('mockArtist', images, 'small')
             assert(consoleSpy.calledOnce)

tests/test_library.js

@@ -0,0 +1,54 @@
+var chai = require('chai')
+var should = chai.should()
+var expect = chai.expect
+var assert = chai.assert
+chai.use(require('chai-string'))
+chai.use(require('chai-jquery'))
+
+var sinon = require('sinon')
+
+var coverArt = require('../mopidy_musicbox_webclient/static/js/library.js')
+
+var selectID = '#selectSearchService'
+var schemesArray
+
+before(function () {
+    $(document.body).append('<select id="selectSearchService"></select>')
+    $('#selectSearchService').selectmenu()
+})
+describe('Library', function () {
+    describe('#getSearchSchemes()', function () {
+        beforeEach(function () {
+            schemesArray = ['mockScheme1', 'mockScheme2', 'mockScheme3']
+            mopidy = {
+                getUriSchemes: function () { return $.when(schemesArray) }
+            }
+            $(selectID).empty()
+        })
+
+        it('should add human-readable options for backend schemes', function () {
+            uriHumanList = [['mockScheme2', 'mockUriHuman2']]
+
+            library.getSearchSchemes()
+            assert($(selectID).children().length === schemesArray.length + 1)
+            $(selectID).children(':eq(2)').should.have.text('MockUriHuman2')
+        })
+
+        it('should get default value from cookie', function () {
+            $.cookie('searchScheme', 'mockScheme3')
+            library.getSearchSchemes()
+            $(selectID + ' option:selected').should.have.value('mockScheme3')
+        })
+
+        it('should default to "all" backends if no cookie is available', function () {
+            $.removeCookie('searchScheme')
+            library.getSearchSchemes()
+            $(selectID + ' option:selected').should.have.value('all')
+        })
+
+        it('should capitalize first character of backend schema', function () {
+            library.getSearchSchemes()
+            $(selectID).children(':eq(1)').should.have.text('MockScheme1')
+        })
+    })
+})