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

Filterable

Browse Source
This commit is contained in:
James Barnsley
2017-08-14 20:02:41 +12:00
parent 2dd08fa489
commit 6f0088204b
8 changed files with 194 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
src/js/components/FilterField.js Executable file
View File

@ -0,0 +1,74 @@
import React, { PropTypes } from 'react'
import { Link } from 'react-router'
import FontAwesome from 'react-fontawesome'
export default class FilterField extends React.Component{
constructor(props) {
super(props)
this.state = {
value: '',
active: false
}
this.handleKeyUp = this.handleKeyUp.bind(this)
}
componentWillMount(){
window.addEventListener("keyup", this.handleKeyUp, false)
}
componentWillUnmount(){
window.removeEventListener("keyup", this.handleKeyUp, false)
}
handleKeyUp(e){
if (e.keyCode == 27){
e.preventDefault()
this.setState({
value: '',
active: false
})
this.handleChange('')
}
}
activate(){
this.setState({active: true})
}
handleChange(value){
this.setState({
value: value,
active: (value != '')
})
this.props.handleChange(value)
}
handleBlur(){
if (this.state.value == ''){
this.setState({active: false})
}
}
render(){
return (
<span className={"filter-field "+(this.state.active ? 'active' : '')} onClick={e => this.activate()}>
<form>
<FontAwesome name="search" />&nbsp;
<input
type="text"
placeholder="Filter"
value={this.state.value}
onFocus={e => this.activate()}
onBlur={e => this.handleBlur()}
onChange={e => this.handleChange(e.target.value)}
/>
</form>
</span>
)
}
}

21
src/js/helpers.js
View File

