renun/BewlyBewly
1
0
Fork 0
mirror of https://github.com/BewlyBewly/BewlyBewly.git synced 2025-04-14 13:15:29 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(video-card): enhance video card context menu

Browse Source
This commit is contained in:
Hakadao
2024-10-14 01:50:36 +08:00
parent 3fec851ffe
commit b06c2a868d
8 changed files with 197 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/_locales/cmn-CN.yml
View File

@@ -262,8 +262,10 @@ settings:
重置设置？
该操作无法撤销。你确定要重置你的设置吗？
contributors: 贡献者
auth:
auth_access_key_first: 在这之前请先授权 BewlyBewly 使用 access key
topbar:
sign_in: 登录
notifications: 通知
@@ -348,6 +350,7 @@ topbar:
sticker: 上传贴纸
video: 上传视频
manager: 投稿管理
dock:
search: 搜索
home: 首页
@@ -358,21 +361,40 @@ dock:
dark_mode: 暗色模式
light_mode: 亮色模式
settings: 设置
home:
not_interested: 不感兴趣
not_interested_desc: 你可以使用 <kbd>↑</kbd> 和 <kbd>↓</kbd> 来选择原因，或者直接使用数字键选择原因，按 <kbd>Enter</kbd> 就直接提交。
tell_us_why: 为什么这么做...
video_card:
operation:
not_interested: 不感兴趣
open_in_background: 后台打开
open_in_new_window: 新标签页打开
open_in_current_tab: 当前标签页打开
open_in_drawer: 抽屉打开
copy_video_link: 复制视频链接
copy_bv_number: 复制 BV 号
copy_av_number: 复制 AV 号
view_the_original_cover: 查看封面
view_this_user_channel: 查看该用户频道
video_removed: 视频已移除
home:
tell_us_why: 为什么这么做...
not_interested_desc: 你可以使用 <kbd>↑</kbd> 和 <kbd>↓</kbd> 来选择原因，或者直接使用数字键选择原因，按 <kbd>Enter</kbd> 就直接提交。
for_you: 个性推荐
following: 正在关注
trending: 热门视频
ranking: 排行
subscribed_series: 订阅剧集
ranking:
all: 全部
chinese_anime_related: 中国动画相关
original_content: 原创内容
debut_work: 新人作品
anime:
total_episodes: 全 {ep} 话
update_to_n_episodes: 更新至 {ep} 话
@@ -391,6 +413,7 @@ anime:
fri: 周五
sat: 周六
sun: 周日
history:
clear_all_watch_history: 清除所有观看历史
clear_all_watch_history_confirm: |-
@@ -406,11 +429,13 @@ history:
turn_on_watch_history_confirm: |-
要开启观看历史吗？
你确定要开启观看历史吗？
favorites:
unfavorite: 取消收藏
unfavorite_confirm: |-
要取消收藏选中的视频吗？
该操作无法撤销，你确定要取消收藏选中的视频吗？
watch_later:
title: 稍后再看
clear_all: 清空稍后再看
@@ -421,6 +446,7 @@ watch_later:
remove_watched_videos_confirm: |-
要清除已观看的视频吗？
该操作无法撤销，你确定要清除已观看的视频吗？
search_bar:
history_title: 搜索历史
clear_history: 清空搜索历史

34
src/_locales/cmn-TW.yml
View File

