mirror of
https://codeberg.org/dragongoose/safetwitch.git
synced 2024-11-05 15:33:59 +00:00
Cleanup
This commit is contained in:
parent
555f46dda5
commit
cf71bf6fa7
2 changed files with 30 additions and 27 deletions
|
@ -1,33 +1,37 @@
|
|||
<script lang="ts">
|
||||
import { type Ref, ref } from 'vue'
|
||||
import { ref } from 'vue'
|
||||
|
||||
import CategoryPreview from '@/components/CategoryPreview.vue'
|
||||
import ErrorMessage from '@/components/ErrorMessage.vue'
|
||||
import LoadingScreen from '@/components/LoadingScreen.vue'
|
||||
import StreamPreviewVue from '@/components/StreamPreview.vue'
|
||||
import ChannelPreview from '@/components/ChannelPreview.vue'
|
||||
|
||||
import { getEndpoint } from '@/mixins'
|
||||
import type { ApiResponse, SearchResult, StreamerData } from '@/types'
|
||||
|
||||
export default {
|
||||
inject: ['protocol'],
|
||||
setup() {
|
||||
let data: Ref<any> = ref(null)
|
||||
let data = ref<SearchResult>()
|
||||
const status = ref<"ok" | "error">()
|
||||
return {
|
||||
data,
|
||||
status,
|
||||
}
|
||||
},
|
||||
async mounted() {
|
||||
try {
|
||||
const res = await fetch(`${this.protocol}${import.meta.env.SAFETWITCH_BACKEND_DOMAIN}/api/search/?query=${this.$route.query.query}`)
|
||||
const rawData = await res.json()
|
||||
|
||||
this.data = rawData.data
|
||||
this.data.query = this.$route.query.query
|
||||
} catch (e) {
|
||||
this.data = { status: 'error' }
|
||||
}
|
||||
|
||||
await getEndpoint("api/search/?query=" + this.$route.query.query)
|
||||
.catch(() => {
|
||||
this.status = "error"
|
||||
})
|
||||
.then((data) => {
|
||||
this.data = data as SearchResult
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
getStream(channel: any) {
|
||||
getStream(channel: StreamerData) {
|
||||
return {
|
||||
...channel.stream,
|
||||
streamer: {
|
||||
|
@ -47,33 +51,33 @@ export default {
|
|||
}
|
||||
</script>
|
||||
<template>
|
||||
<loading-screen v-if="!data"></loading-screen>
|
||||
<error-message v-else-if="data.status === 'error' || !data"></error-message>
|
||||
<loading-screen v-if="!data && status != 'error'"></loading-screen>
|
||||
<error-message v-else-if="status == 'error'"></error-message>
|
||||
|
||||
|
||||
<div v-else class="p-3 space-y-5">
|
||||
<div v-else-if="data" class="p-3 space-y-5">
|
||||
<div v-if="data.channels.length > 0">
|
||||
<h1 class="text-white font-bold text-4xl mb-2">Channels related to "{{ data.query }}"</h1>
|
||||
<h1 class="text-white font-bold text-4xl mb-2">Channels related to "{{ $route.query.query }}"</h1>
|
||||
<ul class="flex overflow-x-scroll overflow-y-hidden">
|
||||
<li v-for="channel in data.channels" :key="channel" class="m-2 hover:scale-105 transition-transform">
|
||||
<li v-for="channel in data.channels" class="m-2 hover:scale-105 transition-transform">
|
||||
<channel-preview :channel="channel"></channel-preview>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div v-if="data.categories.length > 0">
|
||||
<h1 class="text-white font-bold text-4xl mb-2">Categories related to "{{ data.query }}"</h1>
|
||||
<h1 class="text-white font-bold text-4xl mb-2">Categories related to "{{ $route.query.query }}"</h1>
|
||||
<ul class="flex max-w-[100vw] max-h-[27rem] overflow-x-scroll overflow-y-hidden">
|
||||
<li v-for="category in data.categories" :key="category" class="m-2 hover:scale-105 transition-transform">
|
||||
<li v-for="category in data.categories" class="m-2 hover:scale-105 transition-transform">
|
||||
<category-preview :category-data="category"></category-preview>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div v-if="data.relatedChannels.length > 0">
|
||||
<h1 class="text-white font-bold text-4xl mb-2">Live channels with the tag "{{ data.query }}"</h1>
|
||||
<h1 class="text-white font-bold text-4xl mb-2">Live channels with the tag "{{ $route.query.query }}"</h1>
|
||||
<ul class="flex overflow-x-scroll space-x-5 ">
|
||||
<li v-for="channel in data.relatedChannels" :key="channel">
|
||||
<li v-for="channel in data.relatedChannels">
|
||||
<stream-preview-vue :stream="getStream(channel)"></stream-preview-vue>
|
||||
</li>
|
||||
</ul>
|
||||
|
@ -81,9 +85,9 @@ export default {
|
|||
|
||||
|
||||
<div v-if="data.channelsWithTag.length > 0">
|
||||
<h1 class="text-white font-bold text-4xl mb-2">Channels with the tag "{{ data.query }}"</h1>
|
||||
<h1 class="text-white font-bold text-4xl mb-2">Channels with the tag "{{ $route.query.query }}"</h1>
|
||||
<ul class="inline-flex overflow-y-hidden overflow-x-scroll max-w-[100vw] space-x-5">
|
||||
<li v-for="channel in data.channelsWithTag" :key="channel">
|
||||
<li v-for="channel in data.channelsWithTag">
|
||||
<channel-preview :channel="channel"></channel-preview>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
@ -62,12 +62,11 @@ export default {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<loading-screen v-if="!data"></loading-screen>
|
||||
|
||||
<error-message v-else-if="status === 'error'"></error-message>
|
||||
<loading-screen v-if="!data && status != 'error'"></loading-screen>
|
||||
<error-message v-else-if="status == 'error'"></error-message>
|
||||
|
||||
<div
|
||||
v-else
|
||||
v-else-if="data"
|
||||
class="w-full justify-center md:inline-flex space-y-4 md:space-y-0 md:space-x-4 md:p-4"
|
||||
>
|
||||
<div
|
||||
|
|
Loading…
Reference in a new issue