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

4 files changed, 25 insertions, 2 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;
   }
diff --git a/client/index.html b/client/index.html
index 4b273aae4..6a2085ca6 100644
--- a/client/index.html
+++ b/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')
diff --git a/client/package.json b/client/package.json
index 8070881f5..d44ea8ff0 100644
--- a/client/package.json
+++ b/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",