import { ComponentMetadata } from '@/components/types' 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: ComponentMetadata = { name: 'doubleClickControl', displayName: '启用双击控制', description: { 'zh-CN': '将视频播放器的操作方式更改为: 单击显示 / 隐藏控制栏, 双击播放 / 暂停.', }, tags: [ componentsTags.touch, ], enabledByDefault: navigator.maxTouchPoints > 0, urlInclude: playerUrls, entry, }