@@ -263,8 +263,10 @@ settings:
重設設定？
此操作無法撤消，你確定要重設你的設定嗎？
contributors: 貢獻者
auth:
auth_access_key_first: 在這之前請先授權 BewlyBewly 使用 access key
topbar:
sign_in: 登入
notifications: 通知
@@ -349,6 +351,7 @@ topbar:
sticker: 上傳貼圖
video: 上傳影片
manager: 內容管理
dock:
search: 搜尋
home: 首頁
@@ -359,21 +362,40 @@ dock:
dark_mode: 深色模式
light_mode: 淺色模式
settings: 設定
home:
not_interested: 不感興趣
not_interested_desc: 你可以用 <kbd>↑</kbd> 和 <kbd>↓</kbd> 來選擇原因，或者直接使用數字鍵來選擇原因，按 <kbd>Enter</kbd> 就直接提交。
tell_us_why: 為什麼這樣做...
video_card:
operation:
not_interested: 不感興趣
open_in_background: 後台開啟
open_in_new_window: 新索引標籤開啟
open_in_current_tab: 目前索引標籤開啟
open_in_drawer: 抽屜開啟
copy_video_link: 複製影片連結
copy_bv_number: 複製 BV 號
copy_av_number: 複製 AV 號
view_the_original_cover: 檢視封面
view_this_user_channel: 檢視該用戶頻道
video_removed: 影片已移除
home:
tell_us_why: 為什麼這樣做...
not_interested_desc: 你可以用 <kbd>↑</kbd> 和 <kbd>↓</kbd> 來選擇原因，或者直接使用數字鍵來選擇原因，按 <kbd>Enter</kbd> 就直接提交。
for_you: 為你推薦
following: 正在跟隨
trending: 發燒影片
ranking: 排行
subscribed_series: 訂閱劇集
ranking:
all: 全部
chinese_anime_related: 中國動畫相關
original_content: 原創內容
debut_work: 新人作品
anime:
total_episodes: 全 {ep} 話
update_to_n_episodes: 更新至 {ep} 話
@@ -392,6 +414,7 @@ anime:
fri: 週五
sat: 週六
sun: 週日
history:
title: 觀看記錄
turn_on_watch_history: 啟用觀看記錄
@@ -407,11 +430,13 @@ history:
turn_on_watch_history_confirm: |-
要啟用觀看記錄嗎？
你確定要啟用觀看記錄嗎？
favorites:
unfavorite: 取消收藏
unfavorite_confirm: |-
要取消收藏選中的影片嗎？
此操作無法撤消，你確定要取消收藏選中的影片嗎？
watch_later:
title: 稍後觀看
clear_all: 清空稍後觀看
@@ -422,6 +447,7 @@ watch_later:
remove_watched_videos_confirm: |-
要移除看過的影片嗎？
此操作無法復原，你確定要移除看過的影片嗎？
search_bar:
history_title: 搜尋記錄
clear_history: 清除所有搜尋記錄

34
src/_locales/en.yml
View File

@@ -265,8 +265,10 @@ settings:
Reset settings?
This operation cannot be reversed. Are you sure you want to reset your settings?
contributors: Contributors
auth:
auth_access_key_first: Before doing this, authorize BewlyBewly to use the access key.
topbar:
sign_in: Sign in
notifications: Notifications
@@ -351,6 +353,7 @@ topbar:
sticker: Sticker
video: Video
manager: Manager
dock:
search: Search
home: Home
@@ -361,21 +364,40 @@ dock:
dark_mode: Dark Mode
light_mode: Light Mode
settings: Settings
home:
not_interested: Not interested
not_interested_desc: You can use <kbd>↑</kbd> and <kbd>↓</kbd> to choose the reason, or using number keys to choose the reason directly, press <kbd>Enter</kbd> to confirm.
tell_us_why: Choose a reason why
video_card:
operation:
not_interested: Not Interested
open_in_background: Open In Background
open_in_new_window: Open in New Window
open_in_current_tab: Open in Current Tab
open_in_drawer: Open in Drawer
copy_video_link: Copy Video Link
copy_bv_number: Copy BV Number
copy_av_number: Copy AV Number
view_the_original_cover: View the Original Cover
view_this_user_channel: View This User Channel
video_removed: Video removed
home:
tell_us_why: Choose a reason why
not_interested_desc: You can use <kbd>↑</kbd> and <kbd>↓</kbd> to choose the reason, or using number keys to choose the reason directly, press <kbd>Enter</kbd> to confirm.
for_you: For you
following: Following
trending: Trending
ranking: Ranking
subscribed_series: Subscribed Series
ranking:
all: All
chinese_anime_related: Chinese Anime-related
original_content: Original Content
debut_work: Debut Work
anime:
total_episodes: EP {ep}
update_to_n_episodes: Update to EP {ep}
@@ -394,6 +416,7 @@ anime:
fri: FRI
sat: SAT
sun: SUN
history:
title: Watch History
search_watch_history: Search watch history
@@ -407,11 +430,13 @@ history:
Are you sure you want to pause watch history?
turn_on_watch_history: Turn on watch history
turn_on_watch_history_confirm: Turn on watch history? Are you sure you want to turn on watch history?
favorites:
unfavorite: Unfavorite
unfavorite_confirm: |-
Remove selected video(s)?
This operation cannot be reversed. Are you sure you want to remove the selected video(s) from your favorites?
watch_later:
title: Watch Later
clear_all: Clear all watch later
@@ -422,6 +447,7 @@ watch_later:
remove_watched_videos_confirm: |-
Remove watched videos?
This operation cannot be reversed. Are you sure you want to remove watched videos?
search_bar:
history_title: Search History
clear_history: Clear search history

