From 0d9a1895cbf608fcf99dac3c332c2384371c093b Mon Sep 17 00:00:00 2001 From: Drew DeVault Date: Thu, 24 Aug 2017 09:50:14 -0400 Subject: [PATCH] Implement add torrent --- font-awesome.config.js | 17 ++++++ package.json | 9 ++- scss/main.scss | 28 +++++++++ src/index.js | 1 + src/ui/add_torrent.js | 132 ++++++++++++++++++++++++++++++++++++++--- src/ui/main.js | 2 +- src/ui/navigation.js | 2 +- webpack.config.js | 14 ++++- 8 files changed, 194 insertions(+), 11 deletions(-) create mode 100644 font-awesome.config.js 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 + + + +
+
+
+
+ +
+
+ {loading ? + : null} +
+
+
+
+ ); + } } + +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',