Tidying playlist view with owner details (simplified)

src/js/components/Modal/Modal.js

@@ -29,8 +29,8 @@ class Modal extends React.Component{
 				</div>
 				<div className="content">
 
-					{ this.props.modal.name == 'add_to_playlist' ? <AddToPlaylistModal /> : null }
-					{ this.props.modal.name == 'create_playlist' ? <CreatePlaylistModal /> : null }
+					{ this.props.modal.name == 'add_to_playlist' ? <AddToPlaylistModal uiActions={this.props.uiActions} context_menu={this.props.context_menu.data} /> : null }
+					{ this.props.modal.name == 'create_playlist' ? <CreatePlaylistModal uiActions={this.props.uiActions} /> : null }
 					{ this.props.modal.name == 'edit_playlist' ? <EditPlaylistModal uiActions={this.props.uiActions} data={this.props.modal.data} /> : null }
 
 				</div>

src/js/services/spotify/actions.js

@@ -539,7 +539,8 @@ export function getPlaylist( uri ){
 
         $.when(
 
-             sendRequest( dispatch, getState, 'users/'+ helpers.getFromUri('userid',uri) +'/playlists/'+ helpers.getFromUri('playlistid',uri) +'?market='+getState().spotify.country )
+            // get the main playlist object
+            sendRequest( dispatch, getState, 'users/'+ helpers.getFromUri('userid',uri) +'/playlists/'+ helpers.getFromUri('playlistid',uri) +'?market='+getState().spotify.country )
             .then( response => {
                 Object.assign( playlist, response );
             }),

src/js/views/App.js

@@ -94,9 +94,12 @@ class App extends React.Component{
 				break;	
 
 			case 27: // esc
-				if( this.props.dragger.dragging ){
+				if( this.props.dragger && this.props.dragger.dragging ){
 					this.props.uiActions.dragCancel();
 				}
+				if( this.props.modal ){
+					this.props.uiActions.closeModal();
+				}
 				break;
 		}
 	}
@@ -131,6 +134,7 @@ const mapStateToProps = (state, ownProps) => {
 		spotify_authorized: state.spotify.authorized,
 		play_state: state.mopidy.play_state,
 		dragger: state.ui.dragger,
+		modal: state.ui.modal,
 		context_menu: state.ui.context_menu
 	}
 }

src/js/views/Playlist.js

@@ -2,6 +2,7 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
+import { Link } from 'react-router'
 import FontAwesome from 'react-fontawesome'
 import * as helpers from '../helpers'
 
@@ -120,6 +121,8 @@ class Playlist extends React.Component{
 					<ul className="details">
 						<li>{ this.props.playlist.tracks_total } tracks, <Dater type="total-time" data={this.props.playlist.tracks} /></li>
 						{ this.props.playlist.last_modified ? <li>Updated <Dater type="ago" data={this.props.playlist.last_modified} /> ago</li> : null }
+						{ this.props.playlist.followers ? <li>{this.props.playlist.followers.total} followers</li> : null }
+						{ scheme == 'spotify' ? <li>By <Link to={'/user/'+this.props.playlist.owner.id}>{this.props.playlist.owner.id}</Link> &nbsp;{ !this.props.playlist.public ? <FontAwesome name="lock" /> : null }</li> : null }
 						{ scheme == 'spotify' ? <li><FontAwesome name="spotify" /> Spotify playlist</li> : null }
 						{ scheme == 'm3u' ? <li><FontAwesome name="folder" /> Local playlist</li> : null }
 					</ul>

src/scss/views/_playlist.scss

@@ -23,7 +23,7 @@
 		width: 35%;
 		background: $faint_grey;
 
-		.thumbnail {
+		> .thumbnail {
 			float: none;
 			margin: 0 auto;
 			max-width: none;
@@ -70,5 +70,9 @@
 				}
 			}
 		}
+
+		.owner {
+			padding: 30px;
+		}
 	}
 }