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

Revamp of settings to contain more granular control of services

Browse Source
This commit is contained in:
James Barnsley
2017-08-04 09:19:19 +12:00
parent 123fe51289
commit c34c187007
17 changed files with 741 additions and 621 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/js/bootstrap.js vendored
View File

@ -55,6 +55,7 @@ var initialState = {
}
},
lastfm: {
connected: false,
album: {},
artist: {},
track: {}
@ -62,6 +63,7 @@ var initialState = {
spotify: {
enabled: true,
connected: false,
authentication_provider: 'backend',
me: false,
autocomplete_results: {},
authorization_url: 'https://jamesbarnsley.co.nz/auth_v2.php'

196
src/js/components/Settings/Debug.js Executable file
View File

@ -0,0 +1,196 @@
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 * 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 ? 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(){
return (
<div>
<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">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>
);
}
}
/**
* 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)

213
src/js/components/Settings/Services.js Executable file
View File

@ -0,0 +1,213 @@
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.authorized){
user = this.props.spotify.me
} else if (this.props.spotify.backend_username && this.props.spotify.backend_username){
if (this.props.core.users && typeof(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}
{!this.props.spotify.authorized ? <span className="grey-text">&nbsp;(limited access)</span> : null}
</span>
</Link>
)
} else {
return (
<Link className="user">
<Thumbnail circle={true} size="small" />
<span className="user-name">
Default user
<span className="grey-text">&nbsp;(limited access)</span>
</span>
</Link>
)
}
}
renderSendAuthorizationButton(){
if( !this.props.spotify.authorized ) return null
return (
<button onClick={e => this.props.uiActions.openModal('send_authorization', {}) }>
Share authentication
</button>
)
}
render(){
return (
<div>
<h4 className="underline">Spotify</h4>
<form>
<div className="field radio">
<span className="name">Authentication provider</span>
<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 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>
</form>
<div className="field current-user">
<div className="name">Current user</div>
<div className="input">
<div className="text">
{ this.renderSpotifyUser() }
</div>
</div>
</div>
<div className="field">
<div className="name">Authentication</div>
<div className="input">
<SpotifyAuthenticationFrame />
{ this.renderSendAuthorizationButton() }
</div>
</div>
</div>
);
}
}
/**
* Export our component
*
* We also integrate our global store, using connect()
**/
const mapStateToProps = (state, ownProps) => {
return {
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)

194
src/js/components/Settings/System.js Executable file
View File

@ -0,0 +1,194 @@
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 * 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 System extends React.Component{
constructor(props) {
super(props);
this.state = {
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.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;
}
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
return (
<div className="field">
<div className="name"></div>
<div className="input">
<button type="submit" className="secondary">Apply and reload</button>
</div>
</div>
)
}
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 } />
</div>
</div>
<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">Advanced</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 pusher-connections">
<div className="name">Connections</div>
<div className="input">
<span className="text">
<PusherConnectionList />
</span>
</div>
</div>
<div className="field">
<div className="name">Backends</div>
<div className="input">
<span className="text">
<URISchemesList />
</span>
</div>
</div>
<div className="field">
<div className="name">System</div>
<div className="input">
<ConfirmationButton className="destructive" content="Reset all settings" confirmingContent="Are you sure?" onConfirm={() => this.resetAllSettings()} />
<VersionManager />
</div>
</div>
</div>
);
}
}
/**
* Export our component
*
* We also integrate our global store, using connect()
**/
const mapStateToProps = (state, ownProps) => {
return {
ui: state.ui,
mopidy: state.mopidy,
pusher: state.pusher
}
}
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)(System)

4
src/js/index.js
View File

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

2
src/js/services/core/middleware.js
View File

