feat(download): torrent progress on torrent element

src/app/torrent-page.js

@@ -259,7 +259,6 @@ export default class TorrentPage extends Page {
       if(this.props.hash != hash)
         return;
 
-      console.log(progress)
       this.setState({downloadProgress: progress})
     }
     window.torrentSocket.on('downloadProgress', this.downloadProgress);

src/app/torrent.js

@@ -3,6 +3,9 @@ import formatBytes from './format-bytes'
 import {ListItem} from 'material-ui/List';
 import Divider from 'material-ui/Divider';
 
+import Spinner24 from './images/spinner_24.gif'
+import LinearProgress from 'material-ui/LinearProgress';
+
 const contentIcon = (type, category) => {
   if(category == 'xxx')
   {
@@ -150,9 +153,53 @@ const contentIcon = (type, category) => {
 };
 export {contentIcon}
 
-export default (props) => {
+export default class Torrent extends Component {
+  state = {
+    downloading: false,
+    askDownloading: false,
+    downloadProgress: {}
+  }
+  componentDidMount()
+  {
+    this.downloading = (hash) => {
+      if(this.props.torrent.hash != hash)
+        return;
 
-const torrent = props.torrent;
+      this.setState({downloading: true})
+    }
+    window.torrentSocket.on('downloading', this.downloading);
+
+    this.downloadDone = (hash) => {
+      if(this.props.torrent.hash != hash)
+        return;
+
+      this.setState({downloading: false})
+    }
+    window.torrentSocket.on('downloadDone', this.downloadDone);
+
+    this.downloadProgress = (hash, progress) => {
+      if(this.props.torrent.hash != hash)
+        return;
+
+      this.setState({
+        downloading: true,
+        downloadProgress: progress
+      })
+    }
+    window.torrentSocket.on('downloadProgress', this.downloadProgress);
+  }
+  componentWillUnmount()
+  {
+    if(this.downloading)
+      window.torrentSocket.off('downloading', this.downloading);
+    if(this.downloadDone)
+      window.torrentSocket.off('downloadDone', this.downloadDone);
+    if(this.downloadProgress)
+      window.torrentSocket.off('downloadProgress', this.downloadProgress);
+  }
+  render()
+  {
+    const torrent = this.props.torrent;
     return (
       <div>
         <ListItem 
@@ -187,11 +234,22 @@ return (
                 node.onclick = () => { return false }
             }}>
               <div className='column' style={{height: 'auto', whiteSpace: 'normal', paddingTop: '0.30em'}}>
+                <div className='row w100p inline'>
                   <div>
                     {
                       formatBytes(torrent.size, 1) + ' (' + torrent.files + ' files)'
                     }
                   </div>
+                  {
+                    this.state.downloading
+                    &&
+                    <LinearProgress 
+                      style={{width: '44%', marginLeft: 20}}
+                      mode="determinate" 
+                      value={this.state.downloadProgress && this.state.downloadProgress.progress * 100}
+                   />
+                  }
+                </div>
                 {
                   torrent.path && torrent.path.length > 0
                   ?
@@ -217,7 +275,47 @@ return (
           }
           leftIcon={contentIcon(torrent.contentType, torrent.contentCategory)}
           rightIcon={
+            <div className='row inline' style={{width: 63}}>
+              {
+               !this.state.askDownloading && !this.state.downloading
+               ?
                <a href={`magnet:?xt=urn:btih:${torrent.hash}`}>
+                <svg style={{
+                  height: '24px',
+                  marginRight: 12,
+                  fill: torrent.contentCategory != 'xxx' ? 'black' : 'grey'
+              }} onClick={(e) => {
+                  e.preventDefault();
+                  e.stopPropagation();
+                  this.setState({askDownloading: true})
+                  window.torrentSocket.emit('download', `magnet:?xt=urn:btih:${torrent.hash}`)
+              }} 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
+                                s-0.781,2.047,0,2.828l7.999,7.999c0.093,0.094,0.196,0.177,0.307,0.251c0.047,0.032,0.099,0.053,0.148,0.081
+                                c0.065,0.036,0.127,0.075,0.196,0.103c0.065,0.027,0.133,0.042,0.2,0.062c0.058,0.017,0.113,0.04,0.173,0.051
+                                C28.738,52.986,28.869,53,29,53s0.262-0.014,0.392-0.04c0.06-0.012,0.115-0.034,0.173-0.051c0.067-0.02,0.135-0.035,0.2-0.062
+                                c0.069-0.028,0.131-0.067,0.196-0.103c0.05-0.027,0.101-0.049,0.148-0.081c0.11-0.074,0.213-0.157,0.307-0.251l7.999-7.999
+                                c0.781-0.781,0.781-2.047,0-2.828S36.367,40.805,35.586,41.586z"/>
+                              <path d="M47.835,18.986c-0.137-0.019-2.457-0.335-4.684,0.002C43.1,18.996,43.049,19,42.999,19c-0.486,0-0.912-0.354-0.987-0.85
+                                c-0.083-0.546,0.292-1.056,0.838-1.139c1.531-0.233,3.062-0.196,4.083-0.124C46.262,9.135,39.83,3,32.085,3
+                                C27.388,3,22.667,5.379,19.8,9.129C21.754,10.781,23,13.246,23,16c0,0.553-0.447,1-1,1s-1-0.447-1-1
+                                c0-2.462-1.281-4.627-3.209-5.876c-0.227-0.147-0.462-0.277-0.702-0.396c-0.069-0.034-0.139-0.069-0.21-0.101
+                                c-0.272-0.124-0.55-0.234-0.835-0.321c-0.035-0.01-0.071-0.017-0.106-0.027c-0.259-0.075-0.522-0.132-0.789-0.177
+                                c-0.078-0.013-0.155-0.025-0.233-0.036C14.614,9.027,14.309,9,14,9c-3.859,0-7,3.141-7,7c0,0.082,0.006,0.163,0.012,0.244
+                                l0.012,0.21l-0.009,0.16C7.008,16.744,7,16.873,7,17v0.63l-0.567,0.271C2.705,19.688,0,24,0,28.154C0,34.135,4.865,39,10.845,39H25
+                                V28c0-2.209,1.791-4,4-4s4,1.791,4,4v11h2.353c0.059,0,0.116-0.005,0.174-0.009l0.198-0.011l0.271,0.011
+                                C36.053,38.995,36.11,39,36.169,39h9.803C51.501,39,56,34.501,56,28.972C56,24.161,52.49,19.872,47.835,18.986z"/>
+                  </g>
+                 
+                 </svg>
+              </a>
+              :
+              this.state.askDownloading && !this.state.downloading
+              &&
+              <img src={Spinner24} />
+              }
+              <a style={{float: 'right'}} href={`magnet:?xt=urn:btih:${torrent.hash}`}>
                 <svg style={{
                   height: '24px',
                   fill: torrent.contentCategory != 'xxx' ? 'black' : 'grey'
@@ -239,9 +337,11 @@ return (
                   2.449zm-7.292-7.186l4.916-1.667-1.356-1.022 2.448-2.006-4.991 1.712 
                   1.478 1.114-2.495 1.869z"/></svg>
                 </a>
+              </div>
           }
         />
         <Divider />
       </div>
     )
   }
+}

src/background/spider.js

@@ -584,11 +584,15 @@ setInterval(() => {
 	recive('download', (magnet) =>
 	{
 		console.log('download', magnet)
+		if(torrentClient.get(magnet))
+			return
+
 		torrentClient.add(magnet, {path: config.client.downloadPath}, (torrent) =>{
 			torrentClientHashMap[torrent.infoHash] = magnet
 			send('downloading', torrent.infoHash)
 
 			torrent.on('done', () => { 
+				console.log('download done', torrent.infoHash)
 				delete torrentClientHashMap[torrent.infoHash]
 				send('downloadDone', torrent.infoHash)
 			})