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

Streamlining search triggers and sub-views

Browse Source
This commit is contained in:
James Barnsley
2018-01-02 22:55:44 +13:00
parent 8e58d2f868
commit 90eda428c2
6 changed files with 124 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -26,8 +26,9 @@ class SearchForm extends React.Component{
}
componentWillReceiveProps(newProps){
if (newProps.query && newProps.query != this.state.query && newProps.query != this.props.query && !this.state.in_focus){
this.setState({query: newProps.query})
if (newProps.query && newProps.query != this.state.query && !this.state.in_focus){
this.setState({query: newProps.query});
console.log(newProps.query);
}
}
@ -50,7 +51,7 @@ class SearchForm extends React.Component{
break
default:
hashHistory.push(global.baseURL+'search/iris:search:'+encodeURIComponent(this.state.query))
hashHistory.push(global.baseURL+'search/search:'+this.props.view+':'+encodeURIComponent(this.state.query));
break
}

9
src/js/components/URILink.js
View File

@ -16,7 +16,10 @@ export default class URILink extends React.Component{
render(){
var to = null;
var uri = encodeURIComponent(this.props.uri);
var uri = this.props.uri;
if (!this.props.unencoded){
uri = encodeURIComponent(uri);
}
switch (this.props.type){
@ -44,6 +47,10 @@ export default class URILink extends React.Component{
to = global.baseURL+'discover/recommendations/'+uri;
break;
case 'search':
to = global.baseURL+'search/'+uri;
break;
default:
to = null;
}

2
src/js/index.js
View File

@ -67,7 +67,7 @@ ReactDOM.render(
<Route path="settings/debug" component={Debug} />
<Route path="settings(/:sub_view)" component={Settings} />
<Route path="search(/iris::search::query)" component={Search} />
<Route path="search(/search::view::query)" component={Search} />
<Route path="album/:uri" component={Album} />
<Route path="artist/:uri(/:sub_view)" component={Artist} />
<Route path="playlist/:uri" component={Playlist} />

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

@ -14,6 +14,7 @@ import AlbumGrid from '../components/AlbumGrid'
import PlaylistGrid from '../components/PlaylistGrid'
import LazyLoadListener from '../components/LazyLoadListener'
import SearchForm from '../components/SearchForm'
import URILink from '../components/URILink'
import * as helpers from '../helpers'
import * as coreActions from '../services/core/actions'
@ -24,46 +25,67 @@ import * as spotifyActions from '../services/spotify/actions'
class Search extends React.Component{
constructor(props){
super(props)
super(props);
}
componentDidMount(){
var view = 'all';
if (this.props.params && this.props.params.view){
view = this.props.params.view;
}
var query = false;
if (this.props.params && this.props.params.query && this.props.params.query !== ''){
query = this.props.params.query;
}
// 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 (query){
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(view, query)
}
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(view, query)
}
}
}
componentWillReceiveProps(newProps){
if (!this.props.mopidy_connected && newProps.mopidy_connected && newProps.params.query){
this.props.mopidyActions.getSearchResults(newProps.view, newProps.params.query)
if (newProps.params && newProps.params.view){
var view = newProps.params.view;
} else {
var view = 'all';
}
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)
if (newProps.params && newProps.params.query && newProps.params.query !== ''){
var query = newProps.params.query;
} else {
var query = null;
}
if (query && !this.props.mopidy_connected && newProps.mopidy_connected){
this.props.mopidyActions.getSearchResults(view, query)
}
if (query && !this.props.spotify_connected && newProps.spotify_connected && newProps.search_uri_schemes.includes('spotify:')){
this.props.spotifyActions.getSearchResults(view, query)
}
// Search changed
if (this.props.params.query !== newProps.params.query || this.props.view !== newProps.view){
if (query && query !== this.props.params.query){
this.props.mopidyActions.clearSearchResults()
this.props.spotifyActions.clearSearchResults()
this.props.mopidyActions.clearSearchResults();
this.props.spotifyActions.clearSearchResults();
if (this.props.mopidy_connected && this.props.search_uri_schemes){
this.props.mopidyActions.getSearchResults(newProps.view, newProps.params.query)
this.props.mopidyActions.getSearchResults(view, query)
}
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(view, query)
}
}
}
@ -85,6 +107,7 @@ class Search extends React.Component{
}
renderResults(){
var spotify_search_enabled = (this.props.search_settings && this.props.search_settings.spotify);
if (this.props.sort == 'uri'){
@ -129,11 +152,17 @@ class Search extends React.Component{
}
tracks = helpers.sortItems(tracks, this.props.sort, this.props.sort_reverse, sort_map);
switch (this.props.view){
switch (this.props.params.view){
case 'artists':
case 'artist':
return (
<div>
<h4>
Artists
<URILink unencoded type="search" uri={"search:all:"+this.props.params.query}>
Back to all
</URILink>
</h4>
<section className="grid-wrapper">
<ArtistGrid artists={artists} show_source_icon />
<LazyLoadListener enabled={this.props['artists_more'] && spotify_search_enabled} loadMore={ () => this.loadMore('artists') }/>
@ -142,9 +171,15 @@ class Search extends React.Component{
)
break;
case 'albums':
case 'album':
return (
<div>
<h4>
Albums
<URILink unencoded type="search" uri={"search:all:"+this.props.params.query}>
Back to all
</URILink>
</h4>
<section className="grid-wrapper">
<AlbumGrid albums={albums} show_source_icon />
<LazyLoadListener enabled={this.props['albums_more'] && spotify_search_enabled} loadMore={ () => this.loadMore('albums') }/>
@ -153,9 +188,15 @@ class Search extends React.Component{
)
break;
case 'playlists':
case 'playlist':
return (
<div>
<h4>
Playlists
<URILink unencoded type="search" uri={"search:all:"+this.props.params.query}>
Back to all
</URILink>
</h4>
<section className="grid-wrapper">
<PlaylistGrid playlists={playlists} show_source_icon />
<LazyLoadListener enabled={this.props['playlists_more'] && spotify_search_enabled} loadMore={ () => this.loadMore('playlists') }/>
@ -164,9 +205,15 @@ class Search extends React.Component{
)
break;
case 'tracks':
case 'track':
return (
<div>
<h4>
Tracks
<URILink unencoded type="search" uri={"search:all:"+this.props.params.query}>
Back to all
</URILink>
</h4>
<section className="list-wrapper">
<TrackList tracks={tracks} uri={'iris:search:'+this.props.params.query} show_source_icon />
<LazyLoadListener enabled={this.props['tracks_more'] && spotify_search_enabled} loadMore={ () => this.loadMore('tracks') }/>
@ -175,13 +222,19 @@ class Search extends React.Component{
)
break;
case 'all':
default:
if (artists.length > 0){
var artists_section = (
<section>
<div className="inner">
<h4>Artists</h4>
<h4>
Artists
<URILink unencoded type="search" uri={"search:artist:"+this.props.params.query}>
More
</URILink>
</h4>
<ArtistGrid show_source_icon single_row artists={artists.slice(0,5)} />
</div>
</section>
@ -194,7 +247,12 @@ class Search extends React.Component{
var albums_section = (
<section>
<div className="inner">
<h4>Albums</h4>
<h4>
Albums
<URILink unencoded type="search" uri={"search:album:"+this.props.params.query}>
More
</URILink>
</h4>
<AlbumGrid show_source_icon single_row albums={albums.slice(0,5)} />
</div>
</section>
@ -207,7 +265,12 @@ class Search extends React.Component{
var playlists_section = (
<section>
<div className="inner">
<h4>Playlists</h4>
<h4>
Playlists
<URILink unencoded type="search" uri={"search:playlist:"+this.props.params.query}>
More
</URILink>
</h4>
<PlaylistGrid show_source_icon single_row playlists={playlists.slice(0,5)} />
</div>
</section>
@ -242,29 +305,6 @@ class Search extends React.Component{
}
render(){
var view_options = [
{
value: 'all',
label: 'All'
},
{
value: 'artists',
label: 'Artists'
},
{
value: 'albums',
label: 'Albums'
},
{
value: 'playlists',
label: 'Playlists'
},
{
value: 'tracks',
label: 'Tracks'
}
]
var sort_options = [
{
value: 'name',
@ -282,23 +322,37 @@ class Search extends React.Component{
value: 'uri',
label: 'Source'
}
]
];
var options = (
<span>
<DropdownField icon="sort" name="Sort" value={this.props.sort} options={sort_options} reverse={this.props.sort_reverse} handleChange={val => {this.setSort(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() }} />
<DropdownField
icon="sort"
name="Sort"
value={this.props.sort}
options={sort_options}
reverse={this.props.sort_reverse}
handleChange={val => {this.setSort(val); this.props.uiActions.hideContextMenu() }} />
<button className="no-hover" onClick={e => this.props.uiActions.openModal('search_uri_schemes', {query: this.props.params.query})}>
<FontAwesome name="wrench" />&nbsp;
Sources
</button>
</span>
)
return (
<div className="view search-view">
<Header icon="search" options={options} uiActions={this.props.uiActions} />
<SearchForm query={this.props.params.query} />
<Header
icon="search"
options={options}
uiActions={this.props.uiActions} />
<SearchForm
query={(this.props.params.query ? this.props.params.query : '')}
view={(this.props.params.view ? this.props.params.view : 'all')} />
<div className="content-wrapper">
{ this.renderResults() }
</div>
@ -309,7 +363,6 @@ class Search extends React.Component{
const mapStateToProps = (state, ownProps) => {
return {
view: (state.ui.search_view ? state.ui.search_view : 'all'),
mopidy_connected: state.mopidy.connected,
spotify_connected: state.spotify.connected,
albums: (state.core.albums ? state.core.albums : []),

2
src/scss/components/_grid.scss
View File

@ -27,7 +27,7 @@
color: $secondary_grey;
.source {
padding-right: 4px;
padding-right: 6px;
}
}

10
src/scss/views/_search.scss
View File

@ -31,10 +31,12 @@
}
}
.search-result-sections {
section {
.inner {
}
h4 {
margin-bottom: 20px;
a {
font-size: 14px;
margin-left: 10px;
}
}