128 lines
3.9 KiB
Vue
128 lines
3.9 KiB
Vue
<script lang="ts">
|
|
import { ref } from 'vue'
|
|
|
|
import StreamPreviewVue from '@/components/StreamPreview.vue'
|
|
import ErrorMessage from '@/components/ErrorMessage.vue'
|
|
import LoadingScreen from '@/components/LoadingScreen.vue'
|
|
|
|
import type { CategoryData } from '@/types'
|
|
import { getEndpoint, abbreviate } from '@/mixins'
|
|
|
|
|
|
export default {
|
|
inject: ['protocol'],
|
|
async setup() {
|
|
let data = ref<CategoryData>()
|
|
let status = ref<"ok" | "error">()
|
|
|
|
return {
|
|
data,
|
|
status
|
|
}
|
|
},
|
|
async mounted() {
|
|
await getEndpoint("api/discover/" + this.$route.params.game)
|
|
.catch(() => {
|
|
this.status = "error"
|
|
})
|
|
.then((data: CategoryData) => {
|
|
this.data = data
|
|
})
|
|
|
|
this.getMoreStreams()
|
|
},
|
|
methods: {
|
|
getMoreStreams() {
|
|
window.onscroll = async () => {
|
|
let bottomOfWindow =
|
|
document.documentElement.scrollTop + window.innerHeight ===
|
|
document.documentElement.offsetHeight
|
|
const streams = this.data!.streams
|
|
|
|
if (bottomOfWindow && streams) {
|
|
// get cursor of the last stream rendered
|
|
const cursor = streams[streams.length - 1].cursor
|
|
if (!cursor) return
|
|
|
|
// get rest of streams from api
|
|
const resData = await getEndpoint(`api/discover/${this.$route.params.game}/?cursor=${cursor}`)
|
|
.catch((err) => {
|
|
throw err
|
|
})
|
|
|
|
for (let stream of resData.streams) {
|
|
this.data!.streams.push(stream)
|
|
}
|
|
}
|
|
}
|
|
},
|
|
abbreviate,
|
|
},
|
|
components: {
|
|
StreamPreviewVue,
|
|
ErrorMessage,
|
|
LoadingScreen
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<loading-screen v-if="!data && status != 'error'"></loading-screen>
|
|
<error-message v-else-if="status == 'error'"></error-message>
|
|
|
|
<div v-else-if="data" class="flex flex-col max-w-5xl mx-auto">
|
|
<div class="flex p-3 flex-col">
|
|
<div class="inline-flex space-x-4">
|
|
<img :src="data.cover" class="self-start rounded-md" />
|
|
|
|
<div>
|
|
<h1 class="font-bold text-5xl text-white">{{ data.name }}</h1>
|
|
<div class="hidden md:block">
|
|
<div>
|
|
<div class="inline-flex my-1 space-x-3">
|
|
<p class="font-bold text-white text-lg">{{ $t("main.followers") }}: {{ abbreviate(data.followers) }}</p>
|
|
<p class="font-bold text-white text-lg">{{ $t("main.viewers") }}: {{ abbreviate(data.viewers) }}</p>
|
|
</div>
|
|
|
|
<ul class="mb-5">
|
|
<li v-for="tag in data.tags" :key="tag" class="inline-flex">
|
|
<span class="text-white p-1 py-0.5 mr-1 text-sm font-bold bg-ctp-overlay1 rounded-sm">{{
|
|
tag
|
|
}}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<p class="text-md text-gray-400 overflow-y-auto hidden md:block">{{ data.description }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="md:hidden">
|
|
<div>
|
|
<div class="inline-flex my-1 space-x-3">
|
|
<p class="font-bold text-white text-lg">{{ $t("main.followers") }}: {{ abbreviate(data.followers) }}</p>
|
|
<p class="font-bold text-white text-lg">{{ $t("main.viewers") }}: {{ abbreviate(data.viewers) }}</p>
|
|
</div>
|
|
|
|
<ul class="mb-5">
|
|
<li v-for="tag in data.tags" :key="tag" class="inline-flex">
|
|
<span class="text-white p-1 py-0.5 mr-1 text-sm font-bold bg-ctp-overlay1 rounded-sm">{{
|
|
tag
|
|
}}</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<p class="text-md text-gray-400 overflow-y-auto md:hidden">{{ data.description }}</p>
|
|
</div>
|
|
|
|
<div class="max-w-[58rem] mx-auto">
|
|
<ul>
|
|
<li v-for="stream in data.streams" class="inline-flex m-2 hover:scale-105 transition-transform">
|
|
<StreamPreviewVue :stream="stream"></StreamPreviewVue>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|