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

Fixing search input field; Adding explicit tag, fixes #135

Browse Source
This commit is contained in:
James Barnsley
2017-06-21 09:12:14 +12:00
parent d88a5ee983
commit b4f3362aac
11 changed files with 68 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/js/components/ContextMenu.js
View File

@ -453,9 +453,9 @@ class ContextMenu extends React.Component{
{play_uris}
{play_uris_next}
{add_to_queue}
{this.canBeInLibrary() ? toggle_in_library : null}
{go_to_artist}
{copy_uris}
{this.canBeInLibrary() ? toggle_in_library : null}
</div>
)
break
@ -464,9 +464,9 @@ class ContextMenu extends React.Component{
return (
<div>
{start_radio}
{this.canBeInLibrary() ? toggle_in_library : null}
{context.source == 'spotify' ? go_to_recommendations : null}
{copy_uris}
{this.canBeInLibrary() ? toggle_in_library : null}
</div>
)
break
@ -475,9 +475,9 @@ class ContextMenu extends React.Component{
return (
<div>
{play_playlist}
{this.canBeInLibrary() ? toggle_in_library : null}
{context.source == 'spotify' ? go_to_user : null}
{copy_uris}
{this.canBeInLibrary() ? toggle_in_library : null}
</div>
)
break
@ -487,6 +487,7 @@ class ContextMenu extends React.Component{
<div>
{play_queue_item}
{add_to_playlist}
{context.source == 'spotify' ? go_to_recommendations : null}
{copy_uris}
{remove_from_queue}
</div>

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

@ -19,7 +19,9 @@ class SearchForm extends React.Component{
}
componentDidMount(){
this.setState({query: this.props.query})
if (this.props.query){
this.setState({query: this.props.query})
}
}
componentWillReceiveProps(newProps){

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

@ -2,7 +2,7 @@
import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { Link } from 'react-router'
import { Link, withRouter } from 'react-router'
import Icon from './Icon'
import Dropzones from './Dropzones'
@ -17,6 +17,14 @@ class Sidebar extends React.Component{
super(props)
}
linkClassName(link){
if (this.props.location.pathname.startsWith('/'+link)){
return 'active'
} else {
return null
}
}
render(){
return (
<aside>
@ -24,11 +32,11 @@ class Sidebar extends React.Component{
<nav>
<section>
<Link activeClassName="active" to={global.baseURL+"queue"}>
<Link className={this.linkClassName('queue')} to={global.baseURL+"queue"}>
<Icon name="play" />
Now playing
</Link>
<Link activeClassName="active" to={global.baseURL+"search"}>
<Link className={this.linkClassName('search')} to={global.baseURL+"search"}>
<Icon name="search" />
Search
</Link>
@ -36,19 +44,19 @@ class Sidebar extends React.Component{
<section>
<title>Discover</title>
<Link activeClassName="active" to={global.baseURL+"discover/recommendations"}>
<Link className={this.linkClassName('discover/recommendations')} to={global.baseURL+"discover/recommendations"}>
<Icon name="compass" />
Discover
</Link>
<Link activeClassName="active" to={global.baseURL+"discover/categories"}>
<Link className={this.linkClassName('discover/categories')} to={global.baseURL+"discover/categories"}>
<Icon name="grid" />
Genre / Mood
</Link>
<Link activeClassName="active" to={global.baseURL+"discover/featured"}>
<Link className={this.linkClassName('discover/featured')} to={global.baseURL+"discover/featured"}>
<Icon name="star" />
Featured playlists
</Link>
<Link activeClassName="active" to={global.baseURL+"discover/new-releases"}>
<Link className={this.linkClassName('discover/new-releases')} to={global.baseURL+"discover/new-releases"}>
<Icon name="leaf" />
New releases
</Link>
@ -56,30 +64,30 @@ class Sidebar extends React.Component{
<section>
<title>My Music</title>
<Link activeClassName="active" to={global.baseURL+"library/playlists"}>
<Link className={this.linkClassName('library/playlists')} to={global.baseURL+"library/playlists"}>
<Icon name="playlist" />
Playlists
</Link>
<Link activeClassName="active" disabled={!this.props.spotify_authorized} to={this.props.spotify_authorized ? global.baseURL+"library/artists" : null}>
<Link className={this.linkClassName('library/artists')} disabled={!this.props.spotify_authorized} to={this.props.spotify_authorized ? global.baseURL+"library/artists" : null}>
<Icon name="mic" />
Artists
</Link>
<Link activeClassName="active" disabled={!this.props.spotify_authorized} to={this.props.spotify_authorized ? global.baseURL+"library/albums" : null}>
<Link className={this.linkClassName('library/albums')} disabled={!this.props.spotify_authorized} to={this.props.spotify_authorized ? global.baseURL+"library/albums" : null}>
<Icon name="cd" />
Albums
</Link>
<Link activeClassName="active" disabled={!this.props.spotify_authorized} to={this.props.spotify_authorized ? global.baseURL+"library/tracks" : null}>
<Link className={this.linkClassName('library/tracks')} disabled={!this.props.spotify_authorized} to={this.props.spotify_authorized ? global.baseURL+"library/tracks" : null}>
<Icon name="music" />
Tracks
</Link>
<Link activeClassName="active" to={global.baseURL+"library/local"}>
<Link className={this.linkClassName('library/local')} to={global.baseURL+"library/local"}>
<Icon name="folder" />
Local
</Link>
</section>
<section>
<Link activeClassName="active" to={global.baseURL+"settings"}>
<Link className={this.linkClassName('settings')} to={global.baseURL+"settings"}>
<Icon name="cog" />
Settings
{ !this.props.mopidy_connected || !this.props.spotify_connected || !this.props.pusher_connected ? <FontAwesome name="exclamation-triangle" className="red-text pull-right" /> : null }
@ -119,4 +127,5 @@ const mapDispatchToProps = (dispatch) => {
}
}
export default connect(mapStateToProps, mapDispatchToProps)(Sidebar)
// We wrap our Sidebar with the Router, and then to the redux store
export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Sidebar))

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

@ -55,13 +55,13 @@ export default class Track extends React.Component{
var track_columns = (
<span>
<span className="col name">
{ track.name ? track.name : <span className="grey-text">{track.uri}</span> }
{track.name ? track.name : <span className="grey-text">{track.uri}</span>}
</span>
<span className="col source">
{helpers.uriSource(track.uri)}
</span>
<span className="col played_at">
{ track.played_at ? <span><Dater type="ago" data={track.played_at} /> ago</span> : null }
{track.played_at ? <span><Dater type="ago" data={track.played_at} /> ago</span> : null}
</span>
</span>
)
@ -87,11 +87,12 @@ export default class Track extends React.Component{
var track_columns = (
<span>
<span className="col name">
{ track.name ? track.name : <span className="grey-text">{track.uri}</span> }
{track.name ? track.name : <span className="grey-text">{track.uri}</span>}
{track.explicit ? <span className="flag dark">EXPLICIT</span> : null}
</span>
{this.props.show_source_icon ? <FontAwesome name={helpers.sourceIcon(track.uri)} className="source" fixedWidth /> : null}
<span className="col artists">
{ track.artists ? <ArtistSentence artists={track.artists} /> : '-' }
{track.artists ? <ArtistSentence artists={track.artists} /> : '-'}
</span>
<span className="col album">
{album}
@ -100,8 +101,8 @@ export default class Track extends React.Component{
{added}
</span>
<span className="col duration">
{ track.duration_ms ? <Dater type="length" data={track.duration_ms} /> : null }
{ track.length ? <Dater type="length" data={track.length} /> : null }
{track.duration_ms ? <Dater type="length" data={track.duration_ms} /> : null}
{track.length ? <Dater type="length" data={track.length} /> : null}
</span>
</span>
)
@ -111,18 +112,19 @@ export default class Track extends React.Component{
var track_columns = (
<span>
<span className="col name">
{ track.name ? track.name : <span className="grey-text">{track.uri}</span> }
{track.name ? track.name : <span className="grey-text">{track.uri}</span>}
{track.explicit ? <span className="flag dark">EXPLICIT</span> : null}
</span>
{this.props.show_source_icon ? <FontAwesome name={helpers.sourceIcon(track.uri)} className="source" fixedWidth /> : null}
<span className="col artists">
{ track.artists ? <ArtistSentence artists={track.artists} /> : '-' }
{track.artists ? <ArtistSentence artists={track.artists} /> : '-'}
</span>
<span className="col album">
{album}
</span>
<span className="col duration">
{ track.duration_ms ? <Dater type="length" data={track.duration_ms} /> : null }
{ track.length ? <Dater type="length" data={track.length} /> : null }
{track.duration_ms ? <Dater type="length" data={track.duration_ms} /> : null}
{track.length ? <Dater type="length" data={track.length} /> : null}
</span>
</span>
)

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

@ -149,7 +149,6 @@ class Artist extends React.Component{
</div>
<div className="col w60 biography">
<h4>Biography</h4>
<section>
{ this.props.artist.bio ? <div className="biography-text"><p>{this.props.artist.bio.content}</p><br />
<div className="grey-text">Published: { this.props.artist.bio.published }</div>

4
src/scss/components/_header.scss
View File

@ -12,9 +12,9 @@ main {
.icon {
display: inline-block;
padding-right: 14px;
height: 3rem;
height: 2.6rem;
vertical-align: bottom;
margin-bottom: 10px;
margin-bottom: 5px;
}
.options {

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

@ -180,6 +180,8 @@
}
&.related-artist-list {
padding-bottom: 20px;
.artist {
display: block;
border: 0;

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

@ -81,8 +81,8 @@ main {
h1 {
@include feature_font();
font-weight: 800;
font-size: 4rem;
line-height: 4rem;
font-size: 3rem;
line-height: 3rem;
}
h2 {
@ -263,15 +263,24 @@ footer {
}
.flag {
font-size: 12px;
font-size: 9px;
font-weight: bold;
display: inline-block;
padding: 2px 4px;
padding: 2px 5px;
background: $light_grey;
color: $dark_grey;
border-radius: 3px;
vertical-align: bottom;
margin: 0 8px 1px;
&.blue {
background: $blue;
color: #FFFFFF;
color: $white;
}
&.dark {
background: $dark_grey;
color: $white;
}
}

1
src/scss/views/_artist.scss
View File

@ -71,7 +71,6 @@
.body.about {
@include clearfix();
padding: 0 40px 40px 40px;
.biography {
padding-left: 40px;

8
src/scss/views/_discover.scss
View File

@ -3,7 +3,7 @@
.intro {
position: relative;
padding: 160px 40px 80px 40px;
padding: 200px 40px 80px 40px;
z-index: 1;
.parallax {
@ -110,7 +110,11 @@
.discover-new-releases-view {
.intro {
position: relative;
padding-top: 80px;
padding-top: 130px;
header {
margin-bottom: 0;
}
.parallax {
position: absolute;

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

@ -7,9 +7,9 @@
input {
@include feature_font();
padding: 0;
font-size: 4rem;
font-size: 3rem;
font-weight: 700;
height: 4rem;
height: 3rem;
background: transparent;
}
}