From 7b127e37f5321dddbb394a35a5bb263a2d49bb98 Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Wed, 23 Aug 2017 07:39:33 +1200
Subject: [PATCH] Slim mode global variable removal

---
 src/js/components/FilterField.js         |  8 ++++----
 src/js/components/Track.js               |  2 +-
 src/js/components/TrackList.js           |  4 +++-
 src/js/index.js                          |  1 -
 src/js/views/Album.js                    |  9 +++++----
 src/js/views/Artist.js                   |  5 +++--
 src/js/views/Playlist.js                 | 15 ++++++++-------
 src/js/views/library/LibraryPlaylists.js |  3 ++-
 8 files changed, 26 insertions(+), 21 deletions(-)

diff --git a/src/js/components/FilterField.js b/src/js/components/FilterField.js
index ff2208ee..180cd22e 100755
--- a/src/js/components/FilterField.js
+++ b/src/js/components/FilterField.js
@@ -9,7 +9,7 @@ export default class FilterField extends React.Component{
 		super(props)
 		this.state = {
 			value: '',
-			active: (global.slim_mode ? true : false)
+			active: (this.props.slim_mode ? true : false)
 		}
 
 		this.handleKeyUp = this.handleKeyUp.bind(this)
@@ -24,7 +24,7 @@ export default class FilterField extends React.Component{
 	}
 
 	handleKeyUp(e){
-		if (e.keyCode == 27 && !global.slim_mode){
+		if (e.keyCode == 27 && !this.props.slim_mode){
 			e.preventDefault()
 
 			this.setState({
@@ -43,13 +43,13 @@ export default class FilterField extends React.Component{
 	handleChange(value){
 		this.setState({
 			value: value,
-			active: (global.slim_mode ? true : (value != ''))
+			active: (this.props.slim_mode ? true : (value != ''))
 		})
 		this.props.handleChange(value)
 	}
 
 	handleBlur(){
-		if (this.state.value == '' && !global.slim_mode){
+		if (this.state.value == '' && !this.props.slim_mode){
 			this.setState({active: false})
 		}
 	}
diff --git a/src/js/components/Track.js b/src/js/components/Track.js
index 841f7381..9011116d 100755
--- a/src/js/components/Track.js
+++ b/src/js/components/Track.js
@@ -214,7 +214,7 @@ export default class Track extends React.Component{
 			)
 		}
 
-		if (global.slim_mode){
+		if (this.props.slim_mode){
 
 			// Select zone handles selection events only
 			// We use onClick to capture touch as well as mouse events in one tidy parcel
diff --git a/src/js/components/TrackList.js b/src/js/components/TrackList.js
index f5d9c243..45e68cae 100755
--- a/src/js/components/TrackList.js
+++ b/src/js/components/TrackList.js
@@ -191,7 +191,7 @@ class TrackList extends React.Component{
 	handleSelection(e,track_key){
 		let selected_tracks = this.props.selected_tracks
 
-		if (e.ctrlKey || global.slim_mode){
+		if (e.ctrlKey || this.props.slim_mode){
 
 			// Already selected, so unselect it
 			if (selected_tracks.includes(track_key)){
@@ -395,6 +395,7 @@ class TrackList extends React.Component{
 								<Track
 									show_source_icon={this.props.show_source_icon}
 									key={track_key} 
+									slim_mode={this.props.slim_mode}
 									track={track} 
 									context={this.props.context} 
 									can_sort={this.props.context == 'queue' || this.props.context == 'editable-playlist'} 
@@ -426,6 +427,7 @@ class TrackList extends React.Component{
 
 const mapStateToProps = (state, ownProps) => {
 	return {
+		slim_mode: state.ui.slim_mode,
 		selected_tracks: state.ui.selected_tracks,
 		dragger: state.ui.dragger,
 		current_track: state.core.current_track,
diff --git a/src/js/index.js b/src/js/index.js
index b622a8d0..34e04d32 100755
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -45,7 +45,6 @@ function handleUpdate() {
 }
 
 global.baseURL = '/'
-global.slim_mode = false
 
 ReactDOM.render(
 	<Provider store={store}>
diff --git a/src/js/views/Album.js b/src/js/views/Album.js
index 7c8f114a..2c473b5f 100755
--- a/src/js/views/Album.js
+++ b/src/js/views/Album.js
@@ -122,7 +122,7 @@ class Album extends React.Component{
 		return (
 			<div className="view album-view content-wrapper">
 
-				{global.slim_mode ? <Header icon="cd" title="Album" handleContextMenuTrigger={e => this.handleContextMenu(e)} uiActions={this.props.uiActions} /> : null}
+				{this.props.slim_mode ? <Header icon="cd" title="Album" handleContextMenuTrigger={e => this.handleContextMenu(e)} uiActions={this.props.uiActions} /> : null}
 
 				<div className="thumbnail-wrapper">
 					<Thumbnail size="large" canZoom images={ this.props.album.images } />
@@ -133,8 +133,8 @@ class Album extends React.Component{
 					<h1>{ this.props.album.name }</h1>
 
 					<ul className="details">
-						{ !global.slim_mode ? <li className="has-tooltip"><FontAwesome name={helpers.sourceIcon( this.props.params.uri )} /><span className="tooltip">{helpers.uriSource( this.props.params.uri )} {this.props.album.album_type ? this.props.album.album_type : 'album'}</span></li> : null }
-						{ !global.slim_mode && artists.length > 0 ? <li><ArtistSentence artists={artists} /></li> : null }
+						{ !this.props.slim_mode ? <li className="has-tooltip"><FontAwesome name={helpers.sourceIcon( this.props.params.uri )} /><span className="tooltip">{helpers.uriSource( this.props.params.uri )} {this.props.album.album_type ? this.props.album.album_type : 'album'}</span></li> : null }
+						{ !this.props.slim_mode && artists.length > 0 ? <li><ArtistSentence artists={artists} /></li> : null }
 						{ this.props.album.release_date ? <li><Dater type="date" data={ this.props.album.release_date } /></li> : null }
 						<li>
 							{ this.props.album.tracks_total ? this.props.album.tracks_total : '0' } tracks,&nbsp;
@@ -146,7 +146,7 @@ class Album extends React.Component{
 				<div className="actions">
 					<button className="primary" onClick={e => this.play()}>Play</button>
 					{ helpers.uriSource(this.props.params.uri) == 'spotify' ? <FollowButton className="secondary" uri={this.props.params.uri} addText="Add to library" removeText="Remove from library" is_following={this.inLibrary()} /> : null }
-					{global.slim_mode ? null : <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />}
+					{this.props.slim_mode ? null : <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />}
 				</div>
 
 				<section className="list-wrapper">
@@ -168,6 +168,7 @@ class Album extends React.Component{
 
 const mapStateToProps = (state, ownProps) => {
 	return {
+		slim_mode: state.ui.slim_mode,
 		load_queue: state.ui.load_queue,
 		artists: state.core.artists,
 		album: (state.core.albums && typeof(state.core.albums[ownProps.params.uri]) !== 'undefined' ? state.core.albums[ownProps.params.uri] : false ),
diff --git a/src/js/views/Artist.js b/src/js/views/Artist.js
index 13d003eb..106158e3 100755
--- a/src/js/views/Artist.js
+++ b/src/js/views/Artist.js
@@ -203,7 +203,7 @@ class Artist extends React.Component{
 			return (
 				<div className="view artist-view">
 
-					{global.slim_mode ? <Header className="overlay" icon="mic" title="Artist" handleContextMenuTrigger={e => this.handleContextMenu(e)} uiActions={this.props.uiActions} /> : null}
+					{this.props.slim_mode ? <Header className="overlay" icon="mic" title="Artist" handleContextMenuTrigger={e => this.handleContextMenu(e)} uiActions={this.props.uiActions} /> : null}
 
 					<div className="intro">
 
@@ -214,7 +214,7 @@ class Artist extends React.Component{
 							<div className="actions">
 								{ can_play_radio ? <button className="primary" onClick={e => this.props.pusherActions.startRadio([this.props.artist.uri])}>Start radio</button> : <button className="primary" onClick={e => this.props.mopidyActions.playURIs(this.props.artist.albums_uris, this.props.artist.uri)}>Play all</button>}
 								{ can_follow ? <FollowButton className="white" uri={this.props.params.uri} removeText="Remove from library" addText="Add to library" is_following={this.inLibrary()} /> : null}
-								{global.slim_mode ? null : <ContextMenuTrigger className="white" onTrigger={e => this.handleContextMenu(e)} />}
+								{this.props.slim_mode ? null : <ContextMenuTrigger className="white" onTrigger={e => this.handleContextMenu(e)} />}
 							</div>
 							{ this.renderSubViewMenu() }
 						</div>
@@ -260,6 +260,7 @@ class Artist extends React.Component{
 
 const mapStateToProps = (state, ownProps) => {
 	return {
+		slim_mode: state.ui.slim_mode,
 		load_queue: state.ui.load_queue,
 		artist: (state.core.artists && typeof(state.core.artists[ownProps.params.uri]) !== 'undefined' ? state.core.artists[ownProps.params.uri] : false ),
 		artists: (state.core.artists ? state.core.artists : []),
diff --git a/src/js/views/Playlist.js b/src/js/views/Playlist.js
index c014863c..758b2573 100755
--- a/src/js/views/Playlist.js
+++ b/src/js/views/Playlist.js
@@ -117,7 +117,7 @@ class Playlist extends React.Component{
 					<div className="actions">
 						<button className="primary" onClick={ e => this.play() }>Play</button>
 						<button className="secondary" onClick={ e => this.props.uiActions.openModal('edit_playlist', { uri: this.props.params.uri, name: this.props.playlist.name }) }>Edit</button>
-						{global.slim_mode ? null : <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />}
+						{this.props.slim_mode ? null : <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />}
 					</div>
 				)
 
@@ -127,7 +127,7 @@ class Playlist extends React.Component{
 						<div className="actions">
 							<button className="primary" onClick={ e => this.play() }>Play</button>
 							<button className="secondary" onClick={ e => this.props.uiActions.openModal('edit_playlist', { uri: this.props.params.uri, name: this.props.playlist.name, public: this.props.playlist.public, collaborative: this.props.playlist.collaborative, description: this.props.playlist.description }) }>Edit</button>
-							{global.slim_mode ? null : <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />}
+							{this.props.slim_mode ? null : <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />}
 						</div>
 					)
 				}
@@ -135,7 +135,7 @@ class Playlist extends React.Component{
 					<div className="actions">
 						<button className="primary" onClick={ e => this.play() }>Play</button>
 						<FollowButton className="secondary" uri={this.props.params.uri} addText="Add to library" removeText="Remove from library" is_following={this.inLibrary()} />
-						{global.slim_mode ? null : <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />}
+						{this.props.slim_mode ? null : <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />}
 					</div>
 				)
 
@@ -143,7 +143,7 @@ class Playlist extends React.Component{
 				return (
 					<div className="actions">
 						<button className="primary" onClick={ e => this.play() }>Play</button>
-						{global.slim_mode ? null : <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />}
+						{this.props.slim_mode ? null : <ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />}
 					</div>
 				)
 		}
@@ -169,7 +169,7 @@ class Playlist extends React.Component{
 		return (
 			<div className="view playlist-view content-wrapper">
 
-				{global.slim_mode ? <Header icon="playlist" title="Playlist" handleContextMenuTrigger={e => this.handleContextMenu(e)} uiActions={this.props.uiActions} /> : null}
+				{this.props.slim_mode ? <Header icon="playlist" title="Playlist" handleContextMenuTrigger={e => this.handleContextMenu(e)} uiActions={this.props.uiActions} /> : null}
 
 				<div className="thumbnail-wrapper">
 					<Thumbnail size="large" canZoom images={ this.props.playlist.images } />
@@ -180,8 +180,8 @@ class Playlist extends React.Component{
 					{ this.props.playlist.description ? <h2 className="description grey-text" dangerouslySetInnerHTML={{__html: this.props.playlist.description}}></h2> : null }
 
 					<ul className="details">
-						{ !global.slim_mode ? <li className="has-tooltip"><FontAwesome name={helpers.sourceIcon( this.props.params.uri )} /><span className="tooltip">{helpers.uriSource( this.props.params.uri )} playlist</span></li> : null }
-						{ this.props.playlist.owner && !global.slim_mode ? <li><Link to={'/user/'+this.props.playlist.owner.uri}>{this.props.playlist.owner.id}</Link></li> : null }
+						{ !this.props.slim_mode ? <li className="has-tooltip"><FontAwesome name={helpers.sourceIcon( this.props.params.uri )} /><span className="tooltip">{helpers.uriSource( this.props.params.uri )} playlist</span></li> : null }
+						{ this.props.playlist.owner && !this.props.slim_mode ? <li><Link to={'/user/'+this.props.playlist.owner.uri}>{this.props.playlist.owner.id}</Link></li> : null }
 						{ this.props.playlist.followers ? <li>{this.props.playlist.followers.total.toLocaleString()} followers</li> : null }
 						{ this.props.playlist.last_modified ? <li><Dater type="ago" data={this.props.playlist.last_modified} /></li> : null }
 						<li>
@@ -213,6 +213,7 @@ const mapStateToProps = (state, ownProps) => {
 	var uri = ownProps.params.uri
 	uri = uri.replace(' ','%20')
 	return {
+		slim_mode: state.ui.slim_mode,
 		load_queue: state.ui.load_queue,
 		playlist: (state.core.playlists && state.core.playlists[uri] !== undefined ? state.core.playlists[uri] : false ),
 		spotify_library_playlists: state.spotify.library_playlists,
diff --git a/src/js/views/library/LibraryPlaylists.js b/src/js/views/library/LibraryPlaylists.js
index d4b5651a..d8e6df7a 100755
--- a/src/js/views/library/LibraryPlaylists.js
+++ b/src/js/views/library/LibraryPlaylists.js
@@ -117,7 +117,7 @@ class LibraryPlaylists extends React.Component{
 		}
 
 		if (this.props.view == 'list'){
-			if (global.slim_mode){
+			if (this.props.slim_mode){
 				var columns = [
 					{
 						label: 'Name',
@@ -256,6 +256,7 @@ class LibraryPlaylists extends React.Component{
 
 const mapStateToProps = (state, ownProps) => {
 	return {
+		slim_mode: state.ui.slim_mode,
 		mopidy_connected: state.mopidy.connected,
 		spotify_connected: state.spotify.connected,
 		mopidy_library_playlists: state.mopidy.library_playlists,