From 86e6f3a0ad7d196a0cf5cbc55913c48df4d2ae07 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Mon, 28 Oct 2024 02:20:11 +0800
Subject: [PATCH] feat(video-card): show the badge when in following tab

---
 src/components/VideoCard/VideoCard.vue        | 40 ++++++++++++++++++-
 .../views/Home/components/Following.vue       |  6 +++
 2 files changed, 45 insertions(+), 1 deletion(-)

diff --git a/src/components/VideoCard/VideoCard.vue b/src/components/VideoCard/VideoCard.vue
index 357da519..d1ae3abf 100644
--- a/src/components/VideoCard/VideoCard.vue
+++ b/src/components/VideoCard/VideoCard.vue
@@ -50,21 +50,35 @@ export interface Video {
   viewStr?: string
   danmaku?: number
   danmakuStr?: string
+
   publishedTimestamp?: number
   capsuleText?: string
+
   bvid?: string
   aid?: number
+  // used for live
+  roomid?: number
+  epid?: number
   goto?: string
   /** After set the `url`, clicking the video will navigate to this url. It won't be affected by aid, bvid or epid */
   url?: string
   /** If you want to show preview video, you should set the cid value */
   cid?: number
-  epid?: number
+
   followed?: boolean
+  liveStatus?: number
+
   tag?: string
   rank?: number
   type?: 'horizontal' | 'vertical' | 'bangumi'
   threePointV2: ThreePointV2[]
+
+  badge?: {
+    bgColor: string
+    color: string
+    iconUrl?: string
+    text: string
+  }
 }
 
 const toast = useToast()
@@ -97,6 +111,8 @@ const videoUrl = computed(() => {
     return getCurrentVideoUrl(props.video)
   else if (props.video.epid)
     return `https://www.bilibili.com/bangumi/play/ep${props.video.epid}`
+  else if (props.video.roomid)
+    return `https://live.bilibili.com/${props.video.roomid}`
   else
     return ''
 })
@@ -396,6 +412,28 @@ provide('getVideoType', () => props.type!)
                 <slot name="coverTopLeft" />
               </div>
 
+              <div
+                v-if="video.liveStatus === 1"
+                class="group-hover:opacity-0"
+                pos="absolute left-0 top-0" bg="$bew-theme-color" text="xs white"
+                p="x-2 y-1" m-1 inline-block rounded="$bew-radius" duration-300
+              >
+                LIVE
+              </div>
+
+              <div
+                v-if="video.badge && Object.keys(video.badge).length > 0"
+                class="group-hover:opacity-0"
+                :style="{
+                  backgroundColor: video.badge.bgColor,
+                  color: video.badge.color,
+                }"
+                pos="absolute right-0 top-0" bg="$bew-theme-color" text="xs white"
+                p="x-2 y-1" m-1 inline-block rounded="$bew-radius" duration-300
+              >
+                {{ video.badge.text }}
+              </div>
+
               <!-- Watcher later button -->
               <button
                 v-if="showWatcherLater"
diff --git a/src/contentScripts/views/Home/components/Following.vue b/src/contentScripts/views/Home/components/Following.vue
index b920273d..c78dffa5 100644
--- a/src/contentScripts/views/Home/components/Following.vue
+++ b/src/contentScripts/views/Home/components/Following.vue
@@ -194,6 +194,12 @@ defineExpose({ initData })
           danmakuStr: video.item.modules.module_dynamic.major.archive?.stat.danmaku,
           capsuleText: video.item.modules.module_author.pub_time,
           bvid: video.item.modules.module_dynamic.major.archive?.bvid,
+          badge: video.item.modules.module_dynamic.major.archive?.badge.text !== '投稿视频' ? {
+            bgColor: video.item.modules.module_dynamic.major.archive?.badge.bg_color,
+            color: video.item.modules.module_dynamic.major.archive?.badge.color,
+            iconUrl: video.item.modules.module_dynamic.major.archive?.badge.icon_url,
+            text: video.item.modules.module_dynamic.major.archive?.badge.text,
+          } : undefined,
         } : undefined"
         show-preview
         :horizontal="gridLayout !== 'adaptive'"