From 49a9499d1bbfd148d35c8aff6597bff12108fe53 Mon Sep 17 00:00:00 2001
From: Thomas Amland <thomas.amland@gmail.com>
Date: Sun, 2 Aug 2020 14:22:38 +0200
Subject: [PATCH] add lastfm and musicbrainz links to artist page

---
 src/library/artist/ArtistDetails.vue   | 11 +++++++----
 src/shared/api.ts                      |  5 ++---
 src/shared/components/ExternalLink.vue |  8 ++++++++
 src/shared/components/index.ts         |  2 ++
 4 files changed, 19 insertions(+), 7 deletions(-)
 create mode 100644 src/shared/components/ExternalLink.vue

diff --git a/src/library/artist/ArtistDetails.vue b/src/library/artist/ArtistDetails.vue
index 0752586..3c1f01b 100644
--- a/src/library/artist/ArtistDetails.vue
+++ b/src/library/artist/ArtistDetails.vue
@@ -1,12 +1,15 @@
 <template>
   <div v-if="item">
-    <div class="row mb-2">
-      <!-- <div class="col"> -->
-        <!-- <b-img height="300" width="300" :src="item.image"></b-img> -->
-      <!-- </div> -->
+    <div class="row">
       <div class="col col-xl-8">
         <h1>{{ item.name }}</h1>
         <p>{{ item.description }}</p>
+        <ExternalLink v-if="item.lastFmUrl" :href="item.lastFmUrl" class="btn btn-secondary mr-2">
+          Last.fm
+        </ExternalLink>
+        <ExternalLink v-if="item.musicBrainzUrl" :href="item.musicBrainzUrl" class="btn btn-secondary">
+          MusicBrainz
+        </ExternalLink>
       </div>
     </div>
     <h3 class="pt-5">Albums</h3>
diff --git a/src/shared/api.ts b/src/shared/api.ts
index 05cf1f4..f74e9a6 100644
--- a/src/shared/api.ts
+++ b/src/shared/api.ts
@@ -100,14 +100,13 @@ export class API {
       this.get("rest/getArtistInfo2", params).then(r => r.artistInfo2),
     ])
     return {
-      info1,
-      info2,
       id: info1.id,
       name: info1.name,
       description: info2.biography,
       image: info2.largeImageUrl || info2.mediumImageUrl || info2.smallImageUrl,
       lastFmUrl: info2.lastFmUrl,
-      musicBrainzId: info2.musicBrainzId,
+      musicBrainzUrl: info2.musicBrainzId
+        ? `https://musicbrainz.org/artist/${info2.musicBrainzId}` : null,
       albums: info1.album.map((album: any) => this.normalizeAlbumResponse(album)),
       similarArtist: (info2.similarArtist || []).map((artist: any) => ({
         id: artist.id,
diff --git a/src/shared/components/ExternalLink.vue b/src/shared/components/ExternalLink.vue
new file mode 100644
index 0000000..a5bfc44
--- /dev/null
+++ b/src/shared/components/ExternalLink.vue
@@ -0,0 +1,8 @@
+<template functional>
+  <a :href="props.href"
+    target="_blank"
+    rel="noopener noreferrer"
+    :class="[data.class, data.staticClass]">
+    <slot/>
+  </a>
+</template>
\ No newline at end of file
diff --git a/src/shared/components/index.ts b/src/shared/components/index.ts
index fcc3af9..b3c58b8 100644
--- a/src/shared/components/index.ts
+++ b/src/shared/components/index.ts
@@ -1,4 +1,5 @@
 import Vue from 'vue';
+import ExternalLink from "./ExternalLink.vue";
 import Icon from "./Icon.vue";
 import OverflowMenu from "./OverflowMenu.vue";
 import Spinner from "./Spinner.vue";
@@ -6,6 +7,7 @@ import Tiles from "./Tiles.vue";
 import Tile from "./Tile.vue";
 
 const components = {
+  ExternalLink,
   Icon,
   OverflowMenu,
   Spinner,