diff --git a/src/js/player.js b/src/js/player.js index 6ee0199..3cdcb3c 100644 --- a/src/js/player.js +++ b/src/js/player.js @@ -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 ); } diff --git a/src/js/template.js b/src/js/template.js index 3f1154b..247b32e 100644 --- a/src/js/template.js +++ b/src/js/template.js @@ -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; } }