140 lines
4.4 KiB
Vue
140 lines
4.4 KiB
Vue
<script lang="ts">
|
|
import { ref, type Ref } from 'vue'
|
|
import { useRoute } from 'vue-router'
|
|
import StreamPreviewVue from '@/components/StreamPreview.vue'
|
|
import ErrorMessage from '@/components/ErrorMessage.vue'
|
|
import LoadingScreen from '@/components/LoadingScreen.vue'
|
|
|
|
export default {
|
|
async setup() {
|
|
const route = useRoute()
|
|
const protocol = import.meta.env.VITE_HTTPS === 'true' ? 'https://' : 'http://'
|
|
const data: Ref<any | undefined> = ref()
|
|
const frontend_url = protocol + import.meta.env.VITE_INSTANCE_DOMAIN
|
|
const game: string = route.params.game.toString()
|
|
|
|
return {
|
|
data,
|
|
frontend_url,
|
|
protocol,
|
|
game
|
|
}
|
|
},
|
|
async mounted() {
|
|
try {
|
|
const res = await fetch(
|
|
`${this.protocol}${import.meta.env.VITE_BACKEND_DOMAIN}/api/discover/${this.game}`
|
|
)
|
|
const rawData = await res.json()
|
|
if (rawData.status === "ok") {
|
|
this.data = rawData.data
|
|
} else {
|
|
this.data = { status: 'error' }
|
|
}
|
|
} catch (err) {
|
|
this.data = { status: 'error' }
|
|
console.error(err)
|
|
}
|
|
|
|
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) {
|
|
const cursor = streams[streams.length - 1].cursor
|
|
if (!cursor) return
|
|
const res = await fetch(
|
|
`${this.protocol}${import.meta.env.VITE_BACKEND_DOMAIN}/api/discover/${this.game}/?cursor=${cursor}`
|
|
)
|
|
if (!res.ok) {
|
|
throw new Error('Failed to fetch data')
|
|
}
|
|
const resData = await res.json()
|
|
|
|
for (let stream of resData.data.streams) {
|
|
this.data.streams.push(stream)
|
|
}
|
|
}
|
|
}
|
|
},
|
|
abbreviate(text: number) {
|
|
return Intl.NumberFormat('en-US', {
|
|
//@ts-ignore
|
|
notation: 'compact',
|
|
maximumFractionDigits: 1
|
|
}).format(text)
|
|
}
|
|
},
|
|
components: {
|
|
StreamPreviewVue,
|
|
ErrorMessage,
|
|
LoadingScreen
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<loading-screen v-if="!data"></loading-screen>
|
|
<error-message v-else-if="data.status === 'error' || !data"></error-message>
|
|
|
|
<div v-else 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">Followers: {{ abbreviate(data.followers) }}</p>
|
|
<p class="font-bold text-white text-lg">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">Followers: {{ abbreviate(data.followers) }}</p>
|
|
<p class="font-bold text-white text-lg">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" :key="stream" class="inline-flex m-2 hover:scale-105 transition-transform">
|
|
<StreamPreviewVue :stream="stream"></StreamPreviewVue>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</template>
|