feat: upgrade to the v2 app recommending videos api

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

@@ -3,6 +3,7 @@ import type { Ref } from 'vue'
 import type { AppVideoModel, VideoModel } from './types'
 import emitter from '~/utils/mitt'
 import { accessKey, settings } from '~/logic'
+import { LanguageType } from '~/enums/appEnums'
 
 const videoList = reactive<VideoModel[]>([])
 const appVideoList = reactive<AppVideoModel[]>([])
@@ -94,14 +95,18 @@ async function getAppRecommendVideos() {
     const response = await browser.runtime.sendMessage({
       contentScriptQuery: 'getAppRecommendVideos',
       accessKey: accessKey.value,
+      sLocale: settings.value.language !== LanguageType.Mandarin_CN ? 'zh-Hant_TW' : 'zh-Hans_CN',
+      cLocale: settings.value.language !== LanguageType.Mandarin_CN ? 'zh-Hant_TW' : 'zh-Hans_CN',
       idx: 1,
     })
 
     if (response.code === 0) {
       const resData = [] as AppVideoModel[]
 
-      response.data.forEach((item: AppVideoModel) => {
-        resData.push(item)
+      response.data.items.forEach((item: AppVideoModel) => {
+        // Remove banner & ad cards
+        if (!item.card_type.includes('banner') && item.card_type !== 'cm_v1')
+          resData.push(item)
       })
 
       // when videoList has length property, it means it is the first time to load
@@ -159,19 +164,19 @@ function jumpToLoginPage() {
       </template>
       <template v-else>
         <VideoCard
-          v-for="(video, index) in appVideoList"
-          :id="Number(video.param)"
-          :key="Number(video.param)"
-          :duration="video.duration"
+          v-for="video in appVideoList"
+          :id="video.args.aid"
+          :key="video.args.aid"
+          :duration-str="video.cover_right_text"
           :title="video.title"
           :cover="video.cover"
-          :author="video.name"
-          :author-face="video.face"
-          :mid="video.mid"
-          :view="video.play"
-          :danmaku="video.danmaku"
-          :published-timestamp="video.ctime"
-          :aid="Number(video.param)"
+          :author="video.mask.avatar.text"
+          :author-face="video.mask.avatar.cover"
+          :mid="video.mask.avatar.up_id"
+          :capsule-text="video.desc.split('·')[1]"
+          :bvid="video.bvid"
+          :view-str="video.cover_left_text_1"
+          :danmaku-str="video.cover_left_text_2"
         />
       </template>
 

src/contentScripts/views/Home/components/types.ts

@@ -20,39 +20,87 @@ export interface VideoModel {
 }
 
 export interface AppVideoModel {
-  title: string
-  cover: string
-  uri: string
-  param: string
+  card_type: string
+  card_goto: string
   goto: string
-  desc: string
-  play: number
-  danmaku: number
-  reply: number
-  favorite: number
-  coin: number
-  share: number
-  like: number
-  duration: number
-  rcmd_reason: {
-    id: number
-    content: string
-    message: string
+  param: string
+  bvid: string
+  cover: string
+  title: string
+  uri: string
+  three_point: {
+    dislike_reasons: {
+      id: number
+      name: string
+      toast: string
+    }[]
+
+    feedbacks: {
+      id: number
+      name: string
+      toast: string
+    }[]
+
+    watch_later: number
+  }
+  args: {
+    up_id: number
+    up_name: string
+    rid: number
+    rname: string
+    aid: number
+  }
+  player_args: {
+    aid: number
+    cid: number
+    type: string
+    duration: number
   }
   idx: number
-  cid: number
-  tid: number
-  tname: string
-  tag: {
-    tag_id: number
-    tag_name: string
+  mask: {
+    avatar: {
+      cover: string
+      text: string
+      uri: string
+      event: string
+      event_v2: string
+      up_id: number
+    }
+    button: {
+      text: string
+      param: string
+      event: string
+      type: number
+      event_v2: string
+    }
   }
-  dislike_reasons: { reason_id: number; reason_name: string }[]
-  ctime: number
-  autoplay: number
-  mid: number
-  name: string
-  face: string
-  is_atten: number
-  autoplay_card: number
+  three_point_v2: {
+    title: string
+    icon?: string
+    subtitle: string
+    reasons: {
+      id: number
+      name: string
+      toast: string
+    }[]
+
+    type: string
+  }[]
+
+  track_id: string
+  report_flow_data: string
+  avatar: {
+    cover: string
+    uri: string
+    event: string
+    event_v2: string
+    up_id: number
+  }
+  cover_left_text_1: string
+  cover_left_text_2: string
+  desc: string
+  can_play: number
+  cover_right_text: string
+  cover_left_icon_1: number
+  cover_left_icon_2: number
 }