Skip to content

Commit

Permalink
feat(download): torrent progress on torrent element
Browse files Browse the repository at this point in the history
  • Loading branch information
@DEgITx
DEgITx committed Feb 8, 2018
1 parent 2bf8970 commit 70a7daa
Show file tree
Hide file tree
Showing 3 changed files with 193 additions and 90 deletions.
1 change: 0 additions & 1 deletion src/app/torrent-page.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down
278 changes: 189 additions & 89 deletions src/app/torrent.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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')
{
Expand Down Expand Up @@ -150,98 +153,195 @@ const contentIcon = (type, category) => {
};
export {contentIcon}

export default (props) => {

const torrent = props.torrent;
return (
<div>
<ListItem
onClick={(e) => {
const link = '/torrent/' + torrent.hash;
if(e.button === 1)
return false;
export default class Torrent extends Component {
state = {
downloading: false,
askDownloading: false,
downloadProgress: {}
}
componentDidMount()
{
this.downloading = (hash) => {
if(this.props.torrent.hash != hash)
return;

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
onClick={(e) => {
const link = '/torrent/' + torrent.hash;
if(e.button === 1)
return false;

if(e.ctrlKey && e.button === 0) {
let win = window.open(link, '_blank');
//win.focus();
return true;
}
if(e.ctrlKey && e.button === 0) {
let win = window.open(link, '_blank');
//win.focus();
return true;
}

window.router(link)
}}
primaryText={
<a href={'/torrent/' + torrent.hash} ref={(node) => {
if(node)
node.onclick = () => { return false }
}}>
<span className='break-word' style={{
color: torrent.contentCategory != 'xxx' ? 'black' : 'grey'
window.router(link)
}}
primaryText={
<a href={'/torrent/' + torrent.hash} ref={(node) => {
if(node)
node.onclick = () => { return false }
}}>
{torrent.name}
</span>
</a>
}
secondaryText={
<a href={'/torrent/' + torrent.hash} ref={(node) => {
if(node)
node.onclick = () => { return false }
}}>
<div className='column' style={{height: 'auto', whiteSpace: 'normal', paddingTop: '0.30em'}}>
<div>
{
formatBytes(torrent.size, 1) + ' (' + torrent.files + ' files)'
}
<span className='break-word' style={{
color: torrent.contentCategory != 'xxx' ? 'black' : 'grey'
}}>
{torrent.name}
</span>
</a>
}
secondaryText={
<a href={'/torrent/' + torrent.hash} ref={(node) => {
if(node)
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
?
torrent.path.map((path, index) => {
return <div key={index} className='break-word fs0-75' style={{paddingTop: '0.3em', marginLeft: '0.6em'}}>{path}</div>
})
:
null
}
{
torrent.seeders || torrent.leechers || torrent.completed
?
<div className='break-word fs0-85' style={{paddingTop: '0.35em'}}>
<span style={{color: (torrent.seeders > 0 ? '#00C853' : 'grey')}}>{torrent.seeders} seeders</span>
<span style={{color: (torrent.leechers > 0 ? '#AA00FF' : 'grey'), marginLeft: '12px'}}>{torrent.leechers} leechers</span>
<span style={{color: (torrent.completed > 0 ? '#FF6D00' : 'grey'), marginLeft: '12px'}}>{torrent.completed} completed</span>
</div>
:
null
}
</div>
</a>
}
leftIcon={contentIcon(torrent.contentType, torrent.contentCategory)}
rightIcon={
<div className='row inline' style={{width: 63}}>
{
torrent.path && torrent.path.length > 0
?
torrent.path.map((path, index) => {
return <div key={index} className='break-word fs0-75' style={{paddingTop: '0.3em', marginLeft: '0.6em'}}>{path}</div>
})
:
null
}
{
torrent.seeders || torrent.leechers || torrent.completed
?
<div className='break-word fs0-85' style={{paddingTop: '0.35em'}}>
<span style={{color: (torrent.seeders > 0 ? '#00C853' : 'grey')}}>{torrent.seeders} seeders</span>
<span style={{color: (torrent.leechers > 0 ? '#AA00FF' : 'grey'), marginLeft: '12px'}}>{torrent.leechers} leechers</span>
<span style={{color: (torrent.completed > 0 ? '#FF6D00' : 'grey'), marginLeft: '12px'}}>{torrent.completed} completed</span>
</div>
:
null
!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} />
}
</div>
</a>
}
leftIcon={contentIcon(torrent.contentType, torrent.contentCategory)}
rightIcon={
<a href={`magnet:?xt=urn:btih:${torrent.hash}`}>
<svg style={{
height: '24px',
fill: torrent.contentCategory != 'xxx' ? 'black' : 'grey'
}} onClick={(e) => {
e.preventDefault();
e.stopPropagation();
var win = window.open(`magnet:?xt=urn:btih:${torrent.hash}`, '_self');
}} viewBox="0 0 24 24">
<path d="M15.82 10.736l-5.451 6.717c-.561.691-1.214 1.042-1.94 1.042-1.144
0-2.327-.899-2.753-2.091-.214-.6-.386-1.76.865-2.784 3.417-2.794 6.716-5.446
6.716-5.446l-3.363-4.174s-4.532 3.657-6.771 5.487c-2.581 2.108-3.123 4.468-3.123
6.075 0 4.416 4.014 8.438 8.42 8.438 1.604 0 3.963-.543 6.084-3.128 1.835-2.237
5.496-6.773 5.496-6.773l-4.18-3.363zm-2.604 9.079c-1.353 1.647-3.01 2.519-4.796
2.519-3.471 0-6.753-3.291-6.753-6.771 0-1.789.867-3.443 2.51-4.785 1.206-.986
2.885-2.348 4.18-3.398l1.247 1.599c-1.074.87-2.507 2.033-4.118 3.352-1.471
1.202-1.987 2.935-1.38 4.634.661 1.853 2.479 3.197 4.322 3.197h.001c.86 0
2.122-.288 3.233-1.658l3.355-4.134 1.572 1.294c-1.044 1.291-2.392 2.954-3.373
4.151zm6.152-7.934l4.318-2.88-1.575-.638 1.889-2.414-4.421 2.788 1.716.695-1.927
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>
}
/>
<Divider />
</div>
)
}
<a style={{float: 'right'}} href={`magnet:?xt=urn:btih:${torrent.hash}`}>
<svg style={{
height: '24px',
fill: torrent.contentCategory != 'xxx' ? 'black' : 'grey'
}} onClick={(e) => {
e.preventDefault();
e.stopPropagation();
var win = window.open(`magnet:?xt=urn:btih:${torrent.hash}`, '_self');
}} viewBox="0 0 24 24">
<path d="M15.82 10.736l-5.451 6.717c-.561.691-1.214 1.042-1.94 1.042-1.144
0-2.327-.899-2.753-2.091-.214-.6-.386-1.76.865-2.784 3.417-2.794 6.716-5.446
6.716-5.446l-3.363-4.174s-4.532 3.657-6.771 5.487c-2.581 2.108-3.123 4.468-3.123
6.075 0 4.416 4.014 8.438 8.42 8.438 1.604 0 3.963-.543 6.084-3.128 1.835-2.237
5.496-6.773 5.496-6.773l-4.18-3.363zm-2.604 9.079c-1.353 1.647-3.01 2.519-4.796
2.519-3.471 0-6.753-3.291-6.753-6.771 0-1.789.867-3.443 2.51-4.785 1.206-.986
2.885-2.348 4.18-3.398l1.247 1.599c-1.074.87-2.507 2.033-4.118 3.352-1.471
1.202-1.987 2.935-1.38 4.634.661 1.853 2.479 3.197 4.322 3.197h.001c.86 0
2.122-.288 3.233-1.658l3.355-4.134 1.572 1.294c-1.044 1.291-2.392 2.954-3.373
4.151zm6.152-7.934l4.318-2.88-1.575-.638 1.889-2.414-4.421 2.788 1.716.695-1.927
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>
)
}
}
4 changes: 4 additions & 0 deletions src/background/spider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)
})
Expand Down

0 comments on commit 70a7daa

Please sign in to comment.