mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
commit
a838a0ee13
2
src/global.d.ts
vendored
2
src/global.d.ts
vendored
@ -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,
|
||||||
}
|
}
|
||||||
|
|||||||
@ -10,6 +10,7 @@ $items: (
|
|||||||
technology,
|
technology,
|
||||||
cheese,
|
cheese,
|
||||||
digital,
|
digital,
|
||||||
|
car,
|
||||||
life,
|
life,
|
||||||
food,
|
food,
|
||||||
animal,
|
animal,
|
||||||
|
|||||||
@ -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: "生活"
|
||||||
|
|||||||
@ -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)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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,25 +44,20 @@ async function initLights() {
|
|||||||
lightOn = () => setLight(false);
|
lightOn = () => setLight(false);
|
||||||
}
|
}
|
||||||
|
|
||||||
function onPlayerOutEvent() {
|
function addPlayerOutEvent() {
|
||||||
handlePlayerOut(mode, () => {
|
// window.addEventListener('scroll', onPlayerOutEvent, { passive: true });
|
||||||
if (settings.scrollOutPlayerAutoPause && !videoEl.paused) videoEl.pause();
|
observer.observe(playerWrap);
|
||||||
// 满足条件: 自动开灯功能启用、自动关灯功能启用、没有启用自动暂停
|
|
||||||
// 补充: 当启用自动关灯与自动暂停时, 自动开灯动作由自动暂停完成
|
|
||||||
if (
|
|
||||||
settings.scrollOutPlayerAutoLightOn &&
|
|
||||||
settings.autoLightOff &&
|
|
||||||
!settings.scrollOutPlayerAutoPause
|
|
||||||
)
|
|
||||||
lightOn();
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function onPlayerBackEvent() {
|
function removePlayerOutEvent() {
|
||||||
handlePlayerBack(mode, () => {
|
// window.removeEventListener('scroll', onPlayerOutEvent);
|
||||||
|
observer.unobserve(playerWrap);
|
||||||
|
}
|
||||||
|
|
||||||
|
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 &&
|
||||||
settings.autoLightOff &&
|
settings.autoLightOff &&
|
||||||
@ -101,47 +65,64 @@ function onPlayerBackEvent() {
|
|||||||
!videoEl.paused
|
!videoEl.paused
|
||||||
)
|
)
|
||||||
lightOff();
|
lightOff();
|
||||||
});
|
};
|
||||||
}
|
|
||||||
|
|
||||||
function addPlayerOutEvent() {
|
let disIntersectingCall = () => {
|
||||||
window.addEventListener('scroll', onPlayerOutEvent, { passive: true });
|
// 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();
|
||||||
|
};
|
||||||
|
|
||||||
function removePlayerOutEvent() {
|
let createObserver = (mode?: string) =>
|
||||||
window.removeEventListener('scroll', onPlayerOutEvent);
|
new IntersectionObserver(
|
||||||
|
([e]) => {
|
||||||
|
e.isIntersecting ? intersectingCall() : disIntersectingCall();
|
||||||
|
},
|
||||||
|
{
|
||||||
|
root: document,
|
||||||
|
threshold: getToTop(mode ? mode : settings.scrollOutPlayerTriggerPlace),
|
||||||
}
|
}
|
||||||
|
);
|
||||||
|
|
||||||
function mountListener() {
|
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);
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user