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

src/background/background.js

@@ -15,6 +15,7 @@ import { devMenuTemplate } from "./menu/dev_menu_template";
 import { editMenuTemplate } from "./menu/edit_menu_template";
 import { settingsMenuTemplate } from "./menu/config_menu_template";
 import { aboutMenuTemplate } from "./menu/about_menu_template";
+import { manageMenuTemplate } from "./menu/manage_menu_template";
 
 // Special module holding environment variables which you declared
 // in config/env_xxx.json file.
@@ -28,7 +29,7 @@ const iconv = require('iconv-lite');
 require('electron-context-menu')({})
 
 const setApplicationMenu = () => {
-  const menus = [editMenuTemplate, settingsMenuTemplate, aboutMenuTemplate];
+  const menus = [editMenuTemplate, manageMenuTemplate, settingsMenuTemplate, aboutMenuTemplate];
   if (env.name !== "production") {
     menus.push(devMenuTemplate);
   }

src/background/menu/manage_menu_template.js

@@ -0,0 +1,23 @@
+import { app, BrowserWindow, shell } from "electron";
+import path from "path";
+import url from "url";
+
+export const manageMenuTemplate = {
+  label: "Manage",
+  submenu: [
+    {
+      label: "Downloads",
+      accelerator: "CmdOrCtrl+d",
+      click: () => {
+        BrowserWindow.getFocusedWindow().webContents.send('url', '/downloads')
+      },
+    },
+    {
+      label: "Search",
+      accelerator: "CmdOrCtrl+n",
+      click: () => {
+        BrowserWindow.getFocusedWindow().webContents.send('url', '/')
+      },
+    }
+  ]
+};

src/background/spider.js

@@ -690,8 +690,9 @@ if(dataDirectory && fs.existsSync(dataDirectory + '/peers.p2p'))
 			callback(true)
 	});
 
-	recive('download', (magnet) =>
+	recive('download', (torrentObject) =>
 	{
+		const magnet = `magnet:?xt=urn:btih:${torrentObject.hash}`
 		console.log('download', magnet)
 		if(torrentClient.get(magnet)) {
 			console.log('aready added')
@@ -700,6 +701,7 @@ if(dataDirectory && fs.existsSync(dataDirectory + '/peers.p2p'))
 
 		torrentClient.add(magnet, {path: config.client.downloadPath}, (torrent) =>{
 			torrentClientHashMap[torrent.infoHash] = magnet
+			torrent.torrentObject = torrentObject
 			console.log('start downloading', torrent.infoHash)
 			send('downloading', torrent.infoHash)
 
@@ -716,7 +718,7 @@ if(dataDirectory && fs.existsSync(dataDirectory + '/peers.p2p'))
 				now = Date.now()
 
 				send('downloadProgress', torrent.infoHash, {
-					bytes,
+					received: bytes,
 					downloaded: torrent.downloaded,
 					speed: torrent.downloadSpeed,
 					progress: torrent.progress
@@ -751,6 +753,17 @@ if(dataDirectory && fs.existsSync(dataDirectory + '/peers.p2p'))
 		})
 	})
 
+	recive('downloads', (callback) =>
+	{
+		callback(torrentClient.torrents.map(torrent => ({
+			torrentObject: torrent.torrentObject,
+			received: torrent.received,
+			downloaded: torrent.downloaded,
+			progress: torrent.progress,
+			speed: torrent.downloadSpeed
+		})))
+	})
+
 	let socketIPV4 = () => {
 		let ip = socket.request.connection.remoteAddress;
 		if (ipaddr.IPv4.isValid(ip)) {