mirror of
https://github.com/BewlyBewly/BewlyBewly.git
synced 2025-04-14 13:15:29 +00:00
128 lines
3.7 KiB
Vue
128 lines
3.7 KiB
Vue
<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>('')
|
|
|
|
onMounted(async () => {
|
|
for (let i = 0; i < 3; i++)
|
|
await getFollowingAuthorVideos()
|
|
|
|
emitter.off('reachBottom')
|
|
emitter.on('reachBottom', async () => {
|
|
if (!isLoading.value) {
|
|
for (let i = 0; i < 3; i++)
|
|
await getFollowingAuthorVideos()
|
|
}
|
|
})
|
|
})
|
|
|
|
onUnmounted(() => {
|
|
emitter.off('reachBottom')
|
|
})
|
|
|
|
async function getFollowingAuthorVideos() {
|
|
isLoading.value = true
|
|
try {
|
|
const response = await browser.runtime.sendMessage({
|
|
contentScriptQuery: 'getMoments',
|
|
type: 'video',
|
|
offset: offset.value,
|
|
updateBaseline: updateBaseline.value,
|
|
})
|
|
|
|
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
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<div
|
|
ref="containerRef"
|
|
m="b-0 t-0" relative w-full h-full
|
|
>
|
|
<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"
|
|
:desc="video.modules.module_dynamic.major.archive.desc"
|
|
: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"
|
|
horizontal
|
|
/>
|
|
|
|
<!-- skeleton -->
|
|
<template v-for="item in 30" :key="item">
|
|
<div
|
|
v-if="isLoading"
|
|
mb-8 pointer-events-none select-none
|
|
>
|
|
<div aspect-video bg="$bew-fill-4" rounded="$bew-radius" />
|
|
<div flex mt-4>
|
|
<div m="r-4" w="40px" h="40px" rounded="1/2" bg="$bew-fill-4" shrink-0 />
|
|
<div w-full>
|
|
<div grid gap-2>
|
|
<div w-full h-5 bg="$bew-fill-3" />
|
|
<div w="3/4" h-5 bg="$bew-fill-3" />
|
|
</div>
|
|
<div grid gap-2 mt-4>
|
|
<div w="50%" h-4 bg="$bew-fill-2" />
|
|
<div w="80%" h-4 bg="$bew-fill-2" />
|
|
</div>
|
|
<div text="transparent sm" inline-block mt-4 p="x-2 y-1" bg="$bew-fill-1" rounded-4>
|
|
hello world
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<Transition name="fade">
|
|
<Loading v-if="isLoading" />
|
|
</Transition>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
</style>
|