mirror of
https://github.com/BewlyBewly/BewlyBewly.git
synced 2025-04-14 13:15:29 +00:00
feat: implement all Watch later page features
* feat: add new configuration options to `Button` component
This commit is contained in:
Hakadao
@@ -206,7 +206,7 @@ function setAppAppearance() {
|
||||
</button>
|
||||
</Tooltip>
|
||||
|
||||
<Tooltip content="Watch later" :placement="tooltipPlacement">
|
||||
<Tooltip :content="$t('dock.watch_later')" :placement="tooltipPlacement">
|
||||
<button
|
||||
class="dock-item"
|
||||
:class="{ active: activatedPage === AppPage.WatchLater && !isVideoPage }"
|
||||
|
||||
@@ -10,9 +10,6 @@ const { t } = useI18n()
|
||||
const isLoading = ref<boolean>()
|
||||
const noMoreContent = ref<boolean>()
|
||||
const watchLaterList = reactive<Array<WatchLaterModel>>([])
|
||||
const currentPageNum = ref<number>(1)
|
||||
const keyword = ref<string>()
|
||||
const historyStatus = ref<boolean>()
|
||||
|
||||
onMounted(() => {
|
||||
getAllWatchLaterList()
|
||||
@@ -24,10 +21,11 @@ onUnmounted(() => {
|
||||
})
|
||||
|
||||
/**
|
||||
* Get history list
|
||||
* Get watch later list
|
||||
*/
|
||||
function getAllWatchLaterList() {
|
||||
isLoading.value = true
|
||||
watchLaterList.length = 0
|
||||
browser.runtime
|
||||
.sendMessage({
|
||||
contentScriptQuery: 'getAllWatchLaterList',
|
||||
@@ -53,56 +51,46 @@ function deleteWatchLaterItem(index: number, aid: number) {
|
||||
})
|
||||
}
|
||||
|
||||
function setHistoryPauseStatus(isPause: boolean) {
|
||||
browser.runtime
|
||||
.sendMessage({
|
||||
contentScriptQuery: 'setHistoryPauseStatus',
|
||||
function handleClearAllWatchLater() {
|
||||
// eslint-disable-next-line no-alert
|
||||
const result = confirm(
|
||||
t('watch_later.clear_all_confirm'),
|
||||
)
|
||||
if (result) {
|
||||
isLoading.value = true
|
||||
browser.runtime.sendMessage({
|
||||
contentScriptQuery: 'clearAllWatchLater',
|
||||
csrf: getCSRF(),
|
||||
switch: isPause,
|
||||
})
|
||||
.then((res) => {
|
||||
}).then((res) => {
|
||||
if (res.code === 0)
|
||||
getHistoryPauseStatus()
|
||||
getAllWatchLaterList()
|
||||
}).finally(() => {
|
||||
isLoading.value = false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function clearAllHistory() {
|
||||
browser.runtime
|
||||
.sendMessage({
|
||||
contentScriptQuery: 'clearAllHistory',
|
||||
csrf: getCSRF(),
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code === 0)
|
||||
watchLaterList.length = 0
|
||||
})
|
||||
}
|
||||
|
||||
function handleClearAllWatchHistory() {
|
||||
function handleRemoveWatchedVideos() {
|
||||
// eslint-disable-next-line no-alert
|
||||
const result = confirm(
|
||||
t('history.clear_all_watch_history_confirm'),
|
||||
t('watch_later.remove_watched_videos_confirm'),
|
||||
)
|
||||
if (result)
|
||||
clearAllHistory()
|
||||
if (result) {
|
||||
browser.runtime
|
||||
.sendMessage({
|
||||
contentScriptQuery: 'removeFromWatchLater',
|
||||
viewed: true,
|
||||
csrf: getCSRF(),
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code === 0)
|
||||
getAllWatchLaterList()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function handlePauseWatchHistory() {
|
||||
// eslint-disable-next-line no-alert
|
||||
const result = confirm(
|
||||
t('history.pause_watch_history_confirm'),
|
||||
)
|
||||
if (result)
|
||||
setHistoryPauseStatus(true)
|
||||
}
|
||||
|
||||
function handleTurnOnWatchHistory() {
|
||||
// eslint-disable-next-line no-alert
|
||||
const result = confirm(
|
||||
t('history.turn_on_watch_history_confirm'),
|
||||
)
|
||||
if (result)
|
||||
setHistoryPauseStatus(false)
|
||||
function handlePlayAll() {
|
||||
openLinkToNewTab('https://www.bilibili.com/list/watchlater')
|
||||
}
|
||||
|
||||
function jumpToLoginPage() {
|
||||
@@ -114,128 +102,161 @@ function jumpToLoginPage() {
|
||||
<div v-if="getCSRF()" flex="~ col md:row lg:row" gap-4>
|
||||
<main w="full md:60% lg:70% xl:75%" order="2 md:1 lg:1" mb-6>
|
||||
<h3 text="3xl $bew-text-1" font-bold mb-6>
|
||||
Watch later ({{ watchLaterList.length }}/100)
|
||||
{{ t('watch_later.title') }} ({{ watchLaterList.length }}/100)
|
||||
</h3>
|
||||
<!-- historyList -->
|
||||
<transition-group name="list">
|
||||
<a
|
||||
v-for="(item, index) in watchLaterList"
|
||||
:key="item.aid"
|
||||
block
|
||||
class="group"
|
||||
flex
|
||||
cursor-pointer
|
||||
@click="openLinkToNewTab(removeHttpFromUrl(`https://www.bilibili.com/list/watchlater?bvid=${item.bvid}`))"
|
||||
>
|
||||
|
||||
<section
|
||||
rounded="$bew-radius"
|
||||
flex="~ gap-6 col md:col lg:row"
|
||||
item-start
|
||||
relative
|
||||
group-hover:bg="$bew-fill-2"
|
||||
duration-300
|
||||
w-full
|
||||
p-2
|
||||
m-1
|
||||
<Empty v-if="watchLaterList.length === 0 && !isLoading" />
|
||||
<template v-else>
|
||||
<!-- watcher later list -->
|
||||
<transition-group name="list">
|
||||
<a
|
||||
v-for="(item, index) in watchLaterList"
|
||||
:key="item.aid"
|
||||
block
|
||||
class="group"
|
||||
flex
|
||||
cursor-pointer
|
||||
@click="openLinkToNewTab(`https://www.bilibili.com/list/watchlater?bvid=${item.bvid}`)"
|
||||
>
|
||||
<!-- Cover -->
|
||||
<div
|
||||
pos="relative"
|
||||
bg="$bew-fill-5"
|
||||
w="full md:full lg:250px"
|
||||
flex="shrink-0"
|
||||
<section
|
||||
rounded="$bew-radius"
|
||||
overflow-hidden
|
||||
aspect-video
|
||||
flex="~ gap-6 col md:col lg:row"
|
||||
item-start
|
||||
relative
|
||||
group-hover:bg="$bew-fill-2"
|
||||
duration-300
|
||||
w-full
|
||||
p-2
|
||||
m-1
|
||||
>
|
||||
<img
|
||||
w="full"
|
||||
aspect-video
|
||||
:src="removeHttpFromUrl(`${item.pic}@480w_270h_1c`)"
|
||||
:alt="item.title"
|
||||
object-cover
|
||||
>
|
||||
|
||||
<!-- Cover -->
|
||||
<div
|
||||
pos="absolute bottom-0 right-0"
|
||||
bg="black opacity-60"
|
||||
m="2"
|
||||
p="x-2 y-1"
|
||||
text="white xs"
|
||||
rounded-8
|
||||
pos="relative"
|
||||
bg="$bew-fill-5"
|
||||
w="full md:full lg:250px"
|
||||
flex="shrink-0"
|
||||
rounded="$bew-radius"
|
||||
overflow-hidden
|
||||
aspect-video
|
||||
>
|
||||
{{ calcCurrentTime(item.duration) }}
|
||||
</div>
|
||||
</div>
|
||||
<img
|
||||
w="full"
|
||||
aspect-video
|
||||
:src="removeHttpFromUrl(`${item.pic}@480w_270h_1c`)"
|
||||
:alt="item.title"
|
||||
object-cover
|
||||
>
|
||||
|
||||
<!-- Description -->
|
||||
<div flex justify-between w-full>
|
||||
<div flex="~ col">
|
||||
<a
|
||||
class="keep-two-lines"
|
||||
overflow="hidden"
|
||||
un-text="lg overflow-ellipsis"
|
||||
:href="removeHttpFromUrl(`https://www.bilibili.com/list/watchlater?bvid=${item.bvid}`)" target="_blank"
|
||||
@click.stop=""
|
||||
<!-- <div
|
||||
pos="absolute bottom-0 right-0"
|
||||
bg="black opacity-60"
|
||||
m="2"
|
||||
p="x-2 y-1"
|
||||
text="white xs"
|
||||
rounded-8
|
||||
>
|
||||
{{ item.title }}
|
||||
</a>
|
||||
<a
|
||||
un-text="$bew-text-2 sm"
|
||||
m="t-4 b-2"
|
||||
flex="~"
|
||||
items-center
|
||||
cursor-pointer
|
||||
w-fit
|
||||
rounded="$bew-radius-half"
|
||||
hover:color="$bew-theme-color"
|
||||
hover:bg="$bew-theme-color-10"
|
||||
duration-300
|
||||
pr-2
|
||||
:href="`//space.bilibili.com/${item.owner.mid}`" target="_blank"
|
||||
@click.stop=""
|
||||
{{ calcCurrentTime(item.duration) }}
|
||||
</div> -->
|
||||
<div
|
||||
|
||||
pos="absolute bottom-0 right-0"
|
||||
bg="black opacity-60"
|
||||
m="2"
|
||||
p="x-2 y-1"
|
||||
text="white xs"
|
||||
rounded-8
|
||||
>
|
||||
<img
|
||||
:src="removeHttpFromUrl(`${item.owner.face}@80w_80h_1c`)"
|
||||
w-30px
|
||||
aspect-square
|
||||
object-cover
|
||||
alt=""
|
||||
rounded="$bew-radius-half"
|
||||
mr-2
|
||||
>
|
||||
{{ item.owner.name }}
|
||||
</a>
|
||||
<p display="block xl:none" text="$bew-text-3 sm" mt-auto mb-2>
|
||||
<!-- When progress = -1 means that the user watched the full video -->
|
||||
{{
|
||||
useDateFormat(item.pubdate * 1000, 'YYYY-MM-DD HH:mm:ss')
|
||||
.value
|
||||
`${
|
||||
item.progress === -1
|
||||
? calcCurrentTime(item.duration)
|
||||
: calcCurrentTime(item.progress)
|
||||
} /
|
||||
${calcCurrentTime(item.duration)}`
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
<div w-full pos="absolute bottom-0" bg="white opacity-60">
|
||||
<Progress
|
||||
:percentage="
|
||||
(item.progress / item.duration) * 100
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
text="2xl $bew-text-3"
|
||||
hover:color="$bew-theme-color"
|
||||
opacity="0 group-hover:100"
|
||||
p-2
|
||||
duration-300
|
||||
@click.stop="deleteWatchLaterItem(index, item.aid)"
|
||||
>
|
||||
<tabler:trash />
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</a>
|
||||
</transition-group>
|
||||
<!-- loading -->
|
||||
<Transition name="fade">
|
||||
<loading
|
||||
v-if="isLoading && watchLaterList.length !== 0 && !noMoreContent"
|
||||
m="-t-4"
|
||||
/>
|
||||
</Transition>
|
||||
<!-- Description -->
|
||||
<div flex justify-between w-full>
|
||||
<div flex="~ col">
|
||||
<a
|
||||
class="keep-two-lines"
|
||||
overflow="hidden"
|
||||
un-text="lg overflow-ellipsis"
|
||||
:href="removeHttpFromUrl(`https://www.bilibili.com/list/watchlater?bvid=${item.bvid}`)" target="_blank"
|
||||
@click.stop=""
|
||||
>
|
||||
{{ item.title }}
|
||||
</a>
|
||||
<a
|
||||
un-text="$bew-text-2 sm"
|
||||
m="t-4 b-2"
|
||||
flex="~"
|
||||
items-center
|
||||
cursor-pointer
|
||||
w-fit
|
||||
rounded="$bew-radius-half"
|
||||
hover:color="$bew-theme-color"
|
||||
hover:bg="$bew-theme-color-10"
|
||||
duration-300
|
||||
pr-2
|
||||
:href="`//space.bilibili.com/${item.owner.mid}`" target="_blank"
|
||||
@click.stop=""
|
||||
>
|
||||
<img
|
||||
:src="removeHttpFromUrl(`${item.owner.face}@80w_80h_1c`)"
|
||||
w-30px
|
||||
aspect-square
|
||||
object-cover
|
||||
alt=""
|
||||
rounded="$bew-radius-half"
|
||||
mr-2
|
||||
>
|
||||
{{ item.owner.name }}
|
||||
</a>
|
||||
<p display="block xl:none" text="$bew-text-3 sm" mt-auto mb-2>
|
||||
{{
|
||||
useDateFormat(item.pubdate * 1000, 'YYYY-MM-DD HH:mm:ss')
|
||||
.value
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div flex items-center>
|
||||
<!-- <span>{{ item.progress === -1 ? $t('watch_later.watched') : '' }}</span> -->
|
||||
|
||||
<button
|
||||
text="2xl $bew-text-3"
|
||||
hover:color="$bew-theme-color"
|
||||
opacity="0 group-hover:100"
|
||||
p-2
|
||||
duration-300
|
||||
@click.stop="deleteWatchLaterItem(index, item.aid)"
|
||||
>
|
||||
<tabler:trash />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</section>
|
||||
</a>
|
||||
</transition-group>
|
||||
<!-- loading -->
|
||||
<Transition name="fade">
|
||||
<loading
|
||||
v-if="isLoading && watchLaterList.length !== 0 && !noMoreContent"
|
||||
m="-t-4"
|
||||
/>
|
||||
</Transition>
|
||||
</template>
|
||||
</main>
|
||||
|
||||
<aside relative w="full md:40% lg:30% xl:25%" order="1 md:2 lg:2">
|
||||
@@ -254,55 +275,48 @@ function jumpToLoginPage() {
|
||||
</picture>
|
||||
|
||||
<h3 text="3xl white" fw-600 style="text-shadow: 0 0 12px rgba(0,0,0,.3)">
|
||||
Watch later ({{ watchLaterList.length }}/100)
|
||||
{{ t('watch_later.title') }} ({{ watchLaterList.length }}/100)
|
||||
</h3>
|
||||
<p flex="~ col" gap-4>
|
||||
<Button flex-1>
|
||||
<p v-if="watchLaterList.length > 0" flex="~ col" gap-4>
|
||||
<Button
|
||||
color="rgba(255,255,255,.35)" text-color="white" strong flex-1
|
||||
@click="handlePlayAll"
|
||||
>
|
||||
<template #left>
|
||||
<tabler:player-play />
|
||||
</template>
|
||||
Play all
|
||||
{{ t('watch_later.play_all') }}
|
||||
</Button>
|
||||
<Button flex-1>
|
||||
<Button
|
||||
color="rgba(255,255,255,.35)" text-color="white" strong flex-1
|
||||
@click="handleClearAllWatchLater"
|
||||
>
|
||||
<template #left>
|
||||
<tabler:trash />
|
||||
</template>
|
||||
Clear all watch later
|
||||
{{ t('watch_later.clear_all') }}
|
||||
</Button>
|
||||
<Button
|
||||
color="rgba(255,255,255,.35)" text-color="white" strong flex-1
|
||||
@click="handleRemoveWatchedVideos"
|
||||
>
|
||||
<template #left>
|
||||
<tabler:circle-minus />
|
||||
</template>
|
||||
{{ t('watch_later.remove_watched_videos') }}
|
||||
</Button>
|
||||
</p>
|
||||
<div
|
||||
v-if="watchLaterList[0]"
|
||||
pos="absolute top-0 left-0" w-full h-full bg-cover bg-center z--1 opacity="80 dark:70"
|
||||
pos="absolute top-0 left-0" w-full h-full bg-cover bg-center z--1
|
||||
>
|
||||
<div absolute w-full h-full style="backdrop-filter: blur(60px) saturate(180%)" />
|
||||
<div absolute w-full h-full style="backdrop-filter: blur(60px) saturate(180%)" bg="$bew-fill-1" />
|
||||
<img
|
||||
v-if="watchLaterList[0]"
|
||||
:src="removeHttpFromUrl(`${watchLaterList[0].pic}@480w_270h_1c`)"
|
||||
w-full h-full object="cover center"
|
||||
>
|
||||
</div>
|
||||
<!-- <Button shadow="$bew-shadow-1" @click="handleClearAllWatchHistory">
|
||||
<template #left>
|
||||
<tabler:trash />
|
||||
</template>
|
||||
{{ $t('history.clear_all_watch_history') }}
|
||||
</Button>
|
||||
<Button
|
||||
v-if="!historyStatus"
|
||||
shadow="$bew-shadow-1"
|
||||
@click="handlePauseWatchHistory"
|
||||
>
|
||||
<template #left>
|
||||
<ph:pause-circle-bold />
|
||||
</template>
|
||||
{{ $t('history.pause_watch_history') }}
|
||||
</Button>
|
||||
<Button v-else shadow="$bew-shadow-1" @click="handleTurnOnWatchHistory">
|
||||
<template #left>
|
||||
<ph:play-circle-bold />
|
||||
</template>
|
||||
{{ $t('history.turn_on_watch_history') }}
|
||||
</Button> -->
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user