Skip to content

Commit a002a4b

Browse files
DIYgodDIYgod
committed
fixed player
1 parent 20e2bd3 commit a002a4b

16 files changed

Lines changed: 383 additions & 60 deletions

File tree

‎demo/demo.js‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -186,4 +186,20 @@ const ap7 = new APlayer({
186186
}
187187
}
188188
}
189+
});
190+
191+
let ap8;
192+
$.ajax({
193+
url: 'https://api.i-meto.com/meting/api?server=netease&type=playlist&id=35798529',
194+
success: function (list) {
195+
ap8 = new APlayer({
196+
element: document.getElementById('player8'),
197+
mutex: true,
198+
theme: '#ad7a86',
199+
order: 'random',
200+
lrcType: 3,
201+
fixed: true,
202+
audio: JSON.parse(list)
203+
});
204+
}
189205
});

‎demo/index.html‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
max-width: 32rem;
1313
margin-left: auto;
1414
margin-right: auto;
15-
margin-bottom: 50px;
15+
margin-bottom: 150px;
1616
}
1717
h1 {
1818
font-size: 54px;
@@ -96,10 +96,14 @@ <h3>Narrow</h3>
9696
<h3>HLS</h3>
9797
<div id="player6" class="aplayer"></div>
9898
<div id="player7" class="aplayer"></div>
99+
<div id="player8" class="aplayer"></div>
99100
</div>
100101
<script>
101-
var vConsole = new VConsole();
102+
if (/mobile/i.test(window.navigator.userAgent)) {
103+
new VConsole();
104+
}
102105
</script>
106+
<script src="https://cdn.jsdelivr.net/npm/jquery"></script>
103107
<script src="demo.js"></script>
104108
</body>
105109
</html>

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@
5454
},
5555
"dependencies": {
5656
"balloon-css": "^0.5.0",
57-
"promise-polyfill": "7.1.0"
57+
"promise-polyfill": "7.1.0",
58+
"smoothscroll": "0.4.0"
5859
}
5960
}

‎src/assets/right.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/assets/skip.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎src/css/index.scss‎

Lines changed: 148 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,114 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
7373
}
7474
}
7575

76+
&.aplayer-fixed {
77+
position: fixed;
78+
bottom: 0;
79+
left: 0;
80+
right: 0;
81+
margin: 0;
82+
z-index: 99;
83+
overflow: visible;
84+
max-width: 400px;
85+
box-shadow: none;
86+
87+
.aplayer-list {
88+
margin-bottom: 66px;
89+
}
90+
91+
.aplayer-body {
92+
position: fixed;
93+
bottom: 0;
94+
left: 0;
95+
right: 0;
96+
margin: 0;
97+
z-index: 99;
98+
background: #fff;
99+
padding-right: 18px;
100+
transition: all 0.3s ease;
101+
max-width: 400px;
102+
}
103+
104+
.aplayer-lrc {
105+
display: block;
106+
position: fixed;
107+
bottom: 10px;
108+
left: 0;
109+
right: 0;
110+
margin: 0;
111+
z-index: 98;
112+
pointer-events: none;
113+
text-shadow: 0 0 1px #fff, 0 0 10px #fff;
114+
115+
&:before,
116+
&:after {
117+
display: none;
118+
}
119+
}
120+
121+
.aplayer-info {
122+
transform: scaleX(1);
123+
transform-origin: 0 0;
124+
transition: all 0.3s ease;
125+
border-bottom: none;
126+
border-top: 1px solid #e9e9e9;
127+
128+
.aplayer-music {
129+
width: calc(100% - 105px);
130+
}
131+
}
132+
133+
.aplayer-miniswitcher {
134+
display: block;
135+
}
136+
137+
&.aplayer-narrow {
138+
.aplayer-info {
139+
display: block;
140+
transform: scaleX(0);
141+
}
142+
.aplayer-body {
143+
width: $aplayer-height !important;
144+
}
145+
146+
.aplayer-miniswitcher .aplayer-icon {
147+
transform: rotateY(0);
148+
}
149+
}
150+
151+
.aplayer-icon-back,
152+
.aplayer-icon-play,
153+
.aplayer-icon-forward {
154+
display: inline-block;
155+
}
156+
157+
.aplayer-icon-back,
158+
.aplayer-icon-play,
159+
.aplayer-icon-forward,
160+
.aplayer-icon-menu {
161+
position: absolute;
162+
bottom: 27px;
163+
width: 20px;
164+
height: 20px;
165+
}
166+
167+
.aplayer-icon-back {
168+
right: 75px;
169+
}
170+
171+
.aplayer-icon-play {
172+
right: 50px;
173+
}
174+
175+
.aplayer-icon-forward {
176+
right: 25px;
177+
}
178+
179+
.aplayer-icon-menu {
180+
right: 0;
181+
}
182+
}
183+
76184
&.aplayer-mobile {
77185
.aplayer-icon-volume-down {
78186
display: none;
@@ -112,17 +220,24 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
112220
padding: 0;
113221
font-size: 12px;
114222
margin: 0;
115-
display: inline;
223+
display: inline-block;
116224

117225
path {
118226
transition: all .2s ease-in-out;
119227
}
120228
}
121229

122-
.aplayer-icon-order {
230+
.aplayer-icon-order,
231+
.aplayer-icon-back,
232+
.aplayer-icon-play,
233+
.aplayer-icon-forward {
123234
display: none;
124235
}
125236

237+
.aplayer-icon-forward {
238+
transform: rotate(180deg);
239+
}
240+
126241
.aplayer-lrc-content {
127242
display: none;
128243
}
@@ -428,6 +543,7 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
428543
opacity: 1;
429544
overflow: visible;
430545
height: initial !important;
546+
min-height: 16px;
431547
}
432548
}
433549

