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

feat: working video links

Browse source
This commit is contained in:
Ava Gaiety Wroten 2021-12-29 14:44:45 -06:00
parent 5f1a435781
commit c2cbc11c8b
2 changed files with 10 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
components/VideoPreview.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<div> <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 cursor-pointer"
> >
@ -15,7 +15,7 @@
<p class="mt-1 text-lg font-medium text-gray-900"> <p class="mt-1 text-lg font-medium text-gray-900">
{{ video.snippet.title }} {{ video.snippet.title }}
</p> </p>
</div> </a>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -33,5 +33,11 @@ export default Vue.extend({
required: true, required: true,
}, },
}, },
computed: {
url() {
return `https://www.youtube.com/watch?v=${this.video.contentDetails.videoId}`
},
},
}) })
</script> </script>

4
components/VideosList.vue
View file

@ -8,9 +8,9 @@
<div <div
class="grid grid-cols-1 gap-y-10 sm:grid-cols-2 gap-x-6 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8" class="grid grid-cols-1 gap-y-10 sm:grid-cols-2 gap-x-6 lg:grid-cols-3 xl:grid-cols-4 xl:gap-x-8"
> >
<a v-for="video in videos" :key="video.id" class="group"> <div v-for="video in videos" :key="video.id" class="group">
<VideoPreview :video="video" /> <VideoPreview :video="video" />
</a> </div>
</div> </div>
</div> </div>
</div> </div>