aboutsummaryrefslogtreecommitdiffhomepage
path: root/client
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2016-04-28 20:40:56 +0200
committerChocobozzz <florian.bigard@gmail.com>2016-04-28 20:40:56 +0200
commit8cfecb2ad70062edd448b00c57db241ad3d257cc (patch)
tree3e8b8c4adc23977601b7c5ea87eee08857ce2a3c /client
parentcb11e775705392df4e2b5529447a5b439338beaf (diff)
downloadPeerTube-8cfecb2ad70062edd448b00c57db241ad3d257cc.tar.gz
PeerTube-8cfecb2ad70062edd448b00c57db241ad3d257cc.tar.zst
PeerTube-8cfecb2ad70062edd448b00c57db241ad3d257cc.zip
Add torrent informations (speed...) below the video
Diffstat (limited to 'client')
-rw-r--r--client/angular/videos/components/watch/videos-watch.component.html5
-rw-r--r--client/angular/videos/components/watch/videos-watch.component.ts16
-rw-r--r--client/index.html5
-rw-r--r--client/package.json1
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 @@
1<div class="embed-responsive embed-responsive-19by9"> 1<div class="embed-responsive embed-responsive-19by9">
2</div> 2</div>
3<div id="torrent-info">
4 <div>Download: {{ downloadSpeed | bytes }}/s</div>
5 <div>Upload: {{ uploadSpeed | bytes }}/s</div>
6 <div>Number of peers: {{ numPeers }}</div>
7<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 @@
1import { Component, OnInit, ElementRef } from 'angular2/core'; 1import { Component, OnInit, ElementRef } from 'angular2/core';
2import { RouteParams, CanDeactivate, ComponentInstruction } from 'angular2/router'; 2import { RouteParams, CanDeactivate, ComponentInstruction } from 'angular2/router';
3import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe';
3 4
4// TODO import it with systemjs 5// TODO import it with systemjs
5declare var WebTorrent: any; 6declare var WebTorrent: any;
@@ -10,12 +11,17 @@ import { VideosService } from '../../services/videos.service';
10@Component({ 11@Component({
11 selector: 'my-video-watch', 12 selector: 'my-video-watch',
12 templateUrl: 'app/angular/videos/components/watch/videos-watch.component.html', 13 templateUrl: 'app/angular/videos/components/watch/videos-watch.component.html',
13 styleUrls: [ 'app/angular/videos/components/watch/videos-watch.component.css' ] 14 styleUrls: [ 'app/angular/videos/components/watch/videos-watch.component.css' ],
15 pipes: [ BytesPipe ]
14}) 16})
15 17
16export class VideosWatchComponent implements OnInit, CanDeactivate { 18export class VideosWatchComponent implements OnInit, CanDeactivate {
17 video: Video; 19 video: Video;
20 downloadSpeed: number;
21 uploadSpeed: number;
22 numPeers: number;
18 23
24 private _interval: number;
19 private client: any; 25 private client: any;
20 26
21 constructor( 27 constructor(
@@ -46,11 +52,19 @@ export class VideosWatchComponent implements OnInit, CanDeactivate {
46 console.error(err); 52 console.error(err);
47 } 53 }
48 }); 54 });
55
56 // Refresh each second
57 this._interval = setInterval(() => {
58 this.downloadSpeed = torrent.downloadSpeed;
59 this.uploadSpeed = torrent.uploadSpeed;
60 this.numPeers = torrent.numPeers;
61 }, 1000);
49 }); 62 });
50 } 63 }
51 64
52 routerCanDeactivate(next: ComponentInstruction, prev: ComponentInstruction) : any { 65 routerCanDeactivate(next: ComponentInstruction, prev: ComponentInstruction) : any {
53 console.log('Removing video from webtorrent.'); 66 console.log('Removing video from webtorrent.');
67 clearInterval(this._interval)
54 this.client.remove(this.video.magnetUri); 68 this.client.remove(this.video.magnetUri);
55 return true; 69 return true;
56 } 70 }
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 @@
31 format: 'register', 31 format: 'register',
32 defaultExtension: 'js' 32 defaultExtension: 'js'
33 } 33 }
34 }, 34 }
35 },
36 map: {
37 'angular-pipes/src/math/bytes.pipe': '/app/node_modules/angular-pipes/src/math/bytes.pipe.js'
35 } 38 }
36 }); 39 });
37 System.import('/app/angular/bootstrap') 40 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 @@
21 }, 21 },
22 "license": "ISC", 22 "license": "ISC",
23 "dependencies": { 23 "dependencies": {
24 "angular-pipes": "^1.4.1",
24 "angular2": "2.0.0-beta.14", 25 "angular2": "2.0.0-beta.14",
25 "blueimp-file-upload": "^9.12.1", 26 "blueimp-file-upload": "^9.12.1",
26 "bootstrap-sass": "^3.3.6", 27 "bootstrap-sass": "^3.3.6",