add lastfm and musicbrainz links to artist page
This commit is contained in:
parent
b074311122
commit
49a9499d1b
@ -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>
|
||||||
|
@ -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,
|
||||||
|
8
src/shared/components/ExternalLink.vue
Normal file
8
src/shared/components/ExternalLink.vue
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
<template functional>
|
||||||
|
<a :href="props.href"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
:class="[data.class, data.staticClass]">
|
||||||
|
<slot/>
|
||||||
|
</a>
|
||||||
|
</template>
|
@ -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,
|
||||||
|
Loading…
x
Reference in New Issue
Block a user