feat: update video page

* chore(i18n): change view value

src/_locales/cmn-CN.yml

@@ -2,7 +2,7 @@ common:
   view_all: 查看更多
   loading: 加载中...
   undo: 还原
-  view: 次
+  view: '{count} 次'
   year: 年前
   month: 个月前
   week: 个星期前

src/_locales/cmn-TW.yml

@@ -2,7 +2,7 @@ common:
   view_all: 檢視所有
   loading: 載入中...
   undo: 復原
-  view: 次
+  view: '{count} 次'
   year: 年前
   month: 個月前
   week: 個禮拜前

src/_locales/en.yml

@@ -2,7 +2,7 @@ common:
   view_all: View ALL
   loading: Loading...
   undo: UNDO
-  view: no view | view | views
+  view: no view | {count} view | {count} views
   year: year ago | years ago
   month: month ago | months ago
   week: week ago | weeks ago

src/_locales/jyut.yml

@@ -2,7 +2,7 @@ common:
   view_all: 睇晒佢哋
   loading: 撈緊...
   undo: 整返
-  view: 次
+  view: '{count} 次'
   year: 年前
   month: 個月前
   week: 個禮拜前

src/background/apis/videos.ts

@@ -62,9 +62,9 @@ export const setupVideosAPIs = () => {
         .then(data => data)
         .catch(error => console.error(error))
     }
-    // https://github.com/SocialSisterYi/bilibili-API-collect/blob/master/video/info.md#%E8%8E%B7%E5%8F%96%E8%A7%86%E9%A2%91%E8%AF%A6%E7%BB%86%E4%BF%A1%E6%81%AFweb%E7%AB%AF
+    // 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?${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)

src/components/VideoCard/VideoCard.vue

@@ -302,11 +302,8 @@ function gotoChannel(mid: number) {
             {{ videoData.owner.name }}
           </div>
           <div class="video-info" text="base $bew-text-2">
-            {{ numFormatter(videoData.stat.view)
-            }}{{
-              language === LanguageType.English
-                ? ` ${$t('common.view', videoData.stat.view)}`
-                : $t('common.view', videoData.stat.view)
+            {{
+              $t('common.view', { count: numFormatter(videoData.stat.view) })
             }}
             <span class="text-xs font-light">•</span>
             {{ calcTimeSince(videoData.pubdate * 1000) }}

src/contentScripts/views/Video/Video.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import type { Ref, UnwrapNestedRefs } from 'vue'
 import { useDateFormat } from '@vueuse/core'
-import type { Comment, VideoInfo } from './types'
-import { calcTimeSince, getCSRF, removeHttpFromUrl } from '~/utils'
+import type { Comment, UserCardInfo, VideoInfo } from './types'
+import { calcTimeSince, getCSRF, numFormatter, removeHttpFromUrl } from '~/utils'
 
 const videoContent = ref() as Ref<HTMLElement>
 // const commentContent = ref() as Ref<HTMLElement>
@@ -10,7 +10,8 @@ const danmukuContent = ref() as Ref<HTMLElement>
 const recommendedContent = ref() as Ref<HTMLElement>
 const videoEpisodeList = ref() as Ref<HTMLElement>
 const videoInfo = reactive<VideoInfo | {}>({}) as UnwrapNestedRefs<VideoInfo>
-const videoPlayerPreviousPosition = reactive<{ right: string; bottom: string }>({ right: '0', bottom: '0' })
+const userCardInfo = reactive<UserCardInfo | {}>({}) as UnwrapNestedRefs<UserCardInfo>
+// const videoPlayerPreviousPosition = reactive<{ right: string; bottom: string }>({ right: '0', bottom: '0' })
 const commentList = reactive<Comment[]>([])
 const commentPageInfo = reactive<any>({})
 
@@ -50,6 +51,11 @@ onMounted(async () => {
   getVideoComments()
 })
 
+watch(() => 'location.href', async (newValue, oldValue) => {
+  await getVideoInfo()
+  getVideoComments()
+})
+
 onUnmounted(() => {
   window.onload = () => {}
 })
@@ -61,8 +67,10 @@ async function getVideoInfo() {
   // url.match(/video\/[0-9a-zA-Z]*/)[0] = 'video/BV1vx4y1V7VD/'
   const bvid = url.match(/video\/[0-9a-zA-Z]*\/?/)![0].split('/')[1]
   const res = await browser.runtime.sendMessage({ contentScriptQuery: 'getVideoInfo', bvid })
-  if (res.code === 0)
-    Object.assign(videoInfo, res.data)
+  if (res.code === 0) {
+    Object.assign(videoInfo, res.data.View)
+    Object.assign(userCardInfo, res.data.Card)
+  }
 }
 
 // function setupVideoSize() {
@@ -161,12 +169,16 @@ function setupCommentEmote(content: string, emote: any) {
 
 <template>
   <div class="video-page-wrapper" flex gap-6 m-auto>
-    <main w="3/4" min-w-640px flex="~ col gap-6">
+    <main w="3/4" min-w-640px flex="~ col gap-4">
       <div ref="videoContent" bg="$bew-fill-1" />
       <section>
         <p text-2xl fw-600>
           {{ videoInfo.title }}
         </p>
+        <p text="$bew-text-2" flex gap-4 lh-6>
+          <span>{{ $t('common.view', { count: videoInfo.stat?.view }) }}</span>
+          <span>{{ videoInfo.stat?.danmaku }} danmaku</span>
+        </p>
       </section>
       <section bg="$bew-content-solid-1" rounded="$bew-radius" p-4>
         <section
@@ -189,9 +201,12 @@ function setupCommentEmote(content: string, emote: any) {
               w-40px mr-4 shrink-0
             >
             <div>
-              <p text-xl fw-500>
+              <p text-base fw-500>
                 {{ videoInfo.owner?.name }}
               </p>
+              <p text="sm $bew-text-2">
+                {{ numFormatter(userCardInfo.follower) }} subscribers
+              </p>
               <!-- <Button @click="changeUrl">
                 click me
               </Button> -->

src/contentScripts/views/Video/types.ts

@@ -223,6 +223,12 @@ export interface VideoInfo {
   need_jump_bv: boolean
 }
 
+export interface UserCardInfo {
+  card: any
+  following: boolean
+  follower: number
+}
+
 export interface Comment {
   'rpid': number
   'oid': number