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

Search

Browse Source
This commit is contained in:
James Barnsley
2017-06-20 19:55:47 +12:00
parent da19251e5a 774ff701a9
commit 8b4b762ab9
14 changed files with 88 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/js/components/Header.js
View File

@ -3,6 +3,7 @@ import React, { PropTypes } from 'react'
import FontAwesome from 'react-fontawesome'
import Icon from './Icon'
import SearchForm from './SearchForm'
import SidebarToggleButton from './SidebarToggleButton'
import ContextMenuTrigger from './ContextMenuTrigger'
@ -43,13 +44,24 @@ export default class Header extends React.Component{
}
render(){
return (
<header className={(this.props.className ? this.props.className : null)}>
<Icon name={ this.props.icon } />
<SidebarToggleButton />
<h2>{ this.props.title }</h2>
{this.renderOptions()}
</header>
);
if (this.props.search){
return (
<header className={(this.props.className ? this.props.className : null)}>
<Icon name="search" />
<SidebarToggleButton />
<SearchForm />
{this.renderOptions()}
</header>
)
} else {
return (
<header className={(this.props.className ? this.props.className : null)}>
<Icon name={this.props.icon} />
<SidebarToggleButton />
<h2>{ this.props.title }</h2>
{this.renderOptions()}
</header>
)
}
}
}

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

@ -49,7 +49,7 @@ class SearchForm extends React.Component{
<form className={this.props.context+' search-form'} onSubmit={ e => this.handleSubmit(e) }>
<input
type="text"
placeholder="Search"
placeholder="Start typing..."
onChange={ e => this.setState({ query: e.target.value }) }
value={ this.state.query } />
</form>

10
src/js/components/Sidebar.js
View File

@ -5,7 +5,6 @@ import { bindActionCreators } from 'redux'
import { Link } from 'react-router'
import Icon from './Icon'
import SearchForm from './SearchForm'
import Dropzones from './Dropzones'
import Thumbnail from './Thumbnail'
@ -22,9 +21,6 @@ class Sidebar extends React.Component{
return (
<aside>
<div className="liner">
<SearchForm context="sidebar" />
<nav>
<section>
@ -32,6 +28,10 @@ class Sidebar extends React.Component{
<Icon name="play" />
Now playing
</Link>
<Link activeClassName="active" to={global.baseURL+"search"}>
<Icon name="search" />
Search
</Link>
</section>
<section>
@ -87,10 +87,10 @@ class Sidebar extends React.Component{
</section>
</nav>
</div>
<Dropzones />
</aside>
);
}

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

@ -67,13 +67,15 @@ export default class Track extends React.Component{
)
} else if (this.props.context == 'queue'){
var type = (track.added_from ? helpers.uriType(track.added_from) : null)
if (track.added_from && track.added_by){
var added = <span>{track.added_by} <span className="grey-text"> (from <Link to={global.baseURL+type+'/'+track.added_from}>{type}</Link>)</span></span>
} else if (track.added_from){
var added = <span className="grey-text"> (from <Link to={global.baseURL+type+'/'+track.added_from}>{type}</Link>)</span>
var type = (track.added_from ? helpers.uriType(track.added_from) : null)
if (type == 'discover'){
var link = <Link to={global.baseURL+'discover/recommendations/'+helpers.getFromUri('seeds',track.added_from)}>discover</Link>
} else {
var link = <Link to={global.baseURL+type+'/'+track.added_from}>{type}</Link>
}
var added = <span>{track.added_by} <span className="grey-text"> (from {link})</span></span>
} else if (track.added_by){
var added = track.added_by

7
src/js/helpers.js
View File

@ -209,6 +209,12 @@ export let getFromUri = function(element,uri){
return exploded[2]
}
break
case 'seeds':
if (exploded[1] == 'discover'){
return exploded[2]
}
break
}
return null
}
@ -232,6 +238,7 @@ export let uriType = function( uri ){
case 'playlist':
case 'search':
case 'genre':
case 'discover':
return exploded[1]
break

2
src/js/index.js
View File

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

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

@ -13,6 +13,7 @@ import ArtistGrid from '../components/ArtistGrid'
import AlbumGrid from '../components/AlbumGrid'
import PlaylistGrid from '../components/PlaylistGrid'
import LazyLoadListener from '../components/LazyLoadListener'
import SearchForm from '../components/SearchForm'
import * as helpers from '../helpers'
import * as uiActions from '../services/ui/actions'
@ -26,18 +27,26 @@ class Search extends React.Component{
}
componentDidMount(){
this.props.uiActions.startSearch(this.props.params.type, this.props.params.query)
// Make sure we have search parameters to start with
if (this.props.params && this.props.params.type && this.props.params.query){
this.props.uiActions.startSearch(this.props.params.type, this.props.params.query)
}
}
componentWillReceiveProps(newProps){
// Make sure we have some search parameters
if (newProps.params && newProps.params.type && newProps.params.query){
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)
}
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.uiActions.startSearch(newProps.params.type, newProps.params.query, true)
// mopidy comes online
if (!this.props.mopidy_connected && newProps.mopidy_connected){
this.props.uiActions.startSearch(newProps.params.type, newProps.params.query, true)
}
}
}
@ -234,7 +243,7 @@ class Search extends React.Component{
return (
<div className="view search-view">
<Header icon="search" title="Search results" options={options} uiActions={this.props.uiActions} />
<Header search options={options} uiActions={this.props.uiActions} />
<div className="content-wrapper">
{ this.renderResults() }
</div>

13
src/js/views/discover/DiscoverRecommendations.js
View File

@ -66,7 +66,11 @@ class Discover extends React.Component{
}
handleURLSeeds(seeds_string = this.props.params.seeds){
var seeds = seeds_string.split(',')
// Rejoin if we've had to uri-encode these as strings
// We'd need to do this if our URL has been encoded so the whole URL can become
// it's own URI (eg iris:discover:spotify_artist_1234) where we can't use ":"
var seeds = seeds_string.split('_').join(':').split(',')
for (var i = 0; i < seeds.length; i++){
switch (helpers.uriType(seeds[i])){
@ -198,6 +202,11 @@ class Discover extends React.Component{
}
}
}
var uri = 'iris:discover'
if (this.props.params.seeds){
uri += ':'+this.props.params.seeds.split(':').join('_')
}
return (
<div className="content-wrapper recommendations-results">
@ -211,7 +220,7 @@ class Discover extends React.Component{
</section>
<section className="list-wrapper">
<h4>Tracks</h4>
{this.props.recommendations.tracks ? <TrackList className="discover-track-list" uri="iris:discover" tracks={this.props.recommendations.tracks} /> : null}
{this.props.recommendations.tracks ? <TrackList className="discover-track-list" uri={uri} tracks={this.props.recommendations.tracks} /> : null}
</section>
</div>
)