Initial commit
This commit is contained in:
Zijin Xiao
30
.eslintrc
Normal file
30
.eslintrc
Normal file
@ -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
|
||||
}
|
||||
}
|
||||
4
.gitignore
vendored
Normal file
4
.gitignore
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
dist
|
||||
node_modules
|
||||
.DS_Store
|
||||
.vscode
|
||||
21
LICENSE
Normal file
21
LICENSE
Normal file
@ -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.
|
||||
27
README.md
Normal file
27
README.md
Normal file
@ -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)
|
||||
16
index.html
Normal file
16
index.html
Normal file
@ -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>
|
||||
14
index.jsx
Normal file
14
index.jsx
Normal file
@ -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'));
|
||||
44
package.json
Normal file
44
package.json
Normal file
@ -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"
|
||||
}
|
||||
}
|
||||
247
player.jsx
Normal file
247
player.jsx
Normal file
@ -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>
|
||||
|
||||
<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;
|
||||
12
webpack.config.js
Normal file
12
webpack.config.js
Normal file
@ -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;
|
||||
};
|
||||
Reference in New Issue
Block a user