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

View toggling; Enhanced List component

Browse Source
This commit is contained in:
James Barnsley
2016-11-21 16:26:47 +13:00
parent 8d1436996c
commit 6588790476
10 changed files with 197 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/js/bootstrap.js vendored
View File

@ -87,6 +87,12 @@ if( localStorage.getItem('spotify') ){
initialState.spotify = Object.assign(initialState.spotify, storedSpotify );
}
// if we've got a stored version of spotify state, load and merge
if( localStorage.getItem('ui') ){
var storedUi = JSON.parse( localStorage.getItem('ui') );
initialState.ui = Object.assign(initialState.ui, storedUi );
}
console.log('Bootstrapping', initialState)
let store = createStore(

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

@ -17,14 +17,6 @@ export default class AlbumGrid extends React.Component{
{
this.props.albums.map(
(album, index) => {
// handle nested album objects (as in Album Library)
if( album.album ){
var flatAlbum = album.album;
flatAlbum.added_at = album.added_at;
album = flatAlbum;
}
return <GridItem item={album} key={index} link={'/album/'+album.uri} />
}
)

26
src/js/components/List.js
View File

@ -1,9 +1,12 @@
import React, { PropTypes } from 'react'
import { Link } from 'react-router'
import FontAwesome from 'react-fontawesome'
import ArtistSentence from './ArtistSentence'
import * as helpers from '../helpers'
export default class List extends React.Component{
constructor(props) {
@ -17,16 +20,28 @@ export default class List extends React.Component{
<div className="list-item header cf">
{
this.props.columns.map( (col, col_index) => {
return <div className={'col w'+col.width} key={col_index}>{ col.name }</div>
return <div className={'col w'+col.width} key={col_index}>{ col.label ? col.label : col.name }</div>
})
}
</div>
)
}
renderValue( value ){
if( typeof(value) === 'undefined' ) return <span>-</span>
renderValue( row, key ){
var key = key.split('.')
var value = row
for( var i = 0; i < key.length; i++ ){
if( typeof(value[key[i]]) !== 'undefined' ){
value = value[key[i]]
}else{
return <span>-</span>
}
}
if( key[0] === 'artists' ) return <ArtistSentence artists={value} />
if( value === true ) return <FontAwesome name="check" />
if( typeof(value) === 'number' ) return <span>{value.toLocaleString()}</span>
return <span>{value}</span>
}
@ -44,11 +59,12 @@ export default class List extends React.Component{
this.props.columns.map( (col, col_index) => {
return (
<div className={'col w'+col.width} key={col_index}>
{ this.renderValue(row[col.name]) }
{ this.renderValue(row, col.name) }
</div>
)
})
}
{ this.props.show_source_icon ? <FontAwesome className="source" name={helpers.sourceIcon(row.uri)} /> : null }
</Link>
)
})

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

@ -68,7 +68,7 @@ class SpotifyAuthenticationFrame extends React.Component{
<Thumbnail circle={true} size="small" images={this.props.spotify.me.images} />
<div className="name">
Logged in as {this.props.spotify.me.display_name ? this.props.spotify.me.display_name : null }
&nbsp;(<Link to={'/user/'+this.props.spotify.me.id}>{ this.props.spotify.me.id }</Link>)
&nbsp;(<Link to={'/user/'+this.props.spotify.me.uri}>{ this.props.spotify.me.id }</Link>)
</div>
</div>
</div>

9
src/js/services/localstorage/middleware.js
View File

@ -12,7 +12,7 @@ const localstorageMiddleware = (function(){
// append our state to a global variable. This gives us access to debug the store at any point
window._store = store
console.log(action)
//console.log(action)
switch( action.type ){
@ -114,6 +114,13 @@ const localstorageMiddleware = (function(){
);
localStorage.setItem('spotify', JSON.stringify(spotify));
break;
case 'SET_VIEW':
var ui = JSON.parse( localStorage.getItem('ui') );
if( !ui ) ui = {};
Object.assign( ui, action.view );
localStorage.setItem('ui', JSON.stringify(ui));
break;
}
}

24
src/js/services/spotify/reducer.js
View File

@ -79,14 +79,34 @@ export default function reducer(spotify = {}, action){
case 'SPOTIFY_LIBRARY_ALBUMS_LOADED':
if( !action.data ) return Object.assign({}, spotify)
var albums = []
for( var i = 0; i < action.data.items.length; i++ ){
albums.push( Object.assign(
{},
action.data.items[i].album,
{
added_at: action.data.items[i].added_at
}
))
}
return Object.assign({}, spotify, {
library_albums: action.data.items,
library_albums: albums,
library_albums_more: action.data.next
});
case 'SPOTIFY_LIBRARY_ALBUMS_LOADED_MORE':
var albums = []
for( var i = 0; i < action.data.items.length; i++ ){
albums.push( Object.assign(
{},
action.data.items[i].album,
{
added_at: action.data.items[i].added_at
}
))
}
return Object.assign({}, spotify, {
library_albums: [...spotify.library_albums, ...action.data.items ],
library_albums: [...spotify.library_albums, ...albums ],
library_albums_more: action.data.next
});

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

@ -5,9 +5,12 @@ import { bindActionCreators } from 'redux'
import { Link } from 'react-router'
import AlbumGrid from '../../components/AlbumGrid'
import List from '../../components/List'
import Header from '../../components/Header'
import DropdownField from '../../components/DropdownField'
import LazyLoadListener from '../../components/LazyLoadListener'
import * as uiActions from '../../services/ui/actions'
import * as mopidyActions from '../../services/mopidy/actions'
import * as spotifyActions from '../../services/spotify/actions'
@ -26,16 +29,77 @@ class LibraryAlbums extends React.Component{
this.props.spotifyActions.getURL( this.props.albums_more, 'SPOTIFY_LIBRARY_ALBUMS_LOADED_MORE' );
}
render(){
return (
<div className="view library-albums-view">
<Header
icon="cd"
title="My albums"
/>
renderView(){
if( !this.props.albums ) return null
if( this.props.view == 'list' ){
var columns = [
{
width: 35,
label: 'Name',
name: 'name'
},
{
width: 35,
label: 'Artists',
name: 'artists'
},
{
width: 15,
label: 'Added',
name: 'added_at'
},
{
width: 15,
label: 'Tracks',
name: 'tracks.total'
}
]
return (
<section className="list-wrapper">
<List rows={this.props.albums} columns={columns} link_prefix="/album/" />
</section>
)
}else if( this.props.view == 'thumbnails' ){
return (
<section className="grid-wrapper">
{ this.props.albums ? <AlbumGrid albums={this.props.albums} /> : null }
</section>
</section>
)
}else{
return (
<section className="grid-wrapper">
{ this.props.albums ? <AlbumGrid albums={this.props.albums} /> : null }
</section>
)
}
}
render(){
var view_options = [
{
value: 'detail',
label: 'Detail'
},
{
value: 'thumbnails',
label: 'Thumbnails'
},
{
value: 'list',
label: 'List'
}
]
var actions = (
<DropdownField icon="eye" name="View" value={ this.props.view } options={ view_options } handleChange={ value => this.props.uiActions.setView({ library_albums_view: value }) } />
)
return (
<div className="view library-albums-view">
<Header icon="cd" title="My albums" actions={actions} />
{ this.renderView() }
<LazyLoadListener loadMore={ () => this.loadMore() }/>
</div>
);
@ -51,6 +115,7 @@ class LibraryAlbums extends React.Component{
const mapStateToProps = (state, ownProps) => {
return {
view: state.ui.library_albums_view,
albums: state.spotify.library_albums,
albums_more: state.spotify.library_albums_more,
}
@ -58,6 +123,7 @@ const mapStateToProps = (state, ownProps) => {
const mapDispatchToProps = (dispatch) => {
return {
uiActions: bindActionCreators(uiActions, dispatch),
mopidyActions: bindActionCreators(mopidyActions, dispatch),
spotifyActions: bindActionCreators(spotifyActions, dispatch)
}

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

@ -37,16 +37,18 @@ class LibraryArtists extends React.Component{
var columns = [
{
width: 30,
label: 'Name',
name: 'name'
},
{
width: 10,
label: 'Followers',
name: 'followers.total'
}
]
return (
<section className="list-wrapper">
<List rows={this.props.artists} columns={columns} link_prefix="/artist/" />
<List rows={this.props.artists} columns={columns} link_prefix="/artist/" show_source_icon={true} />
</section>
)
}else{

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

@ -6,6 +6,8 @@ import { Link } from 'react-router'
import FontAwesome from 'react-fontawesome'
import PlaylistGrid from '../../components/PlaylistGrid'
import List from '../../components/List'
import DropdownField from '../../components/DropdownField'
import Header from '../../components/Header'
import * as uiActions from '../../services/ui/actions'
@ -18,31 +20,73 @@ class LibraryPlaylists extends React.Component{
super(props);
}
render(){
renderView(){
if( !this.props.playlists ) return null
var columns = [
{ name: 'name', width: '30'},
{ name: 'tracks.total', width: '15'},
{ name: 'can_edit', width: '15'},
{ name: 'uri', width: '40'}
if( this.props.view == 'list' ){
var columns = [
{
width: 30,
label: 'Name',
name: 'name'
},
{
width: 30,
label: 'Owner',
name: 'owner.id'
},
{
width: 10,
label: 'Can edit',
name: 'can_edit'
},
{
width: 10,
label: 'Tracks',
name: 'tracks.total'
}
]
return (
<section className="list-wrapper">
<List rows={this.props.playlists} columns={columns} link_prefix="/playlist/" show_source_icon={true} />
</section>
)
}else{
return (
<section className="grid-wrapper">
<PlaylistGrid playlists={this.props.playlists} />
</section>
)
}
}
render(){
var view_options = [
{
value: 'thumbnails',
label: 'Thumbnails'
},
{
value: 'list',
label: 'List'
}
]
var actions = (
<button onClick={ () => this.props.uiActions.openModal('create_playlist', {} ) }>
<FontAwesome name="plus" />&nbsp;
New
</button>
<div>
<DropdownField icon="eye" name="View" value={ this.props.view } options={ view_options } handleChange={ value => this.props.uiActions.setView({ library_playlists_view: value }) } />
<button onClick={ () => this.props.uiActions.openModal('create_playlist', {} ) }>
<FontAwesome name="plus" />&nbsp;
New
</button>
</div>
)
return (
<div className="view library-playlists-view">
<Header icon="playlist" title="My playlists" actions={actions} />
<section className="grid-wrapper">
<PlaylistGrid playlists={this.props.playlists} />
</section>
{ this.renderView() }
</div>
)
}
@ -57,6 +101,7 @@ class LibraryPlaylists extends React.Component{
const mapStateToProps = (state, ownProps) => {
return {
view: state.ui.library_playlists_view,
playlists: state.ui.playlists
}
}

1
src/scss/components/_dropdown-field.scss
View File

@ -4,6 +4,7 @@
font-weight: 600;
text-transform: uppercase;
position: relative;
display: inline-block;
.label {
padding: 18px 10px;