From 1d4cc4c5afb27a5eb09786b001fe5d3020e92274 Mon Sep 17 00:00:00 2001
From: Hakadao <a578457889743@gmail.com>
Date: Wed, 5 Apr 2023 17:00:35 +0800
Subject: [PATCH] refactor: adjust the video `types.ts` file and rename types
 within the file

---
 src/components/{VideoCard => }/VideoCard.vue  |  0
 src/components/VideoCard/types.ts             | 19 -------
 .../Home/components/RecommendContent.vue      | 51 +++++++----------
 .../views/Home/components/types.ts            | 57 +++++++++++++++++++
 4 files changed, 78 insertions(+), 49 deletions(-)
 rename src/components/{VideoCard => }/VideoCard.vue (100%)
 delete mode 100644 src/components/VideoCard/types.ts
 create mode 100644 src/contentScripts/views/Home/components/types.ts

diff --git a/src/components/VideoCard/VideoCard.vue b/src/components/VideoCard.vue
similarity index 100%
rename from src/components/VideoCard/VideoCard.vue
rename to src/components/VideoCard.vue
diff --git a/src/components/VideoCard/types.ts b/src/components/VideoCard/types.ts
deleted file mode 100644
index 44233f11..00000000
--- a/src/components/VideoCard/types.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-export interface Video {
-  id: number
-  bvid: string
-  owner: {
-    face: string
-    mid: number
-    name: string
-  }
-  pic: string
-  pubdate: number
-  stat: {
-    danmaku: number
-    like: number
-    view: number
-  }
-  title: string
-  uri: string
-  duration: number
-}
diff --git a/src/contentScripts/views/Home/components/RecommendContent.vue b/src/contentScripts/views/Home/components/RecommendContent.vue
index b0d8742d..d3972929 100644
--- a/src/contentScripts/views/Home/components/RecommendContent.vue
+++ b/src/contentScripts/views/Home/components/RecommendContent.vue
@@ -1,15 +1,16 @@
 <script setup lang="ts">
-// import { accessKey, language } from '~/logic/index'
-import type { Video } from '~/components/VideoCard/types'
+import type { AppVideoModel, VideoModel } from './types'
 import { accessKey, settings } from '~/logic'
 
-const videoList = reactive<Video[]>([])
+const videoList = reactive<VideoModel[]>([])
+const appVideoList = reactive<AppVideoModel[]>([])
 const isLoading = ref<boolean>(false)
 const needToLoginFirst = ref<boolean>(false)
 let refreshIdx = 1
 
 watch(() => settings.value.recommendationMode, (newValue, oldValue) => {
   videoList.length = 0
+  appVideoList.length = 0
   if (newValue === 'web') { getRecommendVideos() }
   else {
     for (let i = 0; i < 3; i++)
@@ -18,28 +19,18 @@ watch(() => settings.value.recommendationMode, (newValue, oldValue) => {
 })
 
 onMounted(async () => {
-  // getRecommendVideos()
-  setTimeout(() => {
-    if (settings.value.recommendationMode === 'web') { getRecommendVideos() }
-    else {
-      for (let i = 0; i < 3; i++)
-        getAppRecommendVideos()
-    }
+  window.onscroll = () => {
+    if (window.innerHeight + window.scrollY >= document.body.scrollHeight - 20) {
+      if (isLoading.value)
+        return
 
-    window.onscroll = () => {
-      if (window.innerHeight + window.scrollY >= document.body.scrollHeight - 20) {
-        if (isLoading.value)
-          return
-
-        // getRecommendVideos()
-        if (settings.value.recommendationMode === 'web') { getRecommendVideos() }
-        else {
-          for (let i = 0; i < 3; i++)
-            getAppRecommendVideos()
-        }
+      if (settings.value.recommendationMode === 'web') { getRecommendVideos() }
+      else {
+        for (let i = 0; i < 3; i++)
+          getAppRecommendVideos()
       }
     }
-  }, 200)
+  }
 })
 
 onUnmounted(() => {
@@ -56,9 +47,9 @@ async function getRecommendVideos() {
     })
 
     if (response.code === 0) {
-      const resData = [] as Video[]
+      const resData = [] as VideoModel[]
 
-      response.data.item.forEach((item: Video) => {
+      response.data.item.forEach((item: VideoModel) => {
         resData.push(item)
       })
 
@@ -90,19 +81,19 @@ async function getAppRecommendVideos() {
     })
 
     if (response.code === 0) {
-      const resData = [] as Video[]
+      const resData = [] as AppVideoModel[]
 
-      response.data.forEach((item: Video) => {
+      response.data.forEach((item: AppVideoModel) => {
         resData.push(item)
       })
 
       // when videoList has length property, it means it is the first time to load
-      if (!videoList.length) {
-        Object.assign(videoList, resData)
+      if (!appVideoList.length) {
+        Object.assign(appVideoList, resData)
       }
       else {
         // else we concat the new data to the old data
-        Object.assign(videoList, videoList.concat(resData))
+        Object.assign(appVideoList, appVideoList.concat(resData))
       }
     }
     else if (response.code === 62011) {
@@ -148,7 +139,7 @@ function jumpToLoginPage() {
     </template>
     <template v-else>
       <VideoCard
-        v-for="(video, index) in videoList"
+        v-for="(video, index) in appVideoList"
         :key="index"
         :duration="video.duration"
         :title="video.title"
diff --git a/src/contentScripts/views/Home/components/types.ts b/src/contentScripts/views/Home/components/types.ts
new file mode 100644
index 00000000..e9189f68
--- /dev/null
+++ b/src/contentScripts/views/Home/components/types.ts
@@ -0,0 +1,57 @@
+export interface VideoModel {
+  id: number
+  bvid: string
+  owner: {
+    face: string
+    mid: number
+    name: string
+  }
+  pic: string
+  pubdate: number
+  stat: {
+    danmaku: number
+    like: number
+    view: number
+  }
+  title: string
+  uri: string
+  duration: number
+}
+
+export interface AppVideoModel {
+  title: string
+  cover: string
+  uri: string
+  param: 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
+  }
+  idx: number
+  cid: number
+  tid: number
+  tname: string
+  tag: {
+    tag_id: number
+    tag_name: 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
+}