fix danmaku showing bug and small ui probelm on live mode

src/DPlayer.scss

@@ -754,7 +754,7 @@
 
                 .dplayer-volume-bar-wrap {
                     display: inline-block;
-                    margin: 0 5px 0 -5px;
+                    margin: 0 10px 0 -5px;
                     vertical-align: middle;
                     height: 100%;
 
@@ -814,6 +814,14 @@
                     overflow: hidden;
                     z-index: 2;
 
+                    & > div {
+                        display: none;
+
+                        &.dplayer-setting-origin-panel {
+                            display: block;
+                        }
+                    }
+
                     &.dplayer-setting-box-open {
                         transform: scale(1);
                     }
@@ -823,6 +831,15 @@
                         height: 180px;
                         text-align: center;
                     }
+
+                    &.dplayer-setting-box-speed {
+                        .dplayer-setting-origin-panel {
+                            display: none;
+                        }
+                        .dplayer-setting-speed-panel {
+                            display: block;
+                        }
+                    }
                 }
 
                 .dplayer-setting-item,

src/danmaku.js

@@ -141,122 +141,124 @@ class Danmaku {
      * type - danmaku type, `right` `top` `bottom`, default: `right`
      */
     draw (dan) {
-        const itemHeight = this.options.height;
-        const danWidth = this.container.offsetWidth;
-        const danHeight = this.container.offsetHeight;
-        const itemY = parseInt(danHeight / itemHeight);
-
-        const danItemRight = (ele) => {
-            const eleWidth = ele.offsetWidth || parseInt(ele.style.width);
-            const eleRight = ele.getBoundingClientRect().right || this.container.getBoundingClientRect().right + eleWidth;
-            return this.container.getBoundingClientRect().right - eleRight;
-        };
-
-        const danSpeed = (width) => (danWidth + width) / 5;
-
-        const getTunnel = (ele, type, width) => {
-            const tmp = danWidth / danSpeed(width);
-
-            for (let i = 0; this.unlimited || i < itemY; i++) {
-                const item = this.danTunnel[type][i + ''];
-                if (item && item.length) {
-                    if (type !== 'right') {
-                        continue;
-                    }
-                    for (let j = 0; j < item.length; j++) {
-                        const danRight = danItemRight(item[j]) - 10;
-                        if (danRight <= danWidth - tmp * danSpeed(parseInt(item[j].style.width)) || danRight <= 0) {
-                            break;
+        if (this.showing) {
+            const itemHeight = this.options.height;
+            const danWidth = this.container.offsetWidth;
+            const danHeight = this.container.offsetHeight;
+            const itemY = parseInt(danHeight / itemHeight);
+
+            const danItemRight = (ele) => {
+                const eleWidth = ele.offsetWidth || parseInt(ele.style.width);
+                const eleRight = ele.getBoundingClientRect().right || this.container.getBoundingClientRect().right + eleWidth;
+                return this.container.getBoundingClientRect().right - eleRight;
+            };
+
+            const danSpeed = (width) => (danWidth + width) / 5;
+
+            const getTunnel = (ele, type, width) => {
+                const tmp = danWidth / danSpeed(width);
+
+                for (let i = 0; this.unlimited || i < itemY; i++) {
+                    const item = this.danTunnel[type][i + ''];
+                    if (item && item.length) {
+                        if (type !== 'right') {
+                            continue;
                         }
-                        if (j === item.length - 1) {
-                            this.danTunnel[type][i + ''].push(ele);
-                            ele.addEventListener('animationend', () => {
-                                this.danTunnel[type][i + ''].splice(0, 1);
-                            });
-                            return i % itemY;
+                        for (let j = 0; j < item.length; j++) {
+                            const danRight = danItemRight(item[j]) - 10;
+                            if (danRight <= danWidth - tmp * danSpeed(parseInt(item[j].style.width)) || danRight <= 0) {
+                                break;
+                            }
+                            if (j === item.length - 1) {
+                                this.danTunnel[type][i + ''].push(ele);
+                                ele.addEventListener('animationend', () => {
+                                    this.danTunnel[type][i + ''].splice(0, 1);
+                                });
+                                return i % itemY;
+                            }
                         }
                     }
+                    else {
+                        this.danTunnel[type][i + ''] = [ele];
+                        ele.addEventListener('animationend', () => {
+                            this.danTunnel[type][i + ''].splice(0, 1);
+                        });
+                        return i % itemY;
+                    }
                 }
-                else {
-                    this.danTunnel[type][i + ''] = [ele];
-                    ele.addEventListener('animationend', () => {
-                        this.danTunnel[type][i + ''].splice(0, 1);
-                    });
-                    return i % itemY;
-                }
-            }
-            return -1;
-        };
-
-        if (Object.prototype.toString.call(dan) !== '[object Array]') {
-            dan = [dan];
-        }
-
-        const docFragment = document.createDocumentFragment();
+                return -1;
+            };
 
-        for (let i = 0; i < dan.length; i++) {
-            if (!dan[i].type) {
-                dan[i].type = 'right';
-            }
-            if (!dan[i].color) {
-                dan[i].color = '#fff';
-            }
-            const item = document.createElement(`div`);
-            item.classList.add(`dplayer-danmaku-item`);
-            item.classList.add(`dplayer-danmaku-${dan[i].type}`);
-            if (dan[i].border) {
-                item.innerHTML = `<span style="border:${dan[i].border}">${dan[i].text}</span>`;
-            }
-            else {
-                item.innerHTML = dan[i].text;
+            if (Object.prototype.toString.call(dan) !== '[object Array]') {
+                dan = [dan];
             }
-            item.style.opacity = this._opacity;
-            item.style.color = dan[i].color;
-            item.addEventListener('animationend', () => {
-                this.container.removeChild(item);
-            });
 
-            const itemWidth = this._measure(dan[i].text);
-            let tunnel;
+            const docFragment = document.createDocumentFragment();
 
-            // adjust
-            switch (dan[i].type) {
-            case 'right':
-                tunnel = getTunnel(item, dan[i].type, itemWidth);
-                if (tunnel >= 0) {
-                    item.style.width = itemWidth + 1 + 'px';
-                    item.style.top = itemHeight * tunnel + 'px';
-                    item.style.transform = `translateX(-${danWidth}px)`;
+            for (let i = 0; i < dan.length; i++) {
+                if (!dan[i].type) {
+                    dan[i].type = 'right';
                 }
-                break;
-            case 'top':
-                tunnel = getTunnel(item, dan[i].type);
-                if (tunnel >= 0) {
-                    item.style.top = itemHeight * tunnel + 'px';
+                if (!dan[i].color) {
+                    dan[i].color = '#fff';
                 }
-                break;
-            case 'bottom':
-                tunnel = getTunnel(item, dan[i].type);
-                if (tunnel >= 0) {
-                    item.style.bottom = itemHeight * tunnel + 'px';
+                const item = document.createElement(`div`);
+                item.classList.add(`dplayer-danmaku-item`);
+                item.classList.add(`dplayer-danmaku-${dan[i].type}`);
+                if (dan[i].border) {
+                    item.innerHTML = `<span style="border:${dan[i].border}">${dan[i].text}</span>`;
+                }
+                else {
+                    item.innerHTML = dan[i].text;
+                }
+                item.style.opacity = this._opacity;
+                item.style.color = dan[i].color;
+                item.addEventListener('animationend', () => {
+                    this.container.removeChild(item);
+                });
+
+                const itemWidth = this._measure(dan[i].text);
+                let tunnel;
+
+                // adjust
+                switch (dan[i].type) {
+                case 'right':
+                    tunnel = getTunnel(item, dan[i].type, itemWidth);
+                    if (tunnel >= 0) {
+                        item.style.width = itemWidth + 1 + 'px';
+                        item.style.top = itemHeight * tunnel + 'px';
+                        item.style.transform = `translateX(-${danWidth}px)`;
+                    }
+                    break;
+                case 'top':
+                    tunnel = getTunnel(item, dan[i].type);
+                    if (tunnel >= 0) {
+                        item.style.top = itemHeight * tunnel + 'px';
+                    }
+                    break;
+                case 'bottom':
+                    tunnel = getTunnel(item, dan[i].type);
+                    if (tunnel >= 0) {
+                        item.style.bottom = itemHeight * tunnel + 'px';
+                    }
+                    break;
+                default:
+                    console.error(`Can't handled danmaku type: ${dan[i].type}`);
                 }
-                break;
-            default:
-                console.error(`Can't handled danmaku type: ${dan[i].type}`);
-            }
 
-            if (tunnel >= 0) {
-                // move
-                item.classList.add(`dplayer-danmaku-move`);
+                if (tunnel >= 0) {
+                    // move
+                    item.classList.add(`dplayer-danmaku-move`);
 
-                // insert
-                docFragment.appendChild(item);
+                    // insert
+                    docFragment.appendChild(item);
+                }
             }
-        }
 
-        this.container.appendChild(docFragment);
+            this.container.appendChild(docFragment);
 
-        return docFragment;
+            return docFragment;
+        }
     }
 
     play () {