diff --git a/src/js/components/AlbumGrid.js b/src/js/components/AlbumGrid.js index a981989d..63184cf9 100755 --- a/src/js/components/AlbumGrid.js +++ b/src/js/components/AlbumGrid.js @@ -1,13 +1,33 @@ import React, { PropTypes } from 'react' -import GridItem from './GridItem' +import { connect } from 'react-redux' +import { createStore, bindActionCreators } from 'redux' +import { hashHistory } from 'react-router' +import FontAwesome from 'react-fontawesome' -export default class AlbumGrid extends React.Component{ +import Thumbnail from './Thumbnail' +import ArtistSentence from './ArtistSentence' + +import * as uiActions from '../services/ui/actions' + +class AlbumGrid extends React.Component{ constructor(props) { super(props); } + handleClick(e,link){ + if( e.target.tagName.toLowerCase() !== 'a' ){ + hashHistory.push(link) + } + } + + handleContextMenu(e,uri){ + e.preventDefault() + var data = { uris: [uri] } + this.props.uiActions.showContextMenu( e, data, 'album', 'click' ) + } + render(){ if( this.props.albums ){ var className = "grid album-grid" @@ -17,7 +37,18 @@ export default class AlbumGrid extends React.Component{ { this.props.albums.map( (album, index) => { - return + return ( +
this.handleClick(e,global.baseURL+'album/'+album.uri) } + onContextMenu={e => this.handleContextMenu(e,album.uri)}> + +
{ album.name }
+
+ { album.artists ? : - } +
+
+ ) } ) } @@ -28,3 +59,15 @@ export default class AlbumGrid extends React.Component{ } } +const mapStateToProps = (state, ownProps) => { + return {} +} + +const mapDispatchToProps = (dispatch) => { + return { + uiActions: bindActionCreators(uiActions, dispatch) + } +} + +export default connect(mapStateToProps, mapDispatchToProps)(AlbumGrid) + diff --git a/src/js/components/ArtistGrid.js b/src/js/components/ArtistGrid.js index 7dc83808..4747183e 100755 --- a/src/js/components/ArtistGrid.js +++ b/src/js/components/ArtistGrid.js @@ -1,13 +1,25 @@ import React, { PropTypes } from 'react' -import GridItem from './GridItem' +import { connect } from 'react-redux' +import { createStore, bindActionCreators } from 'redux' +import { Link } from 'react-router' -export default class ArtistGrid extends React.Component{ +import Thumbnail from './Thumbnail' + +import * as uiActions from '../services/ui/actions' + +class ArtistGrid extends React.Component{ constructor(props) { super(props); } + handleContextMenu(e,uri){ + e.preventDefault() + var data = { uris: [uri] } + this.props.uiActions.showContextMenu( e, data, 'artist', 'click' ) + } + render(){ if( this.props.artists ){ var className = "grid artist-grid" @@ -17,7 +29,19 @@ export default class ArtistGrid extends React.Component{ { this.props.artists.map( (artist, index) => { - return + return ( + this.handleContextMenu(e,artist.uri)}> + +
{ artist.name }
+
+ {artist.followers ? artist.followers.total.toLocaleString()+' followers' : 0 followers} +
+ + ) } ) } @@ -28,3 +52,15 @@ export default class ArtistGrid extends React.Component{ } } +const mapStateToProps = (state, ownProps) => { + return {} +} + +const mapDispatchToProps = (dispatch) => { + return { + uiActions: bindActionCreators(uiActions, dispatch) + } +} + +export default connect(mapStateToProps, mapDispatchToProps)(ArtistGrid) + diff --git a/src/js/components/ContextMenu.js b/src/js/components/ContextMenu.js index a8a9cea8..c30f9638 100755 --- a/src/js/components/ContextMenu.js +++ b/src/js/components/ContextMenu.js @@ -154,7 +154,15 @@ class ContextMenu extends React.Component{ { handleClick: 'playURIs', label: 'Play', icon: 'play' }, { handleClick: 'playURIsNext', label: 'Play next', icon: 'play' }, { handleClick: 'addToQueue', label: 'Add to queue', icon: 'plus' }, - { handleClick: 'copyURIs', label: 'Copy URIs', icon: 'copy' } + { handleClick: 'copyURIs', label: 'Copy URI', icon: 'copy' } + ] + break + + case 'artist': + var items = [ + { handleClick: 'startRadio', label: 'Start radio', icon: 'spotify' }, + { handleClick: 'toggleFollow', label: 'Follow/unfollow', icon: 'toggle-on' }, + { handleClick: 'copyURIs', label: 'Copy URI', icon: 'copy' } ] break diff --git a/src/js/components/Thumbnail.js b/src/js/components/Thumbnail.js index e0a2f217..f6e08e18 100755 --- a/src/js/components/Thumbnail.js +++ b/src/js/components/Thumbnail.js @@ -39,13 +39,6 @@ class Thumbnail extends React.Component{ return false } - handleContextMenu(e){ - if (this.props.handleContextMenu){ - e.preventDefault() - this.props.handleContextMenu(e) - } - } - mapImageSizes( props = this.props ){ // no images @@ -82,7 +75,7 @@ class Thumbnail extends React.Component{ } return ( -
this.handleContextMenu(e) }> +
{zoom_icon}
diff --git a/src/js/services/mopidy/middleware.js b/src/js/services/mopidy/middleware.js index 316c4575..7782d204 100755 --- a/src/js/services/mopidy/middleware.js +++ b/src/js/services/mopidy/middleware.js @@ -268,7 +268,7 @@ const MopidyMiddleware = (function(){ // add the rest of our uris (if any) action.uris.shift(); if( action.uris.length > 0 ){ - store.dispatch( mopidyActions.enqueueTracks( action.uris, 1 ) ) + store.dispatch( mopidyActions.enqueueURIs( action.uris, 1 ) ) } }) break; diff --git a/src/scss/components/_grid.scss b/src/scss/components/_grid.scss index fe916bf4..6b65b4e3 100755 --- a/src/scss/components/_grid.scss +++ b/src/scss/components/_grid.scss @@ -16,6 +16,10 @@ .grid { + .grid-item-wrapper { + display: inline-block; + } + .grid-item { display: inline-block; vertical-align: top;