diff --git a/.gitignore b/.gitignore
index e66dbe5..8c6a739 100644
--- a/.gitignore
+++ b/.gitignore
@@ -19,3 +19,5 @@ npm-debug.log
.project
*.pbxproj
*.egg-info
+.cache
+.eggs
diff --git a/README.rst b/README.rst
index 00fa03e..6076f85 100644
--- a/README.rst
+++ b/README.rst
@@ -85,6 +85,7 @@ v2.3.0 (UNRELEASED)
(Addresses: `#133 `_).
- Optimized updating of 'now playing' icons in tracklists.
(Addresses: `#184 `_).
+- Optimized rendering of large lists of tracks to make UI more responsive.
**Fixes**
@@ -93,6 +94,8 @@ v2.3.0 (UNRELEASED)
- last.fm artist image lookups should now always return the correct image for similarly named artists.
- Ensure that browsed tracks are always added to the queue using the track URI rather than the track's position in the folder.
(Fixes: `#124 `_).
+- Fixed an issue where searches would be performed as soon as the user switches to the 'Search' pane,
+ instead of waiting for the 'Search!' button to be clicked.
v2.2.0 (2016-03-01)
-------------------
diff --git a/mopidy_musicbox_webclient/static/js/functionsvars.js b/mopidy_musicbox_webclient/static/js/functionsvars.js
index 83bb401..7079d62 100644
--- a/mopidy_musicbox_webclient/static/js/functionsvars.js
+++ b/mopidy_musicbox_webclient/static/js/functionsvars.js
@@ -175,6 +175,7 @@ function artistsToString (artists, max) {
*********************************************************/
function albumTracksToTable (pl, target, uri) {
var track, previousTrack, nextTrack
+ var html = ''
$(target).empty()
$(target).attr('data', uri)
for (var i = 0; i < pl.length; i++) {
@@ -182,8 +183,9 @@ function albumTracksToTable (pl, target, uri) {
nextTrack = i < pl.length - 1 ? pl[i + 1] : undefined
track = pl[i]
popupData[track.uri] = track
- renderSongLi(previousTrack, track, nextTrack, uri, '', target, i, pl.length)
+ html += renderSongLi(previousTrack, track, nextTrack, uri, '', target, i, pl.length)
}
+ $(target).append(html)
updatePlayIcons(songdata.track.uri, songdata.tlid, controls.getIconForAction())
}
@@ -191,15 +193,16 @@ function renderSongLi (previousTrack, track, nextTrack, uri, tlid, target, curre
var name
var tlidParameter = ''
var onClick = ''
+ var html = ''
track.name = validateTrackName(track, currentIndex)
// Leave out unplayable items
if (track.name.substring(0, 12) === '[unplayable]') {
- return
+ return html
}
// Streams
if (track.length === -1) {
- $(target).append(' ' + track.name + ' [Stream]
')
- return
+ html += ' ' + track.name + ' [Stream]
'
+ return html
}
if (target === CURRENT_PLAYLIST_TABLE && typeof tlid === 'number' && tlid >= 0) { // Current queue: Show popup menu icon. onClick plays track.
@@ -209,33 +212,33 @@ function renderSongLi (previousTrack, track, nextTrack, uri, tlid, target, curre
onClick = 'return controls.playTracks(\'\', mopidy, \'' + track.uri + '\', \'' + uri + '\');'
}
- $(target).append(
+ html +=
'' +
'' +
'' +
- ' ' + track.name + '
'
- )
+ ' ' + track.name + '
'
+
if (listLength === 1 || !hasSameAlbum(previousTrack, track) && !hasSameAlbum(track, nextTrack)) {
- renderSongLiAlbumInfo(track, target)
- }
- // TODO: remove this hard-coded conditions for 'ALBUM_TABLE' and 'BROWSE_TABLE'
- if (target !== ALBUM_TABLE && target !== BROWSE_TABLE && !hasSameAlbum(previousTrack, track)) {
- // Starting to render a new album in the list.
- renderSongLiDivider(track, nextTrack, currentIndex, target)
+ html += renderSongLiAlbumInfo(track)
}
+ html += ''
+ return html
}
+/* Tracklist renderer for track artist and album name. */
function renderSongLiAlbumInfo (track, target) {
- var html = '
'
- html += renderSongLiTrackArtists(track)
+ var html = renderSongLiTrackArtists(track)
if (track.album && track.album.name) {
html += ' - ' + track.album.name + ''
}
- target = getjQueryID(target, track.uri, true)
- $(target).children('a').eq(1).append(html)
- $(target + ' a h1 i').addClass(getMediaClass(track.uri))
+ if (typeof target !== 'undefined' && target.length > 0) {
+ target = getjQueryID(target, track.uri, true)
+ $(target).children('a').eq(1).append(html)
+ }
+ return html
}
+/* Tracklist renderer for track artist information. */
function renderSongLiTrackArtists (track) {
var html = ''
if (track.artists) {
@@ -252,23 +255,28 @@ function renderSongLiTrackArtists (track) {
return html
}
-function renderSongLiDivider (track, nextTrack, currentIndex, target) {
- target = getjQueryID(target, track.uri, true)
- // Render differently if part of an album
- if (hasSameAlbum(track, nextTrack)) {
- // Large divider with album cover
- $(target).before(
+/* Tracklist renderer to insert dividers between albums. */
+function renderSongLiDivider (previousTrack, track, nextTrack, currentIndex, target) {
+ var html = ''
+ // Render differently if part of an album.
+ if (!hasSameAlbum(previousTrack, track) && hasSameAlbum(track, nextTrack)) {
+ // Large divider with album cover.
+ html +=
'' +
'
' +
' ' + track.album.name + '
' +
renderSongLiTrackArtists(track) + '
'
- )
// Retrieve album covers
images.setAlbumImage(track.uri, getjQueryID(target + '-cover', track.uri, true), mopidy, 'small')
- } else if (currentIndex > 0) {
+ } else if (!hasSameAlbum(track, nextTrack) && currentIndex > 0) {
// Small divider
- $(target).before(' ')
+ html += ' '
}
+ if (typeof target !== 'undefined' && target.length > 0) {
+ target = getjQueryID(target, track.uri, true)
+ $(target).before(html)
+ }
+ return html
}
function renderSongLiBackButton (results, target, onClick, optional) {
@@ -317,6 +325,7 @@ function resultsToTables (results, target, uri, onClickBack, backIsOptional) {
$(target).attr('data', uri)
var track, previousTrack, nextTrack, tlid
+ var html = ''
// Break into albums and put in tables
for (i = 0; i < results.length; i++) {
@@ -331,9 +340,11 @@ function resultsToTables (results, target, uri, onClickBack, backIsOptional) {
nextTrack = nextTrack ? nextTrack.track : undefined
}
popupData[track.uri] = track
- renderSongLi(previousTrack, track, nextTrack, uri, tlid, target, i, results.length)
+ html += renderSongLiDivider(previousTrack, track, nextTrack, i, target)
+ html += renderSongLi(previousTrack, track, nextTrack, uri, tlid, target, i, results.length)
}
}
+ $(target).append(html)
updatePlayIcons(songdata.track.uri, songdata.tlid, controls.getIconForAction())
}
diff --git a/mopidy_musicbox_webclient/static/js/gui.js b/mopidy_musicbox_webclient/static/js/gui.js
index 41f1dca..a175b52 100644
--- a/mopidy_musicbox_webclient/static/js/gui.js
+++ b/mopidy_musicbox_webclient/static/js/gui.js
@@ -419,7 +419,6 @@ function locationHashChanged () {
case 'search':
$('#navsearch a').addClass($.mobile.activeBtnClass)
$('#searchinput').focus()
- library.initSearch($('#searchinput').val())
break
case 'stream':
$('#navstream a').addClass('ui-state-active ui-state-persist ui-btn-active')
diff --git a/mopidy_musicbox_webclient/static/js/process_ws.js b/mopidy_musicbox_webclient/static/js/process_ws.js
index b6464d4..794c17e 100644
--- a/mopidy_musicbox_webclient/static/js/process_ws.js
+++ b/mopidy_musicbox_webclient/static/js/process_ws.js
@@ -89,6 +89,7 @@ function processBrowseDir (resultArr) {
var uri = resultArr[0].uri
var length = 0 || resultArr.length
customTracklists[BROWSE_TABLE] = []
+ var html = ''
for (var i = 0, index = 0; i < resultArr.length; i++) {
if (resultArr[i].type === 'track') {
@@ -100,7 +101,7 @@ function processBrowseDir (resultArr) {
customTracklists[BROWSE_TABLE].push(ref)
uris.push(ref.uri)
- renderSongLi(previousRef, ref, nextRef, BROWSE_TABLE, '', BROWSE_TABLE, index, resultArr.length)
+ html += renderSongLi(previousRef, ref, nextRef, BROWSE_TABLE, '', BROWSE_TABLE, index, resultArr.length)
index++
} else {
@@ -110,13 +111,13 @@ function processBrowseDir (resultArr) {
} else {
iconClass = getMediaClass(resultArr[i].uri)
}
- $(BROWSE_TABLE).append(
- '' +
- ' ' + resultArr[i].name + '
'
- )
+ html += '' +
+ ' ' + resultArr[i].name + '
'
}
}
+ $(BROWSE_TABLE).append(html)
+
updatePlayIcons(songdata.track.uri, songdata.tlid, controls.getIconForAction())
if (uris.length > 0) {
@@ -138,7 +139,7 @@ function processBrowseDir (resultArr) {
}
if (!hasSameAlbum(previousTrack, track)) {
// Starting to render a new album in the list.
- renderSongLiDivider(track, nextTrack, i, BROWSE_TABLE)
+ renderSongLiDivider(previousTrack, track, nextTrack, i, BROWSE_TABLE)
}
}
})
diff --git a/mopidy_musicbox_webclient/static/mb.appcache b/mopidy_musicbox_webclient/static/mb.appcache
index 6e558db..eca4c70 100644
--- a/mopidy_musicbox_webclient/static/mb.appcache
+++ b/mopidy_musicbox_webclient/static/mb.appcache
@@ -1,6 +1,6 @@
CACHE MANIFEST
-# 2016-04-26:v2
+# 2016-04-27:v1
NETWORK:
*