fix: repeated volume notice
This commit is contained in:
parent
602f8fdca9
commit
46722004d6
|
|
@ -43,6 +43,7 @@ class DPlayer {
|
|||
this.events = new Events();
|
||||
this.user = new User(this);
|
||||
this.container = this.options.container;
|
||||
this.noticeList = {};
|
||||
|
||||
this.container.classList.add('dplayer');
|
||||
if (!this.options.danmaku) {
|
||||
|
|
@ -293,7 +294,7 @@ class DPlayer {
|
|||
this.user.set('volume', percentage);
|
||||
}
|
||||
if (!nonotice) {
|
||||
this.notice(`${this.tran('volume')} ${(percentage * 100).toFixed(0)}%`);
|
||||
this.notice(`${this.tran('volume')} ${(percentage * 100).toFixed(0)}%`, undefined, undefined, 'volume');
|
||||
}
|
||||
|
||||
this.video.volume = percentage;
|
||||
|
|
@ -636,14 +637,28 @@ class DPlayer {
|
|||
});
|
||||
}
|
||||
|
||||
notice(text, time = 2000, opacity = 0.8) {
|
||||
const notice = Template.NewNotice(text, opacity);
|
||||
notice(text, time = 2000, opacity = 0.8, id) {
|
||||
let oldNoticeEle;
|
||||
if (id) {
|
||||
oldNoticeEle = document.getElementById(`dplayer-notice-${id}`);
|
||||
if (oldNoticeEle) {
|
||||
oldNoticeEle.innerHTML = text;
|
||||
}
|
||||
if (this.noticeList[id]) {
|
||||
clearTimeout(this.noticeList[id]);
|
||||
this.noticeList[id] = null;
|
||||
}
|
||||
}
|
||||
if (!oldNoticeEle) {
|
||||
const notice = Template.NewNotice(text, opacity, id);
|
||||
this.template.noticeList.appendChild(notice);
|
||||
oldNoticeEle = notice;
|
||||
}
|
||||
|
||||
this.template.noticeList.appendChild(notice);
|
||||
this.events.trigger('notice_show', notice);
|
||||
this.events.trigger('notice_show', oldNoticeEle);
|
||||
|
||||
if (time > 0) {
|
||||
setTimeout(
|
||||
this.noticeList[id] = setTimeout(
|
||||
(function (e, dp) {
|
||||
return () => {
|
||||
e.addEventListener('animationend', () => {
|
||||
|
|
@ -651,8 +666,9 @@ class DPlayer {
|
|||
});
|
||||
e.classList.add('remove-notice');
|
||||
dp.events.trigger('notice_hide');
|
||||
this.noticeList[id] = null;
|
||||
};
|
||||
})(notice, this),
|
||||
})(oldNoticeEle, this),
|
||||
time
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -106,11 +106,14 @@ class Template {
|
|||
this.infoDanmakuAmount = this.container.querySelector('.dplayer-info-panel-item-danmaku-amount .dplayer-info-panel-item-data');
|
||||
}
|
||||
|
||||
static NewNotice(text, opacity) {
|
||||
static NewNotice(text, opacity, id) {
|
||||
const notice = document.createElement('div');
|
||||
notice.classList.add('dplayer-notice');
|
||||
notice.style.opacity = opacity;
|
||||
notice.innerText = text;
|
||||
if (id) {
|
||||
notice.id = `dplayer-notice-${id}`;
|
||||
}
|
||||
return notice;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue