Skip to content

Commit

Permalink
feat: video page right container sticky bottom #87 #88
Browse files Browse the repository at this point in the history
  • Loading branch information
@festoney8
festoney8 committed Jun 18, 2024
1 parent 6af52a1 commit a8603ec
Show file tree
Hide file tree
Showing 2 changed files with 99 additions and 31 deletions.
2 changes: 2 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@
- 新增：顶栏右侧收藏按钮弹出框，自动选中稍后再看
- 新增：动态页 淡化/隐藏已查看过动态的UP主
- 新增：番剧页 普通播放模式宽度调节
- 新增：播放页 修复/禁用右栏底部吸附
- 修复：播放页 右栏宽度异常
- 优化：重写URL净化、BV号转AV号功能
- 优化：去除播放页网址跳变问题
- 优化：减少URL变化对浏览器历史记录的影响
Expand Down
128 changes: 97 additions & 31 deletions src/rules/video.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,16 +170,6 @@ if (isPageVideo() || isPagePlaylist()) {
html[bili-cleaner-is-wide] #playerWrap:has(.bpx-player-container[data-screen="mini"]) {
width: fit-content;
}
/* 修复右栏底部吸附计算top时位置跳变 */
.video-container-v1 .right-container {
display: flex;
}
.video-container-v1 .right-container .right-container-inner {
position: sticky !important;
top: unset !important;
bottom: 0 !important;
align-self: flex-end !important;
}
`,
itemFunc: () => {
wideScreenLock = true
Expand Down Expand Up @@ -255,19 +245,11 @@ if (isPageVideo() || isPagePlaylist()) {
.webscreen-fix :is(.right-container, .playlist-container--right) {
padding-top: 100vh;
}
/* 底部吸附 */
.webscreen-fix .right-container {
display: flex;
}
.webscreen-fix :is(.right-container-inner, .playlist-container--right) {
position: sticky;
bottom: 0;
align-self: flex-end;
}
/* 滚动条 */
.webscreen-fix::-webkit-scrollbar {
display: none !important;
}
/* firefox */
/* firefox滚动条 */
@-moz-document url-prefix() {
html:has(.webscreen-fix), body.webscreen-fix {
scrollbar-width: none !important;
Expand Down Expand Up @@ -412,17 +394,6 @@ if (isPageVideo() || isPagePlaylist()) {
height: calc(100% - 46px);
background-color: black;
}
/* 修复右栏底部吸附计算top时位置跳变 */
.video-container-v1 .right-container {
display: flex;
}
.video-container-v1 .right-container .right-container-inner {
position: sticky !important;
top: unset !important;
bottom: 0 !important;
align-self: flex-end !important;
}
`,
itemCSSPlaceholder: '???',
}),
Expand Down Expand Up @@ -751,6 +722,70 @@ 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()
// },
// }),
]
videoGroupList.push(new Group('video-player', '播放器', playerItems))

Expand Down Expand Up @@ -1187,6 +1222,37 @@ if (isPageVideo() || isPagePlaylist()) {

// 右侧视频栏
const rightItems = [
// 优化 右栏底部吸附 实验功能
new CheckboxItem({
itemID: 'video-page-right-container-sticky-optimize',
description: '优化 右栏底部吸附 (实验功能)',
itemCSS: `
/* 修复右栏底部吸附计算top时位置跳变 */
.video-container-v1 .right-container {
display: flex !important;
}
.video-container-v1 .right-container .right-container-inner {
position: sticky !important;
top: unset !important;
align-self: flex-end !important;
/* fix #87 */
max-width: 100% !important;
}
/* 小窗播放器挡住下方视频 #88 */
body:has(.mini-player-window.on) .video-container-v1 .right-container .right-container-inner {
bottom: 230px !important;
}
body:has(.mini-player-window:not(.on)) .video-container-v1 .right-container .right-container-inner {
bottom: 0 !important;
}
`,
}),
// 禁用 滚动页面时右栏底部吸附
new CheckboxItem({
itemID: 'video-page-right-container-sticky-disable',
description: '禁用 右栏底部吸附',
itemCSS: `.right-container .right-container-inner {position: static !important;}`,
}),
// 隐藏 广告, 默认开启
new CheckboxItem({
itemID: 'video-page-hide-right-container-ad',
Expand Down

0 comments on commit a8603ec

Please sign in to comment.