feat: add video page subtitle items

festoney8 · Oct 2, 2024 · 2bf3873 · 2bf3873
1 parent 3f5bb1b
commit 2bf3873
Show file tree

Hide file tree

Showing 17 changed files with 212 additions and 41 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="text-base">
         <RulePanelView></RulePanelView>
         <VideoFilterPanelView></VideoFilterPanelView>
         <CommentFilterPanelView></CommentFilterPanelView>

diff --git a/src/components/items/DescriptionComp.vue b/src/components/items/DescriptionComp.vue
@@ -2,7 +2,7 @@
     <div v-if="description?.length" class="mb-1.5">
         <div class="text-sm leading-6 text-orange-900">
             <div v-for="(line, index) in description" :key="index">
-                <p><span class="mr-2">•</span>{{ line }}</p>
+                <p><span class="mr-1">•</span>{{ line }}</p>
             </div>
         </div>
     </div>

diff --git a/src/components/items/NumberComp.vue b/src/components/items/NumberComp.vue
@@ -3,6 +3,7 @@
         <div>{{ name }}</div>
         <input
             type="number"
+            step="0.01"
             v-model="currValue"
             class="ml-auto block w-1/5 rounded-lg border border-gray-300 bg-white px-2.5 py-1.5 text-sm outline-none invalid:border-red-500 focus:border-gray-500 focus:invalid:border-red-500"
         />

diff --git a/src/components/items/StringComp.vue b/src/components/items/StringComp.vue
@@ -0,0 +1,50 @@
+<template>
+    <div class="mb-0.5 mt-1 flex items-center py-1 text-black">
+        <div>{{ name }}</div>
+        <input
+            type="text"
+            v-model="currValue"
+            class="ml-4 block flex-1 rounded-md border border-gray-300 bg-white p-1.5 text-sm outline-none invalid:border-red-500 focus:border-gray-500 focus:invalid:border-red-500"
+        />
+    </div>
+    <DescriptionComp v-if="description?.length" :description="description"></DescriptionComp>
+</template>
+
+<script setup lang="ts">
+import { GM_getValue, GM_setValue } from '$'
+import { ref, watch } from 'vue'
+import { IStringItem } from '../../types/item'
+import { error } from '../../utils/logger'
+import DescriptionComp from './DescriptionComp.vue'
+
+const item = defineProps<IStringItem>()
+
+const currValue = ref(GM_getValue(item.id, item.defaultValue))
+
+watch(currValue, (newValue, oldValue) => {
+    try {
+        // 样式生效、失效
+        if (oldValue === item.disableValue) {
+            if (!item.noStyle) {
+                document.documentElement.setAttribute(item.attrName ?? item.id, '')
+            }
+        }
+        if (newValue === item.disableValue) {
+            if (!item.noStyle) {
+                document.documentElement.removeAttribute(item.attrName ?? item.id)
+            }
+        } else if (currValue.value !== oldValue) {
+            console.log(newValue, oldValue)
+            item
+                .fn(currValue.value)
+                ?.then()
+                .catch((err) => {
+                    throw err
+                })
+        }
+        GM_setValue(item.id, currValue.value)
+    } catch (err) {
+        error(`string item ${item.id} error`, err)
+    }
+})
+</script>
diff --git a/src/modules/rules/index.ts b/src/modules/rules/index.ts
@@ -25,7 +25,7 @@ import { spaceGroups } from './space'
 import { videoGroups } from './video'
 
 import { GM_getValue } from '$'
-import { IListItem, INumberItem, ISwitchItem } from '../../types/item'
+import { IListItem, INumberItem, IStringItem, ISwitchItem } from '../../types/item'
 import { error } from '../../utils/logger'
 import bangumiStyle from './bangumi/index.scss?inline'
 import channelStyle from './channel/index.scss?inline'
@@ -134,9 +134,12 @@ export const loadRules = () => {
                             case 'list':
                                 loadListItem(item)
                                 break
+                            case 'string':
+                                loadStringItem(item)
+                                break
                         }
                     } catch (err) {
-                        error(`load item failed, type=${item.type}, name=${item.name}`, err)
+                        error(`load item failed, type=${item.type}, name=${item.name}, id=${item.id}`, err)
                     }
                 }
             }
