Dater; Basic grid responsive; Local formatting

src/js/views/Album.js

@@ -2,6 +2,7 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
+import FontAwesome from 'react-fontawesome'
 let helpers = require('../helpers.js')
 
 import TrackList from '../components/TrackList'
@@ -43,30 +44,29 @@ class Album extends React.Component{
 		}
 	}
 
-	totalTime( tracks = [] ){
-		var duration = 0;
-		for( var i = 0; i < tracks.length; i++ ){
-			if( tracks[i].duration_ms ) duration += parseInt(tracks[i].duration_ms);
-			if( tracks[i].length ) duration += parseInt(tracks[i].length);
-		}
-		return duration;
-	}
-
 	render(){
 		var source = helpers.uriSource( this.props.params.uri );
-		if( source == 'spotify' ) var album = this.props.spotify.album
-		if( source == 'local' ) var album = this.props.mopidy.album
+		if( source == 'spotify' ){
+			var album = this.props.spotify.album
+			var artists = this.props.spotify.artists
+		}else if( source == 'local' ){
+			var album = this.props.mopidy.album
+			var artists = []
+		}
 		if( !album ) return null;
 
 		return (
 			<div className="view album-view">
 				<div className="intro">
 					<Thumbnail size="large" images={ ( album.images ? album.images : [] ) } />
-					<ArtistGrid artists={ album.artists } />
-					<div className="details">
-						<div>{ album.tracks.total } tracks, <Dater type="length" data={this.totalTime(album.tracks.items)} /> mins</div>
-						{ album.release_date ? <div>Released <Dater type="date" data={ album.release_date } /></div> : null }
-					</div>
+					<ArtistGrid artists={ artists } />
+					<ul className="details">
+						<li>{ album.tracks.total } tracks</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 }	
+					</ul>
 				</div>
 				<div className="main">
 					<div className="title">

src/js/views/Playlist.js

@@ -2,6 +2,7 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
+import FontAwesome from 'react-fontawesome'
 let helpers = require('../helpers.js')
 
 import TrackList from '../components/TrackList'
@@ -50,10 +51,13 @@ class Playlist extends React.Component{
 			<div className="view playlist-view">
 				<div className="intro">
 					{ playlist.images ? <Thumbnail size="large" images={ playlist.images } /> : null }
-					<div className="details">
-						<div>{ playlist.tracks.total } tracks</div>
-						<div>Last updated { playlist.last_modified }</div>
-					</div>
+					<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 }
+						{ source == 'spotify' ? <li><FontAwesome name={source} /> Spotify playlist</li> : null }
+						{ source == 'm3u' ? <li><FontAwesome name='folder' /> Local playlist</li> : null }	
+					</ul>
 				</div>
 				<div className="main">
 					<div className="title">

src/js/views/library/LibraryLocal.js

@@ -5,6 +5,7 @@ import { bindActionCreators } from 'redux'
 import { Link } from 'react-router'
 
 import Header from '../../components/Header'
+import GridItem from '../../components/GridItem'
 
 export default class LibraryLocal extends React.Component{
 
@@ -13,11 +14,37 @@ export default class LibraryLocal extends React.Component{
 	}
 
 	render(){
+
+		var grid_items = [
+			{
+				name: 'Artists',
+				link: '/library/local/artists',
+				icons: ['/assets/backgrounds/category-artists.jpg']
+			},
+			{
+				name: 'Albums',
+				link: '/library/local/albums',
+				icons: ['/assets/backgrounds/category-albums.jpg']
+			},
+			{
+				name: 'Folders',
+				link: '/library/local/directory/local:directory',
+				icons: ['/assets/backgrounds/category-folders.jpg']
+			}
+		]
+
 		return (
 			<div className="view library-local-view">
 				<Header icon="folder" title="Local" />
-				<Link to="/library/local/directory/local:directory">Folders</Link>
-				<Link to="/library/local/artists">Artists</Link>
+				<div className="grid category-grid">				
+					{
+						grid_items.map(
+							(item, index) => {
+								return <GridItem item={item} key={index} link={item.link} />
+							}
+						)
+					}
+				</div>
 			</div>
 		);
 	}

src/js/views/library/LibraryLocalAlbums.js

@@ -0,0 +1,67 @@
+
+import React, { PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+
+import Header from '../../components/Header'
+import List from '../../components/List'
+
+import * as mopidyActions from '../../services/mopidy/actions'
+import * as spotifyActions from '../../services/spotify/actions'
+
+class LibraryLocalAlbums extends React.Component{
+
+	constructor(props) {
+		super(props);
+	}
+
+	// on render
+	componentDidMount(){
+		this.loadAlbums()
+	}
+
+	componentWillReceiveProps( nextProps ){
+		if( !this.props.mopidy.connected && nextProps.mopidy.connected ){
+			this.loadAlbums(nextProps);
+		}
+	}
+
+	loadAlbums(props = this.props){
+		if( props.mopidy.connected ){
+			this.props.mopidyActions.getAlbums();
+		}
+	}
+
+	render(){
+		if( !this.props.mopidy.albums ) return null
+
+		return (
+			<div className="view library-local-view">
+				<Header icon="music" title="Local albums" />
+				<div>
+					<List columns={[{ name: 'name', width: '100'}]} rows={this.props.mopidy.albums} link_prefix="/album/" />
+				</div>
+			</div>
+		);
+	}
+}
+
+
+/**
+ * Export our component
+ *
+ * We also integrate our global store, using connect()
+ **/
+
+const mapStateToProps = (state, ownProps) => {
+	return state;
+}
+
+const mapDispatchToProps = (dispatch) => {
+	return {
+		mopidyActions: bindActionCreators(mopidyActions, dispatch),
+		spotifyActions: bindActionCreators(spotifyActions, dispatch)
+	}
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(LibraryLocalAlbums)

src/js/views/library/LibraryLocalArtists.js

@@ -37,7 +37,7 @@ class LibraryLocalArtists extends React.Component{
 
 		return (
 			<div className="view library-local-view">
-				<Header icon="music" title="Local" />
+				<Header icon="music" title="Local artists" />
 				<div>
 					<List columns={[{ name: 'name', width: '100'}]} rows={this.props.mopidy.artists} link_prefix="/artist/" />
 				</div>

src/js/views/library/LibraryLocalDirectory.js

@@ -5,6 +5,7 @@ import { bindActionCreators } from 'redux'
 import { Link } from 'react-router'
 
 import Header from '../../components/Header'
+import List from '../../components/List'
 
 import * as mopidyActions from '../../services/mopidy/actions'
 import * as spotifyActions from '../../services/spotify/actions'
@@ -24,46 +25,30 @@ class LibraryLocalDirectory extends React.Component{
 
 		// mopidy goes online
 		if( !this.props.mopidy.connected && nextProps.mopidy.connected ){
-			this.loadDirectory();
+			this.loadDirectory( nextProps );
 		}
 
 		// our uri changes
 		if( nextProps.params.uri != this.props.params.uri ){
-			this.loadDirectory(nextProps.params.uri);
+			this.loadDirectory( nextProps );
 		}
 	}
 
-	loadDirectory(uri = this.props.params.uri){
-		if( this.props.mopidy.connected ){
-			this.props.mopidyActions.getBrowse(uri);
+	loadDirectory( props = this.props ){
+		if( props.mopidy.connected ){
+			this.props.mopidyActions.getDirectory( props.params.uri );
 		}
 	}
 
-	renderDirectory(){
-		if( !this.props.mopidy.browse ) return null
-
-		return (
-			<div>
-				{
-					this.props.mopidy.browse.map( directory => {
-						return (
-							<div key={directory.uri}>
-								<Link to={'/library/local/directory/'+encodeURIComponent(directory.uri)}>
-									{ directory.name }
-								</Link>
-							</div>
-						)
-					})
-				}
-			</div>
-		)
-	}
-
 	render(){
+		if( !this.props.mopidy.directory ) return null
+
 		return (
 			<div className="view library-local-view">
-				<Header icon="music" title="Local" />
-				{ this.renderDirectory() }
+				<Header icon="music" title="Local files" />
+				<div>
+					<List columns={[{ name: 'name', width: '100'}]} rows={this.props.mopidy.directory} link_prefix="/library/local/directory/" />
+				</div>
 			</div>
 		);
 	}