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: add performance settings

Browse Source
This commit is contained in:
Hakadao
2024-03-10 14:55:41 -03:00
parent c13a56a203
commit e70f62d83a
11 changed files with 106 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -37,6 +37,7 @@ settings:
# Settings group
group_common: 通用
group_performance: 性能
group_topbar: 顶栏
group_dock: Dock 栏
group_color: 颜色
@@ -68,6 +69,8 @@ settings:
enable_video_ctrl_bar_on_video_card: 在视频卡片上显示视频控制栏
hover_video_card_delayed: 将鼠标悬停在视频卡片上时延迟视频预览
block_ads: 屏蔽广告
disable_frosted_glass: 禁用毛玻璃效果
reduce_frosted_glass_blur: 降低毛玻璃模糊强度
auto_hide_topbar: 自动隐藏顶栏
dock_position: Dock 栏位置
dock_position_desc: 在屏幕中摆放位置

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

@@ -37,6 +37,7 @@ settings:
# Settings group
group_common: 通用
group_performance: 效能
group_topbar: 頂欄
group_dock: Dock
group_color: 顏色
@@ -68,6 +69,8 @@ settings:
enable_video_ctrl_bar_on_video_card: 在影片卡片上顯示影片控制欄
hover_video_card_delayed: 將滑鼠懸停在影片卡片上時延遲影片預覽
block_ads: 封鎖廣告
disable_frosted_glass: 停用毛玻璃效果
reduce_frosted_glass_blur: 降低毛玻璃模糊強度
auto_hide_topbar: 自動隱藏頂欄
dock_position: Dock 位置
dock_position_desc: 螢幕上的位置

3
src/_locales/en.yml
View File

@@ -37,6 +37,7 @@ settings:
# Settings group
group_common: Common
group_performance: Performance
group_topbar: Top Bar
group_dock: Dock
group_color: Color
@@ -68,6 +69,8 @@ settings:
enable_video_ctrl_bar_on_video_card: Display the video control bar on the video card
hover_video_card_delayed: Delayed video preview on hover over the video card
block_ads: Block ads
disable_frosted_glass: Disable frosted glass effect
reduce_frosted_glass_blur: Reduce the intensity of the frosted glass blur
auto_hide_topbar: Automatically hide the top bar
dock_position: Dock position
dock_position_desc: Position on screen

3
src/_locales/jyut.yml
View File

@@ -37,6 +37,7 @@ settings:
# Settings group
group_common: 通用
group_performance: 效能
group_topbar: 頂欄
group_dock: Dock
group_color: 顏色
@@ -68,6 +69,8 @@ settings:
enable_video_ctrl_bar_on_video_card: 喺影片卡片上顯示影片控制欄
hover_video_card_delayed: 滑鼠停留喺影片卡片嗰陣遲啲進行影片預覽
block_ads: 封鎖廣告
disable_frosted_glass: 閂咗毛玻璃效果
reduce_frosted_glass_blur: 降低毛玻璃模糊強度
auto_hide_topbar: 自動收埋頂欄
dock_position: Dock 放位
dock_position_desc: 放喺螢幕邊度

2
src/components/Settings/Settings.vue
View File

