From e4f687d24f65b581048493a2b9cf854e79af3cc3 Mon Sep 17 00:00:00 2001 From: James Barnsley Date: Sat, 9 Sep 2017 21:06:15 +1200 Subject: [PATCH] Default search settings; Disabled follow button, but visible --- src/js/components/FollowButton.js | 8 +++++-- src/js/components/Modal/Modal.js | 8 +++---- ...tingsModal.js => SearchURISchemesModal.js} | 23 +++++++------------ src/js/services/core/middleware.js | 4 ++-- src/js/services/mopidy/middleware.js | 7 +++++- src/js/views/Search.js | 16 +++++++------ src/scss/global/_forms.scss | 1 + 7 files changed, 36 insertions(+), 31 deletions(-) rename src/js/components/Modal/{SearchSettingsModal.js => SearchURISchemesModal.js} (70%) diff --git a/src/js/components/FollowButton.js b/src/js/components/FollowButton.js index 659efbf7..04165233 100755 --- a/src/js/components/FollowButton.js +++ b/src/js/components/FollowButton.js @@ -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 + } else if (this.props.is_following === true){ return } else { return @@ -62,6 +65,7 @@ const mapStateToProps = (state, ownProps) => { const mapDispatchToProps = (dispatch) => { return { + uiActions: bindActionCreators(uiActions, dispatch), spotifyActions: bindActionCreators(spotifyActions, dispatch) } } diff --git a/src/js/components/Modal/Modal.js b/src/js/components/Modal/Modal.js index a6291a59..05acaebc 100755 --- a/src/js/components/Modal/Modal.js +++ b/src/js/components/Modal/Modal.js @@ -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' ? : null } { this.props.modal.name == 'image_zoom' ? : null } { this.props.modal.name == 'kiosk_mode' ? : null } - { this.props.modal.name == 'search_settings' ? : null } + { this.props.modal.name == 'search_uri_schemes' ? : null } { this.props.modal.name == 'volume' ? : null } @@ -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, diff --git a/src/js/components/Modal/SearchSettingsModal.js b/src/js/components/Modal/SearchURISchemesModal.js similarity index 70% rename from src/js/components/Modal/SearchSettingsModal.js rename to src/js/components/Modal/SearchURISchemesModal.js index 3f357991..b6e6cf6c 100755 --- a/src/js/components/Modal/SearchSettingsModal.js +++ b/src/js/components/Modal/SearchURISchemesModal.js @@ -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{
this.handleSubmit(e)}>
{ - this.props.uri_schemes.map(scheme => { + this.props.available_uri_schemes.map(scheme => { return (
diff --git a/src/js/services/core/middleware.js b/src/js/services/core/middleware.js index 05c9be72..c350fc05 100755 --- a/src/js/services/core/middleware.js +++ b/src/js/services/core/middleware.js @@ -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 } diff --git a/src/js/services/mopidy/middleware.js b/src/js/services/mopidy/middleware.js index 5a9e6eae..283750a5 100755 --- a/src/js/services/mopidy/middleware.js +++ b/src/js/services/mopidy/middleware.js @@ -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) diff --git a/src/js/views/Search.js b/src/js/views/Search.js index d257aa67..333bd922 100755 --- a/src/js/views/Search.js +++ b/src/js/views/Search.js @@ -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 = ( {this.props.uiActions.set({ search_view: val }); this.props.uiActions.hideContextMenu() }} /> - @@ -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 : {}) } diff --git a/src/scss/global/_forms.scss b/src/scss/global/_forms.scss index 1027b2d9..46b2ddf2 100755 --- a/src/scss/global/_forms.scss +++ b/src/scss/global/_forms.scss @@ -157,6 +157,7 @@ input[type="submit"] { } } + &.disabled, &[disabled], &[disabled="disabled"]{ opacity: 0.5;