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 @@
+
+
Download: {{ downloadSpeed | bytes }}/s
+
Upload: {{ uploadSpeed | bytes }}/s
+
Number of peers: {{ numPeers }}
+
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",