From c081cff0bd4654bed27c75ca81fdd12c61944748 Mon Sep 17 00:00:00 2001 From: festoney8 Date: Sun, 3 Nov 2024 02:55:34 +0800 Subject: [PATCH 1/5] update: video page normalscreen width (#165) --- .../rules/video/groups/playerLayout.scss | 112 +++++++++++------- vite.config.ts | 2 +- 2 files changed, 69 insertions(+), 45 deletions(-) diff --git a/src/modules/rules/video/groups/playerLayout.scss b/src/modules/rules/video/groups/playerLayout.scss index 7f6c7c7..d2f6c22 100644 --- 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 不调节任何宽度 } diff --git a/vite.config.ts b/vite.config.ts index a3b2b16..59078ea 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -19,7 +19,7 @@ export default defineConfig({ userscript: { name: 'bilibili 页面净化大师', namespace: 'http://tampermonkey.net/', - version: '4.0.5', + version: '4.0.6', description: '净化 B站/哔哩哔哩 页面，支持「精简功能、播放器净化、过滤视频、过滤评论、全站黑白名单」，提供 300+ 功能，定制自己的 B 站', author: 'festoney8', From 9972f8ba1e01bb3794740486d570dc2c8c8bf825 Mon Sep 17 00:00:00 2001 From: festoney8 Date: Sun, 3 Nov 2024 04:25:34 +0800 Subject: [PATCH 2/5] chore: fix typo, update changelog --- CHANGELOG.md | 5 +++++ src/modules/rules/homepage/groups/layout.ts | 4 ++++ 2 files changed, 9 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 73d6cc7..983710f 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,10 @@ # CHANGELOG +## 4.0.6 + +- 更新：播放页 播放器宽度调节相关样式 +- 修复：首页 功能细节 + ## 4.0.5 - 新增：动态内容关键词过滤 diff --git a/src/modules/rules/homepage/groups/layout.ts b/src/modules/rules/homepage/groups/layout.ts index cf4d1dd..20958f3 100644 --- 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 列布局', + }, ], }, { From 787b3fb13d90e75f9639752df672e01c1052dd76 Mon Sep 17 00:00:00 2001 From: festoney8 Date: Sun, 3 Nov 2024 05:10:50 +0800 Subject: [PATCH 3/5] update: item comp debounce --- CHANGELOG.md | 2 +- src/components/items/NumberComp.vue | 63 ++++++++++++++++------------- src/components/items/StringComp.vue | 53 +++++++++++++----------- 3 files changed, 64 insertions(+), 54 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 983710f..30ec890 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,7 +3,7 @@ ## 4.0.6 - 更新：播放页 播放器宽度调节相关样式 -- 修复：首页 功能细节 +- 更新：部分功能细节 ## 4.0.5 diff --git a/src/components/items/NumberComp.vue b/src/components/items/NumberComp.vue index 4a9aaa5..3edc1ae 100644 --- a/src/components/items/NumberComp.vue +++ b/src/components/items/NumberComp.vue @@ -14,7 +14,8 @@ diff --git a/src/components/items/StringComp.vue b/src/components/items/StringComp.vue index 153d0f7..23ce887 100644 --- a/src/components/items/StringComp.vue +++ b/src/components/items/StringComp.vue @@ -12,39 +12,44 @@ From b4fff84293bd197a76e836f7f3bea3bbed355ffd Mon Sep 17 00:00:00 2001 From: festoney8 Date: Sun, 3 Nov 2024 08:54:46 +0800 Subject: [PATCH 4/5] update: webscreen scrollable support firefox --- CHANGELOG.md | 1 + .../rules/bangumi/groups/playerLayout.ts | 25 ++++++------ .../rules/video/groups/playerLayout.ts | 40 ++++++++++++++----- 3 files changed, 44 insertions(+), 22 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 30ec890..b7f585d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ ## 4.0.6 - 更新：播放页 播放器宽度调节相关样式 +- 更新：播放页 网页全屏滚动支持Firefox - 更新：部分功能细节 ## 4.0.5 diff --git a/src/modules/rules/bangumi/groups/playerLayout.ts b/src/modules/rules/bangumi/groups/playerLayout.ts index 347ee93..b18c23e 100644 --- a/src/modules/rules/bangumi/groups/playerLayout.ts +++ b/src/modules/rules/bangumi/groups/playerLayout.ts @@ -2,22 +2,19 @@ import { unsafeWindow } from '$' import { Item } from '../../../../types/item' import { isFirefox, 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,7 +64,10 @@ export const bangumiPlayerLayoutItems: Item[] = [ } }) }, - disableFn: enableTuneVolume, + disableFn: () => { + enableTuneVolume() + webScroll = false + }, enableFnRunAt: 'document-end', }, { @@ -81,7 +80,6 @@ export const bangumiPlayerLayoutItems: Item[] = [ return } - // 禁用滚动调音量 disableTuneVolume() fullScroll = true @@ -142,7 +140,10 @@ export const bangumiPlayerLayoutItems: Item[] = [ } }, 200) }, - disableFn: enableTuneVolume, + disableFn: () => { + enableTuneVolume() + fullScroll = false + }, enableFnRunAt: 'document-end', }, { diff --git a/src/modules/rules/video/groups/playerLayout.ts b/src/modules/rules/video/groups/playerLayout.ts index 3208c0d..5b68828 100644 --- a/src/modules/rules/video/groups/playerLayout.ts +++ b/src/modules/rules/video/groups/playerLayout.ts @@ -3,7 +3,22 @@ import { Item } from '../../../../types/item' import { isFirefox, waitForEle } from '../../../../utils/tool' import { wideScreenManager } from '../../../../utils/widePlayer' -const disableAdjustVolume = () => {} +// 禁用滚动调音量 +let webScroll = false +let fullScroll = false +const fn = (event: Event) => event.stopImmediatePropagation() +const disableTuneVolume = () => { + if (!webScroll && !fullScroll) { + window.addEventListener('mousewheel', fn, { capture: true }) + window.addEventListener('DOMMouseScroll', fn, { capture: true }) + } +} +const enableTuneVolume = () => { + if (!(webScroll && fullScroll)) { + window.removeEventListener('mousewheel', fn, { capture: true }) + window.removeEventListener('DOMMouseScroll', fn, { capture: true }) + } +} export const videoPlayerLayoutItems: Item[] = [ { @@ -32,11 +47,10 @@ export const videoPlayerLayoutItems: Item[] = [ type: 'switch', id: 'webscreen-scrollable', name: '网页全屏时 页面可滚动', - description: ['播放器内滚轮调节音量失效', 'Firefox 不适用'], + description: ['播放器内滚轮调节音量失效'], enableFn: async () => { - // 禁用滚动调音量, firefox不生效 - document.removeEventListener('wheel', disableAdjustVolume) - document.addEventListener('wheel', disableAdjustVolume) + disableTuneVolume() + webScroll = true // 监听网页全屏按钮出现 waitForEle(document.body, '.bpx-player-ctrl-web', (node: HTMLElement): boolean => { @@ -51,7 +65,10 @@ export const videoPlayerLayoutItems: Item[] = [ } }) }, - disableFn: async () => document.removeEventListener('wheel', disableAdjustVolume), + disableFn: () => { + enableTuneVolume() + webScroll = false + }, enableFnRunAt: 'document-end', }, { @@ -63,9 +80,9 @@ export const videoPlayerLayoutItems: Item[] = [ if (isFirefox()) { return } - // 禁用滚动调音量 - document.removeEventListener('wheel', disableAdjustVolume) - document.addEventListener('wheel', disableAdjustVolume) + + disableTuneVolume() + fullScroll = true let cnt = 0 const id = setInterval(() => { @@ -124,7 +141,10 @@ export const videoPlayerLayoutItems: Item[] = [ } }, 200) }, - disableFn: async () => document.removeEventListener('wheel', disableAdjustVolume), + disableFn: () => { + enableTuneVolume() + fullScroll = false + }, enableFnRunAt: 'document-end', }, { From 9ca8351cf3bca2bee3d831e75df2535f8811f32f Mon Sep 17 00:00:00 2001 From: festoney8 Date: Sun, 3 Nov 2024 09:11:53 +0800 Subject: [PATCH 5/5] update: fullscreen scrollable support firefox --- CHANGELOG.md | 2 +- src/modules/rules/bangumi/groups/playerLayout.ts | 8 ++------ src/modules/rules/video/groups/playerLayout.ts | 8 ++------ 3 files changed, 5 insertions(+), 13 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b7f585d..8579688 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,7 +3,7 @@ ## 4.0.6 - 更新：播放页 播放器宽度调节相关样式 -- 更新：播放页 网页全屏滚动支持Firefox +- 更新：播放页 网页全屏滚动、全屏滚动 支持Firefox - 更新：部分功能细节 ## 4.0.5 diff --git a/src/modules/rules/bangumi/groups/playerLayout.ts b/src/modules/rules/bangumi/groups/playerLayout.ts index b18c23e..6b3e36d 100644 --- a/src/modules/rules/bangumi/groups/playerLayout.ts +++ b/src/modules/rules/bangumi/groups/playerLayout.ts @@ -1,6 +1,6 @@ import { unsafeWindow } from '$' import { Item } from '../../../../types/item' -import { isFirefox, waitForEle } from '../../../../utils/tool' +import { waitForEle } from '../../../../utils/tool' let webScroll = false let fullScroll = false @@ -74,12 +74,8 @@ export const bangumiPlayerLayoutItems: Item[] = [ type: 'switch', id: 'fullscreen-scrollable', name: '全屏时 页面可滚动 (实验功能)', - description: ['播放器内滚轮调节音量失效', '点击全屏按钮生效，双击全屏无效', 'Firefox 不适用'], + description: ['播放器内滚轮调节音量失效', '点击全屏按钮生效，双击全屏无效'], enableFn: async () => { - if (isFirefox()) { - return - } - disableTuneVolume() fullScroll = true diff --git a/src/modules/rules/video/groups/playerLayout.ts b/src/modules/rules/video/groups/playerLayout.ts index 5b68828..befe442 100644 --- a/src/modules/rules/video/groups/playerLayout.ts +++ b/src/modules/rules/video/groups/playerLayout.ts @@ -1,6 +1,6 @@ import { unsafeWindow } from '$' import { Item } from '../../../../types/item' -import { isFirefox, waitForEle } from '../../../../utils/tool' +import { waitForEle } from '../../../../utils/tool' import { wideScreenManager } from '../../../../utils/widePlayer' // 禁用滚动调音量 @@ -75,12 +75,8 @@ export const videoPlayerLayoutItems: Item[] = [ type: 'switch', id: 'fullscreen-scrollable', name: '全屏时 页面可滚动 (实验功能)', - description: ['播放器内滚轮调节音量失效', '点击全屏按钮时生效，双击全屏无效', 'Firefox 不适用'], + description: ['播放器内滚轮调节音量失效', '点击全屏按钮时生效，双击全屏无效'], enableFn: async () => { - if (isFirefox()) { - return - } - disableTuneVolume() fullScroll = true