@@ -447,7 +563,7 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
447563
overflow: hidden;
448564

449565
&.aplayer-list-hide {
450-
height: 0 !important;
566+
max-height: 0 !important;
451567
}
452568

453569
ol {
@@ -460,10 +576,6 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
460576
width: 5px;
461577
}
462578

463-
&::-webkit-scrollbar-track {
464-
background-color: #f9f9f9;
465-
}
466-
467579
&::-webkit-scrollbar-thumb {
468580
border-radius: 3px;
469581
background-color: #eee;
@@ -540,6 +652,35 @@ $aplayer-height-lrc: $aplayer-height + $lrc-height - 6;
540652
background-color: #f4f4f5;
541653
color: #909399;
542654
}
655+
656+
.aplayer-miniswitcher {
657+
display: none;
658+
position: absolute;
659+
top: 0;
660+
right: 0;
661+
bottom: 0;
662+
height: 100%;
663+
background: #e6e6e6;
664+
width: 18px;
665+
border-radius: 0 2px 2px 0;
666+
667+
.aplayer-icon {
668+
height: 100%;
669+
width: 100%;
670+
transform: rotateY(180deg);
671+
transition: all 0.3s ease;
672+
673+
path {
674+
fill: #666;
675+
}
676+
677+
&:hover {
678+
path {
679+
fill: #000;
680+
}
681+
}
682+
}
683+
}
543684
}
544685

