Playlists list; Date

This commit is contained in:
James Barnsley
2016-11-02 21:23:35 +13:00
parent 1920e69e60
commit c731199401
14 changed files with 6996 additions and 7262 deletions

View File

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

View File

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

View File

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

View File

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