Add torrent informations (speed...) below the video

client/angular/videos/components/watch/videos-watch.component.html

 <div class="embed-responsive embed-responsive-19by9">
 </div>
+<div id="torrent-info">
+  <div>Download: {{ downloadSpeed | bytes }}/s</div>
+  <div>Upload: {{ uploadSpeed | bytes }}/s</div>
+  <div>Number of peers: {{ numPeers }}</div>
+<div>

client/angular/videos/components/watch/videos-watch.component.ts

 import { Component, OnInit, ElementRef } from 'angular2/core';
 import { RouteParams, CanDeactivate, ComponentInstruction } from 'angular2/router';
+import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe';
 
 // TODO import it with systemjs
 declare var WebTorrent: any;
@@ -10,12 +11,17 @@ import { VideosService } from '../../services/videos.service';
 @Component({
   selector: 'my-video-watch',
   templateUrl: 'app/angular/videos/components/watch/videos-watch.component.html',
-  styleUrls: [ 'app/angular/videos/components/watch/videos-watch.component.css' ]
+  styleUrls: [ 'app/angular/videos/components/watch/videos-watch.component.css' ],
+  pipes: [ BytesPipe ]
 })
 
 export class VideosWatchComponent implements OnInit, CanDeactivate {
   video: Video;
+  downloadSpeed: number;
+  uploadSpeed: number;
+  numPeers: number;
 
+  private _interval: number;
   private client: any;
 
   constructor(
@@ -46,11 +52,19 @@ export class VideosWatchComponent implements OnInit, CanDeactivate {
           console.error(err);
         }
       });
+
+      // Refresh each second
+      this._interval = setInterval(() => {
+        this.downloadSpeed = torrent.downloadSpeed;
+        this.uploadSpeed = torrent.uploadSpeed;
+        this.numPeers = torrent.numPeers;
+      }, 1000);
     });
   }
 
   routerCanDeactivate(next: ComponentInstruction, prev: ComponentInstruction) : any {
     console.log('Removing video from webtorrent.');
+    clearInterval(this._interval)
     this.client.remove(this.video.magnetUri);
     return true;
   }

client/index.html

@@ -31,7 +31,10 @@
               format: 'register',
               defaultExtension: 'js'
             }
-          },
+          }
+        },
+        map: {
+          'angular-pipes/src/math/bytes.pipe': '/app/node_modules/angular-pipes/src/math/bytes.pipe.js'
         }
       });
       System.import('/app/angular/bootstrap')

client/package.json

@@ -21,6 +21,7 @@
   },
   "license": "ISC",
   "dependencies": {
+    "angular-pipes": "^1.4.1",
     "angular2": "2.0.0-beta.14",
     "blueimp-file-upload": "^9.12.1",
     "bootstrap-sass": "^3.3.6",