Add speed and peer count.

lib/components/DownloadPage.js

@@ -6,6 +6,7 @@ import ErrorPage from './ErrorPage'
 import ProgressBar from './ProgressBar'
 import React from 'react'
 import Spinner from './Spinner'
+import { formatSize } from '../util'
 
 export default class DownloadPage extends React.Component {
 
@@ -41,6 +42,7 @@ export default class DownloadPage extends React.Component {
             size={this.state.fileSize} />
 
           <ChromeNotice />
+          <p className="notice">Peers: {this.state.peers} &middot; Up: {formatSize(this.state.speedUp)} &middot; Down: {formatSize(this.state.speedDown)}</p>
           <DownloadButton onClick={this.downloadFile.bind(this)} />
 
         </div>
@@ -55,6 +57,7 @@ export default class DownloadPage extends React.Component {
             size={this.state.fileSize} />
 
           <ChromeNotice />
+          <p className="notice">Peers: {this.state.peers} &middot; Up: {formatSize(this.state.speedUp)} &middot; Down: {formatSize(this.state.speedDown)}</p>
           <ProgressBar value={this.state.progress} />
 
         </div>
@@ -68,6 +71,7 @@ export default class DownloadPage extends React.Component {
             size={this.state.fileSize} />
 
           <ChromeNotice />
+          <p className="notice">Peers: {this.state.peers} &middot; Up: {formatSize(this.state.speedUp)} &middot; Down: {formatSize(this.state.speedDown)}</p>
           <ProgressBar value={1} />
 
         </div>

lib/components/Spinner.js

@@ -1,15 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
-
-// Taken from StackOverflow
-// http://stackoverflow.com/questions/15900485/correct-way-to-convert-size-in-bytes-to-kb-mb-gb-in-javascript
-function formatSize(bytes) {
-  if (bytes === 0) return '0 Bytes'
-  const k = 1000
-  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
-  const i = Math.floor(Math.log(bytes) / Math.log(k))
-  return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i]
-}
+import { formatSize } from '../util'
 
 export default class Spinner extends React.Component {
 

lib/components/UploadPage.js

@@ -5,6 +5,7 @@ import Tempalink from './Tempalink'
 import UploadActions from '../actions/UploadActions'
 import UploadStore from '../stores/UploadStore'
 import socket from 'filepizza-socket'
+import { formatSize } from '../util'
 
 export default class UploadPage extends React.Component {
 
@@ -77,6 +78,7 @@ export default class UploadPage extends React.Component {
   
           <p>Send someone this link to download.</p>
           <p>This link will work as long as this page is open.</p>
+          <p>Peers: {this.state.peers} &middot; Up: {formatSize(this.state.speedUp)}</p>
           <Tempalink token={this.state.token} />
   
         </div>

lib/stores/DownloadStore.js

@@ -3,6 +3,8 @@ import WebTorrent from 'webtorrent'
 import alt from '../alt'
 import socket from 'filepizza-socket'
 
+const SPEED_REFRESH_TIME = 2000
+
 function downloadBlobURL(name, blobURL) {
   let a = document.createElement('a')
   document.body.appendChild(a)
@@ -19,10 +21,13 @@ export default alt.createStore(class DownloadStore {
     this.fileName = ''
     this.fileSize = 0
     this.fileType = ''
+    this.infoHash = null
+    this.peers = 0
     this.progress = 0
+    this.speedDown = 0
+    this.speedUp = 0
     this.status = 'uninitialized'
     this.token = null
-    this.infoHash = null
   }
 
   onRequestDownload() {
@@ -33,22 +38,31 @@ export default alt.createStore(class DownloadStore {
     client.download(this.infoHash, (torrent) => {
       this.setState({ status: 'downloading' })
 
-      let downloaded = 0
+      const updateSpeed = () => {
+        this.setState({
+          speedUp: torrent.swarm.uploadSpeed(),
+          speedDown: torrent.swarm.downloadSpeed(),
+          peers: torrent.swarm.wires.length
+        })
+      }
+
+      torrent.on('upload', updateSpeed)
+      torrent.on('download', updateSpeed)
+      setInterval(updateSpeed, SPEED_REFRESH_TIME)
+
       const file = torrent.files[0]
       const stream = file.createReadStream()
       stream.on('data', (chunk) => {
         if (this.status !== 'downloading') return
 
-        downloaded += chunk.length
-
-        if (downloaded === file.length) {
+        if (torrent.progress === 1) {
           this.setState({ status: 'done', progress: 1 })
           file.getBlobURL((err, blobURL) => {
             if (err) throw err
             downloadBlobURL(this.fileName, blobURL)
           })
         } else {
-          this.setState({ progress: downloaded / file.length })
+          this.setState({ progress: torrent.progress })
         }
 
       })

lib/stores/UploadStore.js

@@ -3,6 +3,8 @@ import alt from '../alt'
 import socket from 'filepizza-socket'
 import WebTorrent from 'webtorrent'
 
+const SPEED_REFRESH_TIME = 2000
+
 export default alt.createStore(class UploadStore {
 
   constructor() {
@@ -11,9 +13,11 @@ export default alt.createStore(class UploadStore {
     this.fileName = ''
     this.fileSize = 0
     this.fileType = ''
+    this.infoHash = null
+    this.peers = 0
+    this.speedUp = 0
     this.status = 'ready'
     this.token = null
-    this.infoHash = null
   }
 
   onUploadFile(file) {
@@ -22,6 +26,18 @@ export default alt.createStore(class UploadStore {
 
     const client = new WebTorrent()
     client.seed(file, (torrent) => {
+
+      const updateSpeed = () => {
+        this.setState({
+          speedUp: torrent.swarm.uploadSpeed(),
+          peers: torrent.swarm.wires.length
+        })
+      }
+
+      torrent.on('upload', updateSpeed)
+      torrent.on('download', updateSpeed)
+      setInterval(updateSpeed, SPEED_REFRESH_TIME)
+
       socket.emit('upload', {
         fileName: file.name,
         fileSize: file.size,
@@ -37,6 +53,7 @@ export default alt.createStore(class UploadStore {
           infoHash: torrent.infoHash
         })
       })
+
     })
   }
 

lib/util.js

@@ -0,0 +1,9 @@
+// Taken from StackOverflow
+// http://stackoverflow.com/questions/15900485/correct-way-to-convert-size-in-bytes-to-kb-mb-gb-in-javascript
+export function formatSize(bytes) {
+  if (bytes === 0) return '0 Bytes'
+  const k = 1000
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return (bytes / Math.pow(k, i)).toPrecision(3) + ' ' + sizes[i]
+}