diff --git a/src/js/components/SearchForm.js b/src/js/components/SearchForm.js
index 8be76b4c..851fef88 100755
--- a/src/js/components/SearchForm.js
+++ b/src/js/components/SearchForm.js
@@ -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
}
diff --git a/src/js/components/URILink.js b/src/js/components/URILink.js
index 4e06ffc9..d067c701 100755
--- a/src/js/components/URILink.js
+++ b/src/js/components/URILink.js
@@ -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;
}
diff --git a/src/js/index.js b/src/js/index.js
index 96d3b2b1..6d821bbb 100755
--- a/src/js/index.js
+++ b/src/js/index.js
@@ -67,7 +67,7 @@ ReactDOM.render(
-
+
diff --git a/src/js/views/Search.js b/src/js/views/Search.js
index c3442b1b..7453ef42 100755
--- a/src/js/views/Search.js
+++ b/src/js/views/Search.js
@@ -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 (
+
+ Artists
+
+ Back to all
+
+
this.loadMore('artists') }/>
@@ -142,9 +171,15 @@ class Search extends React.Component{
)
break;
- case 'albums':
+ case 'album':
return (
+
+ Albums
+
+ Back to all
+
+
this.loadMore('albums') }/>
@@ -153,9 +188,15 @@ class Search extends React.Component{
)
break;
- case 'playlists':
+ case 'playlist':
return (
+
+ Playlists
+
+ Back to all
+
+
this.loadMore('playlists') }/>
@@ -164,9 +205,15 @@ class Search extends React.Component{
)
break;
- case 'tracks':
+ case 'track':
return (
+
+ Tracks
+
+ Back to all
+
+
this.loadMore('tracks') }/>
@@ -175,13 +222,19 @@ class Search extends React.Component{
)
break;
+ case 'all':
default:
if (artists.length > 0){
var artists_section = (
-
Artists
+
+ Artists
+
+ More
+
+
@@ -194,7 +247,12 @@ class Search extends React.Component{
var albums_section = (
-
Albums
+
+ Albums
+
+ More
+
+
@@ -207,7 +265,12 @@ class Search extends React.Component{
var playlists_section = (
-
Playlists
+
+ Playlists
+
+ More
+
+
@@ -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 = (
- {this.setSort(val); this.props.uiActions.hideContextMenu() }} />
- {this.props.uiActions.set({ search_view: val }); this.props.uiActions.hideContextMenu() }} />
+ {this.setSort(val); this.props.uiActions.hideContextMenu() }} />
+
+
)
return (
-
-
+
+
+
+
{ this.renderResults() }
@@ -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 : []),
diff --git a/src/scss/components/_grid.scss b/src/scss/components/_grid.scss
index 163e4d42..2997963b 100755
--- a/src/scss/components/_grid.scss
+++ b/src/scss/components/_grid.scss
@@ -27,7 +27,7 @@
color: $secondary_grey;
.source {
- padding-right: 4px;
+ padding-right: 6px;
}
}
diff --git a/src/scss/views/_search.scss b/src/scss/views/_search.scss
index 022f10b7..e3c95059 100755
--- a/src/scss/views/_search.scss
+++ b/src/scss/views/_search.scss
@@ -31,10 +31,12 @@
}
}
- .search-result-sections {
- section {
- .inner {
- }
+ h4 {
+ margin-bottom: 20px;
+
+ a {
+ font-size: 14px;
+ margin-left: 10px;
}
}