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:
FoundTheWOUT 2021-04-27 20:47:25 +08:00
parent b3cd04bb3b
commit a3aa0bf968
5 changed files with 59 additions and 24 deletions

View File

@ -681,13 +681,13 @@ Resource.manifest = {
scrollOutPlayer: {
displayNames: {
scrollOutPlayer: '当播放器退出页面时',
triggerPlayerOutPlace: '选定触发位置',
autoPause: '自动暂停',
autoLightOn: '自动开灯'
scrollOutPlayerTriggerPlace: '选定触发位置',
scrollOutPlayerAutoPause: '自动暂停',
scrollOutPlayerAutoLightOn: '自动开灯'
},
reloadable: true,
dropdown:{
key: 'triggerPlayerOutPlace',
key: 'scrollOutPlayerTriggerPlace',
items: ['视频顶部' ,'视频中间', '视频底部']
}
}

View File

@ -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
View File

@ -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 }

View File

@ -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">

View File

@ -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);
},
};