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

Default search settings; Disabled follow button, but visible

Browse Source
This commit is contained in:
James Barnsley
2017-09-09 21:06:15 +12:00
parent d1c761a879
commit e4f687d24f
7 changed files with 36 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,6 +6,7 @@ import { createStore, bindActionCreators } from 'redux'
import FontAwesome from 'react-fontawesome' import FontAwesome from 'react-fontawesome'
import * as helpers from '../helpers' import * as helpers from '../helpers'
import * as uiActions from '../services/ui/actions'
import * as spotifyActions from '../services/spotify/actions' import * as spotifyActions from '../services/spotify/actions'
class FollowButton extends React.Component{ class FollowButton extends React.Component{
@ -29,7 +30,7 @@ class FollowButton extends React.Component{
} }
render(){ render(){
if (!this.props.spotify_authorized || !this.props.uri){ if (!this.props.uri){
return false return false
} }
@ -45,7 +46,9 @@ class FollowButton extends React.Component{
className += ' working' className += ' working'
} }
if (this.props.is_following === true){ if (!this.props.spotify_authorized){
return <button className={className+' disabled'} onClick={e => this.props.uiActions.createNotification('You must authorize Iris first','warning')}>{this.props.addText}</button>
} else if (this.props.is_following === true){
return <button className={className+' destructive'} onClick={e => this.remove()}>{this.props.removeText}</button> return <button className={className+' destructive'} onClick={e => this.remove()}>{this.props.removeText}</button>
} else { } else {
return <button className={className} onClick={e => this.add()}>{this.props.addText}</button> return <button className={className} onClick={e => this.add()}>{this.props.addText}</button>
@ -62,6 +65,7 @@ const mapStateToProps = (state, ownProps) => {
const mapDispatchToProps = (dispatch) => { const mapDispatchToProps = (dispatch) => {
return { return {
uiActions: bindActionCreators(uiActions, dispatch),
spotifyActions: bindActionCreators(spotifyActions, dispatch) spotifyActions: bindActionCreators(spotifyActions, dispatch)
} }
} }

8
src/js/components/Modal/Modal.js
View File

@ -12,7 +12,7 @@ import EditPlaylistModal from './EditPlaylistModal'
import EditRadioModal from './EditRadioModal' import EditRadioModal from './EditRadioModal'
import ImageZoomModal from './ImageZoomModal' import ImageZoomModal from './ImageZoomModal'
import KioskModeModal from './KioskModeModal' import KioskModeModal from './KioskModeModal'
import SearchSettingsModal from './SearchSettingsModal' import SearchURISchemesModal from './SearchURISchemesModal'
import VolumeModal from './VolumeModal' import VolumeModal from './VolumeModal'
import AuthorizationModal_Send from './AuthorizationModal_Send' import AuthorizationModal_Send from './AuthorizationModal_Send'
import AuthorizationModal_Receive from './AuthorizationModal_Receive' import AuthorizationModal_Receive from './AuthorizationModal_Receive'
@ -56,7 +56,7 @@ class Modal extends React.Component{
{ this.props.modal.name == 'edit_radio' ? <EditRadioModal uiActions={this.props.uiActions} pusherActions={this.props.pusherActions} spotifyActions={this.props.spotifyActions} data={this.props.modal.data} radio={this.props.radio} artists={this.props.artists} tracks={this.props.tracks} /> : null } { this.props.modal.name == 'edit_radio' ? <EditRadioModal uiActions={this.props.uiActions} pusherActions={this.props.pusherActions} spotifyActions={this.props.spotifyActions} data={this.props.modal.data} radio={this.props.radio} artists={this.props.artists} tracks={this.props.tracks} /> : null }
{ this.props.modal.name == 'image_zoom' ? <ImageZoomModal uiActions={this.props.uiActions} data={this.props.modal.data} /> : null } { this.props.modal.name == 'image_zoom' ? <ImageZoomModal uiActions={this.props.uiActions} data={this.props.modal.data} /> : null }
{ this.props.modal.name == 'kiosk_mode' ? <KioskModeModal uiActions={this.props.uiActions} data={this.props.modal.data} current_track={this.props.current_track} /> : null } { this.props.modal.name == 'kiosk_mode' ? <KioskModeModal uiActions={this.props.uiActions} data={this.props.modal.data} current_track={this.props.current_track} /> : null }
{ this.props.modal.name == 'search_settings' ? <SearchSettingsModal uiActions={this.props.uiActions} coreActions={this.props.coreActions} search_settings={this.props.search_settings} uri_schemes={this.props.uri_schemes} data={this.props.modal.data} /> : null } { this.props.modal.name == 'search_uri_schemes' ? <SearchURISchemesModal uiActions={this.props.uiActions} coreActions={this.props.coreActions} search_uri_schemes={this.props.search_uri_schemes} available_uri_schemes={this.props.uri_schemes} data={this.props.modal.data} /> : null }
{ this.props.modal.name == 'volume' ? <VolumeModal uiActions={this.props.uiActions} mopidyActions={this.props.mopidyActions} volume={this.props.volume} mute={this.props.mute} /> : null } { this.props.modal.name == 'volume' ? <VolumeModal uiActions={this.props.uiActions} mopidyActions={this.props.mopidyActions} volume={this.props.volume} mute={this.props.mute} /> : null }
</div> </div>
@ -68,8 +68,8 @@ class Modal extends React.Component{
const mapStateToProps = (state, ownProps) => { const mapStateToProps = (state, ownProps) => {
return { return {
current_track: (state.core.current_track !== undefined && state.core.tracks !== undefined && state.core.tracks[state.core.current_track.uri] !== undefined ? state.core.tracks[state.core.current_track.uri] : null), current_track: (state.core.current_track !== undefined && state.core.tracks !== undefined && state.core.tracks[state.core.current_track.uri] !== undefined ? state.core.tracks[state.core.current_track.uri] : null),
uri_schemes: (state.mopidy.uri_schemes ? state.mopidy.uri_schemes : null), uri_schemes: (state.mopidy.uri_schemes ? state.mopidy.uri_schemes : []),
search_settings: (state.ui.search_settings ? state.ui.search_settings : null), search_uri_schemes: (state.ui.search_uri_schemes ? state.ui.search_uri_schemes : []),
volume: state.mopidy.volume, volume: state.mopidy.volume,
mute: state.mopidy.mute, mute: state.mopidy.mute,
modal: state.ui.modal, modal: state.ui.modal,

23
src/js/components/Modal/SearchSettingsModal.js → src/js/components/Modal/SearchURISchemesModal.js
View File

@ -5,33 +5,26 @@ import FontAwesome from 'react-fontawesome'
import Icon from '../Icon' import Icon from '../Icon'
import * as helpers from '../../helpers' import * as helpers from '../../helpers'
export default class SearchSettingsModal extends React.Component{ export default class SearchURISchemesModal extends React.Component{
constructor(props){ constructor(props){
super(props) super(props)
this.state = { this.state = {
uri_schemes: [] schemes: []
} }
} }
componentDidMount(){ componentDidMount(){
if (this.props.search_settings){ this.setState({schemes: Object.assign([],this.props.search_uri_schemes)})
this.setState(Object.assign({},this.props.search_settings))
} else {
this.setState({
uri_schemes: Object.assign([],this.props.uri_schemes)
})
}
} }
handleSubmit(e){ handleSubmit(e){
this.props.uiActions.set({search_settings: this.state}) this.props.uiActions.set({search_uri_schemes: this.state.schemes})
this.props.uiActions.closeModal() this.props.uiActions.closeModal()
} }
handleToggle(scheme){ handleToggle(scheme){
var uri_schemes = this.state.uri_schemes var uri_schemes = this.state.schemes
var index = uri_schemes.indexOf(scheme) var index = uri_schemes.indexOf(scheme)
if (index > -1){ if (index > -1){
@ -40,7 +33,7 @@ export default class SearchSettingsModal extends React.Component{
uri_schemes.push(scheme) uri_schemes.push(scheme)
} }
this.setState({uri_schemes: uri_schemes}) this.setState(uri_schemes)
} }
render(){ render(){
@ -52,14 +45,14 @@ export default class SearchSettingsModal extends React.Component{
<form onSubmit={e => this.handleSubmit(e)}> <form onSubmit={e => this.handleSubmit(e)}>
<div className="list small"> <div className="list small">
{ {
this.props.uri_schemes.map(scheme => { this.props.available_uri_schemes.map(scheme => {
return ( return (
<div className="list-item field checkbox white" key={scheme}> <div className="list-item field checkbox white" key={scheme}>
<label> <label>
<input <input
type="checkbox" type="checkbox"
name={scheme} name={scheme}
checked={this.state.uri_schemes.indexOf(scheme) > -1} checked={this.state.schemes.indexOf(scheme) > -1}
onChange={ e => this.handleToggle(scheme)} /> onChange={ e => this.handleToggle(scheme)} />
<span className="label">{scheme.replace(':','')} &nbsp;<FontAwesome className="grey-text" name={helpers.sourceIcon(scheme)} /></span> <span className="label">{scheme.replace(':','')} &nbsp;<FontAwesome className="grey-text" name={helpers.sourceIcon(scheme)} /></span>
</label> </label>

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

@ -108,8 +108,8 @@ const CoreMiddleware = (function(){
next(action) next(action)
var state = store.getState() var state = store.getState()
if (state.ui.search_settings){ if (state.ui.search_uri_schemes){
var uri_schemes = state.ui.search_settings.uri_schemes var uri_schemes = state.ui.search_uri_schemes
} else { } else {
var uri_schemes = state.mopidy.uri_schemes var uri_schemes = state.mopidy.uri_schemes
} }

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

@ -241,6 +241,11 @@ const MopidyMiddleware = (function(){
}) })
} }
// If we haven't customised our search schemes, add all to search
if (store.getState().ui.search_uri_schemes === undefined){
store.dispatch(uiActions.set({search_uri_schemes: uri_schemes}));
}
store.dispatch({ type: 'MOPIDY_URISCHEMES_FILTERED', data: uri_schemes }); store.dispatch({ type: 'MOPIDY_URISCHEMES_FILTERED', data: uri_schemes });
break break
@ -507,7 +512,7 @@ const MopidyMiddleware = (function(){
store.dispatch({type: 'MOPIDY_CLEAR_SEARCH_RESULTS'}) store.dispatch({type: 'MOPIDY_CLEAR_SEARCH_RESULTS'})
var uri_schemes_to_ignore = ['spotify:'] var uri_schemes_to_ignore = ['spotify:']
var uri_schemes = Object.assign([], store.getState().ui.search_settings.uri_schemes) var uri_schemes = Object.assign([], store.getState().ui.search_uri_schemes)
for (var i = 0; i < uri_schemes.length; i++){ for (var i = 0; i < uri_schemes.length; i++){
if (uri_schemes_to_ignore.includes(uri_schemes[i])){ if (uri_schemes_to_ignore.includes(uri_schemes[i])){
uri_schemes.splice(i,1) uri_schemes.splice(i,1)

16
src/js/views/Search.js
View File

@ -29,15 +29,17 @@ class Search extends React.Component{
componentDidMount(){ componentDidMount(){
console.log(this.props.search_uri_schemes)
// Auto-focus on the input field // Auto-focus on the input field
$(document).find('.search-form input').focus(); $(document).find('.search-form input').focus();
if (this.props.params.query && this.props.params.query !== ''){ if (this.props.params.query && this.props.params.query !== ''){
if (this.props.mopidy_connected && this.props.search_settings.uri_schemes){ if (this.props.mopidy_connected && this.props.search_uri_schemes){
this.props.mopidyActions.getSearchResults(this.props.view, this.props.params.query) this.props.mopidyActions.getSearchResults(this.props.view, this.props.params.query)
} }
if (this.props.mopidy_connected && this.props.search_settings.uri_schemes && this.props.search_settings.uri_schemes.includes('spotify:')){ if (this.props.spotify_connected && this.props.search_uri_schemes && this.props.search_uri_schemes.includes('spotify:')){
this.props.spotifyActions.getSearchResults(this.props.view, this.props.params.query) this.props.spotifyActions.getSearchResults(this.props.view, this.props.params.query)
} }
} }
@ -48,7 +50,7 @@ class Search extends React.Component{
this.props.mopidyActions.getSearchResults(newProps.view, newProps.params.query) this.props.mopidyActions.getSearchResults(newProps.view, newProps.params.query)
} }
if (!this.props.spotify_connected && newProps.spotify_connected && newProps.params.query && newProps.search_settings.uri_schemes.includes('spotify:')){ if (!this.props.spotify_connected && newProps.spotify_connected && newProps.params.query && newProps.search_uri_schemes.includes('spotify:')){
this.props.spotifyActions.getSearchResults(newProps.view, newProps.params.query) this.props.spotifyActions.getSearchResults(newProps.view, newProps.params.query)
} }
@ -58,11 +60,11 @@ class Search extends React.Component{
this.props.mopidyActions.clearSearchResults() this.props.mopidyActions.clearSearchResults()
this.props.spotifyActions.clearSearchResults() this.props.spotifyActions.clearSearchResults()
if (this.props.mopidy_connected && this.props.search_settings.uri_schemes){ if (this.props.mopidy_connected && this.props.search_uri_schemes){
this.props.mopidyActions.getSearchResults(newProps.view, newProps.params.query) this.props.mopidyActions.getSearchResults(newProps.view, newProps.params.query)
} }
if (this.props.mopidy_connected && this.props.search_settings.uri_schemes && this.props.search_settings.uri_schemes.includes('spotify:')){ if (this.props.mopidy_connected && this.props.search_uri_schemes && this.props.search_uri_schemes.includes('spotify:')){
this.props.spotifyActions.getSearchResults(newProps.view, newProps.params.query) this.props.spotifyActions.getSearchResults(newProps.view, newProps.params.query)
} }
} }
@ -247,7 +249,7 @@ class Search extends React.Component{
var options = ( var options = (
<span> <span>
<DropdownField icon="eye" name="View" value={this.props.view} options={view_options} handleChange={val => {this.props.uiActions.set({ search_view: val }); this.props.uiActions.hideContextMenu() }} /> <DropdownField icon="eye" name="View" value={this.props.view} options={view_options} handleChange={val => {this.props.uiActions.set({ search_view: val }); this.props.uiActions.hideContextMenu() }} />
<button className="no-hover" onClick={e => this.props.uiActions.openModal('search_settings', {query: this.props.params.query})}> <button className="no-hover" onClick={e => this.props.uiActions.openModal('search_uri_schemes', {query: this.props.params.query})}>
<FontAwesome name="wrench" />&nbsp; <FontAwesome name="wrench" />&nbsp;
Sources Sources
</button> </button>
@ -275,7 +277,7 @@ const mapStateToProps = (state, ownProps) => {
artists: (state.core.artists ? state.core.artists : []), artists: (state.core.artists ? state.core.artists : []),
playlists: (state.core.playlists ? state.core.playlists : []), playlists: (state.core.playlists ? state.core.playlists : []),
tracks: (state.core.tracks ? state.core.tracks : []), tracks: (state.core.tracks ? state.core.tracks : []),
search_settings: (state.ui.search_settings ? state.ui.search_settings : {}), search_uri_schemes: (state.ui.search_uri_schemes ? state.ui.search_uri_schemes : []),
mopidy_search_results: (state.mopidy.search_results ? state.mopidy.search_results : {}), mopidy_search_results: (state.mopidy.search_results ? state.mopidy.search_results : {}),
spotify_search_results: (state.spotify.search_results ? state.spotify.search_results : {}) spotify_search_results: (state.spotify.search_results ? state.spotify.search_results : {})
} }

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

@ -157,6 +157,7 @@ input[type="submit"] {
} }
} }
&.disabled,
&[disabled], &[disabled],
&[disabled="disabled"]{ &[disabled="disabled"]{
opacity: 0.5; opacity: 0.5;