feat(download): torrent progress on torrent element
This commit is contained in:
Alexey Kasyanchuk
parent
c035e880e9
commit
603798cbce
@ -259,7 +259,6 @@ export default class TorrentPage extends Page {
|
|||||||
if(this.props.hash != hash)
|
if(this.props.hash != hash)
|
||||||
return;
|
return;
|
||||||
|
|
||||||
console.log(progress)
|
|
||||||
this.setState({downloadProgress: progress})
|
this.setState({downloadProgress: progress})
|
||||||
}
|
}
|
||||||
window.torrentSocket.on('downloadProgress', this.downloadProgress);
|
window.torrentSocket.on('downloadProgress', this.downloadProgress);
|
||||||
|
|||||||
@ -3,6 +3,9 @@ import formatBytes from './format-bytes'
|
|||||||
import {ListItem} from 'material-ui/List';
|
import {ListItem} from 'material-ui/List';
|
||||||
import Divider from 'material-ui/Divider';
|
import Divider from 'material-ui/Divider';
|
||||||
|
|
||||||
|
import Spinner24 from './images/spinner_24.gif'
|
||||||
|
import LinearProgress from 'material-ui/LinearProgress';
|
||||||
|
|
||||||
const contentIcon = (type, category) => {
|
const contentIcon = (type, category) => {
|
||||||
if(category == 'xxx')
|
if(category == 'xxx')
|
||||||
{
|
{
|
||||||
@ -150,98 +153,195 @@ const contentIcon = (type, category) => {
|
|||||||
};
|
};
|
||||||
export {contentIcon}
|
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})
|
||||||
return (
|
}
|
||||||
<div>
|
window.torrentSocket.on('downloading', this.downloading);
|
||||||
<ListItem
|
|
||||||
onClick={(e) => {
|
|
||||||
const link = '/torrent/' + torrent.hash;
|
|
||||||
if(e.button === 1)
|
|
||||||
return false;
|
|
||||||
|
|
||||||
if(e.ctrlKey && e.button === 0) {
|
this.downloadDone = (hash) => {
|
||||||
let win = window.open(link, '_blank');
|
if(this.props.torrent.hash != hash)
|
||||||
//win.focus();
|
return;
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
window.router(link)
|
this.setState({downloading: false})
|
||||||
}}
|
}
|
||||||
primaryText={
|
window.torrentSocket.on('downloadDone', this.downloadDone);
|
||||||
<a href={'/torrent/' + torrent.hash} ref={(node) => {
|
|
||||||
if(node)
|
this.downloadProgress = (hash, progress) => {
|
||||||
node.onclick = () => { return false }
|
if(this.props.torrent.hash != hash)
|
||||||
}}>
|
return;
|
||||||
<span className='break-word' style={{
|
|
||||||
color: torrent.contentCategory != 'xxx' ? 'black' : 'grey'
|
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;
|
||||||
|
}
|
||||||
|
|
||||||
|
window.router(link)
|
||||||
|
}}
|
||||||
|
primaryText={
|
||||||
|
<a href={'/torrent/' + torrent.hash} ref={(node) => {
|
||||||
|
if(node)
|
||||||
|
node.onclick = () => { return false }
|
||||||
}}>
|
}}>
|
||||||
{torrent.name}
|
<span className='break-word' style={{
|
||||||
</span>
|
color: torrent.contentCategory != 'xxx' ? 'black' : 'grey'
|
||||||
</a>
|
}}>
|
||||||
}
|
{torrent.name}
|
||||||
secondaryText={
|
</span>
|
||||||
<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)'
|
|
||||||
}
|
|
||||||
</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={
|
|
||||||
<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>
|
</a>
|
||||||
}
|
}
|
||||||
/>
|
secondaryText={
|
||||||
<Divider />
|
<a href={'/torrent/' + torrent.hash} ref={(node) => {
|
||||||
</div>
|
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}}>
|
||||||
|
{
|
||||||
|
!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'
|
||||||
|
}} 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>
|
||||||
|
)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
@ -584,11 +584,15 @@ setInterval(() => {
|
|||||||
recive('download', (magnet) =>
|
recive('download', (magnet) =>
|
||||||
{
|
{
|
||||||
console.log('download', magnet)
|
console.log('download', magnet)
|
||||||
|
if(torrentClient.get(magnet))
|
||||||
|
return
|
||||||
|
|
||||||
torrentClient.add(magnet, {path: config.client.downloadPath}, (torrent) =>{
|
torrentClient.add(magnet, {path: config.client.downloadPath}, (torrent) =>{
|
||||||
torrentClientHashMap[torrent.infoHash] = magnet
|
torrentClientHashMap[torrent.infoHash] = magnet
|
||||||
send('downloading', torrent.infoHash)
|
send('downloading', torrent.infoHash)
|
||||||
|
|
||||||
torrent.on('done', () => {
|
torrent.on('done', () => {
|
||||||
|
console.log('download done', torrent.infoHash)
|
||||||
delete torrentClientHashMap[torrent.infoHash]
|
delete torrentClientHashMap[torrent.infoHash]
|
||||||
send('downloadDone', torrent.infoHash)
|
send('downloadDone', torrent.infoHash)
|
||||||
})
|
})
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user