diff options
Diffstat (limited to 'client/app/videos/video-watch/video-watch.component.ts')
-rw-r--r-- | client/app/videos/video-watch/video-watch.component.ts | 75 |
1 files changed, 75 insertions, 0 deletions
diff --git a/client/app/videos/video-watch/video-watch.component.ts b/client/app/videos/video-watch/video-watch.component.ts new file mode 100644 index 000000000..891e6563f --- /dev/null +++ b/client/app/videos/video-watch/video-watch.component.ts | |||
@@ -0,0 +1,75 @@ | |||
1 | import { Component, ElementRef, OnInit } from '@angular/core'; | ||
2 | import { CanDeactivate, ComponentInstruction, RouteParams } from '@angular/router-deprecated'; | ||
3 | |||
4 | import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe'; | ||
5 | |||
6 | import { LoaderComponent, Video, VideoService } from '../shared/index'; | ||
7 | |||
8 | // TODO import it with systemjs | ||
9 | declare var WebTorrent: any; | ||
10 | |||
11 | @Component({ | ||
12 | selector: 'my-video-watch', | ||
13 | templateUrl: 'client/app/videos/video-watch/video-watch.component.html', | ||
14 | styleUrls: [ 'client/app/videos/video-watch/video-watch.component.css' ], | ||
15 | directives: [ LoaderComponent ], | ||
16 | pipes: [ BytesPipe ] | ||
17 | }) | ||
18 | |||
19 | export class VideoWatchComponent implements OnInit, CanDeactivate { | ||
20 | video: Video; | ||
21 | downloadSpeed: number; | ||
22 | uploadSpeed: number; | ||
23 | numPeers: number; | ||
24 | loading: boolean = false; | ||
25 | |||
26 | private _interval: NodeJS.Timer; | ||
27 | private client: any; | ||
28 | |||
29 | constructor( | ||
30 | private _videoService: VideoService, | ||
31 | private _routeParams: RouteParams, | ||
32 | private _elementRef: ElementRef | ||
33 | ) { | ||
34 | // TODO: use a service | ||
35 | this.client = new WebTorrent({ dht: false }); | ||
36 | } | ||
37 | |||
38 | ngOnInit() { | ||
39 | let id = this._routeParams.get('id'); | ||
40 | this._videoService.getVideo(id).subscribe( | ||
41 | video => this.loadVideo(video), | ||
42 | error => alert(error) | ||
43 | ); | ||
44 | } | ||
45 | |||
46 | loadVideo(video: Video) { | ||
47 | this.loading = true; | ||
48 | this.video = video; | ||
49 | console.log('Adding ' + this.video.magnetUri + '.'); | ||
50 | this.client.add(this.video.magnetUri, (torrent) => { | ||
51 | this.loading = false; | ||
52 | console.log('Added ' + this.video.magnetUri + '.'); | ||
53 | torrent.files[0].appendTo(this._elementRef.nativeElement.querySelector('.embed-responsive'), (err) => { | ||
54 | if (err) { | ||
55 | alert('Cannot append the file.'); | ||
56 | console.error(err); | ||
57 | } | ||
58 | }); | ||
59 | |||
60 | // Refresh each second | ||
61 | this._interval = setInterval(() => { | ||
62 | this.downloadSpeed = torrent.downloadSpeed; | ||
63 | this.uploadSpeed = torrent.uploadSpeed; | ||
64 | this.numPeers = torrent.numPeers; | ||
65 | }, 1000); | ||
66 | }); | ||
67 | } | ||
68 | |||
69 | routerCanDeactivate(next: ComponentInstruction, prev: ComponentInstruction) : any { | ||
70 | console.log('Removing video from webtorrent.'); | ||
71 | clearInterval(this._interval); | ||
72 | this.client.remove(this.video.magnetUri); | ||
73 | return true; | ||
74 | } | ||
75 | } | ||