]>
Commit | Line | Data |
---|---|---|
1 | import { Component, ElementRef, NgZone, OnDestroy, OnInit } from '@angular/core'; | |
2 | import { ActivatedRoute } from '@angular/router'; | |
3 | ||
4 | import { BytesPipe } from 'angular-pipes/src/math/bytes.pipe'; | |
5 | ||
6 | import { LoaderComponent, Video, VideoService } from '../shared'; | |
7 | import { WebTorrentService } from './webtorrent.service'; | |
8 | ||
9 | @Component({ | |
10 | selector: 'my-video-watch', | |
11 | template: require('./video-watch.component.html'), | |
12 | styles: [ require('./video-watch.component.scss') ], | |
13 | providers: [ WebTorrentService ], | |
14 | directives: [ LoaderComponent ], | |
15 | pipes: [ BytesPipe ] | |
16 | }) | |
17 | ||
18 | export class VideoWatchComponent implements OnInit, OnDestroy { | |
19 | private static LOADTIME_TOO_LONG: number = 30000; | |
20 | ||
21 | downloadSpeed: number; | |
22 | error: boolean = false; | |
23 | loading: boolean = false; | |
24 | numPeers: number; | |
25 | uploadSpeed: number; | |
26 | video: Video; | |
27 | ||
28 | private errorTimer: NodeJS.Timer; | |
29 | private sub: any; | |
30 | private torrentInfosInterval: NodeJS.Timer; | |
31 | ||
32 | constructor( | |
33 | private elementRef: ElementRef, | |
34 | private ngZone: NgZone, | |
35 | private route: ActivatedRoute, | |
36 | private videoService: VideoService, | |
37 | private webTorrentService: WebTorrentService | |
38 | ) {} | |
39 | ||
40 | loadVideo() { | |
41 | // Reset the error | |
42 | this.error = false; | |
43 | // We are loading the video | |
44 | this.loading = true; | |
45 | ||
46 | console.log('Adding ' + this.video.magnetUri + '.'); | |
47 | ||
48 | // The callback might never return if there are network issues | |
49 | // So we create a timer to inform the user the load is abnormally long | |
50 | this.errorTimer = setTimeout(() => this.loadTooLong(), VideoWatchComponent.LOADTIME_TOO_LONG); | |
51 | ||
52 | this.webTorrentService.add(this.video.magnetUri, (torrent) => { | |
53 | // Clear the error timer | |
54 | clearTimeout(this.errorTimer); | |
55 | // Maybe the error was fired by the timer, so reset it | |
56 | this.error = false; | |
57 | ||
58 | // We are not loading the video anymore | |
59 | this.loading = false; | |
60 | ||
61 | console.log('Added ' + this.video.magnetUri + '.'); | |
62 | torrent.files[0].appendTo(this.elementRef.nativeElement.querySelector('.embed-responsive'), (err) => { | |
63 | if (err) { | |
64 | alert('Cannot append the file.'); | |
65 | console.error(err); | |
66 | } | |
67 | }); | |
68 | ||
69 | this.runInProgress(torrent); | |
70 | }); | |
71 | } | |
72 | ||
73 | ngOnDestroy() { | |
74 | console.log('Removing video from webtorrent.'); | |
75 | clearInterval(this.torrentInfosInterval); | |
76 | this.webTorrentService.remove(this.video.magnetUri); | |
77 | ||
78 | this.sub.unsubscribe(); | |
79 | } | |
80 | ||
81 | ngOnInit() { | |
82 | this.sub = this.route.params.subscribe(routeParams => { | |
83 | let id = routeParams['id']; | |
84 | this.videoService.getVideo(id).subscribe( | |
85 | video => { | |
86 | this.video = video; | |
87 | this.loadVideo(); | |
88 | }, | |
89 | error => alert(error.text) | |
90 | ); | |
91 | }); | |
92 | } | |
93 | ||
94 | private loadTooLong() { | |
95 | this.error = true; | |
96 | console.error('The video load seems to be abnormally long.'); | |
97 | } | |
98 | ||
99 | private runInProgress(torrent: any) { | |
100 | // Refresh each second | |
101 | this.torrentInfosInterval = setInterval(() => { | |
102 | this.ngZone.run(() => { | |
103 | this.downloadSpeed = torrent.downloadSpeed; | |
104 | this.numPeers = torrent.numPeers; | |
105 | this.uploadSpeed = torrent.uploadSpeed; | |
106 | }); | |
107 | }, 1000); | |
108 | } | |
109 | } |