mirror of
https://github.com/BewlyBewly/BewlyBewly.git
synced 2025-04-14 13:15:29 +00:00
537 lines
17 KiB
Vue
537 lines
17 KiB
Vue
<script lang="ts" setup>
|
|
import { Icon } from '@iconify/vue'
|
|
import type { CSSProperties } from 'vue'
|
|
import { useToast } from 'vue-toastification'
|
|
|
|
import Button from '~/components/Button.vue'
|
|
import { useBewlyApp } from '~/composables/useAppProvider'
|
|
import { accessKey, settings } from '~/logic'
|
|
import type { VideoInfo } from '~/models/video/videoInfo'
|
|
import type { VideoPreviewResult } from '~/models/video/videoPreview'
|
|
import api from '~/utils/api'
|
|
import { getTvSign, TVAppKey } from '~/utils/authProvider'
|
|
import { calcCurrentTime, calcTimeSince, numFormatter } from '~/utils/dataFormatter'
|
|
import { getCSRF, removeHttpFromUrl } from '~/utils/main'
|
|
|
|
import Tooltip from '../Tooltip.vue'
|
|
import type { Video } from './types'
|
|
import { getCurrentTime, getCurrentVideoUrl } from './utils'
|
|
import VideoCardAuthorAvatar from './VideoCardAuthor/components/VideoCardAuthorAvatar.vue'
|
|
import VideoCardAuthorName from './VideoCardAuthor/components/VideoCardAuthorName.vue'
|
|
import VideoCardContextMenu from './VideoCardContextMenu/VideoCardContextMenu.vue'
|
|
import VideoCardSkeleton from './VideoCardSkeleton.vue'
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
showWatcherLater: true,
|
|
type: 'common',
|
|
moreBtn: true,
|
|
})
|
|
|
|
interface Props {
|
|
skeleton?: boolean
|
|
video?: Video
|
|
/** rcmd: recommend video; appRcmd: app recommend video; bangumi: bangumi video; common: common video */
|
|
type?: 'rcmd' | 'appRcmd' | 'bangumi' | 'common'
|
|
showWatcherLater?: boolean
|
|
horizontal?: boolean
|
|
showPreview?: boolean
|
|
moreBtn?: boolean
|
|
}
|
|
|
|
const toast = useToast()
|
|
const { mainAppRef, openIframeDrawer } = useBewlyApp()
|
|
const showVideoOptions = ref<boolean>(false)
|
|
const videoOptionsFloatingStyles = ref<CSSProperties>({})
|
|
// Whether the user has marked it as disliked
|
|
const removed = ref<boolean>(false)
|
|
|
|
const moreBtnRef = ref<HTMLDivElement | null>(null)
|
|
const contextMenuRef = ref<HTMLDivElement | null>(null)
|
|
|
|
const selectedDislikeOpt = ref<{ dislikeReasonId: number }>()
|
|
|
|
const videoCurrentTime = ref<number | null>(null)
|
|
|
|
const videoUrl = computed(() => {
|
|
if (removed.value || !props.video)
|
|
return undefined
|
|
|
|
if (props.video.url)
|
|
return props.video.url
|
|
else if (props.video.bvid || props.video.aid)
|
|
return getCurrentVideoUrl(props.video, videoCurrentTime)
|
|
else if (props.video.epid)
|
|
return `https://www.bilibili.com/bangumi/play/ep${props.video.epid}`
|
|
else if (props.video.roomid)
|
|
return `https://live.bilibili.com/${props.video.roomid}`
|
|
else
|
|
return ''
|
|
})
|
|
|
|
const isInWatchLater = ref<boolean>(false)
|
|
const isHover = ref<boolean>(false)
|
|
const mouseEnterTimeOut = ref()
|
|
const mouseLeaveTimeOut = ref()
|
|
const previewVideoUrl = ref<string>('')
|
|
const contentVisibility = ref<'auto' | 'visible'>('auto')
|
|
const videoElement = ref<HTMLVideoElement | null>(null)
|
|
|
|
watch(() => isHover.value, async (newValue) => {
|
|
if (!props.video || !newValue)
|
|
return
|
|
|
|
if (props.showPreview && settings.value.enableVideoPreview
|
|
&& !previewVideoUrl.value && (props.video.aid || props.video.bvid)) {
|
|
let cid = props.video.cid
|
|
if (!cid) {
|
|
try {
|
|
const res: VideoInfo = await api.video.getVideoInfo({
|
|
bvid: props.video.bvid,
|
|
})
|
|
if (res.code === 0)
|
|
cid = res.data.cid
|
|
}
|
|
catch {
|
|
|
|
}
|
|
}
|
|
api.video.getVideoPreview({
|
|
bvid: props.video.bvid,
|
|
cid,
|
|
}).then((res: VideoPreviewResult) => {
|
|
if (res.code === 0)
|
|
previewVideoUrl.value = res.data.durl[0].url
|
|
})
|
|
}
|
|
})
|
|
|
|
function toggleWatchLater() {
|
|
if (!props.video)
|
|
return
|
|
|
|
if (!isInWatchLater.value) {
|
|
api.watchlater.saveToWatchLater({
|
|
aid: props.video.id,
|
|
csrf: getCSRF(),
|
|
})
|
|
.then((res) => {
|
|
if (res.code === 0)
|
|
isInWatchLater.value = true
|
|
})
|
|
}
|
|
else {
|
|
api.watchlater.removeFromWatchLater({
|
|
aid: props.video.id,
|
|
csrf: getCSRF(),
|
|
})
|
|
.then((res) => {
|
|
if (res.code === 0)
|
|
isInWatchLater.value = false
|
|
})
|
|
}
|
|
}
|
|
|
|
function handleMouseEnter() {
|
|
// fix #789
|
|
contentVisibility.value = 'visible'
|
|
if (settings.value.hoverVideoCardDelayed) {
|
|
mouseEnterTimeOut.value = setTimeout(() => {
|
|
isHover.value = true
|
|
clearTimeout(mouseLeaveTimeOut.value)
|
|
}, 1200)
|
|
}
|
|
else {
|
|
mouseEnterTimeOut.value = setTimeout(() => {
|
|
isHover.value = true
|
|
clearTimeout(mouseLeaveTimeOut.value)
|
|
}, 500)
|
|
}
|
|
}
|
|
|
|
function handelMouseLeave() {
|
|
contentVisibility.value = 'auto'
|
|
isHover.value = false
|
|
clearTimeout(mouseEnterTimeOut.value)
|
|
clearTimeout(mouseLeaveTimeOut.value)
|
|
}
|
|
|
|
function handleClick(event: MouseEvent) {
|
|
videoCurrentTime.value = getCurrentTime(videoElement)
|
|
|
|
if (settings.value.videoCardLinkOpenMode === 'drawer' && videoUrl.value && !event.ctrlKey && !event.metaKey) {
|
|
event.preventDefault()
|
|
openIframeDrawer(videoUrl.value)
|
|
}
|
|
}
|
|
|
|
function handleMoreBtnClick(event: MouseEvent) {
|
|
showVideoOptions.value = false
|
|
videoOptionsFloatingStyles.value = {
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
transform: `translate(${event.x}px, ${event.y}px)`,
|
|
}
|
|
showVideoOptions.value = true
|
|
}
|
|
|
|
function handleUndo() {
|
|
if (props.type === 'appRcmd') {
|
|
const params = {
|
|
access_key: accessKey.value,
|
|
goto: props.video?.goto,
|
|
id: props.video?.id,
|
|
// https://github.com/magicdawn/bilibili-app-recommend/blob/cb51f75f415f48235ce048537f2013122c16b56b/src/components/VideoCard/card.service.ts#L115
|
|
idx: Number((Date.now() / 1000).toFixed(0)),
|
|
reason_id: selectedDislikeOpt.value?.dislikeReasonId, // 1 means dislike, e.g. {"id": 1, "name": "不感兴趣","toast": "将减少相似内容推荐"}
|
|
build: 74800100,
|
|
device: 'pad',
|
|
mobi_app: 'iphone',
|
|
appkey: TVAppKey.appkey,
|
|
}
|
|
|
|
api.video.undoDislikeVideo({
|
|
...params,
|
|
sign: getTvSign(params),
|
|
}).then((res) => {
|
|
if (res.code === 0) {
|
|
removed.value = false
|
|
}
|
|
else {
|
|
toast.error(res.message)
|
|
}
|
|
})
|
|
}
|
|
else {
|
|
removed.value = false
|
|
}
|
|
}
|
|
|
|
function handleRemoved(selectedOpt?: { dislikeReasonId: number }) {
|
|
selectedDislikeOpt.value = selectedOpt
|
|
removed.value = true
|
|
}
|
|
|
|
provide('getVideoType', () => props.type!)
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
:style="{ contentVisibility }"
|
|
intrinsic-size-300px
|
|
duration-300 ease-in-out
|
|
rounded="$bew-radius"
|
|
ring="hover:8 hover:$bew-fill-2 active:8 active:$bew-fill-3"
|
|
bg="hover:$bew-fill-2 active:$bew-fill-3"
|
|
transform="~ translate-z-0"
|
|
mb-4
|
|
>
|
|
<div v-if="!skeleton && video">
|
|
<div
|
|
class="video-card group"
|
|
w="full"
|
|
rounded="$bew-radius"
|
|
>
|
|
<ALink
|
|
:style="{ display: horizontal ? 'flex' : 'block', gap: horizontal ? '1.5rem' : '0' }"
|
|
:href="videoUrl"
|
|
type="videoCard"
|
|
custom-click-event
|
|
@mouseenter="handleMouseEnter"
|
|
@mouseleave="handelMouseLeave"
|
|
@click="handleClick"
|
|
>
|
|
<!-- Cover -->
|
|
<div
|
|
class="group/cover"
|
|
:class="horizontal ? 'horizontal-card-cover' : 'vertical-card-cover'"
|
|
shrink-0
|
|
h-fit relative bg="$bew-skeleton" rounded="$bew-radius"
|
|
cursor-pointer
|
|
group-hover:z-2
|
|
transform="~ translate-z-0"
|
|
>
|
|
<!-- Video cover -->
|
|
<Picture
|
|
:src="`${removeHttpFromUrl(video.cover)}@672w_378h_1c_!web-home-common-cover`"
|
|
loading="eager"
|
|
w="full" max-w-full align-middle aspect-video object-cover
|
|
rounded="$bew-radius"
|
|
/>
|
|
|
|
<div
|
|
v-if="removed"
|
|
pos="absolute top-0 left-0" w-full h-fit aspect-video flex="~ col gap-2 items-center justify-center"
|
|
bg="$bew-fill-4" backdrop-blur-20px mix-blend-luminosity rounded="$bew-radius" z-2
|
|
>
|
|
<p mb-2 color-white text-lg>
|
|
{{ $t('video_card.video_removed') }}
|
|
</p>
|
|
<Button
|
|
color="rgba(255,255,255,.35)" text-color="white" size="small"
|
|
@click.prevent.stop="handleUndo"
|
|
>
|
|
<template #left>
|
|
<div i-mingcute-back-line text-lg />
|
|
</template>
|
|
{{ $t('common.undo') }}
|
|
</Button>
|
|
</div>
|
|
|
|
<!-- Video preview -->
|
|
<Transition v-if="!removed && showPreview && settings.enableVideoPreview" name="fade">
|
|
<video
|
|
v-if="previewVideoUrl && isHover"
|
|
ref="videoElement"
|
|
autoplay muted
|
|
:controls="settings.enableVideoCtrlBarOnVideoCard"
|
|
:style="{ pointerEvents: settings.enableVideoCtrlBarOnVideoCard ? 'auto' : 'none' }"
|
|
pos="absolute top-0 left-0" w-full aspect-video rounded="$bew-radius" bg-black
|
|
@mouseenter="handleMouseEnter"
|
|
>
|
|
<source :src="previewVideoUrl" type="video/mp4">
|
|
</video>
|
|
</Transition>
|
|
|
|
<!-- Ranking Number -->
|
|
<div
|
|
v-if="video.rank"
|
|
pos="absolute top-0"
|
|
p-2 group-hover:opacity-0
|
|
duration-300
|
|
>
|
|
<div
|
|
v-if="Number(video.rank) <= 3"
|
|
bg="$bew-theme-color" text-center lh-0 h-30px w-30px
|
|
text-white rounded="1/2" shadow="$bew-shadow-1"
|
|
border="1 $bew-theme-color"
|
|
grid="~ place-content-center"
|
|
text="xl" fw-bold
|
|
>
|
|
{{ video.rank }}
|
|
</div>
|
|
<div
|
|
v-else
|
|
bg="$bew-elevated-solid" text-center lh-30px h-30px w-30px
|
|
rounded="1/2" shadow="$bew-shadow-1"
|
|
border="1 $bew-border-color"
|
|
>
|
|
{{ video.rank }}
|
|
</div>
|
|
</div>
|
|
|
|
<template v-if="!removed">
|
|
<!-- Video Duration -->
|
|
<div
|
|
v-if="video.duration || video.durationStr"
|
|
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"
|
|
class="group-hover:opacity-0"
|
|
duration-300
|
|
>
|
|
{{ video.duration ? calcCurrentTime(video.duration) : video.durationStr }}
|
|
</div>
|
|
|
|
<div
|
|
class="opacity-0 group-hover/cover:opacity-100"
|
|
transform="scale-70 group-hover/cover:scale-100"
|
|
duration-300
|
|
pos="absolute top-0 left-0" z-2
|
|
@click.stop=""
|
|
>
|
|
<slot name="coverTopLeft" />
|
|
</div>
|
|
|
|
<div
|
|
v-if="video.liveStatus === 1"
|
|
class="group-hover:opacity-0"
|
|
pos="absolute left-0 top-0" bg="$bew-theme-color" text="xs white"
|
|
p="x-2 y-1" m-1 inline-block rounded="$bew-radius" duration-300
|
|
>
|
|
LIVE
|
|
<i i-svg-spinners:pulse-3 align-middle mt--0.2em />
|
|
</div>
|
|
|
|
<div
|
|
v-if="video.badge && Object.keys(video.badge).length > 0"
|
|
class="group-hover:opacity-0"
|
|
:style="{
|
|
backgroundColor: video.badge.bgColor,
|
|
color: video.badge.color,
|
|
}"
|
|
pos="absolute right-0 top-0" bg="$bew-theme-color" text="xs white"
|
|
p="x-2 y-1" m-1 inline-block rounded="$bew-radius" duration-300
|
|
>
|
|
{{ video.badge.text }}
|
|
</div>
|
|
|
|
<!-- Watcher later button -->
|
|
<button
|
|
v-if="showWatcherLater"
|
|
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"
|
|
class="opacity-0 group-hover/cover:opacity-100"
|
|
transform="scale-70 group-hover/cover:scale-100"
|
|
duration-300
|
|
@click.prevent.stop="toggleWatchLater"
|
|
>
|
|
<Tooltip v-if="!isInWatchLater" :content="$t('common.save_to_watch_later')" placement="bottom-right" type="dark">
|
|
<div i-mingcute:carplay-line />
|
|
</Tooltip>
|
|
<Tooltip v-else :content="$t('common.added')" placement="bottom-right" type="dark">
|
|
<Icon icon="line-md:confirm" />
|
|
</Tooltip>
|
|
</button>
|
|
</template>
|
|
</div>
|
|
|
|
<!-- Other Information -->
|
|
<div
|
|
v-if="!removed"
|
|
:style="{
|
|
width: horizontal ? '100%' : 'unset',
|
|
marginTop: horizontal ? '0' : '1rem',
|
|
}"
|
|
flex="~"
|
|
>
|
|
<!-- Author Avatar -->
|
|
<VideoCardAuthorAvatar
|
|
v-if="!horizontal && video.author"
|
|
:author="video.author"
|
|
:is-live="video.liveStatus === 1"
|
|
/>
|
|
<div class="group/desc" flex="~ col" w="full" align="items-start">
|
|
<div flex="~ gap-1 justify-between items-start" w="full" pos="relative">
|
|
<h3
|
|
class="keep-two-lines"
|
|
text="overflow-ellipsis $bew-text-1"
|
|
cursor="pointer"
|
|
>
|
|
<a :href="videoUrl" target="_blank" :title="video.title">
|
|
{{ video.title }}
|
|
</a>
|
|
</h3>
|
|
|
|
<div
|
|
v-if="moreBtn"
|
|
ref="moreBtnRef"
|
|
:class="{ 'more-active': showVideoOptions }"
|
|
bg="hover:$bew-fill-2 active:$bew-fill-3"
|
|
shrink-0 w-30px h-30px m="t--3px r--4px"
|
|
grid place-items-center cursor-pointer rounded="50%" duration-300
|
|
@click.stop.prevent="handleMoreBtnClick"
|
|
>
|
|
<div i-mingcute:more-2-line text="lg" />
|
|
</div>
|
|
</div>
|
|
<div text="sm $bew-text-2" w-fit m="t-2" flex="~ items-center wrap">
|
|
<!-- Author Avatar -->
|
|
<span
|
|
:style="{
|
|
marginBottom: horizontal ? '0.5rem' : '0',
|
|
}"
|
|
flex="inline items-center"
|
|
>
|
|
<VideoCardAuthorAvatar
|
|
v-if="horizontal && video.author"
|
|
:author="video.author"
|
|
:is-live="video.liveStatus === 1"
|
|
/>
|
|
<VideoCardAuthorName
|
|
:author="video.author"
|
|
/>
|
|
</span>
|
|
</div>
|
|
|
|
<div flex="~ items-center gap-1 wrap">
|
|
<!-- View & Danmaku Count -->
|
|
<div
|
|
text="sm $bew-text-2" rounded="$bew-radius"
|
|
inline-block
|
|
>
|
|
<span v-if="video.view || video.viewStr">
|
|
{{ video.view ? $t('common.view', { count: numFormatter(video.view) }, video.view) : `${numFormatter(video.viewStr || '0')}${$t('common.viewWithoutNum')}` }}
|
|
</span>
|
|
<template v-if="video.danmaku || video.danmakuStr">
|
|
<span text-xs font-light mx-4px>•</span>
|
|
<span>{{ video.danmaku ? $t('common.danmaku', { count: numFormatter(video.danmaku) }, video.danmaku) : `${numFormatter(video.danmakuStr || '0')}${$t('common.danmakuWithoutNum')}` }}</span>
|
|
</template>
|
|
<br>
|
|
</div>
|
|
</div>
|
|
<div mt-2 flex="~ gap-1 wrap" text="xs">
|
|
<!-- Tag -->
|
|
<span
|
|
v-if="video.tag"
|
|
text="$bew-theme-color" lh-6 p="x-2" rounded="$bew-radius" bg="$bew-theme-color-20"
|
|
>
|
|
{{ video.tag }}
|
|
</span>
|
|
<span
|
|
v-if="video.publishedTimestamp || video.capsuleText"
|
|
bg="$bew-fill-1" p="x-2" rounded="$bew-radius" text="$bew-text-3" lh-6
|
|
mr-1
|
|
>
|
|
{{ video.publishedTimestamp ? calcTimeSince(video.publishedTimestamp * 1000) : video.capsuleText?.trim() }}
|
|
</span>
|
|
<!-- Video type -->
|
|
<span text="$bew-text-2" grid="~ place-items-center">
|
|
<div v-if="video.type === 'vertical'" i-mingcute:cellphone-2-line />
|
|
<div v-else-if="video.type === 'bangumi'" i-mingcute:movie-line />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</ALink>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- skeleton -->
|
|
<VideoCardSkeleton
|
|
v-if="skeleton"
|
|
:horizontal="horizontal"
|
|
important-mb-0
|
|
/>
|
|
|
|
<!-- context menu -->
|
|
<Teleport
|
|
v-if="showVideoOptions && video"
|
|
:to="mainAppRef"
|
|
>
|
|
<VideoCardContextMenu
|
|
ref="contextMenuRef"
|
|
:video="{
|
|
...video,
|
|
url: videoUrl,
|
|
}"
|
|
:context-menu-styles="videoOptionsFloatingStyles"
|
|
@close="showVideoOptions = false"
|
|
@removed="handleRemoved"
|
|
/>
|
|
<!-- @reopen="handleMoreBtnClick" -->
|
|
</Teleport>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.horizontal-card-cover {
|
|
--uno: "xl:w-280px lg:w-250px md:w-200px w-200px";
|
|
}
|
|
|
|
.vertical-card-cover {
|
|
--uno: "w-full";
|
|
}
|
|
|
|
.more-active {
|
|
--uno: "opacity-100";
|
|
}
|
|
</style>
|