merge dev to main, v4.0.6 (#170)

festoney8 · Nov 3, 2024 · 7c72861 · 7c72861
2 parents a84ce9e + 9ca8351
commit 7c72861
Show file tree

Hide file tree

Showing 8 changed files with 188 additions and 131 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## 4.0.6
+
+-   更新：播放页 播放器宽度调节相关样式
+-   更新：播放页 网页全屏滚动、全屏滚动 支持Firefox
+-   更新：部分功能细节
+
 ## 4.0.5
 
 -   新增：动态内容关键词过滤

diff --git a/src/components/items/NumberComp.vue b/src/components/items/NumberComp.vue
@@ -14,7 +14,8 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { watchDebounced } from '@vueuse/core'
+import { ref } from 'vue'
 import { INumberItem } from '../../types/item'
 import { error } from '../../utils/logger'
 import { BiliCleanerStorage } from '../../utils/storage'
@@ -24,36 +25,40 @@ const item = defineProps<INumberItem>()
 
 const currValue = ref(BiliCleanerStorage.get(item.id, item.defaultValue))
 
-watch(currValue, (newValue, oldValue) => {
-    try {
-        if (newValue > item.maxValue) {
-            currValue.value = item.maxValue
-        }
-        if (newValue < item.minValue) {
-            currValue.value = item.minValue
-        }
+watchDebounced(
+    currValue,
+    (newValue, oldValue) => {
+        try {
+            if (newValue > item.maxValue) {
+                currValue.value = item.maxValue
+            }
+            if (newValue < item.minValue) {
+                currValue.value = item.minValue
+            }
 
-        // 样式生效、失效
-        if (oldValue === item.disableValue) {
-            if (!item.noStyle) {
-                document.documentElement.setAttribute(item.attrName ?? item.id, '')
+            // 样式生效、失效
+            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)
+            if (newValue === item.disableValue) {
+                if (!item.noStyle) {
+                    document.documentElement.removeAttribute(item.attrName ?? item.id)
+                }
+            } else if (currValue.value !== oldValue) {
+                item
+                    .fn(currValue.value)
+                    ?.then()
+                    .catch((err) => {
+                        throw err
+                    })
             }
-        } else if (currValue.value !== oldValue) {
-            item
-                .fn(currValue.value)
-                ?.then()
-                .catch((err) => {
-                    throw err
-                })
+            BiliCleanerStorage.set<number>(item.id, currValue.value)
+        } catch (err) {
+            error(`NumberComp ${item.id} error`, err)
         }
-        BiliCleanerStorage.set<number>(item.id, currValue.value)
-    } catch (err) {
-        error(`NumberComp ${item.id} error`, err)
-    }
-})
+    },
+    { debounce: 100 },
+)
 </script>
diff --git a/src/components/items/StringComp.vue b/src/components/items/StringComp.vue
@@ -12,39 +12,44 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
+import { watchDebounced } from '@vueuse/core'
+import { ref } from 'vue'
 import { IStringItem } from '../../types/item'
 import { error } from '../../utils/logger'
-import DescriptionComp from './DescriptionComp.vue'
 import { BiliCleanerStorage } from '../../utils/storage'
+import DescriptionComp from './DescriptionComp.vue'
 
 const item = defineProps<IStringItem>()
 
 const currValue = ref(BiliCleanerStorage.get(item.id, item.defaultValue))
 
-watch(currValue, (newValue, oldValue) => {
-    try {
-        // 样式生效、失效
-        if (oldValue === item.disableValue) {
-            if (!item.noStyle) {
-                document.documentElement.setAttribute(item.attrName ?? item.id, '')
+watchDebounced(
+    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)
+            if (newValue === item.disableValue) {
+                if (!item.noStyle) {
+                    document.documentElement.removeAttribute(item.attrName ?? item.id)
+                }
+            } else if (currValue.value !== oldValue) {
+                item
+                    .fn(currValue.value)
+                    ?.then()
+                    .catch((err) => {
+                        throw err
+                    })
             }
-        } else if (currValue.value !== oldValue) {
-            item
-                .fn(currValue.value)
-                ?.then()
-                .catch((err) => {
-                    throw err
-                })
+            BiliCleanerStorage.set<string>(item.id, currValue.value)
+        } catch (err) {
+            error(`StringComp ${item.id} error`, err)
         }
-        BiliCleanerStorage.set<string>(item.id, currValue.value)
-    } catch (err) {
-        error(`StringComp ${item.id} error`, err)
-    }
-})
+    },
+    { debounce: 100 },
+)
 </script>
diff --git a/src/modules/rules/bangumi/groups/playerLayout.ts b/src/modules/rules/bangumi/groups/playerLayout.ts
@@ -1,23 +1,20 @@
 import { unsafeWindow } from '$'
 import { Item } from '../../../../types/item'
-import { isFirefox, waitForEle } from '../../../../utils/tool'
+import { waitForEle } from '../../../../utils/tool'
 
-/**
- * Firefox DOMMouseScroll无法被stopImmediatePropagation
- */
 let webScroll = false
 let fullScroll = false
-const fn = () => (event: Event) => event.stopImmediatePropagation()
+const fn = (event: Event) => event.stopImmediatePropagation()
 const disableTuneVolume = () => {
     if (!webScroll && !fullScroll) {
         window.addEventListener('mousewheel', fn, { capture: true })
-        // window.addEventListener('DOMMouseScroll', fn, { capture: true })
+        window.addEventListener('DOMMouseScroll', fn, { capture: true })
     }
 }
 const enableTuneVolume = () => {
     if (!(webScroll && fullScroll)) {
-        window.removeEventListener('mousewheel', fn)
-        // window.removeEventListener('DOMMouseScroll', fn)
+        window.removeEventListener('mousewheel', fn, { capture: true })
+        window.removeEventListener('DOMMouseScroll', fn, { capture: true })
     }
 }
 
@@ -49,9 +46,8 @@ export const bangumiPlayerLayoutItems: Item[] = [
         type: 'switch',
         id: 'webscreen-scrollable',
         name: '网页全屏时 页面可滚动',
-        description: ['播放器内滚轮调节音量失效', 'Firefox 不适用'],
+        description: ['播放器内滚轮调节音量失效'],
         enableFn: async () => {
-            // 禁用滚动调音量
             disableTuneVolume()
             webScroll = true
 
@@ -68,20 +64,18 @@ export const bangumiPlayerLayoutItems: Item[] = [
                 }
             })
         },
