feat(home): add live page on home

src/contentScripts/views/App.vue

@@ -7,7 +7,7 @@ import { useDark } from '~/composables/useDark'
 import { BEWLY_MOUNTED, DRAWER_VIDEO_ENTER_PAGE_FULL, DRAWER_VIDEO_EXIT_PAGE_FULL, OVERLAY_SCROLL_BAR_SCROLL } from '~/constants/globalEvents'
 import { AppPage } from '~/enums/appEnums'
 import { settings } from '~/logic'
-import { isHomePage, queryDomUntilFound, scrollToTop } from '~/utils/main'
+import { isHomePage, openLinkToNewTab, queryDomUntilFound, scrollToTop } from '~/utils/main'
 import emitter from '~/utils/mitt'
 
 import { setupNecessarySettingsWatchers } from './necessarySettingsWatchers'
@@ -136,6 +136,17 @@ function handleOsScroll() {
 }
 
 function openIframeDrawer(url: string) {
+  const isSameOrigin = (origin: URL, destination: URL) =>
+    origin.protocol === destination.protocol && origin.host === destination.host && origin.port === destination.port
+
+  const currentUrl = new URL(location.href)
+  const destination = new URL(url)
+
+  if (!isSameOrigin(currentUrl, destination)) {
+    openLinkToNewTab(url)
+    return
+  }
+
   iframeDrawerUrl.value = url
   showIframeDrawer.value = true
 }

src/contentScripts/views/Home/Home.vue

@@ -22,6 +22,7 @@ const pages = {
   [HomeSubPage.SubscribedSeries]: defineAsyncComponent(() => import('./components/SubscribedSeries.vue')),
   [HomeSubPage.Trending]: defineAsyncComponent(() => import('./components/Trending.vue')),
   [HomeSubPage.Ranking]: defineAsyncComponent(() => import('./components/Ranking.vue')),
+  [HomeSubPage.Live]: defineAsyncComponent(() => import('./components/Live.vue')),
 }
 const showSearchPageMode = ref<boolean>(false)
 const shouldMoveTabsUp = ref<boolean>(false)

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

