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

24
player.jsx
View File

@ -1,6 +1,6 @@
import React from "react";
import ReactDOM from 'react-dom';
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';
const { Header, Content, Footer, Sider } = Layout;
@ -39,7 +39,7 @@ class Player extends React.Component {
playing:'',
loop: false,
order: false,
playIcon: 'caret-right',
playIcon: <CaretRightOutlined />,
curTime: 0,
totTime: 0,
data: [],
@ -59,20 +59,20 @@ class Player extends React.Component {
this.setState({curTime: this.audio.currentTime, totTime: this.audio.duration});
};
this.audio.onpause = () => {
this.setState({playIcon: 'caret-right'});
this.setState({playIcon: <CaretRightOutlined />});
}
this.audio.onplay = () => {
this.setState({playIcon: 'pause'});
this.setState({playIcon: <PauseOutlined />});
}
};
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) => {
this.setState({fdlist: response.data.result.data.subFolderList.map(x => decodeURIComponent(x))});
}).catch(() => {});
};
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) => {
this.pagination = {
total: response.data.result.data.musicList.length,
@ -106,13 +106,15 @@ class Player extends React.Component {
this.setState({playing: filename});
}
};
onRowClick = (record,index) => {
onRow = (record,index) => ({
onClick: () => {
this.audio.pause();
this.audio.src = this.state.source + this.currentFolder + '/' + record.fileName;
this.audio.load();
this.audio.play();
this.setState({playing: record.fileName});
};
}
});
onPlayClick = () => {
if(this.state.playIcon === 'pause') {
this.audio.pause();
@ -201,7 +203,7 @@ class Player extends React.Component {
</Sider>
<Layout style={{ background: '#fff' }}>
<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>
</Layout>
</Layout>
@ -223,9 +225,9 @@ class Player extends React.Component {
<Col style={{ width:30, color:'#fff' }}> {formatTime(this.state.totTime)} </Col>
<Col style={{ overflowY:'hidden', width:280, display:'block' }}>
<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="step-forward" onClick={this.onNextClick}/>
<Button type="primary" size='large' icon={<StepForwardOutlined />} onClick={this.onNextClick}/>
</ButtonGroup>
&nbsp;&nbsp;&nbsp;&nbsp;
<Checkbox style={{ color:'#fff' }} onChange={this.onLoopChange}>Loop</Checkbox>