nocodb/packages/nc-gui/components/feed/Youtube/Player.vue

<script setup lang="ts">
import { YoutubeVue3 } from 'youtube-vue3'
import type { ProductFeedItem } from '../../../lib/types'
import { extractYoutubeVideoId } from '../../../utils/urlUtils'

const props = defineProps<{
  item: ProductFeedItem
}>()

const {
  item: { Title, Description, Url },
} = props

const { width } = useWindowSize()

const { $e } = useNuxtApp()

const watchVideo = () => {
  $e('c:nocodb:feed:youtube:watch', {
    title: Title,
    description: Description,
    url: Url,
  })
}
</script>

<template>
  <div class="mt-6 border-1 !bg-white recent-card !rounded-2xl border-gray-200">
    <YoutubeVue3
      :videoid="extractYoutubeVideoId(Url)"
      class="!rounded-t-xl"
      :height="width < 1280 ? 330 : 392"
      :width="width < 1280 ? 538 : 638"
      :autoplay="0"
      :controls="1"
      @played="watchVideo"
    />

    <div class="text-nc-content-gray-emphasis flex flex-col p-5 gap-4">
      <div class="font-bold leading-9 text-2xl">
        {{ Title }}
      </div>
      <div class="text-md leading-5">
        {{ Description.length > 200 ? `${Description.slice(0, 280)}...` : Description }}
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.recent-card {
  box-shadow: 0px 4px 8px -2px rgba(0, 0, 0, 0.08), 0px 2px 4px -2px rgba(0, 0, 0, 0.04);
}
</style>