From b4e2d4bceebdc916d6bcdfe2bb0450e22e9fb485 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Tue, 10 Oct 2023 01:21:49 +0800
Subject: [PATCH] feat: complete homepage `Following` tab

---
 .../views/Home/components/Following.vue       |  91 ++----
 src/contentScripts/views/Home/types.ts        | 285 ++++++++----------
 2 files changed, 152 insertions(+), 224 deletions(-)

diff --git a/src/contentScripts/views/Home/components/Following.vue b/src/contentScripts/views/Home/components/Following.vue
index 21df2f06..ef18f7a8 100644
--- a/src/contentScripts/views/Home/components/Following.vue
+++ b/src/contentScripts/views/Home/components/Following.vue
@@ -1,36 +1,25 @@
 <script setup lang="ts">
 import type { Ref } from 'vue'
-import type { AppVideoModel, VideoModel } from '../types'
+import type { MomentModel } from '../types'
 import emitter from '~/utils/mitt'
-import { settings } from '~/logic'
 
-const videoList = reactive<VideoModel[]>([])
-const appVideoList = reactive<AppVideoModel[]>([])
+const videoList = reactive<MomentModel[]>([])
 const isLoading = ref<boolean>(false)
 const needToLoginFirst = ref<boolean>(false)
 const containerRef = ref<HTMLElement>() as Ref<HTMLElement>
-const offset = ref<string>()
-const updateBaseline = ref<string>()
-
-watch(() => settings.value.recommendationMode, (newValue, oldValue) => {
-  videoList.length = 0
-  appVideoList.length = 0
-  if (newValue === 'web')
-    getRecommendVideos()
-})
+const offset = ref<string>('')
+const updateBaseline = ref<string>('')
 
 onMounted(async () => {
-  // Delay by 0.2 seconds to obtain the `settings.value.recommendationMode` value
-  // otherwise the `settings.value.recommendationMode` value will be undefined
-  // i have no idea to fix that...
-  setTimeout(async () => {
-    getRecommendVideos()
-  }, 200)
+  for (let i = 0; i < 3; i++)
+    await getFollowingAuthorVideos()
 
   emitter.off('reachBottom')
   emitter.on('reachBottom', async () => {
-    if (!isLoading.value)
-      getRecommendVideos()
+    if (!isLoading.value) {
+      for (let i = 0; i < 3; i++)
+        await getFollowingAuthorVideos()
+    }
   })
 })
 
@@ -38,7 +27,7 @@ onUnmounted(() => {
   emitter.off('reachBottom')
 })
 
