Current track panel

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()}>

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 {