From db365117f59f01029694bc0389ed953a6476af4b Mon Sep 17 00:00:00 2001
From: nukeop <nukeop@gumblert.tech>
Date: Sat, 22 Feb 2020 03:22:06 +0100
Subject: [PATCH] Fix artist/album pages

---
 .../app/app/components/AlbumView/index.js     |  2 +-
 .../components/ArtistView/ArtistTags/index.js | 61 ++++++++++---------
 .../ArtistView/PopularTracks/index.js         |  4 +-
 .../ArtistView/SimilarArtists/styles.scss     |  2 +-
 .../app/app/components/ArtistView/index.js    |  6 +-
 packages/app/app/components/TrackRow/index.js | 12 +++-
 packages/core/src/plugins/meta/discogs.ts     | 18 +++---
 packages/core/src/plugins/meta/musicbrainz.ts |  2 +-
 packages/core/src/plugins/plugins.types.ts    |  2 +-
 packages/core/src/rest/Discogs.types.ts       |  4 +-
 packages/ui/lib/components/SearchBox/index.js |  1 +
 11 files changed, 64 insertions(+), 50 deletions(-)

diff --git a/packages/app/app/components/AlbumView/index.js b/packages/app/app/components/AlbumView/index.js
index 11500ab1eb..182ee5f9c0 100644
--- a/packages/app/app/components/AlbumView/index.js
+++ b/packages/app/app/components/AlbumView/index.js
@@ -99,7 +99,7 @@ class AlbumView extends React.Component {
   }
 
   getAlbumImage (album) {
-    return _.get(album, 'coverImage.uri');
+    return _.get(album, 'coverImage');
   }
 
   renderAlbumArtistName (album) {
diff --git a/packages/app/app/components/ArtistView/ArtistTags/index.js b/packages/app/app/components/ArtistView/ArtistTags/index.js
index ab07b046b5..964e401b0b 100644
--- a/packages/app/app/components/ArtistView/ArtistTags/index.js
+++ b/packages/app/app/components/ArtistView/ArtistTags/index.js
@@ -1,35 +1,38 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import { withRouter } from 'react-router-dom';
+import { compose, withHandlers } from 'recompose';
 
 import styles from './styles.scss';
 
-class ArtistTags extends React.Component {
-  constructor(props) {
-    super(props);
-  }
+const ArtistTags = ({
+  tags,
+  onTagClick
+}) => (
+  <div className={styles.tags_container}>
+    {
+      tags && tags.length > 0 &&
+        tags.map((tag, i) => {
+          return (
+            <a
+              href='#'
+              onClick={() => onTagClick(tag)}
+              key={i}
+              className={styles.tag}
+            >#{tag}</a>
+          );
+        })
+    }
+  </div>
+);
 
-  onTagClick(tag) {
-    this.props.history.push('/tag/' + tag);
-  }
+ArtistTags.propTypes = {
+  tags: PropTypes.arrayOf(PropTypes.string)
+};
 
-  render() {
-    return (
-      <div className={styles.tags_container}>
-        {
-          this.props.tags && this.props.tags.length > 0 &&
-          this.props.tags.map((el, i) => {
-            return (
-              <a
-                href='#'
-                onClick={() => this.onTagClick.bind(this)(el.name)}
-                key={i}
-                className={styles.tag}
-              >#{el.name}</a>
-            );
-          })
-        }
-      </div>
-    );
-  }
-}
-
-export default ArtistTags;
+export default compose(
+  withRouter,
+  withHandlers({
+    onTagClick: ({ history }) => tag => history.push(`/tag/${tag}`)
+  })
+)(ArtistTags);
diff --git a/packages/app/app/components/ArtistView/PopularTracks/index.js b/packages/app/app/components/ArtistView/PopularTracks/index.js
index 8b7f97ce76..550fe511a1 100644
--- a/packages/app/app/components/ArtistView/PopularTracks/index.js
+++ b/packages/app/app/components/ArtistView/PopularTracks/index.js
@@ -37,7 +37,7 @@ class PopularTracks extends React.Component {
               this.props.addToQueue(this.props.streamProviders, {
                 artist: artist.name,
                 name: track.name,
-                thumbnail: track.thumbnail || track.image[0]['#text'] || artPlaceholder
+                thumbnail: track.thumb || artPlaceholder
               });
             });
         }}
