mirror of
https://github.com/zoriya/flood.git
synced 2026-05-25 00:13:18 +00:00
Add file detail data
This commit is contained in:
John Furrow
@@ -20,87 +20,6 @@ export default class Torrent extends React.Component {
|
||||
});
|
||||
}
|
||||
|
||||
getEta(eta) {
|
||||
if (eta === 'Infinity') {
|
||||
return '∞';
|
||||
} else if (eta.years > 0) {
|
||||
return (
|
||||
<span>
|
||||
<span className="torrent__details--segment">
|
||||
{eta.years}<em className="unit">yr</em>
|
||||
</span>
|
||||
<span className="torrent__details--segment">
|
||||
{eta.weeks}<em className="unit">wk</em>
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
} else if (eta.weeks > 0) {
|
||||
return (
|
||||
<span>
|
||||
|
||||
<span className="torrent__details--segment">
|
||||
{eta.weeks}<em className="unit">wk</em>
|
||||
</span>
|
||||
<span className="torrent__details--segment">
|
||||
{eta.days}<em className="unit">d</em>
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
} else if (eta.days > 0) {
|
||||
return (
|
||||
<span>
|
||||
<span className="torrent__details--segment">
|
||||
{eta.days}<em className="unit">d</em>
|
||||
</span>
|
||||
<span className="torrent__details--segment">
|
||||
{eta.hours}<em className="unit">hr</em>
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
} else if (eta.hours > 0) {
|
||||
return (
|
||||
<span>
|
||||
<span className="torrent__details--segment">
|
||||
{eta.hours}<em className="unit">hr</em>
|
||||
</span>
|
||||
<span className="torrent__details--segment">
|
||||
{eta.minutes}<em className="unit">m</em>
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
} else if (eta.minutes > 0) {
|
||||
return (
|
||||
<span>
|
||||
<span className="torrent__details--segment">
|
||||
{eta.minutes}<em className="unit">m</em>
|
||||
</span>
|
||||
<span className="torrent__details--segment">
|
||||
{eta.seconds}<em className="unit">s</em>
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<span>
|
||||
{eta.seconds}<em className="unit">s</em>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
getRatio(ratio) {
|
||||
ratio = ratio / 1000;
|
||||
let precision = 1;
|
||||
|
||||
if (ratio < 10) {
|
||||
precision = 2;
|
||||
} else if (ratio < 100) {
|
||||
precision = 0;
|
||||
}
|
||||
|
||||
return ratio.toFixed(precision);
|
||||
}
|
||||
|
||||
handleClick(event) {
|
||||
this.props.handleClick(this.props.data.hash, event);
|
||||
}
|
||||
@@ -117,8 +36,8 @@ export default class Torrent extends React.Component {
|
||||
let completed = format.data(torrent.bytesDone);
|
||||
let downloadRate = format.data(torrent.downloadRate, '/s');
|
||||
let downloadTotal = format.data(torrent.downloadTotal);
|
||||
let eta = this.getEta(torrent.eta);
|
||||
let ratio = this.getRatio(torrent.ratio);
|
||||
let eta = format.eta(torrent.eta);
|
||||
let ratio = format.ratio(torrent.ratio);
|
||||
let totalSize = format.data(torrent.sizeBytes);
|
||||
let uploadRate = format.data(torrent.uploadRate, '/s');
|
||||
let uploadTotal = format.data(torrent.uploadTotal);
|
||||
|
||||
@@ -9,9 +9,9 @@ import Icon from '../icons/Icon';
|
||||
import clientSelector from '../../selectors/clientSelector';
|
||||
|
||||
const methodsToBind = [
|
||||
'getSidePanel',
|
||||
'getEta',
|
||||
'getRatio'
|
||||
'getFileData',
|
||||
'getHeading',
|
||||
'getSidePanel'
|
||||
];
|
||||
|
||||
class TorrentDetails extends React.Component {
|
||||
@@ -31,35 +31,88 @@ class TorrentDetails extends React.Component {
|
||||
componentWillReceiveProps(nextProps) {
|
||||
if (nextProps.visible === true) {
|
||||
let nextHash = nextProps.selectedTorrents[0];
|
||||
if (this.state.selectedTorrentHash !== nextHash) {
|
||||
this.setState({
|
||||
selectedTorrentHash: nextHash,
|
||||
selectedTorrent: _.find(nextProps.torrents, torrent => {
|
||||
return torrent.hash === nextHash;
|
||||
})
|
||||
});
|
||||
}
|
||||
this.setState({
|
||||
selectedTorrentHash: nextHash,
|
||||
selectedTorrent: _.find(nextProps.torrents, torrent => {
|
||||
return torrent.hash === nextHash;
|
||||
})
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
shouldComponentUpdate(nextProps) {
|
||||
if (nextProps.visible === true || (nextProps.visible !== this.props.visible)) {
|
||||
if (this.props.visible === true || (nextProps.visible !== this.props.visible)) {
|
||||
return true;
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
getPeerList() {
|
||||
let torrentDetails = this.props.torrentDetails[
|
||||
this.state.selectedTorrentHash
|
||||
];
|
||||
getFileData(torrent, files) {
|
||||
let parentDirectory = torrent.directory;
|
||||
let filename = torrent.filename;
|
||||
|
||||
let peerList = null;
|
||||
let peerCount = 0;
|
||||
if (parentDirectory.endsWith(torrent.filename)) {
|
||||
parentDirectory = parentDirectory.substring(
|
||||
0, parentDirectory.length - torrent.filename.length
|
||||
);
|
||||
}
|
||||
|
||||
if (torrentDetails) {
|
||||
peerList = torrentDetails.map(function(peer, index) {
|
||||
if (parentDirectory.endsWith('/') || parentDirectory.endsWith('\\')) {
|
||||
parentDirectory = parentDirectory.substr(
|
||||
0, parentDirectory.length - 1
|
||||
);
|
||||
}
|
||||
|
||||
if (files) {
|
||||
let fileList = files.map(pathItem => {
|
||||
let classes = classNames({
|
||||
'torrent-details__file-data__filename': true,
|
||||
[`torrent-details__file-data__depth--${pathItem.pathDepth}`]: pathItem.pathDepth > 0
|
||||
});
|
||||
return (
|
||||
<div className={classes}
|
||||
key={pathItem.path}>
|
||||
{pathItem.path}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
return (
|
||||
<div className="torrent-details__file-data torrent-details__section">
|
||||
<div className="torrent-details__file-data__directory">
|
||||
{parentDirectory}
|
||||
</div>
|
||||
{fileList}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div className="torrent-details__file-data torrent-details__section">
|
||||
<div className="torrent-details__file-data__directory">
|
||||
{parentDirectory}
|
||||
</div>
|
||||
<div className="torrent-details__file-data__filename">
|
||||
{filename}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
getHeading() {
|
||||
// return (
|
||||
// <div className="torrent-details__actions torrent-details__section">
|
||||
// Dropdown
|
||||
// </div>
|
||||
// );
|
||||
}
|
||||
|
||||
getPeerList(peers) {
|
||||
if (peers) {
|
||||
let peerList = null;
|
||||
let peerCount = 0;
|
||||
|
||||
peerList = peers.map(function(peer, index) {
|
||||
let downloadRate = format.data(peer.downloadRate, '/s');
|
||||
let uploadRate = format.data(peer.uploadRate, '/s');
|
||||
return (
|
||||
@@ -77,107 +130,29 @@ class TorrentDetails extends React.Component {
|
||||
);
|
||||
});
|
||||
peerCount = peerList.length;
|
||||
|
||||
return (
|
||||
<div className="torrent-details__peers torrent-details__section">
|
||||
<table className="torrent-details__table table">
|
||||
<thead className="torrent-details__table__heading">
|
||||
<tr>
|
||||
<th>
|
||||
Peers
|
||||
<span className="torrent-details__table__heading__count">
|
||||
{peerCount}
|
||||
</span>
|
||||
</th>
|
||||
<th>DL</th>
|
||||
<th>UL</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{peerList}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
return (
|
||||
<table className="torrent-details__table table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>
|
||||
Peers
|
||||
<span className="table__heading--sub-heading">
|
||||
{peerCount}
|
||||
</span>
|
||||
</th>
|
||||
<th>DL</th>
|
||||
<th>UL</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{peerList}
|
||||
</tbody>
|
||||
</table>
|
||||
)
|
||||
}
|
||||
|
||||
getEta(eta) {
|
||||
if (eta === 'Infinity') {
|
||||
return '∞';
|
||||
} else if (eta.years > 0) {
|
||||
return (
|
||||
<span>
|
||||
<span className="torrent__details--segment">
|
||||
{eta.years}<em className="unit">yr</em>
|
||||
</span>
|
||||
<span className="torrent__details--segment">
|
||||
{eta.weeks}<em className="unit">wk</em>
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
} else if (eta.weeks > 0) {
|
||||
return (
|
||||
<span>
|
||||
<span className="torrent__details--segment">
|
||||
{eta.weeks}<em className="unit">wk</em>
|
||||
</span>
|
||||
<span className="torrent__details--segment">
|
||||
{eta.days}<em className="unit">d</em>
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
} else if (eta.days > 0) {
|
||||
return (
|
||||
<span>
|
||||
<span className="torrent__details--segment">
|
||||
{eta.days}<em className="unit">d</em>
|
||||
</span>
|
||||
<span className="torrent__details--segment">
|
||||
{eta.hours}<em className="unit">hr</em>
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
} else if (eta.hours > 0) {
|
||||
return (
|
||||
<span>
|
||||
<span className="torrent__details--segment">
|
||||
{eta.hours}<em className="unit">hr</em>
|
||||
</span>
|
||||
<span className="torrent__details--segment">
|
||||
{eta.minutes}<em className="unit">m</em>
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
} else if (eta.minutes > 0) {
|
||||
return (
|
||||
<span>
|
||||
<span className="torrent__details--segment">
|
||||
{eta.minutes}<em className="unit">m</em>
|
||||
</span>
|
||||
<span className="torrent__details--segment">
|
||||
{eta.seconds}<em className="unit">s</em>
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<span>
|
||||
{eta.seconds}<em className="unit">s</em>
|
||||
</span>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
getRatio(ratio) {
|
||||
ratio = ratio / 1000;
|
||||
let precision = 1;
|
||||
|
||||
if (ratio < 10) {
|
||||
precision = 2;
|
||||
} else if (ratio < 100) {
|
||||
precision = 0;
|
||||
}
|
||||
|
||||
return ratio.toFixed(precision);
|
||||
}
|
||||
|
||||
getSidePanel() {
|
||||
@@ -192,18 +167,19 @@ class TorrentDetails extends React.Component {
|
||||
let completed = format.data(torrent.bytesDone);
|
||||
let downloadRate = format.data(torrent.downloadRate, '/s');
|
||||
let downloadTotal = format.data(torrent.downloadTotal);
|
||||
let eta = this.getEta(torrent.eta);
|
||||
let ratio = this.getRatio(torrent.ratio);
|
||||
let eta = format.eta(torrent.eta);
|
||||
let ratio = format.ratio(torrent.ratio);
|
||||
let totalSize = format.data(torrent.sizeBytes);
|
||||
let torrentDetails = this.props.torrentDetails[
|
||||
this.state.selectedTorrentHash
|
||||
] || {};
|
||||
let uploadRate = format.data(torrent.uploadRate, '/s');
|
||||
let uploadTotal = format.data(torrent.uploadTotal);
|
||||
|
||||
return (
|
||||
<div className="torrent-details" key={this.props.visible}>
|
||||
<div className="torrent-details__actions">
|
||||
Dropdown
|
||||
</div>
|
||||
<ul className="torrent-details__transfer-data">
|
||||
{this.getHeading()}
|
||||
<ul className="torrent-details__transfer-data torrent-details__section">
|
||||
<li className="transfer-data transfer-data--download">
|
||||
<Icon icon="download" />
|
||||
{downloadRate.value}
|
||||
@@ -223,9 +199,8 @@ class TorrentDetails extends React.Component {
|
||||
1<em className="unit">yr</em>
|
||||
</li>
|
||||
</ul>
|
||||
<div className="torrent-details__peers">
|
||||
{this.getPeerList()}
|
||||
</div>
|
||||
{this.getFileData(torrent, torrentDetails.files)}
|
||||
{this.getPeerList(torrentDetails.peers)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user