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

Handling artist tracks >10 in separate view, fixes #344

Browse Source
This commit is contained in:
James Barnsley
2019-02-03 11:01:00 +13:00
parent a90d6b7fe7
commit 39f8514098
8 changed files with 309 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -31,7 +31,7 @@ import * as spotifyActions from '../services/spotify/actions'
class Artist extends React.Component{
constructor(props){
super(props)
super(props);
}
componentDidMount(){
@ -175,7 +175,7 @@ class Artist extends React.Component{
<div className={"top-tracks col col--w"+(artist.related_artists && artist.related_artists.length > 0 ? "70" : "100")}>
{artist.tracks ? <h4>Top tracks</h4> : null}
<div className="list-wrapper">
<TrackList className="artist-track-list" uri={artist.uri} tracks={artist.tracks} />
<TrackList className="artist-track-list" uri={artist.uri} tracks={artist.tracks ? artist.tracks.splice(0,10) : []} />
<LazyLoadListener showLoader={is_loading_tracks} />
</div>
</div>
@ -219,6 +219,31 @@ class Artist extends React.Component{
);
}
renderTracks(){
var artist = helpers.collate(
this.props.artist,
{
artists: this.props.artists,
tracks: this.props.tracks
}
);
if (!artist.tracks_uris || (artist.tracks_uris && !artist.tracks) || (artist.tracks_uris.length !== artist.tracks.length)){
var is_loading_tracks = true;
} else {
var is_loading_tracks = false;
}
return (
<div className="body related-artists">
<section className="list-wrapper no-top-padding">
<TrackList className="artist-track-list" uri={artist.uri} tracks={artist.tracks} />
<LazyLoadListener showLoader={is_loading_tracks} />
</section>
</div>
)
}
renderRelatedArtists(){
var artist = helpers.collate(
this.props.artist,
@ -337,6 +362,15 @@ class Artist extends React.Component{
scrollTo="sub-views-menu">
<h4>Overview</h4>
</Link>
{this.props.artist.tracks_uris && this.props.artist.tracks_uris.length > 10 ? <Link
exact
history={this.props.history}
activeClassName="sub-views__option--active"
className="sub-views__option"
to={'/artist/'+encodeURIComponent(this.props.uri)+'/tracks'}
scrollTo="sub-views-menu">
<h4>Tracks</h4>
</Link> : null}
{this.props.artist.related_artists_uris ? <Link
exact
history={this.props.history}
@ -363,6 +397,9 @@ class Artist extends React.Component{
<Route exact path="/artist/:id/related-artists">
{this.renderRelatedArtists()}
</Route>
<Route exact path="/artist/:id/tracks">
{this.renderTracks()}
</Route>
<Route exact path="/artist/:id/about">
{this.renderAbout()}
</Route>