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

Retaining search results by using URL params and keep results query

Browse Source
This commit is contained in:
James Barnsley
2019-06-10 13:49:57 +12:00
parent 4a303917ef
commit bd811ff007
11 changed files with 124 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
mopidy_iris/static/app.css
View File

@ -2794,7 +2794,8 @@ h1 {
color: #FFFFFF;
font-weight: 700;
font-size: 3.4rem;
line-height: 3.4rem; }
line-height: 3.4rem;
letter-spacing: -0.15rem; }
.light-theme h1 {
color: #383734; }
@ -2803,7 +2804,8 @@ h2 {
font-weight: 600;
font-weight: 400;
font-size: 2rem;
line-height: 2.2rem; }
line-height: 2.2rem;
letter-spacing: -0.15rem; }
h2 a {
color: inherit;
text-decoration: none; }
@ -6874,10 +6876,11 @@ main .track-view {
background: transparent;
border-bottom: 2px solid #383734;
border-radius: 0;
letter-spacing: -0.15rem;
/* handle Safari's ridiculous non-vertical centering */ }
.search-view .search-form input:not(:root:root) {
height: 4rem;
margin-top: -1rem; }
height: 4.6rem;
margin-top: -0.5rem; }
.search-view .search-form input:focus, .search-view .search-form input:active {
border-color: #08d58f;
background: transparent; }

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

File diff suppressed because one or more lines are too long

91
mopidy_iris/static/app.js
View File

