@@ -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 (
+
+ {this.props.radio_enabled ?
: null}
+
+
+ )
+ }
+
+ 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 (
+
this.handleContextMenu(e,this.props.current_track.album)}>
+ {this.props.radio_enabled ?

: null}
+
+
+ )
+ }
+
render(){
var options = (
@@ -82,7 +111,15 @@ class Queue extends React.Component{
return (
-
+
+ { this.renderArtwork() }
+
+
+
+ {this.props.current_track ? this.props.current_track.name : -}
+
+ {this.props.current_track ?
:
}
+
{
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;