secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Lazy-rendering large library lists for faster rendering and filtering

Browse Source
This commit is contained in:
James Barnsley
2017-10-20 14:58:19 +13:00
parent fae45a3218
commit 19391e21ee
3 changed files with 123 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/js/views/library/LibraryPlaylists.js
View File

@ -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/"} />
<LazyLoadListener loading={this.state.limit < total_playlists} loadMore={() => this.setState({limit: this.state.limit + this.state.per_page})} />
</section>
)
} else {
@ -169,13 +177,13 @@ class LibraryPlaylists extends React.Component{
<PlaylistGrid
handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
playlists={playlists} />
<LazyLoadListener loading={this.state.limit < total_playlists} loadMore={() => this.setState({limit: this.state.limit + this.state.per_page})} />
</section>
)
}
}
render(){
var source_options = [
{
value: 'all',