@@ -158,7 +158,7 @@ function setCurrentTitle() {
<div
class="settings-content"
style="backdrop-filter: blur(40px) saturate(180%);"
style="backdrop-filter: var(--bew-filter-glass-2);"
relative overflow="x-hidde" w-full h-full bg="$bew-elevated-1"
shadow="$bew-shadow-4" rounded="$bew-radius"
>

17
src/components/Settings/components/ChildSettingsDialog.vue
View File

@@ -20,26 +20,19 @@ function handleClose() {
@click="handleClose"
/>
<div
pos="fixed top-1/2 left-1/2" bg="$bew-elevated-solid-1" rounded="$bew-radius"
style="backdrop-filter: var(--bew-filter-glass-2)"
pos="fixed top-1/2 left-1/2" bg="$bew-elevated-1" rounded="$bew-radius"
transform="translate--1/2" z-2 shadow="$bew-shadow-3" overflow="x-hidden y-overlay" w="$b-dialog-width"
h="$b-dialog-height" antialiased
>
<header
style="
text-shadow: 0 0 15px var(--bew-elevated-solid-1), 0 0 20px var(--bew-elevated-solid-1)
"
pos="sticky top-0 left-0" w-full h-80px px-8 flex
items-center justify-between
rounded="t-$bew-radius" z-1
style="
background: linear-gradient(var(--bew-elevated-solid-1), transparent);
text-shadow: 0 0 15px var(--bew-elevated-solid-1), 0 0 20px var(--bew-elevated-solid-1)
"
>
<!-- Mask -->
<div
pos="absolute top-0 left-0" w-inherit h-inherit backdrop="blur-6px" pointer-events-none
style="mask-image: linear-gradient(to bottom, black 70%, transparent);"
z--1 rounded-inherit
/>
<div px-8 w-full pos="absolute left-0" :style="{ textAlign: center ? 'center' : 'left' }">
<p text-xl fw-bold>
{{ title }}

15
src/components/Settings/components/General.vue
View File

@@ -109,10 +109,19 @@ function handleToggleDockItem(dockItem: any) {
</SettingsItem>
</SettingsItemGroup>
<SettingsItemGroup :title="$t('settings.group_performance')">
<SettingsItem :title="$t('settings.disable_frosted_glass')">
<Radio v-model="settings.disableFrostedGlass" />
</SettingsItem>
<SettingsItem
v-if="!settings.disableFrostedGlass"
:title="$t('settings.reduce_frosted_glass_blur')"
>
<Radio v-model="settings.reduceFrostedGlassBlur" />
</SettingsItem>
</SettingsItemGroup>
<SettingsItemGroup :title="$t('settings.group_topbar')">
<!-- <SettingsItem :title="$t('settings.topbar_visibility')" :desc="$t('settings.topbar_visibility_desc')">
<Radio v-model="settings.showTopBar" :label="settings.showTopBar ? $t('settings.chk_box.show') : $t('settings.chk_box.hidden')" />
</SettingsItem> -->
<SettingsItem :title="$t('settings.auto_hide_topbar')">
<Radio v-model="settings.autoHideTopBar" />
</SettingsItem>

7
src/components/TopBar/TopBar.vue
View File

@@ -279,9 +279,12 @@ defineExpose({
<!-- Top bar mask -->
<div
v-if="mask"
pos="absolute top-0 left-0" w-full h-80px backdrop="blur-15px"
style="
mask-image: linear-gradient(to bottom, black 40%, transparent);
backdrop-filter:var(--bew-filter-glass-1)
"
pos="absolute top-0 left-0" w-full h-80px
pointer-events-none
style="mask-image: linear-gradient(to bottom, black 40%, transparent);"
/>
<Transition name="fade">
<div

46
src/contentScripts/views/App.vue
View File

@@ -44,8 +44,6 @@ const isSearchPage = computed(() => {
const isTopBarFixed = computed(() => {
if (
isHomePage()
// // search page
// || /https?:\/\/search.bilibili.com\/.*$/.test(location.href)
// video page
|| /https?:\/\/(www.)?bilibili.com\/(video|list)\/.*/.test(location.href)
// anime playback & movie page
@@ -98,10 +96,20 @@ watch(() => settings.value.blockAds, () => {
handleBlockAds()
})
watch(() => settings.value.disableFrostedGlass, () => {
handleDisableFrostedGlass()
})
watch(() => settings.value.reduceFrostedGlassBlur, () => {
handleReduceFrostedGlassBlur()
})
onBeforeMount(() => {
handleBlockAds()
setAppThemeColor()
handleAdaptToOtherPageStylesChange()
handleBlockAds()
handleDisableFrostedGlass()
handleReduceFrostedGlassBlur()
})
onMounted(() => {
@@ -252,6 +260,38 @@ function handleBlockAds() {
document.documentElement.classList.remove('block-ads')
}
function handleDisableFrostedGlass() {
const bewlyElement = document.querySelector('#bewly') as HTMLElement
if (settings.value.disableFrostedGlass) {
if (bewlyElement)
bewlyElement.classList.add('disable-frosted-glass')
document.documentElement.classList.add('disable-frosted-glass')
}
else {
if (bewlyElement)
bewlyElement.classList.remove('disable-frosted-glass')
document.documentElement.classList.remove('disable-frosted-glass')
}
}
function handleReduceFrostedGlassBlur() {
const bewlyElement = document.querySelector('#bewly') as HTMLElement
if (settings.value.reduceFrostedGlassBlur) {
if (bewlyElement)
bewlyElement.classList.add('reduce-frosted-glass-blur')
document.documentElement.classList.add('reduce-frosted-glass-blur')
}
else {
if (bewlyElement)
bewlyElement.classList.remove('reduce-frosted-glass-blur')
document.documentElement.classList.remove('reduce-frosted-glass-blur')
}
}
// fix #166 https://github.com/hakadao/BewlyBewly/issues/166
// function openVideoPageIfBvidExists() {
// Assume the URL is https://www.bilibili.com/?bvid=BV1be41127ft&spm_id_from=333.788.seo.out

4
src/logic/storage.ts
View File

@@ -15,6 +15,8 @@ export interface Settings {
hoverVideoCardDelayed: boolean
autoHideTopBar: boolean
blockAds: boolean
disableFrostedGlass: boolean
reduceFrostedGlassBlur: boolean
dockPosition: 'left' | 'right' | 'bottom'
autoHideDock: boolean
dockItemVisibilityList: { page: AppPage, visible: boolean }[]
@@ -60,6 +62,8 @@ export const settings = useStorageLocal('settings', ref<Settings>({
dockPosition: 'right',
autoHideDock: false,
blockAds: false,
disableFrostedGlass: false,
reduceFrostedGlassBlur: false,
dockItemVisibilityList: [],
theme: 'auto',

36
src/styles/variables.scss
View File

@@ -5,8 +5,7 @@
--bew-filter-glass-1: blur(20px) saturate(180%);
--bew-filter-glass-2: blur(40px) saturate(180%);
--bew-filter-icon-glow: saturate(0) brightness(2)
drop-shadow(0 0 0.2px white)
--bew-filter-icon-glow: saturate(0) brightness(2) drop-shadow(0 0 0.2px white)
drop-shadow(0 0 0.5px var(--bew-theme-color))
drop-shadow(0 0 0.5px var(--bew-theme-color))
drop-shadow(0 0 0.5px var(--bew-theme-color))
@@ -59,16 +58,16 @@
--bew-success-color-80: rgba(110 231 183 / 0.8);
--bew-success-color-90: rgba(110 231 183 / 0.9);
--bew-warning-color: rgb(250 204 21);
--bew-warning-color-10: rgba(250 204 21 / 0.1);
--bew-warning-color-20: rgba(250 204 21 / 0.2);
--bew-warning-color-30: rgba(250 204 21 / 0.3);
--bew-warning-color-40: rgba(250 204 21 / 0.4);
--bew-warning-color-50: rgba(250 204 21 / 0.5);
--bew-warning-color-60: rgba(250 204 21 / 0.6);
--bew-warning-color-70: rgba(250 204 21 / 0.7);
--bew-warning-color-80: rgba(250 204 21 / 0.8);
--bew-warning-color-90: rgba(250 204 21 / 0.9);
--bew-warning-color: rgb(217 178 22);
--bew-warning-color-10: rgba(217 178 22 / 0.1);
--bew-warning-color-20: rgba(217 178 22 / 0.2);
--bew-warning-color-30: rgba(217 178 22 / 0.3);
--bew-warning-color-40: rgba(217 178 22 / 0.4);
--bew-warning-color-50: rgba(217 178 22 / 0.5);
--bew-warning-color-60: rgba(217 178 22 / 0.6);
--bew-warning-color-70: rgba(217 178 22 / 0.7);
--bew-warning-color-80: rgba(217 178 22 / 0.8);
--bew-warning-color-90: rgba(217 178 22 / 0.9);
--bew-error-color: rgb(219 65 108);
--bew-error-color-10: rgba(219 65 108 / 0.1);
@@ -128,6 +127,19 @@
--bew-page-max-width: 2280px;
}
:host(.disable-frosted-glass),
:root.disable-frosted-glass {
--bew-content-opacity: 1;
--bew-filter-glass-1: none;
--bew-filter-glass-2: none;
}
:host(.reduce-frosted-glass-blur),
:root.reduce-frosted-glass-blur {
--bew-filter-glass-1: blur(10px) saturate(180%);
--bew-filter-glass-2: blur(20px) saturate(180%);
}
:host(.dark),
:root.dark {
// dark mode