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

Merging search engine functionality revamp

Browse Source
This commit is contained in:
James Barnsley
2017-03-26 09:16:28 +13:00
parent fd916bac24 d4ff061e01
commit 447513197d
17 changed files with 409 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/js/components/ArtistGrid.js
View File

@ -43,7 +43,8 @@ class ArtistGrid extends React.Component{
<Thumbnail size="medium" images={artist.images} />
<div className="name">{ artist.name }</div>
<div className="secondary">
{artist.followers ? artist.followers.total.toLocaleString()+' followers' : <span>0 followers</span>}
{artist.followers ? artist.followers.total.toLocaleString()+' followers' : null}
{artist.albums_uris ? artist.albums_uris.length+' albums' : null}
</div>
</Link>
)

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

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

8
src/js/components/GridItem.js
View File

@ -38,6 +38,14 @@ export default class GridItem extends React.Component{
)
break
case 'artist':
return (
<span>
{ item.followers ? item.followers.total.toLocaleString()+' followers' : item.albums_uris.length+' albums' }
</span>
)
break
default:
return (
<span>

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,

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

@ -0,0 +1,92 @@
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">Search sourced</h4>
<h3 className="grey-text bottom-padding">Customise the providers used when searching. Reduce the number of providers to speed up your searches. Please note that not all backends support searching by artist, album or playlist.</h3>
<form onSubmit={e => this.handleSubmit(e)}>
<div className="list small">
<div className="list-item 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="list-item 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>
<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)

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

