Bilibili-Evolved/registry/lib/components/touch/double-click-control/index.ts
2022-10-12 23:27:58 +08:00

39 lines
1.4 KiB
TypeScript

import { defineComponentMetadata } from '@/components/define'
import { playerAgent } from '@/components/video/player-agent'
import { videoChange } from '@/core/observer'
import { addStyle } from '@/core/style'
import { playerUrls } from '@/core/utils/urls'
import touchStyles from './double-click-control.scss'
const entry = async () => {
addStyle(touchStyles)
const disableOriginalHover = 'disable-original-hover'
const touchHover = 'touch-video-control-show'
videoChange(async () => {
const playerArea = await playerAgent.query.playerArea()
if (playerArea.classList.contains(disableOriginalHover)) {
return
}
playerArea.classList.add(disableOriginalHover)
const videoWrapper = playerAgent.query.video.container.sync()
const { DoubleClickEvent } = await import('@/core/utils')
const doubleClickEvent = new DoubleClickEvent(() => playerAgent.togglePlay(), true)
doubleClickEvent.singleClickHandler = () => {
playerArea.classList.toggle(touchHover)
}
doubleClickEvent.bind(videoWrapper)
})
}
export const component = defineComponentMetadata({
name: 'doubleClickControl',
displayName: '启用双击控制',
description: {
'zh-CN':
'将视频播放器的操作方式更改为: 单击显示 / 隐藏控制栏, 双击播放 / 暂停. 请注意不能和 `双击全屏` 一同使用.',
},
tags: [componentsTags.touch],
enabledByDefault: navigator.maxTouchPoints > 0,
urlInclude: playerUrls,
entry,
})