LastFM for supporting imagery; Album wiki from LastFM; fixes #369

This commit is contained in:
James Barnsley
2019-02-20 21:08:48 +13:00
parent 602c9d1fa1
commit 4d62e33109
13 changed files with 4182 additions and 3406 deletions

View File

@ -409,6 +409,10 @@ export let formatAlbum = function(data){
'type',
'added_at',
'release_date',
'listeners',
'play_count',
'wiki',
'wiki_publish_date',
'popularity',
'images',
'artists_uris',

View File

@ -272,20 +272,24 @@ export function getAlbum(uri, artist, album, mbid = false){
.then(
response => {
if (response.album){
var existing_album = getState().core.albums[uri];
var album = {
uri: uri,
images: response.album.image,
listeners: response.album.listeners,
play_count: response.album.playcount,
mbid: response.album.mbid
mbid: response.album.mbid,
wiki: (response.album.wiki ? response.album.wiki.content : null),
wiki_publish_date: (response.album.wiki ? response.album.wiki.published : null),
};
if (response.album.wiki){
album.wiki = response.album.wiki.content;
if (response.album.wiki.published){
album.wiki_publish_date = response.album.wiki.published;
}
// If we've already got some of this album and it has images aready, don't use our ones.
// In *most* cases this existing image will be perfectly suffice. This prevents an ugly
// flicker when the existing image is replaced by the LastFM one
if (existing_album && existing_album.images){
delete album.images;
}
dispatch(coreActions.albumLoaded(album));

View File

@ -1906,9 +1906,6 @@ const MopidyMiddleware = (function(){
var album = Object.assign(
{},
{
images: []
},
response[0].album,
{
source: 'local',
@ -1921,13 +1918,13 @@ const MopidyMiddleware = (function(){
store.dispatch(coreActions.albumLoaded(album));
store.dispatch(coreActions.artistsLoaded(artists));
// load artwork from LastFM
if (album.images.length <= 0){
// load artwork from LastFM
if (!response[0].album.images){
var mbid = helpers.getFromUri('mbid',album.uri);
if (mbid){
store.dispatch(lastfmActions.getAlbum(false, false, mbid));
} else {
store.dispatch(lastfmActions.getAlbum(album.artists[0].name, album.name));
store.dispatch(lastfmActions.getAlbum(album.uri, false, false, mbid));
} else if (artists && artists.length > 0){
store.dispatch(lastfmActions.getAlbum(album.uri, artists[0].name, album.name));
}
}

View File

@ -4,23 +4,24 @@ import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import ErrorMessage from '../components/ErrorMessage';
import Header from '../components/Header'
import TrackList from '../components/TrackList'
import Thumbnail from '../components/Thumbnail'
import Parallax from '../components/Parallax'
import ArtistSentence from '../components/ArtistSentence'
import ArtistGrid from '../components/ArtistGrid'
import FollowButton from '../components/Fields/FollowButton'
import Dater from '../components/Dater'
import LazyLoadListener from '../components/LazyLoadListener'
import ContextMenuTrigger from '../components/ContextMenuTrigger'
import Icon from '../components/Icon'
import Header from '../components/Header';
import TrackList from '../components/TrackList';
import Thumbnail from '../components/Thumbnail';
import Parallax from '../components/Parallax';
import ArtistSentence from '../components/ArtistSentence';
import ArtistGrid from '../components/ArtistGrid';
import FollowButton from '../components/Fields/FollowButton';
import Dater from '../components/Dater';
import LazyLoadListener from '../components/LazyLoadListener';
import ContextMenuTrigger from '../components/ContextMenuTrigger';
import Icon from '../components/Icon';
import * as helpers from '../helpers'
import * as coreActions from '../services/core/actions'
import * as uiActions from '../services/ui/actions'
import * as mopidyActions from '../services/mopidy/actions'
import * as spotifyActions from '../services/spotify/actions'
import * as helpers from '../helpers';
import * as coreActions from '../services/core/actions';
import * as uiActions from '../services/ui/actions';
import * as mopidyActions from '../services/mopidy/actions';
import * as spotifyActions from '../services/spotify/actions';
import * as lastfmActions from '../services/lastfm/actions';
class Album extends React.Component{
@ -31,6 +32,13 @@ class Album extends React.Component{
componentDidMount(){
this.setWindowTitle();
this.props.coreActions.loadAlbum(this.props.uri);
// We already have the album in our index, so it won't fire componentWillReceiveProps
if (this.props.album){
if (this.props.album.artists && this.props.album.wiki === undefined){
this.props.lastfmActions.getAlbum(this.props.album.uri, this.props.album.artists[0].name, this.props.album.name);
}
}
}
handleContextMenu(e){
@ -52,6 +60,13 @@ class Album extends React.Component{
}
}
// We have just received our full album or our album artists
if ((!this.props.album && nextProps.album) || (!this.props.album.artists && nextProps.album.artists)){
if (this.props.album.wiki === undefined){
this.props.lastfmActions.getAlbum(nextProps.album.uri, nextProps.album.artists[0].name, nextProps.album.name);
}
}
if (!this.props.album && nextProps.album){
this.setWindowTitle(nextProps.album);
}
@ -170,6 +185,14 @@ class Album extends React.Component{
/>
</section>
{album.wiki ? <section className="wiki">
<h4 className="wiki__title">About</h4>
<div className="wiki__text">
<p>{album.wiki}</p><br />
<div className="mid_grey-text">Published: { album.wiki_publish_date }</div>
</div>
</section> : null}
</div>
)
}
@ -197,7 +220,8 @@ const mapDispatchToProps = (dispatch) => {
coreActions: bindActionCreators(coreActions, dispatch),
uiActions: bindActionCreators(uiActions, dispatch),
mopidyActions: bindActionCreators(mopidyActions, dispatch),
spotifyActions: bindActionCreators(spotifyActions, dispatch)
spotifyActions: bindActionCreators(spotifyActions, dispatch),
lastfmActions: bindActionCreators(lastfmActions, dispatch)
}
}

View File

@ -1,31 +1,31 @@
import React from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import Link from '../components/Link';
import ErrorMessage from '../components/ErrorMessage';
import Header from '../components/Header'
import TrackList from '../components/TrackList'
import Thumbnail from '../components/Thumbnail'
import ArtistSentence from '../components/ArtistSentence'
import ArtistGrid from '../components/ArtistGrid'
import FollowButton from '../components/Fields/FollowButton'
import LastfmLoveButton from '../components/Fields/LastfmLoveButton'
import Dater from '../components/Dater'
import LazyLoadListener from '../components/LazyLoadListener'
import ContextMenuTrigger from '../components/ContextMenuTrigger'
import URILink from '../components/URILink'
import Icon from '../components/Icon'
import Popularity from '../components/Popularity'
import Header from '../components/Header';
import TrackList from '../components/TrackList';
import Thumbnail from '../components/Thumbnail';
import ArtistSentence from '../components/ArtistSentence';
import ArtistGrid from '../components/ArtistGrid';
import FollowButton from '../components/Fields/FollowButton';
import LastfmLoveButton from '../components/Fields/LastfmLoveButton';
import Dater from '../components/Dater';
import LazyLoadListener from '../components/LazyLoadListener';
import ContextMenuTrigger from '../components/ContextMenuTrigger';
import URILink from '../components/URILink';
import Icon from '../components/Icon';
import Popularity from '../components/Popularity';
import * as helpers from '../helpers'
import * as coreActions from '../services/core/actions'
import * as uiActions from '../services/ui/actions'
import * as mopidyActions from '../services/mopidy/actions'
import * as spotifyActions from '../services/spotify/actions'
import * as lastfmActions from '../services/lastfm/actions'
import * as geniusActions from '../services/genius/actions'
import * as helpers from '../helpers';
import * as coreActions from '../services/core/actions';
import * as uiActions from '../services/ui/actions';
import * as mopidyActions from '../services/mopidy/actions';
import * as spotifyActions from '../services/spotify/actions';
import * as lastfmActions from '../services/lastfm/actions';
import * as geniusActions from '../services/genius/actions';
class Track extends React.Component{

View File

@ -39,6 +39,10 @@ main .album-view {
}
}
.wiki {
padding-top: 40px;
}
@include responsive(null, $bp_medium){
.parallax {
height: 30vh;