Merge branch 'preview-fixes' of https://github.com/the1812/Bilibili-Evolved into preview-fixes

This commit is contained in:
the1812 2022-08-29 21:42:12 +08:00
commit 6fdb1b9b2a
2 changed files with 142 additions and 136 deletions

View File

@ -22,48 +22,50 @@ const entry: ComponentEntry = async ({ settings: { options } }) => {
} = playerAgent } = playerAgent
await playerReady() await playerReady()
const actions: Map<PlayerModes, () => void | Promise<void>> = new Map([ Promise.resolve().then(async () => {
[PlayerModes.Normal, none], const actions: Map<PlayerModes, () => void | Promise<void>> = new Map([
[PlayerModes.Wide, async () => { [PlayerModes.Normal, none],
await loadLazyPanel(buttons.widescreen.selector) [PlayerModes.Wide, async () => {
disableWindowScroll(() => playerAgent.widescreen()) await loadLazyPanel(buttons.widescreen.selector)
}], disableWindowScroll(() => playerAgent.widescreen())
[PlayerModes.WebFullscreen, async () => { }],
await loadLazyPanel(buttons.webFullscreen.selector) [PlayerModes.WebFullscreen, async () => {
playerAgent.webFullscreen() await loadLazyPanel(buttons.webFullscreen.selector)
}], playerAgent.webFullscreen()
[PlayerModes.Fullscreen, async () => { }],
const video = await sq( [PlayerModes.Fullscreen, async () => {
() => dq(playerAgent.query.video.element.selector), const video = await sq(
(it: HTMLVideoElement) => it !== null && it.readyState === 4 () => dq(playerAgent.query.video.element.selector),
&& document.readyState === 'complete' && document.hasFocus(), (it: HTMLVideoElement) => it !== null && it.readyState === 4
) && document.readyState === 'complete' && document.hasFocus(),
if (video === null) { )
console.warn('[默认播放器模式] 未能应用全屏模式, 等待超时.') if (video === null) {
return console.warn('[默认播放器模式] 未能应用全屏模式, 等待超时.')
} return
// await loadLazyPanel(buttons.fullscreen.selector) }
playerAgent.fullscreen() // await loadLazyPanel(buttons.fullscreen.selector)
}], playerAgent.fullscreen()
]) }],
const video = await playerAgent.query.video.element() as HTMLVideoElement ])
if (!video) { const video = await playerAgent.query.video.element() as HTMLVideoElement
return if (!video) {
} return
const action = actions.get(options.mode) }
// https://github.com/the1812/Bilibili-Evolved/issues/2408 const action = actions.get(options.mode)
// 也许以前切P是会刷新页面但现在(2.7+)的播放器切P是不刷新页面的所以不需要判断 // https://github.com/the1812/Bilibili-Evolved/issues/2408
// const onplay = () => { // 也许以前切P是会刷新页面但现在(2.7+)的播放器切P是不刷新页面的所以不需要判断
// const isNormalMode = !dq('body[class*=player-mode-]') // const onplay = () => {
// if (isNormalMode) { // const isNormalMode = !dq('body[class*=player-mode-]')
// action() // if (isNormalMode) {
// } // action()
// } // }
if (options.applyOnPlay && !playerAgent.isAutoPlay()) { // }
video.addEventListener('play', action, { once: true }) if (options.applyOnPlay && !playerAgent.isAutoPlay()) {
} else { video.addEventListener('play', action, { once: true })
action() } else {
} action()
}
})
} }
export const component: ComponentMetadata = { export const component: ComponentMetadata = {
name: 'defaultPlayerMode', name: 'defaultPlayerMode',

View File

@ -3,6 +3,7 @@ import { playerAgent } from '@/components/video/player-agent'
import { lightOff, lightOn } from '@/components/video/player-light' import { lightOff, lightOn } from '@/components/video/player-light'
import { videoChange } from '@/core/observer' import { videoChange } from '@/core/observer'
import { addComponentListener, getComponentSettings } from '@/core/settings' import { addComponentListener, getComponentSettings } from '@/core/settings'
import { allVideoUrls } from '@/core/utils/urls'
enum IntersectionMode { enum IntersectionMode {
Top = '视频顶部', Top = '视频顶部',
@ -17,115 +18,118 @@ export const component: ComponentMetadata = {
link: 'https://github.com/FoundTheWOUT', link: 'https://github.com/FoundTheWOUT',
}, },
tags: [componentsTags.video], tags: [componentsTags.video],
urlInclude: allVideoUrls,
entry: async ({ settings: { options }, metadata }) => { entry: async ({ settings: { options }, metadata }) => {
const settings = options as { const settings = options as {
triggerLocation: IntersectionMode triggerLocation: IntersectionMode
pause: boolean pause: boolean
light: boolean light: boolean
} }
const { query: { video } } = playerAgent Promise.resolve().then(async () => {
const { query: { video } } = playerAgent
const videoEl = await video.element() as HTMLVideoElement const videoEl = await video.element() as HTMLVideoElement
// const playerWrap = await video.wrap() // const playerWrap = await video.wrap()
// 如果有 video-player 优先的使用该盒子 // 如果有 video-player 优先的使用该盒子
// 因为在稍后再看页面medialist视频也有 player-wrap // 因为在稍后再看页面medialist视频也有 player-wrap
// 选择 player-wrap 会导致闪烁。 // 选择 player-wrap 会导致闪烁。
const playerWrap = ( const playerWrap = (
document.getElementById('video-player') document.getElementById('video-player')
?? (dq('.player-wrap') || dq('.player-module')) ?? (dq('.player-wrap') || dq('.player-module'))
) as HTMLElement ) as HTMLElement
let observer: IntersectionObserver let observer: IntersectionObserver
let intersectionLock = true // Lock intersection action let intersectionLock = true // Lock intersection action
function getToTop(_mode: string): number { function getToTop(_mode: string): number {
switch (_mode) { switch (_mode) {
case IntersectionMode.Top: case IntersectionMode.Top:
return 1 return 1
case IntersectionMode.Medium: case IntersectionMode.Medium:
return 0.5 return 0.5
case IntersectionMode.Bottom: case IntersectionMode.Bottom:
return 0 return 0
default: default:
return 0.5 return 0.5
}
}
function addPlayerOutEvent() {
// window.addEventListener('scroll', onPlayerOutEvent, { passive: true });
observer.observe(playerWrap)
}
function removePlayerOutEvent() {
// window.removeEventListener('scroll', onPlayerOutEvent);
observer.unobserve(playerWrap)
}
const intersectingCall = () => {
if (intersectionLock) {
return
}
intersectionLock = true // relock
if (settings.pause && videoEl.paused) {
videoEl.play()
}
if (
settings.light
&& getComponentSettings('playerAutoLight').enabled
&& !settings.pause
&& !videoEl.paused
) {
lightOff()
}
}
const disIntersectingCall = () => {
// if video is playing, unlock intersecting action
if (!videoEl.paused) {
intersectionLock = false
}
if (settings.pause && !videoEl.paused) {
videoEl.pause()
}
if (
settings.light
&& getComponentSettings('playerAutoLight').enabled
&& !settings.pause
) {
lightOn()
}
}
const createObserver = (mode?: string) => (
new IntersectionObserver(
([e]) => {
e.isIntersecting ? intersectingCall() : disIntersectingCall()
},
{
threshold: getToTop(mode || settings.triggerLocation),
},
)
)
function mountPlayListener() {
videoChange(async () => {
if (playerAgent.isAutoPlay()) {
addPlayerOutEvent()
} }
videoEl.addEventListener('play', addPlayerOutEvent) }
// videoEl.addEventListener('pause', removePlayerOutEvent);
videoEl.addEventListener('ended', removePlayerOutEvent) function addPlayerOutEvent() {
// window.addEventListener('scroll', onPlayerOutEvent, { passive: true });
observer.observe(playerWrap)
}
function removePlayerOutEvent() {
// window.removeEventListener('scroll', onPlayerOutEvent);
observer.unobserve(playerWrap)
}
const intersectingCall = () => {
if (intersectionLock) {
return
}
intersectionLock = true // relock
if (settings.pause && videoEl.paused) {
videoEl.play()
}
if (
settings.light
&& getComponentSettings('playerAutoLight').enabled
&& !settings.pause
&& !videoEl.paused
) {
lightOff()
}
}
const disIntersectingCall = () => {
// if video is playing, unlock intersecting action
if (!videoEl.paused) {
intersectionLock = false
}
if (settings.pause && !videoEl.paused) {
videoEl.pause()
}
if (
settings.light
&& getComponentSettings('playerAutoLight').enabled
&& !settings.pause
) {
lightOn()
}
}
const createObserver = (mode?: string) => (
new IntersectionObserver(
([e]) => {
e.isIntersecting ? intersectingCall() : disIntersectingCall()
},
{
threshold: getToTop(mode || settings.triggerLocation),
},
)
)
function mountPlayListener() {
videoChange(async () => {
if (playerAgent.isAutoPlay()) {
addPlayerOutEvent()
}
videoEl.addEventListener('play', addPlayerOutEvent)
// videoEl.addEventListener('pause', removePlayerOutEvent);
videoEl.addEventListener('ended', removePlayerOutEvent)
})
}
addComponentListener(`${metadata.name}.triggerLocation`, (value: IntersectionMode) => {
removePlayerOutEvent()
observer = createObserver(value)
addPlayerOutEvent()
}) })
}
addComponentListener(`${metadata.name}.triggerLocation`, (value: IntersectionMode) => { observer = createObserver()
removePlayerOutEvent() mountPlayListener()
observer = createObserver(value)
addPlayerOutEvent()
}) })
observer = createObserver()
mountPlayListener()
}, },
displayName: '播放器位置动作', displayName: '播放器位置动作',
description: { description: {