feat(video-card): collaborative creation (#1107)

* feat(video-card-avatar): add avatar component for multiple avatar display

* refactor(video-card): add avatar component

* refactor(views): modify video card calling method

* feat(following): up joint submissions are combined into one video card display

* feat(i18n): add cn translation

* fix: dislike dialog ci type check

* fix(video-card-avatar): add more display additions for undisplayed avatars

* refactor(video-card): refactor author and authorList to handle single and multiple authors separately

* fix(following): fix issue with duplicate authors in collaborative submissions

* refactor(video-card): remove `authorList` prop

* feat(video-card): redesign the multiple authors style

* chore: update

* chore: update

---------

Co-authored-by: Hakadao <a578457889743@gmail.com>

src/contentScripts/views/Favorites/Favorites.vue

@@ -223,9 +223,11 @@ function isMusic(item: FavoriteResource) {
                 duration: item.duration,
                 title: item.title,
                 cover: item.cover,
-                author: item.upper.name,
-                authorFace: item.upper.face,
-                mid: item.upper.mid,
+                author: {
+                  name: item.upper.name,
+                  authorFace: item.upper.face,
+                  mid: item.upper.mid,
+                },
                 view: item.cnt_info.play,
                 danmaku: item.cnt_info.danmaku,
                 publishedTimestamp: item.pubtime,

src/contentScripts/views/Home/components/Following.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
 
+import type { Author } from '~/components/VideoCard/types'
 import { useBewlyApp } from '~/composables/useAppProvider'
 import type { GridLayoutType } from '~/logic'
 import type { DataItem as MomentItem, MomentResult } from '~/models/moment/moment'
@@ -8,8 +9,10 @@ import api from '~/utils/api'
 
 // https://github.com/starknt/BewlyBewly/blob/fad999c2e482095dc3840bb291af53d15ff44130/src/contentScripts/views/Home/components/ForYou.vue#L16
 interface VideoElement {
-  uniqueId: string
+  uniqueId: string // 用于标识一条视频（无法用来区分UP主联合投稿）
+  bvid?: string // 用于标识UP主联合投稿视频
   item?: MomentItem
+  authorList?: Author[]
 }
 
 const props = defineProps<{
@@ -97,8 +100,10 @@ async function getFollowedUsersVideos() {
   }
 
   try {
-    // 如果 videoList 不是空的，获取最后一个真实视频的 uniqueId
-    const lastUniqueId = videoList.value.length > 0 ? videoList.value.slice(-1)[0].uniqueId : ''
+    // 如果 videoList 不是空的，获取最后一个真实视频的 uniqueId 和 bvid
+    let lastVideo: VideoElement | null = videoList.value.length > 0 ? videoList.value.slice(-1)[0] : null
+    const lastUniqueId = lastVideo ? lastVideo.uniqueId : ''
+    let lastBvid = lastVideo ? lastVideo.bvid : ''
 
     let i = 0
     // https://github.com/starknt/BewlyBewly/blob/fad999c2e482095dc3840bb291af53d15ff44130/src/contentScripts/views/Home/components/ForYou.vue#L208
@@ -137,15 +142,40 @@ async function getFollowedUsersVideos() {
       else {
         resData.forEach((item, index) => {
           const currentUniqueId = `${item.id_str}`
+          const currentBvid = item.modules.module_dynamic.major.archive?.bvid
+          const author: Author = {
+            name: item.modules.module_author.name,
+            authorFace: item.modules.module_author.face,
+            mid: item.modules.module_author.mid,
+          }
+          const currentVideo: VideoElement = {
+            uniqueId: currentUniqueId,
+            bvid: currentBvid,
+            item,
+            authorList: [author],
+          }
 
           if (index === 0 && currentUniqueId === lastUniqueId) {
+            // 重复视频
             return
           }
+          else if (currentBvid === lastBvid) {
+            // UP主联合投稿视频
 
-          videoList.value[lastVideoListLength++] = {
-            uniqueId: currentUniqueId,
-            item,
+            // 当联合投稿的数据是分两次获取时，有概率会出现多个重复内容
+            // 遍历authorList里面每个up的mid值，如果不存在再添加up信息
+            if (!lastVideo?.authorList?.some(existingAuthor => existingAuthor.mid === author.mid)) {
+              lastVideo?.authorList?.push(author)
+            }
+            return
           }
+          else {
+            // UP主个人投稿视频
+            videoList.value[lastVideoListLength++] = currentVideo
+          }
+
+          lastVideo = currentVideo
+          lastBvid = currentBvid
         })
       }
 
@@ -196,9 +226,7 @@ defineExpose({ initData })
           durationStr: video.item.modules.module_dynamic.major.archive?.duration_text,
           title: `${video.item.modules.module_dynamic.major.archive?.title}`,
           cover: `${video.item.modules.module_dynamic.major.archive?.cover}`,
-          author: video.item.modules.module_author.name,
-          authorFace: video.item.modules.module_author.face,
-          mid: video.item.modules.module_author.mid,
+          author: video.authorList,
           viewStr: video.item.modules.module_dynamic.major.archive?.stat.play,
           danmakuStr: video.item.modules.module_dynamic.major.archive?.stat.danmaku,
           capsuleText: video.item.modules.module_author.pub_time,

src/contentScripts/views/Home/components/ForYou.vue

@@ -350,10 +350,12 @@ defineExpose({ initData })
             duration: video.item.duration,
             title: video.item.title,
             cover: video.item.pic,
-            author: video.item.owner.name,
-            authorFace: video.item.owner.face,
-            followed: !!video.item.is_followed,
-            mid: video.item.owner.mid,
+            author: {
+              name: video.item.owner.name,
+              authorFace: video.item.owner.face,
+              followed: !!video.item.is_followed,
+              mid: video.item.owner.mid,
+            },
             view: video.item.stat.view,
             danmaku: video.item.stat.danmaku,
             publishedTimestamp: video.item.pubdate,
@@ -377,10 +379,12 @@ defineExpose({ initData })
             durationStr: video.item.cover_right_text,
             title: `${video.item.title}`,
             cover: `${video.item.cover}`,
-            author: video.item?.mask?.avatar.text,
-            authorFace: video.item?.mask?.avatar.cover || video.item?.avatar?.cover,
-            followed: video.item?.bottom_rcmd_reason === '已关注' || video.item?.bottom_rcmd_reason === '已關注',
-            mid: video.item?.mask?.avatar.up_id,
+            author: {
+              name: video.item?.mask?.avatar.text,
+              authorFace: video.item?.mask?.avatar.cover || video.item?.avatar?.cover,
+              followed: video.item?.bottom_rcmd_reason === '已关注' || video.item?.bottom_rcmd_reason === '已關注',
+              mid: video.item?.mask?.avatar.up_id,
+            },
             capsuleText: video.item?.desc?.split('·')[1],
             bvid: video.item.bvid,
             viewStr: video.item.cover_left_text_1,

src/contentScripts/views/Home/components/Live.vue

@@ -185,9 +185,11 @@ defineExpose({ initData })
           // id: Number(video.item.modules.module_dynamic.major.archive?.aid),
           title: `${video.item.title}`,
           cover: `${video.item.room_cover}`,
-          author: video.item.uname,
-          authorFace: video.item.face,
-          mid: video.item.uid,
+          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,

src/contentScripts/views/Home/components/Ranking.vue

@@ -200,9 +200,11 @@ defineExpose({ initData })
             title: video.title,
             desc: video.desc,
             cover: video.pic,
-            author: video.owner.name,
-            authorFace: video.owner.face,
-            mid: video.owner.mid,
+            author: {
+              name: video.owner.name,
+              authorFace: video.owner.face,
+              mid: video.owner.mid,
+            },
             view: video.stat.view,
             danmaku: video.stat.danmaku,
             publishedTimestamp: video.pubdate,

src/contentScripts/views/Home/components/SubscribedSeries.vue

@@ -196,10 +196,12 @@ defineExpose({ initData })
           id: video.item.modules.module_author.mid,
           title: `${video.item.modules.module_dynamic.major.pgc?.title}`,
           cover: `${video.item.modules.module_dynamic.major.pgc?.cover}`,
-          author: video.item.modules.module_author.name,
-          authorFace: video.item.modules.module_author.face,
-          mid: video.item.modules.module_author.mid,
-          authorUrl: video.item.modules.module_author.jump_url,
+          author: {
+            name: video.item.modules.module_author.name,
+            authorUrl: video.item.modules.module_author.jump_url,
+            authorFace: video.item.modules.module_author.face,
+            mid: video.item.modules.module_author.mid,
+          },
           viewStr: video.item.modules.module_dynamic.major.pgc?.stat.play,
           danmakuStr: video.item.modules.module_dynamic.major.pgc?.stat.danmaku,
           capsuleText: video.item.modules.module_author.pub_time,

src/contentScripts/views/Home/components/Trending.vue

@@ -149,9 +149,11 @@ defineExpose({ initData })
           title: video.item.title,
           desc: video.item.desc,
           cover: video.item.pic,
-          author: video.item.owner.name,
-          authorFace: video.item.owner.face,
-          mid: video.item.owner.mid,
+          author: {
+            name: video.item.owner.name,
+            authorFace: video.item.owner.face,
+            mid: video.item.owner.mid,
+          },
           view: video.item.stat.view,
           danmaku: video.item.stat.danmaku,
           publishedTimestamp: video.item.pubdate,