Merge pull request #4188 from ZiuChen/preview-fixes

fix: 修正播放器模式切换时 body类名响应问题
This commit is contained in:
Grant Howard 2023-05-10 20:32:50 +08:00 committed by GitHub
commit e3f53afa88
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 13 additions and 12 deletions

View File

@ -5,11 +5,9 @@ let cancel: () => void
const prevent = () => { const prevent = () => {
cancel?.() cancel?.()
cancel = preventEvent(unsafeWindow, 'mousewheel', () => { cancel = preventEvent(unsafeWindow, 'mousewheel', () => {
const isFullscreen = [ const isFullscreen = ['player-mode-full', 'player-fullscreen-fix', 'player-full-win'].some(
'player-mode-webfullscreen', token => document.body.classList.contains(token),
'player-fullscreen-fix', )
'player-full-win',
].some(token => document.body.classList.contains(token))
return isFullscreen return isFullscreen
}) })
} }

View File

@ -11,11 +11,14 @@ const playerModePolyfill = async () => {
} }
attributes(bpxContainer, () => { attributes(bpxContainer, () => {
const dataScreen = bpxContainer.getAttribute('data-screen') const dataScreen = bpxContainer.getAttribute('data-screen')
document.body.classList.toggle( const prefix = 'player-mode-'
'player-mode-webfullscreen', const enumList = ['normal', 'wide', 'web', 'full'].map(it => `${prefix}${it}`)
dataScreen === 'full' || dataScreen === 'web',
) // clear all class
dataScreen === 'wide' ? document.body.classList.add('player-mode-widescreen') : '' document.body.classList.remove(...enumList)
// add class
document.body.classList.add(dataScreen !== 'normal' ? `${prefix}${dataScreen}` : '')
}) })
} }
const idPolyfill = async () => { const idPolyfill = async () => {

View File

@ -145,8 +145,8 @@
left: 50%; left: 50%;
transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%);
} }
@mixin on-fullscreen($bodyClass: "*") { @mixin on-fullscreen($bodyClass: '*') {
#{selector-unify("body.player-mode-webfullscreen", $bodyClass)} &, #{selector-unify("body.player-mode-full", $bodyClass)} &,
#{selector-unify("body.player-fullscreen-fix", $bodyClass)} &, #{selector-unify("body.player-fullscreen-fix", $bodyClass)} &,
#{selector-unify("body.player-full-win", $bodyClass)} & { #{selector-unify("body.player-full-win", $bodyClass)} & {
@content; @content;