Skip to content

Commit 403ae4f

Browse files
sabrinaluosabrinaluo
committed
update demo page
1 parent 4220597 commit 403ae4f

File tree

4 files changed

+184
-65
lines changed

4 files changed

+184
-65
lines changed

‎public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030

3131
<a href="https://github.com/sabrinaluo/react-aplayer" target="_blank" class="github-corner">
3232
<svg width="70" height="70" viewBox="0 0 250 250">
33-
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
33+
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" fill="#282c34"></path>
3434
<path
3535
d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
3636
fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>

‎src/app.css‎

Lines changed: 63 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,22 @@
11
body {
2-
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
2+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
3+
Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
4+
sans-serif;
35
}
46

57
.container {
68
max-width: 32rem;
79
margin-left: auto;
810
margin-right: auto;
911
margin-bottom: 50px;
12+
text-align: center;
1013
}
1114

1215
h1 {
13-
font-size: 54px;
16+
font-size: 40px;
1417
color: #333;
1518
margin: 30px 0 10px;
19+
font-weight: normal;
1620
}
1721

1822
h2 {
@@ -21,8 +25,15 @@ h2 {
2125
}
2226

2327
h3 {
24-
font-size: 24px;
25-
color: #555;
28+
color: #999;
29+
font-weight: normal;
30+
margin-top: 30px;
31+
}
32+
33+
.footer {
34+
font-size: 12px;
35+
font-style: italic;
36+
color: #999;
2637
}
2738

2839
hr {
@@ -48,7 +59,7 @@ p {
4859
position: fixed;
4960
right: 0;
5061
top: 0;
51-
color: #00d8ff;
62+
color: #61dafb;
5263
}
5364

5465
.github-corner:hover .octo-arm {
@@ -79,3 +90,50 @@ p {
7990
animation: octocat-wave 560ms ease-in-out;
8091
}
8192
}
93+
94+
.landing {
95+
padding: 10px;
96+
display: -webkit-box;
97+
display: -ms-flexbox;
98+
display: flex;
99+
-webkit-box-align: center;
100+
-ms-flex-align: center;
101+
align-items: center;
102+
-webkit-box-pack: center;
103+
-ms-flex-pack: center;
104+
justify-content: center;
105+
-webkit-box-orient: vertical;
106+
-webkit-box-direction: normal;
107+
-ms-flex-direction: column;
108+
flex-direction: column;
109+
height: 100%;
110+
-webkit-user-select: none;
111+
user-select: none;
112+
}
113+
.features {
114+
margin-top: 20px;
115+
margin-bottom: 10px;
116+
font-size: 16px;
117+
line-height: 1.7;
118+
}
119+
.landing-button {
120+
border: 1px solid #ccc;
121+
border-radius: 33px;
122+
padding: 10px 30px;
123+
background-color: white;
124+
display: inline-block;
125+
margin-right: 20px;
126+
color: #333;
127+
}
128+
129+
.landing-button:hover {
130+
border-color: #61dafb;
131+
color: #61dafb;
132+
text-decoration: none;
133+
}
134+
135+
.aplayer-wrap {
136+
width: 600px;
137+
max-width: 100%;
138+
margin: 20px 0 40px;
139+
}

‎src/app.js‎

Lines changed: 57 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,78 +1,76 @@
1-
import React from 'react';
1+
import React, { PureComponent } from 'react';
22
import ReactAplayer from './react-aplayer';
3-
import appData from './data.json';
3+
import appData from './data';
44
import './app.css';
55

6-
export default class App extends React.Component {
7-
constructor(props) {
8-
super(props);
9-
this.state = {};
10-
}
11-
12-
playHandler() {
6+
class App extends PureComponent {
7+
// event binding example
8+
onPlay = () => {
139
console.log('on play');
14-
}
10+
};
1511

16-
pauseHandler() {
12+
onPause = () => {
1713
console.log('on pause');
18-
}
14+
};
15+
16+
// example of access aplayer instance
17+
initAp1 = ap => {
18+
this.ap1 = ap;
19+
};
1920

2021
render() {
2122
return (
22-
<div className="container">
23+
<div className="landing">
2324
<h1 className="main-title">React Aplayer</h1>
24-
<h2>A react wrapper of Aplayer</h2>
25-
26-
<h3>Normal</h3>
27-
<ReactAplayer
28-
{...appData.apNormal}
29-
onPlay={this.playHandler}
30-
onPause={this.pauseHandler}
31-
ref={ap => {
32-
const player = ap.state.control;
25+
<h3>🍭 Wow, A react wrapper of the beautiful HTML5 music Aplayer</h3>
3326

34-
const methods = [
35-
'play',
36-
'pause',
37-
'toggle',
38-
'volume',
39-
'addMusic',
40-
'destroy',
41-
];
42-
methods.forEach(method => {
43-
this[method] = player[method].bind(player);
44-
});
45-
}}
46-
/>
47-
<button onClick={() => this.play()}>play</button>
48-
<button onClick={() => this.play(100)}>play(100)</button>
49-
<button onClick={() => this.pause()}>pause</button>
50-
<button onClick={() => this.toggle()}>toggle()</button>
51-
<button onClick={() => this.volume(0.1)}>volume(0.1)</button>
52-
<button onClick={() => this.addMusic(appData.apList.music)}>
53-
addMusic()
54-
</button>
55-
<button onClick={() => this.destroy()}>destroy()</button>
27+
<div className="aplayer-wrap">
28+
{/* example with detailed props */}
29+
<ReactAplayer
30+
{...appData.apLrcList}
31+
onInit={this.initAp1}
32+
onPlay={this.onPlay}
33+
onPause={this.onPause}
34+
/>
35+
{/* example of access aplayer instance API */}
36+
<span className="footer">
37+
{' '}
38+
click button to try player control ->{' '}
39+
</span>
40+
<button onClick={() => this.ap1.toggle()}>toggle()</button>
41+
</div>
5642

57-
<h3>With playlist</h3>
58-
<ReactAplayer
59-
{...appData.apList}
60-
ref={ap => {
61-
const player = ap.state.control;
62-
this.setMusic = player.setMusic.bind(player);
63-
}}
64-
/>
65-
<button onClick={() => this.setMusic(2)}>setMusic(2)</button>
43+
{/* example with deconstructing props */}
44+
<ReactAplayer {...appData.apFixedLrcList} />
6645

67-
<h3>With lyrics</h3>
68-
<ReactAplayer {...appData.apLrc} />
46+
<div className="landing-buttons">
47+
<a
48+
className="landing-button"
49+
target="_blank"
50+
href="https://github.com/MoePlayer/react-aplayer"
51+
>
52+
GitHub
53+
</a>
6954

70-
<h3>With playlist and lyrics</h3>
71-
<ReactAplayer {...appData.apLrcList} />
55+
<a
56+
className="landing-button"
57+
target="_blank"
58+
href="https://github.com/MoePlayer/react-aplayer#react-aplayer"
59+
>
60+
React-Aplayer Docs
61+
</a>
7262

73-
<h3>Narrow</h3>
74-
<ReactAplayer music={appData.apNormal.music} narrow={true} />
63+
<a
64+
className="landing-button"
65+
target="_blank"
66+
href="https://aplayer.js.org/#/home"
67+
>
68+
Aplayer Docs
69+
</a>
70+
</div>
7571
</div>
7672
);
7773
}
7874
}
75+
76+
export default App;

‎src/data.js‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
export default {
2+
apLrcList: {
3+
theme: '#F57F17',
4+
lrcType: 3,
5+
audio: [
6+
{
7+
name: '光るなら',
8+
artist: 'Goose house',
9+
url: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.mp3',
10+
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.jpg',
11+
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc',
12+
theme: '#ebd0c2'
13+
},
14+
{
15+
name: 'トリカゴ',
16+
artist: 'XX:me',
17+
url: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.mp3',
18+
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.jpg',
19+
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.lrc',
20+
theme: '#46718b'
21+
},
22+
{
23+
name: '前前前世',
24+
artist: 'RADWIMPS',
25+
url: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.mp3',
26+
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.jpg',
27+
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.lrc',
28+
theme: '#505d6b'
29+
}
30+
]
31+
},
32+
apFixedLrcList: {
33+
fixed: true,
34+
mini: true,
35+
lrcType: 3,
36+
audio: [
37+
{
38+
name: '前前前世',
39+
artist: 'RADWIMPS',
40+
url: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.mp3',
41+
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.jpg',
42+
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/yourname.lrc',
43+
theme: '#505d6b'
44+
},
45+
{
46+
name: 'トリカゴ',
47+
artist: 'XX:me',
48+
url: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.mp3',
49+
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.jpg',
50+
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/darling.lrc',
51+
theme: '#46718b'
52+
},
53+
{
54+
name: '光るなら',
55+
artist: 'Goose house',
56+
url: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.mp3',
57+
cover: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.jpg',
58+
lrc: 'https://moeplayer.b0.upaiyun.com/aplayer/hikarunara.lrc',
59+
theme: '#ebd0c2'
60+
}
61+
]
62+
}
63+
};

0 commit comments

Comments
 (0)