add lastfm and musicbrainz links to artist page

This commit is contained in:
Thomas Amland 2020-08-02 14:22:38 +02:00
parent b074311122
commit 49a9499d1b
4 changed files with 19 additions and 7 deletions

View File

@ -1,12 +1,15 @@
<template> <template>
<div v-if="item"> <div v-if="item">
<div class="row mb-2"> <div class="row">
<!-- <div class="col"> -->
<!-- <b-img height="300" width="300" :src="item.image"></b-img> -->
<!-- </div> -->
<div class="col col-xl-8"> <div class="col col-xl-8">
<h1>{{ item.name }}</h1> <h1>{{ item.name }}</h1>
<p>{{ item.description }}</p> <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>
</div> </div>
<h3 class="pt-5">Albums</h3> <h3 class="pt-5">Albums</h3>

View File

@ -100,14 +100,13 @@ export class API {
this.get("rest/getArtistInfo2", params).then(r => r.artistInfo2), this.get("rest/getArtistInfo2", params).then(r => r.artistInfo2),
]) ])
return { return {
info1,
info2,
id: info1.id, id: info1.id,
name: info1.name, name: info1.name,
description: info2.biography, description: info2.biography,
image: info2.largeImageUrl || info2.mediumImageUrl || info2.smallImageUrl, image: info2.largeImageUrl || info2.mediumImageUrl || info2.smallImageUrl,
lastFmUrl: info2.lastFmUrl, 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)), albums: info1.album.map((album: any) => this.normalizeAlbumResponse(album)),
similarArtist: (info2.similarArtist || []).map((artist: any) => ({ similarArtist: (info2.similarArtist || []).map((artist: any) => ({
id: artist.id, id: artist.id,

View File

@ -0,0 +1,8 @@
<template functional>
<a :href="props.href"
target="_blank"
rel="noopener noreferrer"
:class="[data.class, data.staticClass]">
<slot/>
</a>
</template>

View File

@ -1,4 +1,5 @@
import Vue from 'vue'; import Vue from 'vue';
import ExternalLink from "./ExternalLink.vue";
import Icon from "./Icon.vue"; import Icon from "./Icon.vue";
import OverflowMenu from "./OverflowMenu.vue"; import OverflowMenu from "./OverflowMenu.vue";
import Spinner from "./Spinner.vue"; import Spinner from "./Spinner.vue";
@ -6,6 +7,7 @@ import Tiles from "./Tiles.vue";
import Tile from "./Tile.vue"; import Tile from "./Tile.vue";
const components = { const components = {
ExternalLink,
Icon, Icon,
OverflowMenu, OverflowMenu,
Spinner, Spinner,