feat: upgrade to the v2 app recommending videos api

2025-04-14 13:15:29 +00:00 · 2023-10-01 18:51:25 +08:00
parent 4b71f944af
commit 2328802469
8 changed files with 129 additions and 56 deletions
--- a/src/_locales/cmn-CN.yml
+++ b/src/_locales/cmn-CN.yml
@@ -3,7 +3,9 @@ common:
  loading: 加载中...
  undo: 还原
  view: '{count}次'
+  viewWithoutNum: 次
  danmaku: '{count} 弹幕'
+  danmakuWithoutNum: 弹幕
  year: 年前
  month: 个月前
  week: 个星期前
--- a/src/_locales/cmn-TW.yml
+++ b/src/_locales/cmn-TW.yml
@@ -3,7 +3,9 @@ common:
  loading: 載入中...
  undo: 復原
  view: '{count}次'
+  viewWithoutNum: 次
  danmaku: '{count} 彈幕'
+  danmakuWithoutNum: 彈幕
  year: 年前
  month: 個月前
  week: 個禮拜前
--- a/src/_locales/en.yml
+++ b/src/_locales/en.yml
@@ -3,7 +3,9 @@ common:
  loading: Loading...
  undo: UNDO
  view: no view | {count} view | {count} views
+  viewWithoutNum: views
  danmaku: no danmaku | {count} danmaku | {count} danmakus
+  danmakuWithoutNum: danmakus
  year: year ago | years ago
  month: month ago | months ago
  week: week ago | weeks ago
--- a/src/_locales/jyut.yml
+++ b/src/_locales/jyut.yml
@@ -3,7 +3,9 @@ common:
  loading: 撈緊...
  undo: 整返
  view: '{count}次'
+  viewWithoutNum: 次
  danmaku: '{count} 彈幕'
+  danmakuWithoutNum: 彈幕
  year: 年前
  month: 個月前
  week: 個禮拜前
