Follow button fix and stream preview cleanup #34

src/components/FollowButton.vue

@@ -19,12 +19,16 @@ export default {
     followStreamer() {
       const username = this.$props.username
       const follows = localStorage.getItem('following')
-      let parsedFollows: string[] = []
+      if (!follows) return
 
-      if (this.isFollowing && follows) {
-        const index = JSON.parse(follows).indexOf(username)
+      let parsedFollows: string[] = JSON.parse(follows)
+
+      if (follows?.includes(username)) {
+        const index = parsedFollows.indexOf(username)
+        console.log(index)
         if (index === -1) return
         parsedFollows = parsedFollows.splice(index, 1)
+        console.log(parsedFollows)
         this.isFollowing = false
       } else {
         if (follows) parsedFollows = JSON.parse(follows)

src/components/StreamPreview.vue

@@ -1,79 +1,78 @@
 <script lang="ts">
 import { inject } from 'vue'
-export interface Stream {
-  tags: string[]
-  title: string
-  topic: string
-  startedAt: number
-  viewers: number
-  preview: string
-  streamer: {
-    pfp: string
-    name: string
-  }
-}
+import { getEndpoint, abbreviate } from '@/mixins'
+import type { StreamerData, CategoryMinifiedStream } from '@/types'
 
 export default {
   props: {
-    stream: {},
+    stream: {
+      type: Object
+    },
     name: {
       type: String
     }
   },
   async setup(props) {
     const protocol = inject('protocol')
-
-    let streamData: Stream | null = null
-    if (!props.stream && props.name) {
-      const streamDataFetch = await fetch(
-        `${protocol}${import.meta.env.SAFETWITCH_BACKEND_DOMAIN}/api/users/${props.name}`
-      )
-      const data = (await streamDataFetch.json()).data
-
-      if (data.stream) {
-        data.stream.streamer = { name: props.name, pfp: data.pfp }
-        streamData = data.stream
+    let data: StreamerData
+    if (props.stream) {
+      const streamData = props.stream as CategoryMinifiedStream
+      // lossy converstion to avoid making tons of requests
+      // by using minimal data from category request
+      data = {
+        username: streamData.streamer.name,
+        login: streamData.streamer.name,
+        followers: 0,
+        isLive: true,
+        about: "",
+        pfp: streamData.streamer.pfp,
+        banner: "",
+        isPartner: false,
+        colorHex: streamData.streamer.colorHex,
+        id: 0,
+        stream: {
+          title: streamData.title,
+          tags: streamData.tags,
+          startedAt: 0,
+          topic: "",
+          viewers: streamData.viewers,
+          preview: streamData.preview
+        }
       }
     } else {
-      streamData = props.stream as Stream
+      data = await getEndpoint("api/users/" + props.name)
     }
 
     const frontend_url = protocol + import.meta.env.SAFETWITCH_INSTANCE_DOMAIN
 
     return {
       frontend_url,
-      streamData,
+      data,
       protocol
     }
   },
   methods: {
-    abbreviate(text: number) {
-      return Intl.NumberFormat('en-US', {
-        //@ts-ignore
-        notation: 'compact',
-        maximumFractionDigits: 1
-      }).format(text)
-    }
+    abbreviate
   }
 }
 </script>
 
 <template>
-  <div v-if="streamData">
+  <div v-if="data.stream">
     <div class="bg-ctp-crust rounded-lg w-[23rem] md:w-[27rem]">
-      <RouterLink :to="'/' + streamData.streamer.name">
-        <img :src="streamData.preview" class="rounded-lg rounded-b-none" />
+      <RouterLink :to="'/' + data.login">
+        <img :src="data.stream.preview" class="rounded-lg rounded-b-none" />
       </RouterLink>
       <div class="text-white p-2 inline-flex space-x-2 w-full h-16">
         <div class="inline-flex">
           <div class="inline-flex">
-            <img :src="streamData.streamer.pfp" class="rounded-full mr-2" />
+            <img :src="data.pfp" class="rounded-full mr-2" />
             <div class="w-full">
-              <p class="font-bold w-[18rem] md:w-[22.9rem] truncate">{{ streamData.title }}</p>
+              <p class="font-bold w-[18rem] md:w-[22.9rem] truncate">{{ data.stream.title }}</p>
               <div class="inline-flex w-full justify-between">
-                <p class="text-gray-300">{{ streamData.streamer.name }}</p>
+                <p class="text-gray-300">{{ data.username }}</p>
                 <p class="self-end float-right">
-                  <v-icon name="io-person"></v-icon> {{ abbreviate(streamData.viewers) }}
+                  <v-icon name="io-person"></v-icon> {{ abbreviate(data.stream.viewers) }}
                 </p>
               </div>
             </div>

src/views/HomepageView.vue

@@ -101,11 +101,11 @@ export default {
     <div v-if="following.length > 0" class="p-2 text-white">
       <h1 class="font-bold text-5xl">Following</h1>
       <p class="text-xl">Streamers you follow</p>
-      <ul class="flex overflow-x-scroll flex-nowrap h-80 space-x-1">
+      <ul class="flex overflow-x-scroll space-x-2 flex-nowrap h-[22rem] items-center">
         <li
           v-for="streamer in following"
           :key="streamer"
-          class="inline-block hover:scale-105 transition-transform"
+          class="inline-block"
         >
           <stream-preview-vue :name="streamer"></stream-preview-vue>
         </li>

src/views/UserView.vue

@@ -157,7 +157,7 @@ export default {
         </div>
 
         <div class="pt-2 inline-flex">
-          <follow-button :username="data.username"></follow-button>
+          <follow-button :username="data.login"></follow-button>
           <p class="align-baseline font-bold ml-3">
             {{ abbreviate(data.followers) }} {{ $t('main.followers') }}
           </p>

src/views/VodView.vue

@@ -110,7 +110,7 @@ export default {
         </div>
 
         <div class="pt-2 inline-flex">
-          <follow-button :username="data.streamer.username"></follow-button>
+          <follow-button :username="data.streamer.login"></follow-button>
           <p class="align-baseline font-bold ml-3">
             {{ abbreviate(data.streamer.followers) }} {{ $t('main.followers') }}
           </p>