Skip to content

Commit

Permalink
fix show danmaku bug
Browse files Browse the repository at this point in the history
  • Loading branch information
@DIYgod
DIYgod committed Jul 27, 2016
1 parent 95d1138 commit 572db88
Show file tree
Hide file tree
Showing 5 changed files with 59 additions and 98 deletions.
2 changes: 1 addition & 1 deletion demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
4 changes: 2 additions & 2 deletions dist/DPlayer.min.js
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion dist/DPlayer.min.js.map
View file

Large diffs are not rendered by default.

47 changes: 4 additions & 43 deletions src/DPlayer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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;
Expand All @@ -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];
Expand All @@ -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;
}
Expand Down
102 changes: 51 additions & 51 deletions src/DPlayer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
}
Expand Down

0 comments on commit 572db88

Please sign in to comment.