diff --git a/src/js/components/AlbumGrid.js b/src/js/components/AlbumGrid.js
index 1f377397..95a18310 100755
--- a/src/js/components/AlbumGrid.js
+++ b/src/js/components/AlbumGrid.js
@@ -1,18 +1,15 @@
import React from 'react';
import { connect } from 'react-redux';
-import { createStore, bindActionCreators } from 'redux';
+import { bindActionCreators } from 'redux';
import * as uiActions from '../services/ui/actions';
+import * as mopidyActions from '../services/mopidy/actions';
import * as lastfmActions from '../services/lastfm/actions';
import GridItem from './GridItem';
class AlbumGrid extends React.Component {
- constructor(props) {
- super(props);
- }
-
handleContextMenu(e, item) {
e.preventDefault();
const data = {
@@ -41,6 +38,7 @@ class AlbumGrid extends React.Component {
type="album"
item={album}
lastfmActions={this.props.lastfmActions}
+ mopidyActions={this.props.mopidyActions}
show_source_icon={this.props.show_source_icon}
onContextMenu={(e) => this.handleContextMenu(e, album)}
/>
@@ -60,6 +58,7 @@ const mapStateToProps = (state, ownProps) => ({
const mapDispatchToProps = (dispatch) => ({
uiActions: bindActionCreators(uiActions, dispatch),
lastfmActions: bindActionCreators(lastfmActions, dispatch),
+ mopidyActions: bindActionCreators(mopidyActions, dispatch),
});
export default connect(mapStateToProps, mapDispatchToProps)(AlbumGrid);
diff --git a/src/js/components/GridItem.js b/src/js/components/GridItem.js
index c6a9ad1e..e30391c7 100755
--- a/src/js/components/GridItem.js
+++ b/src/js/components/GridItem.js
@@ -4,6 +4,7 @@ import {
uriType,
scrollTo,
sourceIcon,
+ uriSource,
} from '../util/helpers';
import Link from './Link';
import Icon from './Icon';
@@ -14,42 +15,44 @@ export default class GridItem extends React.Component {
componentDidMount() {
const {
lastfmActions,
+ mopidyActions,
spotifyActions,
spotifyAvailable,
item,
} = this.props;
- if (!item) return;
- // If the item that has just been mounted doesn't have images,
- // try fetching them from LastFM or Discogs
- if (!item.images) {
- switch (uriType(item.uri)) {
- case 'artist':
- if (spotifyActions && spotifyAvailable) {
- spotifyActions.getArtistImages(item);
- }
- break;
+ if (!item || item.images) return;
- case 'album':
- if (lastfmActions && item.artists && item.artists.length > 0) {
- lastfmActions.getAlbum(item.uri, item.artists[0].name, item.name, (item.mbid ? item.mbid : null));
- }
- break;
- }
+ switch (uriType(item.uri)) {
+ case 'artist':
+ if (spotifyActions && spotifyAvailable) {
+ spotifyActions.getArtistImages(item);
+ }
+ break;
+
+ case 'album':
+ // If Mopidy doesn't find any images, then it will pass on the call to LastFM
+ mopidyActions.getImages('albums', [item.uri]);
+ break;
+
+ default:
+ break;
}
}
- onContextMenu(e) {
- if (this.props.onContextMenu) {
- this.props.onContextMenu(e);
+ shouldComponentUpdate = (nextProps) => {
+ const { item } = this.props;
+ return nextProps.item !== item;
+ }
+
+ onContextMenu = (e) => {
+ const { onContextMenu } = this.props;
+ if (onContextMenu) {
+ onContextMenu(e);
}
}
- shouldComponentUpdate(nextProps, nextState) {
- return nextProps.item != this.props.item;
- }
-
- renderSecondary(item) {
+ renderSecondary = (item) => {
const output = '';
const link_to = null;
@@ -95,46 +98,43 @@ tracks
return output;
}
- render() {
- if (!this.props.item) {
- return null;
- }
+ render = () => {
+ const { item, link: customLink, type, show_source_icon } = this.props;
+ if (!item) return null;
+
+ const album = {
+ ...item.album,
+ added_at: item.album && item.album.added_at,
+ };
- let { item } = this.props;
- if (item.album !== undefined) {
- item.album.added_at = item.added_at;
- item = item.album;
- }
let images = null;
- if (this.props.item.images) {
- if (Array.isArray(this.props.item.images)) {
- images = this.props.item.images[0];
+ if (album.images) {
+ if (Array.isArray(album.images)) {
+ images = album.images[0];
} else {
- images = this.props.item.images;
+ images = album.images;
}
- } else if (this.props.item.icons) {
- images = this.props.item.icons;
+ } else if (item.icons) {
+ images = item.icons;
}
- if (this.props.link) {
- var { link } = this.props;
- } else {
- var link = `/${this.props.type}/${encodeURIComponent(item.uri)}`;
- }
+ const link = customLink || `/${type}/${encodeURIComponent(item.uri)}`;
return (
scrollTo()}
- onContextMenu={(e) => this.onContextMenu(e)}
+ onClick={scrollTo}
+ onContextMenu={this.onContextMenu}
>