Skip to content

Commit 4552dd0

Browse files
DIYgodDIYgod
committed
lrc show/hide button in fixed mode
1 parent a002a4b commit 4552dd0

10 files changed

Lines changed: 86 additions & 10 deletions

File tree

‎src/assets/lrc.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/css/index.scss‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -150,7 +150,8 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
150150

151151
.aplayer-icon-back,
152152
.aplayer-icon-play,
153-
.aplayer-icon-forward {
153+
.aplayer-icon-forward,
154+
.aplayer-icon-lrc {
154155
display: inline-block;
155156
}
156157

@@ -230,10 +231,17 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
230231
.aplayer-icon-order,
231232
.aplayer-icon-back,
232233
.aplayer-icon-play,
233-
.aplayer-icon-forward {
234+
.aplayer-icon-forward,
235+
.aplayer-icon-lrc {
234236
display: none;
235237
}
236238

239+
.aplayer-icon-lrc-inactivity {
240+
svg {
241+
opacity: 0.4;
242+
}
243+
}
244+
237245
.aplayer-icon-forward {
238246
transform: rotate(180deg);
239247
}
@@ -547,6 +555,10 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
547555
}
548556
}
549557

558+
&.aplayer-lrc-hide {
559+
display: none;
560+
}
561+
550562
.aplayer-lrc-contents {
551563
width: 100%;
552564
transition: all 0.5s ease-out;

‎src/js/controller.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ class Controller {
1515
}
1616
this.initMiniSwitcher();
1717
this.initSkipButton();
18+
this.initLrcButton();
1819
}
1920

2021
initPlayButton () {
@@ -154,6 +155,19 @@ class Controller {
154155
this.player.toggle();
155156
});
156157
}
158+
159+
initLrcButton () {
160+
this.player.template.lrcButton.addEventListener('click', () => {
161+
if (this.player.template.lrcButton.classList.contains('aplayer-icon-lrc-inactivity')) {
162+
this.player.template.lrcButton.classList.remove('aplayer-icon-lrc-inactivity');
163+
this.player.lrc && this.player.lrc.show();
164+
}
165+
else {
166+
this.player.template.lrcButton.classList.add('aplayer-icon-lrc-inactivity');
167+
this.player.lrc && this.player.lrc.hide();
168+
}
169+
});
170+
}
157171
}
158172

159173
export default Controller;

‎src/js/events.js‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,10 @@ class Events {
99
'timeupdate', 'volumechange', 'waiting'
1010
];
1111
this.playerEvents = [
12-
'destroy', 'listshow', 'listhide', 'listadd', 'listremove', 'listswitch', 'listclear', 'noticeshow', 'noticehide'
12+
'destroy',
13+
'listshow', 'listhide', 'listadd', 'listremove', 'listswitch', 'listclear',
14+
'noticeshow', 'noticehide',
15+
'lrcshow', 'lrchide',
1316
];
1417
}
1518

‎src/js/icons.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import loopNone from '../assets/loop-none.svg';
1212
import loading from '../assets/loading.svg';
1313
import right from '../assets/right.svg';
1414
import skip from '../assets/skip.svg';
15+
import lrc from '../assets/lrc.svg';
1516

