53 lines
1.5 KiB
JavaScript
53 lines
1.5 KiB
JavaScript
import React from "react";
|
|
import PropTypes from "prop-types";
|
|
|
|
import { prettySize, upperCaseFirst } from "../../../utils";
|
|
|
|
export const Progress = ({ torrent }) => {
|
|
const downloading = torrent.status.state === "downloading";
|
|
let progressBarClass = torrent.status.is_finished
|
|
? "progress-bar bg-success"
|
|
: "progress-bar bg-info";
|
|
if (torrent.status.state === "downloading") {
|
|
progressBarClass += " progress-bar-striped progress-bar-animated";
|
|
}
|
|
|
|
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>
|
|
<div className="progress bg-light">
|
|
<div
|
|
className={progressBarClass}
|
|
style={{ width: percentDone }}
|
|
role="progressbar"
|
|
aria-valuenow={percentDone}
|
|
aria-valuemin="0"
|
|
aria-valuemax="100"
|
|
></div>
|
|
</div>
|
|
{downloading && (
|
|
<p>
|
|
{downloadedSize} / {totalSize} - {percentDone} - {downloadRate}
|
|
</p>
|
|
)}
|
|
{!downloading && (
|
|
<p className="text-muted">
|
|
<small>{upperCaseFirst(torrent.status.state)}</small>
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
Progress.propTypes = {
|
|
torrent: PropTypes.object.isRequired,
|
|
};
|