blumia/private-music-react
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: deps version bump, protocol match to most recent pcm

Browse Source
This commit is contained in:
Gary Wang 2021-05-13 19:01:57 +08:00
parent 6e1c6a5dd1
commit c22e0e264e
2 changed files with 33 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
package.json
View File

@ -9,26 +9,27 @@
"index": "./index.jsx" "index": "./index.jsx"
}, },
"dependencies": { "dependencies": {
"antd": "^2.7.1", "@ant-design/icons": "^4.6.2",
"axios": "^0.15.3", "antd": "^4.15.5",
"react": "^15.1.0", "axios": "^0.21.1",
"react-dom": "^15.1.0" "react": "^17.0.2",
"react-dom": "^17.0.2"
}, },
"devDependencies": { "devDependencies": {
"atool-build": "^0.9.0", "atool-build": "^1.0.8",
"atool-test-mocha": "^0.1.4", "atool-test-mocha": "^0.2.1",
"babel-eslint": "^7.0.0", "babel-eslint": "^10.1.0",
"babel-plugin-import": "^1.0.1", "babel-plugin-import": "^1.0.1",
"babel-plugin-transform-runtime": "^6.8.0", "babel-plugin-transform-runtime": "^6.8.0",
"babel-runtime": "^6.9.2", "babel-runtime": "^6.9.2",
"dora": "0.4.x", "dora": "^0.6.1",
"dora-plugin-webpack": "^0.8.1", "dora-plugin-webpack": "^1.0.0",
"eslint": "^3.15.0", "eslint": "^7.26.0",
"eslint-config-airbnb": "^12.0.0", "eslint-config-airbnb": "^18.2.1",
"eslint-plugin-import": "^2.2.0", "eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^2.2.3", "eslint-plugin-jsx-a11y": "^6.4.1",
"eslint-plugin-react": "^6.9.0", "eslint-plugin-react": "^7.23.2",
"expect": "^1.20.1", "expect": "^26.6.2",
"pre-commit": "1.x", "pre-commit": "1.x",
"redbox-react": "^1.2.6" "redbox-react": "^1.2.6"
}, },

34
player.jsx
View File

