From c22e0e264e734c14f0e9334edf5b7834dbf8b53f Mon Sep 17 00:00:00 2001
From: Gary Wang <wzc782970009@gmail.com>
Date: Thu, 13 May 2021 19:01:57 +0800
Subject: [PATCH] fix: deps version bump, protocol match to most recent pcm

---
 package.json | 29 +++++++++++++++--------------
 player.jsx   | 34 ++++++++++++++++++----------------
 2 files changed, 33 insertions(+), 30 deletions(-)

diff --git a/package.json b/package.json
index 1dc199b..48ea858 100644
--- a/package.json
+++ b/package.json
@@ -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"
   },
diff --git a/player.jsx b/player.jsx
index a02e3d2..42ef4e8 100644
--- a/player.jsx
+++ b/player.jsx
@@ -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) => {
-        this.audio.pause();
-        this.audio.src = this.state.source + this.currentFolder + '/' + record.fileName;
-        this.audio.load();
-        this.audio.play();
-        this.setState({playing: record.fileName});
-    };
+    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>