Skip to content

Commit

Permalink
feat: fullscreen scrollable
Browse files Browse the repository at this point in the history
  • Loading branch information
@festoney8
festoney8 committed Jun 23, 2024
1 parent 2b75c0c commit 8424ee1
Show file tree
Hide file tree
Showing 3 changed files with 252 additions and 0 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
## 3.7.4

- 修复：动态页 隐藏动态右侧饰品
- 新增：播放页/番剧页 全屏时页面可滚动

## 3.7.3

Expand Down
108 changes: 108 additions & 0 deletions src/rules/bangumi.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,114 @@ if (isPageBangumi()) {
enableFuncRunAt: 'document-end',
disableFunc: async () => document.removeEventListener('wheel', disableAdjustVolume),
}),
// 全屏时 页面可滚动
new CheckboxItem({
itemID: 'fullscreen-scrollable',
description: '全屏时 页面可滚动 滚轮调音量失效\n（实验功能，Firefox 不适用）',
itemCSS: `
body:has(#bilibili-player-wrap[class*='video_playerFullScreen']) {
overflow: auto !important;
position: relative !important;
}
body:has(#bilibili-player-wrap[class*='video_playerFullScreen']) .home-container {
background-color: white;
}
body:has(#bilibili-player-wrap[class*='video_playerFullScreen']) #bilibili-player-wrap {
position: absolute !important;
width: 100vw !important;
height: 100vh !important;
}
body:has(#bilibili-player-wrap[class*='video_playerFullScreen']) .main-container {
position: static !important;
margin: 0 auto !important;
padding-top: calc(100vh + 15px) !important;
}
body:has(#bilibili-player-wrap[class*='video_playerFullScreen']) .bpx-player-video-area {
flex: unset !important;
}
body:has(#bilibili-player-wrap[class*='video_playerFullScreen'])::-webkit-scrollbar {
display: none !important;
}
/* firefox */
@-moz-document url-prefix() {
:is(html, body):has(#bilibili-player-wrap[class*='video_playerFullScreen']) {
scrollbar-width: none !important;
}
}
`,
enableFunc: async () => {
// 在Chrome上可以神奇的禁用滚轮调节音量，Firefox不生效
document.removeEventListener('wheel', disableAdjustVolume)
document.addEventListener('wheel', disableAdjustVolume)

let cnt = 0
const id = setInterval(() => {
const webBtn = document.body.querySelector(
'.bpx-player-ctrl-btn.bpx-player-ctrl-web',
) as HTMLElement
const fullBtn = document.body.querySelector(
'.bpx-player-ctrl-btn.bpx-player-ctrl-full',
) as HTMLElement
if (webBtn && fullBtn) {
clearInterval(id)

const isFullScreen = (): 'ele' | 'f11' | 'not' => {
if (document.fullscreenElement) {
// 由元素申请的全屏
return 'ele'
} else if (window.innerWidth === screen.width && window.innerHeight === screen.height) {
// 用户F11的全屏
return 'f11'
} else {
// 非全屏
return 'not'
}
}

const isWebScreen = (): boolean => {
return webBtn.classList.contains('bpx-state-entered')
}

// 全屏可滚动 = 网页全屏功能 + html/body元素申请全屏
const newFullBtn = fullBtn.cloneNode(true)
newFullBtn.addEventListener('click', () => {
switch (isFullScreen()) {
case 'ele':
if (isWebScreen()) {
// 退出网页全屏，自动退出全屏
webBtn.click()
} else {
document.exitFullscreen().then().catch()
}
break
case 'f11':
// f11全屏模式
if (isWebScreen()) {
webBtn.click()
} else {
webBtn.click()
}
break
case 'not':
// 申请可滚动全屏
document.body.requestFullscreen().then().catch()
if (!isWebScreen()) {
webBtn.click()
}
window.scrollTo(0, 0)
break
}
})
fullBtn.parentElement?.replaceChild(newFullBtn, fullBtn)
} else {
cnt++
cnt > 100 && clearInterval(id)
}
}, 100)
},
enableFuncRunAt: 'document-end',
disableFunc: async () => document.removeEventListener('wheel', disableAdjustVolume),
}),
// 普通播放 视频宽度调节
new NumberItem({
itemID: 'normalscreen-width',
Expand Down
143 changes: 143 additions & 0 deletions src/rules/video.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -259,6 +259,7 @@ if (isPageVideo() || isPagePlaylist()) {
`,
enableFunc: async () => {
// 在Chrome上可以神奇的禁用滚轮调节音量，Firefox不生效
document.removeEventListener('wheel', disableAdjustVolume)
document.addEventListener('wheel', disableAdjustVolume)

// 监听网页全屏按钮出现
Expand All @@ -277,6 +278,148 @@ if (isPageVideo() || isPagePlaylist()) {
enableFuncRunAt: 'document-end',
disableFunc: async () => document.removeEventListener('wheel', disableAdjustVolume),
}),
// 全屏时 页面可滚动
new CheckboxItem({
itemID: 'fullscreen-scrollable',
description: '全屏时 页面可滚动 滚轮调音量失效\n（实验功能，Firefox 不适用）',
itemCSS: `
.webscreen-fix {
position: unset;
top: unset;
left: unset;
margin: unset;
padding: unset;
width: unset;
height: unset;
}
.webscreen-fix #biliMainHeader {
display: none;
}
.webscreen-fix #mirror-vdcon {
box-sizing: content-box;
position: relative;
}
.webscreen-fix #danmukuBox {
margin-top: 0 !important;
}
.webscreen-fix :is(.left-container, .playlist-container--left) {
position: static !important;
padding-top: 100vh;
min-width: 56vw !important;
}
.webscreen-fix :is(.left-container, .playlist-container--left) .video-info-container {
height: fit-content;
}
.webscreen-fix :is(.left-container, .playlist-container--left) #bilibili-player.mode-webscreen {
position: static;
border-radius: unset;
z-index: unset;
left: unset;
top: unset;
width: 100%;
height: 100%;
}
.webscreen-fix :is(.left-container, .playlist-container--left) #playerWrap {
position: absolute;
left: 0;
right: 0;
top: 0;
height: 100vh;
width: 100vw;
padding-right: 0;
}
.webscreen-fix :is(.right-container, .playlist-container--right) {
padding-top: 100vh;
}
/* 隐藏小窗 */
.webscreen-fix .float-nav-exp .nav-menu .item.mini,
.webscreen-fix .fixed-sidenav-storage .mini-player-window {
display: none !important;
}
/* 滚动条 */
.webscreen-fix::-webkit-scrollbar {
display: none !important;
}
/* firefox滚动条 */
@-moz-document url-prefix() {
html:has(.webscreen-fix), body.webscreen-fix {
scrollbar-width: none !important;
}
}
`,
enableFunc: async () => {
// 在Chrome上可以神奇的禁用滚轮调节音量，Firefox不生效
document.removeEventListener('wheel', disableAdjustVolume)
document.addEventListener('wheel', disableAdjustVolume)

let cnt = 0
const id = setInterval(() => {
const webBtn = document.body.querySelector(
'.bpx-player-ctrl-btn.bpx-player-ctrl-web',
) as HTMLElement
const fullBtn = document.body.querySelector(
'.bpx-player-ctrl-btn.bpx-player-ctrl-full',
) as HTMLElement
if (webBtn && fullBtn) {
clearInterval(id)

const isFullScreen = (): 'ele' | 'f11' | 'not' => {
if (document.fullscreenElement) {
// 由元素申请的全屏
return 'ele'
} else if (window.innerWidth === screen.width && window.innerHeight === screen.height) {
// 用户F11的全屏
return 'f11'
} else {
// 非全屏
return 'not'
}
}

const isWebScreen = (): boolean => {
return webBtn.classList.contains('bpx-state-entered')
}

// 全屏可滚动 = 网页全屏功能 + html/body元素申请全屏
const newFullBtn = fullBtn.cloneNode(true)
newFullBtn.addEventListener('click', () => {
switch (isFullScreen()) {
case 'ele':
if (isWebScreen()) {
// 退出网页全屏，自动退出全屏
webBtn.click()
} else {
document.exitFullscreen().then().catch()
}
break
case 'f11':
// f11全屏模式
if (isWebScreen()) {
webBtn.click()
} else {
webBtn.click()
}
break
case 'not':
// 申请可滚动全屏
document.body.requestFullscreen().then().catch()
if (!isWebScreen()) {
webBtn.click()
}
window.scrollTo(0, 0)
break
}
})
fullBtn.parentElement?.replaceChild(newFullBtn, fullBtn)
} else {
cnt++
cnt > 100 && clearInterval(id)
}
}, 100)
},
enableFuncRunAt: 'document-end',
disableFunc: async () => document.removeEventListener('wheel', disableAdjustVolume),
}),
// 播放器和视频标题 交换位置
new CheckboxItem({
itemID: 'video-page-exchange-player-position',
Expand Down

0 comments on commit 8424ee1

Please sign in to comment.