@ -1,6 +1,6 @@
import React from "react"; import React from "react";
import ReactDOM from 'react-dom';
import { Row,Col,Button,Checkbox,Layout, Menu, Icon, Table, Slider, Modal, Input } from 'antd'; import { Row,Col,Button,Checkbox,Layout, Menu, Icon, Table, Slider, Modal, Input } from 'antd';
import { StepBackwardOutlined,StepForwardOutlined,CaretRightOutlined,PauseOutlined } from '@ant-design/icons';
import axios from 'axios'; import axios from 'axios';
const { Header, Content, Footer, Sider } = Layout; const { Header, Content, Footer, Sider } = Layout;
@ -39,7 +39,7 @@ class Player extends React.Component {
playing:'', playing:'',
loop: false, loop: false,
order: false, order: false,
playIcon: 'caret-right', playIcon: <CaretRightOutlined />,
curTime: 0, curTime: 0,
totTime: 0, totTime: 0,
data: [], data: [],
@ -59,20 +59,20 @@ class Player extends React.Component {
this.setState({curTime: this.audio.currentTime, totTime: this.audio.duration}); this.setState({curTime: this.audio.currentTime, totTime: this.audio.duration});
}; };
this.audio.onpause = () => { this.audio.onpause = () => {
this.setState({playIcon: 'caret-right'}); this.setState({playIcon: <CaretRightOutlined />});
} }
this.audio.onplay = () => { this.audio.onplay = () => {
this.setState({playIcon: 'pause'}); this.setState({playIcon: <PauseOutlined />});
} }
}; };
fetchPlaylist = () => { fetchPlaylist = () => {
axios({method: 'POST', url: this.state.source + '/api.php',data:'do=getplaylist&folder=/', headers:{'Content-Type':'application/x-www-form-urlencoded'}}) axios({method: 'POST', url: this.state.source + '/api.php',data:'do=getfilelist&folder=/', headers:{'Content-Type':'application/x-www-form-urlencoded'}})
.then((response) => { .then((response) => {
this.setState({fdlist: response.data.result.data.subFolderList.map(x => decodeURIComponent(x))}); this.setState({fdlist: response.data.result.data.subFolderList.map(x => decodeURIComponent(x))});
}).catch(() => {}); }).catch(() => {});
}; };
fetchMusic = (folder) => { fetchMusic = (folder) => {
axios({method: 'POST', url: this.state.source + '/api.php',data:'do=getplaylist&folder=' + folder, headers:{'Content-Type':'application/x-www-form-urlencoded'}}) axios({method: 'POST', url: this.state.source + '/api.php',data:'do=getfilelist&folder=' + folder, headers:{'Content-Type':'application/x-www-form-urlencoded'}})
.then((response) => { .then((response) => {
this.pagination = { this.pagination = {
total: response.data.result.data.musicList.length, total: response.data.result.data.musicList.length,
@ -106,13 +106,15 @@ class Player extends React.Component {
this.setState({playing: filename}); this.setState({playing: filename});
} }
}; };
onRowClick = (record,index) => { onRow = (record,index) => ({
this.audio.pause(); onClick: () => {
this.audio.src = this.state.source + this.currentFolder + '/' + record.fileName; this.audio.pause();
this.audio.load(); this.audio.src = this.state.source + this.currentFolder + '/' + record.fileName;
this.audio.play(); this.audio.load();
this.setState({playing: record.fileName}); this.audio.play();
}; this.setState({playing: record.fileName});
}
});
onPlayClick = () => { onPlayClick = () => {
if(this.state.playIcon === 'pause') { if(this.state.playIcon === 'pause') {
this.audio.pause(); this.audio.pause();
@ -201,7 +203,7 @@ class Player extends React.Component {
</Sider> </Sider>
<Layout style={{ background: '#fff' }}> <Layout style={{ background: '#fff' }}>
<Content style={{ margin: '0px' }}> <Content style={{ margin: '0px' }}>
<Table dataSource={this.state.data} columns={columns} style={{ background: '#fff' }} showHeader={false} pagination={this.pagination} onRowClick = {this.onRowClick}/> <Table dataSource={this.state.data} columns={columns} style={{ background: '#fff' }} showHeader={false} pagination={this.pagination} onRow = {this.onRow}/>
</Content> </Content>
</Layout> </Layout>
</Layout> </Layout>
@ -223,9 +225,9 @@ class Player extends React.Component {
<Col style={{ width:30, color:'#fff' }}> {formatTime(this.state.totTime)} </Col> <Col style={{ width:30, color:'#fff' }}> {formatTime(this.state.totTime)} </Col>
<Col style={{ overflowY:'hidden', width:280, display:'block' }}> <Col style={{ overflowY:'hidden', width:280, display:'block' }}>
<ButtonGroup> <ButtonGroup>
<Button type="primary" size='large' icon="step-backward" onClick={this.onPrevClick}/> <Button type="primary" size='large' icon={<StepBackwardOutlined />} onClick={this.onPrevClick}/>
<Button type="primary" size='large' icon={this.state.playIcon} onClick={this.onPlayClick} /> <Button type="primary" size='large' icon={this.state.playIcon} onClick={this.onPlayClick} />
<Button type="primary" size='large' icon="step-forward" onClick={this.onNextClick}/> <Button type="primary" size='large' icon={<StepForwardOutlined />} onClick={this.onNextClick}/>
</ButtonGroup> </ButtonGroup>
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
<Checkbox style={{ color:'#fff' }} onChange={this.onLoopChange}>Loop</Checkbox> <Checkbox style={{ color:'#fff' }} onChange={this.onLoopChange}>Loop</Checkbox>