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

Supporting url-unsafe characters in search term, fixes #446

Browse Source
This commit is contained in:
James Barnsley
2019-10-18 14:02:10 +13:00
parent c82326f452
commit 6e7b72e6a5
5 changed files with 64 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
mopidy_iris/static/app.js
View File

@ -85739,9 +85739,17 @@ var Search = function (_React$Component) {
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
// Query changed
if (nextProps.term !== this.props.term || nextProps.type !== this.props.type) {
this.digestUri(nextProps);
var _props = this.props,
type = _props.type,
term = _props.term;
var nextType = nextProps.type,
nextTerm = nextProps.term;
if (nextType !== type || nextTerm !== term) {
this.digestUri({
type: nextType,
term: nextTerm
});
}
// Services came online
@ -85758,6 +85766,8 @@ var Search = function (_React$Component) {
value: function handleSubmit(term) {
var _this2 = this;
var encodedTerm = encodeURIComponent(term);
this.setState({ term: term }, function () {
// Unchanged term, so this is a forced re-search
// Often the other search parameters have changed instead, but we can't
@ -85765,7 +85775,7 @@ var Search = function (_React$Component) {
if (_this2.props.term == term) {
_this2.search();
} else {
_this2.props.history.push('/search/' + _this2.state.type + '/' + term);
_this2.props.history.push('/search/' + _this2.state.type + '/' + encodedTerm);
}
});
}
@ -85844,6 +85854,7 @@ var Search = function (_React$Component) {
value: function renderArtists(artists, spotify_search_enabled) {
var _this3 = this;
var encodedTerm = encodeURIComponent(this.state.term);
return _react2.default.createElement(
'div',
null,
@ -85852,7 +85863,7 @@ var Search = function (_React$Component) {
null,
_react2.default.createElement(
_URILink2.default,
{ type: 'search', uri: 'search:all:' + this.state.term },
{ type: 'search', uri: 'search:all:' + encodedTerm },
'Search'
),
_react2.default.createElement(_Icon2.default, { type: 'fontawesome', name: 'angle-right' }),
@ -85873,6 +85884,7 @@ var Search = function (_React$Component) {
value: function renderAlbums(albums, spotify_search_enabled) {
var _this4 = this;
var encodedTerm = encodeURIComponent(this.state.term);
return _react2.default.createElement(
'div',
null,
@ -85881,7 +85893,7 @@ var Search = function (_React$Component) {
null,
_react2.default.createElement(
_URILink2.default,
{ type: 'search', uri: 'search:all:' + this.state.term },
{ type: 'search', uri: 'search:all:' + encodedTerm },
'Search '
),
_react2.default.createElement(_Icon2.default, { type: 'fontawesome', name: 'angle-right' }),
@ -85902,6 +85914,7 @@ var Search = function (_React$Component) {
value: function renderPlaylists(playlists, spotify_search_enabled) {
var _this5 = this;
var encodedTerm = encodeURIComponent(this.state.term);
return _react2.default.createElement(
'div',
null,
@ -85910,7 +85923,7 @@ var Search = function (_React$Component) {
null,
_react2.default.createElement(
_URILink2.default,
{ type: 'search', uri: 'search:all:' + this.state.term },
{ type: 'search', uri: 'search:all:' + encodedTerm },
'Search '
),
_react2.default.createElement(_Icon2.default, { type: 'fontawesome', name: 'angle-right' }),
@ -85931,6 +85944,7 @@ var Search = function (_React$Component) {
value: function renderTracks(tracks, spotify_search_enabled) {
var _this6 = this;
var encodedTerm = encodeURIComponent(this.state.term);
return _react2.default.createElement(
'div',
null,
@ -85939,7 +85953,7 @@ var Search = function (_React$Component) {
null,
_react2.default.createElement(
_URILink2.default,
{ type: 'search', uri: 'search:all:' + this.state.term },
{ type: 'search', uri: 'search:all:' + encodedTerm },
'Search '
),
_react2.default.createElement(_Icon2.default, { type: 'fontawesome', name: 'angle-right' }),
@ -85948,7 +85962,7 @@ var Search = function (_React$Component) {
_react2.default.createElement(
'section',
{ className: 'list-wrapper' },
_react2.default.createElement(_TrackList2.default, { tracks: tracks, uri: 'iris:search:' + this.state.type + ':' + this.state.term, show_source_icon: true }),
_react2.default.createElement(_TrackList2.default, { tracks: tracks, uri: 'iris:search:' + this.state.type + ':' + encodedTerm, show_source_icon: true }),
_react2.default.createElement(_LazyLoadListener2.default, { enabled: this.props.tracks_more && spotify_search_enabled, loadMore: function loadMore() {
return _this6.loadMore('tracks');
} })
@ -85960,6 +85974,7 @@ var Search = function (_React$Component) {
value: function renderAll(artists, albums, playlists, tracks, spotify_search_enabled) {
var _this7 = this;
var encodedTerm = encodeURIComponent(this.state.term);
if (artists.length > 0) {
var artists_section = _react2.default.createElement(
'section',
@ -85969,7 +85984,7 @@ var Search = function (_React$Component) {
{ className: 'inner' },
_react2.default.createElement(
_URILink2.default,
{ type: 'search', uri: 'search:artist:' + this.state.term },
{ type: 'search', uri: 'search:artist:' + encodedTerm },
_react2.default.createElement(
'h4',
null,
@ -85979,7 +85994,7 @@ var Search = function (_React$Component) {
_react2.default.createElement(_ArtistGrid2.default, { mini: true, show_source_icon: true, artists: artists.slice(0, 6) }),
artists.length >= 6 && _react2.default.createElement(
_URILink2.default,
{ type: 'search', uri: 'search:artist:' + this.state.term, className: 'button button--default' },
{ type: 'search', uri: 'search:artist:' + encodedTerm, className: 'button button--default' },
'All artists (' + artists.length + ')'
)
)
@ -85997,7 +86012,7 @@ var Search = function (_React$Component) {
{ className: 'inner' },
_react2.default.createElement(
_URILink2.default,
{ type: 'search', uri: 'search:album:' + this.state.term },
{ type: 'search', uri: 'search:album:' + encodedTerm },
_react2.default.createElement(
'h4',
null,
@ -86007,7 +86022,7 @@ var Search = function (_React$Component) {
_react2.default.createElement(_AlbumGrid2.default, { mini: true, show_source_icon: true, albums: albums.slice(0, 6) }),
albums.length >= 6 && _react2.default.createElement(
_URILink2.default,
{ type: 'search', uri: 'search:album:' + this.state.term, className: 'button button--default' },
{ type: 'search', uri: 'search:album:' + encodedTerm, className: 'button button--default' },
'All albums (' + albums.length + ')'
)
)
@ -86025,7 +86040,7 @@ var Search = function (_React$Component) {
{ className: 'inner' },
_react2.default.createElement(
_URILink2.default,
{ type: 'search', uri: 'search:playlist:' + this.state.term },
{ type: 'search', uri: 'search:playlist:' + encodedTerm },
_react2.default.createElement(
'h4',
null,
@ -86035,7 +86050,7 @@ var Search = function (_React$Component) {
_react2.default.createElement(_PlaylistGrid2.default, { mini: true, show_source_icon: true, playlists: playlists.slice(0, 6) }),
playlists.length >= 6 && _react2.default.createElement(
_URILink2.default,
{ type: 'search', uri: 'search:playlist:' + this.state.term, className: 'button button--default' },
{ type: 'search', uri: 'search:playlist:' + encodedTerm, className: 'button button--default' },
'All playlists (' + playlists.length + ')'
)
)
@ -86048,7 +86063,7 @@ var Search = function (_React$Component) {
var tracks_section = _react2.default.createElement(
'section',
{ className: 'list-wrapper' },
_react2.default.createElement(_TrackList2.default, { tracks: tracks, uri: 'iris:search:' + this.state.type + ':' + this.state.term, show_source_icon: true }),
_react2.default.createElement(_TrackList2.default, { tracks: tracks, uri: 'iris:search:' + this.state.type + ':' + encodedTerm, show_source_icon: true }),
_react2.default.createElement(_LazyLoadListener2.default, { loading: this.props.tracks_more && spotify_search_enabled, loadMore: function loadMore() {
return _this7.loadMore('tracks');
} })

2
mopidy_iris/static/app.js.map
View File

File diff suppressed because one or more lines are too long

2
mopidy_iris/static/index.html
View File

@ -100,7 +100,7 @@
// Release details
// These are automatically injected to built HTML
var build = "1571179235";
var build = "1571272162";
var version = "3.41.2";
// Construct the script tag

8
src/js/components/Fields/SearchForm.js
View File

@ -5,7 +5,7 @@ import { bindActionCreators } from 'redux';
import * as helpers from '../../helpers';
import * as uiActions from '../../services/ui/actions';
class SearchForm extends React.Component {
class SearchForm extends React.Component {
constructor(props) {
super(props);
@ -36,7 +36,7 @@ class SearchForm extends React.Component {
e.preventDefault();
// check for uri type matching
switch (helpers.uriType(this.state.term)) {
switch (helpers.uriType(this.state.term)) {
case 'album':
this.props.history.push(`/album/${encodeURIComponent(this.state.term)}`);
break;
@ -71,7 +71,7 @@ class SearchForm extends React.Component {
onChange={(e) => this.setState({ term: e.target.value, pristine: false })}
onBlur={(e) => this.handleBlur}
onFocus={(e) => this.handleFocus}
value={this.state.term}
value={this.state.term}
/>
</label>
</form>
@ -83,4 +83,4 @@ const mapDispatchToProps = (dispatch) => ({
uiActions: bindActionCreators(uiActions, dispatch),
});
export default connect(mapDispatchToProps)(SearchForm);
export default connect(mapDispatchToProps)(SearchForm);

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

@ -44,9 +44,13 @@ class Search extends React.Component {
}
componentWillReceiveProps(nextProps) {
// Query changed
if (nextProps.term !== this.props.term || nextProps.type !== this.props.type) {
this.digestUri(nextProps);
const { type, term } = this.props;
const { type: nextType, term: nextTerm } = nextProps;
if (nextType !== type || nextTerm !== term) {
this.digestUri({
type: nextType,
term: nextTerm,
});
}
// Services came online
@ -60,6 +64,8 @@ class Search extends React.Component {
}
handleSubmit(term) {
const encodedTerm = encodeURIComponent(term);
this.setState(
{ term }, () => {
// Unchanged term, so this is a forced re-search
@ -68,7 +74,7 @@ class Search extends React.Component {
if (this.props.term == term) {
this.search();
} else {
this.props.history.push(`/search/${this.state.type}/${term}`);
this.props.history.push(`/search/${this.state.type}/${encodedTerm}`);
}
},
);
@ -132,10 +138,11 @@ class Search extends React.Component {
}
renderArtists(artists, spotify_search_enabled) {
const encodedTerm = encodeURIComponent(this.state.term);
return (
<div>
<h4>
<URILink type="search" uri={`search:all:${this.state.term}`}>
<URILink type="search" uri={`search:all:${encodedTerm}`}>
Search
</URILink>
<Icon type="fontawesome" name="angle-right" />
@ -150,10 +157,11 @@ class Search extends React.Component {
}
renderAlbums(albums, spotify_search_enabled) {
const encodedTerm = encodeURIComponent(this.state.term);
return (
<div>
<h4>
<URILink type="search" uri={`search:all:${this.state.term}`}>
<URILink type="search" uri={`search:all:${encodedTerm}`}>
{`Search `}
</URILink>
<Icon type="fontawesome" name="angle-right" />
@ -168,10 +176,11 @@ class Search extends React.Component {
}
renderPlaylists(playlists, spotify_search_enabled) {
const encodedTerm = encodeURIComponent(this.state.term);
return (
<div>
<h4>
<URILink type="search" uri={`search:all:${this.state.term}`}>
<URILink type="search" uri={`search:all:${encodedTerm}`}>
{`Search `}
</URILink>
<Icon type="fontawesome" name="angle-right" />
@ -186,17 +195,18 @@ class Search extends React.Component {
}
renderTracks(tracks, spotify_search_enabled) {
const encodedTerm = encodeURIComponent(this.state.term);
return (
<div>
<h4>
<URILink type="search" uri={`search:all:${this.state.term}`}>
<URILink type="search" uri={`search:all:${encodedTerm}`}>
{`Search `}
</URILink>
<Icon type="fontawesome" name="angle-right" />
{` Tracks`}
</h4>
<section className="list-wrapper">
<TrackList tracks={tracks} uri={`iris:search:${this.state.type}:${this.state.term}`} show_source_icon />
<TrackList tracks={tracks} uri={`iris:search:${this.state.type}:${encodedTerm}`} show_source_icon />
<LazyLoadListener enabled={this.props.tracks_more && spotify_search_enabled} loadMore={() => this.loadMore('tracks')} />
</section>
</div>
@ -204,16 +214,17 @@ class Search extends React.Component {
}
renderAll(artists, albums, playlists, tracks, spotify_search_enabled) {
const encodedTerm = encodeURIComponent(this.state.term);
if (artists.length > 0) {
var artists_section = (
<section>
<div className="inner">
<URILink type="search" uri={`search:artist:${this.state.term}`}>
<URILink type="search" uri={`search:artist:${encodedTerm}`}>
<h4>Artists</h4>
</URILink>
<ArtistGrid mini show_source_icon artists={artists.slice(0, 6)} />
{artists.length >= 6 && (
<URILink type="search" uri={`search:artist:${this.state.term}`} className="button button--default">
<URILink type="search" uri={`search:artist:${encodedTerm}`} className="button button--default">
{`All artists (${artists.length})`}
</URILink>
)}
@ -228,12 +239,12 @@ class Search extends React.Component {
var albums_section = (
<section>
<div className="inner">
<URILink type="search" uri={`search:album:${this.state.term}`}>
<URILink type="search" uri={`search:album:${encodedTerm}`}>
<h4>Albums</h4>
</URILink>
<AlbumGrid mini show_source_icon albums={albums.slice(0, 6)} />
{albums.length >= 6 && (
<URILink type="search" uri={`search:album:${this.state.term}`} className="button button--default">
<URILink type="search" uri={`search:album:${encodedTerm}`} className="button button--default">
{`All albums (${albums.length})`}
</URILink>
)}
@ -248,12 +259,12 @@ class Search extends React.Component {
var playlists_section = (
<section>
<div className="inner">
<URILink type="search" uri={`search:playlist:${this.state.term}`}>
<URILink type="search" uri={`search:playlist:${encodedTerm}`}>
<h4>Playlists</h4>
</URILink>
<PlaylistGrid mini show_source_icon playlists={playlists.slice(0, 6)} />
{playlists.length >= 6 && (
<URILink type="search" uri={`search:playlist:${this.state.term}`} className="button button--default">
<URILink type="search" uri={`search:playlist:${encodedTerm}`} className="button button--default">
{`All playlists (${playlists.length})`}
</URILink>
)}
@ -267,7 +278,7 @@ class Search extends React.Component {
if (tracks.length > 0) {
var tracks_section = (
<section className="list-wrapper">
<TrackList tracks={tracks} uri={`iris:search:${this.state.type}:${this.state.term}`} show_source_icon />
<TrackList tracks={tracks} uri={`iris:search:${this.state.type}:${encodedTerm}`} show_source_icon />
<LazyLoadListener loading={this.props.tracks_more && spotify_search_enabled} loadMore={() => this.loadMore('tracks')} />
</section>
);