aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/app/videos/video-watch/video-watch.component.ts
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-06-16 14:32:15 +0200
committerChocobozzz <florian.bigard@gmail.com>2017-06-16 14:32:15 +0200
commitdf98563e2104b82b119c00a3cd83cd0dc1242d25 (patch)
treea9720bf01bac9ad5646bd3d3c9bc7653617afdad /client/src/app/videos/video-watch/video-watch.component.ts
parent46757b477c1adb5f98060d15998a3852e18902a6 (diff)
downloadPeerTube-df98563e2104b82b119c00a3cd83cd0dc1242d25.tar.gz
PeerTube-df98563e2104b82b119c00a3cd83cd0dc1242d25.tar.zst
PeerTube-df98563e2104b82b119c00a3cd83cd0dc1242d25.zip
Use typescript standard and lint all files
Diffstat (limited to 'client/src/app/videos/video-watch/video-watch.component.ts')
-rw-r--r--client/src/app/videos/video-watch/video-watch.component.ts323
1 files changed, 163 insertions, 160 deletions
diff --git a/client/src/app/videos/video-watch/video-watch.component.ts b/client/src/app/videos/video-watch/video-watch.component.ts
index bcfebf2fd..4a547f7e4 100644
--- a/client/src/app/videos/video-watch/video-watch.component.ts
+++ b/client/src/app/videos/video-watch/video-watch.component.ts
@@ -1,18 +1,18 @@
1import { Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core'; 1import { Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core'
2import { ActivatedRoute, Router } from '@angular/router'; 2import { ActivatedRoute, Router } from '@angular/router'
3import { Observable } from 'rxjs/Observable'; 3import { Observable } from 'rxjs/Observable'
4import { Subscription } from 'rxjs/Subscription'; 4import { Subscription } from 'rxjs/Subscription'
5 5
6import * as videojs from 'video.js'; 6import * as videojs from 'video.js'
7import { MetaService } from '@nglibs/meta'; 7import { MetaService } from '@nglibs/meta'
8import { NotificationsService } from 'angular2-notifications'; 8import { NotificationsService } from 'angular2-notifications'
9 9
10import { AuthService, ConfirmService } from '../../core'; 10import { AuthService, ConfirmService } from '../../core'
11import { VideoMagnetComponent } from './video-magnet.component'; 11import { VideoMagnetComponent } from './video-magnet.component'
12import { VideoShareComponent } from './video-share.component'; 12import { VideoShareComponent } from './video-share.component'
13import { VideoReportComponent } from './video-report.component'; 13import { VideoReportComponent } from './video-report.component'
14import { RateType, Video, VideoService } from '../shared'; 14import { RateType, Video, VideoService } from '../shared'
15import { WebTorrentService } from './webtorrent.service'; 15import { WebTorrentService } from './webtorrent.service'
16 16
17@Component({ 17@Component({
18 selector: 'my-video-watch', 18 selector: 'my-video-watch',
@@ -21,30 +21,30 @@ import { WebTorrentService } from './webtorrent.service';
21}) 21})
22 22
23export class VideoWatchComponent implements OnInit, OnDestroy { 23export class VideoWatchComponent implements OnInit, OnDestroy {
24 private static LOADTIME_TOO_LONG = 20000; 24 private static LOADTIME_TOO_LONG = 20000
25 25
26 @ViewChild('videoMagnetModal') videoMagnetModal: VideoMagnetComponent; 26 @ViewChild('videoMagnetModal') videoMagnetModal: VideoMagnetComponent
27 @ViewChild('videoShareModal') videoShareModal: VideoShareComponent; 27 @ViewChild('videoShareModal') videoShareModal: VideoShareComponent
28 @ViewChild('videoReportModal') videoReportModal: VideoReportComponent; 28 @ViewChild('videoReportModal') videoReportModal: VideoReportComponent
29 29
30 downloadSpeed: number; 30 downloadSpeed: number
31 error = false; 31 error = false
32 loading = false; 32 loading = false
33 numPeers: number; 33 numPeers: number
34 player: videojs.Player; 34 player: videojs.Player
35 playerElement: Element; 35 playerElement: Element
36 uploadSpeed: number; 36 uploadSpeed: number
37 userRating: RateType = null; 37 userRating: RateType = null
38 video: Video = null; 38 video: Video = null
39 videoNotFound = false; 39 videoNotFound = false
40 40
41 private errorTimer: number; 41 private errorTimer: number
42 private paramsSub: Subscription; 42 private paramsSub: Subscription
43 private errorsSub: Subscription; 43 private errorsSub: Subscription
44 private warningsSub: Subscription; 44 private warningsSub: Subscription
45 private torrentInfosInterval: number; 45 private torrentInfosInterval: number
46 46
47 constructor( 47 constructor (
48 private elementRef: ElementRef, 48 private elementRef: ElementRef,
49 private ngZone: NgZone, 49 private ngZone: NgZone,
50 private route: ActivatedRoute, 50 private route: ActivatedRoute,
@@ -57,278 +57,281 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
57 private notificationsService: NotificationsService 57 private notificationsService: NotificationsService
58 ) {} 58 ) {}
59 59
60 ngOnInit() { 60 ngOnInit () {
61 this.paramsSub = this.route.params.subscribe(routeParams => { 61 this.paramsSub = this.route.params.subscribe(routeParams => {
62 let id = routeParams['id']; 62 let id = routeParams['id']
63 this.videoService.getVideo(id).subscribe( 63 this.videoService.getVideo(id).subscribe(
64 video => this.onVideoFetched(video), 64 video => this.onVideoFetched(video),
65 65
66 error => this.videoNotFound = true 66 error => {
67 ); 67 console.error(error)
68 }); 68 this.videoNotFound = true
69 }
70 )
71 })
69 72
70 this.playerElement = this.elementRef.nativeElement.querySelector('#video-container'); 73 this.playerElement = this.elementRef.nativeElement.querySelector('#video-container')
71 74
72 const videojsOptions = { 75 const videojsOptions = {
73 controls: true, 76 controls: true,
74 autoplay: false 77 autoplay: false
75 }; 78 }
76 79
77 const self = this; 80 const self = this
78 videojs(this.playerElement, videojsOptions, function () { 81 videojs(this.playerElement, videojsOptions, function () {
79 self.player = this; 82 self.player = this
80 }); 83 })
81 84
82 this.errorsSub = this.webTorrentService.errors.subscribe(err => this.notificationsService.error('Error', err.message)); 85 this.errorsSub = this.webTorrentService.errors.subscribe(err => this.notificationsService.error('Error', err.message))
83 this.warningsSub = this.webTorrentService.errors.subscribe(err => this.notificationsService.alert('Warning', err.message)); 86 this.warningsSub = this.webTorrentService.errors.subscribe(err => this.notificationsService.alert('Warning', err.message))
84 } 87 }
85 88
86 ngOnDestroy() { 89 ngOnDestroy () {
87 // Remove WebTorrent stuff 90 // Remove WebTorrent stuff
88 console.log('Removing video from webtorrent.'); 91 console.log('Removing video from webtorrent.')
89 window.clearInterval(this.torrentInfosInterval); 92 window.clearInterval(this.torrentInfosInterval)
90 window.clearTimeout(this.errorTimer); 93 window.clearTimeout(this.errorTimer)
91 94
92 if (this.video !== null && this.webTorrentService.has(this.video.magnetUri)) { 95 if (this.video !== null && this.webTorrentService.has(this.video.magnetUri)) {
93 this.webTorrentService.remove(this.video.magnetUri); 96 this.webTorrentService.remove(this.video.magnetUri)
94 } 97 }
95 98
96 // Remove player 99 // Remove player
97 videojs(this.playerElement).dispose(); 100 videojs(this.playerElement).dispose()
98 101
99 // Unsubscribe subscriptions 102 // Unsubscribe subscriptions
100 this.paramsSub.unsubscribe(); 103 this.paramsSub.unsubscribe()
101 this.errorsSub.unsubscribe(); 104 this.errorsSub.unsubscribe()
102 this.warningsSub.unsubscribe(); 105 this.warningsSub.unsubscribe()
103 } 106 }
104 107
105 loadVideo() { 108 loadVideo () {
106 // Reset the error 109 // Reset the error
107 this.error = false; 110 this.error = false
108 // We are loading the video 111 // We are loading the video
109 this.loading = true; 112 this.loading = true
110 113
111 console.log('Adding ' + this.video.magnetUri + '.'); 114 console.log('Adding ' + this.video.magnetUri + '.')
112 115
113 // The callback might never return if there are network issues 116 // The callback might never return if there are network issues
114 // So we create a timer to inform the user the load is abnormally long 117 // So we create a timer to inform the user the load is abnormally long
115 this.errorTimer = window.setTimeout(() => this.loadTooLong(), VideoWatchComponent.LOADTIME_TOO_LONG); 118 this.errorTimer = window.setTimeout(() => this.loadTooLong(), VideoWatchComponent.LOADTIME_TOO_LONG)
116 119
117 this.webTorrentService.add(this.video.magnetUri, (torrent) => { 120 this.webTorrentService.add(this.video.magnetUri, (torrent) => {
118 // Clear the error timer 121 // Clear the error timer
119 window.clearTimeout(this.errorTimer); 122 window.clearTimeout(this.errorTimer)
120 // Maybe the error was fired by the timer, so reset it 123 // Maybe the error was fired by the timer, so reset it
121 this.error = false; 124 this.error = false
122 125
123 // We are not loading the video anymore 126 // We are not loading the video anymore
124 this.loading = false; 127 this.loading = false
125 128
126 console.log('Added ' + this.video.magnetUri + '.'); 129 console.log('Added ' + this.video.magnetUri + '.')
127 torrent.files[0].renderTo(this.playerElement, { autoplay: true }, (err) => { 130 torrent.files[0].renderTo(this.playerElement, { autoplay: true }, (err) => {
128 if (err) { 131 if (err) {
129 this.notificationsService.error('Error', 'Cannot append the file in the video element.'); 132 this.notificationsService.error('Error', 'Cannot append the file in the video element.')
130 console.error(err); 133 console.error(err)
131 } 134 }
132 }); 135 })
133 136
134 this.runInProgress(torrent); 137 this.runInProgress(torrent)
135 }); 138 })
136 } 139 }
137 140
138 setLike() { 141 setLike () {
139 if (this.isUserLoggedIn() === false) return; 142 if (this.isUserLoggedIn() === false) return
140 // Already liked this video 143 // Already liked this video
141 if (this.userRating === 'like') return; 144 if (this.userRating === 'like') return
142 145
143 this.videoService.setVideoLike(this.video.id) 146 this.videoService.setVideoLike(this.video.id)
144 .subscribe( 147 .subscribe(
145 () => { 148 () => {
146 // Update the video like attribute 149 // Update the video like attribute
147 this.updateVideoRating(this.userRating, 'like'); 150 this.updateVideoRating(this.userRating, 'like')
148 this.userRating = 'like'; 151 this.userRating = 'like'
149 }, 152 },
150 153
151 err => this.notificationsService.error('Error', err.text) 154 err => this.notificationsService.error('Error', err.text)
152 ); 155 )
153 } 156 }
154 157
155 setDislike() { 158 setDislike () {
156 if (this.isUserLoggedIn() === false) return; 159 if (this.isUserLoggedIn() === false) return
157 // Already disliked this video 160 // Already disliked this video
158 if (this.userRating === 'dislike') return; 161 if (this.userRating === 'dislike') return
159 162
160 this.videoService.setVideoDislike(this.video.id) 163 this.videoService.setVideoDislike(this.video.id)
161 .subscribe( 164 .subscribe(
162 () => { 165 () => {
163 // Update the video dislike attribute 166 // Update the video dislike attribute
164 this.updateVideoRating(this.userRating, 'dislike'); 167 this.updateVideoRating(this.userRating, 'dislike')
165 this.userRating = 'dislike'; 168 this.userRating = 'dislike'
166 }, 169 },
167 170
168 err => this.notificationsService.error('Error', err.text) 171 err => this.notificationsService.error('Error', err.text)
169 ); 172 )
170 } 173 }
171 174
172 removeVideo(event: Event) { 175 removeVideo (event: Event) {
173 event.preventDefault(); 176 event.preventDefault()
174 177
175 this.confirmService.confirm('Do you really want to delete this video?', 'Delete').subscribe( 178 this.confirmService.confirm('Do you really want to delete this video?', 'Delete').subscribe(
176 res => { 179 res => {
177 if (res === false) return; 180 if (res === false) return
178 181
179 this.videoService.removeVideo(this.video.id) 182 this.videoService.removeVideo(this.video.id)
180 .subscribe( 183 .subscribe(
181 status => { 184 status => {
182 this.notificationsService.success('Success', `Video ${this.video.name} deleted.`); 185 this.notificationsService.success('Success', `Video ${this.video.name} deleted.`)
183 // Go back to the video-list. 186 // Go back to the video-list.
184 this.router.navigate(['/videos/list']); 187 this.router.navigate(['/videos/list'])
185 }, 188 },
186 189
187 error => this.notificationsService.error('Error', error.text) 190 error => this.notificationsService.error('Error', error.text)
188 ); 191 )
189 } 192 }
190 ); 193 )
191 } 194 }
192 195
193 blacklistVideo(event: Event) { 196 blacklistVideo (event: Event) {
194 event.preventDefault(); 197 event.preventDefault()
195 198
196 this.confirmService.confirm('Do you really want to blacklist this video ?', 'Blacklist').subscribe( 199 this.confirmService.confirm('Do you really want to blacklist this video ?', 'Blacklist').subscribe(
197 res => { 200 res => {
198 if (res === false) return; 201 if (res === false) return
199 202
200 this.videoService.blacklistVideo(this.video.id) 203 this.videoService.blacklistVideo(this.video.id)
201 .subscribe( 204 .subscribe(
202 status => { 205 status => {
203 this.notificationsService.success('Success', `Video ${this.video.name} had been blacklisted.`); 206 this.notificationsService.success('Success', `Video ${this.video.name} had been blacklisted.`)
204 this.router.navigate(['/videos/list']); 207 this.router.navigate(['/videos/list'])
205 }, 208 },
206 209
207 error => this.notificationsService.error('Error', error.text) 210 error => this.notificationsService.error('Error', error.text)
208 ); 211 )
209 } 212 }
210 ); 213 )
211 } 214 }
212 215
213 showReportModal(event: Event) { 216 showReportModal (event: Event) {
214 event.preventDefault(); 217 event.preventDefault()
215 this.videoReportModal.show(); 218 this.videoReportModal.show()
216 } 219 }
217 220
218 showShareModal() { 221 showShareModal () {
219 this.videoShareModal.show(); 222 this.videoShareModal.show()
220 } 223 }
221 224
222 showMagnetUriModal(event: Event) { 225 showMagnetUriModal (event: Event) {
223 event.preventDefault(); 226 event.preventDefault()
224 this.videoMagnetModal.show(); 227 this.videoMagnetModal.show()
225 } 228 }
226 229
227 isUserLoggedIn() { 230 isUserLoggedIn () {
228 return this.authService.isLoggedIn(); 231 return this.authService.isLoggedIn()
229 } 232 }
230 233
231 canUserUpdateVideo() { 234 canUserUpdateVideo () {
232 return this.video.isUpdatableBy(this.authService.getUser()); 235 return this.video.isUpdatableBy(this.authService.getUser())
233 } 236 }
234 237
235 isVideoRemovable() { 238 isVideoRemovable () {
236 return this.video.isRemovableBy(this.authService.getUser()); 239 return this.video.isRemovableBy(this.authService.getUser())
237 } 240 }
238 241
239 isVideoBlacklistable() { 242 isVideoBlacklistable () {
240 return this.video.isBlackistableBy(this.authService.getUser()); 243 return this.video.isBlackistableBy(this.authService.getUser())
241 } 244 }
242 245
243 private checkUserRating() { 246 private checkUserRating () {
244 // Unlogged users do not have ratings 247 // Unlogged users do not have ratings
245 if (this.isUserLoggedIn() === false) return; 248 if (this.isUserLoggedIn() === false) return
246 249
247 this.videoService.getUserVideoRating(this.video.id) 250 this.videoService.getUserVideoRating(this.video.id)
248 .subscribe( 251 .subscribe(
249 ratingObject => { 252 ratingObject => {
250 if (ratingObject) { 253 if (ratingObject) {
251 this.userRating = ratingObject.rating; 254 this.userRating = ratingObject.rating
252 } 255 }
253 }, 256 },
254 257
255 err => this.notificationsService.error('Error', err.text) 258 err => this.notificationsService.error('Error', err.text)
256 ); 259 )
257 } 260 }
258 261
259 private onVideoFetched(video: Video) { 262 private onVideoFetched (video: Video) {
260 this.video = video; 263 this.video = video
261 264
262 let observable; 265 let observable
263 if (this.video.isVideoNSFWForUser(this.authService.getUser())) { 266 if (this.video.isVideoNSFWForUser(this.authService.getUser())) {
264 observable = this.confirmService.confirm('This video is not safe for work. Are you sure you want to watch it?', 'NSFW'); 267 observable = this.confirmService.confirm('This video is not safe for work. Are you sure you want to watch it?', 'NSFW')
265 } else { 268 } else {
266 observable = Observable.of(true); 269 observable = Observable.of(true)
267 } 270 }
268 271
269 observable.subscribe( 272 observable.subscribe(
270 res => { 273 res => {
271 if (res === false) { 274 if (res === false) {
272 return this.router.navigate([ '/videos/list' ]); 275 return this.router.navigate([ '/videos/list' ])
273 } 276 }
274 277
275 this.setOpenGraphTags(); 278 this.setOpenGraphTags()
276 this.loadVideo(); 279 this.loadVideo()
277 this.checkUserRating(); 280 this.checkUserRating()
278 } 281 }
279 ); 282 )
280 } 283 }
281 284
282 private updateVideoRating(oldRating: RateType, newRating: RateType) { 285 private updateVideoRating (oldRating: RateType, newRating: RateType) {
283 let likesToIncrement = 0; 286 let likesToIncrement = 0
284 let dislikesToIncrement = 0; 287 let dislikesToIncrement = 0
285 288
286 if (oldRating) { 289 if (oldRating) {
287 if (oldRating === 'like') likesToIncrement--; 290 if (oldRating === 'like') likesToIncrement--
288 if (oldRating === 'dislike') dislikesToIncrement--; 291 if (oldRating === 'dislike') dislikesToIncrement--
289 } 292 }
290 293
291 if (newRating === 'like') likesToIncrement++; 294 if (newRating === 'like') likesToIncrement++
292 if (newRating === 'dislike') dislikesToIncrement++; 295 if (newRating === 'dislike') dislikesToIncrement++
293 296
294 this.video.likes += likesToIncrement; 297 this.video.likes += likesToIncrement
295 this.video.dislikes += dislikesToIncrement; 298 this.video.dislikes += dislikesToIncrement
296 } 299 }
297 300
298 private loadTooLong() { 301 private loadTooLong () {
299 this.error = true; 302 this.error = true
300 console.error('The video load seems to be abnormally long.'); 303 console.error('The video load seems to be abnormally long.')
301 } 304 }
302 305
303 private setOpenGraphTags() { 306 private setOpenGraphTags () {
304 this.metaService.setTitle(this.video.name); 307 this.metaService.setTitle(this.video.name)
305 308
306 this.metaService.setTag('og:type', 'video'); 309 this.metaService.setTag('og:type', 'video')
307 310
308 this.metaService.setTag('og:title', this.video.name); 311 this.metaService.setTag('og:title', this.video.name)
309 this.metaService.setTag('name', this.video.name); 312 this.metaService.setTag('name', this.video.name)
310 313
311 this.metaService.setTag('og:description', this.video.description); 314 this.metaService.setTag('og:description', this.video.description)
312 this.metaService.setTag('description', this.video.description); 315 this.metaService.setTag('description', this.video.description)
313 316
314 this.metaService.setTag('og:image', this.video.thumbnailPath); 317 this.metaService.setTag('og:image', this.video.thumbnailPath)
315 318
316 this.metaService.setTag('og:duration', this.video.duration.toString()); 319 this.metaService.setTag('og:duration', this.video.duration.toString())
317 320
318 this.metaService.setTag('og:site_name', 'PeerTube'); 321 this.metaService.setTag('og:site_name', 'PeerTube')
319 322
320 this.metaService.setTag('og:url', window.location.href); 323 this.metaService.setTag('og:url', window.location.href)
321 this.metaService.setTag('url', window.location.href); 324 this.metaService.setTag('url', window.location.href)
322 } 325 }
323 326
324 private runInProgress(torrent: any) { 327 private runInProgress (torrent: any) {
325 // Refresh each second 328 // Refresh each second
326 this.torrentInfosInterval = window.setInterval(() => { 329 this.torrentInfosInterval = window.setInterval(() => {
327 this.ngZone.run(() => { 330 this.ngZone.run(() => {
328 this.downloadSpeed = torrent.downloadSpeed; 331 this.downloadSpeed = torrent.downloadSpeed
329 this.numPeers = torrent.numPeers; 332 this.numPeers = torrent.numPeers
330 this.uploadSpeed = torrent.uploadSpeed; 333 this.uploadSpeed = torrent.uploadSpeed
331 }); 334 })
332 }, 1000); 335 }, 1000)
333 } 336 }
334} 337}