mirror of
https://github.com/BewlyBewly/BewlyBewly.git
synced 2025-04-14 13:15:29 +00:00
perf: enhance VideoCard performance
This commit is contained in:
Hakadao
@@ -1,367 +0,0 @@
|
||||
<script lang="ts" setup>
|
||||
import { getCSRF, openLinkToNewTab, removeHttpFromUrl } from '~/utils/main'
|
||||
import { calcCurrentTime, calcTimeSince, numFormatter } from '~/utils/dataFormatter'
|
||||
|
||||
const props = defineProps<{
|
||||
id: number
|
||||
duration?: number
|
||||
title: string
|
||||
cover: string
|
||||
author?: string
|
||||
authorFace?: string
|
||||
mid?: number
|
||||
view?: number
|
||||
danmaku?: number
|
||||
publishedTimestamp?: number
|
||||
bvid?: string
|
||||
aid?: number
|
||||
isFollowed?: boolean
|
||||
}>()
|
||||
|
||||
const videoUrl = computed(() => {
|
||||
return `https://www.bilibili.com/video/${props.bvid ?? `av${props.aid}`}`
|
||||
})
|
||||
|
||||
const isDislike = ref<boolean>(false)
|
||||
const isInWatchLater = ref<boolean>(false)
|
||||
// const dislikeReasonId = ref<number | null>(null)
|
||||
const showPopCtrl = ref<boolean>(false)
|
||||
|
||||
function gotoChannel(mid: number) {
|
||||
window.open(`//space.bilibili.com/${mid}`)
|
||||
}
|
||||
|
||||
function toggleWatchLater() {
|
||||
if (!isInWatchLater.value) {
|
||||
browser.runtime.sendMessage({
|
||||
contentScriptQuery: 'saveToWatchLater',
|
||||
aid: props.id,
|
||||
csrf: getCSRF(),
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code === 0)
|
||||
isInWatchLater.value = true
|
||||
})
|
||||
}
|
||||
else {
|
||||
browser.runtime.sendMessage({
|
||||
contentScriptQuery: 'removeFromWatchLater',
|
||||
aid: props.id,
|
||||
csrf: getCSRF(),
|
||||
})
|
||||
.then((res) => {
|
||||
if (res.code === 0)
|
||||
isInWatchLater.value = false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
// function submitDislike(
|
||||
// reasonID: number,
|
||||
// goto: string,
|
||||
// id: string,
|
||||
// mid: number,
|
||||
// rid: number,
|
||||
// tagID: number,
|
||||
// ) {
|
||||
// browser.runtime
|
||||
// .sendMessage({
|
||||
// contentScriptQuery: 'submitDislike',
|
||||
// accessKey: accessKey.value,
|
||||
// reasonID,
|
||||
// goto,
|
||||
// id,
|
||||
// mid,
|
||||
// rid,
|
||||
// tagID,
|
||||
// })
|
||||
// .then((res) => {
|
||||
// if (res.code === 0) {
|
||||
// isDislike.value = true
|
||||
// dislikeReasonId.value = reasonID
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
|
||||
// function undoDislike(
|
||||
// reasonID: number,
|
||||
// goto: string,
|
||||
// id: string,
|
||||
// mid: number,
|
||||
// rid: number,
|
||||
// tagID: number,
|
||||
// ) {
|
||||
// browser.runtime
|
||||
// .sendMessage({
|
||||
// contentScriptQuery: 'undoDislike',
|
||||
// accessKey,
|
||||
// reasonID,
|
||||
// goto,
|
||||
// id,
|
||||
// mid,
|
||||
// rid,
|
||||
// tagID,
|
||||
// })
|
||||
// .then((res) => {
|
||||
// if (res.code === 0) {
|
||||
// isDislike.value = false
|
||||
// dislikeReasonId.value = null
|
||||
// showPopCtrl.value = false
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div relative>
|
||||
<div
|
||||
class="video-card group"
|
||||
:class="isDislike ? 'is-dislike' : ''"
|
||||
m="b-8" pos="absolute top-0 left-0" w-full h-full
|
||||
rounded="$bew-radius" content-visibility-auto
|
||||
>
|
||||
<!-- Undo control -->
|
||||
<div :style="{ visibility: isDislike ? 'visible' : 'hidden' }" pos="absolute">
|
||||
<div
|
||||
id="dislike-control"
|
||||
pos="absolute top-0 left-0"
|
||||
w="full"
|
||||
h="auto"
|
||||
flex="~ col"
|
||||
justify="center"
|
||||
align="content-center"
|
||||
border="solid $bew-fill-1"
|
||||
text="$bew-text-3 sm center"
|
||||
rounded="$bew-radius"
|
||||
class="aspect-video"
|
||||
>
|
||||
{{ $t('home.video_removed') }}
|
||||
<!-- <button
|
||||
text="$bew-theme-color base"
|
||||
font="bold"
|
||||
m="t-4"
|
||||
@click="
|
||||
undoDislike(
|
||||
dislikeReasonId ? dislikeReasonId : 0,
|
||||
goto,
|
||||
param,
|
||||
mid,
|
||||
tid,
|
||||
tag.tag_id,
|
||||
)
|
||||
"
|
||||
>
|
||||
{{ $t('common.undo') }}
|
||||
</button> -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div
|
||||
w="full" relative bg="$bew-fill-4" rounded="$bew-radius" cursor-pointer group-hover:shadow
|
||||
group-hover:transform="translate--4px"
|
||||
style="--un-shadow:
|
||||
0 0 0 4px var(--bew-theme-color),
|
||||
8px 8px 0 2px var(--bew-theme-color-60),
|
||||
14px 14px 0 2px var(--bew-theme-color-40)"
|
||||
transition="all ease-in-out 300" group-hover:z-2
|
||||
@click.stop="openLinkToNewTab(videoUrl)"
|
||||
>
|
||||
<!-- Video duration -->
|
||||
<div
|
||||
v-if="duration"
|
||||
pos="absolute bottom-0 right-0"
|
||||
z="2"
|
||||
p="x-2 y-1"
|
||||
m="1"
|
||||
rounded="$bew-radius"
|
||||
text="!white xs"
|
||||
bg="black opacity-60"
|
||||
>
|
||||
{{ calcCurrentTime(duration) }}
|
||||
</div>
|
||||
|
||||
<div pos="absolute top-0 left-0" z-2>
|
||||
<slot name="coverTopLeft" />
|
||||
</div>
|
||||
|
||||
<button
|
||||
pos="absolute top-0 right-0" z="2"
|
||||
p="x-2 y-1" m="1"
|
||||
rounded="$bew-radius"
|
||||
text="!white xl"
|
||||
bg="black opacity-60" opacity-0 group-hover:opacity-100
|
||||
transform="scale-70 group-hover:scale-100"
|
||||
duration-300
|
||||
@click.stop="toggleWatchLater"
|
||||
>
|
||||
<Tooltip v-if="!isInWatchLater" :content="$t('common.save_to_watch_later')" placement="bottom" type="dark">
|
||||
<tabler:playlist-add />
|
||||
</Tooltip>
|
||||
<Tooltip v-else :content="$t('common.added')" placement="bottom" type="dark">
|
||||
<tabler:check />
|
||||
</Tooltip>
|
||||
</button>
|
||||
|
||||
<!-- Video cover -->
|
||||
<img
|
||||
:src="`${removeHttpFromUrl(cover)}@672w_378h_1c`"
|
||||
loading="lazy"
|
||||
w="full" max-w-full align-middle aspect-video
|
||||
bg="cover center"
|
||||
rounded="$bew-radius"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div flex="~" m="t-4">
|
||||
<div class="flex">
|
||||
<a
|
||||
v-if="authorFace"
|
||||
m="r-4" w="40px" h="40px" rounded="1/2" overflow="hidden" object="center cover"
|
||||
bg="$bew-fill-4" cursor="pointer"
|
||||
style="--un-shadow: 0 0 0 2px var(--bew-theme-color)"
|
||||
:href="`//space.bilibili.com/${mid}`" target="_blank"
|
||||
@click.stop=""
|
||||
>
|
||||
<img
|
||||
:src="`${removeHttpFromUrl(authorFace)}@50w_50h_1c`"
|
||||
width="40"
|
||||
height="40"
|
||||
loading="lazy"
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
<div class="meta" flex="~ col" w="full" align="items-start">
|
||||
<div flex="~" justify="between" w="full" pos="relative">
|
||||
<h3
|
||||
class="keep-two-lines"
|
||||
text="lg overflow-ellipsis $bew-text-1" h-3em
|
||||
cursor="pointer"
|
||||
>
|
||||
<a :href="videoUrl" target="_blank" :title="title">
|
||||
{{ title }}</a>
|
||||
</h3>
|
||||
|
||||
<!-- <div
|
||||
id="dislike-control-btn"
|
||||
class="icon-btn"
|
||||
p="t-0.15rem x-2"
|
||||
pointer="auto"
|
||||
display="invisible"
|
||||
group-hover:display="visible"
|
||||
@click.stop="showPopCtrl = !showPopCtrl"
|
||||
>
|
||||
<tabler:dots-vertical text="lg" />
|
||||
</div> -->
|
||||
|
||||
<!-- dislike control -->
|
||||
<template v-if="showPopCtrl">
|
||||
<!-- cover mask -->
|
||||
<div
|
||||
pos="fixed top-0 left-0"
|
||||
w="full"
|
||||
h="full"
|
||||
z="30"
|
||||
@click="showPopCtrl = false"
|
||||
/>
|
||||
|
||||
<!-- dislike reason popup -->
|
||||
<!-- <div
|
||||
pos="absolute top-9 right-0"
|
||||
p="2"
|
||||
z="30"
|
||||
w="180px"
|
||||
bg="$bew-content-1"
|
||||
rounded="$bew-radius"
|
||||
style="
|
||||
box-shadow: var(--bew-shadow-2);
|
||||
backdrop-filter: var(--bew-filter-glass);
|
||||
"
|
||||
>
|
||||
<p p="2" text="$bew-text-3">
|
||||
{{ $t('home.not_interested_in') }}
|
||||
</p>
|
||||
<ul>
|
||||
<li
|
||||
v-for="reason in dislikeReasons"
|
||||
:key="reason.reason_id"
|
||||
p="2"
|
||||
m="b-1"
|
||||
cursor="pointer"
|
||||
hover:bg="$bew-fill-2"
|
||||
transition="all duration-300"
|
||||
rounded="$bew-radius"
|
||||
@click.stop="
|
||||
submitDislike(
|
||||
reason.reason_id,
|
||||
goto,
|
||||
param,
|
||||
mid,
|
||||
tid,
|
||||
tag.tag_id,
|
||||
)
|
||||
"
|
||||
>
|
||||
{{ reason.reason_name }}
|
||||
</li>
|
||||
</ul>
|
||||
</div> -->
|
||||
</template>
|
||||
</div>
|
||||
<div
|
||||
v-if="author"
|
||||
class="channel-name"
|
||||
text="base $bew-text-2"
|
||||
m="t-2" cursor-pointer
|
||||
@click="gotoChannel(mid ?? 0)"
|
||||
>
|
||||
{{ author }}
|
||||
</div>
|
||||
<div class="video-info" text="base $bew-text-2">
|
||||
<span v-if="view">{{
|
||||
$t('common.view', { count: numFormatter(view) }, view)
|
||||
}}</span>
|
||||
<template v-if="danmaku">
|
||||
<span text-xs font-light mx-1>•</span>
|
||||
<span>{{ $t('common.danmaku', { count: numFormatter(danmaku) }, danmaku) }}</span>
|
||||
</template>
|
||||
<br>
|
||||
<span v-if="publishedTimestamp" text="$bew-text-3 sm" inline-block mt-2 p="x-2 y-1" bg="$bew-fill-1" rounded-4>{{ calcTimeSince(publishedTimestamp * 1000) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- skeleton -->
|
||||
<div
|
||||
mb-10 pointer-events-none select-none invisible
|
||||
>
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.video-card.is-dislike {
|
||||
> *:not(#dislike-control) {
|
||||
--at-apply: invisible pointer-events-none duration-0 transition-none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -26,6 +26,8 @@ const isDislike = ref<boolean>(false)
|
||||
const isInWatchLater = ref<boolean>(false)
|
||||
// const dislikeReasonId = ref<number | null>(null)
|
||||
const showPopCtrl = ref<boolean>(false)
|
||||
const contentVisibility = ref<'auto' | 'visible'>('auto')
|
||||
const mouseLeaveTimeOut = ref()
|
||||
|
||||
function gotoChannel(mid: number) {
|
||||
window.open(`//space.bilibili.com/${mid}`)
|
||||
@@ -56,6 +58,17 @@ function toggleWatchLater() {
|
||||
}
|
||||
}
|
||||
|
||||
function handleMouseMove() {
|
||||
contentVisibility.value = 'visible'
|
||||
}
|
||||
|
||||
function handelMouseLeave() {
|
||||
clearTimeout(mouseLeaveTimeOut.value)
|
||||
mouseLeaveTimeOut.value = setTimeout(() => {
|
||||
contentVisibility.value = 'auto'
|
||||
}, 300)
|
||||
}
|
||||
|
||||
// function submitDislike(
|
||||
// reasonID: number,
|
||||
// goto: string,
|
||||
@@ -113,29 +126,33 @@ function toggleWatchLater() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
class="video-card group"
|
||||
:class="isDislike ? 'is-dislike' : ''"
|
||||
m="b-8"
|
||||
rounded="$bew-radius"
|
||||
>
|
||||
<!-- Undo control -->
|
||||
<div :style="{ visibility: isDislike ? 'visible' : 'hidden' }" pos="absolute">
|
||||
<div
|
||||
id="dislike-control"
|
||||
pos="absolute top-0 left-0"
|
||||
w="full"
|
||||
h="auto"
|
||||
flex="~ col"
|
||||
justify="center"
|
||||
align="content-center"
|
||||
border="solid $bew-fill-1"
|
||||
text="$bew-text-3 sm center"
|
||||
rounded="$bew-radius"
|
||||
class="aspect-video"
|
||||
>
|
||||
{{ $t('home.video_removed') }}
|
||||
<!-- <button
|
||||
<div relative>
|
||||
<div
|
||||
class="video-card group"
|
||||
:class="isDislike ? 'is-dislike' : ''"
|
||||
m="b-8" pos="absolute top-0 left-0" w-full h-full
|
||||
rounded="$bew-radius"
|
||||
:style="{ contentVisibility }"
|
||||
@mousemove="handleMouseMove"
|
||||
@mouseleave="handelMouseLeave"
|
||||
>
|
||||
<!-- Undo control -->
|
||||
<div :style="{ visibility: isDislike ? 'visible' : 'hidden' }" pos="absolute">
|
||||
<div
|
||||
id="dislike-control"
|
||||
pos="absolute top-0 left-0"
|
||||
w="full"
|
||||
h="auto"
|
||||
flex="~ col"
|
||||
justify="center"
|
||||
align="content-center"
|
||||
border="solid $bew-fill-1"
|
||||
text="$bew-text-3 sm center"
|
||||
rounded="$bew-radius"
|
||||
class="aspect-video"
|
||||
>
|
||||
{{ $t('home.video_removed') }}
|
||||
<!-- <button
|
||||
text="$bew-theme-color base"
|
||||
font="bold"
|
||||
m="t-4"
|
||||
@@ -152,96 +169,96 @@ function toggleWatchLater() {
|
||||
>
|
||||
{{ $t('common.undo') }}
|
||||
</button> -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div
|
||||
w="full" relative bg="$bew-fill-4" rounded="$bew-radius" cursor-pointer group-hover:shadow
|
||||
group-hover:transform="translate--4px"
|
||||
style="--un-shadow:
|
||||
<div>
|
||||
<div
|
||||
w="full" relative bg="$bew-fill-4" rounded="$bew-radius" cursor-pointer group-hover:shadow
|
||||
group-hover:transform="translate--4px"
|
||||
style="--un-shadow:
|
||||
0 0 0 4px var(--bew-theme-color),
|
||||
8px 8px 0 2px var(--bew-theme-color-60),
|
||||
14px 14px 0 2px var(--bew-theme-color-40)"
|
||||
transition="all ease-in-out 300" group-hover:z-2
|
||||
@click.stop="openLinkToNewTab(videoUrl)"
|
||||
>
|
||||
<!-- Video duration -->
|
||||
<div
|
||||
v-if="duration"
|
||||
pos="absolute bottom-0 right-0"
|
||||
z="2"
|
||||
p="x-2 y-1"
|
||||
m="1"
|
||||
rounded="$bew-radius"
|
||||
text="!white xs"
|
||||
bg="black opacity-60"
|
||||
transition="all ease-in-out 300" group-hover:z-2
|
||||
@click.stop="openLinkToNewTab(videoUrl)"
|
||||
>
|
||||
{{ calcCurrentTime(duration) }}
|
||||
</div>
|
||||
|
||||
<div pos="absolute top-0 left-0" z-2>
|
||||
<slot name="coverTopLeft" />
|
||||
</div>
|
||||
|
||||
<button
|
||||
pos="absolute top-0 right-0" z="2"
|
||||
p="x-2 y-1" m="1"
|
||||
rounded="$bew-radius"
|
||||
text="!white xl"
|
||||
bg="black opacity-60" opacity-0 group-hover:opacity-100
|
||||
transform="scale-70 group-hover:scale-100"
|
||||
duration-300
|
||||
@click.stop="toggleWatchLater"
|
||||
>
|
||||
<Tooltip v-if="!isInWatchLater" :content="$t('common.save_to_watch_later')" placement="bottom" type="dark">
|
||||
<tabler:playlist-add />
|
||||
</Tooltip>
|
||||
<Tooltip v-else :content="$t('common.added')" placement="bottom" type="dark">
|
||||
<tabler:check />
|
||||
</Tooltip>
|
||||
</button>
|
||||
|
||||
<!-- Video cover -->
|
||||
<img
|
||||
:src="`${removeHttpFromUrl(cover)}@672w_378h_1c`"
|
||||
loading="lazy"
|
||||
w="full" max-w-full align-middle aspect-video
|
||||
bg="cover center"
|
||||
rounded="$bew-radius"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div flex="~" m="t-4">
|
||||
<div class="flex">
|
||||
<a
|
||||
v-if="authorFace"
|
||||
m="r-4" w="40px" h="40px" rounded="1/2" overflow="hidden" object="center cover"
|
||||
bg="$bew-fill-4" cursor="pointer"
|
||||
style="--un-shadow: 0 0 0 2px var(--bew-theme-color)"
|
||||
:href="`//space.bilibili.com/${mid}`" target="_blank"
|
||||
@click.stop=""
|
||||
<!-- Video duration -->
|
||||
<div
|
||||
v-if="duration"
|
||||
pos="absolute bottom-0 right-0"
|
||||
z="2"
|
||||
p="x-2 y-1"
|
||||
m="1"
|
||||
rounded="$bew-radius"
|
||||
text="!white xs"
|
||||
bg="black opacity-60"
|
||||
>
|
||||
<img
|
||||
:src="`${removeHttpFromUrl(authorFace)}@50w_50h_1c`"
|
||||
width="40"
|
||||
height="40"
|
||||
loading="lazy"
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
<div class="meta" flex="~ col" w="full" align="items-start">
|
||||
<div flex="~" justify="between" w="full" pos="relative">
|
||||
<h3
|
||||
class="keep-two-lines"
|
||||
text="lg overflow-ellipsis $bew-text-1" h-3em
|
||||
cursor="pointer"
|
||||
>
|
||||
<a :href="videoUrl" target="_blank" :title="title">
|
||||
{{ title }}</a>
|
||||
</h3>
|
||||
{{ calcCurrentTime(duration) }}
|
||||
</div>
|
||||
|
||||
<!-- <div
|
||||
<div pos="absolute top-0 left-0" z-2>
|
||||
<slot name="coverTopLeft" />
|
||||
</div>
|
||||
|
||||
<button
|
||||
pos="absolute top-0 right-0" z="2"
|
||||
p="x-2 y-1" m="1"
|
||||
rounded="$bew-radius"
|
||||
text="!white xl"
|
||||
bg="black opacity-60" opacity-0 group-hover:opacity-100
|
||||
transform="scale-70 group-hover:scale-100"
|
||||
duration-300
|
||||
@click.stop="toggleWatchLater"
|
||||
>
|
||||
<Tooltip v-if="!isInWatchLater" :content="$t('common.save_to_watch_later')" placement="bottom" type="dark">
|
||||
<tabler:playlist-add />
|
||||
</Tooltip>
|
||||
<Tooltip v-else :content="$t('common.added')" placement="bottom" type="dark">
|
||||
<tabler:check />
|
||||
</Tooltip>
|
||||
</button>
|
||||
|
||||
<!-- Video cover -->
|
||||
<img
|
||||
:src="`${removeHttpFromUrl(cover)}@672w_378h_1c`"
|
||||
loading="lazy"
|
||||
w="full" max-w-full align-middle aspect-video
|
||||
bg="cover center"
|
||||
rounded="$bew-radius"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div flex="~" m="t-4">
|
||||
<div class="flex">
|
||||
<a
|
||||
v-if="authorFace"
|
||||
m="r-4" w="40px" h="40px" rounded="1/2" overflow="hidden" object="center cover"
|
||||
bg="$bew-fill-4" cursor="pointer"
|
||||
style="--un-shadow: 0 0 0 2px var(--bew-theme-color)"
|
||||
:href="`//space.bilibili.com/${mid}`" target="_blank"
|
||||
@click.stop=""
|
||||
>
|
||||
<img
|
||||
:src="`${removeHttpFromUrl(authorFace)}@50w_50h_1c`"
|
||||
width="40"
|
||||
height="40"
|
||||
loading="lazy"
|
||||
>
|
||||
</a>
|
||||
</div>
|
||||
<div class="meta" flex="~ col" w="full" align="items-start">
|
||||
<div flex="~" justify="between" w="full" pos="relative">
|
||||
<h3
|
||||
class="keep-two-lines"
|
||||
text="lg overflow-ellipsis $bew-text-1" h-3em
|
||||
cursor="pointer"
|
||||
>
|
||||
<a :href="videoUrl" target="_blank" :title="title">
|
||||
{{ title }}</a>
|
||||
</h3>
|
||||
|
||||
<!-- <div
|
||||
id="dislike-control-btn"
|
||||
class="icon-btn"
|
||||
p="t-0.15rem x-2"
|
||||
@@ -253,19 +270,19 @@ function toggleWatchLater() {
|
||||
<tabler:dots-vertical text="lg" />
|
||||
</div> -->
|
||||
|
||||
<!-- dislike control -->
|
||||
<template v-if="showPopCtrl">
|
||||
<!-- cover mask -->
|
||||
<div
|
||||
pos="fixed top-0 left-0"
|
||||
w="full"
|
||||
h="full"
|
||||
z="30"
|
||||
@click="showPopCtrl = false"
|
||||
/>
|
||||
<!-- dislike control -->
|
||||
<template v-if="showPopCtrl">
|
||||
<!-- cover mask -->
|
||||
<div
|
||||
pos="fixed top-0 left-0"
|
||||
w="full"
|
||||
h="full"
|
||||
z="30"
|
||||
@click="showPopCtrl = false"
|
||||
/>
|
||||
|
||||
<!-- dislike reason popup -->
|
||||
<!-- <div
|
||||
<!-- dislike reason popup -->
|
||||
<!-- <div
|
||||
pos="absolute top-9 right-0"
|
||||
p="2"
|
||||
z="30"
|
||||
@@ -305,27 +322,51 @@ function toggleWatchLater() {
|
||||
</li>
|
||||
</ul>
|
||||
</div> -->
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
<div
|
||||
v-if="author"
|
||||
class="channel-name"
|
||||
text="base $bew-text-2"
|
||||
m="t-2" cursor-pointer
|
||||
@click="gotoChannel(mid ?? 0)"
|
||||
>
|
||||
{{ author }}
|
||||
</div>
|
||||
<div class="video-info" text="base $bew-text-2">
|
||||
<span v-if="view">{{
|
||||
$t('common.view', { count: numFormatter(view) }, view)
|
||||
}}</span>
|
||||
<template v-if="danmaku">
|
||||
<span text-xs font-light mx-1>•</span>
|
||||
<span>{{ $t('common.danmaku', { count: numFormatter(danmaku) }, danmaku) }}</span>
|
||||
</template>
|
||||
<br>
|
||||
<span v-if="publishedTimestamp" text="$bew-text-3 sm" inline-block mt-2 p="x-2 y-1" bg="$bew-fill-1" rounded-4>{{ calcTimeSince(publishedTimestamp * 1000) }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="author"
|
||||
class="channel-name"
|
||||
text="base $bew-text-2"
|
||||
m="t-2" cursor-pointer
|
||||
@click="gotoChannel(mid ?? 0)"
|
||||
>
|
||||
{{ author }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- skeleton -->
|
||||
<div
|
||||
mb-10 pointer-events-none select-none invisible
|
||||
>
|
||||
<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 class="video-info" text="base $bew-text-2">
|
||||
<span v-if="view">{{
|
||||
$t('common.view', { count: numFormatter(view) }, view)
|
||||
}}</span>
|
||||
<template v-if="danmaku">
|
||||
<span text-xs font-light mx-1>•</span>
|
||||
<span>{{ $t('common.danmaku', { count: numFormatter(danmaku) }, danmaku) }}</span>
|
||||
</template>
|
||||
<br>
|
||||
<span v-if="publishedTimestamp" text="$bew-text-3 sm" inline-block mt-2 p="x-2 y-1" bg="$bew-fill-1" rounded-4>{{ calcTimeSince(publishedTimestamp * 1000) }}</span>
|
||||
<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>
|
||||
|
||||
Reference in New Issue
Block a user