sepia-search-motore-di-ricerca-video/client/src/components/ChannelResult.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;
        width: 110px;
        height: 110px;
        min-width: 110px;
        min-height: 110px;
      }
    }
  }
</style>

<script lang="ts">
  import { useGettext } from '@jshmrtn/vue3-gettext'
  import { defineComponent, PropType } from 'vue'
  import { VideoChannel } from '../../../PeerTube/shared/models'

  export default defineComponent({
    props: {
      channel: Object as PropType<VideoChannel>
    },

    computed: {
      host (): string {
        const url = this.channel.url

        return new URL(url as string).host
      },

      discoverChannelMessage (): string {
        return this.$gettextInterpolate(this.$gettext('Discover this channel on %{host}'), { host: this.host })
      }
    }
  })
</script>