ODWRTW/canape
2
2
Fork 0
Code Issues 3 Pull Requests 1 Releases Activity

Movie the torrent progress bar in a new component

Browse Source
This commit is contained in:
Grégoire Delattre 2020-04-11 18:28:44 +02:00
parent 1a9a805c46
commit 1a69cf8892
2 changed files with 51 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/js/components/torrents/list/progress.js Normal file
View File

@ -0,0 +1,47 @@
import React from "react";
import PropTypes from "prop-types";
import { prettySize } from "../../../utils";
export const Progress = ({ torrent }) => {
var progressStyle = torrent.status.is_finished
? "success"
: "info progress-bar-striped progress-bar-animated";
const progressBarClass = "progress-bar bg-" + progressStyle;
var percentDone = torrent.status.percent_done;
const started = percentDone !== 0;
if (started) {
percentDone = Number(percentDone).toFixed(1) + "%";
}
// Pretty sizes
const downloadedSize = prettySize(torrent.status.downloaded_size);
const totalSize = prettySize(torrent.status.total_size);
const downloadRate = prettySize(torrent.status.download_rate) + "/s";
return (
<div className="card-body pb-0">
{started && (
<>
<div className="progress bg-light">
<div
className={progressBarClass}
style={{ width: percentDone }}
role="progressbar"
aria-valuenow={percentDone}
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<p>
{downloadedSize} / {totalSize} - {percentDone} - {downloadRate}
</p>
</>
)}
{!started && <p>Download not yet started</p>}
</div>
);
};
Progress.propTypes = {
torrent: PropTypes.object.isRequired,
};

40
frontend/js/components/torrents/list/torrent.js
View File

@ -2,23 +2,14 @@ import React from "react";
import PropTypes from "prop-types";
import { useDispatch } from "react-redux";
import { prettySize, prettyEpisodeName } from "../../../utils";
import { prettyEpisodeName } from "../../../utils";
import { removeTorrent } from "../../../actions/torrents";
import { Progress } from "./progress";
export const Torrent = ({ torrent }) => {
const dispatch = useDispatch();
var progressStyle = torrent.status.is_finished
? "success"
: "info progress-bar-striped progress-bar-animated";
const progressBarClass = "progress-bar bg-" + progressStyle;
var percentDone = torrent.status.percent_done;
const started = percentDone !== 0;
if (started) {
percentDone = Number(percentDone).toFixed(1) + "%";
}
const torrentTitle = (torrent) => {
switch (torrent.type) {
case "movie":
@ -36,10 +27,6 @@ export const Torrent = ({ torrent }) => {
}
};
// Pretty sizes
const downloadedSize = prettySize(torrent.status.downloaded_size);
const totalSize = prettySize(torrent.status.total_size);
const downloadRate = prettySize(torrent.status.download_rate) + "/s";
return (
<div className="card w-100 mb-3">
<h5 className="card-header">
@ -49,26 +36,7 @@ export const Torrent = ({ torrent }) => {
onClick={() => dispatch(removeTorrent(torrent.status.id))}
></span>
</h5>
<div className="card-body pb-0">
{started && (
<React.Fragment>
<div className="progress bg-light">
<div
className={progressBarClass}
style={{ width: percentDone }}
role="progressbar"
aria-valuenow={percentDone}
aria-valuemin="0"
aria-valuemax="100"
></div>
</div>
<p>
{downloadedSize} / {totalSize} - {percentDone} - {downloadRate}
</p>
</React.Fragment>
)}
{!started && <p>Download not yet started</p>}
</div>
<Progress torrent={torrent} />
</div>
);
};