54 lines
1.2 KiB
Vue
54 lines
1.2 KiB
Vue
<template>
|
|
<a :href="url">
|
|
<div
|
|
class="w-full aspect-w-16 aspect-h-9 bg-gray-200 rounded-lg overflow-hidden"
|
|
>
|
|
<img
|
|
:src="video.snippet.thumbnails.high.url"
|
|
alt=""
|
|
class="w-full h-full object-center object-cover group-hover:opacity-75"
|
|
/>
|
|
</div>
|
|
<time :datetime="publishedDatetime" class="mt-4 text-sm text-gray-700">
|
|
{{ publishedHuman }}
|
|
</time>
|
|
<h3 class="mt-1 text-lg font-medium text-gray-900">
|
|
{{ video.snippet.title }}
|
|
</h3>
|
|
</a>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import Vue from 'vue'
|
|
import dayjs from 'dayjs'
|
|
import localizedFormat from 'dayjs/plugin/localizedFormat'
|
|
|
|
dayjs.extend(localizedFormat)
|
|
|
|
export default Vue.extend({
|
|
name: 'VideoPreview',
|
|
|
|
props: {
|
|
video: {
|
|
type: Object,
|
|
default: () => {
|
|
return {}
|
|
},
|
|
required: true,
|
|
},
|
|
},
|
|
|
|
computed: {
|
|
url() {
|
|
// @ts-ignore
|
|
return `https://www.youtube.com/watch?v=${this.video.contentDetails.videoId}`
|
|
},
|
|
publishedHuman() {
|
|
return dayjs(this.video.snippet.publishedAt).format('L')
|
|
},
|
|
publishedDatetime() {
|
|
return dayjs(this.video.snippet.publishedAt).format('YYYY-MM-DD')
|
|
},
|
|
},
|
|
})
|
|
</script>
|