safetwitch/src/components/user/VideoTab.vue
2023-08-18 13:39:26 -04:00

64 lines
1.5 KiB
Vue

<!--
This component is used for the video tab under a user
-->
<template>
<div class="bg-ctp-mantle mt-1 p-5 pt-3 rounded-lg w-full space-y-3">
<div class="inline-flex w-full">
<span class="pr-3 font-bold text-3xl">{{ $t('streamer.videos') }}</span>
</div>
<h1 v-if="!shelves && status === 'error'">{{ $t('streamer.videoerror') }}</h1>
<div v-else-if="shelves" class="mb-5">
<div class="space-y-5">
<div v-for="shelve of shelves" :key="shelve.title">
<h1 class="font-bold text-lg">{{ shelve.title }}</h1>
<div
class="whitespace-nowrap overflow-x-auto overflow-y-hidden w-full inline-flex space-x-5"
>
<video-preview
v-for="video of shelve.videos"
:key="video.title"
:data="video"
></video-preview>
</div>
</div>
<hr />
</div>
</div>
</div>
</template>
<script lang="ts">
import { ref } from 'vue'
import { getEndpoint } from '@/mixins'
import type { Shelve } from '@/types/VOD'
import VideoPreview from '@/components/user/VideoPreview.vue'
export default {
setup() {
return {
shelves: ref<Shelve[]>([]),
status: ''
}
},
async mounted() {
const username = this.$route.params.username
await getEndpoint('api/vods/shelve/' + username)
.then((data) => {
this.shelves = data
})
.catch(() => {
this.status = 'error'
})
},
components: {
VideoPreview
}
}
</script>