gaiety/faetale
gaiety/faetale
1
0
Fork 0
Code Activity

feat: published dates fixed

Browse source
This commit is contained in:
Ava Gaiety Wroten 2021-12-29 15:28:43 -06:00
parent 65978cd2fe
commit 53f16efcfc
1 changed files with 16 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
components/VideoPreview.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<a :href="url"> <a :href="url">
<div <div
class="w-full aspect-w-16 aspect-h-9 bg-gray-200 rounded-lg overflow-hidden cursor-pointer" class="w-full aspect-w-16 aspect-h-9 bg-gray-200 rounded-lg overflow-hidden"
> >
<img <img
:src="video.snippet.thumbnails.high.url" :src="video.snippet.thumbnails.high.url"
@ -9,17 +9,21 @@
class="w-full h-full object-center object-cover group-hover:opacity-75" class="w-full h-full object-center object-cover group-hover:opacity-75"
/> />
</div> </div>
<h3 class="mt-4 text-sm text-gray-700"> <time :datetime="publishedDatetime" class="mt-4 text-sm text-gray-700">
{{ video.snippet.publishedAt }} {{ publishedHuman }}
</h3> </time>
<p class="mt-1 text-lg font-medium text-gray-900"> <h3 class="mt-1 text-lg font-medium text-gray-900">
{{ video.snippet.title }} {{ video.snippet.title }}
</p> </h3>
</a> </a>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue' import Vue from 'vue'
import dayjs from 'dayjs'
import localizedFormat from 'dayjs/plugin/localizedFormat'
dayjs.extend(localizedFormat)
export default Vue.extend({ export default Vue.extend({
name: 'VideoPreview', name: 'VideoPreview',
@ -38,6 +42,12 @@ export default Vue.extend({
url() { url() {
return `https://www.youtube.com/watch?v=${this.video.contentDetails.videoId}` 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> </script>