mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
60 lines
1.5 KiB
TypeScript
60 lines
1.5 KiB
TypeScript
import { ComponentEntry } from '@/components/types'
|
|
import {
|
|
defineComponentMetadata,
|
|
defineOptionsMetadata,
|
|
OptionsOfMetadata,
|
|
} from '@/components/define'
|
|
import { playerUrls } from '@/core/utils/urls'
|
|
|
|
const options = defineOptionsMetadata({
|
|
opacity: {
|
|
displayName: '不透明度(%)',
|
|
defaultValue: 64,
|
|
slider: {},
|
|
},
|
|
includeProgress: {
|
|
displayName: '包括进度条',
|
|
defaultValue: true,
|
|
},
|
|
})
|
|
|
|
export type Options = OptionsOfMetadata<typeof options>
|
|
|
|
const entry: ComponentEntry<Options> = async ({ metadata }) => {
|
|
const { addComponentListener } = await import('@/core/settings')
|
|
addComponentListener(
|
|
`${metadata.name}.includeProgress`,
|
|
(value: boolean) => {
|
|
document.body.classList.toggle('video-control-progress-background', value)
|
|
},
|
|
true,
|
|
)
|
|
addComponentListener(
|
|
`${metadata.name}.opacity`,
|
|
lodash.debounce((value: number) => {
|
|
document.documentElement.style.setProperty(
|
|
'--video-control-opacity',
|
|
(value / 100).toString(),
|
|
)
|
|
}, 200),
|
|
true,
|
|
)
|
|
}
|
|
export const component = defineComponentMetadata({
|
|
name: 'playerControlBackground',
|
|
displayName: '播放器控制栏背景色',
|
|
tags: [componentsTags.video, componentsTags.style],
|
|
description: {
|
|
'zh-CN': '给视频播放器控制栏附上半透明的黑色, 代替原来的阴影.',
|
|
},
|
|
entry,
|
|
instantStyles: [
|
|
{
|
|
name: 'playerControlBackground',
|
|
style: () => import('./control-background.scss'),
|
|
},
|
|
],
|
|
urlInclude: playerUrls,
|
|
options,
|
|
})
|