koel/resources/assets/js/components/ui/YouTubeVideoItem.vue

<template>
  <a :href="url" data-testid="youtube-search-result" role="button" @click.prevent="play">
    <img :alt="video.snippet.title" :src="video.snippet.thumbnails.default.url" width="90">
    <div class="meta">
      <h3 class="title">{{ video.snippet.title }}</h3>
      <p class="desc">{{ video.snippet.description }}</p>
    </div>
  </a>
</template>

<script lang="ts" setup>
import { computed, toRefs } from 'vue'
import { youTubeService } from '@/services'
import { RouterKey } from '@/symbols'
import { requireInjection } from '@/utils'

const router = requireInjection(RouterKey)

const props = defineProps<{ video: YouTubeVideo }>()
const { video } = toRefs(props)

const url = computed(() => `https://youtu.be/${video.value.id.videoId}`)

const play = () => {
  youTubeService.play(video.value)
  router.go('youtube')
}
</script>

<style lang="scss" scoped>
a {
  display: flex;
  gap: 10px;

  &:hover, &:active, &:focus {
    color: var(--color-text-primary);
  }
}

.title {
  font-size: 1.1rem;
  margin-bottom: .4rem;
}

.desc {
  font-size: .9rem;
}

img {
  align-self: self-start;
}

.meta {
  overflow-wrap: anywhere;
}
</style>