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} >
{item.name ? item.name : {item.uri}}
- {this.props.show_source_icon ? : null} + {show_source_icon && ( + + )} {this.renderSecondary(item)}
diff --git a/src/js/services/mopidy/middleware.js b/src/js/services/mopidy/middleware.js index 7130c821..f6edd7c4 100755 --- a/src/js/services/mopidy/middleware.js +++ b/src/js/services/mopidy/middleware.js @@ -2329,7 +2329,7 @@ const MopidyMiddleware = (function () { let images = response[uri]; images = formatImages(digestMopidyImages(store.getState().mopidy, images)); - if (images && images.length > 0) { + if (images) { records.push({ uri, images,