Skip to content

Commit

Permalink
feat: video page mini player position record #84
Browse files Browse the repository at this point in the history
  • Loading branch information
@festoney8
festoney8 committed Jun 22, 2024
1 parent e549bdd commit fd5fa1a
Show file tree
Hide file tree
Showing 4 changed files with 97 additions and 72 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@

- 新增：直播页 隐藏倒计时互动
- 新增：直播页 隐藏发送框粉丝勋章
- 新增：播放页 小窗播放器记录位置
- 优化：直播页 隐藏互动功能改为默认开启
- 优化：直播页 隐藏发送框相关功能样式
- 优化：代码typo更正
Expand Down
12 changes: 12 additions & 0 deletions src/global.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,5 +7,17 @@ export declare global {
aid?: number
bvid?: string
}
player:
| {
__core: () => {
uiStore: {
state: {
miniScreenBottom: number
miniScreenRight: number
}
}
}
}
| undefined
}
}
142 changes: 71 additions & 71 deletions src/rules/video.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -618,23 +618,28 @@ if (isPageVideo() || isPagePlaylist() || isPageFestival()) {
-ms-text-stroke: 3px transparent;
}`,
}),
// 小窗播放器 隐藏底边进度
]
videoGroupList.push(new Group('video-player', '播放器', playerItems))

// 小窗播放器
const miniPlayerItems = [
// 隐藏底边进度
new CheckboxItem({
itemID: 'video-page-hide-bpx-player-mini-mode-process',
description: '小窗播放器 隐藏底边进度',
description: '隐藏底边进度',
defaultStatus: true,
itemCSS: `.bpx-player-container[data-screen=mini]:not(:hover) .bpx-player-mini-progress {display: none;}`,
}),
// 小窗播放器 隐藏弹幕
// 隐藏弹幕
new CheckboxItem({
itemID: 'video-page-hide-bpx-player-mini-mode-danmaku',
description: '小窗播放器 隐藏弹幕',
description: '隐藏弹幕',
itemCSS: `.bpx-player-container[data-screen=mini] .bpx-player-row-dm-wrap {visibility: hidden !important;}`,
}),
// 小窗播放器 滚轮调节大小
// 滚轮调节大小
new CheckboxItem({
itemID: 'video-page-bpx-player-mini-mode-wheel-adjust',
description: '小窗播放器 滚轮调节大小',
description: '滚轮调节大小',
itemFunc: () => {
const adjust = async () => {
try {
Expand Down Expand Up @@ -727,72 +732,67 @@ if (isPageVideo() || isPagePlaylist() || isPageFestival()) {
document.querySelector(`style[bili-cleaner-css=video-page-bpx-player-mini-mode-wheel-adjust]`)?.remove()
},
}),
// // 小窗播放器 记录小窗位置
// new CheckboxItem({
// itemID: 'video-page-bpx-player-mini-mode-position-record',
// description: '小窗播放器 记录小窗位置',
// itemFunc: () => {
// let isListening = false
// const listener = () => {
// waitForEle(document.body, '#bilibili-player .bpx-player-container', (node: HTMLElement) => {
// return node.className.startsWith('bpx-player-container')
// }).then((player) => {
// if (player) {
// const observer = new MutationObserver((mutationsList) => {
// console.log('fired')
// for (const mutation of mutationsList) {
// if (mutation.attributeName === 'data-screen') {
// const target = mutation.target as HTMLElement
// if (
// target instanceof HTMLElement &&
// target.getAttribute('data-screen') === 'mini'
// ) {
// const right = GM_getValue(
// 'BILICLEANER_video-page-bpx-player-mini-mode-position-record-right',
// )
// const bottom = GM_getValue(
// 'BILICLEANER_video-page-bpx-player-mini-mode-position-record-bottom',
// )
// if (right !== undefined && bottom !== undefined) {
// target.style.right = `${right}px`
// target.style.bottom = `${bottom}px`
// }
// // 监听小窗移动
// if (!isListening) {
// isListening = true
// player.addEventListener('mouseleave', () => {
// if (player.getAttribute('data-screen') !== 'mini') {
// return
// }
// GM_setValue(
// 'BILICLEANER_video-page-bpx-player-mini-mode-position-record-right',
// parseInt(player.style.right),
// )
// GM_setValue(
// 'BILICLEANER_video-page-bpx-player-mini-mode-position-record-bottom',
// parseInt(player.style.bottom),
// )
// })
// }
// break
// }
// }
// }
// })
// observer.observe(player, { attributes: true, subtree: false })
// }
// })
// }
// document.readyState === 'complete'
// ? listener()
// : document.addEventListener('DOMContentLoaded', listener)
// },
// callback: () => {
// document.querySelector(`style[bili-cleaner-css=video-page-bpx-player-mini-mode-wheel-adjust]`)?.remove()
// },
// }),
// 记录小窗位置
new CheckboxItem({
itemID: 'video-page-bpx-player-mini-mode-position-record',
description: '记录小窗位置',
itemFunc: () => {
let player: HTMLElement

// 监听mini播放器移动
const addMiniPlayerMoveListener = () => {
if (!player) {
return
}
player.addEventListener('mouseup', () => {
if (player.getAttribute('data-screen') !== 'mini') {
return
}
console.log('store new position', player.style.right, player.style.bottom)
GM_setValue(
'BILICLEANER_video-page-bpx-player-mini-mode-position-record-right',
parseInt(player.style.right),
)
GM_setValue(
'BILICLEANER_video-page-bpx-player-mini-mode-position-record-bottom',
parseInt(player.style.bottom),
)
})
}
// 设置player API内小窗播放器position初始值
const setMiniPlayerState = () => {
const right = GM_getValue('BILICLEANER_video-page-bpx-player-mini-mode-position-record-right')
const bottom = GM_getValue('BILICLEANER_video-page-bpx-player-mini-mode-position-record-bottom')
if (typeof right === 'number' && typeof bottom === 'number') {
if (unsafeWindow.player) {
unsafeWindow.player.__core().uiStore.state.miniScreenRight = right
unsafeWindow.player.__core().uiStore.state.miniScreenBottom = bottom
}
}
}

const listener = () => {
waitForEle(document.body, '#bilibili-player .bpx-player-container', (node: HTMLElement) => {
return node.className.startsWith('bpx-player-container')
}).then((ele) => {
if (ele) {
player = ele
try {
setMiniPlayerState()
addMiniPlayerMoveListener()
} catch {
// err
}
}
})
}
document.readyState === 'complete'
? listener()
: document.addEventListener('DOMContentLoaded', listener)
},
}),
]
videoGroupList.push(new Group('video-player', '播放器', playerItems))
videoGroupList.push(new Group('video-mini-player', '小窗播放器', miniPlayerItems))

// 播放控制
const playerControlItems = [
Expand Down
14 changes: 13 additions & 1 deletion src/utils/tool.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,18 @@
const bvidPattern = /(BV[1-9A-HJ-NP-Za-km-z]+)/
// export const debounce = <T extends (...args: any[]) => void>(
// func: T,
// wait: number,
// ): ((...args: Parameters<T>) => void) => {
// let timeout: ReturnType<typeof setTimeout>
// return (...args: Parameters<T>): void => {
// clearTimeout(timeout)
// timeout = setTimeout(() => {
// func(...args)
// }, wait)
// }
// }

// 匹配BV号
const bvidPattern = /(BV[1-9A-HJ-NP-Za-km-z]+)/
export const matchBvid = (s: string): string | null => {
const match = bvidPattern.exec(s)
if (match && match.length >= 2) {
Expand Down

0 comments on commit fd5fa1a

Please sign in to comment.