Merging track library with history, fixes #285

mopidy_iris/static/app.css

@@ -3681,19 +3681,21 @@ input[type="submit"] {
     border-bottom-color: transparent;
     border-right-color: #32b5f2; }
 
-.body-loader {
+.body-loader.loading {
   padding: 35vh 0; }
   .body-loader.loading .loader {
     opacity: 1; }
-  .body-loader.lazy-loader {
-    padding: 20px;
-    height: 40px; }
-    .body-loader.lazy-loader .loader {
-      height: 40px;
-      width: 40px;
-      opacity: 0; }
-    .body-loader.lazy-loader.loading .loader {
-      opacity: 1; }
+
+.body-loader.lazy-loader .loader {
+  opacity: 0; }
+
+.body-loader.lazy-loader.loading {
+  padding: 20px;
+  height: 40px; }
+  .body-loader.lazy-loader.loading .loader {
+    height: 40px;
+    width: 40px;
+    opacity: 1; }
 
 .mini-loader .loader {
   width: 20px;
@@ -4930,10 +4932,10 @@ aside {
 
 .list.queue-history-track-list .list-item {
   cursor: pointer; }
-  .list.queue-history-track-list .list-item .col.name {
-    width: 60%; }
-  .list.queue-history-track-list .list-item .col.played_at, .list.queue-history-track-list .list-item .col.source {
-    width: 20%; }
+  .list.queue-history-track-list .list-item .col.name, .list.queue-history-track-list .list-item .col.artists, .list.queue-history-track-list .list-item .col.album {
+    width: 25%; }
+  .list.queue-history-track-list .list-item .col.played_at {
+    width: 15%; }
 
 .list.related-artist-list {
   padding-bottom: 20px;

mopidy_iris/static/app.js

@@ -348,7 +348,7 @@ var formatAlbum = exports.formatAlbum = function formatAlbum(album) {
 /**
  * Format tracks into our universal format
  *
- * @param tracks = array
+ * @param tracks = object or array of objects
  * @return array
  **/
 var formatTracks = exports.formatTracks = function formatTracks(tracks) {
@@ -357,7 +357,7 @@ var formatTracks = exports.formatTracks = function formatTracks(tracks) {
 		return null;
 	}
 
-	// Handle single recoreds
+	// Handle single records
 	var singular = false;
 	if (tracks.constructor !== Array) {
 		tracks = [tracks];
@@ -16289,8 +16289,13 @@ var TrackList = function (_React$Component) {
 							),
 							_react2.default.createElement(
 								'span',
-								{ className: 'col source' },
-								'Source'
+								{ className: 'col artists' },
+								'Artists'
+							),
+							_react2.default.createElement(
+								'span',
+								{ className: 'col album' },
+								'Album'
 							),
 							_react2.default.createElement(
 								'span',
@@ -24495,21 +24500,31 @@ var Track = function (_React$Component) {
 			var track_columns = [];
 			var track_actions = [];
 
-			if (track.type == 'history') {
+			if (this.props.context == 'history') {
 
 				track_columns.push(_react2.default.createElement(
 					'span',
 					{ className: 'col name', key: 'name' },
 					track.name ? track.name : _react2.default.createElement(
 						'span',
-						{ className: 'uri-placeholder grey-text' },
+						{ className: 'grey-text' },
 						track.uri
-					)
+					),
+					track.explicit ? _react2.default.createElement(
+						'span',
+						{ className: 'flag dark' },
+						'EXPLICIT'
+					) : null
 				));
 				track_columns.push(_react2.default.createElement(
 					'span',
-					{ className: 'col source', key: 'source' },
-					helpers.uriSource(track.uri)
+					{ className: 'col artists', key: 'artists' },
+					track.artists ? _react2.default.createElement(_ArtistSentence2.default, { artists: track.artists }) : '-'
+				));
+				track_columns.push(_react2.default.createElement(
+					'span',
+					{ className: 'col album', key: 'album' },
+					album
 				));
 				track_columns.push(_react2.default.createElement(
 					'span',
@@ -24519,7 +24534,7 @@ var Track = function (_React$Component) {
 						null,
 						_react2.default.createElement(_Dater2.default, { type: 'ago', data: track.played_at }),
 						' ago'
-					) : null
+					) : '-'
 				));
 			} else if (this.props.context == 'queue') {
 
@@ -50914,7 +50929,7 @@ var 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);
                             }
 
@@ -64110,7 +64125,7 @@ var Artist = function (_React$Component) {
 							_react2.default.createElement(
 								'h4',
 								null,
-								'Releases',
+								'Albums',
 								_react2.default.createElement(_DropdownField2.default, {
 									icon: 'sort',
 									name: 'Sort',
@@ -66177,6 +66192,18 @@ var QueueHistory = function (_React$Component) {
 				)
 			);
 
+			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 _react2.default.createElement(
 				'div',
 				{ className: 'view queue-history-view' },
@@ -66191,9 +66218,9 @@ var QueueHistory = function (_React$Component) {
 					{ className: 'content-wrapper' },
 					_react2.default.createElement(_TrackList2.default, {
 						className: 'queue-history-track-list',
-						show_source_icon: true,
 						context: 'history',
-						tracks: this.props.queue_history })
+						tracks: tracks
+					})
 				)
 			);
 		}
@@ -66211,6 +66238,7 @@ var QueueHistory = function (_React$Component) {
 var mapStateToProps = function 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/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;
 			}
 		}