rats-search/src/app/torrent-page.js
2018-08-29 02:09:31 +03:00

608 lines
21 KiB
JavaScript

import React from 'react';
import Page from './page';
import formatBytes from './format-bytes'
import {List, ListItem} from 'material-ui/List';
import Subheader from 'material-ui/Subheader';
import {Tabs, Tab} from 'material-ui/Tabs';
import ActionInfo from 'material-ui/svg-icons/action/info';
import RaisedButton from 'material-ui/RaisedButton';
import Toggle from 'material-ui/Toggle';
import FileFolder from 'material-ui/svg-icons/file/folder';
import NoImage from './images/no-image-icon.png'
var moment = require('moment');
import RefreshIndicator from 'material-ui/RefreshIndicator';
let rating = require('./rating');
import LinearProgress from './LinearProgress';
import FlatButton from 'material-ui/FlatButton';
import {fileTypeDetect} from './content'
import {contentIcon} from './torrent'
import TrackersImages from './trackers-images'
import DownloadTorrentMenu from './download-torrent-menu'
let parseDescriptionText = (text) => {
return text.split("\n").map(function(item) {
const text = /(.+?:)(.*)/.exec(item)
return (
<span>
{
text ? <span><b>{`${text[1]} `}</b>{text[2]}</span> : item
}
<br/>
</span>
)
})
}
let buildFilesTree = (filesList) => {
let rootTree = {
__sizeBT: 0
};
filesList.forEach((file) => {
let pathTree = file.path.split('/');
let currentItem = rootTree;
pathTree.forEach((pathItem, index) => {
if(!(pathItem in currentItem))
{
// крайний индекс, значит это объект файла, объединяем объекты
if(index === pathTree.length - 1)
{
file.__sizeBT = 0
file.__fileBT = true
currentItem[pathItem] = file
}
else
{
currentItem[pathItem] = {
__sizeBT: 0
}
}
}
currentItem = currentItem[pathItem]
currentItem.__sizeBT += file.size;
})
rootTree.__sizeBT += file.size;
});
return rootTree;
}
const treeToTorrentFiles = (tree, torrent, toggles) => {
// toggles for button disable/enable torrent/directory in torrent client
if(toggles)
{
if(tree.__fileBT && typeof tree.downloadIndex !== 'undefined')
{
toggles.push({
downloadIndex: tree.downloadIndex,
selected: typeof tree.downloadSelected === 'undefined' || tree.downloadSelected
})
}
}
// this is already file, return
if(tree.__fileBT)
return
let arr = [];
for(let file in tree)
{
if(file == '__sizeBT')
continue;
const newToggles = []
arr.push(<ListItem
key={file}
primaryText={file}
secondaryText={formatBytes(tree[file].__sizeBT)}
nestedItems={treeToTorrentFiles(tree[file], torrent, newToggles)}
primaryTogglesNestedList={true}
innerDivStyle={{wordBreak: 'break-word'}}
leftIcon={!tree[file].__fileBT ? <FileFolder /> : contentIcon(fileTypeDetect({path: file}))}
rightToggle={
newToggles.length > 0
?
<Toggle
toggled={newToggles.every( ({selected}) => selected )}
onToggle={(e, checked) => {
e.preventDefault()
e.stopPropagation()
let toggleValues = {}
newToggles.forEach(({downloadIndex}) => toggleValues[downloadIndex] = checked)
window.torrentSocket.emit('downloadSelectFiles', torrent, toggleValues)
}}
/>
:
null
}
/>);
if(toggles)
{
for(const newToggle of newToggles)
toggles.push(newToggle)
}
}
return arr;
}
const TorrentFiles = (props) => {
let filesList = props.torrent.filesList;
let tree = buildFilesTree(filesList);
return (
<List className='w100p'>
{
filesList.length > 0
?
<div className='w100p'>
<Subheader inset={true}>{__('Content of the torrent')}:</Subheader>
{treeToTorrentFiles(tree, {hash: props.torrent.hash})}
</div>
:
<div className='column center'>
<span className='pad0-75'>{__('Processing files')}...</span>
<LinearProgress mode="indeterminate" />
</div>
}
</List>
);
};
const TorrentInformation = (props) => {
let torrent = props.torrent;
return (
<List className='w100p'>
<Subheader inset={true}>{__('Information about torrent')}</Subheader>
<ListItem
//leftAvatar={<Avatar icon={<ActionAssignment />} backgroundColor={blue500} />}
rightIcon={<ActionInfo />}
primaryText={__('Torrent Name')}
secondaryText={<span className='break-word' style={{whiteSpace: 'normal'}}>{(torrent.info && torrent.info.name) || torrent.name}</span>}
/>
<ListItem
// leftAvatar={<Avatar icon={<EditorInsertChart />} backgroundColor={yellow600} />}
rightIcon={<ActionInfo />}
primaryText={__('Torrent Size')}
secondaryText={formatBytes(torrent.size)}
/>
<ListItem
// leftAvatar={<Avatar icon={<EditorInsertChart />} backgroundColor={yellow600} />}
rightIcon={<ActionInfo />}
primaryText={__('Torrent contains files')}
secondaryText={torrent.files}
onClick={() => {
if(!props.parent)
return
props.parent.setState({
value: 'files'
})
}}
/>
<ListItem
// leftAvatar={<Avatar icon={<EditorInsertChart />} backgroundColor={yellow600} />}
rightIcon={<ActionInfo />}
primaryText={__('Indexed/Added torrent date')}
secondaryText={moment(torrent.added * 1000).format('MMMM Do YYYY, hh:mm')}
/>
<ListItem
// leftAvatar={<Avatar icon={<EditorInsertChart />} backgroundColor={yellow600} />}
rightIcon={<ActionInfo />}
primaryText={__('Content type')}
secondaryText={torrent.contentType || 'unknown'}
/>
<ListItem
// leftAvatar={<Avatar icon={<EditorInsertChart />} backgroundColor={yellow600} />}
rightIcon={<ActionInfo />}
primaryText={__('Category')}
secondaryText={(torrent.info && torrent.info.contentCategory) || torrent.contentCategory || 'unknown'}
/>
</List>
);
}
export default class TorrentPage extends Page {
constructor(props) {
super(props);
this.state = {
value: 'info',
searchingIndicator: false,
voting: false,
voted: false,
downloading: false,
downloaded: false,
startingDownloading: false,
downloadProgress: {}
};
this.setTitle('Information about torrent');
}
changeTab(tab) {
if(this.state.value != tab) {
this.setState({
value: tab
});
console.log('change');
}
}
onSwipeRight() {
this.changeTab('files');
}
onSwipeLeft() {
this.changeTab('info');
}
handleChange = (value) => {
if(value == 'main') {
window.routerOpenPrev();
return;
}
this.setState({
value: value,
});
};
getTorrentInfo() {
window.torrentSocket.emit('torrent', this.props.hash, {files: true, peer: this.props.peer}, window.customLoader((data) => {
if(data) {
this.torrent = data
this.setTitle(this.torrent.name + ' - Rats On The Boat');
if(this.torrent.contentCategory == 'xxx') {
this.setMetaTag('robots', 'noindex');
}
//this.forceUpdate(); // вызывается через searchingIndicator
// Получаем более новую статистику пира
if((Date.now() / 1000) - this.torrent.trackersChecked > 10 * 60) {
window.torrentSocket.emit('checkTrackers', this.torrent.hash);
}
}
}, () => {
this.setState({
searchingIndicator: true
});
}, () => {
this.setState({
searchingIndicator: false
});
}));
}
componentDidMount() {
super.componentDidMount();
this.filesUpdated = (hash, filesList) => {
if(this.props.hash != hash)
return;
if(filesList)
{
if(this.torrent)
{
this.torrent.filesList = filesList
this.forceUpdate()
}
}
else
this.getTorrentInfo();
}
window.torrentSocket.on('filesReady', this.filesUpdated);
this.trackerUpdate = (info) => {
if(this.props.hash != info.hash)
return;
if(!this.torrent)
return;
this.torrent = Object.assign(this.torrent, info);
this.forceUpdate();
}
window.torrentSocket.on('trackerTorrentUpdate', this.trackerUpdate);
this.onVotes = async ({hash, good, bad, selfVote}) => {
if(this.props.hash != hash)
return;
if(!this.torrent)
return
this.torrent.good = good;
this.torrent.bad = bad;
this.state.voted = selfVote;
this.forceUpdate();
}
window.torrentSocket.on('votes', this.onVotes);
this.downloading = (hash) => {
if(this.props.hash != hash)
return;
this.setState({
downloading: true,
startingDownloading: false
})
}
window.torrentSocket.on('downloading', this.downloading);
this.downloadDone = (hash, canceled) => {
if(this.props.hash != hash)
return;
this.setState({
downloading: false,
startingDownloading: false,
downloaded: !canceled
})
}
window.torrentSocket.on('downloadDone', this.downloadDone);
this.downloadProgress = (hash, progress) => {
if(this.props.hash != hash)
return;
this.setState({
downloading: true,
startingDownloading: false,
downloadProgress: progress
})
}
window.torrentSocket.on('downloadProgress', this.downloadProgress);
this.getTorrentInfo();
}
componentWillUnmount() {
if(this.filesUpdated)
window.torrentSocket.off('filesReady', this.filesUpdated);
if(this.trackerUpdate)
window.torrentSocket.off('trackerTorrentUpdate', this.trackerUpdate);
if(this.onVotes)
window.torrentSocket.off('votes', this.onVotes);
if(this.torrent && this.torrent.contentCategory == 'xxx') {
this.removeMetaTag('robots');
}
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);
}
vote(good) {
if(!this.torrent)
return;
this.setState({
voting: true
});
window.torrentSocket.emit('vote', this.torrent.hash, !!good, window.customLoader((success) => {
this.setState({
voted: true,
voting: false
});
}));
}
render() {
const style = {
refresh: {
display: 'inline-block',
position: 'relative',
},
};
if(this.state.searchingIndicator) {
return (
<div className='pad1 w100p column center'>
<div className='row center pad0-75'>
<RaisedButton label={__('Back to previus')} primary={true} onClick={() => {
window.routerOpenPrev();
}} />
</div>
<RefreshIndicator
size={50}
left={0}
top={0}
loadingColor="#FF9800"
status="loading"
style={style.refresh}
/>
</div>
);
}
let torrentRating;
if(this.torrent) {
torrentRating = Math.round(rating(this.torrent.good, this.torrent.bad) * 100);
}
return (
<div className="w100p column center">
{
this.torrent
?
<Tabs
className='w100p'
value={this.state.value}
onChange={this.handleChange}
>
<Tab label={__('Back to previus')} value="main" />
<Tab label={__('Information')} value="info" >
<div className='column w100p'>
<div className='row w100p torrent-information-row'>
<div className='info-table'>
<TorrentInformation torrent={this.torrent} parent={this} />
</div>
<div style={{flexBasis: '40%'}} className='column center w100p'>
<img src={(this.torrent && this.torrent.info && this.torrent.info.poster) ? this.torrent.info.poster : NoImage} className='pad0-75' style={{height: '200px'}} />
<TrackersImages info={this.torrent && this.torrent.info} className='column' />
<RaisedButton
href={`magnet:?xt=urn:btih:${this.torrent.hash}`}
target="_self"
label="Magnet"
secondary={true}
onClick={(e) => {
e.preventDefault();
window.open(`magnet:?xt=urn:btih:${this.torrent.hash}`, '_self')
}}
icon={<svg fill='white' viewBox="0 0 24 24"><path d="M17.374 20.235c2.444-2.981 6.626-8.157 6.626-8.157l-3.846-3.092s-2.857 3.523-6.571 8.097c-4.312 5.312-11.881-2.41-6.671-6.671 4.561-3.729 8.097-6.57 8.097-6.57l-3.092-3.842s-5.173 4.181-8.157 6.621c-2.662 2.175-3.76 4.749-3.76 7.24 0 5.254 4.867 10.139 10.121 10.139 2.487 0 5.064-1.095 7.253-3.765zm4.724-7.953l-1.699 2.111-1.74-1.397 1.701-2.114 1.738 1.4zm-10.386-10.385l1.4 1.738-2.113 1.701-1.397-1.74 2.11-1.699z"/></svg>}
/>
{
!this.state.downloaded && !this.state.downloading && !this.state.startingDownloading
&&
<DownloadTorrentMenu torrent={this.torrent}>
<RaisedButton
href={`magnet:?xt=urn:btih:${this.torrent.hash}`}
target="_self"
label={__('Download')}
backgroundColor='#00C853'
labelColor='white'
style={{marginTop: 8}}
onClick={(e) => {
e.preventDefault();
}}
icon={
<svg viewBox="0 0 56 56" fill='white'>
<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>
}
/>
</DownloadTorrentMenu>
}
{
this.state.downloading
&&
<div className='column center pad0-75' style={{width: '300px'}}>
<div className='fs0-75' style={{color: 'rgb(0, 188, 212)'}}>{__('downloading')} {this.state.downloadProgress && (this.state.downloadProgress.progress * 100).toFixed(1)}%</div>
<LinearProgress
style={{marginTop: 3}}
mode="determinate"
value={this.state.downloadProgress && (this.state.downloadProgress.progress ? this.state.downloadProgress.progress : 0) * 100}
/>
<FlatButton
onClick={() => {
window.torrentSocket.emit('downloadCancel', this.torrent.hash)
}}
label={__('Cancel download')}
secondary={true}
icon={<svg fill='rgb(255, 64, 129)' viewBox="0 0 18 18"><path d="M9 1C4.58 1 1 4.58 1 9s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm4 10.87L11.87 13 9 10.13 6.13 13 5 11.87 7.87 9 5 6.13 6.13 5 9 7.87 11.87 5 13 6.13 10.13 9 13 11.87z"/></svg>}
/>
</div>
}
<div className='fs0-75 pad0-75 center column' style={{color: 'rgba(0, 0, 0, 0.541176)'}}><div>BTIH:</div><div>{this.torrent.hash}</div></div>
{
this.torrent.seeders || this.torrent.leechers || this.torrent.completed
?
<div className='fs0-85 pad0-75 center column'>
<div className='pad0-25' style={{color: '#00C853'}}>{__('seeders')}: {this.torrent.seeders}</div>
<div className='pad0-25' style={{color: '#AA00FF'}}>{__('leechers')}: {this.torrent.leechers}</div>
<div className='pad0-25' style={{color: '#FF6D00'}}>{__('completed')}: {this.torrent.completed}</div>
</div>
:
null
}
{
!this.state.voted && !this.state.voting
?
<div className='row pad0-25'>
<RaisedButton
label={__('Good') + ` (${this.torrent.good})`}
labelColor="white"
backgroundColor="#00C853"
icon={
<svg viewBox="0 0 489.543 489.543" fill="white">
<g>
<path d="M270.024,0c-22.6,0-15,48.3-15,48.3s-48.3,133.2-94.5,168.7c-9.9,10.4-16.1,21.9-20,31.3l0,0l0,0
c-0.9,2.3-1.7,4.5-2.4,6.5c-3.1,6.3-9.7,16-23.8,24.5l46.2,200.9c0,0,71.5,9.3,143.2,7.8c28.7,2.3,59.1,2.5,83.3-2.7
c82.2-17.5,61.6-74.8,61.6-74.8c44.3-33.3,19.1-74.9,19.1-74.9c39.4-41.1,0.7-75.6,0.7-75.6s21.3-33.2-6.2-58.3
c-34.3-31.4-127.4-10.5-127.4-10.5l0,0c-6.5,1.1-13.4,2.5-20.8,4.3c0,0-32.2,15,0-82.7C346.324,15.1,292.624,0,270.024,0z"/>
<path d="M127.324,465.7l-35-166.3c-2-9.5-11.6-17.3-21.3-17.3h-66.8l-0.1,200.8h109.1C123.024,483,129.324,475.2,127.324,465.7z"
/>
</g>
</svg>
}
onClick={() => this.vote(true)}
/>
<RaisedButton
style={{marginLeft: '9px'}}
label={__('Bad') + ` (${this.torrent.bad})`}
labelColor="white"
backgroundColor="#D50000"
icon={
<svg viewBox="0 0 487.643 487.643" fill="white">
<g>
<path d="M113.869,209.443l46-200.1c0,0,71.2-9.3,142.6-7.8c28.5-2.3,58.9-2.5,83,2.7c81.9,17.4,61.4,74.5,61.4,74.5
c44.2,33.2,19,74.6,19,74.6c39.2,41,0.7,75.3,0.7,75.3s21.2,33-6.1,58c-34.2,31.2-126.9,10.5-126.9,10.5l0,0
c-6.4-1.1-13.3-2.5-20.7-4.2c0,0-32.1-15,0,82.4s-21.4,112.3-43.9,112.3s-15-48.1-15-48.1s-48.1-132.7-94.1-168
c-9.9-10.4-16.1-21.8-19.9-31.2l0,0l0,0c-0.9-2.3-1.7-4.5-2.4-6.5C134.469,227.543,127.869,217.843,113.869,209.443z
M70.869,206.643c9.7,0,19.2-7.7,21.2-17.2l34.8-165.6c2-9.5-4.3-17.2-14-17.2H4.169l0.1,200H70.869z"/>
</g>
</svg>
}
onClick={() => this.vote(false)}
/>
</div>
:
this.state.voting
?
<div>voting...</div>
:
<div>Thank you for voting!</div>
}
{
this.torrent.good > 0 || this.torrent.bad > 0
?
<div className='w100p' style={{padding: '7px 35px', marginTop: '10px'}}>
<LinearProgress
mode="determinate"
value={torrentRating}
color={torrentRating >= 50 ? '#00E676' : '#FF3D00'}
style={{
height: '5px',
}}
/>
<div className='row center pad0-75 fs0-85' style={{color: torrentRating >= 50 ? '#00E676' : '#FF3D00'}}>{__('Torrent rating')}: {torrentRating}%</div>
</div>
:
null
}
</div>
</div>
{
this.torrent && this.torrent.info && this.torrent.info.description
&&
<div className='fs0-85' style={{width: '95%', padding: 15, margin: 20, boxShadow: 'rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px'}}>
<div>{parseDescriptionText(this.torrent.info.description)}</div>
</div>
}
</div>
</Tab>
<Tab label={__('Files')} value="files" >
<TorrentFiles torrent={this.torrent} />
</Tab>
</Tabs>
:
null
}
</div>
);
}
}