Merge pull request #1806 from FoundTheWOUT/preview

修复了一些bug, 增加了log信息
This commit is contained in:
Grant Howard 2021-05-07 12:07:53 +08:00 committed by GitHub
commit a838a0ee13
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 75 additions and 86 deletions

2
src/global.d.ts vendored
View File

@ -519,7 +519,7 @@ declare global {
checkInCenter: boolean, checkInCenter: boolean,
fullscreenGiftBox: boolean, fullscreenGiftBox: boolean,
scrollOutPlayer: boolean, scrollOutPlayer: boolean,
scrollOutPlayerTriggerPlace: string[], scrollOutPlayerTriggerPlace: string,
scrollOutPlayerAutoPause: boolean, scrollOutPlayerAutoPause: boolean,
scrollOutPlayerAutoLightOn: boolean, scrollOutPlayerAutoLightOn: boolean,
} }

View File

@ -10,6 +10,7 @@ $items: (
technology, technology,
cheese, cheese,
digital, digital,
car,
life, life,
food, food,
animal, animal,

View File

@ -34,6 +34,9 @@ const homeHiddenOptions: HomeHiddenOption[] = [
.first-screen #reportFirst2 { display: none !important; } .first-screen #reportFirst2 { display: none !important; }
`, `,
}, },
{
name: 'ext-box', displayName: '电竞赛事', style: `
.first-screen #reportFirst3 { display: none !important; } `, },
{ {
name: 'special', displayName: '特别推荐', style: ` name: 'special', displayName: '特别推荐', style: `
#bili_report_spe_rec { display: none !important; } #bili_report_spe_rec { display: none !important; }
@ -93,6 +96,10 @@ const homeHiddenOptions: HomeHiddenOption[] = [
name: "digital", name: "digital",
displayName: "数码" displayName: "数码"
}, },
{
name: "car",
displayName: "汽车"
},
{ {
name: "life", name: "life",
displayName: "生活" displayName: "生活"

View File

@ -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) return _.flatten(pages)
} }
} }

View File

@ -1,5 +1,7 @@
let videoEl: HTMLVideoElement; let videoEl: HTMLVideoElement;
let mode = '视频中间'; let playerWrap: HTMLElement;
let observer: IntersectionObserver;
let intersectionLock = true; // Lock intersection action
enum MODE { enum MODE {
TOP = '视频顶部', TOP = '视频顶部',
@ -7,52 +9,19 @@ enum MODE {
BOT = '视频底部', BOT = '视频底部',
} }
function getToTop(_mode: string, client: DOMRect): number { function getToTop(_mode: string): number {
switch (_mode) { switch (_mode) {
case MODE.TOP: case MODE.TOP:
return client?.top; return 1;
case MODE.MID: case MODE.MID:
return client?.top + client?.height / 2; return 0.5;
case MODE.BOT: case MODE.BOT:
return client?.top + client?.height;
default:
return 0; return 0;
default:
return 0.5;
} }
} }
// run callback when video el scroll out.
let handlePlayerOut = function (_mode: string, callback?: () => void) {
const videoClient = videoEl?.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 = videoEl?.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 lightOff = () => {};
let lightOn = () => {}; let lightOn = () => {};
async function initLights() { async function initLights() {
@ -75,73 +44,85 @@ async function initLights() {
lightOn = () => setLight(false); 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() { function addPlayerOutEvent() {
window.addEventListener('scroll', onPlayerOutEvent, { passive: true }); // window.addEventListener('scroll', onPlayerOutEvent, { passive: true });
observer.observe(playerWrap);
} }
function removePlayerOutEvent() { function removePlayerOutEvent() {
window.removeEventListener('scroll', onPlayerOutEvent); // window.removeEventListener('scroll', onPlayerOutEvent);
observer.unobserve(playerWrap);
} }
function mountListener() { let intersectingCall = () => {
if (intersectionLock) return;
intersectionLock = true; // relock
if (settings.scrollOutPlayerAutoPause && videoEl.paused) videoEl.play();
if (
settings.scrollOutPlayerAutoLightOn &&
settings.autoLightOff &&
!settings.scrollOutPlayerAutoPause &&
!videoEl.paused
)
lightOff();
};
let disIntersectingCall = () => {
// if video is playing, unlock intersecting action
!videoEl.paused ? (intersectionLock = false) : '';
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 () => { 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);
}); });
} }
async function setup() { (async function setup() {
await initLights(); await initLights();
addSettingsListener('triggerPlayerOutPlace', (value) => (mode = value)); addSettingsListener('scrollOutPlayerTriggerPlace', (value) => {
removePlayerOutEvent();
observer = createObserver(value);
addPlayerOutEvent();
});
videoEl = dq('.bilibili-player-video video') as HTMLVideoElement; videoEl = dq('.bilibili-player-video video') as HTMLVideoElement;
mountListener(); playerWrap = (dq('.player-wrap') || dq('.player-module')) as HTMLElement;
} observer = createObserver();
setup(); mountPlayListener();
})();
export default { export default {
reload: () => { reload: () => {
window.addEventListener('scroll', onPlayerOutEvent); addPlayerOutEvent();
mountListener(); mountPlayListener();
}, },
unload: () => { unload: () => {
// remove all listener // umount player listener
Observer.videoChange(async () => { Observer.videoChange(async () => {
videoEl.removeEventListener('play', addPlayerOutEvent); videoEl.removeEventListener('play', addPlayerOutEvent);
videoEl.removeEventListener('pause', removePlayerOutEvent); // videoEl.removeEventListener('pause', removePlayerOutEvent);
videoEl.removeEventListener('ended', removePlayerOutEvent); videoEl.removeEventListener('ended', removePlayerOutEvent);
}); });
window.removeEventListener('scroll', onPlayerOutEvent); removePlayerOutEvent();
window.removeEventListener('scroll', onPlayerBackEvent);
}, },
}; };