From f3fee6f5345688637c5ee4ed79c21e75b4477818 Mon Sep 17 00:00:00 2001 From: ChsBuffer <33744752+chsbuffer@users.noreply.github.com> Date: Sat, 27 Aug 2022 11:05:48 +0800 Subject: [PATCH 1/2] fix(intersection): add urlInclude --- .../lib/components/video/player/intersection-actions/index.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/registry/lib/components/video/player/intersection-actions/index.ts b/registry/lib/components/video/player/intersection-actions/index.ts index 99cfcd709..60830fdd3 100644 --- a/registry/lib/components/video/player/intersection-actions/index.ts +++ b/registry/lib/components/video/player/intersection-actions/index.ts @@ -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,6 +18,7 @@ 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 From da04b9955387de6aee0babd878addaeed078c6bc Mon Sep 17 00:00:00 2001 From: ChsBuffer <33744752+chsbuffer@users.noreply.github.com> Date: Sat, 27 Aug 2022 11:12:43 +0800 Subject: [PATCH 2/2] fix(intersection,default-mode): fix entry blocking ComponentsLoaded --- .../video/player/default-mode/index.ts | 86 ++++---- .../player/intersection-actions/index.ts | 190 +++++++++--------- 2 files changed, 140 insertions(+), 136 deletions(-) diff --git a/registry/lib/components/video/player/default-mode/index.ts b/registry/lib/components/video/player/default-mode/index.ts index 07eacbea5..bb3a45a11 100644 --- a/registry/lib/components/video/player/default-mode/index.ts +++ b/registry/lib/components/video/player/default-mode/index.ts @@ -22,48 +22,50 @@ const entry: ComponentEntry = async ({ settings: { options } }) => { } = playerAgent await playerReady() - const actions: Map void | Promise> = 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 void | Promise> = 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', diff --git a/registry/lib/components/video/player/intersection-actions/index.ts b/registry/lib/components/video/player/intersection-actions/index.ts index 60830fdd3..514870f66 100644 --- a/registry/lib/components/video/player/intersection-actions/index.ts +++ b/registry/lib/components/video/player/intersection-actions/index.ts @@ -25,109 +25,111 @@ export const component: ComponentMetadata = { 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: {