From 1c1de75a6f779d416eb6863fcc9869f62331f883 Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Fri, 16 Jun 2017 09:44:19 +1200
Subject: [PATCH] Current track panel

---
 src/js/components/PlaybackControls.js       |  6 ++---
 src/scss/components/_playback-controls.scss | 30 ++++++++++++++++++++-
 2 files changed, 32 insertions(+), 4 deletions(-)

diff --git a/src/js/components/PlaybackControls.js b/src/js/components/PlaybackControls.js
index 134a1dda..3bccc138 100755
--- a/src/js/components/PlaybackControls.js
+++ b/src/js/components/PlaybackControls.js
@@ -59,15 +59,15 @@ class PlaybackControls extends React.Component{
 		return (
 			<div className="playback-controls">
 				
-				<div className="current-track">
+				<a className="current-track">
 					<Thumbnail size="small" images={images} />
 					<div className="title">
 						{ this.props.current_track ? this.props.current_track.name : <span>-</span> }
 					</div>
 					<div className="artist">
-						{ this.props.current_track ? <ArtistSentence artists={ this.props.current_track.artists } /> : <ArtistSentence /> }
+						{ this.props.current_track ? <ArtistSentence nolinks artists={ this.props.current_track.artists } /> : <ArtistSentence /> }
 					</div>
-				</div>
+				</a>
 
 				<section className="playback">
 					<a className="control" onClick={() => this.props.mopidyActions.previous()}>
diff --git a/src/scss/components/_playback-controls.scss b/src/scss/components/_playback-controls.scss
index ceadff8e..6f706b06 100755
--- a/src/scss/components/_playback-controls.scss
+++ b/src/scss/components/_playback-controls.scss
@@ -11,12 +11,40 @@
 	border-top: 1px solid $light_grey;
 
 	.current-track {
+		@include animate();
+		cursor: pointer;
 		position: absolute;
 		bottom: 51px;
 		background: $white;
-		height: 100px;
 		width: 220px;
 		border-top: 1px solid $light_grey;
+		font-size: 16px;
+
+		.thumbnail {
+			float: left;
+			margin: 12px;
+		}
+
+		.title {
+			padding-top: 18px;
+			@include one_line_text;
+		}
+
+		.artist-sentence {
+			opacity: 0.5;
+			display: block;
+			@include one_line_text;
+
+			.artist {
+				color: inherit;
+				text-decoration: none;
+				border-bottom: 1px dotted transparent;
+			}
+		}
+
+		&:hover {
+			background: $faint_grey;
+		}
 	}
 
 	.control {