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 * as helpers from '../helpers'
import * as uiActions from '../services/ui/actions'
import * as spotifyActions from '../services/spotify/actions'
class FollowButton extends React.Component{
@ -29,7 +30,7 @@ class FollowButton extends React.Component{
}
render(){
if (!this.props.spotify_authorized || !this.props.uri){
if (!this.props.uri){
return false
}
@ -45,7 +46,9 @@ class FollowButton extends React.Component{
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>
} else {
return <button className={className} onClick={e => this.add()}>{this.props.addText}</button>
@ -62,6 +65,7 @@ const mapStateToProps = (state, ownProps) => {
const mapDispatchToProps = (dispatch) => {
return {
uiActions: bindActionCreators(uiActions, 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 ImageZoomModal from './ImageZoomModal'
import KioskModeModal from './KioskModeModal'
import SearchSettingsModal from './SearchSettingsModal'
import SearchURISchemesModal from './SearchURISchemesModal'
import VolumeModal from './VolumeModal'
import AuthorizationModal_Send from './AuthorizationModal_Send'
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 == '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 == '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 }
</div>
@ -68,8 +68,8 @@ class Modal extends React.Component{
const mapStateToProps = (state, ownProps) => {
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),
uri_schemes: (state.mopidy.uri_schemes ? state.mopidy.uri_schemes : null),
search_settings: (state.ui.search_settings ? state.ui.search_settings : null),
uri_schemes: (state.mopidy.uri_schemes ? state.mopidy.uri_schemes : []),
search_uri_schemes: (state.ui.search_uri_schemes ? state.ui.search_uri_schemes : []),
volume: state.mopidy.volume,
mute: state.mopidy.mute,
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 * as helpers from '../../helpers'
export default class SearchSettingsModal extends React.Component{
export default class SearchURISchemesModal extends React.Component{
constructor(props){
super(props)
this.state = {
uri_schemes: []
schemes: []
}
}
componentDidMount(){
if (this.props.search_settings){
this.setState(Object.assign({},this.props.search_settings))
} else {
this.setState({
uri_schemes: Object.assign([],this.props.uri_schemes)
})
}
this.setState({schemes: Object.assign([],this.props.search_uri_schemes)})
}
handleSubmit(e){
this.props.uiActions.set({search_settings: this.state})
this.props.uiActions.set({search_uri_schemes: this.state.schemes})
this.props.uiActions.closeModal()
}
handleToggle(scheme){
var uri_schemes = this.state.uri_schemes
var uri_schemes = this.state.schemes
var index = uri_schemes.indexOf(scheme)
if (index > -1){
@ -40,7 +33,7 @@ export default class SearchSettingsModal extends React.Component{
uri_schemes.push(scheme)
}
this.setState({uri_schemes: uri_schemes})
this.setState(uri_schemes)
}
render(){
@ -52,14 +45,14 @@ export default class SearchSettingsModal extends React.Component{
<form onSubmit={e => this.handleSubmit(e)}>
<div className="list small">
{
this.props.uri_schemes.map(scheme => {
this.props.available_uri_schemes.map(scheme => {
return (
<div className="list-item field checkbox white" key={scheme}>
<label>
<input
type="checkbox"
name={scheme}
checked={this.state.uri_schemes.indexOf(scheme) > -1}
checked={this.state.schemes.indexOf(scheme) > -1}
onChange={ e => this.handleToggle(scheme)} />
<span className="label">{scheme.replace(':','')} &nbsp;<FontAwesome className="grey-text" name={helpers.sourceIcon(scheme)} /></span>
</label>

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

@ -108,8 +108,8 @@ const CoreMiddleware = (function(){
next(action)
var state = store.getState()
if (state.ui.search_settings){
var uri_schemes = state.ui.search_settings.uri_schemes
if (state.ui.search_uri_schemes){
var uri_schemes = state.ui.search_uri_schemes
} else {
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 });
break
@ -507,7 +512,7 @@ const MopidyMiddleware = (function(){
store.dispatch({type: 'MOPIDY_CLEAR_SEARCH_RESULTS'})
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++){
if (uri_schemes_to_ignore.includes(uri_schemes[i])){
uri_schemes.splice(i,1)

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

@ -29,15 +29,17 @@ class Search extends React.Component{
componentDidMount(){
console.log(this.props.search_uri_schemes)
// Auto-focus on the input field
$(document).find('.search-form input').focus();
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)
}
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)
}
}
@ -48,7 +50,7 @@ class Search extends React.Component{
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)
}
@ -58,11 +60,11 @@ class Search extends React.Component{
this.props.mopidyActions.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)
}
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)
}
}
@ -247,7 +249,7 @@ class Search extends React.Component{
var options = (
<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() }} />
<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;
Sources
</button>
@ -275,7 +277,7 @@ const mapStateToProps = (state, ownProps) => {
artists: (state.core.artists ? state.core.artists : []),
playlists: (state.core.playlists ? state.core.playlists : []),
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 : {}),
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"]{
opacity: 0.5;