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
|
} = 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',
|
||||||
|
|||||||
@ -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: {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user