Lazy loader; Filter on album library

src/js/views/library/LibraryAlbums.js

@@ -108,28 +108,26 @@ class LibraryAlbums extends React.Component{
 					label: 'Added',
 					name: 'added_at'
 				},
-				{
-					label: 'Released',
-					name: 'release_date'
-				},
 				{
 					label: 'Tracks',
 					name: 'tracks_total'
+				},
+				{
+					label: 'Source',
+					name: 'source'
 				}
 			]
 			return (
-				<section className="content-wrapper">
-					<List 
-						handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
-						rows={albums} 
-						columns={columns} 
-						className="album-list"
-						link_prefix={global.baseURL+"album/"} />
-				</section>
+				<List 
+					handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
+					rows={albums} 
+					columns={columns} 
+					className="album-list"
+					link_prefix={global.baseURL+"album/"} />
 			)
 		}else if( this.props.view == 'detail' ){
 			return (
-				<section className="content-wrapper albums-detail-subview">
+				<div>
 					{
 						albums.map( album => {
 							return (
@@ -150,38 +148,42 @@ class LibraryAlbums extends React.Component{
 							)
 						})
 					}
-				</section>			
+				</div>			
 			)
 		}else{
 			return (
-				<section className="content-wrapper">
-					<AlbumGrid 
-						handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
-						albums={albums} />
-				</section>			
+				<AlbumGrid 
+					handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
+					albums={albums} />
 			)
 		}
 	}
 
 	render(){
-		if (helpers.isLoading(this.props.load_queue,['spotify_me/albums'])){
-			return (
-				<div className="view library-albums-view">
-					<Header icon="cd" title="My albums" />
-					<div className="body-loader">
-						<div className="loader"></div>
-					</div>
-				</div>
-			)
-		}
-
 		var albums = []
-
 		if (this.props.library_albums && this.props.albums){
 			for (var i = 0; i < this.props.library_albums.length; i++){
 				var uri = this.props.library_albums[i]
+
 				if (this.props.albums.hasOwnProperty(uri)){
-					albums.push(this.props.albums[uri])
+					switch (this.props.filter){
+
+						case 'spotify':
+							if (this.props.albums[uri].source == 'spotify'){
+								albums.push(this.props.albums[uri])
+							}
+							break
+
+						case 'local':
+							if (this.props.albums[uri].source == 'local'){
+								albums.push(this.props.albums[uri])
+							}
+							break
+
+						default:
+							albums.push(this.props.albums[uri])
+							break
+					}
 				}
 			}
 
@@ -190,6 +192,21 @@ class LibraryAlbums extends React.Component{
 			}
 		}
 
+		var filter_options = [
+			{
+				value: 'all',
+				label: 'All'
+			},
+			{
+				value: 'local',
+				label: 'Local'
+			},
+			{
+				value: 'spotify',
+				label: 'Spotify'
+			}
+		]
+
 		var view_options = [
 			{
 				value: 'thumbnails',
@@ -214,18 +231,19 @@ class LibraryAlbums extends React.Component{
 				value: 'added_at',
 				label: 'Added'
 			},
-			{
-				value: 'release_date',
-				label: 'Released'
-			},
 			{
 				value: 'tracks_total',
 				label: 'Tracks'
+			},
+			{
+				value: 'source',
+				label: 'Source'
 			}
 		]
 
 		var options = (
 			<span>
+				<DropdownField icon="filter" name="Filter" value={this.props.filter} options={filter_options} handleChange={val => {this.props.uiActions.set({ library_albums_filter: val}); this.props.uiActions.hideContextMenu() }} />
 				<DropdownField icon="sort" name="Sort" value={this.props.sort} options={sort_options} reverse={this.props.sort_reverse} handleChange={val => {this.setSort(val); this.props.uiActions.hideContextMenu() }} />
 				<DropdownField icon="eye" name="View" value={this.props.view} options={view_options} handleChange={val => {this.props.uiActions.set({ library_albums_view: val }); this.props.uiActions.hideContextMenu() }} />
 			</span>
@@ -233,10 +251,15 @@ class LibraryAlbums extends React.Component{
 
 		return (
 			<div className="view library-albums-view">
+
 				<Header icon="cd" title="My albums" options={options} uiActions={this.props.uiActions} />
-				{ this.renderView(albums) }
-				<LazyLoadListener enabled={this.props.library_albums_spotify_more} loadMore={() => this.loadMoreSpotify()}/>
-				<LazyLoadListener enabled={this.moreURIsToLoad().length > 0} loadMore={() => this.loadMoreMopidy()}/>
+
+				<section className="content-wrapper">
+					{ this.renderView(albums) }
+					<LazyLoadListener loading={this.props.library_albums_spotify_more} loadMore={() => this.loadMoreSpotify()}/>
+					<LazyLoadListener loading={this.moreURIsToLoad().length > 0} loadMore={() => this.loadMoreMopidy()}/>
+				</section>
+
 			</div>
 		);
 	}
@@ -259,6 +282,7 @@ const mapStateToProps = (state, ownProps) => {
 		library_albums_spotify_started: state.core.library_albums_spotify_started,
 		library_albums_spotify_more: state.core.library_albums_spotify_more,
 		view: state.ui.library_albums_view,
+		filter: (state.ui.library_albums_filter ? state.ui.library_albums_filter : 'all'),
 		sort: (state.ui.library_albums_sort ? state.ui.library_albums_sort : 'name'),
 		sort_reverse: (state.ui.library_albums_sort_reverse ? true : false)
 	}

src/js/views/library/LibraryBrowse.js

@@ -117,7 +117,7 @@ class LibraryBrowse extends React.Component{
 				return (
 					<div className="view library-local-view">
 						<Header icon="music" title={title} options={options} uiActions={this.props.uiActions} />
-						<div className="body-loader">
+						<div className="body-loader loading">
 							<div className="loader"></div>
 						</div>
 					</div>

src/js/views/library/LibraryLocalAlbums.js

@@ -156,7 +156,7 @@ class LibraryLocalAlbums extends React.Component{
 			return (
 				<div className="view library-local-view">
 					<Header icon="music" title="Local albums" options={options} uiActions={this.props.uiActions} />
-					<div className="body-loader">
+					<div className="body-loader loading">
 						<div className="loader"></div>
 					</div>
 				</div>

src/js/views/library/LibraryLocalArtists.js

@@ -59,7 +59,7 @@ class LibraryLocalArtists extends React.Component{
 			return (
 				<div className="view library-local-view">
 					<Header icon="music" title="Local artists" />
-					<div className="body-loader">
+					<div className="body-loader loading">
 						<div className="loader"></div>
 					</div>
 				</div>

src/js/views/library/LibraryPlaylists.js

@@ -45,7 +45,7 @@ class LibraryPlaylists extends React.Component{
 	renderView(){
 		if (helpers.isLoading(this.props.load_queue,['spotify_me/playlists'])){
 			return (
-				<div className="body-loader">
+				<div className="body-loader loading">
 					<div className="loader"></div>
 				</div>
 			)
@@ -109,10 +109,6 @@ class LibraryPlaylists extends React.Component{
 						label: 'Owner',
 						name: 'owner'
 					},
-					{
-						label: 'Source',
-						name: 'source'
-					},
 					{
 						label: 'Tracks',
 						name: 'tracks_total'
@@ -120,12 +116,14 @@ class LibraryPlaylists extends React.Component{
 					{
 						label: 'Editable',
 						name: 'can_edit'
+					},
+					{
+						label: 'Source',
+						name: 'source'
 					}
 				]
 			}
 
-			console.log(columns)
-
 			return (
 				<section className="content-wrapper">
 					<List

src/js/views/library/LibraryTracks.js

@@ -32,7 +32,7 @@ class LibraryTracks extends React.Component{
 			return (
 				<div className="view library-tracks-view">
 					<Header icon="music" title="My tracks" />
-					<div className="body-loader">
+					<div className="body-loader loading">
 						<div className="loader"></div>
 					</div>
 				</div>