50 lines
1.1 KiB
Vue
50 lines
1.1 KiB
Vue
<template>
|
|
<div id="videolist" class="bg-gray-200">
|
|
<div
|
|
class="max-w-2xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:max-w-7xl lg:px-8"
|
|
>
|
|
<h2 class="sr-only">Videos</h2>
|
|
|
|
<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"
|
|
>
|
|
<div v-for="video in videos" :key="video.id" class="group">
|
|
<VideoPreview :video="video" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import Vue from 'vue'
|
|
|
|
export default Vue.extend({
|
|
name: 'VideoList',
|
|
|
|
data(): {
|
|
hasError: boolean
|
|
videos: []
|
|
} {
|
|
return {
|
|
hasError: false,
|
|
videos: [],
|
|
}
|
|
},
|
|
|
|
async fetch() {
|
|
try {
|
|
const response = await fetch(
|
|
`https://www.googleapis.com/youtube/v3/playlistItems?part=snippet%2CcontentDetails&maxResults=50&playlistId=${process.env.YOUTUBE_UPLOADS_PLAYLIST_ID}&key=${process.env.YOUTUBE_API_KEY}`
|
|
)
|
|
const json = await response.json()
|
|
this.videos = json.items
|
|
} catch (error: any) {
|
|
this.hasError = true
|
|
throw new Error(error)
|
|
}
|
|
},
|
|
|
|
fetchOnServer: true,
|
|
})
|
|
</script>
|