From 5c765c4318a357d8663ab1e4885e07ce93af45ce Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Wed, 23 Nov 2016 13:17:07 +1300
Subject: [PATCH] Artist sub-views started

---
 src/js/components/Parallax.js |  20 ++++---
 src/js/views/Artist.js        | 101 +++++++++++++++++++++++++---------
 src/scss/views/_artist.scss   |  73 ++++++++++++++++++++----
 3 files changed, 149 insertions(+), 45 deletions(-)

diff --git a/src/js/components/Parallax.js b/src/js/components/Parallax.js
index 88bff46f..4d9913d6 100755
--- a/src/js/components/Parallax.js
+++ b/src/js/components/Parallax.js
@@ -45,15 +45,17 @@ export default class Parallax extends React.Component{
     }
 
 	componentWillReceiveProps( nextProps ){
-		var url = helpers.sizedImages( nextProps.images ).huge;
-		this.setState({ url: url, image: false, loaded: false })
-		this.loadImage( url )
-			.then(
-				response => {
-					this.setState({ url: url, image: response, loaded: true })
-					this.updateCanvas( response )
-				}
-			)
+		if( nextProps.images.length != this.props.images.length ){
+			var url = helpers.sizedImages( nextProps.images ).huge;
+			this.setState({ url: url, image: false, loaded: false })
+			this.loadImage( url )
+				.then(
+					response => {
+						this.setState({ url: url, image: response, loaded: true })
+						this.updateCanvas( response )
+					}
+				)
+		}
 	}
 
     handleResize(e){
diff --git a/src/js/views/Artist.js b/src/js/views/Artist.js
index 906f68a2..ec3cca48 100755
--- a/src/js/views/Artist.js
+++ b/src/js/views/Artist.js
@@ -11,6 +11,7 @@ import AlbumGrid from '../components/AlbumGrid'
 import Thumbnail from '../components/Thumbnail'
 import Parallax from '../components/Parallax'
 import ArtistList from '../components/ArtistList'
+import ArtistGrid from '../components/ArtistGrid'
 import FollowButton from '../components/FollowButton'
 
 import * as helpers from '../helpers'
@@ -21,7 +22,11 @@ import * as spotifyActions from '../services/spotify/actions'
 class Artist extends React.Component{
 
 	constructor(props) {
-		super(props);
+		super(props)
+
+		this.state = {
+			sub_view: 'overview'
+		}
 	}
 
 	componentDidMount(){
@@ -56,35 +61,38 @@ class Artist extends React.Component{
 		alert('Yet to be implemented')
 	}
 
-	render(){
-		if( !this.props.artist ) return null
-		var scheme = helpers.uriSource( this.props.params.uri );
-
+	renderSubViewMenu(){		
 		return (
-			<div className="view artist-view">
-				<Parallax images={this.props.artist.images} />
+			<div className="sub-views">
+				<span className={'option '+( this.state.sub_view == 'overview' ? 'active' : null)} onClick={() => this.setState({ sub_view: 'overview' })}>
+					Overview
+				</span>
+				<span className={'option '+( this.state.sub_view == 'related_artists' ? 'active' : null)} onClick={() => this.setState({ sub_view: 'related_artists' })}>
+					Related artists
+				</span>
+				<span className={'option '+( this.state.sub_view == 'biography' ? 'active' : null)} onClick={() => this.setState({ sub_view: 'biography' })}>
+					Biography
+				</span>
+			</div>
+		)
+	}
 
-				<div className="intro">
-
-					<Thumbnail size="huge" images={ this.props.artist.images } />
-
-					<h1>{ this.props.artist.name }</h1>
-
-					<div className="actions">
-						<button className="large primary" onClick={ e => this.play() }>Start radio</button>
-						{ helpers.uriSource(this.props.params.uri) == 'spotify' ? <FollowButton uri={this.props.params.uri} removeText="Unfollow" addText="Follow" /> : null }						
-					</div>
-
-					<ul className="details">
-						{ this.props.artist.followers ? <li>{ this.props.artist.followers.total.toLocaleString() } followers</li> : null }
-						{ this.props.artist.popularity ? <li>{ this.props.artist.popularity }% popularity</li> : null }
-						{ scheme == 'local' ? <li>{ this.props.artist.albums.length.toLocaleString() } albums</li> : null }
-						{ scheme == 'spotify' ? <li><FontAwesome name='spotify' /> Spotify artist</li> : null }
-						{ scheme == 'local' ? <li><FontAwesome name='folder' /> Local artist</li> : null }
-					</ul>
+	renderBody(){
 
+		if( this.state.sub_view == 'related_artists' ){
+			return (
+				<div>
+					<h4 className="left-padding">Related artists</h4>
+					<section className="grid-wrapper no-top-padding">
+						{ this.props.artist.related_artists ? <ArtistGrid artists={ this.props.artist.related_artists } /> : null }
+					</section>
 				</div>
+			)
+		}
 
+		// default body
+		return (
+			<div>
 				<div className="col w70">
 					<h4 className="left-padding">Top tracks</h4>
 					{ this.props.artist.tracks ? <TrackList tracks={ this.props.artist.tracks } /> : null }
@@ -105,6 +113,49 @@ class Artist extends React.Component{
 					<LazyLoadListener loadMore={ () => this.loadMore() }/>
 				</section>
 			</div>
+		)
+	}
+
+	render(){
+		if( !this.props.artist ) return null
+		var scheme = helpers.uriSource( this.props.params.uri );
+
+		return (
+			<div className="view artist-view">
+
+				<div className="intro">
+
+					<Thumbnail size="huge" images={ this.props.artist.images } />
+					<Parallax images={this.props.artist.images} />
+
+					<div className="heading-wrapper">
+						<div className="heading">
+							<h1>{ this.props.artist.name }</h1>
+							{ this.renderSubViewMenu() }
+						</div>
+					</div>
+
+					<div className="details-wrapper">
+
+						<div className="actions">
+							<button className="large primary" onClick={ e => this.play() }>Start radio</button>
+							{ helpers.uriSource(this.props.params.uri) == 'spotify' ? <FollowButton uri={this.props.params.uri} removeText="Unfollow" addText="Follow" /> : null }						
+						</div>
+
+						<ul className="details">
+							{ this.props.artist.followers ? <li>{ this.props.artist.followers.total.toLocaleString() } followers</li> : null }
+							{ this.props.artist.popularity ? <li>{ this.props.artist.popularity }% popularity</li> : null }
+							{ scheme == 'local' ? <li>{ this.props.artist.albums.length.toLocaleString() } albums</li> : null }
+							{ scheme == 'spotify' ? <li><FontAwesome name='spotify' /> Spotify artist</li> : null }
+							{ scheme == 'local' ? <li><FontAwesome name='folder' /> Local artist</li> : null }
+						</ul>
+
+					</div>
+				</div>
+
+				{ this.renderBody() }
+
+			</div>
 		);
 	}
 }
diff --git a/src/scss/views/_artist.scss b/src/scss/views/_artist.scss
index 018ce188..0285b83f 100755
--- a/src/scss/views/_artist.scss
+++ b/src/scss/views/_artist.scss
@@ -2,25 +2,76 @@
 .artist-view {
 	.intro {
 		position: relative;
-		margin: -100px 0 20px 0;
 		@include clearfix;
+		margin-bottom: 40px;
+
+		.parallax {
+			position: absolute;
+			z-index: 0;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+		}
 
 		.thumbnail {
-			max-width: 200px;
-			margin: 0 20px 0 40px;
-			float: left;
+			position: absolute;
+			z-index: 2;
+			max-width: 240px;
+			bottom: 0;
+			left: 40px;
 		}
 
-		h1 {
-			color: #FFFFFF;
-			padding-top: 30px;
-			padding-bottom: 45px;
+		.heading-wrapper {
+			height: 50vh;
+			position: relative;
+			z-index: 2;
+
+			.heading {
+				position: absolute;
+				bottom: 0;
+				left: 305px;
+
+				h1 {
+					color: #FFFFFF;
+					padding-top: 30px;
+					padding-bottom: 10px;
+				}
+
+				.sub-views {
+					color: #FFFFFF;
+					font-size: 16px;
+					font-weight: 400;
+
+					.option {
+						display: inline-block;
+						padding: 8px 0;
+						margin-right: 20px;
+						border-bottom: 3px solid transparent;
+						cursor: pointer;
+
+						&.active {
+							border-color: #FFFFFF;
+						}
+
+						&:not(.active):hover {
+							border-color: rgba(255,255,255,0.2);
+						}
+					}
+				}
+			}
 		}
 
-		.actions {
-			float: left;
-			margin-right: 20px;
+		.details-wrapper {
+			padding-left: 305px;
+			padding-top: 20px;
+
+			.actions {
+				float: left;
+				margin-right: 20px;
+			}
 		}
+
 	}
 
 	.artist-list {