Moving playlists library into own space - loaded on demand rather than init

src/js/App.js

@@ -64,24 +64,6 @@ class App extends React.Component{
 		this.handleWindowResize(null)
 	}
 
-	componentWillReceiveProps(nextProps){
-
-		// mopidy comes online
-		if( !this.props.mopidy_connected && nextProps.mopidy_connected ){
-			this.props.mopidyActions.getLibraryPlaylists();
-		}
-
-		// spotify authorized
-		if( !this.props.spotify_authorized && nextProps.spotify_authorized ){
-			this.props.spotifyActions.getAllLibraryPlaylists();
-		}
-
-		// spotify un-authorized
-		if( this.props.spotify_authorized && !nextProps.spotify_authorized ){
-			// TODO: flush out playlists and then re-fetch mopidy
-		}
-	}
-
 	shouldTriggerShortcut(e){
 
 		// When we're focussed on certian elements, don't fire any shortcuts

src/js/components/Thumbnail.js

@@ -77,15 +77,17 @@ class Thumbnail extends React.Component{
 			zoom_icon = <span className="zoom" onClick={e => this.zoom(e,image)}><FontAwesome name="search" /></span>
 		}
 
+		/*
+		// It's a great idea, but interferes with huge lists (like Albums library)
+		<LazyLoad height={600} placeholder={<div className="image"></div>}>
+			<div className="image loaded" style={{backgroundImage: 'url("'+image+'")'}}></div>
+		</LazyLoad>
+		*/
+
 		return (
 			<div className={class_name}>
-
-				<LazyLoad height={600} placeholder={<div className="image"></div>}>
-					<div className="image loaded" style={{backgroundImage: 'url("'+image+'")'}}></div>
-				</LazyLoad>
-
+				<div className="image loaded" style={{backgroundImage: 'url("'+image+'")'}}></div>
 				{zoom_icon}
-
 			</div>
 		);
 	}

src/js/services/mopidy/middleware.js

@@ -844,6 +844,7 @@ const MopidyMiddleware = (function(){
                         });
 
                         // Start our process to load the full album objects
+                        store.dispatch(uiActions.startProcess('MOPIDY_LIBRARY_ALBUMS', 'Loading album library'))
                         store.dispatch(uiActions.runProcess('MOPIDY_LIBRARY_ALBUMS_PROCESSOR'));
                     })
                 break;
@@ -858,20 +859,21 @@ const MopidyMiddleware = (function(){
                         return false
                     }
                 }
-                
-                store.dispatch(uiActions.startProcess('MOPIDY_LIBRARY_ALBUMS', 'Loading album library'))
 
                 // Figure out the remaining items
                 var library_uris = store.getState().core.library_albums
-                var to_load = []
-                for (var i = 0; i < library_uris.length && to_load.length < 50; i++){
+                var uris_not_loaded = []
+                for (var i = 0; i < library_uris.length; i++){
                     var uri = library_uris[i]
                     if (helpers.uriSource(uri) == 'local' && store.getState().core.albums[uri] === undefined){
-                        to_load.push(uri)
+                        uris_not_loaded.push(uri)
                     }
                 }
 
+                var to_load = uris_not_loaded.slice(0,50)
+
                 if (to_load.length > 0){
+                    store.dispatch(uiActions.updateProcess('MOPIDY_LIBRARY_ALBUMS', 'Loading '+uris_not_loaded.length+' library albums'))
                     store.dispatch(mopidyActions.getAlbums(to_load, 'MOPIDY_LIBRARY_ALBUMS_PROCESSOR'))
                 } else {
                     store.dispatch(uiActions.processFinished('MOPIDY_LIBRARY_ALBUMS'))

src/js/views/library/LibraryBrowse.js

@@ -199,7 +199,13 @@ class LibraryBrowse extends React.Component{
 							{
 								grid_items.map(
 									(item, index) => {
-										return <GridItem item={item} key={index} link={item.link} />
+										return (
+											<GridItem 
+												item={item} 
+												key={index} 
+												onClick={e => hashHistory.push(item.link)}
+											/>
+										)
 									}
 								)
 							}

src/js/views/library/LibraryPlaylists.js

@@ -21,6 +21,27 @@ class LibraryPlaylists extends React.Component{
 		super(props);
 	}
 
+	componentDidMount(){
+		if (!this.props.local_albums){
+			if (this.props.spotify_connected){
+				this.props.spotifyActions.getAllLibraryPlaylists()
+			}
+			if (this.props.mopidy_connected){
+				this.props.mopidyActions.getLibraryPlaylists()
+			}
+		}
+	}
+
+	componentWillReceiveProps(newProps){
+		if (!this.props.spotify_connected && newProps.spotify_connected){
+			this.props.spotifyActions.getAllLibraryPlaylists()
+		}
+
+		if (!this.props.mopidy_connected && newProps.mopidy_connected){
+			this.props.mopidyActions.getLibraryPlaylists()
+		}
+	}
+
 	handleContextMenu(e,item){
 		var data = {
 			e: e,
@@ -226,6 +247,8 @@ class LibraryPlaylists extends React.Component{
 
 const mapStateToProps = (state, ownProps) => {
 	return {
+		mopidy_connected: state.mopidy.connected,
+		spotify_connected: state.spotify.connected,
 		slim_mode: state.ui.slim_mode,
 		load_queue: state.ui.load_queue,
 		me_id: (state.spotify.me ? state.spotify.me.id : (state.ui.config && state.ui.config.spotify_username ? state.ui.config.spotify_username : false)),