From 4df5473d901fb5dfc2a2f9969e7e9ccf2c7467af Mon Sep 17 00:00:00 2001 From: FoundTheWOUT Date: Sun, 2 May 2021 21:31:14 +0800 Subject: [PATCH 1/5] fix(video): detect player-wrap scrolling instead of videoEl --- src/video/download-video/batch-download.ts | 2 +- src/video/scroll-out-player.ts | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/video/download-video/batch-download.ts b/src/video/download-video/batch-download.ts index c2bb96dec..8e0494960 100644 --- a/src/video/download-video/batch-download.ts +++ b/src/video/download-video/batch-download.ts @@ -352,7 +352,7 @@ export class ManualInputBatch extends VideoEpisodeBatch { } }) })) - console.log(_.flatten(_.cloneDeep(pages))) + console.log("%cClass ManualInputBatch%c, data: ","color:yellow;", _.flatten(_.cloneDeep(pages))) return _.flatten(pages) } } diff --git a/src/video/scroll-out-player.ts b/src/video/scroll-out-player.ts index f0ec9a971..006649b9c 100644 --- a/src/video/scroll-out-player.ts +++ b/src/video/scroll-out-player.ts @@ -1,4 +1,5 @@ let videoEl: HTMLVideoElement; +let playerWrap: HTMLElement; let mode = '视频中间'; enum MODE { @@ -22,7 +23,7 @@ function getToTop(_mode: string, client: DOMRect): number { // run callback when video el scroll out. let handlePlayerOut = function (_mode: string, callback?: () => void) { - const videoClient = videoEl?.getBoundingClientRect(); + const videoClient = playerWrap?.getBoundingClientRect(); if (videoClient?.top && videoClient.height) { let toTop = getToTop(_mode, videoClient); if (toTop <= 0) { @@ -39,7 +40,7 @@ let handlePlayerOut = function (_mode: string, callback?: () => void) { // run callback when video el scroll back. let handlePlayerBack = function (_mode: string, callback?: () => void) { - const videoClient = videoEl?.getBoundingClientRect(); + const videoClient = playerWrap?.getBoundingClientRect(); if (videoClient?.top && videoClient.height) { let toTop = getToTop(_mode, videoClient); if (toTop >= 0) { @@ -125,6 +126,7 @@ async function setup() { await initLights(); addSettingsListener('triggerPlayerOutPlace', (value) => (mode = value)); videoEl = dq('.bilibili-player-video video') as HTMLVideoElement; + playerWrap = dq('.player-wrap') as HTMLElement; mountListener(); } setup(); From 03c90a7d71cf0d8d4beee5bc4941241829ac2bf4 Mon Sep 17 00:00:00 2001 From: FoundTheWOUT Date: Sun, 2 May 2021 21:38:55 +0800 Subject: [PATCH 2/5] fix: #1774 --- src/style/home-hidden/home-hidden.scss | 1 + src/style/home-hidden/home-hidden.ts | 7 +++++++ 2 files changed, 8 insertions(+) diff --git a/src/style/home-hidden/home-hidden.scss b/src/style/home-hidden/home-hidden.scss index 1fac710ca..8fbb1c7a7 100644 --- a/src/style/home-hidden/home-hidden.scss +++ b/src/style/home-hidden/home-hidden.scss @@ -10,6 +10,7 @@ $items: ( technology, cheese, digital, + car, life, food, animal, diff --git a/src/style/home-hidden/home-hidden.ts b/src/style/home-hidden/home-hidden.ts index 725aa4701..913b523d9 100644 --- a/src/style/home-hidden/home-hidden.ts +++ b/src/style/home-hidden/home-hidden.ts @@ -34,6 +34,9 @@ const homeHiddenOptions: HomeHiddenOption[] = [ .first-screen #reportFirst2 { display: none !important; } `, }, + { + name: 'ext-box', displayName: '电竞赛事', style: ` + .first-screen #reportFirst3 { display: none !important; } `, }, { name: 'special', displayName: '特别推荐', style: ` #bili_report_spe_rec { display: none !important; } @@ -93,6 +96,10 @@ const homeHiddenOptions: HomeHiddenOption[] = [ name: "digital", displayName: "数码" }, + { + name: "car", + displayName: "汽车" + }, { name: "life", displayName: "生活" From ad85e9fd5efd64b04100016618176aee34fd90f9 Mon Sep 17 00:00:00 2001 From: FoundTheWOUT Date: Sun, 2 May 2021 23:31:10 +0800 Subject: [PATCH 3/5] fix(scroll-out-player): modify playerWrap --- src/video/scroll-out-player.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/video/scroll-out-player.ts b/src/video/scroll-out-player.ts index 006649b9c..ce3fc9496 100644 --- a/src/video/scroll-out-player.ts +++ b/src/video/scroll-out-player.ts @@ -126,7 +126,7 @@ async function setup() { await initLights(); addSettingsListener('triggerPlayerOutPlace', (value) => (mode = value)); videoEl = dq('.bilibili-player-video video') as HTMLVideoElement; - playerWrap = dq('.player-wrap') as HTMLElement; + playerWrap = (dq('.player-wrap') || dq('.player-module')) as HTMLElement; mountListener(); } setup(); From 7e3fa08dcdbd42a2910c87b4da8095a1f153959a Mon Sep 17 00:00:00 2001 From: FoundTheWOUT Date: Tue, 4 May 2021 19:33:27 +0800 Subject: [PATCH 4/5] =?UTF-8?q?=F0=9F=93=A6=20refactor(scroll-out-player):?= =?UTF-8?q?=20replace=20scroll=20listener=20to=20intersectionOberver?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/global.d.ts | 2 +- src/video/scroll-out-player.ts | 143 ++++++++++++++------------------- 2 files changed, 60 insertions(+), 85 deletions(-) diff --git a/src/global.d.ts b/src/global.d.ts index 277f62dfb..0f467116a 100644 --- a/src/global.d.ts +++ b/src/global.d.ts @@ -519,7 +519,7 @@ declare global { checkInCenter: boolean, fullscreenGiftBox: boolean, scrollOutPlayer: boolean, - scrollOutPlayerTriggerPlace: string[], + scrollOutPlayerTriggerPlace: string, scrollOutPlayerAutoPause: boolean, scrollOutPlayerAutoLightOn: boolean, } diff --git a/src/video/scroll-out-player.ts b/src/video/scroll-out-player.ts index ce3fc9496..888e628c4 100644 --- a/src/video/scroll-out-player.ts +++ b/src/video/scroll-out-player.ts @@ -1,6 +1,6 @@ let videoEl: HTMLVideoElement; let playerWrap: HTMLElement; -let mode = '视频中间'; +let observer: IntersectionObserver; enum MODE { TOP = '视频顶部', @@ -8,52 +8,19 @@ enum MODE { BOT = '视频底部', } -function getToTop(_mode: string, client: DOMRect): number { +function getToTop(_mode: string): number { switch (_mode) { case MODE.TOP: - return client?.top; + return 1; case MODE.MID: - return client?.top + client?.height / 2; + return 0.5; case MODE.BOT: - return client?.top + client?.height; - default: return 0; + default: + return 0.5; } } -// run callback when video el scroll out. -let handlePlayerOut = function (_mode: string, callback?: () => void) { - const videoClient = playerWrap?.getBoundingClientRect(); - if (videoClient?.top && videoClient.height) { - let toTop = getToTop(_mode, videoClient); - if (toTop <= 0) { - callback ? callback() : ''; - // get ready to check when the video el came back. - window.addEventListener('scroll', onPlayerBackEvent, { - passive: true, - }); - // remove out listener when got out. - window.removeEventListener('scroll', onPlayerOutEvent); - } - } -}; - -// run callback when video el scroll back. -let handlePlayerBack = function (_mode: string, callback?: () => void) { - const videoClient = playerWrap?.getBoundingClientRect(); - if (videoClient?.top && videoClient.height) { - let toTop = getToTop(_mode, videoClient); - if (toTop >= 0) { - callback ? callback() : ''; - // this will done by play listener - window.addEventListener('scroll', onPlayerOutEvent, { - passive: true, - }); - window.removeEventListener('scroll', onPlayerBackEvent); - } - } -}; - let lightOff = () => {}; let lightOn = () => {}; async function initLights() { @@ -76,74 +43,82 @@ async function initLights() { lightOn = () => setLight(false); } -function onPlayerOutEvent() { - handlePlayerOut(mode, () => { - if (settings.scrollOutPlayerAutoPause && !videoEl.paused) videoEl.pause(); - // 满足条件: 自动开灯功能启用、自动关灯功能启用、没有启用自动暂停 - // 补充: 当启用自动关灯与自动暂停时, 自动开灯动作由自动暂停完成 - if ( - settings.scrollOutPlayerAutoLightOn && - settings.autoLightOff && - !settings.scrollOutPlayerAutoPause - ) - lightOn(); - }); -} - -function onPlayerBackEvent() { - handlePlayerBack(mode, () => { - if (settings.scrollOutPlayerAutoPause && videoEl.paused) videoEl.play(); - // 回来时自动关灯 - // 满足条件: 自动开灯功能启用、自动关灯功能启用、没有启用自动暂停、视频播放中 - if ( - settings.scrollOutPlayerAutoLightOn && - settings.autoLightOff && - !settings.scrollOutPlayerAutoPause && - !videoEl.paused - ) - lightOff(); - }); -} - function addPlayerOutEvent() { - window.addEventListener('scroll', onPlayerOutEvent, { passive: true }); + // window.addEventListener('scroll', onPlayerOutEvent, { passive: true }); + observer.observe(playerWrap); } function removePlayerOutEvent() { - window.removeEventListener('scroll', onPlayerOutEvent); + // window.removeEventListener('scroll', onPlayerOutEvent); + observer.unobserve(playerWrap); } -function mountListener() { +let intersectingCall = () => { + if (settings.scrollOutPlayerAutoPause && videoEl.paused) videoEl.play(); + if ( + settings.scrollOutPlayerAutoLightOn && + settings.autoLightOff && + !settings.scrollOutPlayerAutoPause && + !videoEl.paused + ) + lightOff(); +}; + +let disIntersectingCall = () => { + if (settings.scrollOutPlayerAutoPause && !videoEl.paused) videoEl.pause(); + if ( + settings.scrollOutPlayerAutoLightOn && + settings.autoLightOff && + !settings.scrollOutPlayerAutoPause + ) + lightOn(); +}; + +let createObserver = (mode?: string) => + new IntersectionObserver( + ([e]) => { + e.isIntersecting ? intersectingCall() : disIntersectingCall(); + }, + { + root: document, + threshold: getToTop(mode ? mode : settings.scrollOutPlayerTriggerPlace), + } + ); + +function mountPlayListener() { Observer.videoChange(async () => { videoEl.addEventListener('play', addPlayerOutEvent); // onPlayerOutEvent 不会在我们手动暂停视频时移除, 所以需要监听暂停. - videoEl.addEventListener('pause', removePlayerOutEvent); + // videoEl.addEventListener('pause', removePlayerOutEvent); videoEl.addEventListener('ended', removePlayerOutEvent); }); } -async function setup() { +(async function setup() { await initLights(); - addSettingsListener('triggerPlayerOutPlace', (value) => (mode = value)); + addSettingsListener('scrollOutPlayerTriggerPlace', (value) => { + removePlayerOutEvent(); + observer = createObserver(value); + addPlayerOutEvent(); + console.log(observer); + }); videoEl = dq('.bilibili-player-video video') as HTMLVideoElement; playerWrap = (dq('.player-wrap') || dq('.player-module')) as HTMLElement; - mountListener(); -} -setup(); + observer = createObserver(); + mountPlayListener(); +})(); export default { reload: () => { - window.addEventListener('scroll', onPlayerOutEvent); - mountListener(); + addPlayerOutEvent(); + mountPlayListener(); }, unload: () => { - // remove all listener - Observer.videoChange(async () => { - videoEl.removeEventListener('play', addPlayerOutEvent); + // umount player listener + Observer.videoChange(async () => { videoEl.removeEventListener('play', addPlayerOutEvent); videoEl.removeEventListener('pause', removePlayerOutEvent); videoEl.removeEventListener('ended', removePlayerOutEvent); }); - window.removeEventListener('scroll', onPlayerOutEvent); - window.removeEventListener('scroll', onPlayerBackEvent); + removePlayerOutEvent(); }, }; From 01bf2ddfe554a3e3b90a7169d98671142d2a8eac Mon Sep 17 00:00:00 2001 From: FoundTheWOUT Date: Wed, 5 May 2021 21:52:03 +0800 Subject: [PATCH 5/5] fix(scroll-out-play): add intersectionLock --- src/video/scroll-out-player.ts | 12 ++++++++---- 1 file changed, 8 insertions(+), 4 deletions(-) diff --git a/src/video/scroll-out-player.ts b/src/video/scroll-out-player.ts index 888e628c4..b406be0c0 100644 --- a/src/video/scroll-out-player.ts +++ b/src/video/scroll-out-player.ts @@ -1,6 +1,7 @@ let videoEl: HTMLVideoElement; let playerWrap: HTMLElement; let observer: IntersectionObserver; +let intersectionLock = true; // Lock intersection action enum MODE { TOP = '视频顶部', @@ -54,6 +55,8 @@ function removePlayerOutEvent() { } let intersectingCall = () => { + if (intersectionLock) return; + intersectionLock = true; // relock if (settings.scrollOutPlayerAutoPause && videoEl.paused) videoEl.play(); if ( settings.scrollOutPlayerAutoLightOn && @@ -65,6 +68,8 @@ let intersectingCall = () => { }; let disIntersectingCall = () => { + // if video is playing, unlock intersecting action + !videoEl.paused ? (intersectionLock = false) : ''; if (settings.scrollOutPlayerAutoPause && !videoEl.paused) videoEl.pause(); if ( settings.scrollOutPlayerAutoLightOn && @@ -88,7 +93,6 @@ let createObserver = (mode?: string) => function mountPlayListener() { Observer.videoChange(async () => { videoEl.addEventListener('play', addPlayerOutEvent); - // onPlayerOutEvent 不会在我们手动暂停视频时移除, 所以需要监听暂停. // videoEl.addEventListener('pause', removePlayerOutEvent); videoEl.addEventListener('ended', removePlayerOutEvent); }); @@ -100,7 +104,6 @@ function mountPlayListener() { removePlayerOutEvent(); observer = createObserver(value); addPlayerOutEvent(); - console.log(observer); }); videoEl = dq('.bilibili-player-video video') as HTMLVideoElement; playerWrap = (dq('.player-wrap') || dq('.player-module')) as HTMLElement; @@ -115,8 +118,9 @@ export default { }, unload: () => { // umount player listener - Observer.videoChange(async () => { videoEl.removeEventListener('play', addPlayerOutEvent); - videoEl.removeEventListener('pause', removePlayerOutEvent); + Observer.videoChange(async () => { + videoEl.removeEventListener('play', addPlayerOutEvent); + // videoEl.removeEventListener('pause', removePlayerOutEvent); videoEl.removeEventListener('ended', removePlayerOutEvent); }); removePlayerOutEvent();