Add invertScrollVolume (#4053)

This commit is contained in:
the1812 2023-04-22 16:54:32 +08:00
parent 20579bc77d
commit 61219fb92c
4 changed files with 74 additions and 6 deletions

View File

@ -1 +1 @@
在网页全屏 / 全屏模式下, 禁止鼠标滚轮控制播放器的音量.
在网页全屏 / 全屏模式下, 禁止鼠标滚轮控制播放器的音量. 请注意不能和 `反转滚轮调音量` 一同使用.

View File

@ -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?.()
},

View File

@ -0,0 +1,5 @@
反转在网页全屏 / 全屏模式下使用滚轮调节音量的方向, 使其更符合使用触控板时的操作方向. 请注意不能和 `禁止滚轮调音量` 一同使用.
- 手指向上推时, 增加音量
- 手指向下推时, 减少音量
- 可以自定义 `灵敏度`, 同样的滚动幅度下, 灵敏度越高变化的音量越多

View File

@ -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<OptionsOfMetadata<typeof options>>('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?.(),
})