Decode torrents, flesh out options UI

This commit is contained in:
Drew DeVault 2017-09-07 15:19:11 +09:00
parent 59c57f55db
commit a31051d7c5
5 changed files with 344 additions and 70 deletions

View File

@ -35,6 +35,7 @@
"dependencies": {
"babel-plugin-transform-react-jsx": "^6.24.1",
"babel-polyfill": "^6.26.0",
"bencode": "^1.0.0",
"bootstrap": "^4.0.0-alpha.6",
"express": "^4.15.3",
"file-loader": "^0.11.2",

View File

@ -49,6 +49,12 @@
background-position: left bottom;
}
input[type="text"], input[type="number"] {
padding: 0.05rem 0.25rem;
border-radius: 0;
border-color: #888;
}
.navbar {
input[type="text"] {
margin-top: 7px;
@ -103,3 +109,28 @@
margin-bottom: 0;
}
}
.card {
.card {
border-left: none;
border-right: none;
}
.form-group {
margin-bottom: 0.25rem;
}
}
select.form-control {
height: 1.5rem !important;
padding: 0;
font-size: 0.9rem;
}
.form-check-input:only-child {
position: absolute;
}
.form-check-inline {
margin-bottom: 0;
}

View File

@ -1,10 +1,22 @@
export const Rates = {
"b/s": Math.pow(1024, 0),
"KiB/s": Math.pow(1024, 1),
"MiB/s": Math.pow(1024, 2),
"GiB/s": Math.pow(1024, 3),
"TiB/s": Math.pow(1024, 4),
};
export function convertToBitrate(value, unit) {
return value * Rates[unit];
}
export function formatBitrate(bitrate) {
if (bitrate > 1000000000) {
return `${(bitrate / 1000000000).toFixed(2)} Gb/s`;
} else if (bitrate > 1000000) {
return `${(bitrate / 1000000).toFixed(2)} Mb/s`;
} else if (bitrate > 1000) {
return `${(bitrate / 1000).toFixed(2)} Kb/s`;
if (bitrate > Rates["GiB/s"]) {
return `${(bitrate / Rates["GiB/s"]).toFixed(2)} GiB/s`;
} else if (bitrate > Rates["MiB/s"]) {
return `${(bitrate / Rates["MiB/s"]).toFixed(2)} MiB/s`;
} else if (bitrate > Rates["KiB/s"]) {
return `${(bitrate / Rates["KiB/s"]).toFixed(2)} KiB/s`;
} else {
return `${bitrate} b/s`;
}

View File

@ -2,10 +2,126 @@ import React, { Component } from 'react';
import { findDOMNode } from 'react-dom';
import { connect } from 'react-redux';
import { push } from 'react-router-redux';
import { Progress, Collapse, Card, CardBlock } from 'reactstrap';
import FontAwesome from 'react-fontawesome';
import {
Progress,
Card,
CardBlock,
CardTitle,
CardText,
FormGroup,
Label,
Input
} from 'reactstrap';
import ToggleContainer from './toggle_container';
import fetch from 'isomorphic-fetch';
import bencode from 'bencode';
import ws_send from '../socket';
import { convertToBitrate } from '../bitrate';
class Throttle extends Component {
constructor() {
super();
this.state = {
strategy: "global",
unit: "MiB/s",
limit: 1
};
this.setStrategy = this.setStrategy.bind(this);
}
invokeChange() {
const { onChange } = this.props;
const { strategy, limit, unit } = this.state;
this.onChange && this.onChange(strategy, convertToBitrate(limit, unit));
}
setStrategy(strategy) {
this.setState({ strategy });
this.invokeChange();
}
setLimit(limit) {
if (limit <= 0) {
this.setState({ limit: this.state.limit });
return;
}
this.setState({ limit });
this.invokeChange();
}
setUnit(unit) {
this.setState({ unit });
this.invokeChange();
}
render() {
const { legend, prop } = this.props;
return (
<div>
<FormGroup tag="fieldset">
<legend>{legend}</legend>
<FormGroup check className="form-check-inline">
<Label for={`${prop}-global`} check>
<Input
type="radio"
name={prop}
id={`${prop}-global`}
onChange={e => this.setStrategy("global")}
checked={this.state.strategy === "global"}
/> Global
</Label>
</FormGroup>
<FormGroup check className="form-check-inline">
<Label for={`${prop}-unlimited`} check>
<Input
type="radio"
name={prop}
id={`${prop}-unlimited`}
onChange={e => this.setStrategy("unlimited")}
checked={this.state.strategy === "unlimited"}
/> Unlimited
</Label>
</FormGroup>
<FormGroup check className="form-check-inline">
<Label for={`${prop}-custom`} check>
<Input
type="radio"
name={prop}
id={`${prop}-custom`}
onChange={e => this.setStrategy("custom")}
checked={this.state.strategy === "custom"}
/> Custom
</Label>
</FormGroup>
</FormGroup>
{this.state.strategy === "custom" &&
<div className="row">
<FormGroup className="col-md-6">
<Input
type="number"
value={this.state.limit}
onChange={e => this.setLimit(parseFloat(e.target.value))}
/>
</FormGroup>
<FormGroup className="col-md-6">
<Input
type="select"
id="unit"
value={this.state.unit}
onChange={e => this.setUnit(e.target.value)}
>
<option value="b/s">b/s</option>
<option value="KiB/s">KiB/s</option>
<option value="MiB/s">MiB/s</option>
<option value="GiB/s">GiB/s</option>
</Input>
</FormGroup>
</div>
}
</div>
);
}
}
class AddTorrent extends Component {
constructor() {
@ -13,7 +129,10 @@ class AddTorrent extends Component {
this.state = {
loading: false,
customize: false,
file: null
file: null,
torrent: null,
files: [],
startImmediately: true
};
}
@ -27,7 +146,7 @@ class AddTorrent extends Component {
headers: headers
});
} catch (ex) {
// TODO: synapse borks up this response
// TODO: something more useful
console.log(ex);
}
}
@ -36,32 +155,143 @@ class AddTorrent extends Component {
this.setState({ loading: true });
const { file } = this.state;
const { dispatch } = this.props;
const reader = new FileReader();
reader.onload = e => {
ws_send("UPLOAD_TORRENT", { size: file.size }, async offer => {
switch (offer.type) {
case "TRANSFER_OFFER":
return await this.handleTransferOffer(offer, file);
case "RESOURCES_EXTANT":
const [id] = offer.ids;
dispatch(push(`/torrents/${id}`));
break;
}
ws_send("UPLOAD_TORRENT", { size: file.size }, async offer => {
switch (offer.type) {
case "TRANSFER_OFFER":
return await this.handleTransferOffer(offer, file);
case "RESOURCES_EXTANT":
const [id] = offer.ids;
dispatch(push(`/torrents/${id}`));
break;
}
});
}
processTorrent(torrent) {
const { info } = torrent;
if (!info.files) {
this.setState({
files: [
{
name: info.name,
length: info.length
}
],
torrent
});
};
reader.readAsArrayBuffer(file);
} else {
// TODO
}
}
handleFile(e) {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = e => {
try {
const torrent = bencode.decode(reader.result, 'utf8');
this.processTorrent.bind(this)(torrent);
} catch (ex) {
// TODO: something meaningful
console.log(ex);
}
};
reader.readAsArrayBuffer(file);
this.setState({ file });
}
renderOptions() {
return (
<Card>
<CardBlock>
<FormGroup>
<Label for="start-immediately" check style={{paddingLeft: 0}}>
<input
type="checkbox"
checked={this.state.startImmediately}
onChange={e => this.setState({
startImmediately: !this.state.startImmediately
})}
id="start-immediately"
/> Start immediately
</Label>
</FormGroup>
<FormGroup>
<Label for="priority">Priority</Label>
<Input type="select" id="priority" value={3}>
<option value={1}>Lowest</option>
<option value={2}>Low</option>
<option value={3}>Normal</option>
<option value={4}>High</option>
<option value={5}>Highest</option>
</Input>
</FormGroup>
<Throttle for="dl-throttle" legend="Download throttle" />
<Throttle for="ul-throttle" legend="Upload throttle" />
</CardBlock>
</Card>
);
}
renderTorrent() {
const { torrent, file, files, loading } = this.state;
const details = {
"comment": d => d,
"creation date": d => new Date(d * 1000).toDateString(),
"created by": d => d
};
return (
<Card style={{marginBottom: "1rem"}}>
<CardBlock>
<CardTitle>{file.name}</CardTitle>
<CardText>
<dl style={{marginBottom: "0"}}>
{Object.keys(details).map(key =>
torrent[key] && (
<div>
<dt>{key}</dt>
<dd>{details[key](torrent[key])}</dd>
</div>
)
)}
</dl>
</CardText>
</CardBlock>
<ToggleContainer className="form-group" title="Options">
{this.renderOptions.bind(this)()}
</ToggleContainer>
<ToggleContainer className="form-group" title="Files">
<Card>
<CardBlock>
TODO
</CardBlock>
</Card>
</ToggleContainer>
<button
type="button"
className="btn btn-primary btn-block"
disabled={file === null || loading}
onClick={this.uploadFile.bind(this)}
>Add torrent</button>
{loading ?
<Progress
value={100}
animated={true}
striped={true}
color="info"
className="progress-maxheight"
/> : null}
</Card>
);
}
render() {
const { file, loading } = this.state;
return (
<div>
<h3>Add torrent</h3>
{this.state.torrent && this.renderTorrent.bind(this)()}
<div className="form-group">
<input
style={{display: "none"}}
@ -69,55 +299,25 @@ class AddTorrent extends Component {
accept=".torrent"
onChange={this.handleFile.bind(this)}
/>
<button
type="button"
className="btn btn-default"
onClick={() => findDOMNode(this).querySelector("input[type='file']").click()}
>Select torrent</button>
<p>{file ? file.name : ""}</p>
</div>
<div className="form-group">
<p>
<button
className="btn btn-sm btn-default"
onClick={() => this.setState({ customize: !this.state.customize })}
>
Torrent options
<FontAwesome
name={`chevron-${this.state.customize ? "up" : "down"}`}
style={{marginLeft: "0.25rem"}}
/>
</button>
</p>
<Collapse isOpen={this.state.customize}>
<Card>
<CardBlock>
TODO
</CardBlock>
</Card>
</Collapse>
</div>
<div className="form-group">
<div className="row">
<div className="col-md-5">
{this.state.torrent ?
<div style={{
display: "flex",
flexDirection: "column",
alignItems: "center"
}}>
<button
type="button"
className="btn btn-primary btn-block"
disabled={file === null || loading}
onClick={this.uploadFile.bind(this)}
>Add torrent</button>
className="btn btn-default"
onClick={() => findDOMNode(this).querySelector("input[type='file']").click()}
>Select a different torrent?</button>
</div>
<div className="col-md-7">
{loading ?
<Progress
value={100}
animated={true}
striped={true}
color="info"
className="progress-maxheight"
/> : null}
</div>
</div>
:
<button
type="button"
className="btn btn-default btn-block"
onClick={() => findDOMNode(this).querySelector("input[type='file']").click()}
>Select torrent</button>
}
</div>
</div>
);

View File

@ -0,0 +1,30 @@
import React, { Component } from 'react';
import FontAwesome from 'react-fontawesome';
import { Collapse } from 'reactstrap';
export default class ToggleContainer extends Component {
constructor() {
super();
this.state = { open: false };
}
render() {
return (
<div className={this.props.className || ""}>
<button
className="btn btn-sm btn-default btn-block"
onClick={() => this.setState({ open: !this.state.open })}
>
{this.props.title}
<FontAwesome
name={`chevron-${this.state.open ? "up" : "down"}`}
style={{marginLeft: "0.25rem"}}
/>
</button>
<Collapse isOpen={this.state.open}>
{this.props.children}
</Collapse>
</div>
);
}
}