1617
const Icons = {
1718
play: play,
@@ -28,6 +29,7 @@ const Icons = {
2829
loading: loading,
2930
right: right,
3031
skip: skip,
32+
lrc: lrc,
3133
};
3234

3335
export default Icons;

‎src/js/list.js‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,9 @@ class List {
5252
}
5353

5454
add (audios) {
55-
this.player.events.trigger('listadd', audios);
55+
this.player.events.trigger('listadd', {
56+
audios: audios,
57+
});
5658
const wasSingle = !(this.audios.length > 1);
5759
const wasEmpty = this.audios.length === 0;
5860

@@ -84,7 +86,9 @@ class List {
8486
}
8587

8688
remove (index) {
87-
this.player.events.trigger('listremove', index);
89+
this.player.events.trigger('listremove', {
90+
index: index,
91+
});
8892
if (this.audios[index]) {
8993
if (this.audios.length > 1) {
9094
const list = this.player.container.querySelectorAll('.aplayer-list li');
@@ -120,7 +124,9 @@ class List {
120124
}
121125

122126
switch (index) {
123-
this.player.events.trigger('listswitch', index);
127+
this.player.events.trigger('listswitch', {
128+
index: index,
129+
});
124130

125131
if (typeof index !== 'undefined' && this.audios[index]) {
126132
this.index = index;

‎src/js/lrc.js‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,25 @@ class Lrc {
1111
this.current = [];
1212
}
1313

14+
show () {
15+
this.player.events.trigger('lrcshow');
16+
this.player.template.lrcWrap.classList.remove('aplayer-lrc-hide');
17+
}
18+
19+
hide () {
20+
this.player.events.trigger('lrchide');
21+
this.player.template.lrcWrap.classList.add('aplayer-lrc-hide');
22+
}
23+
24+
toggle () {
25+
if (this.player.template.lrcWrap.classList.contains('aplayer-lrc-hide')) {
26+
this.show();
27+
}
28+
else {
29+
this.hide();
30+
}
31+
}
32+
1433
update (currentTime = this.player.audio.currentTime) {
1534
if (this.index > this.current.length - 1 || currentTime < this.current[this.index][0] || (!this.current[this.index + 1] || currentTime >= this.current[this.index + 1][0])) {
1635
for (let i = 0; i < this.current.length; i++) {

‎src/js/player.js‎

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,7 @@ class APlayer {
9191
this.list = new List(this);
9292

9393
this.initAudio();
94+
this.bindEvents();
9495
if (this.options.order === 'random') {
9596
this.list.switch(this.randomOrder[0]);
9697
}
@@ -116,6 +117,10 @@ class APlayer {
116117
});
117118
}
118119

120+
this.volume(this.storage.get('volume'), true);
121+
}
122+
123+
bindEvents () {
119124
this.on('play', () => {
120125
if (this.paused) {
121126
this.setUIPlaying();
@@ -153,10 +158,11 @@ class APlayer {
153158
});
154159

155160
// audio download error: an error occurs
161+
let skipTime;
156162
this.on('error', () => {
157163
if (this.list.audios.length) {
158164
this.notice('An audio error has occurred, player will skip forward in 2 seconds.');
159-
setTimeout(() => {
165+
skipTime = setTimeout(() => {
160166
this.skipForward();
161167
if (!this.paused) {
162168
this.play();
@@ -167,6 +173,9 @@ class APlayer {
167173
this.notice('An audio error has occurred.');
168174
}
169175
});
176+
this.events.on('listswitch', () => {
177+
skipTime && clearTimeout(skipTime);
178+
});
170179

171180
// multiple audio play
172181
this.on('ended', () => {
@@ -201,8 +210,6 @@ class APlayer {
201210
this.play();
202211
}
203212
});
204-
205-
this.volume(this.storage.get('volume'), true);
206213
}
207214

208215
setAudio (audio) {
@@ -434,7 +441,9 @@ class APlayer {
434441
if (this.noticeTime) {
435442
clearTimeout(this.noticeTime);
436443
}
437-
this.events.trigger('noticeshow', text);
444+
this.events.trigger('noticeshow', {
445+
text: text,
446+
});
438447
if (time) {
439448
this.noticeTime = setTimeout(() => {
440449
this.template.notice.style.opacity = 0;

‎src/js/template.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ class Template {
2828
});
2929

3030
this.lrc = this.container.querySelector('.aplayer-lrc-contents');
31+
this.lrcWrap = this.container.querySelector('.aplayer-lrc');
3132
this.ptime = this.container.querySelector('.aplayer-ptime');
3233
this.info = this.container.querySelector('.aplayer-info');
3334
this.time = this.container.querySelector('.aplayer-time');
@@ -56,6 +57,7 @@ class Template {
5657
this.skipBackButton = this.container.querySelector('.aplayer-icon-back');
5758
this.skipForwardButton = this.container.querySelector('.aplayer-icon-forward');
5859
this.skipPlayButton = this.container.querySelector('.aplayer-icon-play');
60+
this.lrcButton = this.container.querySelector('.aplayer-icon-lrc');
5961
}
6062
}
6163

‎src/template/player.art‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,9 @@
5454
<button type="button" class="aplayer-icon aplayer-icon-menu">
5555
{{@ icons.menu }}
5656
</button>
57+
<button type="button" class="aplayer-icon aplayer-icon-lrc">
58+
{{@ icons.lrc }}
59+
</button>
5760
</div>
5861
</div>
5962
</div>
@@ -131,6 +134,9 @@
131134
<button type="button" class="aplayer-icon aplayer-icon-menu">
132135
{{@ icons.menu }}
133136
</button>
137+
<button type="button" class="aplayer-icon aplayer-icon-lrc">
138+
{{@ icons.lrc }}
139+
</button>
134140
</div>
135141
</div>
136142
</div>

0 commit comments

Comments
 (0)