mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
feat: 播放器置顶功能根据播放器模式动态修改样式
- 监听全局事件playerModeChange 并修改样式 - 为什么不用静态CSS:弹幕列表的marginTop在不同宽度设备是不同的,具体规则并不确定,需要用JS即时获取 - https://github.com/the1812/Bilibili-Evolved/discussions/4178
This commit is contained in:
parent
0c93abff65
commit
0942adc888
@ -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({
|
||||
|
||||
Loading…
Reference in New Issue
Block a user