]>
Commit | Line | Data |
---|---|---|
1 | import { Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core'; | |
2 | import { ActivatedRoute } from '@angular/router'; | |
3 | import { Subscription } from 'rxjs/Subscription'; | |
4 | ||
5 | import * as videojs from 'video.js'; | |
6 | import { MetaService } from 'ng2-meta'; | |
7 | import { NotificationsService } from 'angular2-notifications'; | |
8 | ||
9 | import { AuthService } from '../../core'; | |
10 | import { VideoMagnetComponent } from './video-magnet.component'; | |
11 | import { VideoShareComponent } from './video-share.component'; | |
12 | import { VideoReportComponent } from './video-report.component'; | |
13 | import { Video, VideoService } from '../shared'; | |
14 | import { WebTorrentService } from './webtorrent.service'; | |
15 | ||
16 | @Component({ | |
17 | selector: 'my-video-watch', | |
18 | templateUrl: './video-watch.component.html', | |
19 | styleUrls: [ './video-watch.component.scss' ] | |
20 | }) | |
21 | ||
22 | export class VideoWatchComponent implements OnInit, OnDestroy { | |
23 | private static LOADTIME_TOO_LONG: number = 20000; | |
24 | ||
25 | @ViewChild('videoMagnetModal') videoMagnetModal: VideoMagnetComponent; | |
26 | @ViewChild('videoShareModal') videoShareModal: VideoShareComponent; | |
27 | @ViewChild('videoReportModal') videoReportModal: VideoReportComponent; | |
28 | ||
29 | downloadSpeed: number; | |
30 | error: boolean = false; | |
31 | loading: boolean = false; | |
32 | numPeers: number; | |
33 | player: VideoJSPlayer; | |
34 | playerElement: Element; | |
35 | uploadSpeed: number; | |
36 | video: Video = null; | |
37 | videoNotFound = false; | |
38 | ||
39 | private errorTimer: number; | |
40 | private paramsSub: Subscription; | |
41 | private errorsSub: Subscription; | |
42 | private warningsSub: Subscription; | |
43 | private torrentInfosInterval: number; | |
44 | ||
45 | constructor( | |
46 | private elementRef: ElementRef, | |
47 | private ngZone: NgZone, | |
48 | private route: ActivatedRoute, | |
49 | private videoService: VideoService, | |
50 | private metaService: MetaService, | |
51 | private webTorrentService: WebTorrentService, | |
52 | private authService: AuthService, | |
53 | private notificationsService: NotificationsService | |
54 | ) {} | |
55 | ||
56 | ngOnInit() { | |
57 | this.paramsSub = this.route.params.subscribe(routeParams => { | |
58 | let id = routeParams['id']; | |
59 | this.videoService.getVideo(id).subscribe( | |
60 | video => { | |
61 | this.video = video; | |
62 | this.setOpenGraphTags(); | |
63 | this.loadVideo(); | |
64 | }, | |
65 | error => { | |
66 | this.videoNotFound = true; | |
67 | } | |
68 | ); | |
69 | }); | |
70 | ||
71 | this.playerElement = this.elementRef.nativeElement.querySelector('#video-container'); | |
72 | ||
73 | const videojsOptions = { | |
74 | controls: true, | |
75 | autoplay: false | |
76 | }; | |
77 | ||
78 | const self = this; | |
79 | videojs(this.playerElement, videojsOptions, function () { | |
80 | self.player = this; | |
81 | }); | |
82 | ||
83 | this.errorsSub = this.webTorrentService.errors.subscribe(err => this.notificationsService.error('Error', err.message)); | |
84 | this.warningsSub = this.webTorrentService.errors.subscribe(err => this.notificationsService.alert('Warning', err.message)); | |
85 | } | |
86 | ||
87 | ngOnDestroy() { | |
88 | // Remove WebTorrent stuff | |
89 | console.log('Removing video from webtorrent.'); | |
90 | window.clearInterval(this.torrentInfosInterval); | |
91 | window.clearTimeout(this.errorTimer); | |
92 | ||
93 | if (this.video !== null) { | |
94 | this.webTorrentService.remove(this.video.magnetUri); | |
95 | } | |
96 | ||
97 | // Remove player | |
98 | videojs(this.playerElement).dispose(); | |
99 | ||
100 | // Unsubscribe subscriptions | |
101 | this.paramsSub.unsubscribe(); | |
102 | this.errorsSub.unsubscribe(); | |
103 | this.warningsSub.unsubscribe(); | |
104 | } | |
105 | ||
106 | loadVideo() { | |
107 | // Reset the error | |
108 | this.error = false; | |
109 | // We are loading the video | |
110 | this.loading = true; | |
111 | ||
112 | console.log('Adding ' + this.video.magnetUri + '.'); | |
113 | ||
114 | // The callback might never return if there are network issues | |
115 | // So we create a timer to inform the user the load is abnormally long | |
116 | this.errorTimer = window.setTimeout(() => this.loadTooLong(), VideoWatchComponent.LOADTIME_TOO_LONG); | |
117 | ||
118 | this.webTorrentService.add(this.video.magnetUri, (torrent) => { | |
119 | // Clear the error timer | |
120 | window.clearTimeout(this.errorTimer); | |
121 | // Maybe the error was fired by the timer, so reset it | |
122 | this.error = false; | |
123 | ||
124 | // We are not loading the video anymore | |
125 | this.loading = false; | |
126 | ||
127 | console.log('Added ' + this.video.magnetUri + '.'); | |
128 | torrent.files[0].renderTo(this.playerElement, { autoplay: true }, (err) => { | |
129 | if (err) { | |
130 | this.notificationsService.error('Error', 'Cannot append the file in the video element.'); | |
131 | console.error(err); | |
132 | } | |
133 | }); | |
134 | ||
135 | this.runInProgress(torrent); | |
136 | }); | |
137 | } | |
138 | ||
139 | showReportModal(event: Event) { | |
140 | event.preventDefault(); | |
141 | this.videoReportModal.show(); | |
142 | } | |
143 | ||
144 | showShareModal() { | |
145 | this.videoShareModal.show(); | |
146 | } | |
147 | ||
148 | showMagnetUriModal() { | |
149 | this.videoMagnetModal.show(); | |
150 | } | |
151 | ||
152 | isUserLoggedIn() { | |
153 | return this.authService.isLoggedIn(); | |
154 | } | |
155 | ||
156 | private loadTooLong() { | |
157 | this.error = true; | |
158 | console.error('The video load seems to be abnormally long.'); | |
159 | } | |
160 | ||
161 | private setOpenGraphTags() { | |
162 | this.metaService.setTag('og:type', 'video'); | |
163 | ||
164 | this.metaService.setTag('og:title', this.video.name); | |
165 | this.metaService.setTag('name', this.video.name); | |
166 | ||
167 | this.metaService.setTag('og:description', this.video.description); | |
168 | this.metaService.setTag('description', this.video.description); | |
169 | ||
170 | this.metaService.setTag('og:image', this.video.thumbnailPath); | |
171 | ||
172 | this.metaService.setTag('og:duration', this.video.duration); | |
173 | ||
174 | this.metaService.setTag('og:site_name', 'PeerTube'); | |
175 | ||
176 | this.metaService.setTag('og:url', window.location.href); | |
177 | this.metaService.setTag('url', window.location.href); | |
178 | } | |
179 | ||
180 | private runInProgress(torrent: any) { | |
181 | // Refresh each second | |
182 | this.torrentInfosInterval = window.setInterval(() => { | |
183 | this.ngZone.run(() => { | |
184 | this.downloadSpeed = torrent.downloadSpeed; | |
185 | this.numPeers = torrent.numPeers; | |
186 | this.uploadSpeed = torrent.uploadSpeed; | |
187 | }); | |
188 | }, 1000); | |
189 | } | |
190 | } |