-async function getRecommendVideos() {
+async function getFollowingAuthorVideos() {
   isLoading.value = true
   try {
     const response = await browser.runtime.sendMessage({
@@ -49,9 +38,12 @@ async function getRecommendVideos() {
     })
 
     if (response.code === 0) {
-      const resData = [] as VideoModel[]
+      offset.value = response.data.offset
+      updateBaseline.value = response.data.update_baseline
 
-      response.data.item.forEach((item: VideoModel) => {
+      const resData = [] as MomentModel[]
+
+      response.data.items.forEach((item: MomentModel) => {
         resData.push(item)
       })
 
@@ -64,7 +56,7 @@ async function getRecommendVideos() {
         Object.assign(videoList, videoList.concat(resData))
       }
     }
-    else if (response.code === 62011) {
+    else if (response.code === -101) {
       needToLoginFirst.value = true
     }
   }
@@ -91,40 +83,21 @@ function jumpToLoginPage() {
       m="b-0 t-0" relative w-full h-full
       grid="~ 2xl:cols-5 xl:cols-4 lg:cols-3 md:cols-2 gap-4"
     >
-      <template v-if="settings.recommendationMode === 'web'">
-        <VideoCard
-          v-for="video in videoList"
-          :id="video.id"
-          :key="video.id"
-          :duration="video.duration"
-          :title="video.title"
-          :cover="video.pic"
-          :author="video.owner.name"
-          :author-face="video.owner.face"
-          :mid="video.owner.mid"
-          :view="video.stat.view"
-          :danmaku="video.stat.danmaku"
-          :published-timestamp="video.pubdate"
-          :bvid="video.bvid"
-        />
-      </template>
-      <template v-else>
-        <VideoCard
-          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="'avatar' in video.mask ? video.mask.avatar.text : ''"
-          :author-face="'avatar' in video.mask ? 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>
+      <VideoCard
+        v-for="video in videoList"
+        :id="Number(video.modules.module_dynamic.major.archive.aid)"
+        :key="video.modules.module_dynamic.major.archive.aid"
+        :duration-str="video.modules.module_dynamic.major.archive.duration_text"
+        :title="video.modules.module_dynamic.major.archive.title"
+        :cover="video.modules.module_dynamic.major.archive.cover"
+        :author="video.modules.module_author.name"
+        :author-face="video.modules.module_author.face"
+        :mid="video.modules.module_author.mid"
+        :view-str="video.modules.module_dynamic.major.archive.stat.play"
+        :danmaku-str="video.modules.module_dynamic.major.archive.stat.danmaku"
+        :capsule-text="video.modules.module_author.pub_time"
+        :bvid="video.modules.module_dynamic.major.archive.bvid"
+      />
 
       <!-- skeleton -->
       <template v-for="item in 30" :key="item">
diff --git a/src/contentScripts/views/Home/types.ts b/src/contentScripts/views/Home/types.ts
index fcc9bc56..3c7456c8 100644
--- a/src/contentScripts/views/Home/types.ts
+++ b/src/contentScripts/views/Home/types.ts
@@ -107,197 +107,152 @@ export interface AppVideoModel {
 
 export interface MomentModel {
 
-  'basic': {
-    'comment_id_str': string
-    'comment_type': 1
-    'like_icon': {
-      'action_url': string
-      'end_url': string
-      'id': 0
-      'start_url': string
+  basic: {
+    comment_id_str: string
+    comment_type: number
+    like_icon: {
+      action_url: string
+      end_url: string
+      id: number
+      start_url: string
     }
-    'rid_str': string
+    rid_str: string
   }
-  'id_str': string
-  'modules': {
-    'module_author': {
-      'avatar': {
-        'container_size': {
-          'height': 1.35
-          'width': 1.35
+  id_str: string
+  modules: {
+    module_author: {
+      avatar: {
+        container_size: {
+          height: number
+          width: number
         }
-        'fallback_layers': {
-          'is_critical_group': true
-          'layers': [
-            {
-              'general_spec': {
-                'pos_spec': {
-                  'axis_x': 0.675
-                  'axis_y': 0.675
-                  'coordinate_pos': 2
-                }
-                'render_spec': {
-                  'opacity': 1
-                }
-                'size_spec': {
-                  'height': 1
-                  'width': 1
-                }
+        fallback_layers: {
+          is_critical_group: boolean
+          layers: {
+            general_spec: {
+              pos_spec: {
+                axis_x: number
+                axis_y: number
+                coordinate_pos: number
               }
-              'layer_config': {
-                'is_critical': true
-                'tags': {
-                  'AVATAR_LAYER': {}
-                  'GENERAL_CFG': {
-                    'config_type': 1
-                    'general_config': {
-                      'web_css_style': {
-                        'borderRadius': '50%'
-                      }
+              render_spec: {
+                opacity: number
+              }
+              size_spec: {
+                height: number
+                width: number
+              }
+            }
+            layer_config: {
+              is_critical: true
+              tags: {
+                AVATAR_LAYER: object
+                GENERAL_CFG: {
+                  config_type: number
+                  general_config: {
+                    web_css_style: {
+                      borderRadius: string
                     }
                   }
                 }
               }
-              'resource': {
-                'res_image': {
-                  'image_src': {
-                    'placeholder': 6
-                    'remote': {
-                      'bfs_style': string
-                      'url': string
-                    }
-                    'src_type': 1
+            }
+            resource: {
+              res_image: {
+                image_src: {
+                  placeholder: number
+                  remote: {
+                    bfs_style: string
+                    url: string
                   }
-                }
-                'res_type': 3
-              }
-              'visible': true
-            },
-            {
-              'general_spec': {
-                'pos_spec': {
-                  'axis_x': 0.8000000000000002
-                  'axis_y': 0.8000000000000002
-                  'coordinate_pos': 1
-                }
-                'render_spec': {
-                  'opacity': 1
-                }
-                'size_spec': {
-                  'height': 0.41666666666666663
-                  'width': 0.41666666666666663
+                  src_type: number
                 }
               }
-              'layer_config': {
-                'tags': {
-                  'GENERAL_CFG': {
-                    'config_type': 1
-                    'general_config': {
-                      'web_css_style': {
-                        'background-color': 'rgb(255,255,255)'
-                        'border': '2px solid rgba(255,255,255,1)'
-                        'borderRadius': '50%'
-                        'boxSizing': 'border-box'
-                      }
-                    }
-                  }
-                  'ICON_LAYER': {}
-                }
-              }
-              'resource': {
-                'res_image': {
-                  'image_src': {
-                    'local': 4
-                    'src_type': 2
-                  }
-                }
-                'res_type': 3
-              }
-              'visible': true
-            },
-          ]
+              res_type: number
+            }
+            visible: boolean
+          }[]
         }
-        'mid': '928123'
+        mid: string
       }
-      'face': string
-      'face_nft': false
-      'following': true
-      'jump_url': string
-      'label': string
-      'mid': 928123
-      'name': string
-      'official_verify': {
-        'desc': string
-        'type': 1
+      face: string
+      face_nft: boolean
+      following: boolean
+      jump_url: string
+      label: string
+      mid: number
+      name: string
+      official_verify: {
+        desc: string
+        type: number
       }
-      'pendant': {
-        'expire': 0
-        'image': string
-        'image_enhance': string
-        'image_enhance_frame': string
-        'name': string
-        'pid': 0
+      pendant: {
+        expire: number
+        image: string
+        image_enhance: string
+        image_enhance_frame: string
+        name: string
+        pid: number
       }
-      'pub_action': string
-      'pub_location_text': string
-      'pub_time': string
-      'pub_ts': 1696609801
-      'type': string
+      pub_action: string
+      pub_location_text: string
+      pub_time: string
+      pub_ts: number
+      type: string
     }
-    'module_dynamic': {
-      'additional': null
-      'desc': null
-      'major': {
-        'archive': {
-          'aid': string
-          'badge': {
-            'bg_color': '#FB7299'
-            'color': '#FFFFFF'
-            'icon_url': null
-            'text': '投稿视频'
+    module_dynamic: {
+      additional?: string
+      desc?: string
+      major: {
+        archive: {
+          aid: string
+          badge: {
+            bg_color: string
+            color: string
+            icon_url?: string
+            text: string
           }
-          'bvid': 'BV13w411y7E7'
-          'cover': 'http://i0.hdslb.com/bfs/archive/15757cde3114b8f19d74ced14ba0694ce20ba1d8.png'
-          'desc': '#14'
-          'disable_preview': 0
-          'duration_text': '23:37'
-          'jump_url': '//www.bilibili.com/video/BV13w411y7E7/'
-          'stat': {
-            'danmaku': '16'
-            'play': '2707'
+          bvid: string
+          cover: string
+          desc: string
+          disable_preview: number
+          duration_text: string
+          jump_url: string
+          stat: {
+            danmaku: string
+            play: string
           }
-          'title': '【7月】主宰七魔剑 14【独家正版】'
-          'type': 1
+          title: string
+          type: number
         }
-        'type': 'MAJOR_TYPE_ARCHIVE'
+        type: string
       }
-      'topic': null
+      topic?: any
     }
-    'module_more': {
-      'three_point_items': [
-        {
-          'label': string
-          'type': string
-        },
-      ]
+    module_more: {
+      three_point_items: {
+        label: string
+        type: string
+      }[]
+
     }
-    'module_stat': {
-      'comment': {
-        'count': 12
-        'forbidden': false
+    module_stat: {
+      comment: {
+        count: number
+        forbidden: boolean
       }
-      'forward': {
-        'count': 0
-        'forbidden': false
+      forward: {
+        count: number
+        forbidden: boolean
       }
-      'like': {
-        'count': 250
-        'forbidden': false
-        'status': false
+      like: {
+        count: number
+        forbidden: boolean
+        status: boolean
       }
     }
   }
-  'type': 'DYNAMIC_TYPE_AV'
-  'visible': true
+  type: string
+  visible: boolean
 
 }