Recognise tracks; Back button for local

src/js/components/List.js

@@ -22,7 +22,7 @@ export default class List extends React.Component{
 	}
 
 	renderHeader(){
-		if( !this.props.columns ) return null
+		if (!this.props.columns || this.props.noheader) return null
 
 		return (
 			<div className="list-item header cf">
@@ -39,31 +39,35 @@ export default class List extends React.Component{
 		var key = key_string.split('.')
 		var value = row
 
-		for( var i = 0; i < key.length; i++ ){
-			if( typeof(value[key[i]]) !== 'undefined' ){
-				value = value[key[i]]
-			}else{
+		for (var i = 0; i < key.length; i++) {
+			if (typeof(value[key[i]]) === 'undefined' || value[key[i]].trim() == '') {
 				return <span>-</span>
+			} else {
+				value = value[key[i]]
 			}
 		}
 
-		if( key_string === 'owner' ) return <Link to={ '/user/'+ value.uri }>{value.id}</Link>
-		if( key[0] === 'artists' ) return <ArtistSentence artists={value} />
-		if( value === true ) return <FontAwesome name="check" />
-		if( typeof(value) === 'number' ) return <span>{value.toLocaleString()}</span>
+		if (key_string === 'owner') return <Link to={ '/user/'+ value.uri }>{value.id}</Link>
+		if (key[0] === 'artists') return <ArtistSentence artists={value} />
+		if (value === true) return <FontAwesome name="check" />
+		if (typeof(value) === 'number') return <span>{value.toLocaleString()}</span>
 		return <span>{value}</span>
 	}
 
 	render(){
-		if( !this.props.rows ) return null
+		if (!this.props.rows) return null
 
 		return (
 			<div className="list">
 				{ this.renderHeader() }
 				{
 					this.props.rows.map( (row, row_index) => {
+
+						var className = 'list-item'
+						if( row.type ) className += ' '+row.type
+
 						return (
-							<div onClick={ e => this.handleClick(e, row.uri)} className="list-item cf" key={row_index}>
+							<div onClick={ e => this.handleClick(e, row.uri)} className={className} key={row_index}>
 								{
 									this.props.columns.map( (col, col_index) => {
 										return (

src/js/components/TrackList.js

@@ -231,18 +231,26 @@ class TrackList extends React.Component{
 		// by default, do nothing
 	}
 
+	renderHeader(){
+		if( this.props.noheader ) return null
+			
+		return (
+			<div className="list-item header track">
+				<span className="col name">Name</span>
+				<span className="col artists">Artists</span>
+				<span className="col album">Album</span>
+				<span className="col duration">Length</span>
+			</div>
+		)
+	}
+
 	render(){
 		if( !this.state.tracks ) return null
 
 		let self = this;
 		return (
 			<div className="track-list">
-				<div className="list-item header track">
-					<span className="col name">Name</span>
-					<span className="col artists">Artists</span>
-					<span className="col album">Album</span>
-					<span className="col duration">Length</span>
-				</div>
+				{ this.renderHeader() }
 				{
 					this.state.tracks.map(
 						(track, index) => {

src/js/views/library/LibraryLocalDirectory.js

@@ -3,9 +3,11 @@ import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 import { Link } from 'react-router'
+import FontAwesome from 'react-fontawesome'
 
 import Header from '../../components/Header'
 import List from '../../components/List'
+import TrackList from '../../components/TrackList'
 
 import * as mopidyActions from '../../services/mopidy/actions'
 import * as spotifyActions from '../../services/spotify/actions'
@@ -40,27 +42,52 @@ class LibraryLocalDirectory extends React.Component{
 		}
 	}
 
+	arrange_directory( directory ){
+		var folders = []
+		var tracks = []
+
+		for (var i = 0; i < directory.length; i++) {
+			if (directory[i].type && directory[i].type == 'track') {
+				tracks.push( directory[i] )
+			} else {
+				folders.push( directory[i] )
+			}
+		}
+
+		return {
+			folders: folders,
+			tracks: tracks
+		}
+	}
+
 	render(){
 		if( !this.props.directory ) return null
 
+		var items = this.arrange_directory( this.props.directory )
+
+		var actions = null
+		if (this.props.params.uri != 'local:directory' ){
+			actions = (
+				<button onClick={ () => window.history.back() }>
+					<FontAwesome name="reply" />&nbsp;
+					Back
+				</button>
+			)
+		}
+
 		return (
 			<div className="view library-local-view">
-				<Header icon="music" title="Local files" />
+				<Header icon="music" title="Local files" actions={actions} />
 				<section className="list-wrapper">
-					<List columns={[{ name: 'name', width: '100'}]} rows={this.props.directory} link_prefix="/library/local/directory/" />
+
+					<List columns={[{ name: 'name', width: '100'}]} rows={items.folders} link_prefix="/library/local/directory/" />
+					<TrackList tracks={items.tracks} noheader />
 				</section>
 			</div>
 		);
 	}
 }
 
-
-/**
- * Export our component
- *
- * We also integrate our global store, using connect()
- **/
-
 const mapStateToProps = (state, ownProps) => {
 	return {
 		mopidy_connected: state.mopidy.connected,