Resolving radio seeds

src/js/services/spotify/actions.js

@@ -412,6 +412,45 @@ export function following(uri, method = 'GET'){
     }
 }
 
+/**
+ * Resolve radio seeds into full objects
+ *
+ * @param radio object
+ **/
+export function resolveRadioSeeds( radio ){
+    return (dispatch, getState) => {
+
+        // flush out the previous store value
+        dispatch({ type: 'PUSHER_RADIO_SEEDS_RESOLVING' });
+
+        var resolved_seeds = {
+            seed_artists: [],
+            seed_tracks: [],
+            seed_genres: []
+        }
+
+        var artist_ids = '';
+        for (var i = 0; i < radio.seed_artists.length; i++){
+            if (i > 0) artist_ids += ','
+            artist_ids += helpers.getFromUri('artistid', radio.seed_artists[i])
+        }
+
+        $.when(
+            sendRequest( dispatch, getState, 'artists/'+ artist_ids )
+                .then( response => {
+                    if (!(response instanceof Array)) response = [response]
+                    Object.assign(resolved_seeds.seed_artists, response);
+                })
+
+        ).then( () => {
+            dispatch({
+                type: 'PUSHER_RADIO_SEEDS_RESOLVED',
+                data: resolved_seeds
+            });
+        });
+    }
+}
+
 
 /**
  * =============================================================== ARTIST(S) ============

src/js/services/spotify/middleware.js

@@ -1,5 +1,5 @@
 
-
+var helpers = require('./../../helpers.js')
 var spotifyActions = require('./actions.js')
 var uiActions = require('../ui/actions.js')
 
@@ -81,6 +81,19 @@ const SpotifyMiddleware = (function(){
                 if( action.data && action.data.track.uri.substring(0,14) == 'spotify:track:' ){
                     store.dispatch( spotifyActions.getTrack( action.data.track.uri ) )
                 }
+                break
+
+            // when our mopidy server current track changes
+            case 'PUSHER_RADIO':
+
+                // proceed as usual so we don't inhibit default functionality
+                next(action)
+
+                // only resolve if radio is enabled
+                if( action.data.radio.enabled ){
+                    store.dispatch( spotifyActions.resolveRadioSeeds( action.data.radio ) )
+                }
+                break
 
             // This action is irrelevant to us, pass it on to the next middleware
             default:

src/js/services/ui/reducer.js

@@ -119,7 +119,11 @@ export default function reducer(ui = {}, action){
 
         case 'PUSHER_RADIO':
         case 'PUSHER_START_RADIO':
-            return Object.assign({}, ui, { radio: action.data.radio })
+            return Object.assign({}, ui, { seeds_resolved: false }, { radio: action.data.radio })
+
+        case 'PUSHER_RADIO_SEEDS_RESOLVED':
+            var radio = Object.assign({}, ui.radio, action.data, { seeds_resolved: true })
+            return Object.assign({}, ui, { radio: radio })
 
 
 

src/js/views/Queue.js

@@ -46,7 +46,13 @@ class Queue extends React.Component{
 		if (!this.props.radio || !this.props.radio.enabled) return null
 
 		var seed_sentence = 'nothing'
-		if (this.props.radio.seed_artists.length > 0) seed_sentence = this.props.radio.seed_artists.length+' artists'
+		if (this.props.radio.seed_artists.length > 0){
+			if (this.props.radio.seeds_resolved){
+				seed_sentence = <ArtistSentence artists={this.props.radio.seed_artists} />
+			}else{
+				seed_sentence = this.props.radio.seed_artists.length +' artists'
+			}
+		}
 		if (this.props.radio.seed_genres.length > 0) seed_sentence =this.props.radio.seed_artists.length+' genres'
 		if (this.props.radio.seed_tracks.length > 0) seed_sentence =this.props.radio.seed_artists.length+' tracks'
 

src/js/views/library/LibraryAlbums.js

@@ -76,9 +76,13 @@ class LibraryAlbums extends React.Component{
 						this.props.albums.map( album => {
 							return (
 								<div className="album" key={album.uri}>
-									<Thumbnail size="medium" images={album.images} />
+									<Link to={global.baseURL+'album/'+album.uri}>
+										<Thumbnail size="medium" images={album.images} />
+									</Link>
 									<div className="detail">
-										<h3>{ album.name }</h3>
+										<Link to={global.baseURL+'album/'+album.uri}>
+											<h3>{ album.name }</h3>
+										</Link>
 										<h4><ArtistSentence className="grey-text" artists={album.artists} /></h4>
 									</div>
 									<TrackList tracks={album.tracks.items} />