32
src/_locales/jyut.yml
View File

@@ -262,8 +262,10 @@ settings:
重設設定？
噉做冇得返轉頭噃，你確定要重設你之前嘅設定？
contributors: 貢獻者
auth:
auth_access_key_first: 整之前記得先授權 BewlyBewly 去用 access key
topbar:
sign_in: 登入
notifications: 通知
@@ -348,6 +350,7 @@ topbar:
sticker: 出貼圖
video: Po 片
manager: 內容管理
dock:
search: 搵嘢
home: 主頁
@@ -358,21 +361,40 @@ dock:
dark_mode: 深色模式
light_mode: 淺色模式
settings: 設定
video_card:
operation:
not_interested: 唔鍾意
open_in_background: 後台開啓
open_in_new_window: 新分頁開啓
open_in_current_tab: 目前分頁開啓
open_in_drawer: 櫃桶開啓
copy_video_link: 複製影片連結
copy_bv_number: 複製 BV 號
copy_av_number: 複製 AV 號
view_the_original_cover: 睇吓封面
view_this_user_channel: 睇下呢位用戶嘅頻道
video_removed: 經已鏟咗條片
home:
not_interested: 唔鍾意
not_interested_desc: 你可以用 <kbd>↑</kbd> 同 <kbd>↓</kbd> 嚟揀個理由，抑或用數字鍵嚟直接揀理由，撳 <kbd>Enter</kbd> 就直接提交。
tell_us_why: 點解噉做...
video_removed: 已經鏟咗條片
not_interested_desc: 你可以用 <kbd>↑</kbd> 同 <kbd>↓</kbd> 嚟揀個理由，抑或用數字鍵嚟直接揀理由，撳 <kbd>Enter</kbd> 就直接提交。
for_you: 估你心水
following: Follow 緊
trending: 時下至 Hit
ranking: 排行
subscribed_series: 訂閱劇集
ranking:
all: 全部
chinese_anime_related: 中國動畫相關
original_content: 原創內容
debut_work: 新人作品
anime:
total_episodes: 共 {ep} 集
update_to_n_episodes: 更新到 {ep} 集
@@ -391,6 +413,7 @@ anime:
fri: 週五
sat: 週六
sun: 週日
history:
title: 收睇記錄
turn_on_watch_history: 開返收睇記錄
@@ -406,11 +429,13 @@ history:
turn_on_watch_history_confirm: |-
係咪要開返收睇記錄呀？
你確定要開返收睇記錄？
favorites:
unfavorite: 唔愛喇
unfavorite_confirm: |-
係咪要剷走你揀過啲片呀？
噉做冇得返轉頭噃，你確定要剷走你揀過啲片？
watch_later:
title: 陣間至睇
clear_all: 剷曬陣間至睇啲片
@@ -421,6 +446,7 @@ watch_later:
remove_watched_videos_confirm: |-
係咪要剷走你睇過啲片呀？
噉做冇得返轉頭噃，你確定要剷走你睇過啲片？
search_bar:
history_title: 搜尋記錄
clear_history: 剷晒你啲搜尋記錄

