82 lines
1.5 KiB
Vue
82 lines
1.5 KiB
Vue
<template>
|
|
<span class="actor">
|
|
<img v-if="avatarUrl && !avatarError" :src="avatarUrl" alt="" :class="{ account: isAccount }" @error="setAvatarError()" />
|
|
|
|
<a
|
|
:href="actor.url" :title="linkTitle"
|
|
class="peertube-link wrap-text" rel="nofollow noreferrer noopener" target="_blank"
|
|
>{{ actor.displayName }}</a>
|
|
</span>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent } from 'vue'
|
|
|
|
export default defineComponent({
|
|
props: {
|
|
actor: Object,
|
|
type: String
|
|
},
|
|
|
|
data () {
|
|
return {
|
|
avatarError: false
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
avatarUrl () {
|
|
const avatars = this.actor.avatars
|
|
if (avatars.length === 0) return ''
|
|
|
|
avatars.sort((a1, a2) => {
|
|
if (a1.width < a2.width) return -1
|
|
if (a1.width > a2.width) return 1
|
|
|
|
return 0
|
|
})
|
|
|
|
return avatars[0].url
|
|
},
|
|
|
|
linkTitle () {
|
|
if (this.type === 'channel') return this.$gettext('Go on this channel page')
|
|
|
|
return this.$gettext('Go on this account page')
|
|
},
|
|
|
|
isAccount () {
|
|
return this.type === 'account'
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
setAvatarError () {
|
|
this.avatarError = true
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@import '../scss/_variables';
|
|
|
|
.actor {
|
|
$size: 20px;
|
|
|
|
img {
|
|
object-fit: cover;
|
|
width: $size;
|
|
height: $size;
|
|
min-width: $size;
|
|
min-height: $size;
|
|
margin-right: 5px;
|
|
|
|
&.account {
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
}
|
|
|
|
</style>
|