mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Merge branch 'preview-fixes' of https://github.com/the1812/Bilibili-Evolved into preview-fixes
This commit is contained in:
commit
6fdb1b9b2a
@ -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',
|
||||
|
||||
@ -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: {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user