From abcdb10246a58d615d77d5dd4a454c65d948f10d Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Tue, 21 Feb 2023 19:04:17 +0800
Subject: [PATCH] feat: video page

---
 src/background/apis/videos.ts            |  84 +++++----
 src/contentScripts/views/Video/Video.vue |  69 ++++++-
 src/contentScripts/views/Video/types.ts  | 224 +++++++++++++++++++++++
 3 files changed, 331 insertions(+), 46 deletions(-)
 create mode 100644 src/contentScripts/views/Video/types.ts

diff --git a/src/background/apis/videos.ts b/src/background/apis/videos.ts
index f1af30ef..850c16cb 100644
--- a/src/background/apis/videos.ts
+++ b/src/background/apis/videos.ts
@@ -2,6 +2,7 @@ import browser from 'webextension-polyfill'
 
 export const setupVideosAPIs = () => {
   browser.runtime.onMessage.addListener((message) => {
+    // #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
@@ -11,6 +12,49 @@ export const setupVideosAPIs = () => {
     //     .then(data => data)
     //     .catch(error => console.error(error))
     // }
+    // /** Submit a video that is not of interest */
+    // else if (message.contentScriptQuery === 'submitDislike') {
+    //   // https://github.com/indefined/UserScripts/blob/master/bilibiliHome/bilibiliHome.API.md#%E6%8F%90%E4%BA%A4%E4%B8%8D%E5%96%9C%E6%AC%A2
+    //   let url = `https://app.bilibili.com/x/feed/dislike?access_key=${message.accessKey}
+    //     &goto=${message.goto}
+    //     &id=${message.id}
+    //     &mid=${message.mid}
+    //     &reason_id=${message.reasonID}
+    //     &rid=${message.rid}
+    //     &tag_id=${message.tagID}
+    //     &build=5000000`
+
+    //   // remove url empty spaces
+    //   url = url.replace(/\s+/g, '')
+
+    //   return fetch(url)
+    //     .then(response => response.json())
+    //     .then(data => data)
+    //     .catch(error => console.error(error))
+    // }
+
+    // /** Undo a video that is not of interest */
+    // else if (message.contentScriptQuery === 'undoDislike') {
+    //   // https://github.com/indefined/UserScripts/blob/master/bilibiliHome/bilibiliHome.API.md#%E6%92%A4%E9%94%80%E4%B8%8D%E5%96%9C%E6%AC%A2
+    //   let url = `https://app.bilibili.com/x/feed/dislike/cancel?access_key=${message.accessKey}
+    //     &goto=${message.goto}
+    //     &id=${message.id}
+    //     &mid=${message.mid}
+    //     &reason_id=${message.reasonID}
+    //     &rid=${message.rid}
+    //     &tag_id=${message.tagID}
+    //     &build=5000000`
+
+    //   // remove url empty spaces
+    //   url = url.replace(/\s+/g, '')
+
+    //   return fetch(url)
+    //     .then(response => response.json())
+    //     .then(data => data)
+    //     .catch(error => console.error(error))
+    // }
+    // #endregion
+
     if (message.contentScriptQuery === 'getRecommendVideos') {
       const url = `https://api.bilibili.com/x/web-interface/index/top/feed/rcmd?fresh_idx=${message.refreshIdx}&feed_version=V1&fresh_type=4&ps=30&plat=1`
       return fetch(url)
@@ -18,43 +62,9 @@ export const setupVideosAPIs = () => {
         .then(data => data)
         .catch(error => console.error(error))
     }
-
-    /** Submit a video that is not of interest */
-    if (message.contentScriptQuery === 'submitDislike') {
-      // https://github.com/indefined/UserScripts/blob/master/bilibiliHome/bilibiliHome.API.md#%E6%8F%90%E4%BA%A4%E4%B8%8D%E5%96%9C%E6%AC%A2
-      let url = `https://app.bilibili.com/x/feed/dislike?access_key=${message.accessKey}
-        &goto=${message.goto}
-        &id=${message.id}
-        &mid=${message.mid}
-        &reason_id=${message.reasonID}
-        &rid=${message.rid}
-        &tag_id=${message.tagID}
-        &build=5000000`
-
-      // remove url empty spaces
-      url = url.replace(/\s+/g, '')
-
-      return fetch(url)
-        .then(response => response.json())
-        .then(data => data)
-        .catch(error => console.error(error))
-    }
-
-    /** Unsubmit a video that is not of interest */
-    if (message.contentScriptQuery === 'undoDislike') {
-      // https://github.com/indefined/UserScripts/blob/master/bilibiliHome/bilibiliHome.API.md#%E6%92%A4%E9%94%80%E4%B8%8D%E5%96%9C%E6%AC%A2
-      let url = `https://app.bilibili.com/x/feed/dislike/cancel?access_key=${message.accessKey}
-        &goto=${message.goto}
-        &id=${message.id}
-        &mid=${message.mid}
-        &reason_id=${message.reasonID}
-        &rid=${message.rid}
-        &tag_id=${message.tagID}
-        &build=5000000`
-
-      // remove url empty spaces
-      url = url.replace(/\s+/g, '')
-
+    // 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
+    else if (message.contentScriptQuery === 'getVideoInfo') {
+      const url = `https://api.bilibili.com/x/web-interface/view?${message.aid ? `aid=${message.aid}` : `bvid=${message.bvid}`}`
       return fetch(url)
         .then(response => response.json())
         .then(data => data)
diff --git a/src/contentScripts/views/Video/Video.vue b/src/contentScripts/views/Video/Video.vue
index 5e77c364..6d35a30c 100644
--- a/src/contentScripts/views/Video/Video.vue
+++ b/src/contentScripts/views/Video/Video.vue
@@ -1,26 +1,77 @@
 <script lang="ts" setup>
-import type { Ref } from 'vue'
+import type { Ref, UnwrapNestedRefs } from 'vue'
+import type { VideoInfoModel } from './types'
+import { removeHttpFromUrl } from '~/utils'
 
-const hahaha = ref() as Ref<HTMLElement>
-
-const app = document.querySelector('#app') as HTMLElement
-// app.innerHTML = ''
+const videoContent = ref() as Ref<HTMLElement>
+const videoInfo = reactive<VideoInfoModel | {}>({}) as UnwrapNestedRefs<VideoInfoModel>
 
 // document.body.removeChild(app)
 
 onMounted(() => {
+  // const app = document.querySelector('#app') as HTMLElement
+  // app.innerHTML = ''
+  getVideoInfo()
+
   const videoPlayer = document.querySelector('#playerWrap') as HTMLElement
-  if (hahaha.value)
-    hahaha.value.appendChild(videoPlayer)
+  if (videoContent.value)
+    videoContent.value.appendChild(videoPlayer)
 })
+
+function getVideoInfo() {
+  // e.g. https://www.bilibili.com/video/BV1vx4y1V7VD/
+  const url = location.href
+  // url.match(/video\/[0-9a-zA-Z]*/) = ['video/BV1vx4y1V7VD/', index: 25, input: 'https://www.bilibili.com/video/BV1vx4y1V7VD/', groups: undefined]
+  // url.match(/video\/[0-9a-zA-Z]*/)[0] = 'video/BV1vx4y1V7VD/'
+  const bvid = url.match(/video\/[0-9a-zA-Z]*\/?/)![0].split('/')[1]
+  browser.runtime.sendMessage({ contentScriptQuery: 'getVideoInfo', bvid })
+    .then((res) => {
+      if (res.code === 0)
+        Object.assign(videoInfo, res.data)
+    })
+}
 </script>
 
 <template>
-  <div>
-    <div ref="hahaha" class="uwuwuw" />
+  <div flex gap-6>
+    <main w="3/4" grid gap-6>
+      <div ref="videoContent" w-full bg="$bew-fill-1" />
+      <section>
+        <p text-2xl fw-600>
+          {{ videoInfo.title }}
+        </p>
+      </section>
+      <section flex justify-between bg="$bew-content-solid-1" rounded="$bew-radius" p-4>
+        <div flex>
+          <img
+            v-if="videoInfo.owner?.face"
+            :src="`${videoInfo.owner?.face}@60w_60h_1c`"
+            :alt="videoInfo.owner.name" rounded="$bew-radius-half" aspect-square
+            w-40px mr-4
+          >
+          <div>
+            <p text-xl fw-500>
+              {{ videoInfo.owner?.name }}
+            </p>
+            <!-- <p>{{ videoInfo.owner }}</p> -->
+          </div>
+        </div>
+      </section>
+      <!-- <section>
+        {{ JSON.stringify(videoInfo.desc_v2[0].raw_text) }}
+      </section> -->
+      <!-- <section v-html="videoInfo.desc_v2[0].raw_text" /> -->
+    </main>
+    <aside w="1/4" bg="$bew-fill-1" />
   </div>
 </template>
 
 <style lang="scss" scoped>
 
 </style>
+
+<style>
+#bilibili-player {
+  width: 100%;
+}
+</style>
diff --git a/src/contentScripts/views/Video/types.ts b/src/contentScripts/views/Video/types.ts
new file mode 100644
index 00000000..1b5895be
--- /dev/null
+++ b/src/contentScripts/views/Video/types.ts
@@ -0,0 +1,224 @@
+// 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
+export interface VideoInfoModel {
+  bvid: string
+  aid: number
+  videos: number
+  tid: number
+  tname: string
+  copyright: number
+  pic: string
+  title: string
+  pubdate: number
+  ctime: number
+  desc: string
+  desc_v2: [
+    {
+      raw_text: string
+      type: number
+      biz_id: number
+    },
+  ]
+  state: number
+  duration: number
+  mission_id: number
+  rights: {
+    bp: number
+    elec: number
+    download: number
+    movie: number
+    pay: number
+    hd5: number
+    no_reprint: number
+    autoplay: number
+    ugc_pay: number
+    is_cooperation: number
+    ugc_pay_preview: number
+    no_background: number
+    clean_mode: number
+    is_stein_gate: number
+    is_360: number
+    no_share: number
+    arc_pay: number
+    free_watch: number
+  }
+  owner: {
+    mid: number
+    name: string
+    face: string
+  }
+  staff: Array<{
+    mid: number
+    title: string
+    name: string
+    face: string
+    follower: number
+  }>
+  stat: {
+    aid: number
+    view: number
+    danmaku: number
+    reply: number
+    favorite: number
+    coin: number
+    share: number
+    now_rank: number
+    his_rank: number
+    like: number
+    dislike: number
+    evaluation: string
+    argue_msg: string
+  }
+  dynamic: string
+  cid: number
+  dimension: {
+    width: number
+    height: number
+    rotate: number
+  }
+  season_id: number
+  premiere: null
+  teenage_mode: number
+  is_chargeable_season: boolean
+  is_story: false
+  no_cache: boolean
+  pages: Array<{
+    cid: number
+    page: number
+    from: string
+    part: string
+    duration: number
+    vid: string
+    weblink: string
+    dimension: {
+      width: number
+      height: number
+      rotate: number
+    }
+    first_frame: string
+  }>
+
+  subtitle: {
+    allow_submit: boolean
+    list: string[]
+  }
+  ugc_season: {
+    id: number
+    title: string
+    cover: string
+    mid: number
+    intro: string
+    sign_state: number
+    attribute: number
+    sections: [
+      {
+        season_id: number
+        id: number
+        title: string
+        type: number
+        episodes: Array<{
+          season_id: number
+          section_id: number
+          id: number
+          aid: number
+          cid: number
+          title: string
+          attribute: number
+          arc: {
+            aid: number
+            videos: number
+            type_id: number
+            type_name: string
+            copyright: number
+            pic: string
+            title: string
+            pubdate: number
+            ctime: number
+            desc: string
+            state: number
+            duration: number
+            rights: {
+              bp: number
+              elec: number
+              download: number
+              movie: number
+              pay: number
+              hd5: number
+              no_reprint: number
+              autoplay: number
+              ugc_pay: number
+              is_cooperation: number
+              ugc_pay_preview: number
+              arc_pay: number
+              free_watch: number
+            }
+            author: {
+              mid: number
+              name: string
+              face: string
+            }
+            stat: {
+              aid: number
+              view: number
+              danmaku: number
+              reply: number
+              fav: number
+              coin: number
+              share: number
+              now_rank: number
+              his_rank: number
+              like: number
+              dislike: number
+              evaluation: string
+              argue_msg: string
+            }
+            dynamic: string
+            dimension: {
+              width: number
+              height: number
+              rotate: number
+            }
+            desc_v2: null
+            is_chargeable_season: boolean
+            is_blooper: boolean
+          }
+          page: {
+            cid: number
+            page: number
+            from: string
+            part: string
+            duration: number
+            vid: string
+            weblink: string
+            dimension: {
+              width: number
+              height: number
+              rotate: number
+            }
+          }
+          bvid: string
+        }>
+      },
+    ]
+    stat: {
+      season_id: number
+      view: number
+      danmaku: number
+      reply: number
+      fav: number
+      coin: number
+      share: number
+      now_rank: number
+      his_rank: number
+      like: number
+    }
+    ep_count: number
+    season_type: number
+    is_pay_season: boolean
+  }
+  is_season_display: boolean
+  user_garb: {
+    url_image_ani_cut: string
+  }
+  like_icon: string
+  need_jump_bv: boolean
+}