This commit is contained in:
dragongoose 2023-06-19 22:17:12 -04:00
parent 555f46dda5
commit cf71bf6fa7
Signed by: dragongoose
GPG key ID: 50DB99B921579009
2 changed files with 30 additions and 27 deletions

View file

@ -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>

View file

@ -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