diff --git a/font-awesome.config.js b/font-awesome.config.js
new file mode 100644
index 0000000..942aa0c
--- /dev/null
+++ b/font-awesome.config.js
@@ -0,0 +1,17 @@
+module.exports = {
+ styles: {
+ "mixins": true,
+
+ "path": true,
+ "core": true,
+ "larger": true,
+ "fixed-width": true,
+ "list": true,
+ "bordered-pulled": true,
+ "animated": true,
+ "rotated-flipped": true,
+ "stacked": true,
+ "icons": true,
+ "screen-reader": true,
+ },
+};
diff --git a/package.json b/package.json
index aebb174..7426270 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-redux": "^5.0.5",
+ "reactstrap": "^4.8.0",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
"style-loader": "^0.18.2",
@@ -35,14 +36,20 @@
},
"dependencies": {
"babel-plugin-transform-react-jsx": "^6.24.1",
+ "babel-polyfill": "^6.26.0",
"bootstrap": "^4.0.0-alpha.6",
"express": "^4.15.3",
"file-loader": "^0.11.2",
"font-awesome": "^4.7.0",
+ "font-awesome-sass-loader": "^2.0.1",
"history": "^4.7.2",
+ "isomorphic-fetch": "^2.2.1",
"node-sass": "^4.5.3",
+ "react-fontawesome": "^1.6.1",
"react-router-dom": "^4.2.0",
"react-router-redux": "^5.0.0-alpha.6",
- "sass-loader": "^6.0.6"
+ "react-transition-group": "^2.2.0",
+ "sass-loader": "^6.0.6",
+ "url-loader": "^0.5.9"
}
}
diff --git a/scss/main.scss b/scss/main.scss
index 8b77f78..3a21eae 100644
--- a/scss/main.scss
+++ b/scss/main.scss
@@ -52,3 +52,31 @@
margin-top: -11px;
}
}
+
+.card {
+ border-radius: 0;
+
+ .card-block {
+ padding: 0.5rem;
+ }
+}
+
+.progress-maxheight {
+ height: 100%;
+
+ .progress-bar {
+ height: 100%;
+ }
+}
+
+.nav-link {
+ &.btn-primary {
+ color: white !important;
+
+ &.active {
+ color: black !important;
+ background: transparent !important;
+ border: 1px solid $brand-primary;
+ }
+ }
+}
diff --git a/src/index.js b/src/index.js
index 202ac0a..ee0d9cb 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,3 +1,4 @@
+import "babel-polyfill";
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
diff --git a/src/ui/add_torrent.js b/src/ui/add_torrent.js
index d4af755..7dbb198 100644
--- a/src/ui/add_torrent.js
+++ b/src/ui/add_torrent.js
@@ -1,9 +1,127 @@
-import React from 'react';
+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 fetch from 'isomorphic-fetch';
+import ws_send from '../socket';
-export default function add_torrent(props) {
- return (
-
-
Add torrent
-
- );
+class AddTorrent extends Component {
+ constructor() {
+ super();
+ this.state = {
+ loading: false,
+ customize: false,
+ file: null
+ };
+ }
+
+ async handleTransferOffer(offer, file) {
+ const headers = new Headers();
+ headers.append("Authorization", "Bearer " + offer.token);
+ try {
+ const resp = await fetch('http://localhost:8412/', {
+ method: 'POST',
+ body: file,
+ headers: headers
+ });
+ } catch (ex) {
+ // TODO: synapse borks up this response
+ console.log(ex);
+ }
+ }
+
+ uploadFile() {
+ 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;
+ }
+ });
+ };
+ reader.readAsArrayBuffer(file);
+ }
+
+ handleFile(e) {
+ const file = e.target.files[0];
+ this.setState({ file });
+ }
+
+ render() {
+ const { file, loading } = this.state;
+ return (
+
+
Add torrent
+
+
+
+
{file ? file.name : ""}
+
+
+
+
+
+
+
+
+ TODO
+
+
+
+
+
+
+ );
+ }
}
+
+export default connect()(AddTorrent);
diff --git a/src/ui/main.js b/src/ui/main.js
index 97c098e..9a33210 100644
--- a/src/ui/main.js
+++ b/src/ui/main.js
@@ -13,7 +13,7 @@ export default class Main extends Component {
-
+
);
diff --git a/src/ui/navigation.js b/src/ui/navigation.js
index 29e543b..5e45db1 100644
--- a/src/ui/navigation.js
+++ b/src/ui/navigation.js
@@ -9,7 +9,7 @@ export default function render(props) {
add torrent
diff --git a/webpack.config.js b/webpack.config.js
index 7767de6..bd7bd18 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,6 +1,7 @@
const path = require("path");
const webpack = require("webpack");
+
const defines = {
"DEFAULT_WS_URI": process.env.WEBSOCKET_URI || "ws://localhost:8412/"
};
@@ -9,6 +10,7 @@ module.exports = {
devtool: "source-map",
entry: [
"webpack-hot-middleware/client",
+ "font-awesome-sass-loader!./font-awesome.config.js",
"./src/index.js"
],
output: {
@@ -19,7 +21,17 @@ module.exports = {
module: {
rules: [
{ test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" },
- { test: /\.(ttf|eot|svg|woff2?)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" },
+ { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, use: [
+ {
+ loader: 'url-loader',
+ options: { limit: 10000, mimetype: 'application/font-woff' },
+ }
+ ]
+ },
+ {
+ test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
+ use: [ { loader: 'file-loader' } ]
+ },
{ test: /\.scss$/,
use: [
'style-loader',