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

View File

@ -3,6 +3,7 @@ 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'
import { allVideoUrls } from '@/core/utils/urls'
enum IntersectionMode {
Top = '视频顶部',
@ -17,115 +18,118 @@ export const component: ComponentMetadata = {
link: 'https://github.com/FoundTheWOUT',
},
tags: [componentsTags.video],
urlInclude: allVideoUrls,
entry: async ({ settings: { options }, metadata }) => {
const settings = options as {
triggerLocation: IntersectionMode
pause: boolean
light: boolean
}
const { query: { video } } = playerAgent
Promise.resolve().then(async () => {
const { query: { video } } = playerAgent
const videoEl = await video.element() as HTMLVideoElement
// const playerWrap = await video.wrap()
// 如果有 video-player 优先的使用该盒子
// 因为在稍后再看页面medialist视频也有 player-wrap
// 选择 player-wrap 会导致闪烁。
const playerWrap = (
document.getElementById('video-player')
const videoEl = await video.element() as HTMLVideoElement
// const playerWrap = await video.wrap()
// 如果有 video-player 优先的使用该盒子
// 因为在稍后再看页面medialist视频也有 player-wrap
// 选择 player-wrap 会导致闪烁。
const playerWrap = (
document.getElementById('video-player')
?? (dq('.player-wrap') || dq('.player-module'))
) as HTMLElement
let observer: IntersectionObserver
let intersectionLock = true // Lock intersection action
let observer: IntersectionObserver
let intersectionLock = true // Lock intersection action
function getToTop(_mode: string): number {
switch (_mode) {
case IntersectionMode.Top:
return 1
case IntersectionMode.Medium:
return 0.5
case IntersectionMode.Bottom:
return 0
default:
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()
function getToTop(_mode: string): number {
switch (_mode) {
case IntersectionMode.Top:
return 1
case IntersectionMode.Medium:
return 0.5
case IntersectionMode.Bottom:
return 0
default:
return 0.5
}
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) => {
removePlayerOutEvent()
observer = createObserver(value)
addPlayerOutEvent()
observer = createObserver()
mountPlayListener()
})
observer = createObserver()
mountPlayListener()
},
displayName: '播放器位置动作',
description: {