feat(home): add live page on home

src/_locales/cmn-CN.yml

@@ -396,6 +396,7 @@ home:
   trending: 热门视频
   ranking: 排行
   subscribed_series: 订阅剧集
+  live: 直播
 
 ranking:
   all: 全部

src/_locales/cmn-TW.yml

@@ -397,6 +397,7 @@ home:
   trending: 發燒影片
   ranking: 排行
   subscribed_series: 訂閱劇集
+  live: 直播
 
 ranking:
   all: 全部

src/_locales/en.yml

@@ -399,6 +399,7 @@ home:
   trending: Trending
   ranking: Ranking
   subscribed_series: Subscribed Series
+  live: Live
 
 ranking:
   all: All

src/_locales/jyut.yml

@@ -396,6 +396,7 @@ home:
   trending: 時下至 Hit
   ranking: 排行
   subscribed_series: 訂閱劇集
+  live: 直播
 
 ranking:
   all: 全部

src/background/messageListeners/api/index.ts

@@ -5,6 +5,7 @@ import API_ANIME from './anime'
 import API_AUTH from './auth'
 import API_FAVORITE from './favorite'
 import API_HISTORY from './history'
+import API_LIVE from './live'
 import API_MOMENT from './moment'
 import API_NOTIFICATION from './notification'
 import API_RANKING from './ranking'
@@ -25,6 +26,7 @@ export const API_COLLECTION = {
   USER: API_USER,
   VIDEO: API_VIDEO,
   WATCHLATER: API_WATCHLATER,
+  LIVE: API_LIVE,
 
   [Symbol.iterator]() {
     return Object.values(this).values()

src/background/messageListeners/api/live.ts

@@ -0,0 +1,22 @@
+import type { APIMAP } from '../../utils'
+import { AHS } from '../../utils'
+
+const API_LIVE = {
+  // https://socialsisteryi.github.io/bilibili-API-collect/docs/live/follow_up_live.html#%E7%94%A8%E6%88%B7%E5%85%B3%E6%B3%A8%E7%9A%84%E6%89%80%E6%9C%89up%E7%9A%84%E7%9B%B4%E6%92%AD%E6%83%85%E5%86%B5
+  getFollowingLiveList: {
+    url: 'https://api.live.bilibili.com/xlive/web-ucenter/user/following',
+    _fetch: {
+      method: 'get',
+    },
+    params: {
+      page: 1,
+      page_size: 9,
+      ignoreRecord: 1,
+      hit_ab: true,
+    },
+    afterHandle: AHS.J_D,
+  },
+
+} satisfies APIMAP
+
+export default API_LIVE

src/components/VideoCard/VideoCardContextMenu/VideoCardContextMenu.vue

@@ -68,7 +68,7 @@ const commonOptions = computed((): { command: VideoOption, name: string, icon: s
       // { command: VideoOption.ViewThisUserChannel, name: t('video_card.operation.view_this_user_channel'), icon: 'i-solar:user-bold-duotone' },
     ],
   ]
-  if (getVideoType() === 'bangumi') {
+  if (getVideoType() === 'bangumi' || getVideoType() === 'live') {
     result = result.map((group) => {
       return group.filter((opt) => {
         return opt.command !== VideoOption.CopyBVNumber && opt.command !== VideoOption.CopyAVNumber && opt.command !== VideoOption.ViewThisUserChannel

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 {

src/models/live/getFollowingLiveList.ts

@@ -0,0 +1,47 @@
+// https://app.quicktype.io/?l=ts
+
+export interface FollowingLiveResult {
+  code: number
+  message: string
+  ttl: number
+  data: Data
+}
+
+export interface Data {
+  title: string
+  pageSize: number
+  totalPage: number
+  list: List[]
+  count: number
+  never_lived_count: number
+  live_count: number
+  never_lived_faces: any[]
+}
+
+export interface List {
+  roomid: number
+  uid: number
+  uname: string
+  title: string
+  face: string
+  live_status: number
+  record_num: number
+  recent_record_id: string
+  is_attention: number
+  clipnum: number
+  fans_num: number
+  area_name: string
+  area_value: string
+  tags: string
+  recent_record_id_v2: string
+  record_num_v2: number
+  record_live_time: number
+  area_name_v2: string
+  room_news: string
+  switch: boolean
+  watch_icon: string
+  text_small: string
+  room_cover: string
+  parent_area_id: number
+  area_id: number
+}

src/stores/mainStore.ts

@@ -49,6 +49,10 @@ export const useMainStore = defineStore('main', () => {
         i18nKey: 'home.ranking',
         page: HomeSubPage.Ranking,
       },
+      {
+        i18nKey: 'home.live',
+        page: HomeSubPage.Live,
+      },
     ],
   )
 

src/utils/main.ts

@@ -43,8 +43,8 @@ export function removeHttpFromUrl(url: string): string {
   return url.replace(/^https?:/, '')
 }
 
-export function openLinkToNewTab(url: string) {
-  window.open(url, '_blank', 'noopener noreferrer')
+export function openLinkToNewTab(url: string, features: string = '') {
+  window.open(url, '_blank', features)
 }
 
 /**