show speed in UI

README.md

@@ -45,6 +45,7 @@ Most of the active development is happening inside of smaller npm modules which
 - [chrome-dgram](https://github.com/feross/chrome-dgram)
 - [chrome-portfinder](https://github.com/feross/chrome-portfinder)
 - [magnet-uri](https://github.com/feross/magnet-uri)
+- [parse-torrent](https://github.com/feross/parse-torrent)
 - [bittorrent-protocol](https://github.com/feross/bittorrent-protocol)
 - [bittorrent-swarm](https://github.com/feross/bittorrent-swarm)
 - [bittorrent-dht](https://github.com/feross/bittorrent-dht) (work-in-progress)

lib/app.js

@@ -142,6 +142,10 @@ App.prototype.updateTorrentUI = function ($torrent, torrent) {
   $torrent.find('progress').attr('value', torrent.progress)
   $torrent.find('.numPeers').text(torrent.swarm.numConns + torrent.swarm.numQueued)
   $torrent.find('.numActivePeers').text(torrent.swarm.numPeers)
+  $torrent.find('.downloadSpeed')
+    .text(humanize.filesize(torrent.swarm.downloadSpeed()))
+  $torrent.find('.uploadSpeed')
+    .text(humanize.filesize(torrent.swarm.uploadSpeed()))
 }
 
 App.prototype.downloadTorrentMetadata = function (torrent) {

package.json

@@ -41,14 +41,14 @@
     "speedometer": "^0.1.2"
   },
   "devDependencies": {
+    "brfs": "^0.2.2",
     "browserify": "3.x",
     "browserify-shim": "^3.2.2",
     "nib": "^1.0.2",
     "nodemon": "^1.0.15",
     "stylus": "^0.42.2",
     "tape": "2.x",
-    "watchify": "0.x",
-    "brfs": "^0.2.2"
+    "watchify": "0.x"
   },
   "homepage": "http://webtorrent.io",
   "keywords": [
@@ -77,4 +77,4 @@
     "watch-css": "stylus --use nib css/main.styl --out chrome/ --watch",
     "watch-js": "watchify index.js --outfile chrome/bundle.js --debug --verbose"
   }
-}
+}

views/torrent.html

@@ -14,7 +14,7 @@
     </div>
     <progress max="1" value="0"></progress>
     <div class="stats2">
-      Downloading from <span class="numActivePeers"></span> of <span class="numPeers"></span> peers - UL: 0.0 KB/s
+      Downloading from <span class="numActivePeers"></span> of <span class="numPeers"></span> peers - DL: <span class="downloadSpeed"></span>/s UL: <span class="uploadSpeed"></span>/s
     </div>
   </div>
 </section>