@ -6,6 +6,7 @@ var uiActions = require('../ui/actions.js')
var pusherActions = require('../pusher/actions.js')
var mopidyActions = require('../mopidy/actions.js')
var spotifyActions = require('../spotify/actions.js')
var lastfmActions = require('../lastfm/actions.js')
var helpers = require('../../helpers.js')
const CoreMiddleware = (function(){
@ -20,6 +21,7 @@ const CoreMiddleware = (function(){
case 'CORE_START_SERVICES':
store.dispatch(mopidyActions.connect())
store.dispatch(pusherActions.connect())
store.dispatch(lastfmActions.connect())
if (store.getState().spotify.enabled){
store.dispatch(spotifyActions.connect())

14
src/js/services/lastfm/actions.js
View File

@ -35,6 +35,20 @@ const sendRequest = ( dispatch, getState, params ) => {
})
}
export function connect(){
return (dispatch, getState) => {
dispatch({ type: 'LASTFM_CONNECTING' })
sendRequest(dispatch, getState, 'method=artist.getInfo&artist=')
.then(
response => {
dispatch({ type: 'LASTFM_CONNECTED' })
}
)
}
}
export function getArtist( uri, artist, mbid = false ){
return (dispatch, getState) => {
if( mbid ){

7
src/js/services/lastfm/reducer.js
View File

@ -2,6 +2,13 @@
export default function reducer(lastfm = {}, action){
switch (action.type) {
case 'LASTFM_CONNECT':
case 'LASTFM_CONNECTING':
return Object.assign({}, lastfm, { connected: false, connecting: true });
case 'LASTFM_CONNECTED':
return Object.assign({}, lastfm, { connected: true, connecting: false });
default:
return lastfm
}

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

@ -73,6 +73,7 @@ const localstorageMiddleware = (function(){
if( !spotify ) spotify = {};
Object.assign(
spotify,{
authentication_provider: action.config.authentication_provider,
country: action.config.country,
locale: action.config.locale
}

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

@ -328,6 +328,16 @@ const PusherMiddleware = (function(){
next( action )
break
case 'PUSHER_CONFIG':
store.dispatch(spotifyActions.setConfig({
locale: (action.config.locale ? action.config.locale : null),
country: (action.config.country ? action.config.country : null),
authorization_url: (action.config.authorization_url ? action.config.authorization_url : null),
backend_username: (action.config.backend_username ? action.config.backend_username : null)
}))
next( action )
break
case 'PUSHER_DEBUG':
request(store, action.message.method, action.message.data )
.then(

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

@ -1,228 +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 '../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)

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

@ -1,389 +1,92 @@
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 Icon from '../components/Icon'
import Thumbnail from '../components/Thumbnail'
import System from '../components/Settings/System'
import Services from '../components/Settings/Services'
import Debug from '../components/Settings/Debug'
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 = {
mopidy_host: this.props.mopidy.host,
mopidy_port: this.props.mopidy.port,
spotify_country: this.props.spotify.country,
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.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;
}
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;
}
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)
}
renderSpotifyUser(){
var user = null
if (this.props.spotify.me && this.props.spotify.authorized){
user = this.props.spotify.me
} else if (this.props.ui.config && this.props.ui.config.spotify_username){
if (this.props.ui.users && typeof(this.props.ui.users['spotify:user:'+this.props.ui.config.spotify_username]) !== 'undefined'){
user = this.props.ui.users['spotify:user:'+this.props.ui.config.spotify_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}
{!this.props.spotify.authorized ? <span className="grey-text">&nbsp;(limited access)</span> : null}
</span>
</Link>
)
} else {
return (
<Link className="user">
<Thumbnail circle={true} size="small" />
<span className="user-name">
Default user
<span className="grey-text">&nbsp;(limited access)</span>
</span>
</Link>
)
}
}
renderSendAuthorizationButton(){
if( !this.props.spotify.authorized ) return null
export default class Settings extends React.Component {
renderSubViewMenu(){
return (
<button onClick={e => this.props.uiActions.openModal('send_authorization', {}) }>
Share authentication
</button>
)
}
renderApplyButton(){
if (this.props.mopidy.host == this.state.mopidy_host && this.props.mopidy.port == this.state.mopidy_port) return null
return (
<div className="field">
<div className="name"></div>
<div className="input">
<button type="submit" className="secondary">Apply and reload</button>
</div>
<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>
)
}
serviceStatus(service){
renderSubView(){
switch (this.props.params.sub_view){
var icon = null
var status = 'Unknown'
case 'services':
return (
<div className="body related-artists">
<Services />
</div>
)
if (this.props[service].enabled !== undefined && !this.props[service].enabled){
icon = <span className="icon"><FontAwesome fixedWidth name="power-off" /></span>
status = 'disabled'
} else if (this.props[service].connecting){
icon = <span className="icon"><FontAwesome fixedWidth name="plug" /></span>
status = 'connecting'
} else if (this.props[service].connected){
icon = <span className="icon"><FontAwesome fixedWidth name="check" /></span>
status = 'connected'
} else {
icon = <span className="icon disconnected"><FontAwesome fixedWidth name="close" /></span>
status = 'disconnected'
case 'debug':
return (
<div className="body debug">
<Debug />
</div>
)
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>
)
default:
return (
<div className="body system">
<System />
</div>
)
}
return (
<div className={'service '+status}>
<span className="content">
<h4 className="title">{service}</h4>
<div className="status">{icon}&nbsp; {status}</div>
</span>
</div>
)
}
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 icon="cog" title="Settings" options={options} uiActions={this.props.uiActions} />
<Header icon="cog" title="Settings" />
<section className="content-wrapper">
<div className="services">
{this.serviceStatus('mopidy')}
{this.serviceStatus('pusher')}
{this.serviceStatus('spotify')}
</div>
<h4 className="underline">System</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 } />
</div>
</div>
<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">Spotify</h4>
<form>
<div className="field checkbox">
<div className="input">
<label>
<input
type="checkbox"
name="spotify_enabled"
checked={ this.props.spotify.enabled }
onChange={e => this.props.spotifyActions.setConfig({enabled: !this.props.spotify.enabled})}
/>
<span className="label">Enabled</span>
</label>
</div>
</div>
<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(e) }
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(e) }
value={this.state.spotify_locale} />
</div>
</div>
</form>
<div className="field current-user">
<div className="name">Current user</div>
<div className="input">
<div className="text">
{ this.renderSpotifyUser() }
</div>
</div>
</div>
<div className="field">
<div className="name">Authentication</div>
<div className="input">
<SpotifyAuthenticationFrame />
{ this.renderSendAuthorizationButton() }
</div>
</div>
<h4 className="underline">Advanced</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 pusher-connections">
<div className="name">Connections</div>
<div className="input">
<span className="text">
<PusherConnectionList />
</span>
</div>
</div>
<div className="field">
<div className="name">Backends</div>
<div className="input">
<span className="text">
<URISchemesList />
</span>
</div>
</div>
<div className="field">
<div className="name">System</div>
<div className="input">
<ConfirmationButton className="destructive" content="Reset all settings" confirmingContent="Are you sure?" onConfirm={() => this.resetAllSettings()} />
<VersionManager />
</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>
{this.renderSubViewMenu()}
{this.renderSubView()}
</section>
</div>
);
}
}
/**
* Export our component
*
* We also integrate our global store, using connect()
**/
const mapStateToProps = (state, ownProps) => {
return state;
}
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)(Settings)
}

1
src/scss/app.scss
View File

@ -23,6 +23,7 @@
@import 'components/notifications';
@import 'components/dropdown-field';
@import 'components/autocomplete-field';
@import 'components/sub-views';
@import 'components/debug';
@import 'views/artist';

26
src/scss/components/_sub-views.scss Executable file
View File

@ -0,0 +1,26 @@
.sub-views {
.option {
@include feature_font();
color: $white;
display: inline-block;
margin-right: 25px;
font-size: 15px;
font-weight: 500;
border-bottom: 3px solid transparent;
cursor: pointer;
h4 {
margin: 8px 0 4px;
}
&.active {
border-color: $white;
}
&:not(.active):hover {
border-color: rgba(255,255,255,0.2);
}
}
}

4
src/scss/global/_forms.scss
View File

@ -194,7 +194,7 @@ input[type="submit"] {
.name {
display: block;
padding-top: 10px;
width: 15%;
width: 20%;
float: left;
}
@ -208,7 +208,7 @@ input[type="submit"] {
}
.input {
width: 85%;
width: 80%;
float: left;
input,

25
src/scss/views/_artist.scss
View File

@ -37,31 +37,6 @@
color: $white;
}
}
.sub-views {
.option {
@include feature_font();
color: $white;
display: inline-block;
margin-right: 25px;
font-size: 15px;
font-weight: 500;
border-bottom: 3px solid transparent;
cursor: pointer;
h4 {
margin: 8px 0 4px;
}
&.active {
border-color: $white;
}
&:not(.active):hover {
border-color: rgba(255,255,255,0.2);
}
}
}
}
}

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

@ -1,6 +1,10 @@
.settings-view {
.sub-views {
padding-bottom: 40px;
}
.services {
@include clearfix();
@ -8,7 +12,7 @@
background: lighten($dark_grey,2%);
padding: 12px 15px;
width: 24%;
margin-right: 2%;
margin-right: 1.3334%;
float: left;
border-radius: 3px;
box-sizing: border-box;
@ -27,13 +31,15 @@
}
}
&.connected {
&.connected,
&.available {
.status {
color: $green;
}
}
&.disconnected {
&.disconnected,
&.unavailable {
.status {
color: $red;
}