feat: 播放器置顶功能根据播放器模式动态修改样式

- 监听全局事件playerModeChange 并修改样式
- 为什么不用静态CSS:弹幕列表的marginTop在不同宽度设备是不同的,具体规则并不确定,需要用JS即时获取
- https://github.com/the1812/Bilibili-Evolved/discussions/4178
This commit is contained in:
ZiuChen 2023-05-10 14:24:46 +08:00
parent 0c93abff65
commit 0942adc888

View File

@ -1,4 +1,5 @@
import { defineComponentMetadata } from '@/components/define'
import { playerModeChange } from '@/components/video/player-adaptor'
import { getComponentSettings, addComponentListener } from '@/core/settings'
import { playerReady, getNumberValidator } from '@/core/utils'
import { videoUrls } from '@/core/utils/urls'
@ -17,20 +18,46 @@ function moveElementAfter(element: Element, after: Element) {
parent.insertBefore(element, after.nextSibling)
}
/**
*
* UP信息与弹幕列表样式
*/
function sideEffect() {
const author = document.querySelector('.up-panel-container') as HTMLDivElement
const danmuku = document.querySelector('#danmukuBox') as HTMLDivElement
// 弹幕列表的 marginTop 是动态的 需要即时获取
let marginTop = '' // 记录弹幕列表原始marginTop
const updateMarginTop = lodash.once(() => {
console.log('updateMarginTop')
marginTop = getComputedStyle(danmuku).marginTop
})
// 监听播放器宽屏模式 调整UP信息与弹幕列表样式
window.addEventListener('playerModeChange', (ev: ReturnType<typeof playerModeChange>) => {
const { mode } = ev.detail
if (mode === 'wide') {
updateMarginTop()
danmuku.style.marginTop = '0px'
author.style.marginTop = marginTop
} else {
// 恢复原始样式
author.style.marginTop = '0px'
}
})
}
/**
*
*
*/
const playerOnTop = async ({ settings: { options: opt }, metadata }) => {
async function playerOnTop({ settings: { options: opt }, metadata }) {
await playerReady()
const title = document.querySelector('#viewbox_report')
const toolbar = document.querySelector('#arc_toolbar_report')
moveElementAfter(title, toolbar)
const author = document.querySelector('#v_upinfo').parentElement
const danmuku = document.querySelector('#danmukuBox')
moveElementAfter(author, danmuku)
const player = document.querySelector('#playerWrap') as HTMLDivElement
player.style.marginTop = `${opt.marginTop}px`
@ -38,6 +65,8 @@ const playerOnTop = async ({ settings: { options: opt }, metadata }) => {
addComponentListener(`${metadata.name}.marginTop`, (value: number) => {
player.style.marginTop = `${value}px`
})
sideEffect()
}
export const component = defineComponentMetadata({