Merging track library with history, fixes #285

src/js/components/Track.js

@@ -196,21 +196,27 @@ export default class Track extends React.Component{
 		let track_columns = [];
 		let track_actions = [];
 
-		if (track.type == 'history'){
+		if (this.props.context == 'history'){
 
 			track_columns.push(
 				<span className="col name" key="name">
-					{track.name ? track.name : <span className="uri-placeholder grey-text">{track.uri}</span>}
+					{track.name ? track.name : <span className="grey-text">{track.uri}</span>}
+					{track.explicit ? <span className="flag dark">EXPLICIT</span> : null}
 				</span>
 			)
 			track_columns.push(
-				<span className="col source" key="source">
-					{helpers.uriSource(track.uri)}
+				<span className="col artists" key="artists">
+					{track.artists ? <ArtistSentence artists={track.artists} /> : '-'}
+				</span>
+			)
+			track_columns.push(
+				<span className="col album" key="album">
+					{album}
 				</span>
 			)
 			track_columns.push(
 				<span className="col played_at" key="played_at">
-					{track.played_at ? <span><Dater type="ago" data={track.played_at} /> ago</span> : null}
+					{track.played_at ? <span><Dater type="ago" data={track.played_at} /> ago</span> : '-'}
 				</span>
 			)
 

src/js/components/TrackList.js

@@ -393,7 +393,8 @@ class TrackList extends React.Component{
 					<div className="list-item header track">
 						<div className="liner">
 							<span className="col name">Name</span>
-							<span className="col source">Source</span>
+							<span className="col artists">Artists</span>
+							<span className="col album">Album</span>
 							<span className="col played_at">Started playing</span>
 						</div>
 					</div>

src/js/helpers.js

@@ -264,7 +264,7 @@ export let formatAlbum = function(album){
 /**
  * Format tracks into our universal format
  *
- * @param tracks = array
+ * @param tracks = object or array of objects
  * @return array
  **/
 export let formatTracks = function(tracks){
@@ -273,7 +273,7 @@ export let formatTracks = function(tracks){
 		return null;
 	}
 
-	// Handle single recoreds
+	// Handle single records
 	var singular = false;
 	if (tracks.constructor !== Array){
 		tracks = [tracks];

src/js/services/core/middleware.js

@@ -412,7 +412,7 @@ const CoreMiddleware = (function(){
                 for (var i = 0; i < action.tracks.length; i++){
                     var track = Object.assign({}, helpers.formatTracks(action.tracks[i]));
 
-                    if (tracks[track.uri]){
+                    if (tracks[track.uri] !== undefined){
                         track = Object.assign({}, tracks[track.uri], track);
                     }
 

src/js/views/Artist.js

@@ -250,7 +250,7 @@ class Artist extends React.Component{
 
 						<div className="albums">
 							<h4>
-								Releases
+								Albums
 								<DropdownField 
 									icon="sort" 
 									name="Sort" 

src/js/views/QueueHistory.js

@@ -45,6 +45,22 @@ class QueueHistory extends React.Component{
 			</span>
 		)
 
+		var tracks = [];
+		for (var i = 0; i < this.props.queue_history.length; i++){
+			var track = Object.assign({}, this.props.queue_history[i]);
+
+			// We have the track in the index, so merge the track objects
+			if (this.props.tracks[track.uri] !== undefined){
+				track = Object.assign(
+					{},
+					track,
+					this.props.tracks[track.uri]
+				);
+			}
+			
+			tracks.push(track);
+		}
+
 		return (
 			<div className="view queue-history-view">
 				<Header options={options} uiActions={this.props.uiActions}>
@@ -54,9 +70,9 @@ class QueueHistory extends React.Component{
 				<section className="content-wrapper">
 					<TrackList
 						className="queue-history-track-list"
-						show_source_icon={true}
 						context="history"
-						tracks={this.props.queue_history} />
+						tracks={tracks}
+					/>
 				</section>
 				
 			</div>
@@ -74,6 +90,7 @@ class QueueHistory extends React.Component{
 const mapStateToProps = (state, ownProps) => {
 	return {
 		mopidy_connected: state.mopidy.connected,
+		tracks: (state.core.tracks ? state.core.tracks : {}),
 		queue_history: (state.mopidy.queue_history ? state.mopidy.queue_history : [])
 	}
 }

src/scss/components/_lists.scss

@@ -138,67 +138,75 @@
 		}
 	}
 
-	&.playlist-list .list-item {
-		cursor: pointer;
+	&.playlist-list {
+		.list-item {
+			cursor: pointer;
 
-		.col {
-			&.name { 
-				width: 50%;
-			}
-			&.owner {
-				width: 20%
-			}
-			&.source,
-			&.can_edit,
-			&.tracks_total,
-			&.popularity {
-				width: 10%;
+			.col {
+				&.name { 
+					width: 50%;
+				}
+				&.owner {
+					width: 20%
+				}
+				&.source,
+				&.can_edit,
+				&.tracks_total,
+				&.popularity {
+					width: 10%;
+				}
 			}
 		}
 	}
 
-	&.album-list .list-item {
-		cursor: pointer;
+	&.album-list {
+		.list-item {
+			cursor: pointer;
 
-		.col {
-			&.name,
-			&.artists { 
-				width: 30%;
-			}
-			&.added_at,
-			&.release_date {
-				width: 15%;
-			}
-			&.tracks_total {
-				width: 10%;
+			.col {
+				&.name,
+				&.artists { 
+					width: 30%;
+				}
+				&.added_at,
+				&.release_date {
+					width: 15%;
+				}
+				&.tracks_total {
+					width: 10%;
+				}
 			}
 		}
 	}
 
-	&.library-local-album-list .list-item{
-		cursor: pointer;
+	&.library-local-album-list {
+		.list-item {
+			cursor: pointer;
 
-		.col {
-			&.name,
-			&.artists { 
-				width: 45%;
-			}
-			&.tracks_total {
-				width: 10%;
+			.col {
+				&.name,
+				&.artists { 
+					width: 45%;
+				}
+				&.tracks_total {
+					width: 10%;
+				}
 			}
 		}
 	}
 
-	&.artist-list .list-item {
-		cursor: pointer;
+	&.artist-list {
+		.list-item {
+			cursor: pointer;
 
-		.col {
-			&.name { 
-				width: 70%;
-			}
-			&.followers_total,
-			&.popularity {
-				width: 15%;
+			.col {
+				&.name { 
+					width: 70%;
+				}
+				&.followers_total,
+				&.popularity {
+					width: 15%;
+				}
 			}
 		}
 	}
@@ -236,16 +244,19 @@
 		}
 	}
 
-	&.queue-history-track-list .list-item {
-		cursor: pointer;
-		
-		.col {
-			&.name { 
-				width: 60%;
-			}
-			&.played_at,
-			&.source {
-				width: 20%;
+	&.queue-history-track-list {
+		.list-item {
+			cursor: pointer;
+			
+			.col {
+				&.name,
+				&.artists,
+				&.album { 
+					width: 25%;
+				}
+				&.played_at {
+					width: 15%;
+				}
 			}
 		}
 	}

src/scss/components/_loader.scss

@@ -40,26 +40,28 @@
 }
 
 .body-loader {
-	padding: 35vh 0;
 
 	&.loading {
+		padding: 35vh 0;
+		
 		.loader {
 			opacity: 1;
 		}
 	}
 
 	&.lazy-loader {
-		padding: 20px;
-		height: 40px;
 
-		.loader {			
-			height: 40px;
-			width: 40px;
+		.loader {
 			opacity: 0;
 		}
 
 		&.loading {
+			padding: 20px;
+			height: 40px;
+
 			.loader {
+				height: 40px;
+				width: 40px;
 				opacity: 1;
 			}
 		}