71 lines
1.6 KiB
Vue
71 lines
1.6 KiB
Vue
|
<template>
|
||
|
<div class="channel root-result">
|
||
|
|
||
|
<div class="avatar">
|
||
|
<img v-if="channel.avatar" v-bind:src="channel.avatar.url" alt="">
|
||
|
<img v-else src="/img/default-avatar.png" alt="">
|
||
|
</div>
|
||
|
|
||
|
<div class="information">
|
||
|
<div class="title-block">
|
||
|
<h5 class="title">{{ channel.displayName }}</h5>
|
||
|
|
||
|
<span class="handle">{{ channel.name }}@{{ channel.host }}</span>
|
||
|
</div>
|
||
|
|
||
|
<div class="additional-information">
|
||
|
<div class="followers-count">{{ channel.followersCount }} followers</div>
|
||
|
</div>
|
||
|
|
||
|
<div class="description">{{ channel.description }}</div>
|
||
|
|
||
|
<div class="button">
|
||
|
<a class="button-link" target="_blank" v-bind:href="channel.url">Discover this channel on {{host}}</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
|
||
|
}
|
||
|
}
|
||
|
})
|
||
|
</script>
|