83 lines
2.2 KiB
Vue
83 lines
2.2 KiB
Vue
<template>
|
|
<div class="channel root-result">
|
|
|
|
<a target="_blank" rel="nofollow noreferrer noopener" v-bind:href="channel.url" :title="discoverChannelMessage" class="avatar">
|
|
<img v-if="channel.avatar" v-bind:src="channel.avatar.url" alt="">
|
|
<img v-else src="/img/default-avatar.png" alt="">
|
|
</a>
|
|
|
|
<div class="information">
|
|
<div class="title-block">
|
|
<h5 class="title">
|
|
<a target="_blank" rel="nofollow noreferrer noopener" v-bind:href="channel.url" :title="discoverChannelMessage">
|
|
{{ channel.displayName }}
|
|
</a>
|
|
</h5>
|
|
|
|
<span class="handle">{{ channel.name }}@{{ channel.host }}</span>
|
|
</div>
|
|
|
|
<div class="additional-information">
|
|
<div class="followers-count">
|
|
<translate :translate-n="channel.followersCount" translate-plural="%{channel.followersCount} followers">%{ channel.followersCount } follower</translate>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="description">{{ channel.description }}</div>
|
|
|
|
<div class="button">
|
|
<a class="button-link" rel="nofollow noreferrer noopener" target="_blank" v-bind:href="channel.url">
|
|
{{ discoverChannelMessage }}
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss">
|
|
@import '../scss/_variables';
|
|
|
|
.channel {
|
|
.avatar {
|
|
width: $thumbnail-width;
|
|
min-width: $thumbnail-width;
|
|
margin-right: 20px;
|
|
display: flex;
|
|
justify-content: center;
|
|
|
|
img {
|
|
object-fit: cover;
|
|
border-radius: 50%;
|
|
width: 110px;
|
|
height: 110px;
|
|
min-width: 110px;
|
|
min-height: 110px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script lang="ts">
|
|
import Vue, { PropType } from 'vue'
|
|
import { Video, VideoChannel } from '../../../PeerTube/shared/models'
|
|
|
|
export default Vue.extend({
|
|
props: {
|
|
channel: Object as PropType<VideoChannel>
|
|
},
|
|
|
|
computed: {
|
|
host () {
|
|
const url = this.channel.url
|
|
|
|
return new URL(url as string).host
|
|
},
|
|
|
|
discoverChannelMessage () {
|
|
return this.$gettextInterpolate(this.$gettext('Discover this channel on %{host}'), { host: this.host })
|
|
}
|
|
}
|
|
})
|
|
</script>
|