Lazy-loading local albums - allows us to fetch full data without killing server
This commit is contained in:
@ -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'
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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){
|
||||
|
||||
@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user