Preliminary lastfm

src/js/views/Album.js

@@ -11,9 +11,11 @@ import Parallax from '../components/Parallax'
 import ArtistSentence from '../components/ArtistSentence'
 import ArtistGrid from '../components/ArtistGrid'
 import Dater from '../components/Dater'
+import LazyLoadListener from '../components/LazyLoadListener'
 
-import * as spotifyActions from '../services/spotify/actions'
 import * as mopidyActions from '../services/mopidy/actions'
+import * as lastfmActions from '../services/lastfm/actions'
+import * as spotifyActions from '../services/spotify/actions'
 
 class Album extends React.Component{
 
@@ -37,42 +39,72 @@ class Album extends React.Component{
 
 	loadAlbum( props = this.props ){
 		var source = helpers.uriSource( props.params.uri );
+
 		if( source == 'spotify' ){
 			this.props.spotifyActions.getAlbum( props.params.uri );
+
 		}else if( source == 'local' && props.mopidy.connected ){
 			this.props.mopidyActions.getAlbum( props.params.uri );
 		}
 	}
 
-	render(){
-		var source = helpers.uriSource( this.props.params.uri );
-		if( source == 'spotify' ){
-			var album = this.props.spotify.album
-			var artists = this.props.spotify.artists
-		}else if( source == 'local' ){
-			var album = this.props.mopidy.album
-			var artists = []
+	loadMore(){
+		if( !this.props.spotify.album || !this.props.spotify.album.tracks.next ) return
+		this.props.spotifyActions.getURL( this.props.spotify.album.tracks.next, 'SPOTIFY_ALBUM_LOADED_MORE' );
+	}
+
+	album(){
+		var album = {
+			name: false,
+			tracks: {
+				items: []
+			},
+			artists: [],
+			images: []
 		}
-		if( !album ) return null;
+		
+		switch( helpers.uriSource( this.props.params.uri ) ){
+
+			case 'spotify':
+				Object.assign(album, this.props.spotify.album)
+				album.artists = this.props.spotify.artists
+				break
+
+			case 'local':
+				Object.assign(album, this.props.mopidy.album)
+				if( this.props.lastfm.album.image ) album.images = this.props.lastfm.album.image
+				break
+		}
+
+		return album
+	}
+
+	render(){
+		var album = this.album()
 
 		return (
 			<div className="view album-view">
 				<div className="intro">
-					<Thumbnail size="large" images={ ( album.images ? album.images : [] ) } />
-					<ArtistGrid artists={ artists } />
+					<Thumbnail size="large" images={ album.images } />
+					<ArtistGrid artists={ album.artists } />
 					<ul className="details">
 						<li>{ album.tracks.total } tracks, <Dater type="total-time" data={album.tracks.items} /></li>
 						{ album.release_date ? <li>Released <Dater type="date" data={ album.release_date } /></li> : null }
-						{ source == 'spotify' ? <li><FontAwesome name={source} /> Spotify playlist</li> : null }
-						{ source == 'local' ? <li><FontAwesome name='folder' /> Local playlist</li> : null }	
+						<li><FontAwesome name={helpers.sourceIcon( this.props.params.uri )} /> {helpers.uriSource( this.props.params.uri )} playlist</li>	
 					</ul>
 				</div>
 				<div className="main">
+
 					<div className="title">
 						<h1>{ album.name }</h1>
 						<h3><ArtistSentence artists={ album.artists } /></h3>
 					</div>
-					<TrackList tracks={ album.tracks.items } />
+
+					<section className="list-wrapper">
+						<TrackList tracks={ album.tracks.items } />
+						<LazyLoadListener loadMore={ () => this.loadMore() }/>
+					</section>
+					
 				</div>
 			</div>
 		);
@@ -93,6 +125,7 @@ const mapStateToProps = (state, ownProps) => {
 const mapDispatchToProps = (dispatch) => {
 	return {
 		mopidyActions: bindActionCreators(mopidyActions, dispatch),
+		lastfmActions: bindActionCreators(lastfmActions, dispatch),
 		spotifyActions: bindActionCreators(spotifyActions, dispatch)
 	}
 }

src/js/views/Artist.js

@@ -2,6 +2,7 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
+import FontAwesome from 'react-fontawesome'
 let helpers = require('../helpers.js')
 
 import LazyLoadListener from '../components/LazyLoadListener'
@@ -13,6 +14,7 @@ import Parallax from '../components/Parallax'
 import ArtistList from '../components/ArtistList'
 
 import * as mopidyActions from '../services/mopidy/actions'
+import * as lastfmActions from '../services/lastfm/actions'
 import * as spotifyActions from '../services/spotify/actions'
 
 class Artist extends React.Component{
@@ -49,7 +51,7 @@ class Artist extends React.Component{
 		this.props.spotifyActions.getURL( this.props.spotify.artist_albums.next, 'SPOTIFY_ARTIST_ALBUMS_LOADED_MORE' );
 	}
 
-	renderSpotifyAlbum(){
+	renderSpotifyArtist(){
 		if( !this.props.spotify.artist ) return null
 		var artist = this.props.spotify.artist
 		var albums = this.props.spotify.artist_albums
@@ -64,6 +66,7 @@ class Artist extends React.Component{
 					<ul className="details">
 						<li>{ artist.followers.total.toLocaleString() } followers</li>
 						{ artist.popularity ? <li>{ artist.popularity }% popularity</li> : null }
+						<li><FontAwesome name='spotify' /> Spotify artist</li>
 					</ul>
 				</div>
 
@@ -82,15 +85,19 @@ class Artist extends React.Component{
 				<div className="cf"></div>
 
 				<h4 className="left-padding">Albums</h4>
-				{ albums ? <AlbumGrid className="no-top-padding" albums={ albums.items } /> : null }
-				<LazyLoadListener loadMore={ () => this.loadMore() }/>
+				<section className="grid-wrapper no-top-padding">
+					{ albums ? <AlbumGrid albums={ albums.items } /> : null }
+					<LazyLoadListener loadMore={ () => this.loadMore() }/>
+				</section>
 			</div>
 		);
 	}
 
-	renderMopidyAlbum(){
+	renderMopidyArtist(){
 		if( !this.props.mopidy.artist ) return null
 		var artist = this.props.mopidy.artist
+		
+		if( this.props.lastfm.artist.image && this.props.lastfm.artist.name == artist.name ) artist.images = this.props.lastfm.artist.image
 
 		return (
 			<div className="view artist-view">
@@ -99,21 +106,27 @@ class Artist extends React.Component{
 				<div className="intro">
 					<Thumbnail size="huge" images={ artist.images } />
 					<h1>{ artist.name }</h1>
+					<ul className="details">
+						<li>{ artist.albums.length.toLocaleString() } albums</li>
+						<li><FontAwesome name='folder' /> Local artist</li>
+					</ul>
 				</div>
 
 				<h4 className="left-padding">Top tracks</h4>
 				{ artist.tracks ? <TrackList tracks={ artist.tracks } /> : null }
 
 				<h4 className="left-padding">Albums</h4>
-				{ artist.albums ? <AlbumGrid className="no-top-padding" albums={ artist.albums } /> : null }
+				<section className="grid-wrapper no-top-padding">
+					{ artist.albums ? <AlbumGrid albums={ artist.albums } /> : null }
+				</section>
 			</div>
 		);
 	}
 
 	render(){
 		var source = helpers.uriSource( this.props.params.uri );
-		if( source == 'spotify' ) return this.renderSpotifyAlbum()
-		if( source == 'local' ) return this.renderMopidyAlbum()
+		if( source == 'spotify' ) return this.renderSpotifyArtist()
+		if( source == 'local' ) return this.renderMopidyArtist()
 	}
 }
 
@@ -131,6 +144,7 @@ const mapStateToProps = (state, ownProps) => {
 const mapDispatchToProps = (dispatch) => {
 	return {
 		mopidyActions: bindActionCreators(mopidyActions, dispatch),
+		lastfmActions: bindActionCreators(lastfmActions, dispatch),
 		spotifyActions: bindActionCreators(spotifyActions, dispatch)
 	}
 }

src/js/views/Playlist.js

@@ -49,8 +49,13 @@ class Playlist extends React.Component{
 
 	render(){
 		var source = helpers.uriSource( this.props.params.uri );
-		if( source == 'spotify' ) var playlist = this.props.spotify.playlist
-		if( source == 'm3u' ) var playlist = this.props.mopidy.playlist
+		var source_name = source
+		if( source == 'spotify' ){
+			var playlist = this.props.spotify.playlist
+		}else if( source == 'm3u' ){
+			var playlist = this.props.mopidy.playlist
+			source_name = 'local'
+		}
 		if( !playlist ) return null;
 
 		return (
@@ -60,17 +65,21 @@ class Playlist extends React.Component{
 					<ul className="details">
 						<li>{ playlist.tracks.total } tracks, <Dater type="total-time" data={playlist.tracks.items} /></li>
 						{ playlist.last_modified ? <li>Updated <Dater type="ago" data={playlist.last_modified} /> ago</li> : null }
-						{ source == 'spotify' ? <li><FontAwesome name={source} /> Spotify playlist</li> : null }
-						{ source == 'm3u' ? <li><FontAwesome name='folder' /> Local playlist</li> : null }	
+						<li><FontAwesome name={helpers.sourceIcon( this.props.params.uri )} /> {source_name} playlist</li>
 					</ul>
 				</div>
 				<div className="main">
+
 					<div className="title">
 						<h1>{ playlist.name }</h1>
 					</div>
-					<TrackList tracks={ playlist.tracks.items } />
+
+					<section className="list-wrapper">
+						<TrackList tracks={ playlist.tracks.items } />
+						<LazyLoadListener loadMore={ () => this.loadMore() }/>
+					</section>
+					
 				</div>
-				<LazyLoadListener loadMore={ () => this.loadMore() }/>
 			</div>
 		)
 	}

src/js/views/Search.js

@@ -77,8 +77,8 @@ class Search extends React.Component{
 					<div>
 						<section className="grid-wrapper">
 							<ArtistGrid artists={ this.compiledResults('artists') } />
+							<LazyLoadListener loadMore={ () => this.loadMore('artists') }/>
 						</section>
-						<LazyLoadListener loadMore={ () => this.loadMore('artists') }/>
 					</div>
 				)
 				break
@@ -88,8 +88,8 @@ class Search extends React.Component{
 					<div>
 						<section className="grid-wrapper">
 							<AlbumGrid albums={ this.compiledResults('albums') } />
+							<LazyLoadListener loadMore={ () => this.loadMore('albums') }/>
 						</section>
-						<LazyLoadListener loadMore={ () => this.loadMore('albums') }/>
 					</div>
 				)
 				break
@@ -99,8 +99,8 @@ class Search extends React.Component{
 					<div>
 						<section className="grid-wrapper">
 							<PlaylistGrid playlists={ this.compiledResults('playlists') } />
+							<LazyLoadListener loadMore={ () => this.loadMore('playlists') }/>
 						</section>
-						<LazyLoadListener loadMore={ () => this.loadMore('playlists') }/>
 					</div>
 				)
 				break
@@ -110,8 +110,8 @@ class Search extends React.Component{
 					<div>
 						<section className="list-wrapper">
 							<TrackList show_source_icon={true} tracks={ this.compiledResults('tracks') } />
+							<LazyLoadListener loadMore={ () => this.loadMore('tracks') }/>
 						</section>
-						<LazyLoadListener loadMore={ () => this.loadMore('tracks') }/>
 					</div>
 				)
 				break
@@ -143,9 +143,9 @@ class Search extends React.Component{
 						<section className="list-wrapper">
 							<h4 className="left-padding"><Link to={'/search/'+this.props.params.query+'/tracks'}>Tracks</Link></h4>
 							<TrackList show_source_icon={true} tracks={ this.compiledResults('tracks') } />
+							<LazyLoadListener loadMore={ () => this.loadMore('tracks') }/>
 						</section>
 
-						<LazyLoadListener loadMore={ () => this.loadMore('tracks') }/>
 					</div>
 				)
 		}