From 281334b7d9aa90ba8cfa3c8208946786f9aec45b Mon Sep 17 00:00:00 2001
From: Mitsuha <misakas@163.com>
Date: Wed, 14 Jul 2021 15:52:13 +0800
Subject: [PATCH] support multiple notices

---
 .eslintrc               |  2 +-
 src/css/notice.scss     | 61 +++++++++++++++++++++++++++++++++--------
 src/js/player.js        | 27 +++++++++++-------
 src/js/template.js      | 10 ++++++-
 src/template/player.art |  2 +-
 5 files changed, 78 insertions(+), 24 deletions(-)

diff --git a/.eslintrc b/.eslintrc
index 4e5307776..220835459 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -22,7 +22,7 @@
         "comma-style": 1,
         "func-call-spacing": 1,
         "keyword-spacing": 1,
-        "linebreak-style": 1,
+        "linebreak-style": 0,
         "no-multiple-empty-lines": 1,
         "space-infix-ops": 1,
         "arrow-spacing": 1,
diff --git a/src/css/notice.scss b/src/css/notice.scss
index 39b3414df..999b40024 100644
--- a/src/css/notice.scss
+++ b/src/css/notice.scss
@@ -1,14 +1,53 @@
-.dplayer-notice {
-    opacity: 0;
+.dplayer-notice-list{
     position: absolute;
     bottom: 60px;
     left: 20px;
-    font-size: 14px;
-    border-radius: 2px;
-    background: rgba(28, 28, 28, 0.9);
-    padding: 7px 20px;
-    transition: all .3s ease-in-out;
-    overflow: hidden;
-    color: #fff;
-    pointer-events: none;
-}
\ No newline at end of file
+
+    .dplayer-notice {
+        border-radius: 2px;
+        background: rgba(28, 28, 28, 0.9);
+        transition: all .3s ease-in-out;
+        overflow: hidden;
+        color: #fff;
+        display: table;
+        pointer-events: none;
+        animation: showNotice .3s ease 1 forwards;
+    }
+
+    .remove-notice{
+        animation: removeNotice .3s ease 1 forwards;
+    }
+}
+
+@keyframes showNotice {
+    from {
+        padding: 0;
+        font-size: 0;
+        margin-top: 0;
+    }
+    to {
+        padding: 7px 20px;
+        font-size: 14px;
+        margin-top: 5px;
+    }
+}
+
+@keyframes removeNotice {
+    0%{
+        padding: 7px 20px;
+        font-size: 14px;
+        margin-top: 5px;
+    }
+    20%{
+        font-size: 12px;
+    }
+    21%{
+        font-size: 0;
+        padding: 7px 10px;
+    }
+    100%{
+        padding: 0;
+        margin-top: 0;
+        font-size: 0;
+    }
+}
diff --git a/src/js/player.js b/src/js/player.js
index eb4bc85a6..856cca7af 100644
--- a/src/js/player.js
+++ b/src/js/player.js
@@ -577,17 +577,24 @@ class DPlayer {
     }
 
     notice(text, time = 2000, opacity = 0.8) {
-        this.template.notice.innerHTML = text;
-        this.template.notice.style.opacity = opacity;
-        if (this.noticeTime) {
-            clearTimeout(this.noticeTime);
-        }
-        this.events.trigger('notice_show', text);
+        const notice = Template.NewNotice(text, opacity);
+
+        this.template.noticeList.appendChild(notice);
+        this.events.trigger('notice_show', notice);
+
         if (time > 0) {
-            this.noticeTime = setTimeout(() => {
-                this.template.notice.style.opacity = 0;
-                this.events.trigger('notice_hide');
-            }, time);
+            setTimeout(
+                (function (e, dp) {
+                    return () => {
+                        e.addEventListener('animationend', () => {
+                            dp.template.noticeList.removeChild(e);
+                        });
+                        e.classList.add('remove-notice');
+                        dp.events.trigger('notice_hide');
+                    };
+                })(notice, this),
+                time
+            );
         }
     }
 
diff --git a/src/js/template.js b/src/js/template.js
index 7f5b5ad40..09d07cafb 100644
--- a/src/js/template.js
+++ b/src/js/template.js
@@ -86,7 +86,7 @@ class Template {
         this.qualityButton = this.container.querySelector('.dplayer-quality-icon');
         this.barPreview = this.container.querySelector('.dplayer-bar-preview');
         this.barWrap = this.container.querySelector('.dplayer-bar-wrap');
-        this.notice = this.container.querySelector('.dplayer-notice');
+        this.noticeList = this.container.querySelector('.dplayer-notice-list');
         this.infoPanel = this.container.querySelector('.dplayer-info-panel');
         this.infoPanelClose = this.container.querySelector('.dplayer-info-panel-close');
         this.infoVersion = this.container.querySelector('.dplayer-info-panel-item-version .dplayer-info-panel-item-data');
@@ -99,6 +99,14 @@ class Template {
         this.infoDanmakuApi = this.container.querySelector('.dplayer-info-panel-item-danmaku-api .dplayer-info-panel-item-data');
         this.infoDanmakuAmount = this.container.querySelector('.dplayer-info-panel-item-danmaku-amount .dplayer-info-panel-item-data');
     }
+
+    static NewNotice(text, opacity) {
+        const notice = document.createElement('div');
+        notice.classList.add('dplayer-notice');
+        notice.style.opacity = opacity;
+        notice.innerText = text;
+        return notice;
+    }
 }
 
 export default Template;
diff --git a/src/template/player.art b/src/template/player.art
index ece52345d..7ba53684b 100644
--- a/src/template/player.art
+++ b/src/template/player.art
@@ -251,7 +251,7 @@
         </div>
     {{ /each }}
 </div>
-<div class="dplayer-notice"></div>
+<div class="dplayer-notice-list"></div>
 <button class="dplayer-mobile-play">
     {{@ icons.play }}
 </button>
\ No newline at end of file