feat(download): torrent downloads manager

src/app/download-page.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import Page from './page';
+import Footer from './footer';
+
+import TorrentLine from './torrent'
+import {List} from 'material-ui/List';
+import Subheader from 'material-ui/Subheader';
+import RaisedButton from 'material-ui/RaisedButton';
+
+export default class TopPage extends Page {
+  downloads = []
+
+  constructor(props) {
+    super(props)
+    this.setTitle('Current Downloads');
+  }
+  getDownloads()
+  {
+    window.torrentSocket.emit('downloads', window.customLoader((downloads) => {
+      this.downloads = downloads
+      this.forceUpdate()
+    }))
+  }
+  componentDidMount()
+  {
+    super.componentDidMount();
+    this.getDownloads()
+    this.downloading = () => this.getDownloads()
+    window.torrentSocket.on('downloading', this.downloading);
+    this.downloadDone = () => this.getDownloads()
+    window.torrentSocket.on('downloadDone', this.downloadDone);
+  }
+  componentWillUnmount()
+  {
+    if(this.downloading)
+      window.torrentSocket.off('downloading', this.downloading);
+    if(this.downloadDone)
+      window.torrentSocket.off('downloadDone', this.downloadDone);
+  }
+  render() {
+    return (
+      <div>
+      	<div className='column center w100p pad0-75'>
+          <RaisedButton label="Back to main page" primary={true} onClick={() => {
+            window.router('/')
+          }} />
+            <List style={{paddingBottom: '70px'}} className='animated recent-torrents'>
+              {
+                this.downloads.map((download, index) => {
+                  return <TorrentLine key={index} torrent={download.torrentObject} download={download} />
+                })
+              }
+            </List>
+          <Footer />
+        </div>
+      </div>
+    );
+  }
+}

src/app/router.js

@@ -6,6 +6,7 @@ import TorrentPage from './torrent-page.js'
 import DMCAPage from './dmca-page.js'
 import AdminPage from './admin-page.js'
 import TopPage from './top-page.js'
+import DownloadPage from './download-page.js'
 import ChangelogPage from './changelog-page.js'
 
 let routers = {}
@@ -79,6 +80,11 @@ router('/top', () => {
 	PagesPie.instance().open(TopPage, {replace: 'all'});
 });
 
+router('/downloads', () => {
+	//singleton
+	PagesPie.instance().open(DownloadPage, {replace: 'all'});
+});
+
 router('/changelog', () => {
 	//singleton
 	PagesPie.instance().open(ChangelogPage, {replace: 'all'});

src/app/torrent-page.js

@@ -377,7 +377,7 @@ export default class TorrentPage extends Page {
                         onClick={(e) => {
                           e.preventDefault();
                           this.setState({askDownloading: true})
-                          window.torrentSocket.emit('download', `magnet:?xt=urn:btih:${this.torrent.hash}`)
+                          window.torrentSocket.emit('download', this.torrent)
                         }}
                         icon={
                           <svg viewBox="0 0 56 56" fill='white'>

src/app/torrent.js

@@ -162,6 +162,17 @@ export default class Torrent extends Component {
     askDownloading: false,
     downloadProgress: {}
   }
+  constructor(props)
+  {
+    super(props)
+    if(props.download)
+    {
+      const { progress, downloaded, speed } = props.download
+      this.state.downloadProgress = {
+        progress, downloaded, speed
+      }
+    }
+  }
   componentDidMount()
   {
     this.downloading = (hash) => {
@@ -297,7 +308,7 @@ export default class Torrent extends Component {
                   e.preventDefault();
                   e.stopPropagation();
                   this.setState({askDownloading: true})
-                  window.torrentSocket.emit('download', `magnet:?xt=urn:btih:${torrent.hash}`)
+                  window.torrentSocket.emit('download', torrent)
               }} viewBox="0 0 56 56">
                   <g>
                               <path d="M35.586,41.586L31,46.172V28c0-1.104-0.896-2-2-2s-2,0.896-2,2v18.172l-4.586-4.586c-0.781-0.781-2.047-0.781-2.828,0