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

2 files changed, 20 insertions, 1 deletions

diff --git a/client/angular/videos/components/watch/videos-watch.component.html b/client/angular/videos/components/watch/videos-watch.component.html
index e47222751..1ec0b1e19 100644
--- a/client/angular/videos/components/watch/videos-watch.component.html
+++ b/client/angular/videos/components/watch/videos-watch.component.html
@@ -1,2 +1,7 @@
 <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>
diff --git a/client/angular/videos/components/watch/videos-watch.component.ts b/client/angular/videos/components/watch/videos-watch.component.ts
index c35c0ab19..9a8909b75 100644
--- a/client/angular/videos/components/watch/videos-watch.component.ts
+++ b/client/angular/videos/components/watch/videos-watch.component.ts
@@ -1,5 +1,6 @@
 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;
   }