mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
refactor(video): rename and add listener
rename settings properties, make it more readable. add listener to video ended. update unload func. now, scroll listener will be added after the video is start to play at the first time, but it would be init when the load func called as well.
This commit is contained in:
parent
b3cd04bb3b
commit
a3aa0bf968
@ -681,13 +681,13 @@ Resource.manifest = {
|
||||
scrollOutPlayer: {
|
||||
displayNames: {
|
||||
scrollOutPlayer: '当播放器退出页面时',
|
||||
triggerPlayerOutPlace: '选定触发位置',
|
||||
autoPause: '自动暂停',
|
||||
autoLightOn: '自动开灯'
|
||||
scrollOutPlayerTriggerPlace: '选定触发位置',
|
||||
scrollOutPlayerAutoPause: '自动暂停',
|
||||
scrollOutPlayerAutoLightOn: '自动开灯'
|
||||
},
|
||||
reloadable: true,
|
||||
dropdown:{
|
||||
key: 'triggerPlayerOutPlace',
|
||||
key: 'scrollOutPlayerTriggerPlace',
|
||||
items: ['视频顶部' ,'视频中间', '视频底部']
|
||||
}
|
||||
}
|
||||
|
||||
@ -257,9 +257,9 @@ export const settings = {
|
||||
autoPlayControl: true,
|
||||
cache: {},
|
||||
scrollOutPlayer: true,
|
||||
triggerPlayerOutPlace: '视频中间',
|
||||
autoPause: true,
|
||||
autoLightOn: true,
|
||||
scrollOutPlayerTriggerPlace: '视频中间',
|
||||
scrollOutPlayerAutoPause: true,
|
||||
scrollOutPlayerAutoLightOn: true,
|
||||
}
|
||||
const fixedSettings = {
|
||||
seedsToCoins: false,
|
||||
|
||||
6
src/global.d.ts
vendored
6
src/global.d.ts
vendored
@ -519,9 +519,9 @@ declare global {
|
||||
checkInCenter: boolean,
|
||||
fullscreenGiftBox: boolean,
|
||||
scrollOutPlayer: boolean,
|
||||
triggerPlayerOutPlace: string[],
|
||||
autoPause: boolean,
|
||||
autoLightOn: boolean,
|
||||
scrollOutPlayerTriggerPlace: string[],
|
||||
scrollOutPlayerAutoPause: boolean,
|
||||
scrollOutPlayerAutoLightOn: boolean,
|
||||
}
|
||||
const GM_info: MonkeyInfo
|
||||
function GM_xmlhttpRequest(details: MonkeyXhrDetails): { abort: () => void }
|
||||
|
||||
@ -76,9 +76,9 @@
|
||||
<checkbox indent="0" key="removeVotePopup" dependencies=""></checkbox>
|
||||
<checkbox indent="0" key="autoPlayControl" dependencies=""></checkbox>
|
||||
<checkbox indent="0" key="scrollOutPlayer" dependencies=""></checkbox>
|
||||
<dropdown indent="1" key="triggerPlayerOutPlace" dependencies="scrollOutPlayer"></dropdown>
|
||||
<checkbox indent="1" key="autoPause" dependencies="scrollOutPlayer"></checkbox>
|
||||
<checkbox indent="1" key="autoLightOn" dependencies="scrollOutPlayer"></checkbox>
|
||||
<dropdown indent="1" key="scrollOutPlayerTriggerPlace" dependencies="scrollOutPlayer"></dropdown>
|
||||
<checkbox indent="1" key="scrollOutPlayerAutoPause" dependencies="scrollOutPlayer"></checkbox>
|
||||
<checkbox indent="1" key="scrollOutPlayerAutoLightOn" dependencies="scrollOutPlayer"></checkbox>
|
||||
<category icon="style">样式</category>
|
||||
<li class="indent-0 folded">
|
||||
<label class="gui-settings-textbox-container">
|
||||
|
||||
@ -21,7 +21,7 @@ function getToTop(_mode: string, client: DOMRect): number {
|
||||
}
|
||||
|
||||
// run callback when video el scroll out.
|
||||
function handlePlayerOut(_mode: string, callback?: () => void) {
|
||||
let handlePlayerOut = function (_mode: string, callback?: () => void) {
|
||||
const videoClient = videoEl?.getBoundingClientRect();
|
||||
if (videoClient?.top && videoClient.height) {
|
||||
let toTop = getToTop(_mode, videoClient);
|
||||
@ -31,25 +31,27 @@ function handlePlayerOut(_mode: string, callback?: () => void) {
|
||||
window.addEventListener('scroll', onPlayerBackEvent, {
|
||||
passive: true,
|
||||
});
|
||||
// remove out listener when got out.
|
||||
window.removeEventListener('scroll', onPlayerOutEvent);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// run callback when video el scroll back.
|
||||
function handlePlayerBack(_mode: string, callback?: () => void) {
|
||||
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 lightOn = () => {};
|
||||
@ -75,38 +77,71 @@ async function initLights() {
|
||||
|
||||
function onPlayerOutEvent() {
|
||||
handlePlayerOut(mode, () => {
|
||||
if (settings.autoPause && !videoEl.paused) videoEl.pause();
|
||||
if (settings.scrollOutPlayerAutoPause && !videoEl.paused) videoEl.pause();
|
||||
// 满足条件: 自动开灯功能启用、自动关灯功能启用、没有启用自动暂停
|
||||
// 补充: 当启用自动关灯与自动暂停时, 自动开灯动作由自动暂停完成
|
||||
if (settings.autoLightOn && settings.autoLightOff && !settings.autoPause)
|
||||
if (
|
||||
settings.scrollOutPlayerAutoLightOn &&
|
||||
settings.autoLightOff &&
|
||||
!settings.scrollOutPlayerAutoPause
|
||||
)
|
||||
lightOn();
|
||||
});
|
||||
}
|
||||
|
||||
function onPlayerBackEvent() {
|
||||
handlePlayerBack(mode, () => {
|
||||
if (settings.autoPause && videoEl.paused) videoEl.play();
|
||||
if (settings.scrollOutPlayerAutoPause && videoEl.paused) videoEl.play();
|
||||
// 回来时自动关灯
|
||||
// 满足条件: 自动开灯功能启用、自动关灯功能启用、没有启用自动暂停、视频播放中
|
||||
if (settings.autoLightOn && settings.autoLightOff && !settings.autoPause && !videoEl.paused)
|
||||
if (
|
||||
settings.scrollOutPlayerAutoLightOn &&
|
||||
settings.autoLightOff &&
|
||||
!settings.scrollOutPlayerAutoPause &&
|
||||
!videoEl.paused
|
||||
)
|
||||
lightOff();
|
||||
});
|
||||
}
|
||||
|
||||
function addPlayerOutEvent() {
|
||||
window.addEventListener('scroll', onPlayerOutEvent, { passive: true });
|
||||
}
|
||||
|
||||
function removePlayerOutEvent() {
|
||||
window.removeEventListener('scroll', onPlayerOutEvent);
|
||||
}
|
||||
|
||||
function mountListener() {
|
||||
Observer.videoChange(async () => {
|
||||
videoEl.addEventListener('play', addPlayerOutEvent);
|
||||
// onPlayerOutEvent 不会在我们手动暂停视频时移除, 所以需要监听暂停.
|
||||
videoEl.addEventListener('pause', removePlayerOutEvent);
|
||||
videoEl.addEventListener('ended', removePlayerOutEvent);
|
||||
});
|
||||
}
|
||||
|
||||
async function setup() {
|
||||
await initLights();
|
||||
addSettingsListener('triggerPlayerOutPlace', (value) => (mode = value));
|
||||
videoEl = dq('.bilibili-player-video video') as HTMLVideoElement;
|
||||
window.addEventListener('scroll', onPlayerOutEvent, { passive: true });
|
||||
mountListener();
|
||||
}
|
||||
setup();
|
||||
|
||||
export default {
|
||||
reload: () => {
|
||||
window.addEventListener('scroll', onPlayerOutEvent, { passive: true });
|
||||
window.addEventListener('scroll', onPlayerOutEvent);
|
||||
mountListener();
|
||||
},
|
||||
unload: () => {
|
||||
window.removeEventListener('scroll', onPlayerBackEvent);
|
||||
// remove all listener
|
||||
Observer.videoChange(async () => {
|
||||
videoEl.removeEventListener('play', addPlayerOutEvent);
|
||||
videoEl.removeEventListener('pause', removePlayerOutEvent);
|
||||
videoEl.removeEventListener('ended', removePlayerOutEvent);
|
||||
});
|
||||
window.removeEventListener('scroll', onPlayerOutEvent);
|
||||
window.removeEventListener('scroll', onPlayerBackEvent);
|
||||
},
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user