@@ -147,11 +150,15 @@ export const loadRules = () => {
 /** 载入css, 注入在html节点下, 需在head节点出现后(html节点可插入时)执行 */
 export const loadStyles = () => {
     for (const rule of rules) {
-        if (rule.checkFn() && rule.style) {
-            const style = document.createElement('style')
-            style.className = 'bili-cleaner-css'
-            style.textContent = rule.style
-            document.documentElement?.appendChild(style)
+        try {
+            if (rule.checkFn() && rule.style) {
+                const style = document.createElement('style')
+                style.className = 'bili-cleaner-css'
+                style.textContent = rule.style
+                document.documentElement?.appendChild(style)
+            }
+        } catch (err) {
+            error(`loadStyles error, name=${rule.name}`, err)
         }
     }
 }
@@ -184,6 +191,16 @@ const loadNumberItem = (item: INumberItem) => {
     }
 }
 
+const loadStringItem = (item: IStringItem) => {
+    const value = GM_getValue(item.id, item.defaultValue)
+    if (value !== item.disableValue) {
+        if (!item.noStyle) {
+            document.documentElement.setAttribute(item.attrName ?? item.id, '')
+        }
+        item.fn(value)?.then().catch()
+    }
+}
+
 const loadListItem = (item: IListItem) => {
     const value = GM_getValue(item.id, item.defaultValue)
     if (value !== item.disableValue) {

diff --git a/src/modules/rules/video/groups/player.scss b/src/modules/rules/video/groups/player.scss
@@ -186,23 +186,3 @@ html[video-page-bpx-player-bili-dm-vip-white] {
         -ms-text-stroke: none !important;
     }
 }
-
-// CC字幕 字体优化 (实验性)
-html[video-page-bpx-player-subtitle-font-family] {
-    #bilibili-player .bpx-player-subtitle-panel-text {
-        font-family: inherit;
-    }
-}
-
-// CC字幕 字体描边 (实验性)
-html[video-page-bpx-player-subtitle-text-stroke] {
-    #bilibili-player .bpx-player-subtitle-panel-text {
-        background: unset !important;
-        background-color: rgb(0 0 0 / 0.7) !important;
-        background-clip: text !important;
-        text-shadow: none !important;
-        -webkit-text-stroke: 3px transparent;
-        -moz-text-stroke: 3px transparent;
-        -ms-text-stroke: 3px transparent;
-    }
-}
diff --git a/src/modules/rules/video/groups/player.ts b/src/modules/rules/video/groups/player.ts
@@ -104,14 +104,4 @@ export const videoPlayerItems: Item[] = [
         id: 'video-page-bpx-player-bili-dm-vip-white',
         name: '彩色渐变弹幕 变成白色',
     },
-    {
-        type: 'switch',
-        id: 'video-page-bpx-player-subtitle-font-family',
-        name: 'CC字幕 字体优化 (实验性)',
-    },
-    {
-        type: 'switch',
-        id: 'video-page-bpx-player-subtitle-text-stroke',
-        name: 'CC字幕 字体描边 (实验性)',
-    },
 ]
