secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Full circle - back to one-page settings

Browse Source
This commit is contained in:
James Barnsley
2017-08-05 22:25:25 +12:00
parent e1ee57bdad
commit 53e482d7d6
20 changed files with 927 additions and 453 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/js/bootstrap.js vendored
View File

@ -61,9 +61,8 @@ var initialState = {
track: {}
},
spotify: {
enabled: true,
connected: false,
access: 'none',
authentication_provider: 'backend',
me: false,
autocomplete_results: {},
authorization_url: 'https://jamesbarnsley.co.nz/auth_v2.php'

5
src/js/components/FollowButton.js
View File

@ -15,7 +15,7 @@ class FollowButton extends React.Component{
}
componentDidMount(){
if (this.props.spotify_access == 'full' && this.props.uri){
if (this.props.spotify_authorized && this.props.uri){
this.props.spotifyActions.following(this.props.uri)
}
}
@ -29,7 +29,7 @@ class FollowButton extends React.Component{
}
render(){
if (this.props.spotify_access !== 'full' || !this.props.uri){
if (!this.props.spotify_authorized || !this.props.uri){
return false
}
@ -56,7 +56,6 @@ class FollowButton extends React.Component{
const mapStateToProps = (state, ownProps) => {
return {
load_queue: state.ui.load_queue,
spotify_access: state.spotify.access,
spotify_authorized: state.spotify.authorization
}
}

99
src/js/components/Settings/Advanced.js Executable file
View File

@ -0,0 +1,99 @@
import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { Link, hashHistory } from 'react-router'
import { bindActionCreators } from 'redux'
import FontAwesome from 'react-fontawesome'
import ConfirmationButton from '../ConfirmationButton'
import PusherConnectionList from '../PusherConnectionList'
import URISchemesList from '../URISchemesList'
import VersionManager from '../VersionManager'
import * as uiActions from '../../services/ui/actions'
import * as pusherActions from '../../services/pusher/actions'
import * as mopidyActions from '../../services/mopidy/actions'
import * as spotifyActions from '../../services/spotify/actions'
class Advanced extends React.Component{
constructor(props) {
super(props)
}
render(){
return (
<div>
<h4 className="underline">Pusher</h4>
<div className="field pusher-connections">
<div className="name">Connections</div>
<div className="input">
<span className="text">
<PusherConnectionList />
</span>
</div>
</div>
<h4 className="underline">Mopidy extensions</h4>
<URISchemesList />
<h4 className="underline">Core</h4>
<div className="field checkbox">
<div className="name">Customise behavior</div>
<div className="input">
<label>
<input
type="checkbox"
name="log_actions"
checked={ this.props.ui.clear_tracklist_on_play }
onChange={ e => this.props.uiActions.set({ clear_tracklist_on_play: !this.props.ui.clear_tracklist_on_play })} />
<span className="label">Clear tracklist on play of URI(s)</span>
</label>
</div>
</div>
<div className="field">
<div className="name">Version</div>
<div className="input">
<VersionManager />
</div>
</div>
<div className="field">
<div className="name">Reset</div>
<div className="input">
<ConfirmationButton className="destructive" content="Reset all settings" confirmingContent="Are you sure?" onConfirm={() => this.resetAllSettings()} />
</div>
</div>
</div>
);
}
}
/**
* Export our component
*
* We also integrate our global store, using connect()
**/
const mapStateToProps = (state, ownProps) => {
return {
ui: state.ui
}
}
const mapDispatchToProps = (dispatch) => {
return {
uiActions: bindActionCreators(uiActions, dispatch),
pusherActions: bindActionCreators(pusherActions, dispatch),
mopidyActions: bindActionCreators(mopidyActions, dispatch),
spotifyActions: bindActionCreators(spotifyActions, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Advanced)

224
src/js/components/Settings/Services.js
View File

@ -1,224 +0,0 @@
import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { Link, hashHistory } from 'react-router'
import { bindActionCreators } from 'redux'
import FontAwesome from 'react-fontawesome'
import SpotifyAuthenticationFrame from '../SpotifyAuthenticationFrame'
import ConfirmationButton from '../ConfirmationButton'
import PusherConnectionList from '../PusherConnectionList'
import URISchemesList from '../URISchemesList'
import VersionManager from '../VersionManager'
import Header from '../Header'
import Thumbnail from '../Thumbnail'
import * as uiActions from '../../services/ui/actions'
import * as pusherActions from '../../services/pusher/actions'
import * as mopidyActions from '../../services/mopidy/actions'
import * as spotifyActions from '../../services/spotify/actions'
class Services extends React.Component{
constructor(props) {
super(props)
this.state = {
spotify_authentication_provider: this.props.spotify.authentication_provider,
spotify_country: this.props.spotify.country,
spotify_locale: this.props.spotify.locale,
input_in_focus: null
}
}
componentWillReceiveProps(newProps){
var changed = false
var state = this.state
if (newProps.spotify.authentication_provider != this.state.spotify_authentication_provider && this.state.input_in_focus != 'spotify_authentication_provider'){
state.spotify_authentication_provider = newProps.spotify.authentication_provider
changed = true
}
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 (changed){
this.setState(state)
}
}
setSpotifyConfig(state = this.state){
this.props.spotifyActions.setConfig({
authentication_provider: state.spotify_authentication_provider,
country: state.spotify_country,
locale: state.spotify_locale
});
this.setState({input_in_focus: null})
}
setProvider(provider){
let state = this.state
state.spotify_authentication_provider = provider
this.setSpotifyConfig(state)
this.setState(state)
}
renderSpotifyUser(){
var user = null
if (this.props.spotify.me && this.props.spotify.authorization && this.props.spotify.authentication_provider == 'http_api'){
user = this.props.spotify.me
} else if (this.props.spotify.backend_username){
if (this.props.core.users && this.props.core.users['spotify:user:'+this.props.spotify.backend_username] !== undefined){
user = this.props.core.users['spotify:user:'+this.props.spotify.backend_username]
}
}
if (user){
return (
<Link className="user" to={global.baseURL+'user/'+user.uri}>
<Thumbnail circle={true} size="small" images={user.images} />
<span className="user-name">
{user.display_name ? user.display_name : user.id}
</span>
</Link>
)
} else if (this.props.spotify.backend_username){
return (
<Link className="user" to={global.baseURL+'user/spotify:user:'+this.props.spotify.backend_username}>
<Thumbnail circle={true} size="small" />
<span className="user-name">
{this.props.spotify.backend_username}
</span>
</Link>
)
} else {
return (
<Link className="user">
<Thumbnail circle={true} size="small" />
<span className="user-name">
Unknown
</span>
</Link>
)
}
}
renderSendAuthorizationButton(){
if (!this.props.spotify.authorization) return null
return (
<button onClick={e => this.props.uiActions.openModal('send_authorization', {}) }>
Share authentication
</button>
)
}
render(){
return (
<div>
<h4 className="underline">Spotify (access {this.props.spotify.access})</h4>
{!this.props.uri_schemes.includes('spotify:') ? <span className="red-text">Mopidy-Spotify not running</span> : null}
<div className="field">
<div className="name">Country</div>
<div className="input">
<input
type="text"
onChange={e => this.setState({ spotify_country: e.target.value })}
onFocus={e => this.setState({input_in_focus: 'spotify_country'})}
onBlur={e => this.setSpotifyConfig() }
value={ this.state.spotify_country } />
</div>
</div>
<div className="field">
<div className="name">Locale</div>
<div className="input">
<input
type="text"
onChange={e => this.setState({ spotify_locale: e.target.value })}
onFocus={e => this.setState({input_in_focus: 'spotify_locale'})}
onBlur={e => this.setSpotifyConfig() }
value={this.state.spotify_locale} />
</div>
</div>
<div className="field radio">
<span className="name">Authentication provider</span>
<div className="input">
<label>
<input
type="radio"
name="spotify_authentication_provider"
value="backend"
checked={this.props.spotify.authentication_provider == 'backend'}
onChange={e => this.setProvider(e.target.value)}
/>
<span className="label">Mopidy-Spotify</span>
</label>
<label>
<input
type="radio"
name="spotify_authentication_provider"
value="http_api"
checked={this.props.spotify.authentication_provider == 'http_api' }
onChange={e => this.setProvider(e.target.value)}
/>
<span className="label">HTTP API</span>
</label>
</div>
</div>
{this.props.spotify.authentication_provider == 'http_api' ? <div className="field">
<div className="name">Authentication</div>
<div className="input">
<SpotifyAuthenticationFrame />
{ this.renderSendAuthorizationButton() }
</div>
</div> : null}
<div className="field current-user">
<div className="name">Current user</div>
<div className="input">
<div className="text">
{ this.renderSpotifyUser() }
</div>
</div>
</div>
</div>
);
}
}
/**
* Export our component
*
* We also integrate our global store, using connect()
**/
const mapStateToProps = (state, ownProps) => {
return {
uri_schemes: (state.mopidy.uri_schemes ? state.mopidy.uri_schemes : []),
core: state.core,
spotify: state.spotify
}
}
const mapDispatchToProps = (dispatch) => {
return {
uiActions: bindActionCreators(uiActions, dispatch),
pusherActions: bindActionCreators(pusherActions, dispatch),
mopidyActions: bindActionCreators(mopidyActions, dispatch),
spotifyActions: bindActionCreators(spotifyActions, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Services)

195
src/js/components/Settings/System.js
View File

@ -6,11 +6,9 @@ import { bindActionCreators } from 'redux'
import FontAwesome from 'react-fontawesome'
import SpotifyAuthenticationFrame from '../SpotifyAuthenticationFrame'
import ConfirmationButton from '../ConfirmationButton'
import PusherConnectionList from '../PusherConnectionList'
import URISchemesList from '../URISchemesList'
import VersionManager from '../VersionManager'
import Thumbnail from '../Thumbnail'
import * as coreActions from '../../services/core/actions'
import * as uiActions from '../../services/ui/actions'
import * as pusherActions from '../../services/pusher/actions'
import * as mopidyActions from '../../services/mopidy/actions'
@ -21,6 +19,8 @@ class System extends React.Component{
constructor(props) {
super(props);
this.state = {
country: this.props.core.country,
locale: this.props.core.locale,
mopidy_host: this.props.mopidy.host,
mopidy_port: this.props.mopidy.port,
pusher_username: this.props.pusher.username,
@ -57,6 +57,13 @@ class System extends React.Component{
return false;
}
handleBlur(name, value){
this.setState({input_in_focus: null})
var data = {}
data[name] = value
this.props.coreActions.set(data)
}
handleUsernameChange(username){
this.setState({pusher_username: username.replace(/\W/g, '')})
}
@ -79,29 +86,102 @@ class System extends React.Component{
)
}
renderStatus(server){
if (this.props[server].connecting){
return <FontAwesome name="plug" className="grey-text pulse" />
} else if (this.props[server].connected){
return <FontAwesome name="check" className="green-text" />
} else {
return <FontAwesome name="exclamation-triangle" className="red-text" />
}
}
renderSpotifyUser(){
var user = null
if (this.props.spotify.me && this.props.spotify.authorization){
user = this.props.spotify.me
} else if (this.props.spotify.backend_username){
if (this.props.core.users && this.props.core.users['spotify:user:'+this.props.spotify.backend_username] !== undefined){
user = this.props.core.users['spotify:user:'+this.props.spotify.backend_username]
}
}
if (user){
return (
<Link className="user" to={global.baseURL+'user/'+user.uri}>
<Thumbnail circle={true} size="small" images={user.images} />
<span className="user-name">
{user.display_name ? user.display_name : user.id}
</span>
</Link>
)
} else if (this.props.spotify.backend_username){
return (
<Link className="user" to={global.baseURL+'user/spotify:user:'+this.props.spotify.backend_username}>
<Thumbnail circle={true} size="small" />
<span className="user-name">
{this.props.spotify.backend_username}
</span>
</Link>
)
} else {
return (
<Link className="user">
<Thumbnail circle={true} size="small" />
<span className="user-name">
Unknown
</span>
</Link>
)
}
}
renderSendAuthorizationButton(){
if (!this.props.spotify.authorization) return null
return (
<button onClick={e => this.props.uiActions.openModal('send_authorization', {}) }>
Share authentication
</button>
)
}
render(){
return (
<div>
<h4 className="underline">Server</h4>
<form onSubmit={(e) => this.setMopidyConfig(e)}>
<div className="field">
<div className="name">Username</div>
<div className="input">
<input
type="text"
onChange={e => this.handleUsernameChange(e.target.value)}
onFocus={e => this.setState({input_in_focus: 'pusher_username'})}
onBlur={e => this.handleUsernameBlur(e)}
value={this.state.pusher_username } />
<h4 className="underline">Servers</h4>
<div className="field readonly">
<div className="name">Status</div>
<div className="input">
<div className="text">
{this.renderStatus('mopidy')}&nbsp; Mopidy &nbsp;&nbsp;
{this.renderStatus('pusher')}&nbsp; Pusher
</div>
</div>
</div>
<div className="field">
<div className="name">Username</div>
<div className="input">
<input
type="text"
onChange={e => this.handleUsernameChange(e.target.value)}
onFocus={e => this.setState({input_in_focus: 'pusher_username'})}
onBlur={e => this.handleUsernameBlur(e)}
value={this.state.pusher_username } />
</div>
</div>
<form onSubmit={(e) => this.setMopidyConfig(e)}>
<div className="field">
<div className="name">Host</div>
<div className="input">
<input
type="text"
onChange={ e => this.setState({ mopidy_host: e.target.value })}
onChange={ e => 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 } />
@ -112,7 +192,7 @@ class System extends React.Component{
<div className="input">
<input
type="text"
onChange={ e => this.setState({ mopidy_port: e.target.value })}
onChange={ e => 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 } />
@ -121,47 +201,59 @@ class System extends React.Component{
{this.renderApplyButton()}
</form>
<h4 className="underline">Advanced</h4>
<h4 className="underline">Localization</h4>
<div className="field checkbox">
<div className="name">Customise behavior</div>
<div className="field">
<div className="name">Country</div>
<div className="input">
<label>
<input
type="checkbox"
name="log_actions"
checked={ this.props.ui.clear_tracklist_on_play }
onChange={ e => this.props.uiActions.set({ clear_tracklist_on_play: !this.props.ui.clear_tracklist_on_play })} />
<span className="label">Clear tracklist on play of URI(s)</span>
</label>
<input
type="text"
onChange={e => this.setState({country: e.target.value})}
onFocus={e => this.setState({input_in_focus: 'country'})}
onBlur={e => this.handleBlur('country',e.target.value)}
value={ this.state.country } />
</div>
</div>
<div className="field">
<div className="name">Locale</div>
<div className="input">
<input
type="text"
onChange={e => this.setState({locale: e.target.value})}
onFocus={e => this.setState({input_in_focus: 'locale'})}
onBlur={e => this.handleBlur('locale',e.target.value)}
value={this.state.locale} />
</div>
</div>
<div className="field pusher-connections">
<div className="name">Connections</div>
<h4 className="underline">Spotify</h4>
<div className="field readonly">
<div className="name">Status</div>
<div className="input">
<span className="text">
<PusherConnectionList />
</span>
</div>
</div>
<div className="text">
{!this.props.mopidy.uri_schemes || !this.props.mopidy.uri_schemes.includes('spotify:') ? <div className="red-text"><FontAwesome name="exclamation-triangle" />&nbsp; Mopidy-Spotify not available</div> : null}
{this.props.spotify.authorization ? <span><span className="green-text"><FontAwesome name="check" /> Authorized</span>&nbsp; All Spotify functionality available</span> : <span><span className="orange-text"><FontAwesome name="lock" /> Limited access</span>&nbsp; Authorize Iris for full functionality</span>}
</div>
</div>
</div>
<div className="field">
<div className="name">Backends</div>
<div className="name">Authorization</div>
<div className="input">
<span className="text">
<URISchemesList />
</span>
</div>
</div>
<div className="field">
<div className="name">System</div>
<SpotifyAuthenticationFrame />
{ this.renderSendAuthorizationButton() }
</div>
</div>
<div className="field current-user">
<div className="name">Current user</div>
<div className="input">
<ConfirmationButton className="destructive" content="Reset all settings" confirmingContent="Are you sure?" onConfirm={() => this.resetAllSettings()} />
<VersionManager />
</div>
</div>
<div className="text">
{ this.renderSpotifyUser() }
</div>
</div>
</div>
</div>
);
}
@ -176,14 +268,17 @@ class System extends React.Component{
const mapStateToProps = (state, ownProps) => {
return {
core: state.core,
ui: state.ui,
mopidy: state.mopidy,
pusher: state.pusher
pusher: state.pusher,
spotify: state.spotify
}
}
const mapDispatchToProps = (dispatch) => {
return {
coreActions: bindActionCreators(coreActions, dispatch),
uiActions: bindActionCreators(uiActions, dispatch),
pusherActions: bindActionCreators(pusherActions, dispatch),
mopidyActions: bindActionCreators(mopidyActions, dispatch),

9
src/js/components/Sidebar.js
View File

@ -68,14 +68,14 @@ class Sidebar extends React.Component{
<Icon name="playlist" />
Playlists
</Link>
<Link className={this.linkClassName('library/artists')} disabled={this.props.spotify_access != 'full'} to={this.props.spotify_authorized ? global.baseURL+"library/artists" : null}>
{this.props.spotify_enabled && this.props.spotify_authorized ? <Link className={this.linkClassName('library/artists')} to={global.baseURL+"library/artists"}>
<Icon name="mic" />
Artists
</Link>
<Link className={this.linkClassName('library/albums')} disabled={this.props.spotify_access != 'full'} to={this.props.spotify_authorized ? global.baseURL+"library/albums" : null}>
</Link> : null}
{this.props.spotify_enabled && this.props.spotify_authorized ? <Link className={this.linkClassName('library/albums')} to={global.baseURL+"library/albums"}>
<Icon name="cd" />
Albums
</Link>
</Link> : null}
<Link className={this.linkClassName('library/browse')} to={global.baseURL+"library/browse"}>
<Icon name="folder" />
Browse
@ -112,7 +112,6 @@ const mapStateToProps = (state, ownProps) => {
mopidy_connected: state.mopidy.connected,
pusher_connected: state.pusher.connected,
spotify_enabled: state.spotify.enabled,
spotify_access: state.spotify.access,
spotify_connected: state.spotify.connected,
spotify_authorized: state.spotify.authorization,
dragger: state.ui.dragger

4
src/js/index.js
View File

@ -20,6 +20,7 @@ import User from './views/User'
import Queue from './views/Queue'
import QueueHistory from './views/QueueHistory'
import Settings from './views/Settings'
import Debug from './views/Debug'
import Search from './views/Search'
import DiscoverRecommendations from './views/discover/DiscoverRecommendations'
@ -55,7 +56,8 @@ ReactDOM.render(
<IndexRoute component={Queue} />
<Route path="queue" component={Queue} />
<Route path="queue/history" component={QueueHistory} />
<Route path="settings(/:sub_view)(/:section)" component={Settings} />
<Route path="settings" component={Settings} />
<Route path="settings/debug" component={Debug} />
<Route path="search(/iris::search::type::query)" component={Search} />
<Route path="album/:uri" component={Album} />

7
src/js/services/core/actions.js
View File

@ -44,6 +44,13 @@ export function startServices(){
}
}
export function set( data ){
return {
type: 'CORE_SET',
data: data
}
}

3
src/js/services/core/reducer.js
View File

@ -4,6 +4,9 @@ import * as helpers from '../../helpers'
export default function reducer(core = {}, action){
switch (action.type) {
case 'CORE_SET':
return Object.assign({}, core, action.data)
/**
* Current track and tracklist
**/

7
src/js/services/localstorage/middleware.js
View File

@ -136,6 +136,13 @@ const localstorageMiddleware = (function(){
localStorage.setItem('spotify', JSON.stringify(spotify));
break;
case 'CORE_SET':
var core = JSON.parse( localStorage.getItem('core') );
if( !core ) core = {};
Object.assign( core, action.data );
localStorage.setItem('core', JSON.stringify(core));
break
case 'UI_SET':
var ui = JSON.parse( localStorage.getItem('ui') );
if( !ui ) ui = {};

10
src/js/services/pusher/middleware.js
View File

@ -2,6 +2,7 @@
import ReactGA from 'react-ga'
var helpers = require('../../helpers.js')
var coreActions = require('../core/actions.js')
var uiActions = require('../ui/actions.js')
var pusherActions = require('./actions.js')
var spotifyActions = require('../spotify/actions.js')
@ -112,9 +113,12 @@ const PusherMiddleware = (function(){
if (response.config.spotify_username && store.getState().spotify.enabled){
store.dispatch(spotifyActions.getUser('spotify:user:'+response.config.spotify_username))
}
var spotify = store.getState().spotify
if (!spotify.country || !spotify.locale){
store.dispatch({ type: 'SPOTIFY_SET_CONFIG', config: response.config })
var core = store.getState().core
if (!core.country || !core.locale){
store.dispatch(coreActions.set({
country: response.config.country,
locale: response.config.locale
}))
}
}
)

26
src/js/services/spotify/actions.js
View File

@ -112,7 +112,7 @@ function getToken( dispatch, getState ){
function refreshToken( dispatch, getState ){
return new Promise( (resolve, reject) => {
if (getState().spotify.authorization && getState().spotify.authentication_provider == 'http_api'){
if (getState().spotify.authorization){
$.ajax({
method: 'GET',
@ -309,7 +309,7 @@ export function getFeaturedPlaylists(){
var timestamp = year+'-'+month+'-'+day+'T'+hour+':'+min+':'+sec;
sendRequest( dispatch, getState, 'browse/featured-playlists?timestamp='+timestamp+'&country='+getState().spotify.country+'&limit=50&locale='+getState().spotify.locale )
sendRequest( dispatch, getState, 'browse/featured-playlists?timestamp='+timestamp+'&country='+getState().core.country+'&limit=50&locale='+getState().core.locale )
.then( response => {
var playlists = []
@ -346,7 +346,7 @@ export function getFeaturedPlaylists(){
export function getCategories(){
return (dispatch, getState) => {
sendRequest( dispatch, getState, 'browse/categories?limit=50&country='+getState().spotify.country+'&locale='+getState().spotify.locale )
sendRequest( dispatch, getState, 'browse/categories?limit=50&country='+getState().core.country+'&locale='+getState().core.locale )
.then( response => {
dispatch({
type: 'CATEGORIES_LOADED',
@ -368,7 +368,7 @@ export function getCategory( id ){
});
// get the category
sendRequest( dispatch, getState, 'browse/categories/'+id+'?country='+getState().spotify.country+'&locale='+getState().spotify.locale )
sendRequest( dispatch, getState, 'browse/categories/'+id+'?country='+getState().core.country+'&locale='+getState().core.locale )
.then( response => {
var category = Object.assign({}, response)
dispatch({
@ -379,7 +379,7 @@ export function getCategory( id ){
})
// and the category's playlists
sendRequest( dispatch, getState, 'browse/categories/'+id+'/playlists?limit=50&country='+getState().spotify.country+'&locale='+getState().spotify.locale )
sendRequest( dispatch, getState, 'browse/categories/'+id+'/playlists?limit=50&country='+getState().core.country+'&locale='+getState().core.locale )
.then( response => {
var playlists = []
@ -411,7 +411,7 @@ export function getCategory( id ){
export function getNewReleases(){
return (dispatch, getState) => {
sendRequest( dispatch, getState, 'browse/new-releases?country='+getState().spotify.country+'&limit=50' )
sendRequest( dispatch, getState, 'browse/new-releases?country='+getState().core.country+'&limit=50' )
.then( response => {
dispatch({
type: 'SPOTIFY_NEW_RELEASES_LOADED',
@ -439,7 +439,7 @@ export function getSearchResults(query, type = 'album,artist,playlist,track', li
var url = 'search?q='+query
url += '&type='+type
url += '&country='+getState().spotify.country
url += '&country='+getState().core.country
url += '&limit='+limit
url += '&offset='+offset
@ -500,7 +500,7 @@ export function getAutocompleteResults(field_id, query, types = ['album','artist
var endpoint = 'search?q='+query
endpoint += '&type='+types.join(',')
endpoint += '&country='+getState().spotify.country
endpoint += '&country='+getState().core.country
sendRequest(dispatch, getState, endpoint)
.then(response => {
@ -824,7 +824,7 @@ export function getArtist(uri, full = false){
// Do we want a full artist, with all supporting material?
if (full){
requests.push(
sendRequest( dispatch, getState, 'artists/'+ helpers.getFromUri('artistid', uri) +'/top-tracks?country='+getState().spotify.country )
sendRequest( dispatch, getState, 'artists/'+ helpers.getFromUri('artistid', uri) +'/top-tracks?country='+getState().core.country )
.then( response => {
Object.assign(artist, response);
})
@ -858,7 +858,7 @@ export function getArtist(uri, full = false){
// Now go get our artist albums
if (full){
sendRequest( dispatch, getState, 'artists/'+ helpers.getFromUri('artistid', uri) +'/albums?market='+getState().spotify.country )
sendRequest( dispatch, getState, 'artists/'+ helpers.getFromUri('artistid', uri) +'/albums?market='+getState().core.country )
.then( response => {
dispatch({
type: 'SPOTIFY_ARTIST_ALBUMS_LOADED',
@ -927,7 +927,7 @@ export function playArtistTopTracks(uri){
// We need to load the artist's top tracks first
} else {
sendRequest( dispatch, getState, 'artists/'+ helpers.getFromUri('artistid', uri) +'/top-tracks?country='+getState().spotify.country )
sendRequest( dispatch, getState, 'artists/'+ helpers.getFromUri('artistid', uri) +'/top-tracks?country='+getState().core.country )
.then( response => {
const uris = helpers.arrayOf('uri',response.tracks)
dispatch(mopidyActions.playURIs(uris, uri))
@ -1165,7 +1165,7 @@ export function getPlaylist(uri){
return (dispatch, getState) => {
// get the main playlist object
sendRequest( dispatch, getState, 'users/'+ helpers.getFromUri('userid',uri) +'/playlists/'+ helpers.getFromUri('playlistid',uri) +'?market='+getState().spotify.country )
sendRequest( dispatch, getState, 'users/'+ helpers.getFromUri('userid',uri) +'/playlists/'+ helpers.getFromUri('playlistid',uri) +'?market='+getState().core.country )
.then( response => {
// convert links in description
@ -1221,7 +1221,7 @@ function loadNextPlaylistTracksBatch(dispatch, getState, uri, tracks, lastRespon
export function getAllPlaylistTracks(uri){
return (dispatch, getState) => {
sendRequest(dispatch, getState, 'users/'+ helpers.getFromUri('userid',uri) +'/playlists/'+ helpers.getFromUri('playlistid',uri) +'/tracks?market='+getState().spotify.country)
sendRequest(dispatch, getState, 'users/'+ helpers.getFromUri('userid',uri) +'/playlists/'+ helpers.getFromUri('playlistid',uri) +'/tracks?market='+getState().core.country)
.then( response => {
loadNextPlaylistTracksBatch(dispatch, getState, uri, response.items, response)
});

23
src/js/services/spotify/reducer.js
View File

@ -15,19 +15,10 @@ export default function reducer(spotify = {}, action){
return Object.assign({}, spotify, { connected: false, connecting: false })
case 'SPOTIFY_SET_CONFIG':
var spotify = Object.assign({},spotify,action.config)
let access = 'none'
if (spotify.authentication_provider == 'http_api' && spotify.authorization){
access = 'full'
} else if (spotify.authentication_provider == 'backend' && spotify.backend_username){
access = 'limited'
}
spotify.access = access
return spotify
return Object.assign({},spotify,action.config)
case 'PUSHER_SPOTIFY_TOKEN':
if( spotify.authorization ) return spotify;
if (spotify.authorization) return spotify;
return Object.assign({}, spotify, {
authorizing: false,
authorization: false,
@ -37,7 +28,7 @@ export default function reducer(spotify = {}, action){
case 'SPOTIFY_AUTHORIZATION_GRANTED':
return Object.assign({}, spotify, {
access: (spotify.authentication_provider == 'http_api' ? 'full' : 'limited'),
enabled: true,
authorizing: false,
authorization: action.data,
access_token: action.data.access_token,
@ -47,7 +38,6 @@ export default function reducer(spotify = {}, action){
case 'SPOTIFY_AUTHORIZATION_REVOKED':
return Object.assign({}, spotify, {
access: (spotify.authentication_provider == 'http_api' ? 'none' : 'limited'),
authorizing: false,
authorization: false,
access_token: false,
@ -57,9 +47,7 @@ export default function reducer(spotify = {}, action){
})
case 'SPOTIFY_IMPORT_AUTHORIZATION':
return Object.assign({}, spotify, {
authentication_provider: 'http_api',
access: 'full',
return Object.assign({}, spotify, {
authorizing: false,
authorization: action.authorization,
access_token: action.authorization.access_token,
@ -76,8 +64,7 @@ export default function reducer(spotify = {}, action){
connected: true,
refreshing_token: false,
access_token: action.data.access_token,
token_expiry: action.data.token_expiry,
access_token_provider: action.access_token_provider
token_expiry: action.data.token_expiry
})
case 'SPOTIFY_DISCONNECTED':

228
src/js/views/Debug.js Executable file
View File

@ -0,0 +1,228 @@
import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { Link, hashHistory } from 'react-router'
import { bindActionCreators } from 'redux'
import FontAwesome from 'react-fontawesome'
import SpotifyAuthenticationFrame from '../components/SpotifyAuthenticationFrame'
import ConfirmationButton from '../components/ConfirmationButton'
import PusherConnectionList from '../components/PusherConnectionList'
import URISchemesList from '../components/URISchemesList'
import VersionManager from '../components/VersionManager'
import Header from '../components/Header'
import Thumbnail from '../components/Thumbnail'
import * as uiActions from '../services/ui/actions'
import * as pusherActions from '../services/pusher/actions'
import * as mopidyActions from '../services/mopidy/actions'
import * as spotifyActions from '../services/spotify/actions'
class Debug extends React.Component{
constructor(props) {
super(props);
this.state = {
mopidy_call: 'playlists.asList',
mopidy_data: '{}',
pusher_data: '{"method":"get_config"}',
access_token: this.props.access_token
}
}
callMopidy(e){
e.preventDefault()
this.props.mopidyActions.debug( this.state.mopidy_call, JSON.parse(this.state.mopidy_data) )
}
callPusher(e){
e.preventDefault()
this.props.pusherActions.debug( JSON.parse(this.state.pusher_data) )
}
render(){
var options = (
<span>
<button className="no-hover" onClick={e => hashHistory.push(global.baseURL+'settings')}>
<FontAwesome name="reply" />&nbsp;
Back
</button>
</span>
)
return (
<div className="view debugger-view">
<Header icon="cog" title="Debugger" options={options} uiActions={this.props.uiActions} />
<div className="content-wrapper">
<h4 className="underline">User interface</h4>
<form>
<div className="field checkbox">
<div className="name">Debug</div>
<div className="input">
<label>
<input
type="checkbox"
name="debug_info"
checked={ this.props.debug_info }
onChange={ e => this.props.uiActions.set({ debug_info: !this.props.debug_info })} />
<span className="label">Show debug info panel</span>
</label>
</div>
</div>
<div className="field checkbox">
<div className="name">Logging</div>
<div className="input">
<label>
<input
type="checkbox"
name="log_actions"
checked={ this.props.log_actions }
onChange={ e => this.props.uiActions.set({ log_actions: !this.props.log_actions })} />
<span className="label">Log actions</span>
</label>
<label>
<input
type="checkbox"
name="log_mopidy"
checked={ this.props.log_mopidy }
onChange={ e => this.props.uiActions.set({ log_mopidy: !this.props.log_mopidy })} />
<span className="label">Log Mopidy</span>
</label>
<label>
<input
type="checkbox"
name="log_pusher"
checked={ this.props.log_pusher }
onChange={ e => this.props.uiActions.set({ log_pusher: !this.props.log_pusher })} />
<span className="label">Log Pusher</span>
</label>
</div>
</div>
<div className="field">
<div className="name"></div>
<div className="input">
<a className="button secondary" onClick={e => this.props.uiActions.createNotification('Test notification')}>Create notification</a>
<a className="button secondary" onClick={e => this.props.uiActions.startProcess('test_process', 'Test process')}>Start process</a>
<a className="button secondary" onClick={e => this.props.uiActions.stopProcess('test_process')}>Stop process</a>
</div>
</div>
</form>
<h4 className="underline">Spotify</h4>
<div className="field">
<div className="name">Access token</div>
<div className="input">
<input
type="text"
onBlur={e => this.props.spotifyActions.authorizationGranted({access_token: e.target.value})}
value={this.state.access_token} />
</div>
</div>
<h4 className="underline">Mopidy</h4>
<form onSubmit={(e) => this.callMopidy(e)}>
<div className="field">
<div className="name">Call</div>
<div className="input">
<input
type="text"
onChange={ e => this.setState({ mopidy_call: e.target.value })}
value={ this.state.mopidy_call } />
</div>
</div>
<div className="field">
<div className="name">Data</div>
<div className="input">
<textarea
onChange={ e => this.setState({ mopidy_data: e.target.value })}
value={ this.state.mopidy_data }>
</textarea>
</div>
</div>
<div className="field">
<div className="name"></div>
<div className="input">
<button type="submit" className="secondary">Send</button>
</div>
</div>
</form>
<h4 className="underline">Pusher</h4>
<form onSubmit={(e) => this.callPusher(e)}>
<div className="field">
<div className="name">Examples</div>
<div className="input">
<select onChange={ e => this.setState({ pusher_data: e.target.value })}>
<option value='{"method":"get_config"}'>Get config</option>
<option value='{"method":"get_version"}'>Get version</option>
<option value='{"method":"get_connections"}'>Get connections</option>
<option value='{"method":"get_radio"}'>Get radio</option>
<option value='{"method":"get_queue_metadata"}'>Get queue metadata</option>
<option value='{"method":"broadcast","data":{"type":"browser_notification","title":"Testing","body":"This is my message"}}'>Broadcast to all clients</option>
<option value='{"method":"deliver_message","data":{"to":"CONNECTION_ID_HERE","message":{"type":"browser_notification","title":"Testing","body":"This is my message"}}}'>Broadcast to one client</option>
<option value='{"method":"set_username","data":{"connection_id":"CONNECTION_ID_HERE","username":"NewUsername"}}'>Change username</option>
<option value='{"method":"refresh_spotify_token"}'>Refresh Spotify token</option>
<option value='{"method":"perform_upgrade"}'>Perform upgrade (beta)</option>
</select>
</div>
</div>
<div className="field">
<div className="name">Data</div>
<div className="input">
<textarea
onChange={ e => this.setState({ pusher_data: e.target.value })}
value={ this.state.pusher_data }>
</textarea>
</div>
</div>
<div className="field">
<div className="name"></div>
<div className="input">
<button type="submit" className="secondary">Send</button>
</div>
</div>
</form>
<h4 className="underline">Response</h4>
<pre>
{ this.props.debug_response ? JSON.stringify(this.props.debug_response, null, 2) : null }
</pre>
</div>
</div>
);
}
}
/**
* Export our component
*
* We also integrate our global store, using connect()
**/
const mapStateToProps = (state, ownProps) => {
return {
connection_id: state.pusher.connection_id,
access_token: (state.spotify.access_token ? state.spotify.access_token : ''),
log_actions: (state.ui.log_actions ? state.ui.log_actions : false),
log_pusher: (state.ui.log_pusher ? state.ui.log_pusher : false),
log_mopidy: (state.ui.log_mopidy ? state.ui.log_mopidy : false),
debug_info: (state.ui.debug_info ? state.ui.debug_info : false),
debug_response: state.ui.debug_response
}
}
const mapDispatchToProps = (dispatch) => {
return {
uiActions: bindActionCreators(uiActions, dispatch),
pusherActions: bindActionCreators(pusherActions, dispatch),
mopidyActions: bindActionCreators(mopidyActions, dispatch),
spotifyActions: bindActionCreators(spotifyActions, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Debug)

421
src/js/views/Settings.js
View File

@ -1,97 +1,394 @@
import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { hashHistory, Link } from 'react-router'
import { bindActionCreators } from 'redux'
import FontAwesome from 'react-fontawesome'
import { Link } from 'react-router'
import SpotifyAuthenticationFrame from '../components/SpotifyAuthenticationFrame'
import ConfirmationButton from '../components/ConfirmationButton'
import PusherConnectionList from '../components/PusherConnectionList'
import URISchemesList from '../components/URISchemesList'
import VersionManager from '../components/VersionManager'
import Header from '../components/Header'
import Parallax from '../components/Parallax'
import System from '../components/Settings/System'
import Services from '../components/Settings/Services'
import Debug from '../components/Settings/Debug'
import Icon from '../components/Icon'
import Thumbnail from '../components/Thumbnail'
export default class Settings extends React.Component {
import * as coreActions from '../services/core/actions'
import * as uiActions from '../services/ui/actions'
import * as pusherActions from '../services/pusher/actions'
import * as mopidyActions from '../services/mopidy/actions'
import * as spotifyActions from '../services/spotify/actions'
class Settings extends React.Component {
constructor(props) {
super(props);
this.state = {
country: this.props.core.country,
locale: this.props.core.locale,
mopidy_host: this.props.mopidy.host,
mopidy_port: this.props.mopidy.port,
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.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(){
localStorage.clear();
window.location = '#'
window.location.reload(true)
return false;
}
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);
return false;
}
handleBlur(name, value){
this.setState({input_in_focus: null})
var data = {}
data[name] = value
this.props.coreActions.set(data)
}
handleUsernameChange(username){
this.setState({pusher_username: username.replace(/\W/g, '')})
}
handleUsernameBlur(e){
this.setState({input_in_focus: null})
this.props.pusherActions.setUsername(this.state.pusher_username)
}
renderApplyButton(){
if (this.props.mopidy.host == this.state.mopidy_host && this.props.mopidy.port == this.state.mopidy_port) return null
renderSubViewMenu(){
return (
<div className="sub-views">
<Link className="option" activeClassName="active" to={global.baseURL+'settings/'}><h4>System</h4></Link>
<Link className="option" activeClassName="active" to={global.baseURL+'settings/services'}><h4>Services</h4></Link>
<Link className="option" activeClassName="active" to={global.baseURL+'settings/debug'}><h4>Debug</h4></Link>
<Link className="option" activeClassName="active" to={global.baseURL+'settings/about'}><h4>About</h4></Link>
<div className="field">
<div className="name"></div>
<div className="input">
<button type="submit" className="secondary">Apply and reload</button>
</div>
</div>
)
}
renderSubView(){
switch (this.props.params.sub_view){
renderSpotifyUser(){
case 'services':
return (
<div className="body related-artists">
<Services />
</div>
)
var user = null
if (this.props.spotify.me && this.props.spotify.authorization){
user = this.props.spotify.me
} else if (this.props.spotify.backend_username){
if (this.props.core.users && this.props.core.users['spotify:user:'+this.props.spotify.backend_username] !== undefined){
user = this.props.core.users['spotify:user:'+this.props.spotify.backend_username]
}
}
case 'debug':
return (
<div className="body debug">
<Debug />
</div>
)
if (user){
return (
<Link className="user" to={global.baseURL+'user/'+user.uri}>
<Thumbnail circle={true} size="small" images={user.images} />
<span className="user-name">
{user.display_name ? user.display_name : user.id}
</span>
</Link>
)
} else if (this.props.spotify.backend_username){
return (
<Link className="user" to={global.baseURL+'user/spotify:user:'+this.props.spotify.backend_username}>
<Thumbnail circle={true} size="small" />
<span className="user-name">
{this.props.spotify.backend_username}
</span>
</Link>
)
} else {
return (
<Link className="user">
<Thumbnail circle={true} size="small" />
<span className="user-name">
Unknown
</span>
</Link>
)
}
}
case 'about':
return (
<div className="body about">
<div className="field">
<div>
<em><a href="https://github.com/jaedb/Iris" target="_blank">Iris</a></em> is an open-source project by <a href="https://github.com/jaedb" target="_blank">James Barnsley</a>. It is provided free and with absolutely no warranty. If you paid someone for this software, please let me know.
<br />
<br />
Google Analytics is used to help trace issues and provide valuable insight into how we can continue to make improvements.
<br />
</div>
<br /><br />
<div>
<a className="button" href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=james%40barnsley%2enz&lc=NZ&item_name=James%20Barnsley&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donate_LG%2egif%3aNonHosted" target="_blank">
<FontAwesome name="paypal" />&nbsp;Donate
</a>
&nbsp;&nbsp;
<a className="button" href="https://github.com/jaedb/Iris" target="_blank">
<FontAwesome name="github" />&nbsp;GitHub
</a>
&nbsp;&nbsp;
<a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/" target="_blank" style={{display: 'inline-block', verticalAlign: 'middle'}}><img alt="Creative Commons License" src="https://i.creativecommons.org/l/by-nc/4.0/88x31.png" /></a>
</div>
</div>
</div>
)
renderSendAuthorizationButton(){
if (!this.props.spotify.authorization) return null
default:
return (
<div className="body system">
<System />
</div>
)
return (
<button onClick={e => this.props.uiActions.openModal('send_authorization', {}) }>
Share authentication
</button>
)
}
renderStatus(server){
if (this.props[server].connecting){
return <span className="status grey-text pulse"><FontAwesome name="plug" />&nbsp; Connecting</span>
} else if (server == 'spotify' && !this.props[server].authorization){
return <span className="status orange-text"><FontAwesome name="lock" />&nbsp; Limited access</span>
} else if (this.props[server].connected){
return <span className="status green-text"><FontAwesome name="check" />&nbsp; Connected</span>
} else {
return <span className="status red-text"><FontAwesome name="exclamation-triangle" />&nbsp; Disconnected</span>
}
}
render(){
var options = (
<span>
<button className="no-hover" onClick={e => hashHistory.push(global.baseURL+'settings/debug')}>
<FontAwesome name="flask" />&nbsp;
Debug
</button>
<a className="no-hover button" href="https://github.com/jaedb/Iris/wiki" target="_blank">
<FontAwesome name="question" />&nbsp;
Help
</a>
</span>
)
return (
<div className="view settings-view">
<Header className="overlay" icon="cog" title="Settings" />
<Header className="overlay" icon="cog" title="Settings" options={options} />
<div className="intro">
<div className="liner">
<Parallax image="/iris/assets/backgrounds/settings.jpg" />
{this.renderSubViewMenu()}
</div>
</div>
<section className="content-wrapper">
{this.renderSubView()}
</section>
<div className="services">
<div className="service">
<h4 className="title">Mopidy</h4>
{this.renderStatus('mopidy')}
</div>
<div className="service">
<h4 className="title">Pusher</h4>
{this.renderStatus('pusher')}
</div>
<div className="service">
<h4 className="title">Spotify</h4>
{this.renderStatus('spotify')}
</div>
</div>
<h4 className="underline">System</h4>
<div className="field">
<div className="name">Username</div>
<div className="input">
<input
type="text"
onChange={e => this.handleUsernameChange(e.target.value)}
onFocus={e => this.setState({input_in_focus: 'pusher_username'})}
onBlur={e => this.handleUsernameBlur(e)}
value={this.state.pusher_username } />
</div>
</div>
<form onSubmit={(e) => this.setMopidyConfig(e)}>
<div className="field">
<div className="name">Host</div>
<div className="input">
<input
type="text"
onChange={ e => 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 } />
</div>
</div>
<div className="field">
<div className="name">Port</div>
<div className="input">
<input
type="text"
onChange={ e => 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 } />
</div>
</div>
{this.renderApplyButton()}
</form>
<h4 className="underline">Localization</h4>
<div className="field">
<div className="name">Country</div>
<div className="input">
<input
type="text"
onChange={e => this.setState({country: e.target.value})}
onFocus={e => this.setState({input_in_focus: 'country'})}
onBlur={e => this.handleBlur('country',e.target.value)}
value={ this.state.country } />
</div>
</div>
<div className="field">
<div className="name">Locale</div>
<div className="input">
<input
type="text"
onChange={e => this.setState({locale: e.target.value})}
onFocus={e => this.setState({input_in_focus: 'locale'})}
onBlur={e => this.handleBlur('locale',e.target.value)}
value={this.state.locale} />
</div>
</div>
<h4 className="underline">Spotify</h4>
<div className="field readonly">
<div className="name">Status</div>
<div className="input">
<div className="text">
{!this.props.mopidy.uri_schemes || !this.props.mopidy.uri_schemes.includes('spotify:') ? <div className="red-text"><FontAwesome name="exclamation-triangle" />&nbsp; Mopidy-Spotify not available</div> : null}
{this.props.spotify.authorization ? <span><span className="green-text"><FontAwesome name="check" /> Authorized</span>&nbsp; All Spotify functionality available</span> : <span><span className="orange-text"><FontAwesome name="lock" /> Limited access</span>&nbsp; Authorize Iris for full functionality</span>}
</div>
</div>
</div>
<div className="field">
<div className="name">Authorization</div>
<div className="input">
<SpotifyAuthenticationFrame />
{ this.renderSendAuthorizationButton() }
</div>
</div>
<div className="field current-user">
<div className="name">Current user</div>
<div className="input">
<div className="text">
{ this.renderSpotifyUser() }
</div>
</div>
</div>
<h4 className="underline">Advanced</h4>
<div className="field checkbox">
<div className="name">UI behavior</div>
<div className="input">
<label>
<input
type="checkbox"
name="log_actions"
checked={ this.props.ui.clear_tracklist_on_play }
onChange={ e => this.props.uiActions.set({ clear_tracklist_on_play: !this.props.ui.clear_tracklist_on_play })} />
<span className="label">Clear tracklist on play of URI(s)</span>
</label>
</div>
</div>
<div className="field">
<div className="name">Version</div>
<div className="input">
<VersionManager />
</div>
</div>
<div className="field pusher-connections">
<div className="name">Connections</div>
<div className="input">
<span className="text">
<PusherConnectionList />
</span>
</div>
</div>
<div className="field">
<div className="name">Extensions</div>
<div className="input">
<URISchemesList />
</div>
</div>
<div className="field">
<div className="name">Reset</div>
<div className="input">
<ConfirmationButton className="destructive" content="Reset all settings" confirmingContent="Are you sure?" onConfirm={() => this.resetAllSettings()} />
</div>
</div>
<h4 className="underline">About</h4>
<div className="field">
<div>
<em><a href="https://github.com/jaedb/Iris" target="_blank">Iris</a></em> is an open-source project by <a href="https://github.com/jaedb" target="_blank">James Barnsley</a>. It is provided free and with absolutely no warranty. If you paid someone for this software, please let me know.
<br />
<br />
Google Analytics is used to help trace issues and provide valuable insight into how we can continue to make improvements.
<br />
</div>
<br /><br />
<div>
<a className="button" href="https://www.paypal.com/cgi-bin/webscr?cmd=_donations&business=james%40barnsley%2enz&lc=NZ&item_name=James%20Barnsley&currency_code=USD&bn=PP%2dDonationsBF%3abtn_donate_LG%2egif%3aNonHosted" target="_blank">
<FontAwesome name="paypal" />&nbsp;Donate
</a>
&nbsp;&nbsp;
<a className="button" href="https://github.com/jaedb/Iris" target="_blank">
<FontAwesome name="github" />&nbsp;GitHub
</a>
&nbsp;&nbsp;
<a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/" target="_blank" style={{display: 'inline-block', verticalAlign: 'middle'}}><img alt="Creative Commons License" src="https://i.creativecommons.org/l/by-nc/4.0/88x31.png" /></a>
</div>
</div>
</section>
</div>
);
}
}
}
const mapStateToProps = (state, ownProps) => {
return state;
}
const mapDispatchToProps = (dispatch) => {
return {
coreActions: bindActionCreators(coreActions, dispatch),
uiActions: bindActionCreators(uiActions, dispatch),
pusherActions: bindActionCreators(pusherActions, dispatch),
mopidyActions: bindActionCreators(mopidyActions, dispatch),
spotifyActions: bindActionCreators(spotifyActions, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Settings)

24
src/scss/components/_grid.scss
View File

@ -186,17 +186,19 @@
&.artist-stats {
.tile {
.fa {
display: block;
position: absolute;
top: 50%;
left: 10%;
right: 10%;
text-align: center;
margin-top: -27px;
font-size: 60px;
z-index: -1;
opacity: 0.1;
.content {
.fa {
display: block;
position: absolute;
top: 50%;
left: 10%;
right: 10%;
text-align: center;
margin-top: -27px;
font-size: 60px;
z-index: -1;
opacity: 0.1;
}
}
}

4
src/scss/components/_images.scss
View File

@ -24,10 +24,10 @@
bottom: 5px;
right: 5px;
z-index: 1;
padding: 6px;
padding: 10px;
border-radius: 100%;
background: rgba(0,0,0,0.4);
font-size: 10px;
font-size: 12px;
cursor: pointer;
color: #FFFFFF;

7
src/scss/components/_sub-views.scss
View File

@ -1,5 +1,4 @@
.sub-views {
.option {
@include feature_font();
@ -23,4 +22,10 @@
border-color: rgba(255,255,255,0.2);
}
}
@include responsive( $bp_medium ){
.option {
margin-right: 15px;
}
}
}

1
src/scss/global/_core.scss
View File

@ -262,6 +262,7 @@ button.placeholder {
@include clearfix;
}
.pulse { @include pulse(); }
.one-liner { @include one_line_text; }
.grey-text { color: $mid_grey !important; }
.red-text { color: $red !important; }

80
src/scss/views/_settings.scss
View File

@ -26,58 +26,30 @@
}
}
.content-wrapper {
padding-top: 0;
}
.services {
@include clearfix();
.service {
background: lighten($dark_grey,2%);
padding: 12px 15px;
width: 24%;
margin-right: 1.3334%;
float: left;
border-radius: 3px;
padding: 16px;
box-sizing: border-box;
&:nth-child(4n){
margin-right: 0;
}
&.disabled {
color: $grey;
}
&.connecting {
.status {
color: $grey;
}
}
&.connected,
&.available {
.status {
color: $green;
}
}
&.disconnected,
&.unavailable {
.status {
color: $red;
}
}
background: lighten($dark_grey, 5%);
position: relative;
float: left;
.title {
text-transform: capitalize;
margin: 2px 0 5px 0;
}
.status {
text-transform: capitalize;
font-size: 14px;
margin: 0;
padding: 0 0 4px 0;
}
}
}
.field.current-user {
.text {
padding: 14px 14px 14px 0px;
@ -113,30 +85,22 @@
.field.pusher-connections {
.connection.me {
font-weight: bold;
color: $turquoise;
}
}
@include responsive( $bp_medium ){
.services {
.service {
padding: 0 0 0 30px;
margin-bottom: 0;
min-width: 0px;
.intro {
.liner {
padding: 10vh 20px 0;
}
}
h4 {
padding-top: 1px;
}
.icon {
height: 15px;
width: 20px;
padding-top: 5px;
font-size: 10px;
}
.text {
display: none;
.field.pusher-connections {
.connection {
.col {
float: none;
width: 100%;
}
}
}