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

Artist sub-views started

Browse Source
This commit is contained in:
James Barnsley
2016-11-23 13:17:07 +13:00
parent d827f181b7
commit 5c765c4318
3 changed files with 149 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/js/components/Parallax.js
View File

@ -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){

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

@ -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>
);
}
}

73
src/scss/views/_artist.scss
View File

@ -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 {