Lazy-loading local albums - allows us to fetch full data without killing server

This commit is contained in:
James Barnsley
2017-01-26 08:51:35 +13:00
parent 57c8a75df1
commit 0d6a53948c
3 changed files with 60 additions and 26 deletions

View File

@ -199,9 +199,16 @@ export function getAlbum( uri ){
}
}
export function getAlbums(){
export function getAlbums( uris ){
return {
type: 'MOPIDY_GET_ALBUMS'
type: 'MOPIDY_GET_ALBUMS',
uris: uris
}
}
export function getLocalAlbums(){
return {
type: 'MOPIDY_GET_LOCAL_ALBUMS'
}
}

View File

@ -544,42 +544,50 @@ const MopidyMiddleware = (function(){
* ======================================================================================
**/
case 'MOPIDY_GET_ALBUMS':
case 'MOPIDY_GET_LOCAL_ALBUMS':
instruct( socket, store, 'library.browse', { uri: 'local:directory?type=album' } )
.then( response => {
var uris = helpers.asURIs(response)
store.dispatch({
type: 'ALBUMS_LOADED',
albums: response
type: 'MOPIDY_GET_ALBUMS',
uris: uris.slice(0,50)
});
store.dispatch({
type: 'LOCAL_ALBUMS_LOADED',
uris: helpers.asURIs(response)
uris: uris
});
})
break;
// fetch album artwork
instruct( socket, store, 'library.getImages', { uris: helpers.asURIs(response) } )
.then(response => {
case 'MOPIDY_GET_ALBUMS':
instruct( socket, store, 'library.lookup', { uris: action.uris } )
.then( response => {
var albums = []
var albums = []
for (var uri in response){
if (response.hasOwnProperty(uri)){
albums.push({
uri: uri,
images: response[uri]
})
}
}
for (var uri in response){
if (response.hasOwnProperty(uri) && response[uri].length > 0 && response[uri][0] && response[uri][0].album ){
var album = Object.assign(
{},
{
artists: response[uri][0].artists,
tracks: response[uri],
tracks_total: response[uri].length
},
response[uri][0].album
)
console.log(albums)
albums.push(album)
}
}
store.dispatch({
type: 'ALBUMS_LOADED',
albums: albums
});
})
store.dispatch({
type: 'ALBUMS_LOADED',
albums: albums
});
})
break;
@ -679,7 +687,7 @@ const MopidyMiddleware = (function(){
var existingAlbum = albums.find(getByURI);
if( !existingAlbum ){
albums.push(album)
}
}
}
}
if (albums){

View File

@ -7,6 +7,7 @@ import AlbumGrid from '../../components/AlbumGrid'
import Header from '../../components/Header'
import DropdownField from '../../components/DropdownField'
import List from '../../components/List'
import LazyLoadListener from '../../components/LazyLoadListener'
import * as helpers from '../../helpers'
import * as uiActions from '../../services/ui/actions'
@ -31,10 +32,27 @@ class LibraryLocalAlbums extends React.Component{
loadAlbums(props = this.props){
if (props.mopidy_connected && !this.props.local_albums){
this.props.mopidyActions.getAlbums();
this.props.mopidyActions.getLocalAlbums();
}
}
loadMore(){
var uris = []
if (this.props.albums && this.props.local_albums){
for (var i = 0; i < this.props.local_albums.length; i++){
var uri = this.props.local_albums[i]
if (!this.props.albums.hasOwnProperty(uri)){
uris.push(uri)
}
// limit each lookup to 50 URIs
if (uris.length >= 50) break
}
}
if (uris && uris.length > 0) this.props.mopidyActions.getAlbums(uris)
}
setSort(value){
var reverse = false
if( this.props.sort == value ) reverse = !this.props.sort_reverse
@ -125,6 +143,7 @@ class LibraryLocalAlbums extends React.Component{
<div className="view library-local-view">
<Header icon="music" title="Local albums" actions={actions} />
{this.renderView(albums)}
<LazyLoadListener loadMore={ () => this.loadMore() }/>
</div>
)
}