Playlists list; Date
This commit is contained in:
@ -61,8 +61,7 @@ class Album extends React.Component{
|
||||
<Thumbnail size="large" images={ ( album.images ? album.images : [] ) } />
|
||||
<ArtistGrid artists={ artists } />
|
||||
<ul className="details">
|
||||
<li>{ album.tracks.total } tracks</li>
|
||||
<li><Dater type="total-time" data={album.tracks.items} /> play time</li>
|
||||
<li>{ album.tracks.total } tracks, <Dater type="total-time" data={album.tracks.items} /></li>
|
||||
{ album.release_date ? <li>Released <Dater type="date" data={ album.release_date } /></li> : null }
|
||||
{ source == 'spotify' ? <li><FontAwesome name={source} /> Spotify playlist</li> : null }
|
||||
{ source == 'local' ? <li><FontAwesome name='folder' /> Local playlist</li> : null }
|
||||
|
||||
@ -61,7 +61,10 @@ class Artist extends React.Component{
|
||||
<div className="intro">
|
||||
<Thumbnail size="huge" images={ artist.images } />
|
||||
<h1>{ artist.name }</h1>
|
||||
<p>{ artist.followers.total.toLocaleString() } followers</p>
|
||||
<ul className="details">
|
||||
<li>{ artist.followers.total.toLocaleString() } followers</li>
|
||||
{ artist.popularity ? <li>{ artist.popularity }% popularity</li> : null }
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div className="col w70">
|
||||
|
||||
@ -52,9 +52,8 @@ class Playlist extends React.Component{
|
||||
<div className="intro">
|
||||
{ playlist.images ? <Thumbnail size="large" images={ playlist.images } /> : null }
|
||||
<ul className="details">
|
||||
<li>{ playlist.tracks.total } tracks</li>
|
||||
<li><Dater type="total-time" data={playlist.tracks.items} /> play time</li>
|
||||
{ playlist.last_modified ? <li>Updated { playlist.last_modified }</li> : null }
|
||||
<li>{ playlist.tracks.total } tracks, <Dater type="total-time" data={playlist.tracks.items} /></li>
|
||||
{ playlist.last_modified ? <li>Updated <Dater type="ago" data={playlist.last_modified} /> ago</li> : null }
|
||||
{ source == 'spotify' ? <li><FontAwesome name={source} /> Spotify playlist</li> : null }
|
||||
{ source == 'm3u' ? <li><FontAwesome name='folder' /> Local playlist</li> : null }
|
||||
</ul>
|
||||
|
||||
@ -4,7 +4,7 @@ import { connect } from 'react-redux'
|
||||
import { bindActionCreators } from 'redux'
|
||||
import { Link } from 'react-router'
|
||||
|
||||
import PlaylistListItem from '../../components/PlaylistListItem'
|
||||
import List from '../../components/List'
|
||||
import Header from '../../components/Header'
|
||||
|
||||
import * as mopidyActions from '../../services/mopidy/actions'
|
||||
@ -39,35 +39,26 @@ class LibraryPlaylists extends React.Component{
|
||||
var playlists = [];
|
||||
|
||||
if( this.props.mopidy.playlists ){
|
||||
Object.assign(playlists, this.props.mopidy.playlists)
|
||||
playlists = [...playlists, ...this.props.mopidy.playlists]
|
||||
}
|
||||
|
||||
if( this.props.spotify.library_playlists ){
|
||||
Object.assign(playlists, this.props.spotify.library_playlists.items)
|
||||
playlists = [...playlists, ...this.props.spotify.library_playlists.items]
|
||||
}
|
||||
|
||||
return playlists;
|
||||
}
|
||||
|
||||
renderPlaylists(){
|
||||
if( !this.compiledPlaylistSources() ) return null;
|
||||
var playlists = this.compiledPlaylistSources()
|
||||
if( !playlists ) return null
|
||||
|
||||
return (
|
||||
<ul>
|
||||
<li className="list-item header playlist">
|
||||
<span className="col name">Name</span>
|
||||
<span className="col owner">Owner</span>
|
||||
<span className="col source">Source</span>
|
||||
</li>
|
||||
{
|
||||
this.compiledPlaylistSources().map( (playlist, index) => {
|
||||
return (
|
||||
<PlaylistListItem key={index} item={playlist} />
|
||||
);
|
||||
})
|
||||
}
|
||||
</ul>
|
||||
);
|
||||
var columns = [
|
||||
{ name: 'name', width: '50'},
|
||||
{ name: 'uri', width: '25'}
|
||||
]
|
||||
|
||||
return <List columns={columns} rows={playlists} link_prefix="/playlist/" />
|
||||
}
|
||||
|
||||
render(){
|
||||
|
||||
Reference in New Issue
Block a user