audiobookshelf/client/components/cards/PersonCard.vue

56 lines
1.1 KiB
Vue

<template>
<div class="h-24 flex">
<div class="w-32">
<img :src="imgSrc" class="w-full object-cover" />
</div>
<div class="flex-grow">
<p>{{ name }}</p>
<p class="text-sm text-gray-300">{{ description }}</p>
</div>
</div>
</template>
<script>
export default {
props: {
person: {
type: Object,
default: () => {}
}
},
data() {
return {
placeholder: '/Logo.png'
}
},
computed: {
userToken() {
return this.$store.getters['user/getToken']
},
_person() {
return this.person || {}
},
name() {
return this._person.name || ''
},
image() {
return this._person.image || null
},
description() {
return this._person.description
},
lastUpdate() {
return this._person.lastUpdate
},
imgSrc() {
if (!this.image) return this.placeholder
var encodedImg = this.image.replace(/%/g, '%25').replace(/#/g, '%23')
var url = new URL(encodedImg, document.baseURI)
return url.href + `?token=${this.userToken}&ts=${this.lastUpdate}`
}
},
methods: {},
mounted() {}
}
</script>