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

Playlists grid

Browse Source
This commit is contained in:
James Barnsley
2016-11-12 16:36:36 +13:00
parent c471ae62e7
commit c650a5e4ea
5 changed files with 28 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,6 +2,7 @@
import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import FontAwesome from 'react-fontawesome'
import TrackList from './TrackList'
import * as uiActions from '../services/ui/actions'
@ -82,6 +83,7 @@ class ContextMenu extends React.Component{
return (
<span key={item.handleClick} className="menu-item has-submenu">
{ item.label }
<FontAwesome name="caret-right" />
{ this.renderPlaylistSubmenu() }
</span>
)

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

@ -1,6 +1,7 @@
import React, { PropTypes } from 'react'
import { Link, browserHistory } from 'react-router'
import FontAwesome from 'react-fontawesome'
import Thumbnail from './Thumbnail'
import ArtistSentence from './ArtistSentence'
@ -37,8 +38,9 @@ export default class GridItem extends React.Component{
<div className="name">{ item.name }</div>
<div className="secondary">
{ item.artists ? <ArtistSentence artists={ item.artists } /> : null }
{ item.type == 'playlist' ? item.tracks.total+' tracks' : null }
{ item.type == 'playlist' && item.tracks ? item.tracks.total+' tracks' : null }
{ item.followers ? item.followers.total.toLocaleString()+' followers' : null }
{ item.type == 'playlist' && item.can_edit ? <FontAwesome name="edit" /> : null }
</div>
</div>
);

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

@ -4,7 +4,7 @@ import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { Link } from 'react-router'
import List from '../../components/List'
import PlaylistGrid from '../../components/PlaylistGrid'
import Header from '../../components/Header'
import * as mopidyActions from '../../services/mopidy/actions'
@ -19,9 +19,10 @@ class LibraryPlaylists extends React.Component{
render(){
if( !this.props.playlists ) return null
var columns = [
{ name: 'name', width: '40'},
{ name: 'name', width: '30'},
{ name: 'tracks.total', width: '15'},
{ name: 'can_edit', width: '15'},
{ name: 'uri', width: '45'}
{ name: 'uri', width: '40'}
]
return (
@ -29,8 +30,8 @@ class LibraryPlaylists extends React.Component{
<Header icon="playlist" title="My playlists" />
<section className="list-wrapper">
<List columns={columns} rows={this.props.playlists} link_prefix="/playlist/" />
<section className="grid-wrapper">
<PlaylistGrid playlists={this.props.playlists} />
</section>
</div>