New light Adaptor, Fix intersection.

This commit is contained in:
FoundTheWOUT 2021-11-22 17:13:43 +08:00
parent a8ad23794b
commit 730dfebcd4
2 changed files with 54 additions and 19 deletions

View File

@ -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()
},

View File

@ -4,7 +4,21 @@ import { loadLazyPlayerSettingsPanel } from '@/core/utils/lazy-panel'
import { playerUrls } from '@/core/utils/urls'
let initialized = false
const setLight = (on: boolean) => {
const setLightAdaptor = {
bangumi: (doLightOn: boolean) => async () => {
if (!initialized) {
loadLazyPlayerSettingsPanel('.squirtle-setting-wrap', '.squirtle-video-setting')
initialized = true
}
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
}
@ -23,6 +37,16 @@ const setLight = (on: boolean) => {
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)
export const lightOff = setLight(false)