123 lines
4.3 KiB
Vue
123 lines
4.3 KiB
Vue
<template>
|
|
<div>
|
|
<v-list-item @click='click' v-if='!card' @contextmenu.prevent="menu = true">
|
|
<v-list-item-avatar>
|
|
<v-img :src='artist.picture.thumb'></v-img>
|
|
</v-list-item-avatar>
|
|
<v-list-item-content>
|
|
<v-list-item-title>{{artist.name}}</v-list-item-title>
|
|
<v-list-item-subtitle v-if='!tiny'>{{$abbreviation(artist.fans)}} {{$t("fans")}}</v-list-item-subtitle>
|
|
</v-list-item-content>
|
|
<v-list-item-action>
|
|
<!-- Context menu -->
|
|
<v-menu v-model='menu' offset-y offset-x absolue>
|
|
<template v-slot:activator="{on, attrs}">
|
|
<v-btn v-on='on' v-bind='attrs' icon>
|
|
<v-icon>mdi-dots-vertical</v-icon>
|
|
</v-btn>
|
|
</template>
|
|
<v-list dense>
|
|
<!-- Add library -->
|
|
<v-list-item dense @click='library' v-if='!artist.library'>
|
|
<v-list-item-icon>
|
|
<v-icon>mdi-heart</v-icon>
|
|
</v-list-item-icon>
|
|
<v-list-item-content>
|
|
<v-list-item-title>{{$t("Add to library")}}</v-list-item-title>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
<!-- Remove from library -->
|
|
<v-list-item dense @click='library' v-if='artist.library'>
|
|
<v-list-item-icon>
|
|
<v-icon>mdi-heart-remove</v-icon>
|
|
</v-list-item-icon>
|
|
<v-list-item-content>
|
|
<v-list-item-title>{{$t("Remove from library")}}</v-list-item-title>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
<!-- Share -->
|
|
<v-list-item dense @click='share'>
|
|
<v-list-item-icon>
|
|
<v-icon>mdi-share-variant</v-icon>
|
|
</v-list-item-icon>
|
|
<v-list-item-content>
|
|
<v-list-item-title>{{$t("Share")}}</v-list-item-title>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
</v-list>
|
|
</v-menu>
|
|
|
|
</v-list-item-action>
|
|
</v-list-item>
|
|
|
|
<!-- Card version -->
|
|
<v-card max-height='200px' max-width='200px' v-if='card' @click='click'>
|
|
<div class='d-flex justify-center'>
|
|
<v-avatar size='150' class='ma-1'>
|
|
<v-img :src='artist.picture.thumb'>
|
|
</v-img>
|
|
</v-avatar>
|
|
</div>
|
|
|
|
<div class='pa-2 text-subtitle-2 text-center text-truncate'>{{artist.name}}</div>
|
|
</v-card>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'ArtistTile',
|
|
data() {
|
|
return {
|
|
menu: false
|
|
}
|
|
},
|
|
props: {
|
|
artist: Object,
|
|
card: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
tiny: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
methods: {
|
|
async library() {
|
|
if (this.artist.library) {
|
|
//Remove
|
|
await this.$axios.delete('/library/artist?id=' + this.artist.id);
|
|
this.$root.globalSnackbar = this.$t('Removed from library!');
|
|
this.artist.library = false;
|
|
this.$emit('remove');
|
|
} else {
|
|
//Add
|
|
await this.$axios.put(`/library/artist?id=${this.artist.id}`);
|
|
this.$root.globalSnackbar = this.$t('Added to library!');
|
|
this.artist.library = true;
|
|
}
|
|
},
|
|
click() {
|
|
//Navigate to details
|
|
this.$router.push({
|
|
path: '/artist',
|
|
query: {artist: JSON.stringify(this.artist)}
|
|
});
|
|
this.$emit('clicked');
|
|
},
|
|
//Copy link
|
|
share() {
|
|
let copyElem = document.createElement('input');
|
|
copyElem.value = `https://deezer.com/artist/${this.artist.id}`;
|
|
document.body.appendChild(copyElem);
|
|
copyElem.select();
|
|
document.execCommand('copy');
|
|
document.body.removeChild(copyElem);
|
|
this.$root.globalSnackbar = this.$t('Link copied!');
|
|
}
|
|
}
|
|
}
|
|
|
|
</script> |