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 => {text},
}];
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 (