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