fix show danmaku bug

demo/index.html

@@ -49,7 +49,7 @@
 <div class="container">
     <h1>DPlayer</h1>
     <h2>Wow, such a lovely HTML5 danmaku video player</h2>
-    <p>Made by <a href="https://www.anotherhome.net/" target="_blank">DIYgod</a>. Available on <a href="https://github.com/DIYgod/DPlayer" target="_blank">GitHub</a>. Licensed MIT.</p>
+    <p>Made by <a href="https://www.anotherhome.net/" target="_blank">DIYgod</a>. Available on <a href="https://github.com/DIYgod/DPlayer" target="_blank">GitHub</a>. Licensed SATA.</p>
     <hr>
     <div class="dplayer"></div>
 </div>

src/DPlayer.js

@@ -579,14 +579,14 @@ class DPlayer {
                     <div class="dplayer-setting-item dplayer-setting-loop">
                         <span class="dplayer-label">${this.getTran('Loop')}</span>
                         <div class="dplayer-toggle">
-                            <input class="dplayer-toggle-setting-input" type="checkbox" name="dplayer-toggle" id="dplayer-toggle">
+                            <input class="dplayer-toggle-setting-input" type="checkbox" name="dplayer-toggle">
                             <label for="dplayer-toggle"></label>
                         </div>
                     </div>
                     <div class="dplayer-setting-item dplayer-setting-showdan">
                         <span class="dplayer-label">${this.getTran('Danmaku')}</span>
                         <div class="dplayer-toggle">
-                            <input class="dplayer-showdan-setting-input" type="checkbox" name="dplayer-toggle-dan" id="dplayer-toggle">
+                            <input class="dplayer-showdan-setting-input" type="checkbox" name="dplayer-toggle-dan">
                             <label for="dplayer-toggle-dan"></label>
                         </div>
                     </div>
@@ -660,6 +660,7 @@ class DPlayer {
             loopToggle.checked = this.loop;
 
             loopEle.addEventListener('click', () => {
+                console.log('loop1');
                 loopToggle.checked = !loopToggle.checked;
                 if (loopToggle.checked) {
                     this.loop = true;
@@ -671,17 +672,6 @@ class DPlayer {
                 }
                 closeSetting();
             });
-            loopToggle.addEventListener('change', () => {
-                if (loopToggle.checked) {
-                    this.loop = true;
-                    this.audio.loop = this.loop;
-                }
-                else {
-                    this.loop = false;
-                    this.audio.loop = this.loop;
-                }
-                closeSetting();
-            });
 
             // show danmaku control
             const showDanEle = this.element.getElementsByClassName('dplayer-setting-showdan')[0];
@@ -697,36 +687,7 @@ class DPlayer {
                         for (let i = 0; i < this.dan.length; i++) {
                             if (this.dan[i].time >= this.audio.currentTime) {
                                 this.danIndex = i;
-                                return;
-                            }
-                            this.danIndex = this.dan.length;
-                        }
-                        this.danmakuTime = setInterval(() => {
-                            let item = this.dan[this.danIndex];
-                            while (item && this.audio.currentTime >= parseFloat(item.time)) {
-                                this.danmakuIn(item.text, item.color, item.type);
-                                item = this.dan[++this.danIndex];
-                            }
-                        }, 0);
-                    }
-                }
-                else {
-                    this.showdan = false;
-                    if (this.option.danmaku) {
-                        clearInterval(this.danmakuTime);
-                        danContainer.innerHTML = '';
-                    }
-                }
-                closeSetting();
-            });
-            showDanToggle.addEventListener('change', () => {
-                if (showDanToggle.checked) {
-                    this.showdan = true;
-                    if (this.option.danmaku) {
-                        for (let i = 0; i < this.dan.length; i++) {
-                            if (this.dan[i].time >= this.audio.currentTime) {
-                                this.danIndex = i;
-                                return;
+                                break;
                             }
                             this.danIndex = this.dan.length;
                         }

src/DPlayer.scss

@@ -791,63 +791,63 @@
                 font-size: 0;
                 vertical-align: middle;
                 float: right;
-            }
 
-            input#dplayer-toggle {
-                max-height: 0;
-                max-width: 0;
-                display: none;
-            }
-            input#dplayer-toggle + label {
-                display: inline-block;
-                position: relative;
-                box-shadow: rgb(223, 223, 223) 0 0 0 0 inset;
-                border: 1px solid rgb(223, 223, 223);
-                height: 20px;
-                width: 32px;
-                border-radius: 10px;
-                box-sizing: border-box;
-                cursor: pointer;
-                transition: .2s ease-in-out;
-            }
+                input {
+                    max-height: 0;
+                    max-width: 0;
+                    display: none;
+                }
+                input + label {
+                    display: inline-block;
+                    position: relative;
+                    box-shadow: rgb(223, 223, 223) 0 0 0 0 inset;
+                    border: 1px solid rgb(223, 223, 223);
+                    height: 20px;
+                    width: 32px;
+                    border-radius: 10px;
+                    box-sizing: border-box;
+                    cursor: pointer;
+                    transition: .2s ease-in-out;
+                }
 
-            input#dplayer-toggle + label:before {
-                content: "";
-                position: absolute;
-                display: block;
-                height: 18px;
-                width: 18px;
-                top: 0;
-                left: 0;
-                border-radius: 15px;
-                transition: .2s ease-in-out;
-            }
+                input + label:before {
+                    content: "";
+                    position: absolute;
+                    display: block;
+                    height: 18px;
+                    width: 18px;
+                    top: 0;
+                    left: 0;
+                    border-radius: 15px;
+                    transition: .2s ease-in-out;
+                }
 
-            input#dplayer-toggle + label:after {
-                content: "";
-                position: absolute;
-                display: block;
-                left: 0;
-                top: 0;
-                border-radius: 15px;
-                background: #fff;
-                transition: .2s ease-in-out;
-                box-shadow: 0 1px 3px rgba(0,0,0,0.4);
-                height: 18px;
-                width: 18px;
-            }
+                input + label:after {
+                    content: "";
+                    position: absolute;
+                    display: block;
+                    left: 0;
+                    top: 0;
+                    border-radius: 15px;
+                    background: #fff;
+                    transition: .2s ease-in-out;
+                    box-shadow: 0 1px 3px rgba(0,0,0,0.4);
+                    height: 18px;
+                    width: 18px;
+                }
 
-            input#dplayer-toggle:checked + label {
-                border-color: rgba(255, 255, 255, 0.5);
-            }
+                input:checked + label {
+                    border-color: rgba(255, 255, 255, 0.5);
+                }
 
-            input#dplayer-toggle:checked + label:before {
-                width: 30px;
-                background: rgba(255, 255, 255, 0.5);
-            }
+                input:checked + label:before {
+                    width: 30px;
+                    background: rgba(255, 255, 255, 0.5);
+                }
 
-            input#dplayer-toggle:checked + label:after {
-                left: 12px;
+                input:checked + label:after {
+                    left: 12px;
+                }
             }
         }
     }