diff --git a/registry/lib/components/video/player/disable-scroll-volume/index.ts b/registry/lib/components/video/player/disable-scroll-volume/index.ts index eb8852216..c653544d8 100644 --- a/registry/lib/components/video/player/disable-scroll-volume/index.ts +++ b/registry/lib/components/video/player/disable-scroll-volume/index.ts @@ -5,11 +5,9 @@ let cancel: () => void const prevent = () => { cancel?.() cancel = preventEvent(unsafeWindow, 'mousewheel', () => { - const isFullscreen = [ - 'player-mode-webfullscreen', - 'player-fullscreen-fix', - 'player-full-win', - ].some(token => document.body.classList.contains(token)) + const isFullscreen = ['player-mode-full', 'player-fullscreen-fix', 'player-full-win'].some( + token => document.body.classList.contains(token), + ) return isFullscreen }) } diff --git a/src/components/video/player-adaptor/bpx.ts b/src/components/video/player-adaptor/bpx.ts index 5ba6c5790..d95ff9d4e 100644 --- a/src/components/video/player-adaptor/bpx.ts +++ b/src/components/video/player-adaptor/bpx.ts @@ -11,11 +11,14 @@ const playerModePolyfill = async () => { } attributes(bpxContainer, () => { const dataScreen = bpxContainer.getAttribute('data-screen') - document.body.classList.toggle( - 'player-mode-webfullscreen', - dataScreen === 'full' || dataScreen === 'web', - ) - dataScreen === 'wide' ? document.body.classList.add('player-mode-widescreen') : '' + const prefix = 'player-mode-' + const enumList = ['normal', 'wide', 'web', 'full'].map(it => `${prefix}${it}`) + + // clear all class + document.body.classList.remove(...enumList) + + // add class + document.body.classList.add(dataScreen !== 'normal' ? `${prefix}${dataScreen}` : '') }) } const idPolyfill = async () => { diff --git a/src/ui/_common.scss b/src/ui/_common.scss index 3e8c19574..9bde89995 100644 --- a/src/ui/_common.scss +++ b/src/ui/_common.scss @@ -145,8 +145,8 @@ left: 50%; transform: translateX(-50%) translateY(-50%); } -@mixin on-fullscreen($bodyClass: "*") { - #{selector-unify("body.player-mode-webfullscreen", $bodyClass)} &, +@mixin on-fullscreen($bodyClass: '*') { + #{selector-unify("body.player-mode-full", $bodyClass)} &, #{selector-unify("body.player-fullscreen-fix", $bodyClass)} &, #{selector-unify("body.player-full-win", $bodyClass)} & { @content;