mirror of
https://github.com/BewlyBewly/BewlyBewly.git
synced 2025-04-14 13:15:29 +00:00
feat: complete homepage Following tab
This commit is contained in:
Hakadao
@@ -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">
|
||||
|
||||
@@ -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
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user