Playing album; PLAY_URIS is closer to what it actually does

src/js/components/ContextMenu.js

@@ -52,7 +52,7 @@ class ContextMenu extends React.Component{
 		for( var i = 0; i < selected_tracks.length; i++ ){
 			selected_tracks_uris.push( selected_tracks[i].uri );
 		}
-		this.props.mopidyActions.playTracks(selected_tracks_uris);
+		this.props.mopidyActions.playURIs(selected_tracks_uris);
 		this.props.uiActions.hideContextMenu();
 	}
 

src/js/components/TrackList.js

@@ -165,7 +165,7 @@ class TrackList extends React.Component{
 
 		// if we've got a specific action, run it
 		if( typeof(this.props.playTracks) !== 'undefined' ){
-			return this.props.playTracks( tracks );
+			return this.props.playURIs( tracks );
 		}
 
 		// default to playing a bunch of uris
@@ -173,7 +173,7 @@ class TrackList extends React.Component{
 		for( var i = 0; i < tracks.length; i++ ){
 			uris.push( tracks[i].uri )
 		}
-		return this.props.mopidyActions.playTracks( uris )
+		return this.props.mopidyActions.playURIs( uris )
 	}
 
 	removeTracks(){

src/js/helpers.js

@@ -156,6 +156,22 @@ export let uriType = function( uri ){
     return null;
 }
 
+
+/**
+ * Digest an array of objects, and pull into simple array of uris
+ * 
+ * @param items Array
+ * @return Array
+ **/
+export let asURIs = function(items){
+	var uris = []
+	for( var i = 0; i < items.length; i++ ){
+		uris.push( items[i].uri )
+	}
+	return uris
+}
+
+
 /**
  * Merge duplicated items in an array
  *

src/js/services/localstorage/middleware.js

@@ -14,7 +14,7 @@ const localstorageMiddleware = (function(){
         window._store = store
         var actions_to_log = null
         //actions_to_log = 'SPOTIFY'
-        //actions_to_log = 'MOPIDY'
+        actions_to_log = 'MOPIDY'
         if( action.type.startsWith(actions_to_log) ) console.log(action)
 
         switch( action.type ){

src/js/services/mopidy/actions.js

@@ -41,9 +41,9 @@ export function changeTrack( tlid ){
 	}
 }
 
-export function playTracks( uris ){
+export function playURIs( uris ){
 	return {
-		type: 'MOPIDY_PLAY_TRACKS',
+		type: 'MOPIDY_PLAY_URIS',
 		uris: uris
 	}
 }

src/js/services/mopidy/middleware.js

@@ -180,17 +180,18 @@ const MopidyMiddleware = (function(){
                 store.dispatch({ type: 'MOPIDY_URISCHEMES_FILTERED', data: uri_schemes });
                 break;
 
-            case 'MOPIDY_PLAY_TRACKS':
+            case 'MOPIDY_PLAY_URIS':
 
                 // add our first track
                 instruct( socket, store, 'tracklist.add', { uri: action.uris[0], at_position: 0 } )
                     .then( response => {
 
-                        // play it
-                        store.dispatch( mopidyActions.changeTrack( response[0].tlid ) );
-
-                        // TODO: perhaps force update of currentTlTrack before we proceed?
-                        // this will make the UI feel snappier...
+                        if( !response || response.length <= 0 ){
+                            console.error('Could not add URI to tracklist', action.uris[0])
+                        }else{
+                            // play it
+                            store.dispatch( mopidyActions.changeTrack( response[0].tlid ) );                            
+                        }
 
                         // add the rest of our uris (if any)
                         action.uris.shift();

src/js/views/Album.js

@@ -58,6 +58,33 @@ class Album extends React.Component{
 		this.props.spotifyActions.getURL( this.props.album.tracks_more, 'SPOTIFY_ALBUM_LOADED_MORE' );
 	}
 
+	play(){
+		var tracks_uris = helpers.asURIs( this.props.album.tracks )
+		this.props.mopidyActions.playURIs( tracks_uris )
+	}
+
+	follow(){
+		this.props.spotifyActions.toggleFollowingAlbum( this.props.params.uri, 'PUT' )
+	}
+
+	// TODO: Once unfollowing occurs, remove playlist from global playlists list
+	unfollow(){
+		this.props.spotifyActions.toggleFollowingAlbum( this.props.params.uri, 'DELETE' )
+	}
+
+	renderExtraButtons(){
+		switch( helpers.uriSource( this.props.params.uri ) ){
+
+			case 'spotify':
+				if( !this.props.spotify_authorized ) return null
+				if( this.props.playlist.following ){
+					return <button className="large tertiary" onClick={ e => this.unfollow() }>Unfollow</button>
+				}
+				return <button className="large tertiary" onClick={ e => this.follow() }>Follow</button>
+
+		}
+	}
+
 	render(){
 		if( !this.props.album ) return null
 
@@ -66,6 +93,12 @@ class Album extends React.Component{
 				<div className="intro">
 					<Thumbnail size="large" images={ this.props.album.images } />
 					<ArtistGrid artists={ this.props.album.artists } />
+
+					<div className="actions">
+						<button className="large primary" onClick={ e => this.play() }>Play</button>
+						{ this.renderExtraButtons() }
+					</div>
+
 					<ul className="details">
 						<li>{ this.props.album.tracks_total } tracks, <Dater type="total-time" data={this.props.album.tracks} /></li>
 						{ this.props.album.release_date ? <li>Released <Dater type="date" data={ this.props.album.release_date } /></li> : null }

src/js/views/Playlist.js

@@ -56,7 +56,7 @@ class Playlist extends React.Component{
 	}
 
 	play(){
-		this.props.mopidyActions.playTracks([this.props.params.uri])
+		this.props.mopidyActions.playURIs([this.props.params.uri])
 	}
 
 	follow(){
@@ -81,7 +81,7 @@ class Playlist extends React.Component{
 		this.props.uiActions.removeTracksFromPlaylist( this.props.playlist.uri, tracks_indexes )
 	}
 
-	renderEditButtons(){
+	renderExtraButtons(){
 		switch( helpers.uriSource( this.props.params.uri ) ){
 
 			case 'm3u':
@@ -121,7 +121,7 @@ class Playlist extends React.Component{
 
 					<div className="actions">
 						<button className="large primary" onClick={ e => this.play() }>Play</button>
-						{ this.renderEditButtons() }
+						{ this.renderExtraButtons() }
 					</div>
 
 					<ul className="details">