@@ -0,0 +1,204 @@
+<script setup lang="ts">
+import type { Ref } from 'vue'
+
+import { useBewlyApp } from '~/composables/useAppProvider'
+import type { GridLayoutType } from '~/logic'
+import type { FollowingLiveResult, List as FollowingLiveItem } from '~/models/live/getFollowingLiveList'
+import api from '~/utils/api'
+
+// https://github.com/starknt/BewlyBewly/blob/fad999c2e482095dc3840bb291af53d15ff44130/src/contentScripts/views/Home/components/ForYou.vue#L16
+interface VideoElement {
+  uniqueId: string
+  item?: FollowingLiveItem
+}
+
+const props = defineProps<{
+  gridLayout: GridLayoutType
+}>()
+
+const emit = defineEmits<{
+  (e: 'beforeLoading'): void
+  (e: 'afterLoading'): void
+}>()
+
+const gridValue = computed((): string => {
+  if (props.gridLayout === 'adaptive')
+    return '~ 2xl:cols-5 xl:cols-4 lg:cols-3 md:cols-2 gap-5'
+  if (props.gridLayout === 'twoColumns')
+    return '~ cols-1 xl:cols-2 gap-4'
+  return '~ cols-1 gap-4'
+})
+
+const videoList = ref<VideoElement[]>([])
+const isLoading = ref<boolean>(false)
+const needToLoginFirst = ref<boolean>(false)
+const containerRef = ref<HTMLElement>() as Ref<HTMLElement>
+const page = ref<number>(1)
+const noMoreContent = ref<boolean>(false)
+const { handleReachBottom, handlePageRefresh, haveScrollbar } = useBewlyApp()
+
+onMounted(async () => {
+  initData()
+  initPageAction()
+})
+
+onActivated(() => {
+  initPageAction()
+})
+
+function initPageAction() {
+  handleReachBottom.value = async () => {
+    if (isLoading.value)
+      return
+    if (noMoreContent.value)
+      return
+
+    getData()
+  }
+  handlePageRefresh.value = async () => {
+    if (isLoading.value)
+      return
+
+    initData()
+  }
+}
+
+async function initData() {
+  page.value = 1
+  videoList.value.length = 0
+  noMoreContent.value = false
+
+  await getData()
+}
+
+async function getData() {
+  emit('beforeLoading')
+  isLoading.value = true
+
+  try {
+    for (let i = 0; i < 3; i++)
+      await getFollowedUsersVideos()
+  }
+  finally {
+    isLoading.value = false
+    emit('afterLoading')
+  }
+}
+
+async function getFollowedUsersVideos() {
+  if (noMoreContent.value)
+    return
+
+  // if (list.value === '0') {
+  //   noMoreContent.value = true
+  //   return
+  // }
+
+  try {
+    let i = 0
+    // https://github.com/starknt/BewlyBewly/blob/fad999c2e482095dc3840bb291af53d15ff44130/src/contentScripts/views/Home/components/ForYou.vue#L208
+    const pendingVideos: VideoElement[] = Array.from({ length: 30 }, () => ({
+      uniqueId: `unique-id-${(videoList.value.length || 0) + i++})}`,
+    } satisfies VideoElement))
+    let lastVideoListLength = videoList.value.length
+    videoList.value.push(...pendingVideos)
+
+    const response: FollowingLiveResult = await api.live.getFollowingLiveList({
+      page: page.value,
+    })
+
+    if (response.code === -101) {
+      noMoreContent.value = true
+      needToLoginFirst.value = true
+      return
+    }
+
+    if (response.code === 0) {
+      page.value++
+
+      const resData = [] as FollowingLiveItem[]
+
+      response.data.list.forEach((item: FollowingLiveItem) => {
+        resData.push(item)
+      })
+
+      // when videoList has length property, it means it is the first time to load
+      if (!videoList.value.length) {
+        videoList.value = resData.map(item => ({ uniqueId: `${item.roomid}`, item }))
+      }
+      else {
+        resData.forEach((item) => {
+          videoList.value[lastVideoListLength++] = {
+            uniqueId: `${item.roomid}`,
+            item,
+          }
+        })
+      }
+
+      if (!haveScrollbar() && !noMoreContent.value) {
+        getFollowedUsersVideos()
+      }
+    }
+    else if (response.code === -101) {
+      needToLoginFirst.value = true
+    }
+  }
+  finally {
+    videoList.value = videoList.value.filter(video => video.item)
+  }
+}
+
+function jumpToLoginPage() {
+  location.href = 'https://passport.bilibili.com/login'
+}
+
+defineExpose({ initData })
+</script>
+
+<template>
+  <div>
+    <!-- By directly using predefined unocss grid properties, it is possible to dynamically set the grid attribute -->
+    <div hidden grid="~ 2xl:cols-5 xl:cols-4 lg:cols-3 md:cols-2 gap-5" />
+    <div hidden grid="~ cols-1 xl:cols-2 gap-4" />
+    <div hidden grid="~ cols-1 gap-4" />
+
+    <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="gridValue"
+    >
+      <VideoCard
+        v-for="video in videoList"
+        :key="video.uniqueId"
+        :skeleton="!video.item"
+        :video="video.item ? {
+          // id: Number(video.item.modules.module_dynamic.major.archive?.aid),
+          title: `${video.item.title}`,
+          cover: `${video.item.room_cover}`,
+          author: video.item.uname,
+          authorFace: video.item.face,
+          mid: video.item.uid,
+          viewStr: video.item.text_small,
+          tag: video.item.area_name_v2,
+          roomid: video.item.roomid,
+          liveStatus: video.item.live_status,
+        } : undefined"
+        type="live"
+        :show-watcher-later="false"
+        :horizontal="gridLayout !== 'adaptive'"
+      />
+    </div>
+
+    <!-- no more content -->
+    <Empty v-if="noMoreContent && !needToLoginFirst" class="pb-4" :description="$t('common.no_more_content')" />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+</style>

src/contentScripts/views/Home/types.ts

@@ -6,6 +6,7 @@ export enum HomeSubPage {
   SubscribedSeries = 'SubscribedSeries',
   Trending = 'Trending',
   Ranking = 'Ranking',
+  Live = 'Live',
 }
 
 export interface RankingType {