feat: Following Anime, Shows & Movies (wip)

src/contentScripts/views/Home/Home.vue

@@ -4,6 +4,7 @@ import ForYou from './components/ForYou.vue'
 import Following from './components/Following.vue'
 import Trending from './components/Trending.vue'
 import Ranking from './components/Ranking.vue'
+import Pgc from './components/Pgc.vue'
 import type { HomeTab } from './types'
 import { HomeSubPage } from './types'
 import emitter from '~/utils/mitt'
@@ -15,7 +16,7 @@ const handleBackToTop = inject('handleBackToTop') as (targetScrollTop: number) =
 
 const recommendContentKey = ref<string>(`recommendContent${Number(new Date())}`)
 const activatedPage = ref<HomeSubPage>(HomeSubPage.ForYou)
-const pages = { ForYou, Following, Trending, Ranking }
+const pages = { ForYou, Following, Pgc, Trending, Ranking }
 const showSearchPageMode = ref<boolean>(false)
 const shouldMoveTabsUp = ref<boolean>(false)
 
@@ -29,6 +30,10 @@ const tabs = computed((): HomeTab[] => {
       label: t('home.following'),
       value: HomeSubPage.Following,
     },
+    {
+      label: 'Following Anime, Shows & Movies',
+      value: HomeSubPage.Pgc,
+    },
     {
       label: t('home.trending'),
       value: HomeSubPage.Trending,

src/contentScripts/views/Home/components/Pgc.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import type { Ref } from 'vue'
+import type { MomentModel } from '../types'
+import emitter from '~/utils/mitt'
+
+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>('')
+const noMoreContent = ref<boolean>(false)
+
+onMounted(async () => {
+  for (let i = 0; i < 3; i++)
+    await getFollowedUsersVideos()
+
+  emitter.off('reachBottom')
+  emitter.on('reachBottom', async () => {
+    if (!isLoading.value) {
+      for (let i = 0; i < 3; i++)
+        await getFollowedUsersVideos()
+    }
+  })
+})
+
+onUnmounted(() => {
+  emitter.off('reachBottom')
+})
+
+async function getFollowedUsersVideos() {
+  if (noMoreContent.value)
+    return
+
+  isLoading.value = true
+  try {
+    const response = await browser.runtime.sendMessage({
+      contentScriptQuery: 'getMoments',
+      type: 'pgc',
+      offset: offset.value,
+      updateBaseline: updateBaseline.value,
+    })
+
+    if (response.code === -101) {
+      noMoreContent.value = true
+      needToLoginFirst.value = true
+      return
+    }
+
+    if (response.code === 0) {
+      offset.value = response.data.offset
+      updateBaseline.value = response.data.update_baseline
+
+      const resData = [] as MomentModel[]
+
+      response.data.items.forEach((item: MomentModel) => {
+        resData.push(item)
+      })
+
+      // when videoList has length property, it means it is the first time to load
+      if (!videoList.length) {
+        Object.assign(videoList, resData)
+      }
+      else {
+        // else we concat the new data to the old data
+        Object.assign(videoList, videoList.concat(resData))
+      }
+    }
+    else if (response.code === -101) {
+      needToLoginFirst.value = true
+    }
+  }
+  finally {
+    isLoading.value = false
+  }
+}
+
+function jumpToLoginPage() {
+  location.href = 'https://passport.bilibili.com/login'
+}
+</script>
+
+<template>
+  <div>
+    <Empty v-if="needToLoginFirst" mt-6 :description="$t('common.please_log_in_first')">
+      <Button type="primary" @click="jumpToLoginPage()">
+        {{ $t('common.login') }}
+      </Button>
+    </Empty>
+    <div
+      v-else
+      ref="containerRef"
+      m="b-0 t-0" relative w-full h-full
+      grid="~ 2xl:cols-5 xl:cols-4 lg:cols-3 md:cols-2 gap-5"
+    >
+      <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-if="isLoading">
+        <VideoCardSkeleton v-for="item in 30" :key="item" />
+      </template>
+    </div>
+
+    <Transition name="fade">
+      <Loading v-if="isLoading" />
+    </Transition>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+</style>

src/contentScripts/views/Home/types.ts

@@ -6,6 +6,7 @@ export interface HomeTab {
 export enum HomeSubPage {
   ForYou = 'ForYou',
   Following = 'Following',
+  Pgc = 'Pgc',
   Trending = 'Trending',
   Ranking = 'Ranking',
 }