diff --git a/src/modules/rules/video/groups/subtitle.scss b/src/modules/rules/video/groups/subtitle.scss
@@ -0,0 +1,36 @@
+// 字幕颜色
+html[video-page-subtitle-font-color] {
+    .bpx-player-subtitle-panel-text {
+        color: var(--video-page-subtitle-font-color) !important;
+    }
+}
+
+// 字体设定
+html[video-page-subtitle-font-family] {
+    .bpx-player-subtitle-panel-text {
+        font-family: var(--video-page-subtitle-font-family) !important;
+    }
+}
+
+// 描边颜色
+html[video-page-subtitle-text-stroke-color] {
+    .bpx-player-subtitle-panel-text {
+        background: unset !important;
+        background-color: var(--video-page-subtitle-text-stroke-color) !important;
+        background-clip: text !important;
+    }
+}
+
+// 描边宽度
+html[video-page-subtitle-text-stroke-width] {
+    .bpx-player-container:where([data-screen='normal'], [data-screen='wide']) .bpx-player-subtitle-panel-text {
+        -webkit-text-stroke: calc(0.6 * var(--video-page-subtitle-text-stroke-width)) transparent !important;
+        -moz-text-stroke: calc(0.6 * var(--video-page-subtitle-text-stroke-width)) transparent !important;
+        -ms-text-stroke: calc(0.6 * var(--video-page-subtitle-text-stroke-width)) transparent !important;
+    }
+    .bpx-player-container:where([data-screen='web'], [data-screen='full']) .bpx-player-subtitle-panel-text {
+        -webkit-text-stroke: var(--video-page-subtitle-text-stroke-width) transparent !important;
+        -moz-text-stroke: var(--video-page-subtitle-text-stroke-width) transparent !important;
+        -ms-text-stroke: var(--video-page-subtitle-text-stroke-width) transparent !important;
+    }
+}
diff --git a/src/modules/rules/video/groups/subtitle.ts b/src/modules/rules/video/groups/subtitle.ts
@@ -0,0 +1,50 @@
+import { Item } from '../../../../types/item'
+
+export const videoSubtitleItems: Item[] = [
+    {
+        type: 'string',
+        id: 'video-page-subtitle-font-color',
+        name: '字幕颜色',
+        description: ['遵循 CSS 的 color 语法，留空为禁用'],
+        defaultValue: '',
+        disableValue: '',
+        fn: (value: string) => {
+            document.documentElement.style.setProperty('--video-page-subtitle-font-color', value)
+        },
+    },
+    {
+        type: 'string',
+        id: 'video-page-subtitle-font-family',
+        name: '字体设定',
+        description: ['遵循 CSS 的 font-family 语法，留空为禁用', '请确保本地已安装字体，检查家族名是否正确'],
+        defaultValue: 'PingFang SC,HarmonyOS_Regular,Helvetica Neue,Microsoft YaHei,sans-serif',
+        disableValue: '',
+        fn: (value: string) => {
+            document.documentElement.style.setProperty('--video-page-subtitle-font-family', value)
+        },
+    },
+    {
+        type: 'string',
+        id: 'video-page-subtitle-text-stroke-color',
+        name: '描边颜色',
+        description: ['遵循 CSS 的 color 语法，留空为禁用', '会覆盖官方字幕设定'],
+        defaultValue: '#444',
+        disableValue: '',
+        fn: (value: string) => {
+            document.documentElement.style.setProperty('--video-page-subtitle-text-stroke-color', value)
+        },
+    },
+    {
+        type: 'number',
+        id: 'video-page-subtitle-text-stroke-width',
+        name: '描边宽度 (0为禁用)',
+        minValue: 0,
+        maxValue: 10,
+        defaultValue: 4,
+        disableValue: 0,
+        addonText: 'px',
+        fn: (value: number) => {
+            document.documentElement.style.setProperty('--video-page-subtitle-text-stroke-width', `${value}px`)
+        },
+    },
+]
diff --git a/src/modules/rules/video/index.scss b/src/modules/rules/video/index.scss
@@ -3,6 +3,7 @@
 @use './groups/info';
 @use './groups/miniPlayer';
 @use './groups/player';
+@use './groups/subtitle';
 @use './groups/playerControl';
 @use './groups/playerLayout';
 @use './groups/right';

diff --git a/src/modules/rules/video/index.ts b/src/modules/rules/video/index.ts
@@ -8,6 +8,7 @@ import { videoPlayerControlItems } from './groups/playerControl'
 import { videoPlayerLayoutItems } from './groups/playerLayout'
 import { videoRightItems } from './groups/right'
 import { videoSidebarItems } from './groups/sidebar'
+import { videoSubtitleItems } from './groups/subtitle'
 import { videoToolbarItems } from './groups/toolbar'
 import { videoUpInfoItems } from './groups/upInfo'
 
@@ -28,6 +29,10 @@ export const videoGroups: Group[] = [
         name: '播放器',
         items: videoPlayerItems,
     },
