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": { "dependencies": {
"babel-plugin-transform-react-jsx": "^6.24.1", "babel-plugin-transform-react-jsx": "^6.24.1",
"babel-polyfill": "^6.26.0", "babel-polyfill": "^6.26.0",
"bencode": "^1.0.0",
"bootstrap": "^4.0.0-alpha.6", "bootstrap": "^4.0.0-alpha.6",
"express": "^4.15.3", "express": "^4.15.3",
"file-loader": "^0.11.2", "file-loader": "^0.11.2",

View File

@ -49,6 +49,12 @@
background-position: left bottom; background-position: left bottom;
} }
input[type="text"], input[type="number"] {
padding: 0.05rem 0.25rem;
border-radius: 0;
border-color: #888;
}
.navbar { .navbar {
input[type="text"] { input[type="text"] {
margin-top: 7px; margin-top: 7px;
@ -103,3 +109,28 @@
margin-bottom: 0; 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) { export function formatBitrate(bitrate) {
if (bitrate > 1000000000) { if (bitrate > Rates["GiB/s"]) {
return `${(bitrate / 1000000000).toFixed(2)} Gb/s`; return `${(bitrate / Rates["GiB/s"]).toFixed(2)} GiB/s`;
} else if (bitrate > 1000000) { } else if (bitrate > Rates["MiB/s"]) {
return `${(bitrate / 1000000).toFixed(2)} Mb/s`; return `${(bitrate / Rates["MiB/s"]).toFixed(2)} MiB/s`;
} else if (bitrate > 1000) { } else if (bitrate > Rates["KiB/s"]) {
return `${(bitrate / 1000).toFixed(2)} Kb/s`; return `${(bitrate / Rates["KiB/s"]).toFixed(2)} KiB/s`;
} else { } else {
return `${bitrate} b/s`; return `${bitrate} b/s`;
} }

View File

@ -2,10 +2,126 @@ import React, { Component } from 'react';
import { findDOMNode } from 'react-dom'; import { findDOMNode } from 'react-dom';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { push } from 'react-router-redux'; import { push } from 'react-router-redux';
import { Progress, Collapse, Card, CardBlock } from 'reactstrap'; import {
import FontAwesome from 'react-fontawesome'; Progress,
Card,
CardBlock,
CardTitle,
CardText,
FormGroup,
Label,
Input
} from 'reactstrap';
import ToggleContainer from './toggle_container';
import fetch from 'isomorphic-fetch'; import fetch from 'isomorphic-fetch';
import bencode from 'bencode';
import ws_send from '../socket'; 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 { class AddTorrent extends Component {
constructor() { constructor() {
@ -13,7 +129,10 @@ class AddTorrent extends Component {
this.state = { this.state = {
loading: false, loading: false,
customize: false, customize: false,
file: null file: null,
torrent: null,
files: [],
startImmediately: true
}; };
} }
@ -27,7 +146,7 @@ class AddTorrent extends Component {
headers: headers headers: headers
}); });
} catch (ex) { } catch (ex) {
// TODO: synapse borks up this response // TODO: something more useful
console.log(ex); console.log(ex);
} }
} }
@ -36,8 +155,6 @@ class AddTorrent extends Component {
this.setState({ loading: true }); this.setState({ loading: true });
const { file } = this.state; const { file } = this.state;
const { dispatch } = this.props; const { dispatch } = this.props;
const reader = new FileReader();
reader.onload = e => {
ws_send("UPLOAD_TORRENT", { size: file.size }, async offer => { ws_send("UPLOAD_TORRENT", { size: file.size }, async offer => {
switch (offer.type) { switch (offer.type) {
case "TRANSFER_OFFER": case "TRANSFER_OFFER":
@ -48,66 +165,116 @@ class AddTorrent extends Component {
break; break;
} }
}); });
}; }
reader.readAsArrayBuffer(file);
processTorrent(torrent) {
const { info } = torrent;
if (!info.files) {
this.setState({
files: [
{
name: info.name,
length: info.length
}
],
torrent
});
} else {
// TODO
}
} }
handleFile(e) { handleFile(e) {
const file = e.target.files[0]; 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 }); this.setState({ file });
} }
render() { renderOptions() {
const { file, loading } = this.state;
return ( return (
<div> <Card>
<h3>Add torrent</h3> <CardBlock>
<div className="form-group"> <FormGroup>
<Label for="start-immediately" check style={{paddingLeft: 0}}>
<input <input
style={{display: "none"}} type="checkbox"
type="file" checked={this.state.startImmediately}
accept=".torrent" onChange={e => this.setState({
onChange={this.handleFile.bind(this)} startImmediately: !this.state.startImmediately
/> })}
<button id="start-immediately"
type="button" /> Start immediately
className="btn btn-default" </Label>
onClick={() => findDOMNode(this).querySelector("input[type='file']").click()} </FormGroup>
>Select torrent</button> <FormGroup>
<p>{file ? file.name : ""}</p> <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> </div>
<div className="form-group"> )
<p> )}
<button </dl>
className="btn btn-sm btn-default" </CardText>
onClick={() => this.setState({ customize: !this.state.customize })} </CardBlock>
> <ToggleContainer className="form-group" title="Options">
Torrent options {this.renderOptions.bind(this)()}
<FontAwesome </ToggleContainer>
name={`chevron-${this.state.customize ? "up" : "down"}`} <ToggleContainer className="form-group" title="Files">
style={{marginLeft: "0.25rem"}}
/>
</button>
</p>
<Collapse isOpen={this.state.customize}>
<Card> <Card>
<CardBlock> <CardBlock>
TODO TODO
</CardBlock> </CardBlock>
</Card> </Card>
</Collapse> </ToggleContainer>
</div>
<div className="form-group">
<div className="row">
<div className="col-md-5">
<button <button
type="button" type="button"
className="btn btn-primary btn-block" className="btn btn-primary btn-block"
disabled={file === null || loading} disabled={file === null || loading}
onClick={this.uploadFile.bind(this)} onClick={this.uploadFile.bind(this)}
>Add torrent</button> >Add torrent</button>
</div>
<div className="col-md-7">
{loading ? {loading ?
<Progress <Progress
value={100} value={100}
@ -116,8 +283,41 @@ class AddTorrent extends Component {
color="info" color="info"
className="progress-maxheight" className="progress-maxheight"
/> : null} /> : null}
</Card>
);
}
render() {
return (
<div>
<h3>Add torrent</h3>
{this.state.torrent && this.renderTorrent.bind(this)()}
<div className="form-group">
<input
style={{display: "none"}}
type="file"
accept=".torrent"
onChange={this.handleFile.bind(this)}
/>
{this.state.torrent ?
<div style={{
display: "flex",
flexDirection: "column",
alignItems: "center"
}}>
<button
type="button"
className="btn btn-default"
onClick={() => findDOMNode(this).querySelector("input[type='file']").click()}
>Select a different torrent?</button>
</div> </div>
</div> :
<button
type="button"
className="btn btn-default btn-block"
onClick={() => findDOMNode(this).querySelector("input[type='file']").click()}
>Select torrent</button>
}
</div> </div>
</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>
);
}
}