Formatting tracks, using simple objects instead of full collate mechanic

mopidy_iris/static/app.css

@@ -5426,6 +5426,9 @@ main header {
         .light-theme main header .options .button:hover, .light-theme
         main header .options button:hover {
           color: #32b5f2; }
+        .light-theme main header .options .button:active, .light-theme
+        main header .options button:active {
+          background: transparent; }
   main header.overlay {
     position: absolute;
     top: 0;

mopidy_iris/static/index.html

@@ -98,7 +98,7 @@
 
 	// Release details
 	// These are automatically injected to built HTML
-	var build = "1536011758";
+	var build = "1536134952";
 	var version = "3.25.1";
 
 	// Construct the script tag

src/js/helpers.js

@@ -308,11 +308,36 @@ export let getTrackIcon = function(current_track = false, core = false){
 }
 
 
+/**
+ * Format a simple object
+ * This is a shell record containing only the bare essentials. Typically
+ * a tracks' artists/album
+ *
+ * @param data obj
+ * @return obj
+ **/
+export let formatSimpleObject = function(data){
+	var simple_object = {}
+	var fields = [
+		'uri',
+		'name'
+	];
+
+	for (var field of fields){
+		if (data.hasOwnProperty(field)){
+			simple_object[field] = data[field];
+		}
+	}
+
+	return simple_object;
+}
+
+
 /**
  * Format our album objects into a universal format
  *
  * @param data obj
- * @return album obj
+ * @return obj
  **/
 export let formatAlbum = function(data){
 	var album = {};
@@ -335,10 +360,12 @@ export let formatAlbum = function(data){
 		}
 	}
 
-	if (data.date && !album.date) album.release_date = data.date;
+	if (data.date && !album.date){
-
+		album.release_date = data.date;
-	// Actively overwrite "type" with "album_type"
+	}
-	if (data.album_type) album.type = data.album_type;
+	if (data.album_type){
+		album.type = data.album_type;
+	}
 
 	return album;
 }
@@ -348,7 +375,7 @@ export let formatAlbum = function(data){
  * Format our artist objects into a universal format
  *
  * @param data obj
- * @return artist obj
+ * @return obj
  **/
 export let formatArtist = function(data){
 	var artist = {}
@@ -405,7 +432,7 @@ export let formatArtist = function(data){
  * Format our playlist objects into a universal format
  *
  * @param data obj
- * @return playlist obj
+ * @return obj
  **/
 export let formatPlaylist = function(data){
 	var playlist = {}
@@ -445,7 +472,7 @@ export let formatPlaylist = function(data){
  * Format a user objects into a universal format
  *
  * @param data obj
- * @return playlist obj
+ * @return obj
  **/
 export let formatUser = function(data){
 	var user = {}
@@ -470,9 +497,12 @@ export let formatUser = function(data){
 	if (data.followers && data.followers.total){
 		user.followers = data.followers.total;
 	}
-
+	if (data.display_name && !user.name){
-	if (data.display_name && !user.name) user.name = data.display_name;
+		user.name = data.display_name;
-	if (data.id && !user.name) user.name = data.id;
+	}
+	if (data.id && !user.name){
+		user.name = data.id;
+	}
 
 	return user;
 }
@@ -481,79 +511,100 @@ export let formatUser = function(data){
 /**
  * Format tracks into our universal format
  *
- * @param tracks = object or array of objects
+ * @param data obj
- * @return array
+ * @return obj
+ **/
+export let formatTrack = function(data){
+	var track = {}
+	var fields = [
+		'uri',
+		'tlid',
+		'provider',
+		'name',
+		'images',
+		'release_date',
+		'disc_number',
+		'track_number',
+		'duration',
+		'followers',
+		'artists',	// Array of simple records
+		'album'		// Array of simple records
+	];
+
+	// Nested track object (eg in spotify playlist)
+	if (data.track && isObject(data.track)){
+
+		// Copy wrapper's details (if applicable)
+		if (data.added_by){
+			data.track.added_by = data.added_by;
+		}
+		if (data.added_at){
+			data.track.added_at = data.added_at;
+		}
+		if (data.tlid){
+			data.track.tlid = data.tlid;
+		}
+
+		// And now flatten
+		data = data.track;
+	}
+
+	// Loop fields and import from data
+	for (var field of fields){
+		if (data.hasOwnProperty(field)){
+			track[field] = data[field];
+		}
+	}
+
+	if (data.followers && data.followers.total){
+		track.followers = data.followers.total;
+	}
+
+	if (!track.duration && data.duration_ms){
+		track.duration = data.duration_ms;
+	} else if (!track.duration && data.length){
+		track.duration = data.length;
+	}
+
+    if (!track.track_number && data.track_no){
+    	track.track_number = data.track_no;
+    }
+
+    if (!track.disc_number && data.disc_no){
+    	track.disc_number = data.disc_no;
+    }
+
+    if (!track.release_date && data.date){
+    	track.release_date = data.date;
+    }
+
+    // Copy images from albums (if applicable)
+    // TOOD: Identify if we stil need this...
+    if (data.album && data.album.images){
+    	if (!track.images || track.images.length > 0){
+    		track.images = data.album.images;
+    	}
+    }
+
+	return track;
+}
+
+/**
+ * Format multiple tracks
+ *
+ * @param tracks Array
+ * @return Array
  **/
 export let formatTracks = function(tracks){
-
 	if (!tracks || tracks === undefined){
 		return null;
 	}
 
-	// Handle single records
-	var singular = false;
-	if (tracks.constructor !== Array){
-		tracks = [tracks];
-		singular = true;
-	}
-
     var formatted = [];
     for (var i = 0; i < tracks.length; i++){
-
+        formatted.push(formatTrack(tracks[i]));
-    	// Nested track object (eg in spotify playlist)
-    	if (tracks[i].track && isObject(tracks[i].track)){
-    		var track = Object.assign({}, tracks[i].track);
-
-    		// Copy supporting values
-    		if (tracks[i].added_by){
-    			track.added_by = tracks[i].added_by;
     }
-    		if (tracks[i].added_at){
-    			track.added_at = tracks[i].added_at;
-    		}
-    		if (tracks[i].tlid){
-    			track.tlid = tracks[i].tlid;
-    		}
-
-    	} else {
-    		var track = Object.assign({}, tracks[i]);
-    	}
-
-    	if (track.duration_ms){
-    		track.duration = track.duration_ms;
-    	} else if (track.length){
-    		track.duration = track.length;
-    	}
-
-        if (track.track_no){
-        	track.track_number = track.track_no;
-        } else if (track.track_number){
-        	track.track_number = track.track_number;
-        }
-
-        if (track.disc_no){
-        	track.disc_number = track.disc_no;
-        }
-
-        if (track.release_date){
-        	track.date = track.release_date;
-        }
-
-	    // Copy images from albums (if applicable)
-	    if (track.album && track.album.images){
-	    	if (!track.images || track.images.length > 0){
-	    		track.images = track.album.images;
-	    	}
-	    }
-
-        formatted.push(track);
-    }
-
-    if (singular){
-    	return formatted[0];
-    } else {
     return formatted;
-    }
 }
 
 

src/js/services/core/middleware.js

@@ -326,30 +326,14 @@ const CoreMiddleware = (function(){
 
 
             /**
-             * Queue and playback info
+             * Asset Load commands
+             *
+             * These are called from views and other middleware to load
+             * assets. This is where we can return already indexed records
+             * where appropriate
              **/
 
-            case 'CURRENT_TRACK_LOADED':
-                store.dispatch({
-                    type: 'TRACKS_LOADED',
-                    tracks: [action.track]
-                });
-
-                next(action);
-                break;
-
-            case 'QUEUE_LOADED':
-                store.dispatch({
-                    type: 'TRACKS_LOADED',
-                    tracks: action.tracks
-                });
-
-                next(action);
-                break;
-
-
             case 'LOAD_TRACK':
-
             	if (
             		!action.force_reload &&
             		store.getState().core.tracks[action.uri]){
@@ -503,20 +487,56 @@ const CoreMiddleware = (function(){
              * These modify our asset indexes, which are used globally
              **/
 
+            case 'CURRENT_TRACK_LOADED':
+                store.dispatch(coreActions.trackLoaded(action.track));
+                next(action);
+                break;
+/*
+            case 'QUEUE_LOADED':
+                store.dispatch(coreActions.tracksLoaded(action.tracks));
+                next(action);
+                break;*/
+
+            case 'QUEUE_LOADED':
             case 'TRACKS_LOADED':
                 var tracks_index = Object.assign({}, core.tracks);
+                var artists_index = core.artists;
+                var albums_index = core.albums;
                 var tracks_loaded = [];
+                var artists_loaded = [];
+                var albums_loaded = [];
 
-                action.tracks.forEach(track => {
+                action.tracks.forEach(raw_track => {
-                    track = helpers.formatTracks(track);
+                    var track = helpers.formatTrack(raw_track);
 
                     if (tracks_index[track.uri] !== undefined){
                         track = Object.assign({}, tracks_index[track.uri], track);
                     }
 
-                    if (track.album && track.album.images && track.album.images.length > 0){
+                    if (raw_track.album){
-                        track.album.images = helpers.digestMopidyImages(store.getState().mopidy, track.album.images);
+                        track.album = helpers.formatSimpleObject(raw_track.album);
-                        track.images = track.album.images;
+
+                        if (!albums_index[raw_track.album.uri]){
+                            albums_loaded.push(raw_track.album);
+                        }
+
+                        // Copy the images to the track
+                        if (raw_track.album.images){
+                            track.images = helpers.digestMopidyImages(store.getState().mopidy, raw_track.album.images);
+                        }
+                    }
+
+                    if (raw_track.artists && raw_track.artists.length > 0){
+                        track.artists = [];
+
+                        for (var artist of raw_track.artists){
+                            track.artists.push(helpers.formatSimpleObject(artist));
+
+                            // Not already in our index, so let's add it
+                            if (!artists_index[artist.uri]){
+                                artists_loaded.push(artist);
+                            }
+                        }
                     }
 
                     tracks_loaded.push(track);
@@ -524,6 +544,13 @@ const CoreMiddleware = (function(){
 
                 action.tracks = tracks_loaded;
 
+                if (artists_loaded.length > 0){
+                    store.dispatch(coreActions.artistsLoaded(artists_loaded));
+                }
+                if (albums_loaded.length > 0){
+                    store.dispatch(coreActions.albumsLoaded(albums_loaded));
+                }
+
                 next(action);
                 break;
 
@@ -559,8 +586,12 @@ const CoreMiddleware = (function(){
 
                 action.albums = albums_loaded;
 
+                if (artists_loaded.length > 0){
                     store.dispatch(coreActions.artistsLoaded(artists_loaded));
+                }
+                if (tracks_loaded.length > 0){
                     store.dispatch(coreActions.tracksLoaded(tracks_loaded));
+                }
 
                 next(action);
                 break
@@ -600,7 +631,9 @@ const CoreMiddleware = (function(){
 
                 action.artists = artists_loaded;
 
+                if (tracks_loaded.length > 0){
                     store.dispatch(coreActions.tracksLoaded(tracks_loaded));
+                }
 
                 next(action);
                 break;
@@ -646,8 +679,9 @@ const CoreMiddleware = (function(){
 
                 action.playlists = playlists_loaded;
 
-                // Load our tracks
+                if (tracks_loaded.length > 0){
                     store.dispatch(coreActions.tracksLoaded(tracks_loaded));
+                }
 
                 next(action);
                 break;

src/js/services/mopidy/middleware.js

@@ -2041,7 +2041,7 @@ const MopidyMiddleware = (function(){
                         response => {
                             store.dispatch({
                                 type: 'QUEUE_LOADED',
-                                tracks: helpers.formatTracks(response)
+                                tracks: response
                             });
                         }
                     );
@@ -2053,7 +2053,7 @@ const MopidyMiddleware = (function(){
                         response => {
                             store.dispatch({
                                 type: 'MOPIDY_QUEUE_HISTORY',
-                                tracks: helpers.formatTracks(response)
+                                tracks: response
                             });
                         }
                     );
@@ -2071,10 +2071,10 @@ const MopidyMiddleware = (function(){
                 break;
 
             case 'MOPIDY_CURRENT_TRACK_LOADED':
-                var track = helpers.formatTracks(action.tl_track);
+                var track = helpers.formatTrack(action.tl_track);
 
                 // We don't have the track already in our index
-                if (store.getState().core.tracks[track.uri] === undefined || store.getState().core.tracks[track.uri].images === undefined){
+                if (!store.getState().core.tracks[track.uri]){
 
                     // We've got Spotify running, and it's a spotify track - go straight to the source!
                     if (store.getState().spotify.enabled && helpers.uriSource(track.uri) == 'spotify'){

src/js/views/Album.js

@@ -154,7 +154,7 @@ class Album extends React.Component{
 				</div>
 
 				<section className="list-wrapper">
-					<TrackList className="album-track-list" tracks={album.tracks} uri={this.props.params.uri} />
+					<TrackList className="album-track-list" tracks={album.tracks} uri={album.uri} />
 					<LazyLoadListener
 						loadKey={album.tracks_more}
 						showLoader={is_loading_tracks}

src/js/views/Queue.js

@@ -209,6 +209,8 @@ const mapStateToProps = (state, ownProps) => {
 		radio: state.core.radio,
 		radio_enabled: (state.core.radio && state.core.radio.enabled ? true : false),
 		tracks: state.core.tracks,
+		artists: state.core.artists,
+		albums: state.core.albums,
 		queue: state.core.queue,
 		queue_tlids: state.core.queue_tlids,
 		queue_metadata: state.core.queue_metadata,

src/scss/components/_header.scss

@@ -55,6 +55,10 @@ main {
 					&:hover {
 						color: $blue;
 					}
+
+					&:active {
+						background: transparent;
+					}
 				}
 			}
 		}