init
This commit is contained in:
229
src/component/Download/Download.js
Normal file
229
src/component/Download/Download.js
Normal file
@@ -0,0 +1,229 @@
|
||||
import React, { Component } from "react";
|
||||
import { connect } from "react-redux";
|
||||
import RefreshIcon from "@material-ui/icons/Refresh";
|
||||
import API from "../../middleware/Api";
|
||||
import { Button, IconButton, Typography, withStyles } from "@material-ui/core";
|
||||
import DownloadingCard from "./DownloadingCard";
|
||||
import FinishedCard from "./FinishedCard";
|
||||
import RemoteDownloadButton from "../Dial/Aria2";
|
||||
import Auth from "../../middleware/Auth";
|
||||
import { toggleSnackbar } from "../../redux/explorer";
|
||||
import Nothing from "../Placeholder/Nothing";
|
||||
import { withTranslation } from "react-i18next";
|
||||
|
||||
const styles = (theme) => ({
|
||||
actions: {
|
||||
display: "flex",
|
||||
},
|
||||
title: {
|
||||
marginTop: "20px",
|
||||
},
|
||||
layout: {
|
||||
width: "auto",
|
||||
marginTop: "30px",
|
||||
marginLeft: theme.spacing(3),
|
||||
marginRight: theme.spacing(3),
|
||||
[theme.breakpoints.up(1100 + theme.spacing(3) * 2)]: {
|
||||
width: 700,
|
||||
marginLeft: "auto",
|
||||
marginRight: "auto",
|
||||
},
|
||||
},
|
||||
shareTitle: {
|
||||
maxWidth: "200px",
|
||||
},
|
||||
avatarFile: {
|
||||
backgroundColor: theme.palette.primary.light,
|
||||
},
|
||||
avatarFolder: {
|
||||
backgroundColor: theme.palette.secondary.light,
|
||||
},
|
||||
gird: {
|
||||
marginTop: "30px",
|
||||
},
|
||||
hide: {
|
||||
display: "none",
|
||||
},
|
||||
loadingAnimation: {
|
||||
borderRadius: "6px 6px 0 0",
|
||||
},
|
||||
shareFix: {
|
||||
marginLeft: "20px",
|
||||
},
|
||||
loadMore: {
|
||||
textAlign: "center",
|
||||
marginTop: "20px",
|
||||
marginBottom: "20px",
|
||||
},
|
||||
margin: {
|
||||
marginTop: theme.spacing(2),
|
||||
},
|
||||
});
|
||||
const mapStateToProps = () => {
|
||||
return {};
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch) => {
|
||||
return {
|
||||
toggleSnackbar: (vertical, horizontal, msg, color) => {
|
||||
dispatch(toggleSnackbar(vertical, horizontal, msg, color));
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
class DownloadComponent extends Component {
|
||||
page = 0;
|
||||
interval = 0;
|
||||
previousDownloading = -1;
|
||||
|
||||
state = {
|
||||
downloading: [],
|
||||
loading: false,
|
||||
finishedList: [],
|
||||
continue: true,
|
||||
};
|
||||
|
||||
componentDidMount = () => {
|
||||
this.loadDownloading();
|
||||
};
|
||||
|
||||
componentWillUnmount() {
|
||||
clearTimeout(this.interval);
|
||||
}
|
||||
|
||||
loadDownloading = () => {
|
||||
this.setState({
|
||||
loading: true,
|
||||
});
|
||||
API.get("/aria2/downloading")
|
||||
.then((response) => {
|
||||
this.setState({
|
||||
downloading: response.data,
|
||||
loading: false,
|
||||
});
|
||||
// 设定自动更新
|
||||
clearTimeout(this.interval);
|
||||
if (response.data.length > 0) {
|
||||
this.interval = setTimeout(
|
||||
this.loadDownloading,
|
||||
1000 *
|
||||
response.data.reduce(function (prev, current) {
|
||||
return prev.interval < current.interval
|
||||
? prev
|
||||
: current;
|
||||
}).interval
|
||||
);
|
||||
}
|
||||
|
||||
// 下载中条目变更时刷新已完成列表
|
||||
if (response.data.length !== this.previousDownloading) {
|
||||
this.page = 0;
|
||||
this.setState({
|
||||
finishedList: [],
|
||||
continue: true,
|
||||
});
|
||||
this.loadMore();
|
||||
}
|
||||
this.previousDownloading = response.data.length;
|
||||
})
|
||||
.catch((error) => {
|
||||
this.props.toggleSnackbar(
|
||||
"top",
|
||||
"right",
|
||||
error.message,
|
||||
"error"
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
loadMore = () => {
|
||||
this.setState({
|
||||
loading: true,
|
||||
});
|
||||
API.get("/aria2/finished?page=" + ++this.page)
|
||||
.then((response) => {
|
||||
this.setState({
|
||||
finishedList: [
|
||||
...this.state.finishedList,
|
||||
...response.data,
|
||||
],
|
||||
loading: false,
|
||||
continue: response.data.length >= 10,
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.props.toggleSnackbar(
|
||||
"top",
|
||||
"right",
|
||||
this.props.t("download.failedToLoad"),
|
||||
"error"
|
||||
);
|
||||
this.setState({
|
||||
loading: false,
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
const { classes, t } = this.props;
|
||||
const user = Auth.GetUser();
|
||||
|
||||
return (
|
||||
<div className={classes.layout}>
|
||||
{user.group.allowRemoteDownload && <RemoteDownloadButton />}
|
||||
<Typography
|
||||
color="textSecondary"
|
||||
variant="h4"
|
||||
className={classes.title}
|
||||
>
|
||||
{t("download.active")}
|
||||
<IconButton
|
||||
disabled={this.state.loading}
|
||||
onClick={this.loadDownloading}
|
||||
>
|
||||
<RefreshIcon />
|
||||
</IconButton>
|
||||
</Typography>
|
||||
{this.state.downloading.length === 0 && (
|
||||
<Nothing primary={t("download.activeEmpty")} />
|
||||
)}
|
||||
{this.state.downloading.map((value, k) => (
|
||||
<DownloadingCard key={k} task={value} />
|
||||
))}
|
||||
<Typography
|
||||
color="textSecondary"
|
||||
variant="h4"
|
||||
className={classes.title}
|
||||
>
|
||||
{t("download.finished")}
|
||||
</Typography>
|
||||
<div className={classes.loadMore}>
|
||||
{this.state.finishedList.length === 0 && (
|
||||
<Nothing primary={t("download.finishedEmpty")} />
|
||||
)}
|
||||
{this.state.finishedList.map((value, k) => {
|
||||
if (value.files) {
|
||||
return <FinishedCard key={k} task={value} />;
|
||||
}
|
||||
return null;
|
||||
})}
|
||||
<Button
|
||||
size="large"
|
||||
className={classes.margin}
|
||||
disabled={!this.state.continue}
|
||||
onClick={this.loadMore}
|
||||
>
|
||||
{t("download.loadMore")}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const Download = connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps
|
||||
)(withStyles(styles)(withTranslation()(DownloadComponent)));
|
||||
|
||||
export default Download;
|
||||
Reference in New Issue
Block a user