From c206fe9b3ab7f0686da594fa035049ec9487a7a5 Mon Sep 17 00:00:00 2001
From: James Barnsley <james@barnsley.nz>
Date: Fri, 16 Jun 2017 15:40:39 +1200
Subject: [PATCH] Halfway, so just playback component

---
 src/js/components/PlaybackControls.js       |  5 ++-
 src/js/components/Sidebar.js                |  4 ++
 src/js/components/VolumeControl.js          | 11 ++++-
 src/js/views/Queue.js                       | 45 +++++++++++++++++++--
 src/scss/components/_playback-controls.scss |  9 ++---
 src/scss/components/_sidebar.scss           | 24 ++++++++++-
 6 files changed, 84 insertions(+), 14 deletions(-)

diff --git a/src/js/components/PlaybackControls.js b/src/js/components/PlaybackControls.js
index 3bccc138..f526742e 100755
--- a/src/js/components/PlaybackControls.js
+++ b/src/js/components/PlaybackControls.js
@@ -1,6 +1,7 @@
 
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
+import { Link } from 'react-router'
 import { bindActionCreators } from 'redux'
 import FontAwesome from 'react-fontawesome'
 
@@ -59,7 +60,7 @@ class PlaybackControls extends React.Component{
 		return (
 			<div className="playback-controls">
 				
-				<a className="current-track">
+				<Link className="current-track" to={(this.props.current_track && this.props.current_track.album ? global.baseURL+'album/'+this.props.current_track.album.uri : null)}>
 					<Thumbnail size="small" images={images} />
 					<div className="title">
 						{ this.props.current_track ? this.props.current_track.name : <span>-</span> }
@@ -67,7 +68,7 @@ class PlaybackControls extends React.Component{
 					<div className="artist">
 						{ this.props.current_track ? <ArtistSentence nolinks artists={ this.props.current_track.artists } /> : <ArtistSentence /> }
 					</div>
-				</a>
+				</Link>
 
 				<section className="playback">
 					<a className="control" onClick={() => this.props.mopidyActions.previous()}>
diff --git a/src/js/components/Sidebar.js b/src/js/components/Sidebar.js
index e4ccf552..a5f3d4ca 100755
--- a/src/js/components/Sidebar.js
+++ b/src/js/components/Sidebar.js
@@ -7,6 +7,7 @@ import { Link } from 'react-router'
 import Icon from './Icon'
 import SearchForm from './SearchForm'
 import Dropzones from './Dropzones'
+import Thumbnail from './Thumbnail'
 
 import FontAwesome from 'react-fontawesome'
 import * as mopidyActions from '../services/mopidy/actions'
@@ -20,6 +21,8 @@ class Sidebar extends React.Component{
 	render(){
 		return (
 			<aside>
+					
+				{ this.props.current_track && this.props.current_track.album && this.props.current_track.album.images ? <Thumbnail size="large" images={this.props.current_track.album.images} /> : null }
 
 				<div className="liner">
 
@@ -110,6 +113,7 @@ const mapStateToProps = (state, ownProps) => {
 		pusher_connected: state.pusher.connected,
 		spotify_connected: state.spotify.connected,
 		spotify_authorized: state.spotify.authorized,
+		current_track: (typeof(state.ui.current_track) !== 'undefined' && typeof(state.ui.tracks) !== 'undefined' && typeof(state.ui.tracks[state.ui.current_track.uri]) !== 'undefined' ? state.ui.tracks[state.ui.current_track.uri] : null),
 		dragger: state.ui.dragger
 	}
 }
diff --git a/src/js/components/VolumeControl.js b/src/js/components/VolumeControl.js
index 9718eda2..e69bf368 100755
--- a/src/js/components/VolumeControl.js
+++ b/src/js/components/VolumeControl.js
@@ -16,10 +16,17 @@ class VolumeControl extends React.Component{
 
 	handleClick(e){
 		var slider = e.target;
+		if( slider.className != 'slider' ) slider = slider.parentElement;
 
-		var sliderY = e.clientY - slider.getBoundingClientRect().top;
+		var sliderX = e.clientX - slider.getBoundingClientRect().left;
 		var sliderWidth = slider.getBoundingClientRect().width;
-		var percent = 100 - parseInt( sliderY / sliderWidth * 100 );
+		var percent = Math.round(( sliderX / sliderWidth ) * 100);
+
+		if (percent > 100){
+			percent = 100
+		} else if (percent < 0 ){
+			percent = 0
+		}
 
 		this.props.mopidyActions.setVolume( percent )
 	}
diff --git a/src/js/views/Queue.js b/src/js/views/Queue.js
index 74c4d029..753fda7b 100755
--- a/src/js/views/Queue.js
+++ b/src/js/views/Queue.js
@@ -1,7 +1,7 @@
 
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
-import { hashHistory } from 'react-router'
+import { hashHistory, Link } from 'react-router'
 import { bindActionCreators } from 'redux'
 import FontAwesome from 'react-fontawesome'
 
@@ -11,6 +11,7 @@ import Dater from '../components/Dater'
 import SidebarToggleButton from '../components/SidebarToggleButton'
 import FullPlayer from '../components/FullPlayer'
 import ArtistSentence from '../components/ArtistSentence'
+import Thumbnail from '../components/Thumbnail'
 import Header from '../components/Header'
 
 import * as uiActions from '../services/ui/actions'
@@ -56,6 +57,34 @@ class Queue extends React.Component{
 		)
 	}
 
+	renderArtwork(){
+		if( 
+			!this.props.current_track || 
+			!this.props.current_track.album || 
+			!this.props.current_track.album.images ){
+				return (
+					<span className={this.props.radio_enabled ? 'artwork radio-enabled' : 'artwork'}>
+						{this.props.radio_enabled ? <img className="radio-overlay" src="assets/radio-overlay.png" /> : null}
+						<Thumbnail size="huge" />
+					</span>
+				)
+		}
+
+		var images = []
+		if (this.props.current_track && this.props.current_track.album && this.props.current_track.album.images){
+			images = this.props.current_track.album.images
+		}
+
+		var link = null
+		if( this.props.current_track.album.uri ) link = '/album/'+this.props.current_track.album.uri
+		return (
+			<Link className={this.props.radio_enabled ? 'artwork radio-enabled' : 'artwork'} to={link} onContextMenu={e => this.handleContextMenu(e,this.props.current_track.album)}>
+				{this.props.radio_enabled ? <img className="radio-overlay" src="assets/radio-overlay.png" /> : null}
+				<Thumbnail size="huge" images={images} canZoom />
+			</Link>
+		)
+	}
+
 	render(){
 		var options = (
 			<span>
@@ -82,7 +111,15 @@ class Queue extends React.Component{
 		return (
 			<div className="view queue-view">			
 				<Header icon="play" title="Now playing" options={options} uiActions={this.props.uiActions} />
-				<FullPlayer />
+
+				{ this.renderArtwork() }
+
+				<div className="current-track">
+					<div className="title">
+						{this.props.current_track ? this.props.current_track.name : <span>-</span>}
+					</div>
+					{this.props.current_track ? <ArtistSentence artists={ this.props.current_track.artists } /> : <ArtistSentence />}
+				</div>
 
 				<section className="list-wrapper">
 					<TrackList
@@ -111,7 +148,9 @@ class Queue extends React.Component{
 const mapStateToProps = (state, ownProps) => {
 	return {
 		radio: state.ui.radio,
-		current_tracklist: state.ui.current_tracklist
+		radio_enabled: (state.ui.radio && state.ui.radio.enabled ? true : false),
+		current_tracklist: state.ui.current_tracklist,
+		current_track: (typeof(state.ui.current_track) !== 'undefined' && typeof(state.ui.tracks) !== 'undefined' && typeof(state.ui.tracks[state.ui.current_track.uri]) !== 'undefined' ? state.ui.tracks[state.ui.current_track.uri] : null),
 	}
 }
 
diff --git a/src/scss/components/_playback-controls.scss b/src/scss/components/_playback-controls.scss
index 6f706b06..074325b2 100755
--- a/src/scss/components/_playback-controls.scss
+++ b/src/scss/components/_playback-controls.scss
@@ -8,17 +8,16 @@
 	height: 50px;
 	background: $white;
 	color: $black;
-	border-top: 1px solid $light_grey;
 
 	.current-track {
 		@include animate();
 		cursor: pointer;
 		position: absolute;
-		bottom: 51px;
-		background: $white;
+		bottom: 50px;
 		width: 220px;
-		border-top: 1px solid $light_grey;
 		font-size: 16px;
+		color: $white;
+		text-decoration: none;
 
 		.thumbnail {
 			float: left;
@@ -43,7 +42,7 @@
 		}
 
 		&:hover {
-			background: $faint_grey;
+			background: rgba(255,255,255,0.1);
 		}
 	}
 
diff --git a/src/scss/components/_sidebar.scss b/src/scss/components/_sidebar.scss
index 30920647..44ecc419 100755
--- a/src/scss/components/_sidebar.scss
+++ b/src/scss/components/_sidebar.scss
@@ -7,7 +7,8 @@ aside{
 	z-index: 96;
 	width: 220px;
 	overflow: hidden;
-	border-right: 1px solid $light_grey;
+	background: $darkest_grey;
+	color: $white;
 
 	.liner {
 		overflow-y: auto;
@@ -44,6 +45,25 @@ aside{
 			bottom: 60px;
 		}
 	}
+	
+	.thumbnail {
+		position: absolute;
+		top: -30px;
+		right: -30px;
+		bottom: -30px;
+		left: -30px;
+		height: auto;
+		width: auto;
+		max-width: none;
+		z-index: 1;
+		opacity: 0.2;
+
+		.image {
+			@include blur();
+			padding-bottom: 0;
+			height: 100%;
+		}
+	}
 
 	nav {
 		z-index: 2;
@@ -52,7 +72,7 @@ aside{
 
 		a {
 			font-size: 16px;
-			color: $black;
+			color: $white;
 			text-decoration: none;
 			display: block;
 			padding: 6px 18px 6px 6px;