diff --git a/src/assets/icons/cd.svg b/src/assets/icons/cd.svg index d499145a..e88b87ab 100755 --- a/src/assets/icons/cd.svg +++ b/src/assets/icons/cd.svg @@ -1,20 +1,119 @@ - - + - - + viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"> + + + + + + + + + - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - diff --git a/src/assets/icons/cog.svg b/src/assets/icons/cog.svg index 1e4c62c8..d96ed6a0 100755 --- a/src/assets/icons/cog.svg +++ b/src/assets/icons/cog.svg @@ -1,44 +1,120 @@ - - + - - - + viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"> + + + + - - + + + + + + + + + + + + + + + + + + + + + - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/compass.svg b/src/assets/icons/compass.svg index ffd2ea4c..52697132 100755 --- a/src/assets/icons/compass.svg +++ b/src/assets/icons/compass.svg @@ -1,15 +1,116 @@ - - + - - - + viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - diff --git a/src/assets/icons/folder.svg b/src/assets/icons/folder.svg index 7d1628bb..02e14472 100755 --- a/src/assets/icons/folder.svg +++ b/src/assets/icons/folder.svg @@ -1,14 +1,123 @@ - - + + viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"> + + + + + + + + + + + + + + + + + + + + + + + + + + + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - diff --git a/src/assets/icons/grid.svg b/src/assets/icons/grid.svg index 12256caf..9cabb327 100755 --- a/src/assets/icons/grid.svg +++ b/src/assets/icons/grid.svg @@ -1,12 +1,150 @@ - - + + viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/leaf.svg b/src/assets/icons/leaf.svg index 3f9834f3..91b25830 100755 --- a/src/assets/icons/leaf.svg +++ b/src/assets/icons/leaf.svg @@ -1,9 +1,151 @@ - - + - + viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/mic.svg b/src/assets/icons/mic.svg index 277ffac6..ea8cd225 100755 --- a/src/assets/icons/mic.svg +++ b/src/assets/icons/mic.svg @@ -1,14 +1,152 @@ - - + + viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + - - - - + + + + + + diff --git a/src/assets/icons/music.svg b/src/assets/icons/music.svg index 1f992d9b..691775d3 100755 --- a/src/assets/icons/music.svg +++ b/src/assets/icons/music.svg @@ -1,10 +1,121 @@ - - + - - - + viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/play.svg b/src/assets/icons/play.svg index ebf97483..c9f54500 100755 --- a/src/assets/icons/play.svg +++ b/src/assets/icons/play.svg @@ -1,11 +1,122 @@ - - + + viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"> + - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/playlist.svg b/src/assets/icons/playlist.svg index 7b9f74e5..40e75c6d 100755 --- a/src/assets/icons/playlist.svg +++ b/src/assets/icons/playlist.svg @@ -1,12 +1,120 @@ - - + - - - - - + viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/search.svg b/src/assets/icons/search.svg index f9a5305c..18ff2df5 100755 --- a/src/assets/icons/search.svg +++ b/src/assets/icons/search.svg @@ -1,10 +1,118 @@ - - + - - - + viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/icons/star.svg b/src/assets/icons/star.svg index 5fc9561a..0f91a704 100755 --- a/src/assets/icons/star.svg +++ b/src/assets/icons/star.svg @@ -1,16 +1,152 @@ - - + - - + viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve"> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/js/services/pusher/actions.js b/src/js/services/pusher/actions.js index 2db1d776..1df09c0f 100755 --- a/src/js/services/pusher/actions.js +++ b/src/js/services/pusher/actions.js @@ -13,7 +13,7 @@ export function setPort( port ){ export function setUsername( username ){ return { type: 'PUSHER_SET_USERNAME', - username: username + username: username.replace(/[\W_]+/g,'') } } diff --git a/src/js/services/spotify/middleware.js b/src/js/services/spotify/middleware.js index d171856a..79fe475d 100755 --- a/src/js/services/spotify/middleware.js +++ b/src/js/services/spotify/middleware.js @@ -2,6 +2,7 @@ var helpers = require('./../../helpers') var spotifyActions = require('./actions') var uiActions = require('../ui/actions') +var pusherActions = require('../pusher/actions') const SpotifyMiddleware = (function(){ @@ -348,6 +349,22 @@ const SpotifyMiddleware = (function(){ }); break + case 'SPOTIFY_ME_LOADED': + + // We've loaded 'me' and we are Anonymous currently + if (action.data && store.getState().pusher.username == 'Anonymous'){ + if (typeof(action.data.display_name) !== 'undefined'){ + var name = action.data.display_name + } else { + var name = action.data.id + } + + // Use 'me' name as my Pusher username + store.dispatch(pusherActions.setUsername(name)) + } + next(action) + break; + // This action is irrelevant to us, pass it on to the next middleware default: return next(action); diff --git a/src/js/views/Settings.js b/src/js/views/Settings.js index 478f9e43..0232e1f6 100755 --- a/src/js/views/Settings.js +++ b/src/js/views/Settings.js @@ -26,10 +26,45 @@ class Settings extends React.Component{ this.state = { mopidy_host: this.props.mopidy.host, mopidy_port: this.props.mopidy.port, - pusher_username: this.props.pusher.username, spotify_country: this.props.spotify.country, - spotify_locale: this.props.spotify.locale - }; + spotify_locale: this.props.spotify.locale, + pusher_username: this.props.pusher.username, + input_in_focus: null + } + } + + componentWillReceiveProps(newProps){ + var changed = false + var state = this.state + + if (newProps.spotify.country != this.state.spotify_country && this.state.input_in_focus != 'spotify_country'){ + state.spotify_country = newProps.spotify.country + changed = true + } + + if (newProps.spotify.locale != this.state.spotify_locale && this.state.input_in_focus != 'spotify_locale'){ + state.spotify_locale = newProps.spotify.locale + changed = true + } + + if (newProps.mopidy.host != this.state.mopidy_host && this.state.input_in_focus != 'mopidy_host'){ + state.mopidy_host = newProps.mopidy.host + changed = true + } + + if (newProps.mopidy.port != this.state.mopidy_port && this.state.input_in_focus != 'mopidy_port'){ + state.mopidy_port = newProps.mopidy.port + changed = true + } + + if (newProps.pusher.username != this.state.pusher_username && this.state.input_in_focus != 'pusher_username'){ + state.pusher_username = newProps.pusher.username + changed = true + } + + if (changed){ + this.setState(state) + } } resetAllSettings(){ @@ -40,6 +75,7 @@ class Settings extends React.Component{ } setMopidyConfig(e){ + this.setState({input_in_focus: null}) e.preventDefault(); this.props.mopidyActions.setConfig({ host: this.state.mopidy_host, port: this.state.mopidy_port }); window.location.reload(true); @@ -47,6 +83,7 @@ class Settings extends React.Component{ } setSpotifyConfig(e){ + this.setState({input_in_focus: null}) e.preventDefault(); this.props.spotifyActions.setConfig({ country: this.state.spotify_country, locale: this.state.spotify_locale }); return false; @@ -56,6 +93,11 @@ class Settings extends React.Component{ this.setState({pusher_username: username.replace(/\W/g, '')}) } + handleUsernameBlur(e){ + this.setState({input_in_focus: null}) + this.props.pusherActions.setUsername(this.state.pusher_username) + } + renderConnectionStatus(service){ if (service == 'Spotify' && !this.props[service.toLowerCase()].authorized){ return ( @@ -212,8 +254,9 @@ class Settings extends React.Component{ this.handleUsernameChange(e.target.value)} - onBlur={ e => this.props.pusherActions.setUsername(this.state.pusher_username) } - value={ this.state.pusher_username } /> + onFocus={e => this.setState({input_in_focus: 'pusher_username'})} + onBlur={e => this.handleUsernameBlur(e)} + value={this.state.pusher_username } />
@@ -222,6 +265,8 @@ class Settings extends React.Component{ this.setState({ mopidy_host: e.target.value })} + onFocus={e => this.setState({input_in_focus: 'mopidy_host'})} + onBlur={e => this.setState({input_in_focus: null})} value={ this.state.mopidy_host } />
@@ -231,6 +276,8 @@ class Settings extends React.Component{ this.setState({ mopidy_port: e.target.value })} + onFocus={e => this.setState({input_in_focus: 'mopidy_port'})} + onBlur={e => this.setState({input_in_focus: null})} value={ this.state.mopidy_port } /> @@ -244,8 +291,9 @@ class Settings extends React.Component{
this.setState({ spotify_country: e.target.value })} - onBlur={ e => this.setSpotifyConfig(e) } + onChange={e => this.setState({ spotify_country: e.target.value })} + onFocus={e => this.setState({input_in_focus: 'spotify_country'})} + onBlur={e => this.setSpotifyConfig(e) } value={ this.state.spotify_country } />
@@ -254,9 +302,10 @@ class Settings extends React.Component{
this.setState({ spotify_locale: e.target.value })} - onBlur={ e => this.setSpotifyConfig(e) } - value={ this.state.spotify_locale } /> + onChange={e => this.setState({ spotify_locale: e.target.value })} + onFocus={e => this.setState({input_in_focus: 'spotify_locale'})} + onBlur={e => this.setSpotifyConfig(e) } + value={this.state.spotify_locale} />
diff --git a/src/scss/components/_header.scss b/src/scss/components/_header.scss index 0b383b2d..03f799cb 100755 --- a/src/scss/components/_header.scss +++ b/src/scss/components/_header.scss @@ -14,7 +14,7 @@ main { padding-right: 14px; height: 2.6rem; vertical-align: bottom; - margin-bottom: 5px; + margin-bottom: 8px; } .options { diff --git a/src/scss/components/_sidebar.scss b/src/scss/components/_sidebar.scss index 6e6aa078..cebeec08 100755 --- a/src/scss/components/_sidebar.scss +++ b/src/scss/components/_sidebar.scss @@ -37,20 +37,20 @@ aside{ text-decoration: none; display: block; padding: 9px 10px 5px; - margin: 0 20px; + margin: 0 16px; border-radius: 3px; line-height: 18px; .icon { height: 14px; - padding-right: 8px; + padding-right: 12px; vertical-align: top; + margin-top: 0; } &.active { background: $turquoise; color: $white; - opacity: 1 !important; &:before { opacity: 0.15; diff --git a/src/scss/global/_core.scss b/src/scss/global/_core.scss index 55768c92..2bd2e950 100755 --- a/src/scss/global/_core.scss +++ b/src/scss/global/_core.scss @@ -304,9 +304,10 @@ footer { color: $white; font-size: 11px; line-height: 11px; - top: -22px; + top: -24px; left: 1px; z-index: 97; + border-radius: 3px; &::before { content: ''; @@ -326,7 +327,7 @@ footer { &:hover { .tooltip { opacity: 1; - top: -18px; + top: -22px; } } }