@ -380,6 +380,27 @@ export let removeDuplicates = function(array){
}
/**
* Apply a partial text search on an array of objects
*
* @param field = string (the field we're to search)
* @param value = string (the value to find)
* @param array = array of objects to search
* @return array
**/
export let applyFilter = function(field, value, array){
var results = []
for (var i = 0; i < array.length; i++){
if (array[i][field] && array[i][field].toLowerCase().includes(value.toLowerCase())){
results.push(array[i])
}
}
return results
}
/**
* Convert a list of indexes to a useable range
* We ignore stragglers, and only attend to the first 'bunch' of consecutive indexes

33
src/js/views/library/LibraryAlbums.js
View File

@ -11,7 +11,7 @@ import Thumbnail from '../../components/Thumbnail'
import TrackList from '../../components/TrackList'
import ArtistSentence from '../../components/ArtistSentence'
import DropdownField from '../../components/DropdownField'
import LazyLoadListener from '../../components/LazyLoadListener'
import FilterField from '../../components/FilterField'
import * as helpers from '../../helpers'
import * as coreActions from '../../services/core/actions'
@ -23,20 +23,24 @@ class LibraryAlbums extends React.Component{
constructor(props) {
super(props)
this.state = {
filter: ''
}
}
componentDidMount(){
if (!this.props.mopidy_library_albums && this.props.mopidy_connected && (this.props.filter == 'all' || this.props.filter == 'local')){
if (!this.props.mopidy_library_albums && this.props.mopidy_connected && (this.props.source == 'all' || this.props.source == 'local')){
this.props.mopidyActions.getLibraryAlbums()
}
if (!this.props.spotify_library_albums && this.props.spotify_connected && (this.props.filter == 'all' || this.props.filter == 'spotify')){
if (!this.props.spotify_library_albums && this.props.spotify_connected && (this.props.source == 'all' || this.props.source == 'spotify')){
this.props.spotifyActions.getLibraryAlbums()
}
}
componentWillReceiveProps(newProps){
if (newProps.mopidy_connected && (newProps.filter == 'all' || newProps.filter == 'local')){
if (newProps.mopidy_connected && (newProps.source == 'all' || newProps.source == 'local')){
// We've just connected
if (!this.props.mopidy_connected){
@ -44,12 +48,12 @@ class LibraryAlbums extends React.Component{
}
// Filter changed, but we haven't got this provider's library yet
if (this.props.filter != 'all' && this.props.filter != 'local' && !newProps.mopidy_library_albums){
if (this.props.source != 'all' && this.props.source != 'local' && !newProps.mopidy_library_albums){
this.props.mopidyActions.getLibraryAlbums()
}
}
if (newProps.spotify_connected && (newProps.filter == 'all' || newProps.filter == 'spotify')){
if (newProps.spotify_connected && (newProps.source == 'all' || newProps.source == 'spotify')){
// We've just connected
if (!this.props.spotify_connected){
@ -57,7 +61,7 @@ class LibraryAlbums extends React.Component{
}
// Filter changed, but we haven't got this provider's library yet
if (this.props.filter != 'all' && this.props.filter != 'spotify' && !newProps.spotify_library_albums){
if (this.props.source != 'all' && this.props.source != 'spotify' && !newProps.spotify_library_albums){
this.props.spotifyActions.getLibraryAlbums()
}
}
@ -182,7 +186,7 @@ class LibraryAlbums extends React.Component{
var albums = []
// Spotify library items
if (this.props.spotify_library_albums && (this.props.filter == 'all' || this.props.filter == 'spotify')){
if (this.props.spotify_library_albums && (this.props.source == 'all' || this.props.source == 'spotify')){
for (var i = 0; i < this.props.spotify_library_albums.length; i++){
var uri = this.props.spotify_library_albums[i]
if (this.props.albums.hasOwnProperty(uri)){
@ -192,7 +196,7 @@ class LibraryAlbums extends React.Component{
}
// Mopidy library items
if (this.props.mopidy_library_albums && (this.props.filter == 'all' || this.props.filter == 'local')){
if (this.props.mopidy_library_albums && (this.props.source == 'all' || this.props.source == 'local')){
for (var i = 0; i < this.props.mopidy_library_albums.length; i++){
// Construct item placeholder. This is used as Mopidy needs to
@ -214,7 +218,11 @@ class LibraryAlbums extends React.Component{
albums = helpers.sortItems(albums, this.props.sort, this.props.sort_reverse)
var filter_options = [
if (this.state.filter && this.state.filter !== ''){
albums = helpers.applyFilter('name', this.state.filter, albums)
}
var source_options = [
{
value: 'all',
label: 'All'
@ -265,9 +273,10 @@ class LibraryAlbums extends React.Component{
var options = (
<span>
<DropdownField icon="filter" name="Filter" value={this.props.filter} options={filter_options} handleChange={val => {this.props.uiActions.set({ library_albums_filter: val}); this.props.uiActions.hideContextMenu() }} />
<FilterField handleChange={value => this.setState({filter: value})} />
<DropdownField icon="sort" name="Sort" value={this.props.sort} options={sort_options} reverse={this.props.sort_reverse} handleChange={val => {this.setSort(val); this.props.uiActions.hideContextMenu() }} />
<DropdownField icon="eye" name="View" value={this.props.view} options={view_options} handleChange={val => {this.props.uiActions.set({ library_albums_view: val }); this.props.uiActions.hideContextMenu() }} />
<DropdownField icon="database" name="Source" value={this.props.source} options={source_options} handleChange={val => {this.props.uiActions.set({ library_albums_source: val}); this.props.uiActions.hideContextMenu() }} />
</span>
)
@ -301,7 +310,7 @@ const mapStateToProps = (state, ownProps) => {
spotify_library_albums: state.spotify.library_albums,
mopidy_library_albums: state.mopidy.library_albums,
view: state.ui.library_albums_view,
filter: (state.ui.library_albums_filter ? state.ui.library_albums_filter : 'all'),
source: (state.ui.library_albums_source ? state.ui.library_albums_source : 'all'),
sort: (state.ui.library_albums_sort ? state.ui.library_albums_sort : 'name'),
sort_reverse: (state.ui.library_albums_sort_reverse ? true : false)
}

40
src/js/views/library/LibraryArtists.js
View File

@ -9,6 +9,7 @@ import Header from '../../components/Header'
import ArtistGrid from '../../components/ArtistGrid'
import List from '../../components/List'
import DropdownField from '../../components/DropdownField'
import FilterField from '../../components/FilterField'
import * as helpers from '../../helpers'
import * as uiActions from '../../services/ui/actions'
@ -18,21 +19,25 @@ import * as spotifyActions from '../../services/spotify/actions'
class LibraryArtists extends React.Component{
constructor(props) {
super(props);
super(props)
this.state = {
filter: ''
}
}
componentDidMount(){
if (!this.props.mopidy_library_artists && this.props.mopidy_connected && (this.props.filter == 'all' || this.props.filter == 'local')){
this.props.mopidyActions.getLibraryartists()
if (!this.props.mopidy_library_artists && this.props.mopidy_connected && (this.props.source == 'all' || this.props.source == 'local')){
this.props.mopidyActions.getLibraryArtists()
}
if (!this.props.spotify_library_artists && this.props.spotify_connected && (this.props.filter == 'all' || this.props.filter == 'spotify')){
this.props.spotifyActions.getLibraryartists()
if (!this.props.spotify_library_artists && this.props.spotify_connected && (this.props.source == 'all' || this.props.source == 'spotify')){
this.props.spotifyActions.getLibraryArtists()
}
}
componentWillReceiveProps(newProps){
if (newProps.mopidy_connected && (newProps.filter == 'all' || newProps.filter == 'local')){
if (newProps.mopidy_connected && (newProps.source == 'all' || newProps.source == 'local')){
// We've just connected
if (!this.props.mopidy_connected){
@ -40,12 +45,12 @@ class LibraryArtists extends React.Component{
}
// Filter changed, but we haven't got this provider's library yet
if (this.props.filter != 'all' && this.props.filter != 'local' && !newProps.mopidy_library_artists){
if (this.props.source != 'all' && this.props.source != 'local' && !newProps.mopidy_library_artists){
this.props.mopidyActions.getLibraryArtists()
}
}
if (newProps.spotify_connected && (newProps.filter == 'all' || newProps.filter == 'spotify')){
if (newProps.spotify_connected && (newProps.source == 'all' || newProps.source == 'spotify')){
// We've just connected
if (!this.props.spotify_connected){
@ -53,7 +58,7 @@ class LibraryArtists extends React.Component{
}
// Filter changed, but we haven't got this provider's library yet
if (this.props.filter != 'all' && this.props.filter != 'spotify' && !newProps.spotify_library_artists){
if (this.props.source != 'all' && this.props.source != 'spotify' && !newProps.spotify_library_artists){
this.props.spotifyActions.getLibraryArtists()
}
}
@ -121,7 +126,7 @@ class LibraryArtists extends React.Component{
var artists = []
// Mopidy library items
if (this.props.mopidy_library_artists && (this.props.filter == 'all' || this.props.filter == 'local')){
if (this.props.mopidy_library_artists && (this.props.source == 'all' || this.props.source == 'local')){
for (var i = 0; i < this.props.mopidy_library_artists.length; i++){
// Construct item placeholder. This is used as Mopidy needs to
@ -142,7 +147,7 @@ class LibraryArtists extends React.Component{
}
// Spotify library items
if (this.props.spotify_library_artists){
if (this.props.spotify_library_artists && (this.props.source == 'all' || this.props.source == 'spotify')){
for (var i = 0; i < this.props.spotify_library_artists.length; i++){
var uri = this.props.spotify_library_artists[i]
if (this.props.artists.hasOwnProperty(uri)){
@ -153,7 +158,11 @@ class LibraryArtists extends React.Component{
artists = helpers.sortItems(artists, this.props.sort, this.props.sort_reverse)
var filter_options = [
if (this.state.filter !== ''){
artists = helpers.applyFilter('name', this.state.filter, artists)
}
var source_options = [
{
value: 'all',
label: 'All'
@ -196,9 +205,10 @@ class LibraryArtists extends React.Component{
var options = (
<span>
<DropdownField icon="filter" name="Filter" value={this.props.filter} options={filter_options} handleChange={val => {this.props.uiActions.set({ library_artists_filter: val}); this.props.uiActions.hideContextMenu() }} />
<FilterField handleChange={value => this.setState({filter: value})} />
<DropdownField icon="sort" name="Sort" value={ this.props.sort } options={sort_options} reverse={this.props.sort_reverse} handleChange={value => {this.setSort(value); this.props.uiActions.hideContextMenu() }} />
<DropdownField icon="eye" name="View" value={ this.props.view } options={view_options} handleChange={value => {this.props.uiActions.set({ library_artists_view: value }); this.props.uiActions.hideContextMenu()}} />
<DropdownField icon="database" name="Source" value={this.props.source} options={source_options} handleChange={val => {this.props.uiActions.set({ library_artists_source: val}); this.props.uiActions.hideContextMenu() }} />
</span>
)
@ -225,10 +235,10 @@ const mapStateToProps = (state, ownProps) => {
mopidy_library_artists: state.mopidy.library_artists,
spotify_library_artists: state.spotify.library_artists,
artists: state.core.artists,
filter: (state.ui.library_artists_filter ? state.ui.library_artists_filter : 'all'),
source: (state.ui.library_artists_source ? state.ui.library_artists_source : 'all'),
sort: (state.ui.library_artists_sort ? state.ui.library_artists_sort : 'name'),
sort_reverse: (state.ui.library_artists_sort_reverse ? true : false),
view: state.core.library_artists_view
view: state.ui.library_artists_view
}
}

2
src/js/views/library/LibraryBrowse.js
View File

@ -105,7 +105,7 @@ class LibraryBrowse extends React.Component{
var options = null
if (this.props.params.uri != 'local:directory' ){
options = (
<button onClick={ () => window.history.back() }>
<button className="no-hover" onClick={ () => window.history.back() }>
<FontAwesome name="reply" />&nbsp;
Back
</button>

34
src/js/views/library/LibraryPlaylists.js
View File

@ -9,6 +9,7 @@ import PlaylistGrid from '../../components/PlaylistGrid'
import List from '../../components/List'
import DropdownField from '../../components/DropdownField'
import Header from '../../components/Header'
import FilterField from '../../components/FilterField'
import * as helpers from '../../helpers'
import * as coreActions from '../../services/core/actions'
@ -19,21 +20,25 @@ import * as spotifyActions from '../../services/spotify/actions'
class LibraryPlaylists extends React.Component{
constructor(props) {
super(props);
super(props)
this.state = {
filter: ''
}
}
componentDidMount(){
if (!this.props.mopidy_library_playlists && this.props.mopidy_connected && (this.props.filter == 'all' || this.props.filter == 'local')){
if (!this.props.mopidy_library_playlists && this.props.mopidy_connected && (this.props.source == 'all' || this.props.source == 'local')){
this.props.mopidyActions.getLibraryPlaylists()
}
if (!this.props.spotify_library_playlists && this.props.spotify_connected && (this.props.filter == 'all' || this.props.filter == 'spotify')){
if (!this.props.spotify_library_playlists && this.props.spotify_connected && (this.props.source == 'all' || this.props.source == 'spotify')){
this.props.spotifyActions.getLibraryPlaylists()
}
}
componentWillReceiveProps(newProps){
if (newProps.mopidy_connected && (newProps.filter == 'all' || newProps.filter == 'local')){
if (newProps.mopidy_connected && (newProps.source == 'all' || newProps.source == 'local')){
// We've just connected
if (!this.props.mopidy_connected){
@ -41,12 +46,12 @@ class LibraryPlaylists extends React.Component{
}
// Filter changed, but we haven't got this provider's library yet
if (this.props.filter != 'all' && this.props.filter != 'local' && !newProps.mopidy_library_playlists){
if (this.props.source != 'all' && this.props.source != 'local' && !newProps.mopidy_library_playlists){
this.props.mopidyActions.getLibraryPlaylists()
}
}
if (newProps.spotify_connected && (newProps.filter == 'all' || newProps.filter == 'spotify')){
if (newProps.spotify_connected && (newProps.source == 'all' || newProps.source == 'spotify')){
// We've just connected
if (!this.props.spotify_connected){
@ -54,7 +59,7 @@ class LibraryPlaylists extends React.Component{
}
// Filter changed, but we haven't got this provider's library yet
if (this.props.filter != 'all' && this.props.filter != 'spotify' && !newProps.spotify_library_playlists){
if (this.props.source != 'all' && this.props.source != 'spotify' && !newProps.spotify_library_playlists){
this.props.spotifyActions.getLibraryPlaylists()
}
}
@ -85,7 +90,7 @@ class LibraryPlaylists extends React.Component{
var playlists = []
// Spotify library items
if (this.props.spotify_library_playlists && (this.props.filter == 'all' || this.props.filter == 'spotify')){
if (this.props.spotify_library_playlists && (this.props.source == 'all' || this.props.source == 'spotify')){
for (var i = 0; i < this.props.spotify_library_playlists.length; i++){
var uri = this.props.spotify_library_playlists[i]
if (this.props.playlists.hasOwnProperty(uri)){
@ -95,7 +100,7 @@ class LibraryPlaylists extends React.Component{
}
// Mopidy library items
if (this.props.mopidy_library_playlists && (this.props.filter == 'all' || this.props.filter == 'local')){
if (this.props.mopidy_library_playlists && (this.props.source == 'all' || this.props.source == 'local')){
for (var i = 0; i < this.props.mopidy_library_playlists.length; i++){
var uri = this.props.mopidy_library_playlists[i]
if (this.props.playlists.hasOwnProperty(uri)){
@ -107,6 +112,10 @@ class LibraryPlaylists extends React.Component{
playlists = helpers.sortItems(playlists, this.props.sort, this.props.sort_reverse)
playlists = helpers.removeDuplicates(playlists)
if (this.state.filter !== ''){
playlists = helpers.applyFilter('name', this.state.filter, playlists)
}
if (this.props.view == 'list'){
if (this.props.slim_mode){
var columns = [
@ -167,7 +176,7 @@ class LibraryPlaylists extends React.Component{
render(){
var filter_options = [
var source_options = [
{
value: 'all',
label: 'All'
@ -218,9 +227,10 @@ class LibraryPlaylists extends React.Component{
var options = (
<span>
<DropdownField icon="filter" name="Filter" value={this.props.filter} options={filter_options} handleChange={val => {this.props.uiActions.set({ library_playlists_filter: val}); this.props.uiActions.hideContextMenu() }} />
<FilterField handleChange={value => this.setState({filter: value})} />
<DropdownField icon="sort" name="Sort" value={this.props.sort} options={sort_options} reverse={this.props.sort_reverse} handleChange={val => {this.setSort(val); this.props.uiActions.hideContextMenu() }} />
<DropdownField icon="eye" name="View" value={this.props.view} options={view_options} handleChange={val => {this.props.uiActions.set({ library_playlists_view: val}); this.props.uiActions.hideContextMenu() }} />
<DropdownField icon="database" name="Source" value={this.props.source} options={source_options} handleChange={val => {this.props.uiActions.set({ library_playlists_source: val}); this.props.uiActions.hideContextMenu() }} />
<button className="no-hover" onClick={ () => this.props.uiActions.openModal('create_playlist', {} ) }>
<FontAwesome name="plus" />&nbsp;
New
@ -254,7 +264,7 @@ const mapStateToProps = (state, ownProps) => {
load_queue: state.ui.load_queue,
me_id: (state.spotify.me ? state.spotify.me.id : (state.ui.config && state.ui.config.spotify_username ? state.ui.config.spotify_username : false)),
view: state.ui.library_playlists_view,
filter: (state.ui.library_playlists_filter ? state.ui.library_playlists_filter : 'all'),
source: (state.ui.library_playlists_source ? state.ui.library_playlists_source : 'all'),
sort: (state.ui.library_playlists_sort ? state.ui.library_playlists_sort : 'name'),
sort_reverse: (state.ui.library_playlists_sort_reverse ? true : false),
playlists: state.core.playlists

1
src/scss/app.scss
View File

@ -23,6 +23,7 @@
@import 'components/notifications';
@import 'components/dropdown-field';
@import 'components/autocomplete-field';
@import 'components/filter-field';
@import 'components/sub-views';
@import 'components/debug';

29
src/scss/components/_filter-field.scss Executable file
View File

@ -0,0 +1,29 @@
.filter-field {
form {
display: inline-block;
position: relative;
}
.fa {
position: absolute;
top: 12px;
left: 15px;
pointer-events: none;
}
input {
@include animate();
width: 0;
padding-left: 25px;
background: transparent;
}
&.active {
input {
width: 180px;
padding-left: 35px;
background: $grey;
}
}
}