Infrastructure/safetwitch
0
Fork 0
mirror of https://codeberg.org/SafeTwitch/safetwitch.git synced 2025-01-03 11:20:07 -05:00
Code Issues Activity

Add infinite scroll to categories

Browse source
This commit is contained in:
dragongoose 2023-04-11 14:27:43 -04:00
parent d3c411c348
commit 102a6811bd
No known key found for this signature in database
GPG key ID: 50DB99B921579009
1 changed files with 42 additions and 25 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
src/views/CategoryView.vue
View file

@ -1,30 +1,32 @@
<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
frontend_url,
protocol,
game
}
},
async mounted() {
const protocol = import.meta.env.VITE_HTTPS === 'true' ? 'https://' : 'http://'
const game: string = this.$route.params.game.toString()
try {
const res = await fetch(
`${protocol}${import.meta.env.VITE_BACKEND_DOMAIN}/api/discover/${game}`
`${this.protocol}${import.meta.env.VITE_BACKEND_DOMAIN}/api/discover/${this.game}`
)
const rawData = await res.json()
if (rawData.status === 'ok') {
if (rawData.status === "ok") {
this.data = rawData.data
} else {
this.data = { status: 'error' }
@ -33,8 +35,33 @@ export default {
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
@ -65,25 +92,20 @@ export default {
<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">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
>
<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>
<p class="text-md text-gray-400 overflow-y-auto hidden md:block">{{ data.description }}</p>
</div>
</div>
@ -96,10 +118,9 @@ export default {
<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
>
<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>
@ -109,11 +130,7 @@ export default {
<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"
>
<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>