evan/rats-search
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat(download): torrent progress on torrent element

Browse Source
This commit is contained in:
Alexey Kasyanchuk 2018-02-08 15:12:37 +03:00
parent c035e880e9
commit 603798cbce
3 changed files with 195 additions and 92 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/app/torrent-page.js
View File

@ -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);

104
src/app/torrent.js
View File

@ -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>
)
}
}

4
src/background/spider.js
View File

@ -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)
})