From c9a5f80dd55ea771e6bd0a90fd2f8a7701842da3 Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Wed, 22 Mar 2017 15:32:55 +1300
Subject: [PATCH] images_alternative for artists; Larger kiosk text

---
 src/js/services/ui/reducer.js    |  9 +++++++--
 src/js/views/Artist.js           |  3 ++-
 src/scss/components/_images.scss | 14 +++++++++++++-
 src/scss/components/_lists.scss  |  1 +
 src/scss/components/_modal.scss  |  3 ++-
 src/scss/views/_artist.scss      |  4 ++--
 6 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/js/services/ui/reducer.js b/src/js/services/ui/reducer.js
index 1a6a379a..cccda94a 100755
--- a/src/js/services/ui/reducer.js
+++ b/src/js/services/ui/reducer.js
@@ -298,9 +298,14 @@ export default function reducer(ui = {}, action){
             var artists = Object.assign([], ui.artists)
 
             if (artists[action.key]){
-                // if we've already got images, delete our new ones
+
+                // if we've already got images, remove and add as additional_images
                 // this is to prevent LastFM overwriting Spotify images
-                if (artists[action.key].images) delete action.artist.images
+                if (artists[action.key].images){
+                    action.artist.images_additional = action.artist.images
+                    delete action.artist.images
+                }
+
                 var artist = Object.assign({}, artists[action.key], action.artist)
             }else{
                 var artist = Object.assign({}, action.artist)
diff --git a/src/js/views/Artist.js b/src/js/views/Artist.js
index f14f30b2..720e5ab0 100755
--- a/src/js/views/Artist.js
+++ b/src/js/views/Artist.js
@@ -150,6 +150,7 @@ class Artist extends React.Component{
 				<div className="body about">
 
 					<div className="col w40 tiles">
+						{this.props.artist.images_additional ? <div className="tile thumbnail-wrapper"><Thumbnail size="large" images={this.props.artist.images_additional} /></div> : null}
 						{this.props.artist.followers ? <div className="tile"><span className="text"><FontAwesome name="users" />{this.props.artist.followers.total.toLocaleString() } followers</span></div> : null}
 						{this.props.artist.popularity ? <div className="tile"><span className="text"><FontAwesome name="fire" />{this.props.artist.popularity }% popularity</span></div> : null}
 						{this.props.artist.listeners ? <div className="tile"><span className="text"><FontAwesome name="headphones" />{ this.props.artist.listeners.toLocaleString() } listeners</span></div> : null }
@@ -214,7 +215,7 @@ class Artist extends React.Component{
 						<Parallax image={image} />
 
 						<div className="liner">
-							<Thumbnail image={image} circle />
+							<Thumbnail image={image} canZoom circle />
 							<h1>{this.props.artist ? this.props.artist.name : null}</h1>
 							<div className="actions">
 								{ can_play_radio ? <button className="primary" onClick={e => this.props.pusherActions.startRadio([this.props.artist.uri])}>Start radio</button> : null}
diff --git a/src/scss/components/_images.scss b/src/scss/components/_images.scss
index ec31f053..5437a550 100755
--- a/src/scss/components/_images.scss
+++ b/src/scss/components/_images.scss
@@ -40,7 +40,14 @@
 	}
 
 	&.circle {
-		border-radius: 50%;
+		.image {
+			border-radius: 50%;
+		}
+
+		.zoom {
+			bottom: 0;
+			right: 0;
+		}
 	}
 
 	&:hover {
@@ -112,6 +119,11 @@
 			z-index: -2;
 		}
 
+		&.thumbnail-wrapper {
+			&:before {
+				display: none;
+			}
+		}
 	}
 
 	@include responsive( null, $bp_medium ){
diff --git a/src/scss/components/_lists.scss b/src/scss/components/_lists.scss
index ba760ece..68c0f639 100755
--- a/src/scss/components/_lists.scss
+++ b/src/scss/components/_lists.scss
@@ -168,6 +168,7 @@
 
 			.thumbnail {
 				@include animate();
+				border-radius: 50%;
 				width: 50px;
 				margin-right: 15px;
 				float: left;
diff --git a/src/scss/components/_modal.scss b/src/scss/components/_modal.scss
index 352a14b8..cc684c3a 100755
--- a/src/scss/components/_modal.scss
+++ b/src/scss/components/_modal.scss
@@ -189,7 +189,8 @@
 			}
 
 			.current-track {
-				padding-top: 30px;
+				padding-top: 50px;
+				font-size: 30px;
 			}
 		}
 	}
diff --git a/src/scss/views/_artist.scss b/src/scss/views/_artist.scss
index f9f4db4c..e5af439a 100755
--- a/src/scss/views/_artist.scss
+++ b/src/scss/views/_artist.scss
@@ -18,14 +18,14 @@
 		.liner {
 			position: relative;
 			z-index: 1;
-			padding: 20vh 40px 0 220px;
+			padding: 20vh 40px 0 260px;
 
 			.thumbnail {
 				position: absolute;
 				z-index: 2;
 				left: 40px;
 				bottom: 20px;
-				max-width: 144px;
+				max-width: 184px;
 
 				.image {
 					background-color: $darkest_grey;