From 61219fb92c143c70d8b9f003655b3cab1566e38c Mon Sep 17 00:00:00 2001 From: the1812 Date: Sat, 22 Apr 2023 16:54:32 +0800 Subject: [PATCH] Add invertScrollVolume (#4053) --- .../player/disable-scroll-volume/index.md | 2 +- .../player/disable-scroll-volume/index.ts | 15 +++-- .../player/invert-scroll-volume/index.md | 5 ++ .../player/invert-scroll-volume/index.ts | 58 +++++++++++++++++++ 4 files changed, 74 insertions(+), 6 deletions(-) create mode 100644 registry/lib/components/video/player/invert-scroll-volume/index.md create mode 100644 registry/lib/components/video/player/invert-scroll-volume/index.ts diff --git a/registry/lib/components/video/player/disable-scroll-volume/index.md b/registry/lib/components/video/player/disable-scroll-volume/index.md index 99b638ce0..003ac149d 100644 --- a/registry/lib/components/video/player/disable-scroll-volume/index.md +++ b/registry/lib/components/video/player/disable-scroll-volume/index.md @@ -1 +1 @@ -在网页全屏 / 全屏模式下, 禁止鼠标滚轮控制播放器的音量. \ No newline at end of file +在网页全屏 / 全屏模式下, 禁止鼠标滚轮控制播放器的音量. 请注意不能和 `反转滚轮调音量` 一同使用. diff --git a/registry/lib/components/video/player/disable-scroll-volume/index.ts b/registry/lib/components/video/player/disable-scroll-volume/index.ts index eb8852216..1ee413487 100644 --- a/registry/lib/components/video/player/disable-scroll-volume/index.ts +++ b/registry/lib/components/video/player/disable-scroll-volume/index.ts @@ -2,9 +2,8 @@ import { defineComponentMetadata } from '@/components/define' import { preventEvent } from '@/core/utils' let cancel: () => void -const prevent = () => { - cancel?.() - cancel = preventEvent(unsafeWindow, 'mousewheel', () => { +export const disableScrollVolume = () => { + return preventEvent(unsafeWindow, 'mousewheel', () => { const isFullscreen = [ 'player-mode-webfullscreen', 'player-fullscreen-fix', @@ -17,8 +16,14 @@ export const component = defineComponentMetadata({ name: 'disableScrollVolume', displayName: '禁止滚轮调音量', tags: [componentsTags.video], - entry: prevent, - reload: prevent, + entry: () => { + cancel?.() + cancel = disableScrollVolume() + }, + reload: () => { + cancel?.() + cancel = disableScrollVolume() + }, unload: () => { cancel?.() }, diff --git a/registry/lib/components/video/player/invert-scroll-volume/index.md b/registry/lib/components/video/player/invert-scroll-volume/index.md new file mode 100644 index 000000000..560c3df64 --- /dev/null +++ b/registry/lib/components/video/player/invert-scroll-volume/index.md @@ -0,0 +1,5 @@ +反转在网页全屏 / 全屏模式下使用滚轮调节音量的方向, 使其更符合使用触控板时的操作方向. 请注意不能和 `禁止滚轮调音量` 一同使用. + +- 手指向上推时, 增加音量 +- 手指向下推时, 减少音量 +- 可以自定义 `灵敏度`, 同样的滚动幅度下, 灵敏度越高变化的音量越多 \ No newline at end of file diff --git a/registry/lib/components/video/player/invert-scroll-volume/index.ts b/registry/lib/components/video/player/invert-scroll-volume/index.ts new file mode 100644 index 000000000..56d9afd23 --- /dev/null +++ b/registry/lib/components/video/player/invert-scroll-volume/index.ts @@ -0,0 +1,58 @@ +import { + OptionsOfMetadata, + defineComponentMetadata, + defineOptionsMetadata, +} from '@/components/define' +import { disableScrollVolume } from '../disable-scroll-volume' +import { playerAgent } from '@/components/video/player-agent' +import { getComponentSettings } from '@/core/settings' + +let cancel: () => void + +const MaxDeltaFactor = 30 +const options = defineOptionsMetadata({ + deltaFactor: { + defaultValue: 15, + slider: { + min: 1, + max: MaxDeltaFactor, + step: 1, + }, + displayName: '灵敏度', + }, +}) +const invertScrollVolume = () => { + cancel?.() + const settings = getComponentSettings>('invertScrollVolume') + const handleWheel = (e: WheelEvent) => { + const isFullscreen = [ + 'player-mode-webfullscreen', + 'player-fullscreen-fix', + 'player-full-win', + ].some(token => document.body.classList.contains(token)) + if (isFullscreen) { + playerAgent.changeVolume(e.deltaY / ((MaxDeltaFactor - settings.options.deltaFactor + 1) / 2)) + } + } + unsafeWindow.addEventListener('wheel', handleWheel) + const cancelPrevent = disableScrollVolume() + return () => { + unsafeWindow.removeEventListener('wheel', handleWheel) + cancelPrevent() + } +} +export const component = defineComponentMetadata({ + name: 'invertScrollVolume', + displayName: '反转滚轮调音量', + tags: [componentsTags.video], + options, + entry: () => { + cancel?.() + cancel = invertScrollVolume() + }, + reload: () => { + cancel?.() + cancel = invertScrollVolume() + }, + unload: () => cancel?.(), +})