sepia-search-motore-di-ricerca-video/client/src/components/ChannelResult.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">
          <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" target="_blank" v-bind:href="channel.url">
          <translate :translate-params="{host: host}">Discover this channel on %{host}</translate>
        </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>