Filterable

src/js/components/FilterField.js

@@ -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>
+		)
+	}
+}

src/js/helpers.js

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

src/js/views/library/LibraryAlbums.js

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

src/js/views/library/LibraryArtists.js

@@ -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')){
+		if (!this.props.mopidy_library_artists && this.props.mopidy_connected && (this.props.source == 'all' || this.props.source == 'local')){
-			this.props.mopidyActions.getLibraryartists()
+			this.props.mopidyActions.getLibraryArtists()
 		}
 
-		if (!this.props.spotify_library_artists && this.props.spotify_connected && (this.props.filter == 'all' || this.props.filter == 'spotify')){
+		if (!this.props.spotify_library_artists && this.props.spotify_connected && (this.props.source == 'all' || this.props.source == 'spotify')){
-			this.props.spotifyActions.getLibraryartists()
+			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
 	}
 }
 

src/js/views/library/LibraryBrowse.js

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

src/js/views/library/LibraryPlaylists.js

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

src/scss/app.scss

@@ -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';
 

src/scss/components/_filter-field.scss

@@ -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;
+		}
+	}
+}