From 750cb6cec4e5a2836d6d412748c11e22493a185c Mon Sep 17 00:00:00 2001 From: Hakadao Date: Sun, 20 Oct 2024 23:10:52 +0800 Subject: [PATCH] feat(settings): override danmaku font --- src/_locales/cmn-CN.yml | 3 ++ src/_locales/cmn-TW.yml | 3 ++ src/_locales/en.yml | 3 ++ src/_locales/jyut.yml | 3 ++ src/components/Settings/General/General.vue | 3 ++ .../views/necessarySettingsWatchers.ts | 32 +++++++++++++++++++ src/logic/storage.ts | 2 ++ 7 files changed, 49 insertions(+) diff --git a/src/_locales/cmn-CN.yml b/src/_locales/cmn-CN.yml index 08d64e57..71dc43db 100644 --- a/src/_locales/cmn-CN.yml +++ b/src/_locales/cmn-CN.yml @@ -113,6 +113,9 @@ settings: customize_font_desc: |- 对于喜欢旧字形的用户，我们推荐 Shanggu Fonts (尚古字型) 和 Fan Wun Hak (繁媛黑體)。 这些字形还具有将简体中文转换为繁体/正体中文的能力。 + override_danmaku_font: 覆盖弹幕字体 + override_danmaku_font_desc: > + 设置弹幕字体为您的自定义字体以覆盖默认设置。之后视频播放器将无法更改它。 remove_the_indent_from_chinese_punctuation: 移除中文标点符号的缩进 remove_the_indent_from_chinese_punctuation_desc: > Bilibili 默认会专门处理中文标点符号以实现左对齐。 diff --git a/src/_locales/cmn-TW.yml b/src/_locales/cmn-TW.yml index ccefa28d..4bbb82ca 100644 --- a/src/_locales/cmn-TW.yml +++ b/src/_locales/cmn-TW.yml @@ -113,6 +113,9 @@ settings: customize_font_desc: |- 對於喜歡舊字形的用戶，我們推薦 Shanggu Fonts (尚古字型) 和 Fan Wun Hak (繁媛黑體)。 這些字型還具有將簡體中文轉換為繁體/正體中文的能力。 + override_danmaku_font: 覆蓋彈幕字型 + override_danmaku_font_desc: > + 設定彈幕字型為您的自訂字型以覆蓋預設值。影片播放器將無法在之後更改彈幕字型。 remove_the_indent_from_chinese_punctuation: 移除中文標點符號的縮排 remove_the_indent_from_chinese_punctuation_desc: > Bilibili 預設會特別處理中文標點符號以達到左對齊。 diff --git a/src/_locales/en.yml b/src/_locales/en.yml index 3c346dd6..c604489c 100644 --- a/src/_locales/en.yml +++ b/src/_locales/en.yml @@ -113,6 +113,9 @@ settings: customize_font_desc: |- For users who favor the traditional style of Chinese characters, we recommend Shanggu Fonts (尚古字體) and Fan Wun Hak (繁媛黑體). These fonts also possess the capability to convert simplified Chinese into traditional characters. + override_danmaku_font: Override danmaku font + override_danmaku_font_desc: > + Set the danmaku font to your customized font to override the default. The video player won't be able to change it afterwards. remove_the_indent_from_chinese_punctuation: Remove the indent from Chinese punctuation remove_the_indent_from_chinese_punctuation_desc: > By default, Bilibili will specifically handle Chinese punctuation to achieve left alignment. diff --git a/src/_locales/jyut.yml b/src/_locales/jyut.yml index eec05864..242b9d0b 100644 --- a/src/_locales/jyut.yml +++ b/src/_locales/jyut.yml @@ -113,6 +113,9 @@ settings: customize_font_desc: |- 對於舊字形嘅用戶，我哋推介 Shanggu Fonts (尚古字型) 同 Fan Wun Hak (繁媛黑體)。 呢啲字型仲可以將簡體中文轉做繁體/正體中文。 + override_danmaku_font: 覆蓋彈幕字型 + override_danmaku_font_desc: > + 設定彈幕字型做你嘅自訂字型覆蓋預設值。影片播放器之後唔得改彈幕字型。 remove_the_indent_from_chinese_punctuation: 移除中文標點符號嘅縮排 remove_the_indent_from_chinese_punctuation_desc: > Bilibili 預設會專登執吓中文標點符號，令到佢可以左對齊。如果你係用緊自訂字字型，最好係移除縮排。 diff --git a/src/components/Settings/General/General.vue b/src/components/Settings/General/General.vue index 70d210c0..283d1dac 100644 --- a/src/components/Settings/General/General.vue +++ b/src/components/Settings/General/General.vue @@ -98,6 +98,9 @@ watch(() => settings.value.language, (newValue) => { + + + diff --git a/src/contentScripts/views/necessarySettingsWatchers.ts b/src/contentScripts/views/necessarySettingsWatchers.ts index 929f804a..fbb1743e 100644 --- a/src/contentScripts/views/necessarySettingsWatchers.ts +++ b/src/contentScripts/views/necessarySettingsWatchers.ts @@ -67,6 +67,38 @@ export function setupNecessarySettingsWatchers() { { immediate: true }, ) + let danmakuFontStyleEl: HTMLStyleElement | null = null + watch( + () => settings.value.overrideDanmakuFont, + () => { + let fallbackFontFamily = '' + if (locale.value === LanguageType.Mandarin_CN) { + fallbackFontFamily = 'var(--bew-fonts-mandarin-cn)' + } + else if (locale.value === LanguageType.Mandarin_TW) { + fallbackFontFamily = 'var(--bew-fonts-mandarin-tw)' + } + else if (locale.value === LanguageType.Cantonese) { + fallbackFontFamily = 'var(--bew-fonts-cantonese)' + } + else { + fallbackFontFamily = 'var(--bew-fonts-english)' + } + + if (settings.value.overrideDanmakuFont) { + danmakuFontStyleEl = injectCSS(` + .bili-danmaku-x-dm { + font-family: var(--bew-font-family, ${fallbackFontFamily}) !important; + } + `) + } + else { + danmakuFontStyleEl?.remove() + } + }, + { immediate: true }, + ) + const removeTheIndentFromChinesePunctuationStyleEl = injectCSS(` .video-info-container .special-text-indent[data-title^='《'], .video-info-container .special-text-indent[data-title^='「'], diff --git a/src/logic/storage.ts b/src/logic/storage.ts index 666fbe9b..30a55f91 100644 --- a/src/logic/storage.ts +++ b/src/logic/storage.ts @@ -14,6 +14,7 @@ export interface Settings { language: string customizeFont: boolean fontFamily: string + overrideDanmakuFont: boolean removeTheIndentFromChinesePunctuation: boolean disableFrostedGlass: boolean reduceFrostedGlassBlur: boolean @@ -101,6 +102,7 @@ export const originalSettings: Settings = { language: '', customizeFont: false, fontFamily: '', + overrideDanmakuFont: true, removeTheIndentFromChinesePunctuation: false, disableFrostedGlass: true,