@@ -71,7 +71,7 @@ class PopularTracks extends React.Component {
           </thead>
           <tbody>
             {
-              _.get(tracks, 'track', [])
+              tracks
                 .slice(0, this.state.expanded ? 15 : 5)
                 .map((track, index) => {
                   return (
diff --git a/packages/app/app/components/ArtistView/SimilarArtists/styles.scss b/packages/app/app/components/ArtistView/SimilarArtists/styles.scss
index 6e88561277..0635e30076 100644
--- a/packages/app/app/components/ArtistView/SimilarArtists/styles.scss
+++ b/packages/app/app/components/ArtistView/SimilarArtists/styles.scss
@@ -23,7 +23,7 @@
     margin: 0.15rem 0;
     padding: 0.5rem;
 
-    transition: $short-duration ease-in-out;
+    transition: $short-duration;
 
     border-radius: 2px;
     background: $background2;
diff --git a/packages/app/app/components/ArtistView/index.js b/packages/app/app/components/ArtistView/index.js
index bf94a39cb5..359f6a4dad 100644
--- a/packages/app/app/components/ArtistView/index.js
+++ b/packages/app/app/components/ArtistView/index.js
@@ -35,7 +35,7 @@ class ArtistView extends React.Component {
             className={styles.artist_avatar}
             style={{
               background: `url('${
-                _.get(artist, 'images[1].resource_url', artPlaceholder)
+                _.get(artist, 'images[1]', artPlaceholder)
               }')`,
               backgroundRepeat: 'noRepeat',
               backgroundPosition: 'center',
@@ -92,7 +92,7 @@ class ArtistView extends React.Component {
     return (
       !this.isLoading() &&
         <SimilarArtists
-          artists={_.get(artist, 'lastfm.artist.similar.artist', [])}
+          artists={_.get(artist, 'similar', [])}
           artistInfoSearchByName={artistInfoSearchByName}
           history={history}
         />
@@ -106,7 +106,7 @@ class ArtistView extends React.Component {
       <div
         style={{
           background: `url('${
-            _.get(artist, 'images[0].resource_url', artPlaceholder)
+            _.get(artist, 'coverImage', artPlaceholder)
           }')`,
           backgroundRepeat: 'noRepeat',
           backgroundPosition: 'center',
diff --git a/packages/app/app/components/TrackRow/index.js b/packages/app/app/components/TrackRow/index.js
index ac838ecaca..45462020b7 100644
--- a/packages/app/app/components/TrackRow/index.js
+++ b/packages/app/app/components/TrackRow/index.js
@@ -47,8 +47,16 @@ class TrackRow extends React.Component {
   getTrackThumbnail() {
     const thumb = _.get(
       this.props.track,
-      'thumbnail',
-      _.get(this.props.track, 'image[0][#text]', artPlaceholder)
+      'thumb',
+      _.get(
+        this.props.track,
+        'thumbnail',
+        _.get(
+          this.props.track, 
+          'image[0][#text]', 
+          artPlaceholder
+        )
+      )
     );
 
     return thumb === '' ? artPlaceholder : thumb;
diff --git a/packages/core/src/plugins/meta/discogs.ts b/packages/core/src/plugins/meta/discogs.ts
index c0af17c8d1..662782d3ea 100644
--- a/packages/core/src/plugins/meta/discogs.ts
+++ b/packages/core/src/plugins/meta/discogs.ts
@@ -44,8 +44,8 @@ class DiscogsMetaProvider extends MetaProvider {
 
     return {
       id: `${release.id}`,
-      coverImage: release.cover_image.resource_url,
-      thumb: release.cover_image.resource_url,
+      coverImage: release.cover_image,
+      thumb: release.cover_image,
       title: match.groups.album,
       artist: match.groups.artist,
       resourceUrl: release.resource_url,
@@ -54,14 +54,15 @@ class DiscogsMetaProvider extends MetaProvider {
   }
 
   discogsReleaseInfoToGeneric(release: DiscogsReleaseInfo, releaseType: AlbumType): AlbumDetails {
-    const primaryImage = _.find(release.images, { type: 'primary' });
     const artist = _.head(release.artists).name;
+    const coverImage = _.get(_.find(release.images, { type: 'primary' }), 'resource_url');
+
     return {
       ...release,
       id: `${release.id}`,
       artist: _.head(release.artists).name,
-      thumb: release.cover_image.resource_url,
-      coverImage: release.cover_image.resource_url,
+      thumb: coverImage,
+      coverImage: coverImage,
       images: _.map(release.images, 'resource_url'),
       genres: [...release.genres, ...release.styles],
       type: releaseType,
@@ -85,7 +86,7 @@ class DiscogsMetaProvider extends MetaProvider {
       .then(response => response.json())
       .then((json: DiscogsArtistSearchResponse) => json.results.map(artist => ({
         id: `${artist.id}`,
-        coverImage: artist.cover_image.resource_url,
+        coverImage: artist.cover_image,
         thumb: artist.thumb,
         name: artist.title,
         resourceUrl: artist.resource_url,
@@ -136,11 +137,12 @@ class DiscogsMetaProvider extends MetaProvider {
         title: track.name,
         thumb: (_.get(discogsInfo.images, 1) as DiscogsImage).resource_url,
         playcount: track.playcount,
-        listeners: track.listeners
+        listeners: track.listeners,
+        artist: track.artist
       })),
       similar: _.map(lastFmInfo.similar.artist, artist => ({
         name: artist.name,
-        thumbnail: _.find(artist.image, { size: 'large' })
+        thumbnail: _.get(_.find(artist.image, { size: 'large' }), '#text')
       })),
       source: SearchResultsSource.Discogs
     });
diff --git a/packages/core/src/plugins/meta/musicbrainz.ts b/packages/core/src/plugins/meta/musicbrainz.ts
index 7a7d2e8969..8e24e24431 100644
--- a/packages/core/src/plugins/meta/musicbrainz.ts
+++ b/packages/core/src/plugins/meta/musicbrainz.ts
@@ -110,7 +110,7 @@ class MusicbrainzMetaProvider extends MetaProvider {
       })),
       similar: _.map(lastFmInfo.similar.artist, artist => ({
         name: artist.name,
-        thumbnail: _.find(artist.image, { size: 'large' })
+        thumbnail: _.get(_.find(artist.image, { size: 'large' }), '#text')
       })),
       source: SearchResultsSource.Musicbrainz
     });
diff --git a/packages/core/src/plugins/plugins.types.ts b/packages/core/src/plugins/plugins.types.ts
index e69f3b083c..7932202584 100644
--- a/packages/core/src/plugins/plugins.types.ts
+++ b/packages/core/src/plugins/plugins.types.ts
@@ -39,7 +39,7 @@ export type SearchResultsTrack = {
 }
 
 export type ArtistTopTrack = {
-    artist: string;
+    artist: { name: string };
     title: string;
     thumb?: string;
     playcount?: number;
diff --git a/packages/core/src/rest/Discogs.types.ts b/packages/core/src/rest/Discogs.types.ts
index 1e5dfa357b..9f9aa4d9a5 100644
--- a/packages/core/src/rest/Discogs.types.ts
+++ b/packages/core/src/rest/Discogs.types.ts
@@ -27,7 +27,7 @@ export type DiscogsPagination = {
 
 export type DiscogsReleaseSearchResult = {
   id: number;
-  cover_image: DiscogsImage;
+  cover_image: string;
   genre: string[];
   style: string[];
   resource_url: string;
@@ -37,7 +37,7 @@ export type DiscogsReleaseSearchResult = {
 
 export type DiscogsArtistSearchResult = {
   id: number;
-  cover_image: DiscogsImage;
+  cover_image: string;
   resource_url: string;
   thumb: string;
   title: string;
diff --git a/packages/ui/lib/components/SearchBox/index.js b/packages/ui/lib/components/SearchBox/index.js
index a5b324d811..cc3f865983 100644
--- a/packages/ui/lib/components/SearchBox/index.js
+++ b/packages/ui/lib/components/SearchBox/index.js
@@ -25,6 +25,7 @@ const SearchBox = ({
   >
     <Icon name='search' disabled={disabled}/>
     <input
+      autoFocus
       placeholder={placeholder}
       onChange={onChange}
       disabled={disabled}