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

Lazy loader loading indicator

Browse Source
This commit is contained in:
James Barnsley
2017-01-27 08:15:59 +13:00
parent 0adfd9cd23
commit 598dd9f0b0
15 changed files with 67 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/js/components/LazyLoadListener.js
View File

@ -19,8 +19,8 @@ export default class LazyLoadListener extends React.Component{
}
handleScroll(e){
if( (window.innerHeight + window.scrollY) >= document.body.offsetHeight ){
if( !this.state.loading ){
if( (window.innerHeight + window.scrollY) >= (document.body.offsetHeight - 80) ){
if( !this.state.loading && this.props.enabled ){
this.setState({ loading: true })
this.props.loadMore();
}
@ -30,6 +30,10 @@ export default class LazyLoadListener extends React.Component{
}
render(){
return <div className='lazy-loader'></div>
return (
<div className={this.state.loading ? "lazy-loader loading" : "lazy-loader"}>
<div className="loader"></div>
</div>
)
}
}

3
src/js/views/Album.js
View File

@ -66,7 +66,6 @@ class Album extends React.Component{
}
loadMore(){
if( !this.props.album.tracks_more ) return
this.props.spotifyActions.getURL( this.props.album.tracks_more, 'SPOTIFY_ALBUM_LOADED_MORE' );
}
@ -118,7 +117,7 @@ class Album extends React.Component{
<section className="list-wrapper">
{ this.props.album.tracks ? <TrackList tracks={ this.props.album.tracks } /> : null }
<LazyLoadListener loadMore={ () => this.loadMore() }/>
<LazyLoadListener enabled={this.props.album.tracks_more} loadMore={ () => this.loadMore() }/>
</section>
</div>

3
src/js/views/Artist.js
View File

@ -81,7 +81,6 @@ class Artist extends React.Component{
}
loadMore(){
if( !this.props.artist.albums_more ) return
this.props.spotifyActions.getURL( this.props.artist.albums_more, 'SPOTIFY_ARTIST_ALBUMS_LOADED', this.props.params.uri );
}
@ -164,7 +163,7 @@ class Artist extends React.Component{
<h4 className="left-padding">Albums</h4>
<section className="grid-wrapper no-top-padding">
<AlbumGrid albums={albums} />
<LazyLoadListener loadMore={ () => this.loadMore() }/>
<LazyLoadListener enabled={this.props.artist.albums_more} loadMore={ () => this.loadMore() }/>
</section>
</div>
)

3
src/js/views/Playlist.js
View File

@ -54,7 +54,6 @@ class Playlist extends React.Component{
}
loadMore(){
if( !this.props.playlist.tracks_more ) return
this.props.spotifyActions.getURL( this.props.playlist.tracks_more, 'PLAYLIST_LOADED_MORE_TRACKS', this.props.playlist.uri );
}
@ -155,7 +154,7 @@ class Playlist extends React.Component{
<section className="list-wrapper">
{ this.props.playlist.tracks ? <TrackList context={ this.props.playlist.can_edit ? 'editable-playlist' : 'playlist'} tracks={ this.props.playlist.tracks } removeTracks={ tracks_indexes => this.removeTracks(tracks_indexes) } reorderTracks={ (indexes, index) => this.reorderTracks(indexes, index) } /> : null }
<LazyLoadListener loadMore={ () => this.loadMore() }/>
<LazyLoadListener enabled={this.props.playlist.tracks_more} loadMore={ () => this.loadMore() }/>
</section>
</div>

12
src/js/views/Search.js
View File

@ -47,9 +47,7 @@ class Search extends React.Component{
}
loadMore(type){
if( this.props[type+'_more'] ){
this.props.spotifyActions.getURL( this.props[type+'_more'], 'SPOTIFY_SEARCH_RESULTS_LOADED_MORE_'+type.toUpperCase());
}
this.props.spotifyActions.getURL( this.props[type+'_more'], 'SPOTIFY_SEARCH_RESULTS_LOADED_MORE_'+type.toUpperCase());
}
renderResults(){
@ -91,7 +89,7 @@ class Search extends React.Component{
<div>
<section className="grid-wrapper">
<ArtistGrid artists={artists} />
<LazyLoadListener loadMore={ () => this.loadMore('artists') }/>
<LazyLoadListener enabled={this.props['artists_more']} loadMore={ () => this.loadMore('artists') }/>
</section>
</div>
)
@ -102,7 +100,7 @@ class Search extends React.Component{
<div>
<section className="grid-wrapper">
<AlbumGrid albums={albums} />
<LazyLoadListener loadMore={ () => this.loadMore('albums') }/>
<LazyLoadListener enabled={this.props['albums_more']} loadMore={ () => this.loadMore('albums') }/>
</section>
</div>
)
@ -113,7 +111,7 @@ class Search extends React.Component{
<div>
<section className="grid-wrapper">
<PlaylistGrid playlists={playlists} />
<LazyLoadListener loadMore={ () => this.loadMore('playlists') }/>
<LazyLoadListener enabled={this.props['playlists_more']} loadMore={ () => this.loadMore('playlists') }/>
</section>
</div>
)
@ -124,7 +122,7 @@ class Search extends React.Component{
<div>
<section className="list-wrapper">
<TrackList show_source_icon={true} tracks={ this.props.tracks } />
<LazyLoadListener loadMore={ () => this.loadMore('tracks') }/>
<LazyLoadListener enabled={this.props['tracks_more']} loadMore={ () => this.loadMore('tracks') }/>
</section>
</div>
)

3
src/js/views/User.js
View File

@ -33,7 +33,6 @@ class User extends React.Component{
}
loadMore(){
if( !this.props.user.playlists_more ) return
this.props.spotifyActions.getURL( this.props.user.playlists_more, 'SPOTIFY_USER_PLAYLISTS_LOADED', this.props.params.uri )
}
@ -83,7 +82,7 @@ class User extends React.Component{
<section className="grid-wrapper">
<PlaylistGrid playlists={playlists} />
<LazyLoadListener loadMore={ () => this.loadMore() }/>
<LazyLoadListener enabled={this.props.user.playlists_more} loadMore={ () => this.loadMore() }/>
</section>
</div>

6
src/js/views/discover/DiscoverCategory.js
View File

@ -30,9 +30,7 @@ class DiscoverCategory extends React.Component{
}
loadMore(){
if (this.props.category.playlists_more){
this.props.spotifyActions.getURL( this.props.category.playlists_more, 'SPOTIFY_CATEGORY_PLAYLISTS_LOADED', 'category:'+this.props.params.id );
}
this.props.spotifyActions.getURL( this.props.category.playlists_more, 'SPOTIFY_CATEGORY_PLAYLISTS_LOADED', 'category:'+this.props.params.id );
}
render(){
@ -54,7 +52,7 @@ class DiscoverCategory extends React.Component{
<section className="grid-wrapper">
<PlaylistGrid playlists={playlists} />
</section>
<LazyLoadListener loadMore={ () => this.loadMore() }/>
<LazyLoadListener enabled={this.props.category.playlists_more} loadMore={ () => this.loadMore() }/>
</div>
);
}

3
src/js/views/discover/DiscoverNewReleases.js
View File

@ -21,7 +21,6 @@ class DiscoverNewReleases extends React.Component{
}
loadMore(){
if (!this.props.new_releases_more) return
this.props.spotifyActions.getURL(this.props.new_releases_more, 'SPOTIFY_NEW_RELEASES_LOADED');
}
@ -43,7 +42,7 @@ class DiscoverNewReleases extends React.Component{
<section className="grid-wrapper">
<AlbumGrid albums={albums} />
</section>
<LazyLoadListener loadMore={ () => this.loadMore() }/>
<LazyLoadListener enabled={this.props.new_releases_more} loadMore={ () => this.loadMore() }/>
</div>
);
}

3
src/js/views/library/LibraryAlbums.js
View File

@ -29,7 +29,6 @@ class LibraryAlbums extends React.Component{
}
loadMore(){
if( !this.props.library_albums_more ) return
this.props.spotifyActions.getURL( this.props.library_albums_more, 'SPOTIFY_LIBRARY_ALBUMS_LOADED' );
}
@ -173,7 +172,7 @@ class LibraryAlbums extends React.Component{
<div className="view library-albums-view">
<Header icon="cd" title="My albums" actions={actions} />
{ this.renderView(albums) }
<LazyLoadListener loadMore={ () => this.loadMore() }/>
<LazyLoadListener enabled={this.props.library_albums_more} loadMore={ () => this.loadMore() }/>
</div>
);
}

3
src/js/views/library/LibraryArtists.js
View File

@ -26,7 +26,6 @@ class LibraryArtists extends React.Component{
}
loadMore(){
if( !this.props.library_artists_more ) return
this.props.spotifyActions.getURL( this.props.library_artists_more, 'SPOTIFY_LIBRARY_ARTISTS_LOADED' );
}
@ -127,7 +126,7 @@ class LibraryArtists extends React.Component{
<div className="view library-artists-view">
<Header icon="mic" title="My artists" actions={actions} />
{ this.renderView(artists) }
<LazyLoadListener loadMore={ () => this.loadMore() }/>
<LazyLoadListener enabled={this.props.library_artists_more} loadMore={ () => this.loadMore() }/>
</div>
);
}

11
src/js/views/library/LibraryLocalAlbums.js
View File

@ -36,7 +36,7 @@ class LibraryLocalAlbums extends React.Component{
}
}
loadMore(){
moreURIsToLoad(){
var uris = []
if (this.props.albums && this.props.local_albums){
for (var i = 0; i < this.props.local_albums.length; i++){
@ -50,7 +50,12 @@ class LibraryLocalAlbums extends React.Component{
}
}
if (uris && uris.length > 0) this.props.mopidyActions.getAlbums(uris)
return uris
}
loadMore(){
var uris = this.moreURIsToLoad()
this.props.mopidyActions.getAlbums(uris)
}
setSort(value){
@ -147,7 +152,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() }/>
<LazyLoadListener enabled={(this.moreURIsToLoad().length > 0)} loadMore={ () => this.loadMore() }/>
</div>
)
}

3
src/js/views/library/LibraryTracks.js
View File

@ -23,7 +23,6 @@ class LibraryTracks extends React.Component{
}
loadMore(){
if( !this.props.tracks_more ) return
this.props.spotifyActions.getURL( this.props.tracks_more, 'SPOTIFY_LIBRARY_TRACKS_LOADED_MORE' );
}
@ -33,7 +32,7 @@ class LibraryTracks extends React.Component{
<Header icon="music" title="My tracks" />
<section className="list-wrapper">
{ this.props.tracks ? <TrackList tracks={this.props.tracks} /> : null }
<LazyLoadListener loadMore={ () => this.loadMore() }/>
<LazyLoadListener enabled={this.props.tracks_more} loadMore={ () => this.loadMore() }/>
</section>
</div>
);

1
src/scss/app.scss
View File

@ -22,6 +22,7 @@
@import 'components/header';
@import 'components/notifications';
@import 'components/dropdown-field';
@import 'components/loader';
@import 'views/artist';
@import 'views/user';

24
src/scss/components/_loader.scss Executable file
View File

@ -0,0 +1,24 @@
.lazy-loader {
padding: 20px 0 40px;
.loader {
@include animate();
opacity: 0;
margin: 0 auto;
width: 30px;
height: 30px;
border: {
radius: 100%;
style: solid;
color: $mid_grey;
width: 2px;
}
border-top-color: transparent;
}
&.loading .loader {
@include spin();
opacity: 1;
}
}

12
src/scss/global/_variables.scss
View File

@ -49,6 +49,18 @@ $bp_shallow: 650px;
animation-timing-function: linear;
}
@keyframes spin {
from { transform: rotate(0); }
to { transform: rotate(360deg); }
}
@mixin spin( $duration: 0.5s ){
animation-name: spin;
animation-duration: $duration;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@mixin blur( $size: 10px ) {
-webkit-filter: blur( $size );
filter: blur( $size );