feat: 自动暂停

This commit is contained in:
FoundTheWOUT 2021-04-27 11:27:57 +08:00
parent cb086664f4
commit 530fea0cc3
5 changed files with 90 additions and 0 deletions

View File

@ -678,5 +678,15 @@ Resource.manifest = {
},
},
autoPlayControl: '传统连播模式',
autoPauseVideo: {
displayNames: {
autoPauseVideo: '自动暂停视频',
triggerPausePlace: '触发暂停位置'
},
dropdown:{
key: 'triggerPausePlace',
items: ['视频顶部' ,'视频中间', '视频底部']
}
}
}
export const resourceManifest = Resource.manifest

View File

@ -256,6 +256,8 @@ export const settings = {
fullscreenGiftBox: false,
autoPlayControl: true,
cache: {},
autoPauseVideo: true,
triggerPausePlace: '视频中间',
}
const fixedSettings = {
seedsToCoins: false,

2
src/global.d.ts vendored
View File

@ -518,6 +518,8 @@ declare global {
liveSpeedBoost: boolean,
checkInCenter: boolean,
fullscreenGiftBox: boolean,
autoPauseVideo: boolean,
triggerPausePlace: string[],
}
const GM_info: MonkeyInfo
function GM_xmlhttpRequest(details: MonkeyXhrDetails): { abort: () => void }

View File

@ -75,6 +75,8 @@
<checkbox indent="0" key="removeVideoPopup" dependencies=""></checkbox>
<checkbox indent="0" key="removeVotePopup" dependencies=""></checkbox>
<checkbox indent="0" key="autoPlayControl" dependencies=""></checkbox>
<checkbox indent="0" key="autoPauseVideo" dependencies=""></checkbox>
<dropdown indent="1" key="triggerPausePlace" dependencies="autoPauseVideo"></dropdown>
<category icon="style">样式</category>
<li class="indent-0 folded">
<label class="gui-settings-textbox-container">

View File

@ -0,0 +1,74 @@
const video = dq('.bilibili-player-video video') as HTMLVideoElement;
let mode = '视频中间';
enum MODE {
TOP = '视频顶部',
MID = '视频中间',
BOT = '视频底部',
}
function getToTop(_mode: string, client: DOMRect): number {
switch (_mode) {
case MODE.TOP:
return client?.top;
case MODE.MID:
return client?.top + client?.height / 2;
case MODE.BOT:
return client?.top + client?.height;
default:
return 0;
}
}
// run callback when video el scroll out.
/**
*
* @param _mode - when callback should trigger
* @param callback
* @param handelScrollBack - a func which called onVideoBack
*/
function onVideoOut(_mode: string, callback?: () => void) {
const videoClient = video?.getBoundingClientRect();
if (videoClient?.top && videoClient.height) {
let toTop = getToTop(_mode, videoClient);
if (!video.paused && toTop <= 0) {
callback ? callback() : '';
window.removeEventListener('scroll', onVideoOutEvent);
// get ready to check when the video el came back.
window.addEventListener('scroll', onVideoBackEvent, {
passive: true,
});
}
}
}
function onVideoOutEvent() {
onVideoOut(mode, () => video.pause());
}
// run callback when video el scroll back.
function onVideoBack(_mode: string, callback?: () => void) {
const videoClient = video?.getBoundingClientRect();
if (videoClient?.top && videoClient.height) {
let toTop = getToTop(_mode, videoClient);
if (video.paused && toTop >= 0) {
callback ? callback() : '';
// this is do by
// window.addEventListener('scroll',onVideoOut)
window.removeEventListener('scroll', onVideoBackEvent);
}
}
}
function onVideoBackEvent() {
onVideoBack(mode, () => video.play());
}
(async () => {
addSettingsListener('triggerPausePlace', (value) => (mode = value));
Observer.videoChange(async () => {
video.addEventListener('play', () => {
window.addEventListener('scroll', onVideoOutEvent, { passive: true });
});
});
})();