12
src/components/VideoCard/VideoCard.vue
View File

@@ -19,13 +19,15 @@ import VideoCardSkeleton from './VideoCardSkeleton.vue'
const props = withDefaults(defineProps<Props>(), {
showWatcherLater: true,
type: 'common',
moreBtn: true,
})
interface Props {
skeleton?: boolean
video?: Video
/** 是否爲app端推介，用於調用不同取消不感興趣方法 */
isApp?: boolean
/** rcmd: recommend video; appRcmd: app recommend video; bangumi: bangumi video; common: common video */
type: 'rcmd' | 'appRcmd' | 'bangumi' | 'common'
showWatcherLater?: boolean
horizontal?: boolean
showPreview?: boolean
@@ -222,7 +224,7 @@ function handleMoreBtnClick(event: MouseEvent) {
}
function handleUndo() {
if (props.isApp) {
if (props.type === 'appRcmd') {
const params = {
access_key: accessKey.value,
goto: props.video?.goto,
@@ -257,6 +259,8 @@ function handleRemoved(selectedOpt?: { dislikeReasonId: number }) {
selectedDislikeOpt.value = selectedOpt
removed.value = true
}
provide('getVideoType', () => props.type!)
</script>
<template>
@@ -310,7 +314,7 @@ function handleRemoved(selectedOpt?: { dislikeReasonId: number }) {
bg="$bew-fill-4" backdrop-blur-20px mix-blend-luminosity rounded="$bew-radius" z-2
>
<p mb-2 color-white text-lg>
{{ $t('home.video_removed') }}
{{ $t('video_card.video_removed') }}
</p>
<Button
color="rgba(255,255,255,.35)" text-color="white" size="small"

102
src/components/VideoCard/VideoCardContextMenu/VideoCardContextMenu.vue
View File

@@ -1,8 +1,8 @@
<script setup lang="ts">
import type { CSSProperties } from 'vue'
import { useI18n } from 'vue-i18n'
import { useBewlyApp } from '~/composables/useAppProvider'
import { settings } from '~/logic'
import { Type as ThreePointV2Type } from '~/models/video/appForYou'
import { openLinkInBackground } from '~/utils/tab'
@@ -13,46 +13,69 @@ const props = defineProps<{
video: Video
contextMenuStyles: CSSProperties
}>()
const emit = defineEmits<{
(event: 'removed', selectedOpt?: { dislikeReasonId: number }): void
(event: 'close'): void
(event: 'reopen'): void
}>()
const getVideoType = inject<() => string>('getVideoType')!
const videoOptions = reactive<{ id: number, name: string }[]>([
{ id: 1, name: '不感兴趣' },
{ id: 2, name: '不想看此UP主' },
])
const { t } = useI18n()
const showContextMenu = ref<boolean>(false)
const showDislikeDialog = ref<boolean>(false)
const showPipWindow = ref<boolean>(false)
const { openIframeDrawer } = useBewlyApp()
enum VideoOption {
OpenLinkInNewTab,
OpenLinkInCurrentTab,
// OpenInBackground,
OpenLinkInNewWindow,
OpenLinkInDrawer,
// OpenInNewTab,
OpenInBackground,
OpenInCurrentTab,
OpenInNewWindow,
OpenInDrawer,
ViewTheOriginalCover,
ViewThisUserChannel,
CopyVideoLink,
CopyBVNumber,
CopyAVNumber,
}
const commonOptions = computed((): { command: VideoOption, name: string, icon: string, color?: string }[][] => {
return [
let result = [
[
{ command: VideoOption.OpenLinkInNewTab, name: 'Open Link in New Tab', icon: 'i-solar:square-top-down-bold-duotone' },
{ command: VideoOption.OpenLinkInCurrentTab, name: 'Open Link in Current Tab', icon: 'i-solar:square-top-down-bold-duotone' },
// { command: VideoOption.OpenInBackground, name: 'Open in background', icon: 'i-solar:square-top-down-bold-duotone' },
{ command: VideoOption.OpenLinkInNewWindow, name: 'Open Link in New Window', icon: 'i-solar:maximize-square-3-bold-duotone' },
{ command: VideoOption.OpenLinkInDrawer, name: 'Open Link in Drawer', icon: 'i-solar:archive-up-minimlistic-bold-duotone' },
// { command: VideoOption.OpenInNewTab, name: 'Open in New Tab', icon: 'i-solar:square-top-down-bold-duotone' },
{ command: VideoOption.OpenInBackground, name: t('video_card.operation.open_in_background'), icon: 'i-solar:square-top-down-bold-duotone' },
{ command: VideoOption.OpenInNewWindow, name: t('video_card.operation.open_in_new_window'), icon: 'i-solar:maximize-square-3-bold-duotone' },
{ command: VideoOption.OpenInCurrentTab, name: t('video_card.operation.open_in_current_tab'), icon: 'i-solar:square-top-down-bold-duotone' },
{ command: VideoOption.OpenInDrawer, name: t('video_card.operation.open_in_drawer'), icon: 'i-solar:archive-up-minimlistic-bold-duotone' },
],
[
{ command: VideoOption.ViewTheOriginalCover, name: 'View the original cover', icon: 'i-solar:gallery-minimalistic-bold-duotone' },
{ command: VideoOption.CopyVideoLink, name: t('video_card.operation.copy_video_link'), icon: 'i-solar:copy-bold-duotone' },
{ command: VideoOption.CopyBVNumber, name: t('video_card.operation.copy_bv_number'), icon: 'i-solar:copy-bold-duotone' },
{ command: VideoOption.CopyAVNumber, name: t('video_card.operation.copy_av_number'), icon: 'i-solar:copy-bold-duotone' },
],
[
{ command: VideoOption.ViewTheOriginalCover, name: t('video_card.operation.view_the_original_cover'), icon: 'i-solar:gallery-minimalistic-bold-duotone' },
{ command: VideoOption.ViewThisUserChannel, name: t('video_card.operation.view_this_user_channel'), icon: 'i-solar:user-bold-duotone' },
],
]
if (getVideoType() === 'bangumi') {
result = result.map((group) => {
return group.filter((opt) => {
return opt.command !== VideoOption.CopyBVNumber && opt.command !== VideoOption.CopyAVNumber && opt.command !== VideoOption.ViewThisUserChannel
})
})
}
return result
})
onMounted(() => {
@@ -75,36 +98,43 @@ function handleAppMoreCommand(command: ThreePointV2Type) {
function handleCommonCommand(command: VideoOption) {
switch (command) {
case VideoOption.OpenLinkInNewTab:
case VideoOption.OpenInBackground:
openLinkInBackground(props.video.url!)
// // Focus back on the original tab
// if (newTab) {
// newTab.blur() // Remove focus from the new tab
// window.focus() // Bring focus back to the current tab
// }
handleClose()
break
case VideoOption.OpenLinkInCurrentTab:
case VideoOption.OpenInNewWindow:
showPipWindow.value = true
break
case VideoOption.OpenInCurrentTab:
window.open(props.video.url, '_self')
handleClose()
break
// case VideoOption.OpenInBackground:
// // Open tab in background
// window.open(props.video.url, '_blank', 'background')
// handleClose()
// break
case VideoOption.OpenLinkInNewWindow:
showPipWindow.value = true
break
case VideoOption.OpenLinkInDrawer:
case VideoOption.OpenInDrawer:
openIframeDrawer(props.video.url || '')
handleClose()
break
case VideoOption.CopyVideoLink:
navigator.clipboard.writeText(props.video.url!)
handleClose()
break
case VideoOption.CopyBVNumber:
navigator.clipboard.writeText(props.video.bvid!)
handleClose()
break
case VideoOption.CopyAVNumber:
navigator.clipboard.writeText(props.video.id.toString())
handleClose()
break
case VideoOption.ViewTheOriginalCover:
window.open(props.video.cover, '_blank')
handleClose()
break
case VideoOption.ViewThisUserChannel:
window.open(`https://space.bilibili.com/${props.video.mid}`, '_blank')
handleClose()
break
}
}
@@ -146,7 +176,7 @@ function handleRemoved(selectedOpt?: { dislikeReasonId: number }) {
z-10
>
<ul flex="~ col gap-1">
<template v-if="settings.recommendationMode === 'app'">
<template v-if="getVideoType() === 'appRcmd'">
<template v-for="option in video.threePointV2" :key="option.type">
<li
v-if="option.type !== ThreePointV2Type.WatchLater && option.type !== ThreePointV2Type.Feedback"
@@ -154,12 +184,12 @@ function handleRemoved(selectedOpt?: { dislikeReasonId: number }) {
@click="handleAppMoreCommand(option.type)"
>
<i class="item-icon" i-solar:confounded-circle-bold-duotone />
<span v-if="option.type === ThreePointV2Type.Dislike">{{ $t('home.not_interested') }}</span>
<span v-if="option.type === ThreePointV2Type.Dislike">{{ $t('video_card.operation.not_interested') }}</span>
<span v-else>{{ option.title }}</span>
</li>
</template>
</template>
<template v-else>
<template v-else-if="getVideoType() === 'rcmd'">
<li
v-for="option in videoOptions" :key="option.id"
class="context-menu-item"
@@ -170,9 +200,9 @@ function handleRemoved(selectedOpt?: { dislikeReasonId: number }) {
</li>
</template>
<template v-for="(optionGroup, _index) in commonOptions" :key="_index">
<div class="divider" />
<div v-if="getVideoType() !== 'common'" class="divider" />
<template v-for="(optionGroup, index) in commonOptions" :key="index">
<li
v-for="option in optionGroup"
:key="option.command"
@@ -182,6 +212,8 @@ function handleRemoved(selectedOpt?: { dislikeReasonId: number }) {
<i class="item-icon" :class="option.icon" />
{{ option.name }}
</li>
<div v-if="index !== commonOptions.length - 1" class="divider" />
</template>
</ul>
</div>

3
src/contentScripts/views/Home/components/ForYou.vue
View File

@@ -344,6 +344,7 @@ defineExpose({ initData })
v-for="video in videoList"
:key="video.uniqueId"
:skeleton="!video.item"
type="rcmd"
:video="video.item ? {
id: video.item.id,
duration: video.item.duration,
@@ -370,7 +371,7 @@ defineExpose({ initData })
:key="video.uniqueId"
ref="videoCardRef"
:skeleton="!video.item"
:is-app="true"
type="appRcmd"
:video="video.item ? {
id: video.item.args.aid ?? 0,
durationStr: video.item.cover_right_text,

1
src/contentScripts/views/Home/components/SubscribedSeries.vue
View File

@@ -191,6 +191,7 @@ defineExpose({ initData })
v-for="video in videoList"
:key="video.uniqueId"
:skeleton="!video.item"
type="bangumi"
:video="video.item ? {
id: video.item.modules.module_author.mid,
title: `${video.item.modules.module_dynamic.major.pgc?.title}`,