]>
Commit | Line | Data |
---|---|---|
3154f382 | 1 | import { Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core'; |
0629423c | 2 | import { ActivatedRoute } from '@angular/router'; |
8140a704 | 3 | |
3154f382 | 4 | import { ModalDirective } from 'ng2-bootstrap/components/modal'; |
3ec343a4 | 5 | import { MetaService } from 'ng2-meta'; |
3154f382 | 6 | |
ab32b0fc | 7 | import { Video, VideoService } from '../shared'; |
d3ef341a | 8 | import { WebTorrentService } from './webtorrent.service'; |
dc8bc31b | 9 | |
dc8bc31b C |
10 | @Component({ |
11 | selector: 'my-video-watch', | |
ec8d8440 C |
12 | templateUrl: './video-watch.component.html', |
13 | styleUrls: [ './video-watch.component.scss' ] | |
dc8bc31b C |
14 | }) |
15 | ||
0629423c | 16 | export class VideoWatchComponent implements OnInit, OnDestroy { |
3ad109e4 C |
17 | private static LOADTIME_TOO_LONG: number = 30000; |
18 | ||
3154f382 C |
19 | @ViewChild('magnetUriModal') magnetUriModal: ModalDirective; |
20 | ||
8cfecb2a | 21 | downloadSpeed: number; |
3ad109e4 | 22 | error: boolean = false; |
da932efc | 23 | loading: boolean = false; |
4fd8aa32 C |
24 | numPeers: number; |
25 | uploadSpeed: number; | |
d1992b93 | 26 | video: Video = null; |
dc8bc31b | 27 | |
3ad109e4 | 28 | private errorTimer: NodeJS.Timer; |
0629423c | 29 | private sub: any; |
3ad109e4 | 30 | private torrentInfosInterval: NodeJS.Timer; |
dc8bc31b C |
31 | |
32 | constructor( | |
4fd8aa32 | 33 | private elementRef: ElementRef, |
c323efb9 | 34 | private ngZone: NgZone, |
0629423c | 35 | private route: ActivatedRoute, |
d3ef341a | 36 | private videoService: VideoService, |
3ec343a4 | 37 | private metaService: MetaService, |
d3ef341a C |
38 | private webTorrentService: WebTorrentService |
39 | ) {} | |
dc8bc31b | 40 | |
d1992b93 C |
41 | ngOnInit() { |
42 | this.sub = this.route.params.subscribe(routeParams => { | |
43 | let id = routeParams['id']; | |
44 | this.videoService.getVideo(id).subscribe( | |
45 | video => { | |
46 | this.video = video; | |
3ec343a4 | 47 | this.setOpenGraphTags(); |
d1992b93 C |
48 | this.loadVideo(); |
49 | }, | |
50 | error => alert(error.text) | |
51 | ); | |
52 | }); | |
53 | } | |
54 | ||
55 | ngOnDestroy() { | |
56 | console.log('Removing video from webtorrent.'); | |
57 | clearInterval(this.torrentInfosInterval); | |
58 | clearTimeout(this.errorTimer); | |
59 | this.webTorrentService.remove(this.video.magnetUri); | |
60 | ||
61 | this.sub.unsubscribe(); | |
62 | } | |
63 | ||
3ad109e4 C |
64 | loadVideo() { |
65 | // Reset the error | |
66 | this.error = false; | |
67 | // We are loading the video | |
da932efc | 68 | this.loading = true; |
3ad109e4 | 69 | |
2c4a0b5d | 70 | console.log('Adding ' + this.video.magnetUri + '.'); |
d3ef341a | 71 | |
3ad109e4 C |
72 | // The callback might never return if there are network issues |
73 | // So we create a timer to inform the user the load is abnormally long | |
74 | this.errorTimer = setTimeout(() => this.loadTooLong(), VideoWatchComponent.LOADTIME_TOO_LONG); | |
75 | ||
d3ef341a | 76 | this.webTorrentService.add(this.video.magnetUri, (torrent) => { |
3ad109e4 C |
77 | // Clear the error timer |
78 | clearTimeout(this.errorTimer); | |
79 | // Maybe the error was fired by the timer, so reset it | |
80 | this.error = false; | |
81 | ||
82 | // We are not loading the video anymore | |
da932efc | 83 | this.loading = false; |
3ad109e4 | 84 | |
2c4a0b5d | 85 | console.log('Added ' + this.video.magnetUri + '.'); |
ccf6ed16 | 86 | torrent.files[0].appendTo(this.elementRef.nativeElement.querySelector('.embed-responsive'), (err) => { |
dc8bc31b C |
87 | if (err) { |
88 | alert('Cannot append the file.'); | |
89 | console.error(err); | |
90 | } | |
44124980 | 91 | }); |
8cfecb2a | 92 | |
c323efb9 | 93 | this.runInProgress(torrent); |
44124980 | 94 | }); |
dc8bc31b | 95 | } |
98b01bac | 96 | |
3154f382 C |
97 | showMagnetUriModal() { |
98 | this.magnetUriModal.show(); | |
99 | } | |
100 | ||
101 | hideMagnetUriModal() { | |
102 | this.magnetUriModal.hide(); | |
103 | } | |
104 | ||
3ad109e4 C |
105 | private loadTooLong() { |
106 | this.error = true; | |
107 | console.error('The video load seems to be abnormally long.'); | |
108 | } | |
c323efb9 | 109 | |
3ec343a4 C |
110 | private setOpenGraphTags() { |
111 | this.metaService.setTag('og:type', 'video'); | |
112 | ||
113 | this.metaService.setTag('og:title', this.video.name); | |
114 | this.metaService.setTag('name', this.video.name); | |
115 | ||
116 | this.metaService.setTag('og:description', this.video.description); | |
117 | this.metaService.setTag('description', this.video.description); | |
118 | ||
119 | this.metaService.setTag('og:image', this.video.thumbnailPath); | |
120 | ||
121 | this.metaService.setTag('og:duration', this.video.duration); | |
122 | ||
123 | this.metaService.setTag('og:site_name', 'PeerTube'); | |
124 | ||
125 | this.metaService.setTag('og:url', window.location.href); | |
126 | this.metaService.setTag('url', window.location.href); | |
127 | } | |
128 | ||
c323efb9 C |
129 | private runInProgress(torrent: any) { |
130 | // Refresh each second | |
131 | this.torrentInfosInterval = setInterval(() => { | |
132 | this.ngZone.run(() => { | |
133 | this.downloadSpeed = torrent.downloadSpeed; | |
134 | this.numPeers = torrent.numPeers; | |
135 | this.uploadSpeed = torrent.uploadSpeed; | |
136 | }); | |
137 | }, 1000); | |
138 | } | |
dc8bc31b | 139 | } |