Decode torrents, flesh out options UI

package.json

@@ -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",

scss/main.scss

@@ -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;
+}

src/bitrate.js

@@ -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`;
   }

src/ui/add_torrent.js

@@ -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,8 +155,6 @@ 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":
@@ -48,66 +165,116 @@ class AddTorrent extends Component {
           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) {
     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 });
   }
 
-  render() {
-    const { file, loading } = this.state;
+  renderOptions() {
     return (
-      <div>
-        <h3>Add torrent</h3>
-        <div className="form-group">
+      <Card>
+        <CardBlock>
+          <FormGroup>
+            <Label for="start-immediately" check style={{paddingLeft: 0}}>
               <input
-            style={{display: "none"}}
-            type="file"
-            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>
+                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>
-        <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}>
+                )
+              )}
+            </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>
-          </Collapse>
-        </div>
-        <div className="form-group">
-          <div className="row">
-            <div className="col-md-5">
+        </ToggleContainer>
         <button
           type="button"
           className="btn btn-primary btn-block"
           disabled={file === null || loading}
           onClick={this.uploadFile.bind(this)}
         >Add torrent</button>
-            </div>
-            <div className="col-md-7">
         {loading ?
           <Progress
             value={100}
@@ -116,8 +283,41 @@ class AddTorrent extends Component {
             color="info"
             className="progress-maxheight"
           /> : 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>
+          :
+            <button
+              type="button"
+              className="btn btn-default btn-block"
+              onClick={() => findDOMNode(this).querySelector("input[type='file']").click()}
+            >Select torrent</button>
+          }
         </div>
       </div>
     );

src/ui/toggle_container.js

@@ -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>
+    );
+  }
+}