diff --git a/src/js/views/library/LibraryAlbums.js b/src/js/views/library/LibraryAlbums.js index 2000c3ee..395f9ae3 100755 --- a/src/js/views/library/LibraryAlbums.js +++ b/src/js/views/library/LibraryAlbums.js @@ -12,6 +12,7 @@ import TrackList from '../../components/TrackList' import ArtistSentence from '../../components/ArtistSentence' import DropdownField from '../../components/DropdownField' import FilterField from '../../components/FilterField' +import LazyLoadListener from '../../components/LazyLoadListener' import * as helpers from '../../helpers' import * as coreActions from '../../services/core/actions' @@ -25,7 +26,9 @@ class LibraryAlbums extends React.Component{ super(props) this.state = { - filter: '' + filter: '', + limit: 50, + per_page: 50 } } @@ -114,75 +117,7 @@ class LibraryAlbums extends React.Component{ this.props.uiActions.set(data) } - renderView(albums){ - if (!albums || albums.length <= 0) return null - - if (this.props.view == 'list'){ - var columns = [ - { - label: 'Name', - name: 'name' - }, - { - label: 'Artists', - name: 'artists' - }, - { - label: 'Added', - name: 'added_at' - }, - { - label: 'Tracks', - name: 'tracks_total' - }, - { - label: 'Source', - name: 'source' - } - ] - return ( - this.handleContextMenu(e,item)} - rows={albums} - columns={columns} - className="album-list" - link_prefix={global.baseURL+"album/"} /> - ) - }else if (this.props.view == 'detail'){ - return ( -
- { - albums.map(album => { - return ( -
- - - -
- -

{ album.name }

- -

-
-
- -
-
- ) - }) - } -
- ) - } else { - return ( - this.handleContextMenu(e,item)} - albums={albums} /> - ) - } - } - - render(){ + renderView(){ var albums = [] // Spotify library items @@ -222,6 +157,57 @@ class LibraryAlbums extends React.Component{ albums = helpers.applyFilter('name', this.state.filter, albums) } + // Apply our lazy-load-rendering + var total_albums = albums.length; + albums = albums.slice(0, this.state.limit); + + if (this.props.view == 'list'){ + var columns = [ + { + label: 'Name', + name: 'name' + }, + { + label: 'Artists', + name: 'artists' + }, + { + label: 'Added', + name: 'added_at' + }, + { + label: 'Tracks', + name: 'tracks_total' + }, + { + label: 'Source', + name: 'source' + } + ] + return ( +
+ this.handleContextMenu(e,item)} + rows={albums} + columns={columns} + className="album-list" + link_prefix={global.baseURL+"album/"} /> + this.setState({limit: this.state.limit + this.state.per_page})} /> +
+ ) + } else { + return ( +
+ this.handleContextMenu(e,item)} + albums={albums} /> + this.setState({limit: this.state.limit + this.state.per_page})} /> +
+ ) + } + } + + render(){ var source_options = [ { value: 'all', @@ -273,7 +259,7 @@ class LibraryAlbums extends React.Component{ var options = ( - this.setState({filter: value})} /> + this.setState({filter: value, limit: this.state.per_page})} /> {this.setSort(val); this.props.uiActions.hideContextMenu() }} /> {this.props.uiActions.set({ library_albums_view: val }); this.props.uiActions.hideContextMenu() }} /> {this.props.uiActions.set({ library_albums_source: val}); this.props.uiActions.hideContextMenu() }} /> @@ -282,13 +268,8 @@ class LibraryAlbums extends React.Component{ return (
-
- -
- {this.renderView(albums)} -
- + {this.renderView()}
); } diff --git a/src/js/views/library/LibraryArtists.js b/src/js/views/library/LibraryArtists.js index 5b3e656d..0ccaac70 100755 --- a/src/js/views/library/LibraryArtists.js +++ b/src/js/views/library/LibraryArtists.js @@ -4,12 +4,12 @@ import { connect } from 'react-redux' import { bindActionCreators } from 'redux' import { Link } from 'react-router' -import LazyLoadListener from '../../components/LazyLoadListener' import Header from '../../components/Header' import ArtistGrid from '../../components/ArtistGrid' import List from '../../components/List' import DropdownField from '../../components/DropdownField' import FilterField from '../../components/FilterField' +import LazyLoadListener from '../../components/LazyLoadListener' import * as helpers from '../../helpers' import * as uiActions from '../../services/ui/actions' @@ -22,7 +22,9 @@ class LibraryArtists extends React.Component{ super(props) this.state = { - filter: '' + filter: '', + limit: 50, + per_page: 50 } } @@ -85,44 +87,7 @@ class LibraryArtists extends React.Component{ this.props.uiActions.set(data) } - renderView(artists){ - if (this.props.view == 'list'){ - var columns = [ - { - label: 'Name', - name: 'name' - }, - { - label: 'Followers', - name: 'followers.total' - }, - { - label: 'Popularity', - name: 'popularity' - } - ] - return ( -
- this.handleContextMenu(e,item)} - rows={artists} - columns={columns} - className="artist-list" - link_prefix={global.baseURL+"artist/"} /> -
- ) - } else { - return ( -
- this.handleContextMenu(e,item)} - artists={artists} /> -
- ) - } - } - - render(){ + renderView(){ var artists = [] // Mopidy library items @@ -162,6 +127,49 @@ class LibraryArtists extends React.Component{ artists = helpers.applyFilter('name', this.state.filter, artists) } + // Apply our lazy-load-rendering + var total_artists = artists.length; + artists = artists.slice(0, this.state.limit); + + if (this.props.view == 'list'){ + var columns = [ + { + label: 'Name', + name: 'name' + }, + { + label: 'Followers', + name: 'followers.total' + }, + { + label: 'Popularity', + name: 'popularity' + } + ] + return ( +
+ this.handleContextMenu(e,item)} + rows={artists} + columns={columns} + className="artist-list" + link_prefix={global.baseURL+"artist/"} /> + this.setState({limit: this.state.limit + this.state.per_page})} /> +
+ ) + } else { + return ( +
+ this.handleContextMenu(e,item)} + artists={artists} /> + this.setState({limit: this.state.limit + this.state.per_page})} /> +
+ ) + } + } + + render(){ var source_options = [ { value: 'all', @@ -205,7 +213,7 @@ class LibraryArtists extends React.Component{ var options = ( - this.setState({filter: value})} /> + this.setState({filter: value, limit: this.state.per_page})} /> {this.setSort(value); this.props.uiActions.hideContextMenu() }} /> {this.props.uiActions.set({ library_artists_view: value }); this.props.uiActions.hideContextMenu()}} /> {this.props.uiActions.set({ library_artists_source: val}); this.props.uiActions.hideContextMenu() }} /> @@ -214,8 +222,8 @@ class LibraryArtists extends React.Component{ return (
-
- { this.renderView(artists) } +
+ {this.renderView()}
); } diff --git a/src/js/views/library/LibraryPlaylists.js b/src/js/views/library/LibraryPlaylists.js index a8d680d7..fa667c8c 100755 --- a/src/js/views/library/LibraryPlaylists.js +++ b/src/js/views/library/LibraryPlaylists.js @@ -10,6 +10,7 @@ import List from '../../components/List' import DropdownField from '../../components/DropdownField' import Header from '../../components/Header' import FilterField from '../../components/FilterField' +import LazyLoadListener from '../../components/LazyLoadListener' import * as helpers from '../../helpers' import * as coreActions from '../../services/core/actions' @@ -23,7 +24,9 @@ class LibraryPlaylists extends React.Component{ super(props) this.state = { - filter: '' + filter: '', + limit: 50, + per_page: 50 } } @@ -87,7 +90,7 @@ class LibraryPlaylists extends React.Component{ } renderView(){ - var playlists = [] + var playlists = []; // Spotify library items if (this.props.spotify_library_playlists && (this.props.source == 'all' || this.props.source == 'spotify')){ @@ -109,13 +112,17 @@ class LibraryPlaylists extends React.Component{ } } - playlists = helpers.sortItems(playlists, this.props.sort, this.props.sort_reverse) - playlists = helpers.removeDuplicates(playlists) + playlists = helpers.sortItems(playlists, this.props.sort, this.props.sort_reverse); + playlists = helpers.removeDuplicates(playlists); if (this.state.filter !== ''){ - playlists = helpers.applyFilter('name', this.state.filter, playlists) + playlists = helpers.applyFilter('name', this.state.filter, playlists); } + // Apply our lazy-load-rendering + var total_playlists = playlists.length; + playlists = playlists.slice(0, this.state.limit); + if (this.props.view == 'list'){ if (this.props.slim_mode){ var columns = [ @@ -161,6 +168,7 @@ class LibraryPlaylists extends React.Component{ columns={columns} className="playlist-list" link_prefix={global.baseURL+"playlist/"} /> + this.setState({limit: this.state.limit + this.state.per_page})} /> ) } else { @@ -169,13 +177,13 @@ class LibraryPlaylists extends React.Component{ this.handleContextMenu(e,item)} playlists={playlists} /> + this.setState({limit: this.state.limit + this.state.per_page})} /> ) } } render(){ - var source_options = [ { value: 'all',