Playlists list; Date

mopidy_iris/static/app.css

@@ -3094,6 +3094,16 @@ footer {
   text-align: center;
 }
 
+.details {
+  list-style-type: none;
+  color: #AAAAAA;
+  text-transform: uppercase;
+}
+
+.details li {
+  padding-bottom: 4px;
+}
+
 * {
   border: 0;
   margin: 0;
@@ -3684,6 +3694,7 @@ main header h1 {
 .artist-view .intro h1 {
   color: #FFFFFF;
   padding-top: 30px;
+  padding-bottom: 45px;
 }
 
 .album-view .main {
@@ -3719,13 +3730,6 @@ main header h1 {
 
 .album-view .intro .details {
   padding: 30px;
-  color: #AAAAAA;
-  text-transform: uppercase;
-  list-style-type: none;
-}
-
-.album-view .intro .details li {
-  padding-bottom: 4px;
 }
 
 .album-view .intro .artist-grid {
@@ -3796,13 +3800,6 @@ main header h1 {
 
 .playlist-view .intro .details {
   padding: 30px;
-  color: #AAAAAA;
-  text-transform: uppercase;
-  list-style-type: none;
-}
-
-.playlist-view .intro .details li {
-  padding-bottom: 4px;
 }
 
 .playlist-view .intro .artist-grid {

src/js/components/Dater.js

@@ -10,7 +10,8 @@ export default class Dater extends React.Component{
 	formatDuration( milliseconds = false ){
 		if( !milliseconds ) return null
 
-		var string, total_hours, total_minutes, total_seconds, minutes, seconds;
+		var string = '';
+		var total_hours, total_minutes, total_seconds, minutes, seconds;
 
 		// get total values for each 
 		total_seconds = Math.floor( milliseconds / 1000 )
@@ -21,11 +22,13 @@ export default class Dater extends React.Component{
 		seconds = total_seconds - ( total_minutes * 60 )
 		if( seconds <= 9 ) seconds = '0'+ seconds
 
+		// get left-over number of minutes
 		minutes = total_minutes - ( total_hours * 60 )
-		if( minutes <= 9 ) minutes = '0'+ minutes
+		if( minutes <= 9 && total_hours ) minutes = '0'+ minutes
 
-		if( total_hours ) string = total_hours+':'
+		if( total_hours ) string += total_hours+':'
-		string += minutes+':'+seconds;
+		if( minutes ) string += minutes+':'
+		if( seconds ) string += seconds
 
 		return string
 	}
@@ -48,8 +51,15 @@ export default class Dater extends React.Component{
 				break
 
 			case 'date':
-				// TODO: nice date formatting
+				var date = new Date(this.props.data)
-				return this.props.data
+				return date.getDate()+'/'+date.getMonth()+'/'+date.getFullYear()
+				break
+
+			case 'ago':
+				var date = new Date(this.props.data)
+				var diff = new Date() - date
+				// todo: calculate nice diff
+				return diff
 				break
 
 			default:

src/js/components/List.js

@@ -32,7 +32,11 @@ export default class List extends React.Component{
 							<Link to={ this.props.link_prefix + encodeURIComponent(row.uri)} className="list-item cf" key={row_index}>
 								{
 									this.props.columns.map( (col, col_index) => {
-										return <div className={'col w'+col.width} key={col_index}>{ row[col.name] }</div>
+										return (
+											<div className={'col w'+col.width} key={col_index}>
+												{ row[col.name] ? row[col.name] : <span>-</span> }
+											</div>
+										)
 									})
 								}
 							</Link>

src/js/views/Album.js

@@ -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>{ album.tracks.total } tracks, <Dater type="total-time" data={album.tracks.items} /></li>
-						<li><Dater type="total-time" data={album.tracks.items} /> play time</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 }	

src/js/views/Artist.js

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

src/js/views/Playlist.js

@@ -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>{ playlist.tracks.total } tracks, <Dater type="total-time" data={playlist.tracks.items} /></li>
-						<li><Dater type="total-time" data={playlist.tracks.items} /> play time</li>
+						{ playlist.last_modified ? <li>Updated <Dater type="ago" data={playlist.last_modified} /> ago</li> : null }
-						{ playlist.last_modified ? <li>Updated { playlist.last_modified }</li> : null }
 						{ source == 'spotify' ? <li><FontAwesome name={source} /> Spotify playlist</li> : null }
 						{ source == 'm3u' ? <li><FontAwesome name='folder' /> Local playlist</li> : null }	
 					</ul>

src/js/views/library/LibraryPlaylists.js

@@ -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 (
+		var columns = [
-			<ul>
+			{ name: 'name', width: '50'},
-				<li className="list-item header playlist">
+			{ name: 'uri', width: '25'}
-					<span className="col name">Name</span>
+		]
-					<span className="col owner">Owner</span>
+
-					<span className="col source">Source</span>
+		return <List columns={columns} rows={playlists} link_prefix="/playlist/" />
-				</li>
-				{
-					this.compiledPlaylistSources().map( (playlist, index) => {
-						return (
-							<PlaylistListItem key={index} item={playlist} />
-						);
-					})
-				}
-			</ul>
-		);
 	}
 
 	render(){

src/scss/global/_core.scss

@@ -125,3 +125,13 @@ footer {
 	padding-bottom: 50px;
 	text-align: center;
 }
+
+.details {
+	list-style-type: none;
+	color: $mid_grey;
+	text-transform: uppercase;
+
+	li {
+		padding-bottom: 4px;
+	}
+}

src/scss/views/_album.scss

@@ -31,13 +31,6 @@
 
 		.details {
 			padding: 30px;
-			color: $mid_grey;
-			text-transform: uppercase;
-			list-style-type: none;
-
-			li {
-				padding-bottom: 4px;
-			}
 		}
 
 		.artist-grid {

src/scss/views/_artist.scss

@@ -14,6 +14,7 @@
 		h1 {
 			color: #FFFFFF;
 			padding-top: 30px;
+			padding-bottom: 45px;
 		}
 	}
 }

src/scss/views/_playlist.scss

@@ -31,13 +31,6 @@
 
 		.details {
 			padding: 30px;
-			color: $mid_grey;
-			text-transform: uppercase;
-			list-style-type: none;
-
-			li {
-				padding-bottom: 4px;
-			}
 		}
 
 		.artist-grid {