ngn/safetwitch
1
0
Fork 0
Code Issues 1 Pull Requests 10 Actions Packages Activity

Fix translation and add infinte scroll onto the following streams page

Browse Source
This commit is contained in:
dragongoose
2024-02-04 21:12:26 -05:00
parent 0fd1dd2247
commit 44779e3e6d
2 changed files with 30 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/views/HomepageView.vue
View File

@ -66,6 +66,17 @@ export default {
this.data.push(category)
}
}
},
async handleFollowingScroll(event: UIEvent) {
let el = event.target as HTMLUListElement
let fullyScrolled = el.scrollLeft === (el.scrollWidth - el.clientWidth)
console.log(el)
if (!fullyScrolled) return;
if (!this.following) return;
let offset = this.following.length / 35
let newFollowers = await followersStreaming(getFollows(), offset)
this.following = [ ...this.following, ...newFollowers]
}
},
async mounted() {
@ -79,8 +90,8 @@ export default {
.then((data: CategoryPreviewInterface[]) => {
this.data = data
})
this.following = await followersStreaming(getFollows())
this.following = await followersStreaming(getFollows(), 0)
},
components: {
StreamPreviewVue,
@ -92,14 +103,14 @@ export default {
</script>
<template>
<loading-screen v-if="!data && status != 'error'"></loading-screen>
<error-message v-else-if="status == 'error'"></error-message>
<loading-screen v-show="!data && status != 'error'"></loading-screen>
<error-message v-show="status == 'error'"></error-message>
<div v-else-if="data" class="max-w-5xl mx-auto">
<div v-if="following && following.length > 0" class="p-2 text-contrast w-[100vw]">
<h1 class="font-bold text-5xl">Following</h1>
<p class="text-xl">Streamers you follow</p>
<ul class="flex flex-nowrap justify-begin overflow-x-scroll overflow-y-hidden space-x-2 mt-1 h-[19rem] items-center">
<div v-show="data" class="max-w-5xl mx-auto">
<div v-if="following && following.length > 0" class="p-2 text-contrast">
<h1 class="font-bold text-5xl">{{ $t("home.following") }}</h1>
<p class="text-xl">{{ $t("home.streamersYouFollow") }}</p>
<ul class="flex flex-nowrap justify-begin overflow-x-scroll overflow-y-hidden space-x-2 mt-1 h-[19rem] items-center" @scroll="handleFollowingScroll">
<li v-for="streamer in following" :key="streamer" class="inline-block">
<stream-preview-vue :name="streamer"></stream-preview-vue>
</li>