57 lines
1.5 KiB
Vue
57 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">Videos</span>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h1 v-if="!shelves && status === 'error'">Error getting videos</h1>
|
||
|
|
|
||
|
|
<div v-else-if="shelves" class="mb-5">
|
||
|
|
<div class="space-y-5">
|
||
|
|
<div v-for="shelve of shelves">
|
||
|
|
<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" :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>
|