From 5bb231e2e6e615a3b6a0528f82b627409ed2a8f9 Mon Sep 17 00:00:00 2001
From: Zijin Xiao <28256042@qq.com>
Date: Sat, 11 Feb 2017 17:33:27 +0800
Subject: [PATCH] Initial commit

---
 .eslintrc         |  30 ++++++
 .gitignore        |   4 +
 LICENSE           |  21 ++++
 README.md         |  27 +++++
 index.css         |   4 +
 index.html        |  16 +++
 index.jsx         |  14 +++
 package.json      |  44 +++++++++
 player.jsx        | 247 ++++++++++++++++++++++++++++++++++++++++++++++
 webpack.config.js |  12 +++
 10 files changed, 419 insertions(+)
 create mode 100644 .eslintrc
 create mode 100644 .gitignore
 create mode 100644 LICENSE
 create mode 100644 README.md
 create mode 100644 index.css
 create mode 100644 index.html
 create mode 100644 index.jsx
 create mode 100644 package.json
 create mode 100644 player.jsx
 create mode 100644 webpack.config.js

diff --git a/.eslintrc b/.eslintrc
new file mode 100644
index 0000000..b98dc73
--- /dev/null
+++ b/.eslintrc
@@ -0,0 +1,30 @@
+{
+    "extends": "airbnb",
+    "plugins": [
+        "react"
+    ],
+    "env": {
+        "browser": true,
+        "commonjs": true,
+        "es6": true,
+        "node": true
+    },
+    "parserOptions": {
+        "ecmaFeatures": {
+            "jsx": true
+        },
+        "sourceType": "module"
+    },
+    "rules": {
+        "no-const-assign": "warn",
+        "no-this-before-super": "warn",
+        "no-undef": "warn",
+        "no-unreachable": "warn",
+        "no-unused-vars": "warn",
+        "constructor-super": "warn",
+        "valid-typeof": "warn",
+        "semi": [2, "always"],
+        "indent": [2,4],
+        "no-path-concat": 0
+    }
+}
\ No newline at end of file
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..3d38747
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,4 @@
+dist
+node_modules
+.DS_Store
+.vscode
\ No newline at end of file
diff --git a/LICENSE b/LICENSE
new file mode 100644
index 0000000..384ec9d
--- /dev/null
+++ b/LICENSE
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2017 Zijin Xiao
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
\ No newline at end of file
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..87e0753
--- /dev/null
+++ b/README.md
@@ -0,0 +1,27 @@
+# private-music-react
+A front-end impl of [Private Cloud Music](https://github.com/BLumia/Private-Cloud-Music) by React and Antd.
+
+## Install
+``` bash
+# Clone the repository once
+$ git clone https://github.com/BearKidsTeam/private-music-react
+
+# Go into the repository (rename it as you wish)
+$ cd private-music-react
+
+# Install the dependencies once
+$ npm install
+```
+
+## Usage
+``` bash
+$ npm start
+```
+
+## Build
+``` bash
+$ npm run build
+```
+The files will be in ```./dist```
+## License
+[MIT](http://opensource.org/licenses/MIT)
\ No newline at end of file
diff --git a/index.css b/index.css
new file mode 100644
index 0000000..0f178d7
--- /dev/null
+++ b/index.css
@@ -0,0 +1,4 @@
+
+html, body, #root {
+  height: 100%;
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..f65f403
--- /dev/null
+++ b/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Demo</title>
+  <link rel="stylesheet" href="index.css" />
+</head>
+<body>
+
+<div id="root"></div>
+
+<script src="common.js"></script>
+<script src="index.js"></script>
+
+</body>
+</html>
diff --git a/index.jsx b/index.jsx
new file mode 100644
index 0000000..d3e376e
--- /dev/null
+++ b/index.jsx
@@ -0,0 +1,14 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import Player from './player';
+
+function App() {
+    return (
+      <div id="app" style={{ height: '100%' }}>
+        <Player />
+      </div>
+    );
+}
+
+ReactDOM.render(<App />, document.getElementById('root'));
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..1dc199b
--- /dev/null
+++ b/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "private-music-react",
+  "version": "1.0.0",
+  "description": "A front-end impl of Private Cloud Music by React and Antd",
+  "author": "Zijin Xiao <ZijinX@outlook.com>",
+  "repository": "BearKidsTeam/private-music-react",
+  "license": "MIT",
+  "entry": {
+    "index": "./index.jsx"
+  },
+  "dependencies": {
+    "antd": "^2.7.1",
+    "axios": "^0.15.3",
+    "react": "^15.1.0",
+    "react-dom": "^15.1.0"
+  },
+  "devDependencies": {
+    "atool-build": "^0.9.0",
+    "atool-test-mocha": "^0.1.4",
+    "babel-eslint": "^7.0.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",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-jsx-a11y": "^2.2.3",
+    "eslint-plugin-react": "^6.9.0",
+    "expect": "^1.20.1",
+    "pre-commit": "1.x",
+    "redbox-react": "^1.2.6"
+  },
+  "pre-commit": [
+    "lint"
+  ],
+  "scripts": {
+    "build": "atool-build",
+    "lint": "eslint --ext .js,.jsx src/",
+    "start": "dora --plugins webpack",
+    "test": "atool-test-mocha ./**/__tests__/*-test.js"
+  }
+}
diff --git a/player.jsx b/player.jsx
new file mode 100644
index 0000000..689f835
--- /dev/null
+++ b/player.jsx
@@ -0,0 +1,247 @@
+import React from "react";
+import ReactDOM from 'react-dom';
+import { Row,Col,Button,Checkbox,Layout, Menu, Icon, Table, Slider, Modal, Input } from 'antd';
+import axios from 'axios';
+
+const { Header, Content, Footer, Sider } = Layout;
+const SubMenu = Menu.SubMenu;
+const ButtonGroup = Button.Group;
+
+const columns = [{
+    title: 'File Name',
+    dataIndex: 'fileName',
+    key: 'fileName',
+    render: text => <a href="#">{text}</a>,
+}];
+
+function formatTime(t) {
+    const m = Math.floor(t / 60);
+    const s = Math.round(t - Math.floor(t / 60) * 60);
+    if (s < 10) {
+        return m + ":0" + s;
+    }
+    else if (s === 60) {
+        return (m + 1) + ":00";
+    }
+    else {
+        return m + ":" + s;
+    }
+}
+
+class Player extends React.Component {
+    audio = null;
+    currentFolder = '';
+    pagination = {
+        total: 0,
+        showSizeChanger: true
+    };
+    state = {
+        playing:'',
+        loop: false,
+        order: false,
+        playIcon: 'caret-right',
+        percent: 0,
+        curTime: 0,
+        totTime: 0,
+        data: [],
+        fdlist: [],
+        collapsed: false,
+        source: 'http://direct.blumia.cn/hidden',
+        newSource: 'http://direct.blumia.cn/hidden',
+        settingsVisible: false
+    };
+    onCollapse = (collapsed) => {
+        this.setState({ collapsed });
+    };
+    init = () => {
+        this.audio = document.getElementsByTagName('audio')[0];
+        this.fetchPlaylist();
+        this.audio.ontimeupdate = () => {
+            this.setState({curTime: this.audio.currentTime, totTime: this.audio.duration, percent: this.audio.currentTime * 1.0 / this.audio.duration * 100.0});
+        };
+        this.audio.onpause = () => {
+            this.setState({playIcon: 'caret-right'});
+        }
+        this.audio.onplay = () => {
+            this.setState({playIcon: 'pause'});
+        }
+    };
+    fetchPlaylist = () => {
+        axios({method: 'POST', url: this.state.source + '/api.php',data:'do=getplaylist&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'}})
+        .then((response) => {
+            this.pagination =  {
+                total: response.data.result.data.musicList.length,
+                showSizeChanger: true
+            } 
+            this.setState({data: response.data.result.data.musicList.map(x=> { x.fileName = decodeURIComponent(x.fileName); return x})});
+        }).catch(() => {});
+
+    };
+    onMenuClick = ({item, key, keyPath}) => {
+        if (key === 'settings') {
+            this.setState({settingsVisible : true, newRandomKey: Math.random()});
+            return;
+        }
+        if (key !== 'settings' && this.state.collapsed) {
+            this.setState({collapsed:false});
+        }
+        this.currentFolder = key;
+        this.fetchMusic(key);
+    };
+    componentDidMount() {
+        this.init();
+    };
+    playAtIndex = (i) => {
+        const filename = this.state.data[i].fileName;
+        this.audio.pause();
+        this.audio.src = this.state.source + this.currentFolder + '/' + filename;
+        this.audio.load();
+        this.audio.play();
+        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});
+    };
+    onPlayClick = () => {
+        if(this.state.playIcon === 'pause') {
+            this.audio.pause();
+        } else {
+            this.audio.play();
+        }
+    };
+    onPrevClick = () => {
+        const currentIndex = this.state.data.findIndex(x => x.fileName === this.state.playing);
+        if (currentIndex === -1) {
+            this.playAtIndex(0);
+        } else if (currentIndex === 0) {
+            this.playAtIndex(this.state.data.length - 1);
+        } else {
+            this.playAtIndex(Number(currentIndex) - 1);
+        }
+    };
+    onNextClick = () => {
+        const currentIndex = this.state.data.findIndex(x => x.fileName === this.state.playing);
+        if (currentIndex === -1) {
+            this.playAtIndex(0);
+        } else if (currentIndex === (this.state.data.length - 1)) {
+            this.playAtIndex(0);
+        } else {
+            this.playAtIndex(Number(currentIndex) + 1);
+        }
+    };
+    onLoopChange = (value) => {
+        if (value.target.checked) {
+            this.audio.loop = true;
+        } else {
+            this.audio.loop = false;
+        }
+    };
+    onOrderChange = (value) => {
+        if (value.target.checked) {
+            this.audio.onended = () => {
+                if (this.audio.loop === 0) {
+                    this.onNextClick();
+                }
+            };
+        } else {
+            this.audio.onended = undefined;
+        }
+    };
+    onSettingsOk = () => {
+        this.setState({source: this.state.newSource,settingsVisible:false});
+        this.init();
+    };
+    onSettingsCancel = () => {
+        this.setState({settingsVisible: false,newSource: this.state.source});
+    };
+    onChange = (event) => {
+        this.setState({newSource: event.target.value});
+    };
+    onProgressChange = (value) => {
+        this.audio.currentTime = value;
+        this.setState({percent: value * 1.0 / this.state.totTime,curTime: value});
+    };
+    onAfterChange = (value) => {
+        this.audio.currentTime = value;
+        this.setState({percent: value * 1.0 / this.state.totTime,curTime: value});
+    };
+    render() {
+        return (
+            <div style={{ height: '100%' }}>
+                <audio></audio>
+                <Layout style={{ height: '100%' }}>
+                    <Layout style={{ height: '100%' }}>
+                        <Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse} style={{ height: '100%' }}>
+                            <Menu theme="dark" mode="inline" openKeys={['sub1']} selectedKeys={this.state.collapsed ? [] : [this.currentFolder]} style={{ height: '100%' }} onClick={this.onMenuClick}>
+                                { !this.state.collapsed  && 
+                                    <SubMenu key="sub1" title={<span><Icon type="folder" /><span>Folder List</span></span>}>
+                                        {this.state.fdlist.map(x => <Menu.Item key={x}>{x}</Menu.Item>)}
+                                    </SubMenu>
+                                }
+                                { this.state.collapsed &&
+                                    <Menu.Item key="1">
+                                        <Icon type="folder"/>
+                                    </Menu.Item>
+                                }
+                                <Menu.Item key="settings">
+                                    <Icon type="setting" /> { !this.state.collapsed && 'Settings' }
+                                </Menu.Item>
+                            </Menu>
+                        </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}/>
+                            </Content>
+                        </Layout>
+                    </Layout>
+                    <Footer style={{ textAlign: 'center', background: '#494949', paddingLeft:0, paddingRight:0 }}>
+                        <Layout style={{background: '#494949'}}>
+                            <Sider style={{background: '#494949', color:'#fff'}}>
+                                <Row type="flex" justify="space-around" align="middle" style={{height: '100%'}}>
+                                    <Col span={24}>
+                                        {this.state.playing}
+                                    </Col>
+                                </Row>
+                            </Sider>
+                            <Content style={{paddingLeft:0,paddingRight:0}}>
+                                <Row type="flex" justify="space-around" align="middle">
+                                    <Col style={{ width:30, color:'#fff' }}> {formatTime(this.state.curTime)} </Col>
+                                    <Col style={{ width:'calc(100% - 340px)', padding:5 }}>
+                                        <Slider value={this.state.curTime} min={0} max={this.state.totTime} step={1} onChange={this.onProgressChange} tipFormatter={formatTime} style={{ borderTop:'4px solid #494949', borderBottom:'4px solid #494949' }} />
+                                    </Col>
+                                    <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={this.state.playIcon} onClick={this.onPlayClick} />
+                                            <Button type="primary" size='large' icon="step-forward" onClick={this.onNextClick}/>
+                                        </ButtonGroup>
+                                        &nbsp;&nbsp;&nbsp;&nbsp;
+                                        <Checkbox style={{ color:'#fff' }} onChange={this.onLoopChange}>Loop</Checkbox>
+                                        <Checkbox style={{ color:'#fff' }} onChange={this.onOrderChange}>Order</Checkbox>
+                                    </Col>
+                                </Row>
+                            </Content>
+                        </Layout>
+                    </Footer>
+                </Layout>
+                <Modal title="Settings" key={this.state.newRandomKey} visible={this.state.settingsVisible}
+                    onOk={this.onSettingsOk} onCancel={this.onSettingsCancel}>
+                    <Input addonBefore={'PCM Source'} defaultValue={this.state.source} value={this.state.newSource} onChange={this.onChange} />
+                </Modal>
+            </div>
+        );
+    }
+}
+
+export default Player;
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 0000000..113afbd
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,12 @@
+// Learn more on how to config.
+// - https://github.com/ant-tool/atool-build#配置扩展
+
+module.exports = function (webpackConfig) {
+    webpackConfig.babel.plugins.push('transform-runtime');
+    webpackConfig.babel.plugins.push(['import', {
+        libraryName: 'antd',
+        style: 'css',
+    }]);
+
+    return webpackConfig;
+};