From e1408462718f895d04b6a619025eb233eea756cf Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Tue, 24 Dec 2024 02:14:06 +0800
Subject: [PATCH] feat(following): show live stream type cards in the list

---
 src/components/VideoCard/VideoCard.vue        |  3 +
 .../components/VideoCardAuthorAvatar.vue      |  9 ++
 .../views/Home/components/Following.vue       | 85 +++++++++++++++++++
 3 files changed, 97 insertions(+)

diff --git a/src/components/VideoCard/VideoCard.vue b/src/components/VideoCard/VideoCard.vue
index 1541ccba..e251bf61 100644
--- a/src/components/VideoCard/VideoCard.vue
+++ b/src/components/VideoCard/VideoCard.vue
@@ -350,6 +350,7 @@ provide('getVideoType', () => props.type!)
                 p="x-2 y-1" m-1 inline-block rounded="$bew-radius" duration-300
               >
                 LIVE
+                <i i-svg-spinners:pulse-3 align-middle mt--0.2em />
               </div>
 
               <div
@@ -401,6 +402,7 @@ provide('getVideoType', () => props.type!)
             <VideoCardAuthorAvatar
               v-if="!horizontal && video.author"
               :author="video.author"
+              :is-live="video.liveStatus === 1"
             />
             <div class="group/desc" flex="~ col" w="full" align="items-start">
               <div flex="~ gap-1 justify-between items-start" w="full" pos="relative">
@@ -437,6 +439,7 @@ provide('getVideoType', () => props.type!)
                   <VideoCardAuthorAvatar
                     v-if="horizontal && video.author"
                     :author="video.author"
+                    :is-live="video.liveStatus === 1"
                   />
                   <VideoCardAuthorName
                     :author="video.author"
diff --git a/src/components/VideoCard/VideoCardAuthor/components/VideoCardAuthorAvatar.vue b/src/components/VideoCard/VideoCardAuthor/components/VideoCardAuthorAvatar.vue
index 54f684ec..e097ac32 100644
--- a/src/components/VideoCard/VideoCardAuthor/components/VideoCardAuthorAvatar.vue
+++ b/src/components/VideoCard/VideoCardAuthor/components/VideoCardAuthorAvatar.vue
@@ -7,6 +7,7 @@ import { getAuthorJumpUrl } from '../../utils'
 const props = withDefaults(defineProps<{
   author: Author | Author[]
   maxCount?: number
+  isLive?: boolean
 }>(), {
   maxCount: 3, // 最多显示的头像数量
 })
@@ -65,6 +66,14 @@ const displayedAvatars = computed(() => {
       >
         <div color-white text-sm class="i-mingcute:check-fill w-8px h-8px" />
       </div>
+      <div
+        v-else-if="isLive" pos="absolute top-22px left-24px"
+        w-14px h-14px
+        bg="$bew-theme-color"
+        rounded="1/2" grid place-items-center
+      >
+        <div color-white text-sm class="i-svg-spinners:pulse-3 w-12px h-12px" />
+      </div>
     </a>
 
     <!-- More avatars not shown -->
diff --git a/src/contentScripts/views/Home/components/Following.vue b/src/contentScripts/views/Home/components/Following.vue
index ec093fcf..7274a8da 100644
--- a/src/contentScripts/views/Home/components/Following.vue
+++ b/src/contentScripts/views/Home/components/Following.vue
@@ -4,6 +4,7 @@ import type { Ref } from 'vue'
 import type { Author } from '~/components/VideoCard/types'
 import { useBewlyApp } from '~/composables/useAppProvider'
 import type { GridLayoutType } from '~/logic'
+import type { FollowingLiveResult, List as FollowingLiveItem } from '~/models/live/getFollowingLiveList'
 import type { DataItem as MomentItem, MomentResult } from '~/models/moment/moment'
 import api from '~/utils/api'
 
@@ -15,6 +16,11 @@ interface VideoElement {
   authorList?: Author[]
 }
 
+interface LiveVideoElement {
+  uniqueId: string
+  item?: FollowingLiveItem
+}
+
 const props = defineProps<{
   gridLayout: GridLayoutType
 }>()
@@ -33,6 +39,7 @@ const gridValue = computed((): string => {
 })
 
 const videoList = ref<VideoElement[]>([])
+const liveVideoList = ref<LiveVideoElement[]>([])
 const isLoading = ref<boolean>(false)
 const needToLoginFirst = ref<boolean>(false)
 const containerRef = ref<HTMLElement>() as Ref<HTMLElement>
@@ -42,6 +49,7 @@ const noMoreContent = ref<boolean>(false)
 const { handleReachBottom, handlePageRefresh, haveScrollbar } = useBewlyApp()
 
 onMounted(() => {
+  getLiveVideoList()
   initData()
   initPageAction()
 })
@@ -90,6 +98,60 @@ async function getData() {
   }
 }
 
+/**
+ * Get all livestreaming videos of followed users
+ */
+const livePage = ref<number>(1)
+async function getLiveVideoList() {
+  let lastLiveVideoListLength = liveVideoList.value.length
+  try {
+    const response: FollowingLiveResult = await api.live.getFollowingLiveList({
+      page: livePage.value,
+      page_size: 9,
+    })
+
+    if (response.code === -101) {
+      noMoreContent.value = true
+      needToLoginFirst.value = true
+      return
+    }
+
+    if (response.code === 0) {
+      if (response.data.list.length < 9)
+        noMoreContent.value = true
+
+      livePage.value++
+
+      const resData = [] as FollowingLiveItem[]
+
+      response.data.list.forEach((item: FollowingLiveItem) => {
+        // 只保留正在直播的
+        if (item.live_status === 1)
+          resData.push(item)
+      })
+
+      // when videoList has length property, it means it is the first time to load
+      if (!liveVideoList.value.length) {
+        liveVideoList.value = resData.map(item => ({ uniqueId: `${item.roomid}`, item }))
+      }
+      else {
+        resData.forEach((item) => {
+          liveVideoList.value[lastLiveVideoListLength++] = {
+            uniqueId: `${item.roomid}`,
+            item,
+          }
+        })
+      }
+    }
+  }
+  finally {
+    // 當直播列表結果大於9時（9是返回的列表數量）且如果最后一支影片還是正在直播，則繼續獲取
+    if (liveVideoList.value.length > 9 && liveVideoList.value[liveVideoList.value.length - 1]?.item?.live_status === 1) {
+      getFollowedUsersVideos()
+    }
+  }
+}
+
 async function getFollowedUsersVideos() {
   if (noMoreContent.value)
     return
@@ -217,6 +279,29 @@ defineExpose({ initData })
       m="b-0 t-0" relative w-full h-full
       :grid="gridValue"
     >
+      <VideoCard
+        v-for="video in liveVideoList"
+        :key="video.uniqueId"
+        :skeleton="!video.item"
+        :video="video.item ? {
+          // id: Number(video.item.modules.module_dynamic.major.archive?.aid),
+          title: `${video.item.title}`,
+          cover: `${video.item.room_cover}`,
+          author: {
+            name: video.item.uname,
+            authorFace: video.item.face,
+            mid: video.item.uid,
+          },
+          viewStr: video.item.text_small,
+          tag: video.item.area_name_v2,
+          roomid: video.item.roomid,
+          liveStatus: video.item.live_status,
+        } : undefined"
+        type="live"
+        :show-watcher-later="false"
+        :horizontal="gridLayout !== 'adaptive'"
+      />
+
       <VideoCard
         v-for="video in videoList"
         :key="video.uniqueId"