fix(scroll-out-play): add intersectionLock

This commit is contained in:
FoundTheWOUT 2021-05-05 21:52:03 +08:00
parent 7e3fa08dcd
commit 01bf2ddfe5

View File

@ -1,6 +1,7 @@
let videoEl: HTMLVideoElement; let videoEl: HTMLVideoElement;
let playerWrap: HTMLElement; let playerWrap: HTMLElement;
let observer: IntersectionObserver; let observer: IntersectionObserver;
let intersectionLock = true; // Lock intersection action
enum MODE { enum MODE {
TOP = '视频顶部', TOP = '视频顶部',
@ -54,6 +55,8 @@ function removePlayerOutEvent() {
} }
let intersectingCall = () => { let intersectingCall = () => {
if (intersectionLock) return;
intersectionLock = true; // relock
if (settings.scrollOutPlayerAutoPause && videoEl.paused) videoEl.play(); if (settings.scrollOutPlayerAutoPause && videoEl.paused) videoEl.play();
if ( if (
settings.scrollOutPlayerAutoLightOn && settings.scrollOutPlayerAutoLightOn &&
@ -65,6 +68,8 @@ let intersectingCall = () => {
}; };
let disIntersectingCall = () => { let disIntersectingCall = () => {
// if video is playing, unlock intersecting action
!videoEl.paused ? (intersectionLock = false) : '';
if (settings.scrollOutPlayerAutoPause && !videoEl.paused) videoEl.pause(); if (settings.scrollOutPlayerAutoPause && !videoEl.paused) videoEl.pause();
if ( if (
settings.scrollOutPlayerAutoLightOn && settings.scrollOutPlayerAutoLightOn &&
@ -88,7 +93,6 @@ let createObserver = (mode?: string) =>
function mountPlayListener() { function mountPlayListener() {
Observer.videoChange(async () => { Observer.videoChange(async () => {
videoEl.addEventListener('play', addPlayerOutEvent); videoEl.addEventListener('play', addPlayerOutEvent);
// onPlayerOutEvent 不会在我们手动暂停视频时移除, 所以需要监听暂停.
// videoEl.addEventListener('pause', removePlayerOutEvent); // videoEl.addEventListener('pause', removePlayerOutEvent);
videoEl.addEventListener('ended', removePlayerOutEvent); videoEl.addEventListener('ended', removePlayerOutEvent);
}); });
@ -100,7 +104,6 @@ function mountPlayListener() {
removePlayerOutEvent(); removePlayerOutEvent();
observer = createObserver(value); observer = createObserver(value);
addPlayerOutEvent(); addPlayerOutEvent();
console.log(observer);
}); });
videoEl = dq('.bilibili-player-video video') as HTMLVideoElement; videoEl = dq('.bilibili-player-video video') as HTMLVideoElement;
playerWrap = (dq('.player-wrap') || dq('.player-module')) as HTMLElement; playerWrap = (dq('.player-wrap') || dq('.player-module')) as HTMLElement;
@ -115,8 +118,9 @@ export default {
}, },
unload: () => { unload: () => {
// umount player listener // umount player listener
Observer.videoChange(async () => { videoEl.removeEventListener('play', addPlayerOutEvent); Observer.videoChange(async () => {
videoEl.removeEventListener('pause', removePlayerOutEvent); videoEl.removeEventListener('play', addPlayerOutEvent);
// videoEl.removeEventListener('pause', removePlayerOutEvent);
videoEl.removeEventListener('ended', removePlayerOutEvent); videoEl.removeEventListener('ended', removePlayerOutEvent);
}); });
removePlayerOutEvent(); removePlayerOutEvent();