@ -70524,6 +70524,7 @@ var MopidyMiddleware = function () {
// and plug in their URIs
store.dispatch({
type: 'MOPIDY_SEARCH_RESULTS_LOADED',
query: action.data.query,
context: action.data.context,
results: albums_uris
});
@ -70593,6 +70594,7 @@ var MopidyMiddleware = function () {
// and plug in their URIs
store.dispatch({
type: 'MOPIDY_SEARCH_RESULTS_LOADED',
query: action.data.query,
context: action.data.context,
results: artists_uris
});
@ -70640,6 +70642,7 @@ var MopidyMiddleware = function () {
// and plug in their URIs
store.dispatch({
type: 'MOPIDY_SEARCH_RESULTS_LOADED',
query: action.data.query,
context: action.data.context,
results: playlists_uris
});
@ -70679,6 +70682,7 @@ var MopidyMiddleware = function () {
store.dispatch({
type: 'MOPIDY_SEARCH_RESULTS_LOADED',
query: action.data.query,
context: action.data.context,
results: helpers.formatTracks(tracks)
});
@ -70713,6 +70717,7 @@ var MopidyMiddleware = function () {
store.dispatch({
type: 'MOPIDY_SEARCH_RESULTS_LOADED',
query: action.data.query,
context: 'tracks',
results: helpers.formatTracks(tracks)
});
@ -70763,6 +70768,7 @@ var MopidyMiddleware = function () {
// and plug in their URIs
store.dispatch({
type: 'MOPIDY_SEARCH_RESULTS_LOADED',
query: action.data.query,
context: 'albums',
results: albums_uris
});
@ -70822,6 +70828,7 @@ var MopidyMiddleware = function () {
// and plug in their URIs
store.dispatch({
type: 'MOPIDY_SEARCH_RESULTS_LOADED',
query: action.data.query,
context: 'artists',
results: artists_uris
});
@ -70867,6 +70874,7 @@ var MopidyMiddleware = function () {
// and plug in their URIs
store.dispatch({
type: 'MOPIDY_SEARCH_RESULTS_LOADED',
query: action.data.query,
context: 'playlists',
results: playlists_uris
});
@ -72008,6 +72016,8 @@ function reducer() {
var search_results = {};
}
search_results.query = action.query;
if (search_results[action.context]) {
search_results[action.context] = [].concat(_toConsumableArray(search_results[action.context]), _toConsumableArray(action.results));
} else {
@ -74442,6 +74452,7 @@ function getSearchResults(type, query) {
dispatch({
type: 'SPOTIFY_SEARCH_RESULTS_LOADED',
context: 'tracks',
query: query,
results: helpers.formatTracks(response.tracks.items),
more: response.tracks.next
});
@ -74455,6 +74466,7 @@ function getSearchResults(type, query) {
dispatch({
type: 'SPOTIFY_SEARCH_RESULTS_LOADED',
context: 'artists',
query: query,
results: helpers.arrayOf('uri', response.artists.items),
more: response.artists.next
});
@ -74468,6 +74480,7 @@ function getSearchResults(type, query) {
dispatch({
type: 'SPOTIFY_SEARCH_RESULTS_LOADED',
context: 'albums',
query: query,
results: helpers.arrayOf('uri', response.albums.items),
more: response.albums.next
});
@ -74511,6 +74524,7 @@ function getSearchResults(type, query) {
dispatch({
type: 'SPOTIFY_SEARCH_RESULTS_LOADED',
context: 'playlists',
query: query,
results: helpers.arrayOf('uri', playlists),
more: response.playlists.next
});
@ -76549,6 +76563,8 @@ function reducer() {
var search_results = {};
}
search_results.query = action.query;
if (search_results.results) {
search_results[action.context] = [].concat(_toConsumableArray(search_results[action.context]), _toConsumableArray(action.results));
} else {
@ -80482,12 +80498,6 @@ var Search = function (_React$Component) {
// This would be the case when we've clicked from a link elsewhere
this.digestUri();
}
}, {
key: 'componentWillUnmount',
value: function componentWillUnmount() {
//this.props.mopidyActions.clearSearchResults();
//this.props.spotifyActions.clearSearchResults();
}
}, {
key: 'componentWillReceiveProps',
value: function componentWillReceiveProps(nextProps) {
@ -80506,6 +80516,22 @@ var Search = function (_React$Component) {
}
}
}
}, {
key: 'handleSubmit',
value: function handleSubmit(term) {
var _this2 = this;
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
// push a URL change when the term hasn't changed
if (_this2.props.term == term) {
_this2.search();
} else {
_this2.props.history.push('/search/' + _this2.state.type + '/' + term);
}
});
}
// Digest the URI query property
// Triggered when the URL changes
@ -80522,6 +80548,9 @@ var Search = function (_React$Component) {
});
this.search(props.type, props.term);
} else if (!props.term || props.term == '') {
this.props.spotifyActions.clearSearchResults();
this.props.mopidyActions.clearSearchResults();
}
}
}, {
@ -80536,15 +80565,18 @@ var Search = function (_React$Component) {
if (type && term) {
this.props.mopidyActions.clearSearchResults();
this.props.spotifyActions.clearSearchResults();
if (provider == 'mopidy' || this.props.mopidy_connected && this.props.uri_schemes_search_enabled) {
this.props.mopidyActions.getSearchResults(type, term);
if (this.props.mopidy_search_results.query === undefined || this.props.mopidy_search_results.query != term) {
this.props.mopidyActions.clearSearchResults();
this.props.mopidyActions.getSearchResults(type, term);
}
}
if (provider == 'spotify' || this.props.mopidy_connected && this.props.uri_schemes_search_enabled && this.props.uri_schemes_search_enabled.includes('spotify:')) {
this.props.spotifyActions.getSearchResults(type, term);
if (this.props.spotify_search_results.query === undefined || this.props.spotify_search_results.query != term) {
this.props.spotifyActions.clearSearchResults();
this.props.spotifyActions.getSearchResults(type, term);
}
}
}
}
@ -80569,7 +80601,7 @@ var Search = function (_React$Component) {
}, {
key: 'renderArtists',
value: function renderArtists(artists, spotify_search_enabled) {
var _this2 = this;
var _this3 = this;
return _react2.default.createElement(
'div',
@ -80591,7 +80623,7 @@ var Search = function (_React$Component) {
{ className: 'grid-wrapper' },
_react2.default.createElement(_ArtistGrid2.default, { artists: artists, show_source_icon: true }),
_react2.default.createElement(_LazyLoadListener2.default, { enabled: this.props['artists_more'] && spotify_search_enabled, loadMore: function loadMore() {
return _this2.loadMore('artists');
return _this3.loadMore('artists');
} })
)
);
@ -80599,7 +80631,7 @@ var Search = function (_React$Component) {
}, {
key: 'renderAlbums',
value: function renderAlbums(albums, spotify_search_enabled) {
var _this3 = this;
var _this4 = this;
return _react2.default.createElement(
'div',
@ -80621,7 +80653,7 @@ var Search = function (_React$Component) {
{ className: 'grid-wrapper' },
_react2.default.createElement(_AlbumGrid2.default, { albums: albums, show_source_icon: true }),
_react2.default.createElement(_LazyLoadListener2.default, { enabled: this.props['albums_more'] && spotify_search_enabled, loadMore: function loadMore() {
return _this3.loadMore('albums');
return _this4.loadMore('albums');
} })
)
);
@ -80629,7 +80661,7 @@ var Search = function (_React$Component) {
}, {
key: 'renderPlaylists',
value: function renderPlaylists(playlists, spotify_search_enabled) {
var _this4 = this;
var _this5 = this;
return _react2.default.createElement(
'div',
@ -80651,7 +80683,7 @@ var Search = function (_React$Component) {
{ className: 'grid-wrapper' },
_react2.default.createElement(_PlaylistGrid2.default, { playlists: playlists, show_source_icon: true }),
_react2.default.createElement(_LazyLoadListener2.default, { enabled: this.props['playlists_more'] && spotify_search_enabled, loadMore: function loadMore() {
return _this4.loadMore('playlists');
return _this5.loadMore('playlists');
} })
)
);
@ -80659,7 +80691,7 @@ var Search = function (_React$Component) {
}, {
key: 'renderTracks',
value: function renderTracks(tracks, spotify_search_enabled) {
var _this5 = this;
var _this6 = this;
return _react2.default.createElement(
'div',
@ -80681,7 +80713,7 @@ var Search = function (_React$Component) {
{ 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(_LazyLoadListener2.default, { enabled: this.props['tracks_more'] && spotify_search_enabled, loadMore: function loadMore() {
return _this5.loadMore('tracks');
return _this6.loadMore('tracks');
} })
)
);
@ -80689,7 +80721,7 @@ var Search = function (_React$Component) {
}, {
key: 'renderAll',
value: function renderAll(artists, albums, playlists, tracks, spotify_search_enabled) {
var _this6 = this;
var _this7 = this;
if (artists.length > 0) {
var artists_section = _react2.default.createElement(
@ -80787,7 +80819,7 @@ var Search = function (_React$Component) {
{ 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(_LazyLoadListener2.default, { loading: this.props['tracks_more'] && spotify_search_enabled, loadMore: function loadMore() {
return _this6.loadMore('tracks');
return _this7.loadMore('tracks');
} })
);
} else {
@ -80810,7 +80842,7 @@ var Search = function (_React$Component) {
}, {
key: 'render',
value: function render() {
var _this7 = this;
var _this8 = this;
var sort_options = [{
value: 'followers',
@ -80901,7 +80933,7 @@ var Search = function (_React$Component) {
options: sort_options,
selected_icon: this.props.sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down',
handleChange: function handleChange(value) {
_this7.setSort(value);_this7.props.uiActions.hideContextMenu();
_this8.setSort(value);_this8.props.uiActions.hideContextMenu();
}
}),
_react2.default.createElement(_DropdownField2.default, {
@ -80910,7 +80942,7 @@ var Search = function (_React$Component) {
value: this.props.uri_schemes_search_enabled,
options: provider_options,
handleChange: function handleChange(value) {
_this7.props.uiActions.set({ uri_schemes_search_enabled: value });_this7.props.uiActions.hideContextMenu();
_this8.props.uiActions.set({ uri_schemes_search_enabled: value });_this8.props.uiActions.hideContextMenu();
}
})
);
@ -80925,14 +80957,11 @@ var Search = function (_React$Component) {
),
_react2.default.createElement(_SearchForm2.default, {
history: this.props.history,
term: this.state.term,
onBlur: function onBlur(term) {
return _this7.setState({ term: term });
},
onSubmit: function onSubmit(term) {
return _this7.props.history.push('/search/' + _this7.state.type + '/' + term);
term: this.state.term
//onBlur={term => this.setState({term: term})}
, onSubmit: function onSubmit(term) {
return _this8.handleSubmit(term);
}
//onSubmit={term => this.search(this.state.type, term)}
}),
_react2.default.createElement(
'div',

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

File diff suppressed because one or more lines are too long

10
src/js/services/mopidy/middleware.js
View File

@ -1020,7 +1020,7 @@ const MopidyMiddleware = (function(){
{
remaining: action.data.uri_schemes.length
}
))
));
switch (action.data.context){
@ -1080,6 +1080,7 @@ const MopidyMiddleware = (function(){
// and plug in their URIs
store.dispatch({
type: 'MOPIDY_SEARCH_RESULTS_LOADED',
query: action.data.query,
context: action.data.context,
results: albums_uris
})
@ -1162,6 +1163,7 @@ const MopidyMiddleware = (function(){
// and plug in their URIs
store.dispatch({
type: 'MOPIDY_SEARCH_RESULTS_LOADED',
query: action.data.query,
context: action.data.context,
results: artists_uris
})
@ -1219,6 +1221,7 @@ const MopidyMiddleware = (function(){
// and plug in their URIs
store.dispatch({
type: 'MOPIDY_SEARCH_RESULTS_LOADED',
query: action.data.query,
context: action.data.context,
results: playlists_uris
})
@ -1271,6 +1274,7 @@ const MopidyMiddleware = (function(){
store.dispatch({
type: 'MOPIDY_SEARCH_RESULTS_LOADED',
query: action.data.query,
context: action.data.context,
results: helpers.formatTracks(tracks)
});
@ -1316,6 +1320,7 @@ const MopidyMiddleware = (function(){
store.dispatch({
type: 'MOPIDY_SEARCH_RESULTS_LOADED',
query: action.data.query,
context: 'tracks',
results: helpers.formatTracks(tracks)
});
@ -1377,6 +1382,7 @@ const MopidyMiddleware = (function(){
// and plug in their URIs
store.dispatch({
type: 'MOPIDY_SEARCH_RESULTS_LOADED',
query: action.data.query,
context: 'albums',
results: albums_uris
})
@ -1447,6 +1453,7 @@ const MopidyMiddleware = (function(){
// and plug in their URIs
store.dispatch({
type: 'MOPIDY_SEARCH_RESULTS_LOADED',
query: action.data.query,
context: 'artists',
results: artists_uris
})
@ -1503,6 +1510,7 @@ const MopidyMiddleware = (function(){
// and plug in their URIs
store.dispatch({
type: 'MOPIDY_SEARCH_RESULTS_LOADED',
query: action.data.query,
context: 'playlists',
results: playlists_uris
})

10
src/js/services/mopidy/reducer.js
View File

@ -193,15 +193,17 @@ export default function reducer(mopidy = {}, action){
// Fetch or create our container
if (mopidy.search_results){
var search_results = Object.assign({}, mopidy.search_results)
var search_results = Object.assign({}, mopidy.search_results);
} else {
var search_results = {}
var search_results = {};
}
search_results.query = action.query;
if (search_results[action.context]){
search_results[action.context] = [...search_results[action.context], ...action.results]
search_results[action.context] = [...search_results[action.context], ...action.results];
} else {
search_results[action.context] = action.results
search_results[action.context] = action.results;
}
return Object.assign({}, mopidy, { search_results: search_results });

4
src/js/services/spotify/actions.js
View File

@ -581,6 +581,7 @@ export function getSearchResults(type, query, limit = 50, offset = 0){
dispatch({
type: 'SPOTIFY_SEARCH_RESULTS_LOADED',
context: 'tracks',
query: query,
results: helpers.formatTracks(response.tracks.items),
more: response.tracks.next,
});
@ -594,6 +595,7 @@ export function getSearchResults(type, query, limit = 50, offset = 0){
dispatch({
type: 'SPOTIFY_SEARCH_RESULTS_LOADED',
context: 'artists',
query: query,
results: helpers.arrayOf('uri',response.artists.items),
more: response.artists.next,
});
@ -607,6 +609,7 @@ export function getSearchResults(type, query, limit = 50, offset = 0){
dispatch({
type: 'SPOTIFY_SEARCH_RESULTS_LOADED',
context: 'albums',
query: query,
results: helpers.arrayOf('uri',response.albums.items),
more: response.albums.next,
});
@ -632,6 +635,7 @@ export function getSearchResults(type, query, limit = 50, offset = 0){
dispatch({
type: 'SPOTIFY_SEARCH_RESULTS_LOADED',
context: 'playlists',
query: query,
results: helpers.arrayOf('uri',playlists),
more: response.playlists.next
});

2
src/js/services/spotify/reducer.js
View File

@ -334,6 +334,8 @@ export default function reducer(spotify = {}, action){
var search_results = {}
}
search_results.query = action.query;
if (search_results.results){
search_results[action.context] = [...search_results[action.context], ...action.results]
} else {

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

@ -44,11 +44,6 @@ class Search extends React.Component{
this.digestUri();
}
componentWillUnmount(){
//this.props.mopidyActions.clearSearchResults();
//this.props.spotifyActions.clearSearchResults();
}
componentWillReceiveProps(nextProps){
// Query changed
@ -66,6 +61,22 @@ class Search extends React.Component{
}
}
handleSubmit(term){
this.setState(
{term: term}, () =>
{
// Unchanged term, so this is a forced re-search
// Often the other search parameters have changed instead, but we can't
// push a URL change when the term hasn't changed
if (this.props.term == term){
this.search();
} else {
this.props.history.push(`/search/${this.state.type}/${term}`);
}
}
);
}
// Digest the URI query property
// Triggered when the URL changes
digestUri(props = this.props){
@ -76,6 +87,9 @@ class Search extends React.Component{
});
this.search(props.type, props.term);
} else if (!props.term || props.term == ''){
this.props.spotifyActions.clearSearchResults();
this.props.mopidyActions.clearSearchResults();
}
}
@ -85,15 +99,18 @@ class Search extends React.Component{
if (type && term){
this.props.mopidyActions.clearSearchResults();
this.props.spotifyActions.clearSearchResults();
if (provider == 'mopidy' || (this.props.mopidy_connected && this.props.uri_schemes_search_enabled)){
this.props.mopidyActions.getSearchResults(type, term)
if (this.props.mopidy_search_results.query === undefined || this.props.mopidy_search_results.query != term){
this.props.mopidyActions.clearSearchResults();
this.props.mopidyActions.getSearchResults(type, term);
}
}
if (provider == 'spotify' || (this.props.mopidy_connected && this.props.uri_schemes_search_enabled && this.props.uri_schemes_search_enabled.includes('spotify:'))){
this.props.spotifyActions.getSearchResults(type, term)
if (this.props.spotify_search_results.query === undefined || this.props.spotify_search_results.query != term){
this.props.spotifyActions.clearSearchResults();
this.props.spotifyActions.getSearchResults(type, term);
}
}
}
}
@ -379,9 +396,8 @@ class Search extends React.Component{
<SearchForm
history={this.props.history}
term={this.state.term}
onBlur={term => this.setState({term: term})}
onSubmit={term => this.props.history.push(`/search/${this.state.type}/${term}`)}
//onSubmit={term => this.search(this.state.type, term)}
//onBlur={term => this.setState({term: term})}
onSubmit={term => this.handleSubmit(term)}
/>
<div className="content-wrapper">

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

@ -189,6 +189,7 @@ h1 {
font-weight: 700;
font-size: 3.4rem;
line-height: 3.4rem;
letter-spacing: -0.15rem;
.light-theme & {
color: colour(grey);
@ -200,6 +201,7 @@ h2 {
font-weight: 400;
font-size: 2rem;
line-height: 2.2rem;
letter-spacing: -0.15rem;
a {
color: inherit;

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

@ -17,11 +17,12 @@
background: transparent;
border-bottom: 2px solid colour(grey);
border-radius: 0;
letter-spacing: -0.15rem;
/* handle Safari's ridiculous non-vertical centering */
&:not(:root:root){
height: 4rem;
margin-top: -1rem;
height: 4.6rem;
margin-top: -0.5rem;
}
&:focus,