Removing placeholder elements in favor of loader - simpler is better
This commit is contained in:
James Barnsley
@ -141,9 +141,11 @@ class Playlist extends React.Component{
|
||||
}
|
||||
|
||||
render(){
|
||||
if (!this.props.playlist) return null
|
||||
|
||||
var scheme = helpers.uriSource( this.props.params.uri )
|
||||
var context = 'playlist'
|
||||
if (this.props.playlist.can_edit) context = 'editable-playlist'
|
||||
var user_id = helpers.getFromUri('userid',this.props.params.uri)
|
||||
var playlist_id = helpers.getFromUri('playlistid',this.props.params.uri)
|
||||
|
||||
@ -155,70 +157,44 @@ class Playlist extends React.Component{
|
||||
)
|
||||
}
|
||||
|
||||
if (this.props.playlist){
|
||||
if (this.props.playlist.can_edit) context = 'editable-playlist'
|
||||
return (
|
||||
<div className="view playlist-view content-wrapper">
|
||||
|
||||
<SidebarToggleButton />
|
||||
|
||||
return (
|
||||
<div className="view playlist-view content-wrapper">
|
||||
|
||||
<SidebarToggleButton />
|
||||
|
||||
<div className="thumbnail-wrapper">
|
||||
<Thumbnail size="large" canZoom images={ this.props.playlist.images } />
|
||||
</div>
|
||||
|
||||
<div className="title">
|
||||
<h1>{ this.props.playlist.name }</h1>
|
||||
{ this.props.playlist.description ? <h2 className="description grey-text" dangerouslySetInnerHTML={{__html: this.props.playlist.description}}></h2> : null }
|
||||
|
||||
<ul className="details">
|
||||
<li className="has-tooltip">
|
||||
<FontAwesome name={helpers.sourceIcon( this.props.params.uri )} />
|
||||
<span className="tooltip">
|
||||
{helpers.uriSource( this.props.params.uri )} playlist
|
||||
</span>
|
||||
</li>
|
||||
{ this.props.playlist.owner ? <li><Link to={'/user/'+this.props.playlist.owner.uri}>{this.props.playlist.owner.id}</Link></li> : null }
|
||||
{ this.props.playlist.followers ? <li>{this.props.playlist.followers.total.toLocaleString()} followers</li> : null }
|
||||
{ this.props.playlist.last_modified ? <li><Dater type="ago" data={this.props.playlist.last_modified} /></li> : null }
|
||||
<li>
|
||||
{ this.props.playlist.tracks_total ? this.props.playlist.tracks_total : '0'} tracks,
|
||||
{ this.props.playlist.tracks ? <Dater type="total-time" data={this.props.playlist.tracks} /> : '0 mins' }
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{ this.renderActions() }
|
||||
|
||||
<section className="list-wrapper">
|
||||
{ this.props.playlist.tracks ? <TrackList uri={this.props.params.uri} className="playlist-track-list" context={context} tracks={this.props.playlist.tracks} removeTracks={ tracks_indexes => this.removeTracks(tracks_indexes) } reorderTracks={ (indexes, index) => this.reorderTracks(indexes, index) } /> : null }
|
||||
<LazyLoadListener enabled={this.props.playlist.tracks_more} loadMore={ () => this.loadMore() }/>
|
||||
</section>
|
||||
<div className="thumbnail-wrapper">
|
||||
<Thumbnail size="large" canZoom images={ this.props.playlist.images } />
|
||||
</div>
|
||||
)
|
||||
|
||||
} else {
|
||||
return (
|
||||
<div className="view playlist-view">
|
||||
<SidebarToggleButton />
|
||||
<Thumbnail size="large" />
|
||||
<div className="title">
|
||||
<div className="source grey-text">
|
||||
Playlist
|
||||
</div>
|
||||
<h1><span className="placeholder"></span></h1>
|
||||
<ul className="details">
|
||||
<li>
|
||||
<span className="placeholder"></span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div className="actions">
|
||||
<button className="placeholder"> </button>
|
||||
</div>
|
||||
<div className="title">
|
||||
<h1>{ this.props.playlist.name }</h1>
|
||||
{ this.props.playlist.description ? <h2 className="description grey-text" dangerouslySetInnerHTML={{__html: this.props.playlist.description}}></h2> : null }
|
||||
|
||||
<ul className="details">
|
||||
<li className="has-tooltip">
|
||||
<FontAwesome name={helpers.sourceIcon( this.props.params.uri )} />
|
||||
<span className="tooltip">
|
||||
{helpers.uriSource( this.props.params.uri )} playlist
|
||||
</span>
|
||||
</li>
|
||||
{ this.props.playlist.owner ? <li><Link to={'/user/'+this.props.playlist.owner.uri}>{this.props.playlist.owner.id}</Link></li> : null }
|
||||
{ this.props.playlist.followers ? <li>{this.props.playlist.followers.total.toLocaleString()} followers</li> : null }
|
||||
{ this.props.playlist.last_modified ? <li><Dater type="ago" data={this.props.playlist.last_modified} /></li> : null }
|
||||
<li>
|
||||
{ this.props.playlist.tracks_total ? this.props.playlist.tracks_total : '0'} tracks,
|
||||
{ this.props.playlist.tracks ? <Dater type="total-time" data={this.props.playlist.tracks} /> : '0 mins' }
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
{ this.renderActions() }
|
||||
|
||||
<section className="list-wrapper">
|
||||
{ this.props.playlist.tracks ? <TrackList uri={this.props.params.uri} className="playlist-track-list" context={context} tracks={this.props.playlist.tracks} removeTracks={ tracks_indexes => this.removeTracks(tracks_indexes) } reorderTracks={ (indexes, index) => this.reorderTracks(indexes, index) } /> : null }
|
||||
<LazyLoadListener enabled={this.props.playlist.tracks_more} loadMore={ () => this.loadMore() }/>
|
||||
</section>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -44,75 +44,71 @@ class User extends React.Component{
|
||||
}
|
||||
|
||||
render(){
|
||||
if (this.props.user){
|
||||
var playlists = []
|
||||
if (this.props.user.playlists_uris){
|
||||
for (var i = 0; i < this.props.user.playlists_uris.length; i++){
|
||||
var uri = this.props.user.playlists_uris[i]
|
||||
if (this.props.playlists.hasOwnProperty(uri)){
|
||||
playlists.push(this.props.playlists[uri])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (this.props.user && this.props.user.images ){
|
||||
var image = helpers.sizedImages(this.props.user.images).huge
|
||||
} else {
|
||||
var image = null
|
||||
}
|
||||
|
||||
var user_id = helpers.getFromUri('userid',this.props.params.uri)
|
||||
if (helpers.isLoading(this.props.load_queue,['spotify_users/'+user_id,'spotify_users/'+user_id+'/playlists/?'])){
|
||||
return (
|
||||
<div className="view user-view">
|
||||
|
||||
<SidebarToggleButton />
|
||||
|
||||
<div className="intro">
|
||||
<Parallax image={image} />
|
||||
<div className="liner">
|
||||
<Thumbnail image={image} canZoom circle />
|
||||
<h1>{ this.props.user.display_name ? this.props.user.display_name : this.props.user.id }</h1>
|
||||
<h2>
|
||||
<ul className="details">
|
||||
<li>{this.props.user.playlists_total ? this.props.user.playlists_total.toLocaleString() : 0} playlists</li>
|
||||
<li>{this.props.user.followers.total.toLocaleString()} followers</li>
|
||||
{this.isMe() ? <li>You</li> : null}
|
||||
</ul>
|
||||
</h2>
|
||||
<div className="actions">
|
||||
<FollowButton className="secondary" uri={this.props.params.uri} addText="Follow" removeText="Unfollow" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="content-wrapper">
|
||||
<section className="grid-wrapper">
|
||||
<h4>Playlists</h4>
|
||||
<PlaylistGrid playlists={playlists} />
|
||||
<LazyLoadListener enabled={this.props.user.playlists_more} loadMore={ () => this.loadMore() }/>
|
||||
</section>
|
||||
</div>
|
||||
<div className="body-loader">
|
||||
<div className="loader"></div>
|
||||
</div>
|
||||
)
|
||||
} else {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="view user-view">
|
||||
<div className="intro">
|
||||
<Thumbnail circle size="medium" images={[]} />
|
||||
<h1><span className="placeholder"></span></h1>
|
||||
if (!this.props.user) return null
|
||||
|
||||
var playlists = []
|
||||
if (this.props.user.playlists_uris){
|
||||
for (var i = 0; i < this.props.user.playlists_uris.length; i++){
|
||||
var uri = this.props.user.playlists_uris[i]
|
||||
if (this.props.playlists.hasOwnProperty(uri)){
|
||||
playlists.push(this.props.playlists[uri])
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (this.props.user && this.props.user.images ){
|
||||
var image = helpers.sizedImages(this.props.user.images).huge
|
||||
} else {
|
||||
var image = null
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="view user-view">
|
||||
|
||||
<SidebarToggleButton />
|
||||
|
||||
<div className="intro">
|
||||
<Parallax image={image} />
|
||||
<div className="liner">
|
||||
<Thumbnail image={image} canZoom circle />
|
||||
<h1>{ this.props.user.display_name ? this.props.user.display_name : this.props.user.id }</h1>
|
||||
<h2>
|
||||
<ul className="details">
|
||||
<li>{this.props.user.playlists_total ? this.props.user.playlists_total.toLocaleString() : 0} playlists</li>
|
||||
<li>{this.props.user.followers.total.toLocaleString()} followers</li>
|
||||
{this.isMe() ? <li>You</li> : null}
|
||||
</ul>
|
||||
</h2>
|
||||
<div className="actions">
|
||||
<button className="placeholder"></button>
|
||||
<FollowButton className="secondary" uri={this.props.params.uri} addText="Follow" removeText="Unfollow" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
<div className="content-wrapper">
|
||||
<section className="grid-wrapper">
|
||||
<h4>Playlists</h4>
|
||||
<PlaylistGrid playlists={playlists} />
|
||||
<LazyLoadListener enabled={this.props.user.playlists_more} loadMore={ () => this.loadMore() }/>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const mapStateToProps = (state, ownProps) => {
|
||||
return {
|
||||
load_queue: state.ui.load_queue,
|
||||
spotify_authorized: state.spotify.authorized,
|
||||
me: state.spotify.me,
|
||||
playlists: state.ui.playlists,
|
||||
|
||||
Reference in New Issue
Block a user