@ -8,16 +8,16 @@ import FontAwesome from 'react-fontawesome'
class URISchemesList extends React.Component{
constructor(props) {
super(props);
super(props)
}
render(){
if( !this.props.mopidy.uri_schemes ) return null;
if( !this.props.uri_schemes ) return null;
return (
<div className="uri-schemes-list">
{
this.props.mopidy.uri_schemes.map( (scheme, index) => {
this.props.uri_schemes.map( (scheme, index) => {
scheme = scheme.replace(':','')
return (
<span key={index+'_'+scheme}>
@ -26,7 +26,7 @@ class URISchemesList extends React.Component{
{ scheme }
</span>
</span>
);
)
})
}
</div>
@ -35,7 +35,9 @@ class URISchemesList extends React.Component{
}
const mapStateToProps = (state, ownProps) => {
return state;
return {
uri_schemes: (state.mopidy.uri_schemes ? state.mopidy.uri_schemes : [])
}
}
export default connect(mapStateToProps)(URISchemesList)

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/: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} />

44
src/js/services/mopidy/actions.js
View File

@ -214,18 +214,50 @@ export function getLibraryAlbums(){
/**
* Other general actions
* Searching
**/
export function getSearchResults(query, uris = null, fields = ['any']){
export function getTrackSearchResults(query, limit = 100, uri_scheme){
return {
type: 'MOPIDY_GET_SEARCH_RESULTS',
query: query,
uris: uris,
fields: fields
type: 'MOPIDY_GET_TRACK_SEARCH_RESULTS',
query: query,
limit: limit,
uri_scheme: uri_scheme
}
}
export function getArtistSearchResults(query, limit = 100, uri_scheme){
return {
type: 'MOPIDY_GET_ARTIST_SEARCH_RESULTS',
query: query,
limit: limit,
uri_scheme: uri_scheme
}
}
export function getAlbumSearchResults(query, limit = 100, uri_scheme){
return {
type: 'MOPIDY_GET_ALBUM_SEARCH_RESULTS',
query: query,
limit: limit,
uri_scheme: uri_scheme
}
}
export function getPlaylistSearchResults(query, limit = 100, uri_scheme){
return {
type: 'MOPIDY_GET_PLAYLIST_SEARCH_RESULTS',
query: query,
limit: limit,
uri_scheme: uri_scheme
}
}
/**
* Other general actions
**/
export function getQueueHistory(){
return {
type: 'MOPIDY_INSTRUCT',

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

@ -306,25 +306,112 @@ const MopidyMiddleware = (function(){
})
break;
case 'MOPIDY_GET_SEARCH_RESULTS':
var queryObject = {};
for( var i = 0; i < action.fields.length; i++ ){
queryObject[action.fields[i]] = [action.query];
}
instruct( socket, store, 'library.search', {query: queryObject, uris: action.uris})
.then( response => {
/**
* =============================================================== SEARCHING ============
* ======================================================================================
**/
// collate all our different sources into one array
var tracks = []
for( var i = 0; i < response.length; i++ ){
if( response[i].tracks ) tracks = [...tracks, ...response[i].tracks]
}
case 'MOPIDY_GET_TRACK_SEARCH_RESULTS':
instruct( socket, store, 'library.search', {query: {any: [action.query]}, uris: [action.uri_scheme]})
.then( response => {
if (response.length <= 0) return
var tracks = response[0].tracks.splice(0,action.limit)
store.dispatch({ type: 'SEARCH_RESULTS_LOADED', tracks: tracks });
})
break;
case 'MOPIDY_GET_ARTIST_SEARCH_RESULTS':
instruct( socket, store, 'library.search', {query: {artist: [action.query]}, uris: [action.uri_scheme]})
.then( response => {
if (response.length <= 0) return
var artists_uris = []
if (response[0].tracks){
for (var i = 0; i < response[0].tracks.length; i++){
if (response[0].tracks[i].artists){
for (var j = 0; j < response[0].tracks[i].artists.length; j++){
var artist = response[0].tracks[i].artists[j]
if (artist.uri){
artists_uris.push(artist.uri)
}
}
}
}
}
// TODO: limit uris at the loop, rather than post loop for performance
artists_uris = helpers.removeDuplicates(artists_uris).splice(0, action.limit)
// load each artist
for (var i = 0; i < artists_uris.length; i++){
store.dispatch(mopidyActions.getArtist(artists_uris[i]))
}
// and plug in their URIs
store.dispatch({ type: 'SEARCH_RESULTS_LOADED', artists_uris: artists_uris })
})
break;
case 'MOPIDY_GET_ALBUM_SEARCH_RESULTS':
instruct( socket, store, 'library.search', {query: {album: [action.query]}, uris: [action.uri_scheme]})
.then( response => {
if (response.length <= 0) return
// collate all our different sources into one array
var albums_uris = []
if (response[0].tracks){
for (var i = 0; i < response[0].tracks.length; i++){
if (response[0].tracks[i].album){
var album = response[0].tracks[i].album
if (album.uri){
albums_uris.push(album.uri)
}
}
}
}
// TODO: limit uris at the loop, rather than post loop for performance
albums_uris = helpers.removeDuplicates(albums_uris).splice(0, action.limit)
// load each album
for (var i = 0; i < albums_uris.length; i++){
store.dispatch(mopidyActions.getAlbum(albums_uris[i]))
}
// and plug in their URIs
store.dispatch({ type: 'SEARCH_RESULTS_LOADED', albums_uris: albums_uris })
})
break;
case 'MOPIDY_GET_PLAYLIST_SEARCH_RESULTS':
instruct( socket, store, 'playlists.asList')
.then( response => {
if (response.length <= 0) return
var playlists_uris = []
for (var i = 0; i < response.length; i++){
var playlist = response[i]
if (playlist.name.includes(action.query) && action.uri_scheme == helpers.uriSource(playlist.uri)+':'){
playlists_uris.push(playlist.uri)
}
}
playlists_uris = playlists_uris.splice(0, action.limit)
// load each playlist
for (var i = 0; i < playlists_uris.length; i++){
store.dispatch(mopidyActions.getPlaylist(playlists_uris[i]))
}
// and plug in their URIs
store.dispatch({ type: 'SEARCH_RESULTS_LOADED', playlists_uris: playlists_uris })
})
break;
/**
* =============================================================== PLAYLIST(S) ==========
@ -571,6 +658,7 @@ const MopidyMiddleware = (function(){
case 'MOPIDY_GET_LIBRARY_ALBUMS':
instruct( socket, store, 'library.browse', { uri: 'local:directory?type=album' } )
.then( response => {
if (response.length <= 0) return
var uris = helpers.asURIs(response)
@ -589,6 +677,7 @@ const MopidyMiddleware = (function(){
case 'MOPIDY_GET_ALBUMS':
instruct( socket, store, 'library.lookup', { uris: action.uris } )
.then( response => {
if (response.length <= 0) return
var albums = []
@ -618,6 +707,8 @@ const MopidyMiddleware = (function(){
case 'MOPIDY_GET_ALBUM':
instruct( socket, store, 'library.lookup', action.data )
.then( response => {
if (response.length <= 0) return
var album = Object.assign(
{},
{ images: [] },
@ -700,6 +791,7 @@ const MopidyMiddleware = (function(){
case 'MOPIDY_GET_ARTIST':
instruct( socket, store, 'library.lookup', action.data )
.then( response => {
if (response.length <= 0) return
var albums = []
for( var i = 0; i < response.length; i++ ){
@ -734,7 +826,7 @@ const MopidyMiddleware = (function(){
type: 'ARTIST_LOADED',
key: artist.uri,
artist: artist
});
})
// load artwork from LastFM
if( !artist.images || artist.images.length <= 0 ){

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
}
}

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

@ -112,7 +112,73 @@ 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()
if (state.ui.search_settings){
var uri_schemes = state.ui.search_settings.uri_schemes
} else {
var uri_schemes = state.mopidy.uri_schemes
}
// backends that can handle more than just track results
// make sure they are available and respect our settings
var available_full_uri_schemes = ['local:','file:','gmusic:']
var full_uri_schemes = []
for (var i = 0; i < available_full_uri_schemes.length; i++){
var index = uri_schemes.indexOf(available_full_uri_schemes[i])
if (index > -1){
full_uri_schemes.push(available_full_uri_schemes[i])
}
}
// 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){
switch (action.search_type){
case 'playlists':
for (var i = 0; i < full_uri_schemes.length; i++){
store.dispatch(mopidyActions.getPlaylistSearchResults(action.query,100,full_uri_schemes[i]))
}
break
case 'artists':
for (var i = 0; i < full_uri_schemes.length; i++){
store.dispatch(mopidyActions.getArtistSearchResults(action.query,100,full_uri_schemes[i]))
}
break
case 'albums':
for (var i = 0; i < full_uri_schemes.length; i++){
store.dispatch(mopidyActions.getAlbumSearchResults(action.query,100,full_uri_schemes[i]))
}
break
case 'tracks':
for (var i = 0; i < uri_schemes.length; i++){
store.dispatch(mopidyActions.getTrackSearchResults(action.query,100,uri_schemes[i]))
}
break
default:
for (var i = 0; i < full_uri_schemes.length; i++){
store.dispatch(mopidyActions.getPlaylistSearchResults(action.query,6,full_uri_schemes[i]))
store.dispatch(mopidyActions.getArtistSearchResults(action.query,6,full_uri_schemes[i]))
store.dispatch(mopidyActions.getAlbumSearchResults(action.query,6,full_uri_schemes[i]))
}
for (var i = 0; i < uri_schemes.length; i++){
store.dispatch(mopidyActions.getTrackSearchResults(action.query,20,uri_schemes[i]))
}
}
}
next(action)
break

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

@ -683,11 +683,11 @@ export default function reducer(ui = {}, action){
return Object.assign({}, ui, {
search_results: {
artists_more: artists_more,
artists_uris: artists_uris,
artists_uris: helpers.removeDuplicates(artists_uris),
albums_more: albums_more,
albums_uris: albums_uris,
albums_uris: helpers.removeDuplicates(albums_uris),
playlists_more: playlists_more,
playlists_uris: playlists_uris,
playlists_uris: helpers.removeDuplicates(playlists_uris),
tracks: tracks,
tracks_more: tracks_more
}

6
src/js/views/Artist.js
View File

@ -265,9 +265,9 @@ class Artist extends React.Component{
const mapStateToProps = (state, ownProps) => {
return {
artist: (state.ui.artists && typeof(state.ui.artists[ownProps.params.uri]) !== 'undefined' ? state.ui.artists[ownProps.params.uri] : false ),
artists: state.ui.artists,
library_artists: state.ui.library_artists,
albums: state.ui.albums,
artists: (state.ui.artists ? state.ui.artists : []),
library_artists: (state.ui.library_artists ? state.ui.library_artists : []),
albums: (state.ui.albums ? state.ui.albums : []),
spotify_authorized: state.spotify.authorized,
mopidy_connected: state.mopidy.connected
}

78
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 * as helpers from '../helpers'
import * as uiActions from '../services/ui/actions'
import * as mopidyActions from '../services/mopidy/actions'
import * as spotifyActions from '../services/spotify/actions'
@ -25,33 +26,27 @@ 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 )
if (this.props.params.query != newProps.params.query || this.props.params.type != newProps.params.type){
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 )
if (!this.props.mopidy_connected && newProps.mopidy_connected){
this.props.uiActions.startSearch(newProps.params.type, newProps.params.query, true)
}
}
performSearch( props = this.props ){
this.props.uiActions.startSearch(props.params.query)
this.props.spotifyActions.getSearchResults( props.params.query )
if( props.mopidy_connected ) this.props.mopidyActions.getSearchResults( props.params.query, props.uri_schemes )
}
loadMore(type){
this.props.spotifyActions.getURL( this.props[type+'_more'], 'SPOTIFY_SEARCH_RESULTS_LOADED_MORE_'+type.toUpperCase());
}
renderResults(){
var spotify_search_enabled = (this.props.search_settings && this.props.search_settings.spotify)
var artists = []
if (this.props.artists_uris){
@ -83,14 +78,23 @@ class Search extends React.Component{
}
}
switch( this.props.params.type ){
var tracks = []
if (this.props.tracks){
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 (this.props.params.type){
case 'artists':
return (
<div>
<section className="grid-wrapper">
<ArtistGrid artists={artists} />
<LazyLoadListener enabled={this.props['artists_more']} loadMore={ () => this.loadMore('artists') }/>
<LazyLoadListener enabled={this.props['artists_more'] && spotify_search_enabled} loadMore={ () => this.loadMore('artists') }/>
</section>
</div>
)
@ -101,7 +105,7 @@ class Search extends React.Component{
<div>
<section className="grid-wrapper">
<AlbumGrid albums={albums} />
<LazyLoadListener enabled={this.props['albums_more']} loadMore={ () => this.loadMore('albums') }/>
<LazyLoadListener enabled={this.props['albums_more'] && spotify_search_enabled} loadMore={ () => this.loadMore('albums') }/>
</section>
</div>
)
@ -112,7 +116,7 @@ class Search extends React.Component{
<div>
<section className="grid-wrapper">
<PlaylistGrid playlists={playlists} />
<LazyLoadListener enabled={this.props['playlists_more']} loadMore={ () => this.loadMore('playlists') }/>
<LazyLoadListener enabled={this.props['playlists_more'] && spotify_search_enabled} loadMore={ () => this.loadMore('playlists') }/>
</section>
</div>
)
@ -122,8 +126,8 @@ class Search extends React.Component{
return (
<div>
<section className="list-wrapper">
<TrackList show_source_icon={true} tracks={ this.props.tracks } />
<LazyLoadListener enabled={this.props['tracks_more']} loadMore={ () => this.loadMore('tracks') }/>
<TrackList show_source_icon={true} tracks={ tracks } />
<LazyLoadListener enabled={this.props['tracks_more'] && spotify_search_enabled} loadMore={ () => this.loadMore('tracks') }/>
</section>
</div>
)
@ -135,28 +139,28 @@ class Search extends React.Component{
<div className="search-result-sections cf">
<section>
<div className="inner">
<h4><Link to={global.baseURL+'search/'+this.props.params.query+'/artists'}>Artists</Link></h4>
<ArtistGrid className="mini" artists={artists.slice(0,6)} />
<h4><Link to={global.baseURL+'search/artists/'+this.props.params.query}>Artists</Link></h4>
{artists.length > 0 ? <ArtistGrid className="mini" artists={artists.slice(0,6)} /> : <span className="grey-text">No results</span>}
</div>
</section>
<section>
<div className="inner">
<h4><Link to={global.baseURL+'search/'+this.props.params.query+'/albums'}>Albums</Link></h4>
<AlbumGrid className="mini" albums={albums.slice(0,6)} />
<h4><Link to={global.baseURL+'search/albums/'+this.props.params.query}>Albums</Link></h4>
{albums.length > 0 ? <AlbumGrid className="mini" albums={albums.slice(0,6)} /> : <span className="grey-text">No results</span>}
</div>
</section>
<section>
<div className="inner">
<h4><Link to={global.baseURL+'search/'+this.props.params.query+'/playlists'}>Playlists</Link></h4>
<PlaylistGrid className="mini" playlists={playlists.slice(0,6)} />
<h4><Link to={global.baseURL+'search/playlists/'+this.props.params.query}>Playlists</Link></h4>
{playlists.length > 0 ? <PlaylistGrid className="mini" playlists={playlists.slice(0,6)} /> : <span className="grey-text">No results</span>}
</div>
</section>
</div>
<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={ this.props.tracks } />
<LazyLoadListener loadMore={ () => this.loadMore('tracks') }/>
<TrackList show_source_icon={true} tracks={tracks} />
<LazyLoadListener enabled={this.props['tracks_more'] && spotify_search_enabled} loadMore={ () => this.loadMore('tracks') }/>
</section>
</div>
@ -164,15 +168,15 @@ class Search extends React.Component{
}
}
handleViewChange(val){
handleTypeChange(val){
this.props.uiActions.hideContextMenu()
hashHistory.push(global.baseURL+'search/'+this.props.params.query+'/'+val)
hashHistory.push(global.baseURL+'search/'+val+'/'+this.props.params.query)
}
render(){
var view_options = [
var type_options = [
{
value: '',
value: 'all',
label: 'All'
},
{
@ -195,7 +199,11 @@ class Search extends React.Component{
var options = (
<span>
<DropdownField icon="eye" name="View" value={this.props.params.type} options={view_options} handleChange={val => this.handleViewChange(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;
Sources
</button>
</span>
)
@ -211,16 +219,16 @@ 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,
artists: (state.ui.artists ? state.ui.artists : []),
artists_uris: (state.ui.search_results ? state.ui.search_results.artists_uris : []),
artists_more: (state.ui.search_results ? state.ui.search_results.artists_more : null),
albums: state.ui.albums,
albums: (state.ui.albums ? state.ui.albums : []),
albums_uris: (state.ui.search_results ? state.ui.search_results.albums_uris : []),
albums_more: (state.ui.search_results ? state.ui.search_results.albums_more : null),
playlists: state.ui.playlists,
playlists: (state.ui.playlists ? state.ui.playlists : []),
playlists_uris: (state.ui.search_results ? state.ui.search_results.playlists_uris : []),
playlists_more: (state.ui.search_results ? state.ui.search_results.playlists_more : null)
}

23
src/scss/components/_lists.scss
View File

@ -42,6 +42,17 @@
top: 14px;
right: 12px;
}
&.field {
padding: 0 !important;
& > label {
display: block;
position: relative;
padding: 12px 10px 12px 20px;
cursor: pointer;
}
}
}
&.track-list .list-item {
@ -129,6 +140,18 @@
}
}
&.library-local-album-list .list-item{
.col {
&.name,
&.artists {
width: 45%;
}
&.tracks_total {
width: 10%;
}
}
}
&.artist-list .list-item {
.col {
&.name {

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 {