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

Moving artist artwork checker to GridItem so we can detect mount

Browse Source
This commit is contained in:
James Barnsley
2018-02-21 12:58:32 +13:00
parent 8603ada14c
commit cce8ac527a
5 changed files with 38 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
src/js/components/ArtistGrid.js
View File

@ -2,13 +2,15 @@
import React, { PropTypes } from 'react'
import { connect } from 'react-redux'
import { createStore, bindActionCreators } from 'redux'
import { hashHistory } from 'react-router'
import FontAwesome from 'react-fontawesome'
import Thumbnail from './Thumbnail'
import URILink from './URILink'
import GridItem from './GridItem'
import * as helpers from '../helpers'
import * as uiActions from '../services/ui/actions'
import * as lastfmActions from '../services/lastfm/actions'
class ArtistGrid extends React.Component{
@ -40,22 +42,16 @@ class ArtistGrid extends React.Component{
this.props.artists.map(
(artist, index) => {
return (
<URILink
className="grid-item"
<GridItem
key={artist.uri}
type="artist"
uri={artist.uri}
key={index}
onContextMenu={e => this.handleContextMenu(e,artist)}>
<Thumbnail size="medium" images={artist.images} />
<div className="name">
{artist.name}
</div>
<div className="secondary">
{this.props.show_source_icon ? <FontAwesome name={helpers.sourceIcon(artist.uri)} className="source" /> : null}
{artist.followers ? artist.followers.total.toLocaleString()+' followers' : null}
{artist.albums_uris && !artist.followers ? artist.albums_uris.length+' albums' : null}
</div>
</URILink>
item={artist}
show_source_icon={this.props.show_source_icon}
onClick={e => {hashHistory.push(global.baseURL+'artist/'+encodeURIComponent(artist.uri))}}
onLoad={() => this.handleLoad(artist.uri)}
lastfmActions={this.props.lastfmActions}
onContextMenu={e => this.handleContextMenu(e,artist)}
/>
)
}
)
@ -73,7 +69,8 @@ const mapStateToProps = (state, ownProps) => {
const mapDispatchToProps = (dispatch) => {
return {
uiActions: bindActionCreators(uiActions, dispatch)
uiActions: bindActionCreators(uiActions, dispatch),
lastfmActions: bindActionCreators(lastfmActions, dispatch)
}
}

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

@ -14,6 +14,16 @@ export default class GridItem extends React.Component{
super(props)
}
componentDidMount(){
if (this.props.item && !this.props.item.images){
switch (this.props.item.type){
case 'artist':
this.props.lastfmActions.getArtist(this.props.item.uri, this.props.item.name);
break;
}
}
}
handleClick(e){
if (this.props.onClick && e.target.tagName.toLowerCase() !== 'a'){
this.props.onClick(e)
@ -27,7 +37,7 @@ export default class GridItem extends React.Component{
}
shouldComponentUpdate(nextProps, nextState){
return nextProps.item != this.props.item
return nextProps.item != this.props.item;
}
renderSecondary(item){
@ -46,7 +56,8 @@ export default class GridItem extends React.Component{
case 'artist':
return (
<span>
{item.followers ? item.followers.total.toLocaleString()+' followers' : item.albums_uris.length+' albums'}
{item.followers ? item.followers.total.toLocaleString()+' followers' : null}
{item.albums_uris ? item.albums_uris.length+' albums' : null}
</span>
)
break

30
src/js/services/mopidy/middleware.js
View File

@ -1544,8 +1544,6 @@ const MopidyMiddleware = (function(){
* =============================================================== ARTIST(S) ============
* ======================================================================================
**/
/*
case 'MOPIDY_GET_LIBRARY_ARTISTS':
instruct(socket, store, 'library.browse', { uri: 'local:directory?type=artist' } )
.then(response => {
@ -1562,25 +1560,14 @@ const MopidyMiddleware = (function(){
type: 'MOPIDY_LIBRARY_ARTISTS_LOADED',
uris: uris
});
// TODO: Load LastFM artwork?
console.log(response);
// Get artwork for first 20
for (var i = 0; i < response.length && i < 20; i++){
store.dispatch(lastfmActions.getArtist(response[i].uri, response[i].name));
}
});
break;
*/
/**
* TODO: Fetch and process library artists
*
* We can't get specific artist artwork from Mopidy. Perhaps we fetch additional
* artist metadata via LastFM? Their API limits will make this quite slow.
**/
case 'MOPIDY_GET_LIBRARY_ARTISTS':
var last_run = store.getState().ui.processes.MOPIDY_LIBRARY_ARTISTS_PROCESSOR
@ -1630,6 +1617,7 @@ const MopidyMiddleware = (function(){
}
break;
**/
case 'MOPIDY_GET_ARTIST':
instruct(socket, store, 'library.lookup', action.data )
@ -1672,7 +1660,7 @@ const MopidyMiddleware = (function(){
albums_uris: helpers.arrayOf('uri',albums),
tracks: response.slice(0,10)
}
);
);
store.dispatch({
type: 'ARTIST_LOADED',
key: artist.uri,
@ -1680,9 +1668,10 @@ const MopidyMiddleware = (function(){
});
// load artwork from LastFM
if (!artist.images || artist.images.length <= 0){
var existing_artist = store.getState().core.artists[artist.uri];
if (existing_artist && !existing_artist.images){
if (artist.musicbrainz_id){
store.dispatch(lastfmActions.getArtist(artist.uri, false, artist.musicbrainz_id ) )
store.dispatch(lastfmActions.getArtist(artist.uri, false, artist.musicbrainz_id))
} else {
store.dispatch(lastfmActions.getArtist(artist.uri, artist.name))
}
@ -1707,15 +1696,6 @@ const MopidyMiddleware = (function(){
}
);
artists.push(artist);
// load artwork from LastFM
if (!artist.images || artist.images.length <= 0){
if (artist.musicbrainz_id){
store.dispatch(lastfmActions.getArtist(artist.uri, false, artist.musicbrainz_id ) )
} else {
store.dispatch(lastfmActions.getArtist(artist.uri, artist.name))
}
}
}
}

2
src/js/views/Artist.js
View File

@ -68,7 +68,7 @@ class Artist extends React.Component{
default:
if (props.mopidy_connected){
if (props.artist && props.artist.images){
if (props.artist && props.artist.images && props.artist.albums_uris){
console.info('Loading local artist from index');
} else {
this.props.mopidyActions.getArtist(props.params.uri);

10
src/js/views/library/LibraryArtists.js
View File

@ -29,7 +29,7 @@ class LibraryArtists extends React.Component{
}
componentDidMount(){
if (this.props.mopidy_library_artists_status != 'finished' && this.props.mopidy_connected && (this.props.source == 'all' || this.props.source == 'local')){
if (!this.props.mopidy_library_artists && this.props.mopidy_connected && (this.props.source == 'all' || this.props.source == 'local')){
this.props.mopidyActions.getLibraryArtists();
}
@ -47,7 +47,7 @@ class LibraryArtists extends React.Component{
}
// Filter changed, but we haven't got this provider's library yet
if (this.props.source != 'all' && this.props.source != 'local' && newProps.mopidy_library_artists_status != 'finished'){
if (this.props.source != 'all' && this.props.source != 'local' && !newProps.mopidy_library_artists){
this.props.mopidyActions.getLibraryArtists();
}
}
@ -77,7 +77,7 @@ class LibraryArtists extends React.Component{
}
loadMore(){
console.log('Load more')
console.log('Load more');
this.setState({limit: this.state.limit + this.state.per_page});
}
@ -89,11 +89,11 @@ class LibraryArtists extends React.Component{
library_artists_sort_reverse: reverse,
library_artists_sort: value
}
this.props.uiActions.set(data)
this.props.uiActions.set(data);
}
renderView(){
var artists = []
var artists = [];
// Mopidy library items
if (this.props.mopidy_library_artists && (this.props.source == 'all' || this.props.source == 'local')){