Slimmer but more useful queue current_track

src/js/components/GridItem.js

@@ -125,7 +125,7 @@ export default class GridItem extends React.Component{
 				to={link} 
 				onClick={e => helpers.scrollTo()} 
 				onContextMenu={e => this.onContextMenu(e)}>
-					<Thumbnail size="medium" className="grid__item__thumbnail" images={images} />
+					<Thumbnail glow size="medium" className="grid__item__thumbnail" images={images} />
 					<div className="grid__item__name">
 						{item.name ? item.name : <span className="opaque-text">{item.uri}</span>}
 					</div>

src/js/components/Thumbnail.js

@@ -57,6 +57,7 @@ export default memo((props) => {
 	return (
 		<div className={class_name}>
 			<div className="thumbnail__image" style={{backgroundImage: 'url("'+(image ? image : '/iris/assets/no-image.svg')+'")'}}></div>
+			{props.glow && image && <div className="thumbnail__image thumbnail__image--glow" style={{backgroundImage: 'url("'+image+'")'}}></div>}
 			{zoom_icon}
 		</div>
 	);

src/js/views/Queue.js

@@ -115,7 +115,7 @@ class Queue extends React.Component {
 		}
 		return (
 			<URILink
-				className={this.props.radio_enabled ? 'artwork radio-enabled' : 'artwork'}
+				className={`current-track__artwork artwork ${this.props.radio_enabled ? 'current-track__artwork--radio-enabled' : ''}`}
 				type="album" 
 				uri={uri}>
 					{this.props.radio_enabled ? <img className="radio-overlay" src="/iris/assets/radio-overlay.png" /> : null}
@@ -194,6 +194,41 @@ class Queue extends React.Component {
 			</span>
 		)
 
+		let added = null;
+		if (current_track && current_track.added_from && current_track.added_by){
+			var type = (current_track.added_from ? helpers.uriType(current_track.added_from) : null);
+
+			switch (type){
+				case "discover":
+					var link = <URILink type="recommendations" uri={helpers.getFromUri('seeds',current_track.added_from)}>discover</URILink>
+					break;
+
+				case "browse":
+					var link = <URILink type="browse" uri={current_track.added_from.replace("iris:browse:","")}>browse</URILink>
+					break;
+
+				case "search":
+					var link = <URILink type="search" uri={current_track.added_from.replace("iris:","")}>search</URILink>
+					break;
+
+				default:
+					var link = <URILink type={type} uri={current_track.added_from}>{type}</URILink>;
+			}
+
+			added = (
+				<div className="current-track__added">
+					Added by {current_track.added_by} from {link}
+				</div>
+			);
+
+		} else if (current_track && current_track.added_by){
+			added = (
+				<div className="current-track__added">
+					Added by {current_track.added_by}
+				</div>
+			);
+		}
+
 		return (
 			<div className="view queue-view preserve-3d">			
 				<Header options={options} uiActions={this.props.uiActions}>
@@ -205,10 +240,16 @@ class Queue extends React.Component {
 				
 					<div className="current-track">
 						{this.renderArtwork(current_track_image)}
-						<div className="title">
-							{current_track ? <URILink type="track" uri={current_track.uri}>{current_track.name}</URILink> : <span>-</span>}
+						<div className="current-track__details">
+
+							<div className="current-track__title">
+								{current_track ? <URILink type="track" uri={current_track.uri}>{current_track.name}</URILink> : <span>-</span>}
+							</div>
+
+							{current_track ? <ArtistSentence className="current-track__artists" artists={current_track.artists} /> : <ArtistSentence className="current-track__artists" />}
+
+							{added}
 						</div>
-						{current_track ? <ArtistSentence artists={current_track.artists} /> : <ArtistSentence />}
 					</div>
 
 					<section className="list-wrapper">

src/scss/components/_grid.scss

@@ -1,11 +1,15 @@
 
 .grid {
 
+	&, * {
+		-webkit-backface-visibility: hidden;
+	}
+
 	&__item {
-		display: inline-block;
+		position: relative !important;
+		display: inline-block !important;
 		vertical-align: top;
 		border-bottom: 0 !important;
-		position: relative;
 		cursor: pointer;
 
 		&__wrapper {
@@ -33,14 +37,22 @@
 			}
 		}
 
-		&:hover{			
+		&:hover {			
 			.thumbnail {
-				opacity: 0.75;
+				&__image {
+					transform: scale(1.01);
+
+					&--glow {
+						@include blur(20px);
+						transform: rotateX(6deg);
+					}
+				}
 			}
 		}
 
 		&:active,
 		&:focus {
+			@include noanimate();
 			-moz-transform: scale(0.98);
 			-webkit-transform: scale(0.98);
 			transform: scale(0.98);

src/scss/components/_images.scss

@@ -1,24 +1,42 @@
 
 
 .thumbnail {
+	position: relative;
+	z-index: 1;
+	perspective: 100px;
 	width: 100%;
 	max-width: 300px;
-	position: relative;
 	
 	&__image {
+		@include animate(0.1s);
+		position: relative;
+		z-index: 2;
 		width: 100%;
 		padding-bottom: 100%;
-		position: relative;
 		background-repeat: no-repeat;
 		background-color: lighten(colour(dark_grey), 2%);
 		background-position: 50% 50%;
 		background-size: cover;
 		border-radius: 3px;
-		z-index: 2;
 
 		.light-theme & {
 			background-color: colour(faint_grey);
 		}
+
+		&--glow {
+			@include blur(10px);
+			position: absolute;
+			z-index: 1;
+			top: 30%;
+			right: 30px;
+			left: 30px;
+			padding-bottom: 70%;
+			width: auto;
+			height: auto;
+			opacity: 0.3;
+			transform: rotateX(4deg);
+			mix-blend-mode: multiply;
+		}
 	}
 
 	&__zoom {

src/scss/components/_playback-controls.scss

@@ -212,6 +212,12 @@
 				bottom: 2px;
 				left: 60px;
 				right: 60px;
+
+				&__track {
+					&__progress {
+						@include animate(0.2s, linear);
+					}
+				}
 			}
 
 			.current {

src/scss/components/_slider.scss

@@ -51,7 +51,6 @@
 		margin-top: -3px;
 
 		&__progress {
-			@include animate(0.2s, linear);
 			position: absolute;
 			background: colour(turquoise);
 			pointer-events: none;

src/scss/views/_queue.scss

@@ -6,24 +6,26 @@
 	}
 
 	.current-track {
-		text-align: center;
 		padding: 40px 0 60px;
+		display: flex;
+		align-items: center;
+		justify-content: center;
 
-		.artwork {
+		&__artwork {
 			position: relative;
-			margin: 0 auto;
-			width: 60%;
-			max-width: 60vh;
+			text-align: right;
 			display: block;
 			border: 0 !important;
 			z-index: 1;
+			width: 48%;
+			margin-right: 2%;
 
 			.thumbnail {
-				margin: 0 auto;
-				max-width: 100%;
+				width: 30vh;
+				display: inline-block;
 			}
 
-			&.radio-enabled {
+			&--radio-enabled {
 				.thumbnail {
 					box-sizing: border-box;
 				}
@@ -39,22 +41,29 @@
 			}
 		}
 
-		.title {
-			font-size: 18px;
-			padding-top: 30px;
+		&__details {
+			width: 48%;
+			margin-left: 2%;
+		}
+
+		&__title {
+			font-size: 1.4rem;
 			position: relative;
 			z-index: 2;
 		}
 
-		.artist-sentence {
-			padding-top: 10px;
+		&__artists {
 			display: block;
-			font-size: 18px;
+			font-size: 1.4rem;
 			opacity: 0.5;
 			position: relative;
 			z-index: 2;
 		}
 
+		&__added {
+			padding-top: 2rem;
+		}
+
 		@include responsive($bp_medium){
 			padding-bottom: 20px;