diff --git a/registry/lib/components/video/player/intersection-actions/index.ts b/registry/lib/components/video/player/intersection-actions/index.ts index b4ae97f4b..c7199bd69 100644 --- a/registry/lib/components/video/player/intersection-actions/index.ts +++ b/registry/lib/components/video/player/intersection-actions/index.ts @@ -1,4 +1,5 @@ import { ComponentMetadata } from '@/components/types' +import { playerAgent } from '@/components/video/player-agent' import { lightOff, lightOn } from '@/components/video/player-light' import { videoChange } from '@/core/observer' import { addComponentListener, getComponentSettings } from '@/core/settings' @@ -22,9 +23,11 @@ export const component: ComponentMetadata = { pause: boolean light: boolean } + const { query: { video } } = playerAgent - let videoEl: HTMLVideoElement - let playerWrap: HTMLElement + const videoEl = await video.element() as HTMLVideoElement + // const playerWrap = await video.wrap() + const playerWrap = (dq('.player-wrap') || dq('.player-module')) as HTMLElement let observer: IntersectionObserver let intersectionLock = true // Lock intersection action @@ -98,19 +101,27 @@ export const component: ComponentMetadata = { ) function mountPlayListener() { + const autoPlay = lodash.get( + JSON.parse(localStorage.getItem('bilibili_player_settings')), + 'video_status.autoplay', + false, + ) videoChange(async () => { + if (autoPlay) { + addPlayerOutEvent() + } videoEl.addEventListener('play', addPlayerOutEvent) // videoEl.addEventListener('pause', removePlayerOutEvent); videoEl.addEventListener('ended', removePlayerOutEvent) }) } + addComponentListener(`${metadata.name}.triggerLocation`, (value: IntersectionMode) => { removePlayerOutEvent() observer = createObserver(value) addPlayerOutEvent() }) - videoEl = dq('.bilibili-player-video video') as HTMLVideoElement - playerWrap = (dq('.player-wrap') || dq('.player-module')) as HTMLElement + observer = createObserver() mountPlayListener() }, diff --git a/src/components/video/player-light.ts b/src/components/video/player-light.ts index 0bb8821ca..289dfa109 100644 --- a/src/components/video/player-light.ts +++ b/src/components/video/player-light.ts @@ -4,24 +4,48 @@ import { loadLazyPlayerSettingsPanel } from '@/core/utils/lazy-panel' import { playerUrls } from '@/core/utils/urls' let initialized = false -const setLight = (on: boolean) => { - if (!playerUrls.some(url => matchUrlPattern(url))) { - return none - } - return async () => { + +const setLightAdaptor = { + bangumi: (doLightOn: boolean) => async () => { if (!initialized) { - loadLazyPlayerSettingsPanel( - '.bilibili-player-video-btn-setting', - '.bilibili-player-video-btn-setting-wrap', - { - style: '.bilibili-player-video-btn-setting-wrap { display: none !important }', - }, - ) + loadLazyPlayerSettingsPanel('.squirtle-setting-wrap', '.squirtle-video-setting') initialized = true } - const checkbox = await select('.bilibili-player-video-btn-setting-right-others-content-lightoff .bui-checkbox-input') as HTMLInputElement - checkbox.checked = !on - raiseEvent(checkbox, 'change') + const checkbox = await select('.squirtle-lightoff') as HTMLElement + const event = new MouseEvent('click') + // 处于关灯状态,要开灯 -> 开灯 + checkbox.classList.contains('active') && doLightOn ? checkbox.dispatchEvent(event) : '' + // 处于开灯状态,要关灯 -> 关灯 + !checkbox.classList.contains('active') && !doLightOn ? checkbox.dispatchEvent(event) : '' + }, + fallback: (on: boolean) => { + if (!playerUrls.some(url => matchUrlPattern(url))) { + return none + } + return async () => { + if (!initialized) { + loadLazyPlayerSettingsPanel( + '.bilibili-player-video-btn-setting', + '.bilibili-player-video-btn-setting-wrap', + { + style: '.bilibili-player-video-btn-setting-wrap { display: none !important }', + }, + ) + initialized = true + } + const checkbox = await select('.bilibili-player-video-btn-setting-right-others-content-lightoff .bui-checkbox-input') as HTMLInputElement + checkbox.checked = !on + raiseEvent(checkbox, 'change') + } + }, +} + +let setLight = setLightAdaptor.fallback +for (const key in setLightAdaptor) { + if (Object.prototype.hasOwnProperty.call(setLightAdaptor, key)) { + if (matchUrlPattern(key)) { + setLight = setLightAdaptor[key] + } } } export const lightOn = setLight(true)