458 lines
14 KiB
JavaScript
458 lines
14 KiB
JavaScript
import React, { Component } from 'react';
|
|
|
|
import SearchResults from './search-results'
|
|
import AdvancedSearch from './search-advanced-controls'
|
|
import TextField from 'material-ui/TextField';
|
|
import RaisedButton from 'material-ui/RaisedButton';
|
|
import RefreshIndicator from 'material-ui/RefreshIndicator';
|
|
|
|
import Checkbox from 'material-ui/Checkbox';
|
|
import Visibility from 'material-ui/svg-icons/action/visibility';
|
|
import VisibilityOff from 'material-ui/svg-icons/action/visibility-off';
|
|
import AddIcon from 'material-ui/svg-icons/content/add';
|
|
import RemoveIcon from 'material-ui/svg-icons/content/remove';
|
|
|
|
import SelectField from 'material-ui/SelectField';
|
|
import MenuItem from 'material-ui/MenuItem';
|
|
|
|
import formatBytes from './format-bytes'
|
|
|
|
import _ from 'lodash'
|
|
|
|
let session;
|
|
|
|
class TorrentsStatistic extends Component {
|
|
constructor(props)
|
|
{
|
|
super(props)
|
|
|
|
this.stats = props.stats || {}
|
|
}
|
|
componentDidMount()
|
|
{
|
|
this.newTorrentFunc = (torrent) => {
|
|
this.stats.size += torrent.size;
|
|
this.stats.torrents++;
|
|
this.stats.files += torrent.files;
|
|
this.forceUpdate()
|
|
}
|
|
|
|
window.torrentSocket.on('newTorrent', this.newTorrentFunc);
|
|
}
|
|
componentWillUnmount()
|
|
{
|
|
if(this.newTorrentFunc)
|
|
window.torrentSocket.off('newTorrent', this.newTorrentFunc);
|
|
}
|
|
render()
|
|
{
|
|
return (
|
|
<div className='fs0-75 pad0-75' style={{color: 'rgba(0, 0, 0, 0.541176)'}}>you have information about {this.stats.torrents} torrents and around {this.stats.files} files and { formatBytes(this.stats.size, 1) } of data</div>
|
|
)
|
|
}
|
|
}
|
|
|
|
export default class Search extends Component {
|
|
constructor(props)
|
|
{
|
|
super(props)
|
|
this.state = {
|
|
searchingIndicator: false,
|
|
safeSearchText: 'safe search enabled',
|
|
safeSearchColor: 'rgb(0, 188, 212)',
|
|
moreTorrentsIndicator: false,
|
|
moreFilesIndicator: false,
|
|
orderBy: null,
|
|
orderDesc: false,
|
|
advancedSearch: false,
|
|
}
|
|
this.searchLimit = 10
|
|
this.advanced = {}
|
|
this.searchError = undefined;
|
|
|
|
if(session)
|
|
{
|
|
this.searchTorrents = session.searchTorrents;
|
|
this.searchFiles = session.searchFiles;
|
|
this.moreSearchTorrents = session.moreSearchTorrents;
|
|
this.moreSearchFiles = session.moreSearchFiles;
|
|
this.currentSearch = session.currentSearch;
|
|
this.searchValue = session.searchValue;
|
|
Object.assign(this.state, this.setSafeSearch(session.notSafeSearch))
|
|
this.state.orderBy = session.orderBy;
|
|
this.state.orderDesc = session.orderDesc;
|
|
this.state.advancedSearch = session.advancedSearch;
|
|
this.advanced = session.advanced;
|
|
this.searchError = session.searchError;
|
|
}
|
|
}
|
|
|
|
search(oldSearch) {
|
|
this.setState({
|
|
searchingIndicator: true
|
|
});
|
|
this.searchTorrents = [];
|
|
this.moreSearchTorrents = true;
|
|
this.searchFiles = [];
|
|
this.moreSearchFiles = true;
|
|
this.currentSearch = this.searchValue;
|
|
let queries = 2;
|
|
let searchTorrentsParams = {
|
|
limit: this.searchLimit,
|
|
safeSearch: !this.notSafeSearch,
|
|
orderBy: this.state.orderBy,
|
|
orderDesc: this.state.orderDesc,
|
|
};
|
|
if(this.state.advancedSearch && this.advanced)
|
|
searchTorrentsParams = Object.assign(searchTorrentsParams, this.advanced);
|
|
|
|
window.torrentSocket.emit('searchTorrent', oldSearch ? this.currentSearch : this.searchValue, searchTorrentsParams, window.customLoader((torrents) => {
|
|
if(torrents) {
|
|
this.searchTorrents = torrents;
|
|
if(torrents.length != this.searchLimit)
|
|
this.moreSearchTorrents = false;
|
|
}
|
|
else
|
|
{
|
|
this.moreSearchTorrents = false;
|
|
}
|
|
if(--queries == 0) {
|
|
this.setState({
|
|
searchingIndicator: false
|
|
});
|
|
} else {
|
|
this.forceUpdate();
|
|
}
|
|
}));
|
|
let searchFilesParams = {
|
|
limit: this.searchLimit,
|
|
safeSearch: !this.notSafeSearch,
|
|
orderBy: this.state.orderBy,
|
|
orderDesc: this.state.orderDesc,
|
|
};
|
|
if(this.state.advancedSearch && this.advanced)
|
|
searchFilesParams = Object.assign(searchFilesParams, this.advanced);
|
|
|
|
window.torrentSocket.emit('searchFiles', oldSearch ? this.currentSearch : this.searchValue, searchFilesParams, window.customLoader((torrents) => {
|
|
if(torrents) {
|
|
console.log('back torrents')
|
|
this.searchFiles = torrents;
|
|
let files = 0;
|
|
torrents.forEach((torrent) => {
|
|
if(torrent.path && torrent.path.length > 0)
|
|
files += torrent.path.length
|
|
});
|
|
if(files != this.searchLimit)
|
|
this.moreSearchFiles = false;
|
|
}
|
|
else
|
|
{
|
|
this.moreSearchFiles = false;
|
|
}
|
|
if(--queries == 0) {
|
|
this.setState({
|
|
searchingIndicator: false
|
|
});
|
|
} else {
|
|
this.forceUpdate();
|
|
}
|
|
}));
|
|
}
|
|
moreTorrents() {
|
|
this.setState({moreTorrentsIndicator: true});
|
|
|
|
window.torrentSocket.emit('searchTorrent', this.currentSearch, {
|
|
index: this.searchTorrents.length,
|
|
limit: this.searchLimit,
|
|
safeSearch: !this.notSafeSearch,
|
|
orderBy: this.state.orderBy,
|
|
orderDesc: this.state.orderDesc,
|
|
}, window.customLoader((torrents) => {
|
|
if(torrents) {
|
|
console.log('back torrents')
|
|
this.searchTorrents = this.searchTorrents.concat(torrents);
|
|
if(torrents.length != this.searchLimit)
|
|
this.moreSearchTorrents = false;
|
|
|
|
this.setState({moreTorrentsIndicator: false});
|
|
}
|
|
}));
|
|
}
|
|
moreFiles() {
|
|
let index = 0;
|
|
this.searchFiles.forEach((torrent) => {
|
|
if(torrent.path && torrent.path.length > 0)
|
|
index += torrent.path.length;
|
|
});
|
|
|
|
this.setState({moreFilesIndicator: true});
|
|
|
|
window.torrentSocket.emit('searchFiles', this.currentSearch, {
|
|
index: index,
|
|
limit: this.searchLimit,
|
|
safeSearch: !this.notSafeSearch,
|
|
orderBy: this.state.orderBy,
|
|
orderDesc: this.state.orderDesc,
|
|
}, window.customLoader((torrents) => {
|
|
if(torrents) {
|
|
this.searchFiles = this.searchFiles.concat(torrents);
|
|
let files = 0;
|
|
torrents.forEach((torrent) => {
|
|
if(torrent.path && torrent.path.length > 0)
|
|
files += torrent.path.length
|
|
});
|
|
if(files != this.searchLimit)
|
|
this.moreSearchFiles = false;
|
|
|
|
this.mergeFiles()
|
|
|
|
this.setState({moreFilesIndicator: false});
|
|
}
|
|
}));
|
|
}
|
|
mergeFiles()
|
|
{
|
|
for(let i = 0; i < this.searchFiles.length; i++)
|
|
{
|
|
for(let j = i + 1; j < this.searchFiles.length; j++)
|
|
{
|
|
if(this.searchFiles[i].hash != this.searchFiles[j].hash)
|
|
continue
|
|
|
|
if(!this.searchFiles[i].remove)
|
|
{
|
|
this.searchFiles[i].path = this.searchFiles[i].path.concat(this.searchFiles[j].path)
|
|
}
|
|
|
|
this.searchFiles[j].remove = true
|
|
}
|
|
}
|
|
|
|
this.searchFiles = this.searchFiles.filter(torrent => !torrent.remove)
|
|
}
|
|
|
|
componentDidMount() {
|
|
this.newStatisticFunc = (statistic) => {
|
|
if(statistic) {
|
|
this.stats = statistic;
|
|
this.forceUpdate();
|
|
}
|
|
};
|
|
window.torrentSocket.emit('statistic', window.customLoader(this.newStatisticFunc));
|
|
window.torrentSocket.on('newStatistic', this.newStatisticFunc);
|
|
|
|
this.remoteSearchTorrent = (torrents) => {
|
|
if(!torrents)
|
|
return
|
|
this.searchTorrents = _.unionBy(this.searchTorrents, torrents, 'hash')
|
|
this.forceUpdate();
|
|
}
|
|
window.torrentSocket.on('remoteSearchTorrent', this.remoteSearchTorrent);
|
|
|
|
this.remoteSearchFiles = (torrents) => {
|
|
if(!torrents)
|
|
return
|
|
this.searchFiles = _.unionBy(this.searchFiles, torrents, 'hash')
|
|
this.mergeFiles()
|
|
this.forceUpdate();
|
|
}
|
|
window.torrentSocket.on('remoteSearchFiles', this.remoteSearchFiles);
|
|
}
|
|
componentWillUnmount()
|
|
{
|
|
if(this.newStatisticFunc)
|
|
window.torrentSocket.off('newStatistic', this.newStatisticFunc);
|
|
|
|
if(this.remoteSearchTorrent)
|
|
window.torrentSocket.off('remoteSearchTorrent', this.remoteSearchTorrent);
|
|
|
|
if(this.remoteSearchFiles)
|
|
window.torrentSocket.off('remoteSearchFiles', this.remoteSearchFiles);
|
|
|
|
session = {
|
|
searchTorrents: this.searchTorrents,
|
|
searchFiles: this.searchFiles,
|
|
moreSearchTorrents: this.moreSearchTorrents,
|
|
moreSearchFiles: this.moreSearchFiles,
|
|
currentSearch: this.currentSearch,
|
|
searchValue: this.searchValue,
|
|
notSafeSearch: this.notSafeSearch,
|
|
orderBy: this.state.orderBy,
|
|
orderDesc: this.state.orderDesc,
|
|
advancedSearch: this.state.advancedSearch,
|
|
advanced: this.advanced,
|
|
searchError: this.searchError,
|
|
}
|
|
}
|
|
setSafeSearch(ch) {
|
|
this.notSafeSearch = ch;
|
|
if(ch)
|
|
{
|
|
return {safeSearchText: 'safe search disabled', safeSearchColor: '#EC407A'}
|
|
}
|
|
else
|
|
{
|
|
return {safeSearchText: 'safe search enabled', safeSearchColor: 'rgb(0, 188, 212)'}
|
|
}
|
|
}
|
|
render() {
|
|
const style = {
|
|
refresh: {
|
|
display: 'inline-block',
|
|
position: 'relative',
|
|
},
|
|
};
|
|
|
|
const orderText = (text, field) => {
|
|
if(field !== this.state.orderBy)
|
|
return text;
|
|
|
|
if(this.state.orderDesc)
|
|
return text + ' ⇩'
|
|
else
|
|
return text + ' ⇧'
|
|
}
|
|
|
|
return (
|
|
<div className="column w100p center">
|
|
<div className='row inline w100p pad0-75' style={{maxWidth: '30em'}}>
|
|
<TextField
|
|
hintText="Search torrent or file"
|
|
floatingLabelText="What to search?"
|
|
fullWidth={true}
|
|
ref='searchInput'
|
|
defaultValue={this.searchValue}
|
|
errorText={this.searchError}
|
|
onKeyPress={(e) => {
|
|
if (e.key === 'Enter') {
|
|
this.search();
|
|
}
|
|
}}
|
|
onChange={e => {
|
|
this.searchValue = e.target.value
|
|
if(this.searchValue.length < 3 && this.searchValue.length > 0)
|
|
this.searchError = 'too short string for search';
|
|
else
|
|
this.searchError = undefined;
|
|
this.forceUpdate()
|
|
}}
|
|
/>
|
|
<RaisedButton style={{marginTop: '15px', marginLeft: '10px'}} label="Search" primary={true} onClick={() =>{
|
|
this.search()
|
|
}} />
|
|
</div>
|
|
<div className='row w100p center wrap' style={{padding: '0 8px'}}>
|
|
<div style={{padding: '0px 17px'}}>
|
|
<Checkbox
|
|
ref='safeSearch'
|
|
checked={this.notSafeSearch ? true : false}
|
|
checkedIcon={<Visibility />}
|
|
uncheckedIcon={<VisibilityOff />}
|
|
label={<span className='text-nowrap' style={{fontSize: '0.87em', transition: '0.1s', color: this.state.safeSearchColor}}>{this.state.safeSearchText}</span>}
|
|
iconStyle={{fill: this.state.safeSearchColor}}
|
|
onCheck={(ev, ch) => {
|
|
this.setState(this.setSafeSearch(ch));
|
|
}}
|
|
style={{paddingBottom: '0.8em'}}
|
|
/>
|
|
</div>
|
|
<div style={{padding: '0px 17px'}}>
|
|
<Checkbox
|
|
ref='advancedSearch'
|
|
checked={this.state.advancedSearch}
|
|
checkedIcon={<RemoveIcon />}
|
|
uncheckedIcon={<AddIcon />}
|
|
label={<span className='text-nowrap' style={{fontSize: '0.87em', transition: '0.1s', color: 'black'}}>advanced search</span>}
|
|
iconStyle={{fill: 'black'}}
|
|
onCheck={(ev, ch) => {
|
|
this.setState({advancedSearch: ch});
|
|
}}
|
|
style={{paddingBottom: '0.8em'}}
|
|
/>
|
|
</div>
|
|
</div>
|
|
{
|
|
this.state.advancedSearch
|
|
&&
|
|
<AdvancedSearch onChange={(state) => {
|
|
this.advanced = state;
|
|
}} state={this.advanced} />
|
|
}
|
|
{
|
|
this.stats
|
|
&&
|
|
<TorrentsStatistic stats={this.stats} />
|
|
}
|
|
{
|
|
this.state.searchingIndicator
|
|
?
|
|
<div className='pad1'>
|
|
<RefreshIndicator
|
|
size={50}
|
|
left={0}
|
|
top={0}
|
|
loadingColor="#FF9800"
|
|
status="loading"
|
|
style={style.refresh}
|
|
/>
|
|
</div>
|
|
:
|
|
null
|
|
}
|
|
<SearchResults
|
|
torrentsSearchResults={this.searchTorrents}
|
|
filesSearchResults={this.searchFiles}
|
|
currentSearching={this.state.searchingIndicator}
|
|
searchText={this.currentSearch}
|
|
resultSelector={
|
|
<SelectField
|
|
floatingLabelText="Sort by"
|
|
floatingLabelFixed={true}
|
|
value={this.state.orderBy}
|
|
onChange={(event, index, value) => {
|
|
event.preventDefault(); // fix overclick on torrent
|
|
if(value === 'none') {
|
|
this.setState({orderBy: null}, () => {
|
|
this.search(true)
|
|
})
|
|
return;
|
|
}
|
|
|
|
if(value === this.state.orderBy)
|
|
{
|
|
this.setState({orderDesc: !this.state.orderDesc}, () => {
|
|
this.search(true)
|
|
})
|
|
return;
|
|
}
|
|
|
|
this.setState({
|
|
orderBy: value,
|
|
orderDesc: (value === 'seeders' || value === 'completed' || value === 'added') ? true : this.state.orderDesc
|
|
}, () => {
|
|
this.search(true)
|
|
})
|
|
}}
|
|
>
|
|
<MenuItem value='none' primaryText={'None'} />
|
|
<MenuItem value='seeders' primaryText={orderText('Seeders', 'seeders')} />
|
|
<MenuItem value='name' primaryText={orderText('Name', 'name')} />
|
|
<MenuItem value='files' primaryText={orderText('Files', 'files')} />
|
|
<MenuItem value='size' primaryText={orderText('Size', 'size')} />
|
|
<MenuItem value='added' primaryText={orderText('Added date', 'added')} />
|
|
<MenuItem value='completed' primaryText={orderText('Completed', 'completed')} />
|
|
</SelectField>
|
|
}
|
|
|
|
moreTorrentsEnabled={this.moreSearchTorrents && !this.state.searchingIndicator}
|
|
moreFilesEnabled={this.moreSearchFiles && !this.state.searchingIndicator}
|
|
onMoreTorrents={() => this.moreTorrents()}
|
|
onMoreFiles={() => this.moreFiles()}
|
|
moreTorrentsIndicator={this.state.moreTorrentsIndicator}
|
|
moreFilesIndicator={this.state.moreFilesIndicator}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
}
|