-        disableFn: enableTuneVolume,
+        disableFn: () => {
+            enableTuneVolume()
+            webScroll = false
+        },
         enableFnRunAt: 'document-end',
     },
     {
         type: 'switch',
         id: 'fullscreen-scrollable',
         name: '全屏时 页面可滚动 (实验功能)',
-        description: ['播放器内滚轮调节音量失效', '点击全屏按钮生效，双击全屏无效', 'Firefox 不适用'],
+        description: ['播放器内滚轮调节音量失效', '点击全屏按钮生效，双击全屏无效'],
         enableFn: async () => {
-            if (isFirefox()) {
-                return
-            }
-
-            // 禁用滚动调音量
             disableTuneVolume()
             fullScroll = true
 
@@ -142,7 +136,10 @@ export const bangumiPlayerLayoutItems: Item[] = [
                 }
             }, 200)
         },
-        disableFn: enableTuneVolume,
+        disableFn: () => {
+            enableTuneVolume()
+            fullScroll = false
+        },
         enableFnRunAt: 'document-end',
     },
     {

diff --git a/src/modules/rules/homepage/groups/layout.ts b/src/modules/rules/homepage/groups/layout.ts
@@ -21,6 +21,10 @@ export const homepageLayoutItems: Item[] = [
                 id: 'homepage-layout-5-column',
                 name: '5 列布局',
             },
+            {
+                id: 'homepage-layout-6-column',
+                name: '6 列布局',
+            },
         ],
     },
     {

diff --git a/src/modules/rules/video/groups/playerLayout.scss b/src/modules/rules/video/groups/playerLayout.scss
@@ -30,7 +30,6 @@ html[webscreen-scrollable] {
     .webscreen-fix :is(.left-container, .playlist-container--left) {
         position: static !important;
         padding-top: 100vh;
-        min-width: 56vw !important;
     }
     .webscreen-fix :is(.left-container, .playlist-container--left) .video-info-container {
         height: fit-content;
@@ -107,7 +106,6 @@ html[fullscreen-scrollable] {
     .webscreen-fix :is(.left-container, .playlist-container--left) {
         position: static !important;
         padding-top: 100vh;
-        min-width: 56vw !important;
     }
     .webscreen-fix :is(.left-container, .playlist-container--left) .video-info-container {
         height: fit-content;
@@ -200,48 +198,74 @@ html[video-page-exchange-player-position] {
 
 // 普通播放 视频宽度调节
 html[normalscreen-width] {
-    /*
-        需避免右侧视频预览 inline player 影响
-        data-screen变化慢, 播放模式判断一律用:not(), 使用html元素的player-is-wide加快wide模式判断
-    */
-
-    // 左列宽度
-    &:not([player-is-wide])
-        :is(.left-container, .playlist-container--left):has(
-            .bpx-player-container:not([data-screen='wide'], [data-screen='web'], [data-screen='full'])
+    $normal-width: min(calc(100vw - 400px), var(--normalscreen-width));
+
+    // normal 调节评论宽度、播放器宽度，data-screen未赋值时按normal处理
+    &:not([player-is-wide]):has(
+            #bilibili-player [data-screen='normal'],
+            #bilibili-player .bpx-player-container:not([data-screen])
         ) {
-        flex-basis: min(calc(100vw - 400px), var(--normalscreen-width)) !important;
-    }
-
-    // 播放器长宽
-    &:not([player-is-wide])
-        :is(.left-container, .playlist-container--left):has(
-            .bpx-player-container:not(
-                    [data-screen='wide'],
-                    [data-screen='web'],
-                    [data-screen='full'],
-                    [data-screen='mini']
-                )
-        )
-        :is(.bpx-player-video-area, video) {
-        width: 100% !important;
-        height: unset !important;
-        aspect-ratio: 16 / 9 !important;
-    }
-
-    // 播放器外层
-    &:not([player-is-wide])
-        :is(.left-container, .playlist-container--left):has(
-            .bpx-player-container:not(
-                    [data-screen='wide'],
-                    [data-screen='web'],
-                    [data-screen='full'],
-                    [data-screen='mini']
-                )
-        )
-        :is(.bpx-player-primary-area, .bpx-player-container, .bpx-docker-major, #bilibili-player, #playerWrap) {
-        width: min(calc(100vw - 400px), var(--normalscreen-width)) !important;
-        height: unset !important;
-        min-height: calc(min(calc(100vw - 400px), var(--normalscreen-width)) * 9 / 16) !important;
+        #playerWrap {
+            height: fit-content !important;
+
+            // placeholder
+            #bilibili-player-placeholder-top {
+                width: $normal-width !important;
+                aspect-ratio: 16 / 9 !important;
+            }
+
+            // player
+            #bilibili-player {
+                width: $normal-width !important;
+                height: fit-content;
+                .bpx-player-video-area {
+                    width: $normal-width !important;
+                    aspect-ratio: 16 / 9 !important;
+                }
+            }
+        }
+
+        // comment
+        .left-container,
+        .playlist-container--left {
+            width: min(calc(100vw - 400px), var(--normalscreen-width)) !important;
+        }
     }
+
+    // web + full 全屏滚动时调节评论宽度
+    &:has(#bilibili-player :is([data-screen='web'], [data-screen='full'])) {
+        .left-container,
+        .playlist-container--left {
+            width: min(calc(100vw - 400px), var(--normalscreen-width)) !important;
+        }
+    }
+
+    // mini 仅normal mini模式下调节宽度
+    &:not([player-is-wide]):has(#bilibili-player [data-screen='mini']) {
+        .left-container,
+        .playlist-container--left {
+            width: min(calc(100vw - 400px), var(--normalscreen-width)) !important;
+        }
+
+        // 高度填充
+        #playerWrap {
+            width: $normal-width !important;
+            height: fit-content !important;
+            #bilibili-player-placeholder {
+                position: static;
+                width: $normal-width !important;
+                height: fit-content !important;
+                #bilibili-player-placeholder-top {
+                    width: $normal-width !important;
+                    aspect-ratio: 16 / 9 !important;
+                }
+            }
+            #bilibili-player {
+                width: $normal-width !important;
+                height: fit-content !important;
+            }
+        }
+    }
+
+    // wide 不调节任何宽度
 }