--- a/src/background/messageListeners/video.ts
+++ b/src/background/messageListeners/video.ts
@@ -1,7 +1,7 @@
 import browser from 'webextension-polyfill'

 function handleMessage(message: any) {
-// #region APP端api，遺棄
+  // #region APP端api，遺棄
  /** Recommend Videos */
  // if (message.contentScriptQuery === 'getRecommendVideos') {
  //   // https://github.com/indefined/UserScripts/blob/master/bilibiliHome/bilibiliHome.API.md#%E8%8E%B7%E5%8F%96%E9%A6%96%E9%A1%B5%E5%86%85%E5%AE%B9
@@ -62,8 +62,8 @@ function handleMessage(message: any) {
      .catch(error => console.error(error))
  }
  else if (message.contentScriptQuery === 'getAppRecommendVideos') {
-    const url = `https://app.bilibili.com/x/feed/index?build=1&idx=${message.idx}&appkey=27eb53fc9058f8c3&access_key=${message.accessKey}`
-    // const url = `https://app.bilibili.com/x/v2/feed/index?build=72100100&idx=${message.idx}&appkey=27eb53fc9058f8c3&access_key=${message.accessKey}`
+    // const url = `https://app.bilibili.com/x/feed/index?build=1&idx=${message.idx}&appkey=27eb53fc9058f8c3&access_key=${message.accessKey}`
+    const url = `https://app.bilibili.com/x/v2/feed/index?build=74800100&device=pad&mobi_app=iphone&c_locate=${message.cLocate}&s_locale=${message.sLocale}&idx=${message.idx}&appkey=27eb53fc9058f8c3&access_key=${message.accessKey}`
    return fetch(url)
      .then(response => response.json())
      .then(data => data)
@@ -71,7 +71,9 @@ function handleMessage(message: any) {
  }
  // https://github.com/SocialSisterYi/bilibili-API-collect/blob/master/docs/video/info.md#%E8%8E%B7%E5%8F%96%E8%A7%86%E9%A2%91%E8%B6%85%E8%AF%A6%E7%BB%86%E4%BF%A1%E6%81%AFweb%E7%AB%AF
  else if (message.contentScriptQuery === 'getVideoInfo') {
-    const url = `https://api.bilibili.com/x/web-interface/view/detail?${message.aid ? `aid=${message.aid}` : `bvid=${message.bvid}`}`
+    const url = `https://api.bilibili.com/x/web-interface/view/detail?${
+      message.aid ? `aid=${message.aid}` : `bvid=${message.bvid}`
+    }`
    return fetch(url)
      .then(response => response.json())
      .then(data => data)
@@ -79,7 +81,11 @@ function handleMessage(message: any) {
  }
  // https://github.com/SocialSisterYi/bilibili-API-collect/blob/master/docs/comment/list.md#%E8%8E%B7%E5%8F%96%E8%AF%84%E8%AE%BA%E5%8C%BA%E6%98%8E%E7%BB%86_%E7%BF%BB%E9%A1%B5%E5%8A%A0%E8%BD%BD
  else if (message.contentScriptQuery === 'getVideoComments') {
-    const url = `https://api.bilibili.com/x/v2/reply?csrf=${message.csrf}&type=1&oid=${message.oid}&sort=${message.sort ?? 0}&nohot=${message.nohot ?? 0}&pn=${message.pn ?? 1}&ps=${message.ps ?? 20}`
+    const url = `https://api.bilibili.com/x/v2/reply?csrf=${
+      message.csrf
+    }&type=1&oid=${message.oid}&sort=${message.sort ?? 0}&nohot=${
+      message.nohot ?? 0
+    }&pn=${message.pn ?? 1}&ps=${message.ps ?? 20}`
    return fetch(url)
      .then(response => response.json())
      .then(data => data)
--- a/src/components/VideoCard.vue
+++ b/src/components/VideoCard.vue
@@ -5,14 +5,18 @@ import { calcCurrentTime, calcTimeSince, numFormatter } from '~/utils/dataFormat
 const props = defineProps<{
  id: number
  duration?: number
+  durationStr?: string
  title: string
  cover: string
  author?: string
  authorFace?: string
  mid?: number
  view?: number
+  viewStr?: string
  danmaku?: number
+  danmakuStr?: string
  publishedTimestamp?: number
+  capsuleText?: string
  bvid?: string
  aid?: number
  isFollowed?: boolean
@@ -185,7 +189,7 @@ function handelMouseLeave() {
        >
          <!-- Video duration -->
          <div
-            v-if="duration"
+            v-if="duration || durationStr"
            pos="absolute bottom-0 right-0"
            z="2"
            p="x-2 y-1"
@@ -194,7 +198,7 @@ function handelMouseLeave() {
            text="!white xs"
            bg="black opacity-60"
          >
-            {{ calcCurrentTime(duration) }}
+            {{ duration ? calcCurrentTime(duration) : durationStr }}
          </div>

          <div pos="absolute top-0 left-0" z-2>
@@ -334,15 +338,17 @@ function handelMouseLeave() {
              {{ author }}
            </div>
            <div class="video-info" text="base $bew-text-2">
-              <span v-if="view">{{
-                $t('common.view', { count: numFormatter(view) }, view)
+              <span v-if="view || viewStr">{{
+                view ? $t('common.view', { count: numFormatter(view) }, view) : `${viewStr}${$t('common.viewWithoutNum')}`
              }}</span>
-              <template v-if="danmaku">
+              <template v-if="danmaku || danmakuStr">
                <span text-xs font-light mx-1>•</span>
-                <span>{{ $t('common.danmaku', { count: numFormatter(danmaku) }, danmaku) }}</span>
+                <span>{{ danmaku ? $t('common.danmaku', { count: numFormatter(danmaku) }, danmaku) : `${danmakuStr}${$t('common.danmakuWithoutNum')}` }}</span>
              </template>
              <br>
-              <span v-if="publishedTimestamp" text="$bew-text-3 sm" inline-block mt-2 p="x-2 y-1" bg="$bew-fill-1" rounded-4>{{ calcTimeSince(publishedTimestamp * 1000) }}</span>
+              <span v-if="publishedTimestamp || capsuleText" text="$bew-text-3 sm" inline-block mt-2 p="x-2 y-1" bg="$bew-fill-1" rounded-4>
+                {{ publishedTimestamp ? calcTimeSince(publishedTimestamp * 1000) : capsuleText }}
+              </span>
            </div>
          </div>
        </div>
--- a/src/contentScripts/views/Home/components/RecommendContent.vue
+++ b/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>

--- a/src/contentScripts/views/Home/components/types.ts
+++ b/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
 }