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

Search settings; Search action now uiAction

Browse Source
This commit is contained in:
James Barnsley
2017-03-24 08:46:20 +13:00
parent 0db7a92130
commit 6bf4a71bf2
9 changed files with 149 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/js/components/DropdownField.js
View File

@ -60,7 +60,7 @@ export default class DropdownField extends React.Component{
return (
<div className={classname} data-key={this.props.name.replace(' ','_').toLowerCase()}>
<div className="label" onClick={ () => this.handleToggle() }>
{this.props.icon ? <span><FontAwesome name={this.props.icon} />&nbsp;</span> : null}
{this.props.icon ? <span><FontAwesome name={this.props.icon} />&nbsp; </span> : null}
<span className="text">{ this.props.name }</span>
</div>
<div className="options">

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

@ -13,6 +13,7 @@ import SendAuthorizationModal from './SendAuthorizationModal'
import EditRadioModal from './EditRadioModal'
import ImageZoomModal from './ImageZoomModal'
import KioskModeModal from './KioskModeModal'
import SearchSettingsModal from './SearchSettingsModal'
import * as uiActions from '../../services/ui/actions'
import * as mopidyActions from '../../services/mopidy/actions'
@ -51,6 +52,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} /> : null }
{ this.props.modal.name == 'search_settings' ? <SearchSettingsModal uiActions={this.props.uiActions} search_settings={this.props.search_settings} uri_schemes={this.props.uri_schemes} data={this.props.modal.data} /> : null }
</div>
</div>
@ -60,6 +62,8 @@ class Modal extends React.Component{
const mapStateToProps = (state, ownProps) => {
return {
uri_schemes: (state.mopidy.uri_schemes ? state.mopidy.uri_schemes : null),
search_settings: (state.ui.search_settings ? state.ui.search_settings : null),
modal: state.ui.modal,
radio: state.ui.radio,
tracks: state.ui.tracks,

90
src/js/components/Modal/SearchSettingsModal.js Executable file
View File

@ -0,0 +1,90 @@
import React, { PropTypes } from 'react'
import FontAwesome from 'react-fontawesome'
import Icon from '../Icon'
import * as helpers from '../../helpers'
export default class SearchSettingsModal extends React.Component{
constructor(props){
super(props)
this.state = {
spotify: true,
uri_schemes: []
}
}
componentDidMount(){
if (this.props.search_settings){
this.setState(this.props.search_settings)
} else {
this.setState({
spotify: true,
uri_schemes: this.props.uri_schemes
})
}
}
handleSubmit(e){
this.props.uiActions.set({search_settings: this.state})
this.props.uiActions.closeModal()
this.props.uiActions.startSearch(this.props.data.type, this.props.data.query)
}
handleToggle(scheme){
var uri_schemes = this.state.uri_schemes
var index = uri_schemes.indexOf(scheme)
if (index > -1){
uri_schemes.splice(index,1)
} else {
uri_schemes.push(scheme)
}
this.setState({uri_schemes: uri_schemes})
}
render(){
return (
<div>
<h4 className="no-bottom-padding">Advanced search settings</h4>
<h3 className="grey-text bottom-padding">Customise the providers used when searching</h3>
<form onSubmit={e => this.handleSubmit(e)}>
<div className="field checkbox white">
<label>
<input
type="checkbox"
name="enabled"
checked={ this.state.spotify }
onChange={ e => this.setState({ spotify: !this.state.spotify })} />
<span className="label">spotify <span className="grey-text">(http)</span></span>
</label>
</div>
{
this.props.uri_schemes.map(scheme => {
return (
<div className="field checkbox white" key={scheme}>
<label>
<input
type="checkbox"
name={scheme}
checked={this.state.uri_schemes.indexOf(scheme) > -1}
onChange={ e => this.handleToggle(scheme)} />
<span className="label">{scheme.replace(':','')} <span className="grey-text">(mopidy)</span></span>
</label>
</div>
)
})
}
<div className="actions centered-text">
<button type="submit" className="primary wide">Save</button>
</div>
</form>
</div>
)
}
}

12
src/js/components/SearchForm.js
View File

@ -7,7 +7,6 @@ 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 SearchForm extends React.Component{
@ -38,7 +37,7 @@ class SearchForm extends React.Component{
break
default:
hashHistory.push(global.baseURL+'search/'+this.state.query)
hashHistory.push(global.baseURL+'search/all/'+this.state.query)
break
}
@ -58,15 +57,10 @@ class SearchForm extends React.Component{
}
}
const mapStateToProps = (state, ownProps) => {
return state;
}
const mapDispatchToProps = (dispatch) => {
return {
uiActions: bindActionCreators(uiActions, dispatch),
spotifyActions: bindActionCreators(spotifyActions, dispatch)
uiActions: bindActionCreators(uiActions, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps)(SearchForm)
export default connect(mapDispatchToProps)(SearchForm)

3
src/js/index.js
View File

@ -60,8 +60,7 @@ ReactDOM.render(
<Route path="settings" component={Settings} />
<Route path="debug" component={Debug} />
<Route path="search/:query" component={Search} />
<Route path="search/:query/:source/:type" component={Search} />
<Route path="search/:type/:query" component={Search} />
<Route path="album/:uri" component={Album} />
<Route path="artist/:uri" component={Artist} />
<Route path="playlist/:uri" component={Playlist} />

6
src/js/services/ui/actions.js
View File

@ -29,10 +29,12 @@ export function hideTouchContextMenu(){
}
}
export function startSearch( query ){
export function startSearch(search_type, query, only_mopidy = false){
return {
type: 'SEARCH_STARTED',
query: query
search_type: search_type,
query: query,
only_mopidy: only_mopidy
}
}

21
src/js/services/ui/middleware.js
View File

@ -112,7 +112,26 @@ const UIMiddleware = (function(){
break
case 'SEARCH_STARTED':
ReactGA.event({ category: 'Search', action: 'Started', label: action.query })
ReactGA.event({ category: 'Search', action: 'Started', label: action.type+': '+action.query })
var state = store.getState()
// initiate spotify searching
if (!action.only_mopidy){
if (!state.ui.search_settings || state.ui.search_settings.spotify){
store.dispatch(spotifyActions.getSearchResults(action.query))
}
}
// backend searching (mopidy)
if (state.mopidy.connected){
if (state.ui.search_settings){
var uri_schemes = state.ui.search_settings.uri_schemes
} else {
var uri_schemes = state.mopidy.uri_schemes
}
store.dispatch(mopidyActions.getSearchResults(action.query, uri_schemes))
}
next(action)
break

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

@ -26,34 +26,19 @@ class Search extends React.Component{
}
componentDidMount(){
this.performSearch()
this.props.uiActions.startSearch(this.props.params.type, this.props.params.query)
}
componentWillReceiveProps(newProps){
// new query
if( this.props.params.query != newProps.params.query ){
this.performSearch( newProps )
this.props.uiActions.startSearch(newProps.params.type, newProps.params.query)
}
// mopidy comes online
if( !this.props.mopidy_connected && newProps.mopidy_connected ){
this.props.mopidyActions.getSearchResults( newProps.params.query, newProps.uri_schemes )
}
}
performSearch( props = this.props ){
var source = props.params.source
var type = props.params.type
this.props.uiActions.startSearch(props.params.query)
if (!source || source == 'all' || source == 'spotify'){
this.props.spotifyActions.getSearchResults( props.params.query )
}
if( props.mopidy_connected ){
this.props.mopidyActions.getSearchResults( props.params.query, props.uri_schemes )
this.props.uiActions.startSearch(newProps.params.type, newProps.params.query, true)
}
}
@ -62,14 +47,11 @@ class Search extends React.Component{
}
renderResults(){
var type = (this.props.params.type ? this.props.params.type : 'all')
var source = (this.props.params.source ? this.props.params.source : 'all')
var artists = []
if (this.props.artists_uris){
for (var i = 0; i < this.props.artists_uris.length; i++){
var uri = this.props.artists_uris[i]
if (this.props.artists.hasOwnProperty(uri) && (source == 'all' || helpers.uriSource(uri) == source)){
if (this.props.artists.hasOwnProperty(uri)){
artists.push(this.props.artists[uri])
}
}
@ -79,7 +61,7 @@ class Search extends React.Component{
if (this.props.albums_uris){
for (var i = 0; i < this.props.albums_uris.length; i++){
var uri = this.props.albums_uris[i]
if (this.props.albums.hasOwnProperty(uri) && (source == 'all' || helpers.uriSource(uri) == source)){
if (this.props.albums.hasOwnProperty(uri)){
albums.push(this.props.albums[uri])
}
}
@ -89,7 +71,7 @@ class Search extends React.Component{
if (this.props.playlists_uris){
for (var i = 0; i < this.props.playlists_uris.length; i++){
var uri = this.props.playlists_uris[i]
if (this.props.playlists.hasOwnProperty(uri) && (source == 'all' || helpers.uriSource(uri) == source)){
if (this.props.playlists.hasOwnProperty(uri)){
playlists.push(this.props.playlists[uri])
}
}
@ -97,25 +79,21 @@ class Search extends React.Component{
var tracks = []
if (this.props.tracks){
if (source == 'all'){
tracks = this.props.tracks
} else {
for (var i = 0; i < this.props.tracks.length; i++){
if (helpers.uriSource(this.props.tracks[i].uri) == source){
tracks.push(this.props.tracks[i])
}
for (var i = 0; i < this.props.tracks.length; i++){
if (helpers.uriSource(this.props.tracks[i].uri)){
tracks.push(this.props.tracks[i])
}
}
}
switch( type ){
switch (this.props.params.type){
case 'artists':
return (
<div>
<section className="grid-wrapper">
<ArtistGrid artists={artists} />
<LazyLoadListener enabled={this.props['artists_more'] && (source == 'spotify' || source == 'all')} loadMore={ () => this.loadMore('artists') }/>
<LazyLoadListener enabled={this.props['artists_more'] && this.props.search_settings.spotify} loadMore={ () => this.loadMore('artists') }/>
</section>
</div>
)
@ -126,7 +104,7 @@ class Search extends React.Component{
<div>
<section className="grid-wrapper">
<AlbumGrid albums={albums} />
<LazyLoadListener enabled={this.props['albums_more'] && (source == 'spotify' || source == 'all')} loadMore={ () => this.loadMore('albums') }/>
<LazyLoadListener enabled={this.props['albums_more'] && this.props.search_settings.spotify} loadMore={ () => this.loadMore('albums') }/>
</section>
</div>
)
@ -137,7 +115,7 @@ class Search extends React.Component{
<div>
<section className="grid-wrapper">
<PlaylistGrid playlists={playlists} />
<LazyLoadListener enabled={this.props['playlists_more'] && (source == 'spotify' || source == 'all')} loadMore={ () => this.loadMore('playlists') }/>
<LazyLoadListener enabled={this.props['playlists_more'] && this.props.search_settings.spotify} loadMore={ () => this.loadMore('playlists') }/>
</section>
</div>
)
@ -148,7 +126,7 @@ class Search extends React.Component{
<div>
<section className="list-wrapper">
<TrackList show_source_icon={true} tracks={ tracks } />
<LazyLoadListener enabled={this.props['tracks_more'] && (source == 'spotify' || source == 'all')} loadMore={ () => this.loadMore('tracks') }/>
<LazyLoadListener enabled={this.props['tracks_more'] && this.props.search_settings.spotify} loadMore={ () => this.loadMore('tracks') }/>
</section>
</div>
)
@ -181,7 +159,7 @@ class Search extends React.Component{
<section className="list-wrapper">
<h4 className="left-padding"><Link to={global.baseURL+'search/'+this.props.params.query+'/tracks'}>Tracks</Link></h4>
<TrackList show_source_icon={true} tracks={ tracks } />
<LazyLoadListener enabled={this.props['tracks_more'] && (source == 'spotify' || source == 'all')} loadMore={ () => this.loadMore('tracks') }/>
<LazyLoadListener enabled={this.props['tracks_more'] && this.props.search_settings.spotify} loadMore={ () => this.loadMore('tracks') }/>
</section>
</div>
@ -191,14 +169,7 @@ class Search extends React.Component{
handleTypeChange(val){
this.props.uiActions.hideContextMenu()
var source = (this.props.params.source ? this.props.params.source : 'all')
hashHistory.push(global.baseURL+'search/'+this.props.params.query+'/'+source+'/'+val)
}
handleSourceChange(val){
this.props.uiActions.hideContextMenu()
var type = (this.props.params.type ? this.props.params.type : 'all')
hashHistory.push(global.baseURL+'search/'+this.props.params.query+'/'+val+'/'+type)
hashHistory.push(global.baseURL+'search/'+val+'/'+this.props.params.query)
}
render(){
@ -225,28 +196,13 @@ class Search extends React.Component{
}
]
var source_options = [
{
value: 'all',
label: 'All'
},
{
value: 'spotify',
label: 'Spotify'
}
]
for (var i = 0; i < this.props.uri_schemes.length; i++){
var scheme = this.props.uri_schemes[i].replace(':','')
source_options.push({
value: scheme,
label: scheme
})
}
var options = (
<span>
<DropdownField name="Filter" value={this.props.params.type} options={type_options} handleChange={val => this.handleTypeChange(val)} />
<DropdownField name="Source" value={this.props.params.source} options={source_options} handleChange={val => this.handleSourceChange(val)} />
<DropdownField icon="eye" name="Type" value={this.props.params.type} options={type_options} handleChange={val => this.handleTypeChange(val)} />
<button onClick={e => this.props.uiActions.openModal('search_settings', {type: this.props.params.type, query: this.props.params.query})}>
<FontAwesome name="wrench" />&nbsp;
Advanced
</button>
</span>
)
@ -262,7 +218,7 @@ class Search extends React.Component{
const mapStateToProps = (state, ownProps) => {
return {
mopidy_connected: state.mopidy.connected,
uri_schemes: state.mopidy.uri_schemes,
search_settings: (state.ui.search_settings ? state.ui.search_settings : null),
tracks: (state.ui.search_results ? state.ui.search_results.tracks : []),
tracks_more: (state.ui.search_results && state.ui.search_results.tracks_more ? state.ui.search_results.tracks_more : null),
artists: state.ui.artists,

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

@ -100,6 +100,10 @@ h3 {
font-weight: 100;
font-style: italic;
font-size: 20px;
&.bottom-padding {
padding-bottom: 30px;
}
}
h4 {