Fix translation and add infinte scroll onto the following streams page

src/mixins.ts

@@ -95,25 +95,28 @@ export function getTimeFromQuery(query: string) {
  * Returns a string of online streamers from a
  * array of string of the request streamers
  * @param streamers the array of streamers
+ * @param cursor which 35 streamer chunk to fetch
  * @returns the streamers in that list that are online
  */
-export async function followersStreaming(streamers: string[]): Promise<string[]> {
+export async function followersStreaming(streamers: string[], cursor: number): Promise<string[]> {
   // do not make request if no followers
   if (streamers.length == 0) {
     return []
   }
 
-  let data: string[] = []
+  let res: string[] = []
+
+  const payloadData = streamers.slice(cursor, cursor + 35)
+
   const payload = {
-    streamers
+    streamers: payloadData
   }
 
   await postEndpoint('api/users/isLive/bulk', payload)
-    .then((res: string[]) => {
-      data = res
+    .then((data: string[]) => {
+      res = [...res, ...data]
     })
 
 
-
-  return data
+  return res
 }

src/views/HomepageView.vue

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