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

Grids; Parallax

Browse Source
This commit is contained in:
James Barnsley
2016-10-25 21:36:33 +13:00
parent ab9f317aed
commit dff33316ee
20 changed files with 261 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,7 +8,7 @@ import TrackList from '../components/TrackList'
import AlbumGrid from '../components/AlbumGrid'
import Thumbnail from '../components/Thumbnail'
import Parallax from '../components/Parallax'
import RelatedArtistList from '../components/RelatedArtistList'
import ArtistList from '../components/ArtistList'
import * as spotifyActions from '../services/spotify/actions'
@ -34,13 +34,21 @@ class Artist extends React.Component{
if( this.props.spotify.artist ){
return (
<div>
<Header icon="mic" title={ this.props.spotify.artist.name } />
{ this.props.spotify.artist.images ? <Parallax images={ this.props.spotify.artist.images } /> : null }
{ this.props.spotify.artist.images ? <Thumbnail size="huge" images={ this.props.spotify.artist.images } /> : null }
<p>{ this.props.spotify.artist.followers.total.toLocaleString() } followers</p>
{ this.props.spotify.artist.related_artists ? <RelatedArtistList artists={ this.props.spotify.artist.related_artists } /> : null }
{ this.props.spotify.artist.tracks ? <TrackList tracks={ this.props.spotify.artist.tracks } /> : null }
{ this.props.spotify.artist_albums ? <AlbumGrid items={ this.props.spotify.artist_albums } /> : null }
<Parallax images={ this.props.spotify.artist.images } />
<div className="intro">
<Thumbnail size="huge" images={ this.props.spotify.artist.images } />
<h1>{ this.props.spotify.artist.name }</h1>
<p>{ this.props.spotify.artist.followers.total.toLocaleString() } followers</p>
</div>
<div className="col c3w2">
<h3>Top tracks</h3>
{ this.props.spotify.artist.tracks ? <TrackList tracks={ this.props.spotify.artist.tracks } /> : null }
</div>
<div className="col c3w1 cf">
<h3>Related artists</h3>
{ this.props.spotify.artist.related_artists ? <ArtistList artists={ this.props.spotify.artist.related_artists.slice(0,6) } /> : null }
</div>
{ this.props.spotify.artist_albums ? <AlbumGrid albums={ this.props.spotify.artist_albums.items } /> : null }
</div>
);
}

4
src/js/views/Queue.js
View File

@ -7,7 +7,7 @@ import FontAwesome from 'react-fontawesome'
import TrackList from '../components/TrackList'
import Track from '../components/Track'
import Player from '../components/Player'
import ArtistList from '../components/ArtistList'
import ArtistSentence from '../components/ArtistSentence'
import AlbumLink from '../components/AlbumLink'
import Header from '../components/Header'
@ -24,7 +24,7 @@ class Queue extends React.Component{
return (
<div>
<div>{ this.props.mopidy.trackInFocus.track.name }</div>
<div><ArtistList artists={ this.props.mopidy.trackInFocus.track.artists } /></div>
<div><ArtistSentence artists={ this.props.mopidy.trackInFocus.track.artists } /></div>
<div><AlbumLink album={ this.props.mopidy.trackInFocus.track.album } /></div>
</div>
);

2
src/js/views/library/LibraryAlbums.js
View File

@ -29,7 +29,7 @@ class LibraryAlbums extends React.Component{
icon="cd"
title="My albums"
/>
<AlbumGrid items={this.props.spotify.libraryAlbums} />
<AlbumGrid albums={this.props.spotify.libraryAlbums.items} />
</div>
);
}

10
src/js/views/library/LibraryArtists.js
View File

@ -5,6 +5,7 @@ import { bindActionCreators } from 'redux'
import { Link } from 'react-router'
import Header from '../../components/Header'
import ArtistGrid from '../../components/ArtistGrid'
import * as mopidyActions from '../../services/mopidy/actions'
import * as spotifyActions from '../../services/spotify/actions'
@ -28,14 +29,7 @@ class LibraryArtists extends React.Component{
icon="mic"
title="My artists"
/>
<ul>
{
this.props.spotify.libraryArtists.artists.items.map( (artist, index) => {
var link = '/artist/' + artist.uri;
return <li key={index}><Link to={link}>{ artist.name }</Link></li>
})
}
</ul>
<ArtistGrid artists={this.props.spotify.libraryArtists.artists.items} />
</div>
);
}