+    {
+        name: 'CC 字幕',
+        items: videoSubtitleItems,
+    },
     {
         name: '播放控制栏',
         items: videoPlayerControlItems,

diff --git a/src/types/item.d.ts b/src/types/item.d.ts
@@ -1,4 +1,4 @@
-export type Item = ISwitchItem | INumberItem | IListItem | IEditorItem
+export type Item = ISwitchItem | INumberItem | IListItem | IEditorItem | IStringItem
 
 interface IBaseItem {
     type: 'switch' | 'number' | 'radio' | 'editor'
@@ -85,6 +85,39 @@ export interface INumberItem extends IBaseItem {
     fn: (value: number) => Promise<void> | void
 }
 
+// 文本设定功能
+export interface IStringItem extends IBaseItem {
+    // 功能类型
+    type: 'string'
+
+    // item id, 与GM key对应，记录当前功能值
+    id: string
+
+    // 功能名
+    name: string
+
+    // 功能补充介绍，每个string显示为一行
+    description?: string[]
+
+    // 默认值
+    defaultValue: string
+
+    // 禁用值
+    disableValue: string
+
+    // 是否无样式
+    noStyle?: boolean
+
+    // 在html节点注册用attribute名，控制样式是否生效，缺省时默认使用id
+    attrName?: string
+
+    /**
+     * 值生效/值变动时触发函数
+     * @param value 当前内容
+     */
+    fn: (value: string) => Promise<void> | void
+}
+
 // 单选功能
 export interface IListItem extends IBaseItem {
     // item类型

diff --git a/src/views/CommentFilterPanelView.vue b/src/views/CommentFilterPanelView.vue
@@ -15,6 +15,7 @@
                 <div v-for="(item, innerIndex) in group.items" :key="innerIndex">
                     <SwitchComp v-if="item.type === 'switch'" v-bind="item"></SwitchComp>
                     <NumberComp v-else-if="item.type === 'number'" v-bind="item"></NumberComp>
+                    <StringComp v-else-if="item.type === 'string'" v-bind="item"></StringComp>
                     <EditorComp v-else-if="item.type === 'editor'" v-bind="item"></EditorComp>
                     <ListComp v-else-if="item.type === 'list'" v-bind="item"></ListComp>
                 </div>
@@ -28,6 +29,7 @@ import DisclosureComp from '../components/DisclosureComp.vue'
 import EditorComp from '../components/items/EditorComp.vue'
 import ListComp from '../components/items/ListComp.vue'
 import NumberComp from '../components/items/NumberComp.vue'
+import StringComp from '../components/items/StringComp.vue'
 import SwitchComp from '../components/items/SwitchComp.vue'
 import PanelComp from '../components/PanelComp.vue'
 import { commentFilters } from '../modules/filters'

diff --git a/src/views/ContextMenuView.vue b/src/views/ContextMenuView.vue
@@ -1,7 +1,7 @@
 <template>
     <div
         v-if="show"
-        class="fixed z-50 block cursor-pointer overflow-hidden rounded-md bg-white font-[15px] text-black shadow-lg shadow-black/20"
+        class="fixed z-50 block cursor-pointer overflow-hidden rounded-md bg-white text-base text-black shadow-lg shadow-black/20"
         :style="{ left: pos.left + 'px', top: pos.top + 'px' }"
     >
         <div v-for="(menu, index) in menuList" :key="index">

diff --git a/src/views/DynamicFilterPanelView.vue b/src/views/DynamicFilterPanelView.vue
@@ -15,6 +15,7 @@
                 <div v-for="(item, innerIndex) in group.items" :key="innerIndex">
                     <SwitchComp v-if="item.type === 'switch'" v-bind="item"></SwitchComp>
                     <NumberComp v-else-if="item.type === 'number'" v-bind="item"></NumberComp>
+                    <StringComp v-else-if="item.type === 'string'" v-bind="item"></StringComp>
                     <EditorComp v-else-if="item.type === 'editor'" v-bind="item"></EditorComp>
                     <ListComp v-else-if="item.type === 'list'" v-bind="item"></ListComp>
                 </div>
@@ -28,6 +29,7 @@ import DisclosureComp from '../components/DisclosureComp.vue'
 import EditorComp from '../components/items/EditorComp.vue'
 import ListComp from '../components/items/ListComp.vue'
 import NumberComp from '../components/items/NumberComp.vue'
+import StringComp from '../components/items/StringComp.vue'
 import SwitchComp from '../components/items/SwitchComp.vue'
 import PanelComp from '../components/PanelComp.vue'
 import { dynamicFilters } from '../modules/filters'

diff --git a/src/views/RulePanelView.vue b/src/views/RulePanelView.vue
@@ -9,6 +9,7 @@
                 <div v-for="(item, innerIndex) in group.items" :key="innerIndex">
                     <SwitchComp v-if="item.type === 'switch'" v-bind="item"></SwitchComp>
                     <NumberComp v-else-if="item.type === 'number'" v-bind="item"></NumberComp>
+                    <StringComp v-else-if="item.type === 'string'" v-bind="item"></StringComp>
                     <EditorComp v-else-if="item.type === 'editor'" v-bind="item"></EditorComp>
                     <ListComp v-else-if="item.type === 'list'" v-bind="item"></ListComp>
                 </div>
@@ -22,6 +23,7 @@ import DisclosureComp from '../components/DisclosureComp.vue'
 import EditorComp from '../components/items/EditorComp.vue'
 import ListComp from '../components/items/ListComp.vue'
 import NumberComp from '../components/items/NumberComp.vue'
+import StringComp from '../components/items/StringComp.vue'
 import SwitchComp from '../components/items/SwitchComp.vue'
 import PanelComp from '../components/PanelComp.vue'
 import { rules } from '../modules/rules'