web -> desktop

src/app/recent-torrents.js

@@ -0,0 +1,159 @@
+import React, { Component } from 'react';
+import TorrentLine from './torrent'
+import {List} from 'material-ui/List';
+import Divider from 'material-ui/Divider';
+import Subheader from 'material-ui/Subheader';
+import Paper from 'material-ui/Paper';
+import FlatButton from 'material-ui/FlatButton';
+import RefreshIndicator from 'material-ui/RefreshIndicator';
+
+export default class RecentTorrents extends Component {
+  constructor() {
+  	super()
+  	this.torrents = [];
+    this.torrentsAssoc = {};
+  	this.displayQueue = [];
+    this.displayQueueAssoc = {};
+    this.maxQueueSize = 1000;
+    this.maxDisplaySize = 10;
+  	this.state = { 
+      pause: false,
+      searchingIndicator: false
+   }
+  }
+  componentDidMount() {
+  	window.torrentSocket.emit('recentTorrents', window.customLoader((data) => {
+  		if(data) {
+  			this.torrents = data;
+  			//this.forceUpdate(); // вызывается через searchingIndicator
+  		}
+
+  		this.displayNewTorrent = () => {
+        if(!this.displayNewTorrent) {
+          return;
+        }
+
+	  		if(this.displayQueue.length == 0) {
+          setTimeout(this.displayNewTorrent, 1000);
+	  			return;
+        }
+
+        const speed = 850;
+
+	  		if(this.state.pause) {
+          setTimeout(this.displayNewTorrent, speed);
+	  			return;
+        }
+
+	  		let torrent = this.displayQueue.shift();
+	  		this.torrents.unshift(torrent);
+        this.torrentsAssoc[torrent.hash] = torrent;
+	  		if(this.torrents.length > this.maxDisplaySize) {
+	  			let toDelete = this.torrents.pop()
+          delete this.torrentsAssoc[toDelete.hash];
+          delete this.displayQueueAssoc[toDelete.hash];
+        }
+        this.displayTorrentCounterValue = this.displayQueue.length;
+
+	  		this.forceUpdate();
+        setTimeout(this.displayNewTorrent, speed);
+	  	}
+      this.displayNewTorrent();
+
+      this.displayTorrentCounterValue = 0;
+      this.displayTorrentCounter = setInterval(() => {
+        if(this.displayTorrentCounterValue != this.displayQueue.length) {
+          this.displayTorrentCounterValue = this.displayQueue.length;
+          this.forceUpdate();
+        }
+      }, 40);
+  	}, () => {
+      this.setState({
+        searchingIndicator: true
+      });
+    }, () => {
+      this.setState({
+        searchingIndicator: false
+      });
+    }));
+  	this.newTorrentFunc = (torrent) => {
+      if(this.displayQueue.length < this.maxQueueSize) {
+        this.displayQueue.push(torrent);
+        this.displayQueueAssoc[torrent.hash] = torrent;
+      }
+  	};
+  	window.torrentSocket.on('newTorrent', this.newTorrentFunc);
+    
+    this.tracketUpdate = (statistic) => {
+      if(statistic.hash in this.displayQueueAssoc)
+      {
+        Object.assign(this.displayQueueAssoc[statistic.hash], statistic);
+        if(statistic.hash in this.torrentsAssoc) {
+          this.forceUpdate();
+        }
+      }
+    }
+    window.torrentSocket.on('trackerTorrentUpdate', this.tracketUpdate);
+  }
+  pauseAndContinue() {
+  	this.setState({
+      pause: !this.state.pause
+    });
+  }
+  componentWillUnmount() {
+  	if(this.newTorrentFunc)
+  		window.torrentSocket.off('newTorrent', this.newTorrentFunc);
+    if(this.tracketUpdate)
+      window.torrentSocket.off('trackerTorrentUpdate', this.tracketUpdate);
+  	if(this.displayNewTorrent)
+  		delete this.displayNewTorrent;
+    if(this.displayTorrentCounter)
+      clearInterval(this.displayTorrentCounter);
+  }
+  render() {
+    const style = {
+      refresh: {
+        display: 'inline-block',
+        position: 'relative',
+      },
+    };
+
+    if(this.state.searchingIndicator) {
+      return (
+        <div className='pad1'>
+          <RefreshIndicator
+            size={50}
+            left={0}
+            top={0}
+            loadingColor="#FF9800"
+            status="loading"
+            style={style.refresh}
+          />
+        </div>
+      );
+    }
+
+    if(!this.torrents || this.torrents.length == 0)
+      return null;
+
+    return (
+      <List className='animated recent-torrents'>
+        <Subheader className='recent-title' inset={true}>
+          <FlatButton style={{marginRight: '8px'}} primary={true} label='top' labelStyle={{color: "#a4c639"}} onClick={() =>{
+	            window.router('/top');
+	        }} />
+        	<FlatButton style={{marginRight: '8px'}} label={!this.state.pause ? 'running' : 'stoped'} secondary={this.state.pause} primary={!this.state.pause} onClick={() =>{
+	            this.pauseAndContinue()
+	        }} />
+        	Most recent torrents{this.displayQueue.length > 0 ? ` (and ${this.displayQueue.length} more)` : null}
+        </Subheader>
+        <Divider />
+        {
+        	this.torrents.map((torrent, index) =>{
+        		return <TorrentLine key={index} torrent={torrent} />;
+        	})
+        }
+      </List>
+    );
+  }
+}