545686
@keyframes aplayer-roll {

‎src/js/controller.js‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ class Controller {
1313
if (!utils.isMobile) {
1414
this.initVolumeButton();
1515
}
16+
this.initMiniSwitcher();
17+
this.initSkipButton();
1618
}
1719

1820
initPlayButton () {
@@ -64,7 +66,7 @@ class Controller {
6466
});
6567

6668
const thumbMove = (e) => {
67-
let percentage = 1 - ((e.clientY || e.changedTouches[0].clientY) - utils.getElementViewTop(this.player.template.volumeBar)) / this.player.template.volumeBar.clientHeight;
69+
let percentage = 1 - ((e.clientY || e.changedTouches[0].clientY) - utils.getElementViewTop(this.player.template.volumeBar, this.player.options.fixed)) / this.player.template.volumeBar.clientHeight;
6870
percentage = Math.max(percentage, 0);
6971
percentage = Math.min(percentage, 1);
7072
this.player.volume(percentage);
@@ -74,7 +76,7 @@ class Controller {
7476
this.player.template.volumeBarWrap.classList.remove('aplayer-volume-bar-wrap-active');
7577
document.removeEventListener(utils.nameMap.dragEnd, thumbUp);
7678
document.removeEventListener(utils.nameMap.dragMove, thumbMove);
77-
let percentage = 1 - ((e.clientY || e.changedTouches[0].clientY) - utils.getElementViewTop(this.player.template.volumeBar)) / this.player.template.volumeBar.clientHeight;
79+
let percentage = 1 - ((e.clientY || e.changedTouches[0].clientY) - utils.getElementViewTop(this.player.template.volumeBar, this.player.options.fixed)) / this.player.template.volumeBar.clientHeight;
7880
percentage = Math.max(percentage, 0);
7981
percentage = Math.min(percentage, 1);
8082
this.player.volume(percentage);
@@ -130,12 +132,28 @@ class Controller {
130132
}
131133

132134
initMenuButton () {
133-
this.player.template.list.style.height = 33 * this.player.options.audio.length - 1 + 'px';
134-
this.player.template.listOl.style.height = 33 * this.player.options.audio.length - 1 + 'px';
135135
this.player.template.menu.addEventListener('click', () => {
136136
this.player.list.toggle();
137137
});
138138
}
139+
140+
initMiniSwitcher () {
141+
this.player.template.miniSwitcher.addEventListener('click', () => {
142+
this.player.setMode(this.player.mode === 'mini' ? 'normal' : 'mini');
143+
});
144+
}
145+
146+
initSkipButton () {
147+
this.player.template.skipBackButton.addEventListener('click', () => {
148+
this.player.skipBack();
149+
});
150+
this.player.template.skipForwardButton.addEventListener('click', () => {
151+
this.player.skipForward();
152+
});
153+
this.player.template.skipPlayButton.addEventListener('click', () => {
154+
this.player.toggle();
155+
});
156+
}
139157
}
140158

141159
export default Controller;

‎src/js/icons.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ import loopAll from '../assets/loop-all.svg';
1010
import loopOne from '../assets/loop-one.svg';
1111
import loopNone from '../assets/loop-none.svg';
1212
import loading from '../assets/loading.svg';
13+
import right from '../assets/right.svg';
14+
import skip from '../assets/skip.svg';
1315

1416
const Icons = {
1517
play: play,
@@ -24,6 +26,8 @@ const Icons = {
2426
loopOne: loopOne,
2527
loopNone: loopNone,
2628
loading: loading,
29+
right: right,
30+
skip: skip,
2731
};
2832

2933
export default Icons;

‎src/js/list.js‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import tplListItem from '../template/list-item.art';
22
import utils from './utils';
3+
import smoothScroll from 'smoothscroll';
34

45
class List {
56
constructor (player) {
@@ -33,6 +34,7 @@ class List {
3334
show () {
3435
this.player.events.trigger('listshow');
3536
this.player.template.list.classList.remove('aplayer-list-hide');
37+
this.player.template.listOl.scrollTop = this.index * 33;
3638
}
3739

3840
hide () {
@@ -65,8 +67,6 @@ class List {
6567
if (wasSingle && this.audios.length > 1) {
6668
this.player.container.classList.add('aplayer-withlist');
6769
}
68-
this.player.template.list.style.height = this.audios.length * 33 - 1 + 'px';
69-
this.player.template.listOl.style.height = this.audios.length * 33 - 1 + 'px';
7070

7171
this.player.randomOrder = utils.randomOrder(this.audios.length);
7272
this.player.template.listCurs = this.player.container.querySelectorAll('.aplayer-list-cur');
@@ -110,8 +110,6 @@ class List {
110110
if (this.audios.length === 1) {
111111
this.player.container.classList.remove('aplayer-withlist');
112112
}
113-
this.player.template.list.style.height = this.audios.length * 33 - 1 + 'px';
114-
this.player.template.listOl.style.height = this.audios.length * 33 - 1 + 'px';
115113

116114
this.player.template.listCurs = this.player.container.querySelectorAll('.aplayer-list-cur');
117115
}
@@ -141,11 +139,12 @@ class List {
141139
}
142140
this.player.container.querySelectorAll('.aplayer-list li')[this.index].classList.add('aplayer-list-light');
143141

144-
this.player.template.list.scrollTop = this.index * 33;
142+
smoothScroll(this.index * 33, 500, null, this.player.template.listOl);
145143

146144
this.player.setAudio(audio);
147145

148146
this.player.lrc && this.player.lrc.switch(this.index);
147+
this.player.lrc && this.player.lrc.update(0);
149148

150149
// set duration time
151150
if (this.player.duration !== 1) { // compatibility: Android browsers will output 1 at first

0 commit comments

Comments
 (0)