diff options
Diffstat (limited to 'client/src/app/videos')
-rw-r--r-- | client/src/app/videos/+video-watch/video-watch.component.ts | 115 |
1 files changed, 63 insertions, 52 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 3965bade8..662380d96 100644 --- a/client/src/app/videos/+video-watch/video-watch.component.ts +++ b/client/src/app/videos/+video-watch/video-watch.component.ts | |||
@@ -26,6 +26,8 @@ import { VideoShareComponent } from './modal/video-share.component' | |||
26 | styleUrls: [ './video-watch.component.scss' ] | 26 | styleUrls: [ './video-watch.component.scss' ] |
27 | }) | 27 | }) |
28 | export class VideoWatchComponent implements OnInit, OnDestroy { | 28 | export class VideoWatchComponent implements OnInit, OnDestroy { |
29 | private static LOCAL_STORAGE_PRIVACY_CONCERN_KEY = 'video-watch-privacy-concern' | ||
30 | |||
29 | @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent | 31 | @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent |
30 | @ViewChild('videoShareModal') videoShareModal: VideoShareComponent | 32 | @ViewChild('videoShareModal') videoShareModal: VideoShareComponent |
31 | @ViewChild('videoReportModal') videoReportModal: VideoReportComponent | 33 | @ViewChild('videoReportModal') videoReportModal: VideoReportComponent |
@@ -301,75 +303,76 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
301 | ) | 303 | ) |
302 | } | 304 | } |
303 | 305 | ||
304 | private onVideoFetched (video: VideoDetails) { | 306 | private async onVideoFetched (video: VideoDetails) { |
305 | this.video = video | 307 | this.video = video |
306 | 308 | ||
307 | this.updateOtherVideosDisplayed() | 309 | this.updateOtherVideosDisplayed() |
308 | 310 | ||
309 | let observable | ||
310 | if (this.video.isVideoNSFWForUser(this.user)) { | 311 | if (this.video.isVideoNSFWForUser(this.user)) { |
311 | observable = this.confirmService.confirm( | 312 | const res = await this.confirmService.confirm( |
312 | 'This video contains mature or explicit content. Are you sure you want to watch it?', | 313 | 'This video contains mature or explicit content. Are you sure you want to watch it?', |
313 | 'Mature or explicit content' | 314 | 'Mature or explicit content' |
314 | ) | 315 | ) |
315 | } else { | 316 | if (res === false) return this.router.navigate([ '/videos/list' ]) |
316 | observable = Observable.of(true) | ||
317 | } | 317 | } |
318 | 318 | ||
319 | observable.subscribe( | 319 | if (!this.hasAlreadyAcceptedPrivacyConcern()) { |
320 | res => { | 320 | const res = await this.confirmService.confirm( |
321 | if (res === false) { | 321 | 'PeerTube uses P2P, other may know you are watching that video through your public IP address. ' + |
322 | 'Are you okay with that?', | ||
323 | 'Privacy concern', | ||
324 | 'I accept!' | ||
325 | ) | ||
326 | if (res === false) return this.router.navigate([ '/videos/list' ]) | ||
327 | } | ||
322 | 328 | ||
323 | return this.router.navigate([ '/videos/list' ]) | 329 | this.acceptedPrivacyConcern() |
324 | } | ||
325 | 330 | ||
326 | // Player was already loaded | 331 | // Player was already loaded |
327 | if (this.videoPlayerLoaded !== true) { | 332 | if (this.videoPlayerLoaded !== true) { |
328 | this.playerElement = this.elementRef.nativeElement.querySelector('#video-element') | 333 | this.playerElement = this.elementRef.nativeElement.querySelector('#video-element') |
329 | 334 | ||
330 | // If autoplay is true, we don't really need a poster | 335 | // If autoplay is true, we don't really need a poster |
331 | if (this.isAutoplay() === false) { | 336 | if (this.isAutoplay() === false) { |
332 | this.playerElement.poster = this.video.previewUrl | 337 | this.playerElement.poster = this.video.previewUrl |
333 | } | 338 | } |
334 | 339 | ||
335 | const videojsOptions = { | 340 | const videojsOptions = { |
336 | controls: true, | 341 | controls: true, |
337 | autoplay: this.isAutoplay(), | 342 | autoplay: this.isAutoplay(), |
338 | plugins: { | 343 | plugins: { |
339 | peertube: { | 344 | peertube: { |
340 | videoFiles: this.video.files, | 345 | videoFiles: this.video.files, |
341 | playerElement: this.playerElement, | 346 | playerElement: this.playerElement, |
342 | peerTubeLink: false, | 347 | peerTubeLink: false, |
343 | videoViewUrl: this.videoService.getVideoViewUrl(this.video.uuid), | 348 | videoViewUrl: this.videoService.getVideoViewUrl(this.video.uuid), |
344 | videoDuration: this.video.duration | 349 | videoDuration: this.video.duration |
345 | }, | 350 | }, |
346 | hotkeys: { | 351 | hotkeys: { |
347 | enableVolumeScroll: false | 352 | enableVolumeScroll: false |
348 | } | ||
349 | } | ||
350 | } | 353 | } |
351 | |||
352 | this.videoPlayerLoaded = true | ||
353 | |||
354 | const self = this | ||
355 | this.zone.runOutsideAngular(() => { | ||
356 | videojs(this.playerElement, videojsOptions, function () { | ||
357 | self.player = this | ||
358 | this.on('customError', (event, data) => self.handleError(data.err)) | ||
359 | }) | ||
360 | }) | ||
361 | } else { | ||
362 | const videoViewUrl = this.videoService.getVideoViewUrl(this.video.uuid) | ||
363 | this.player.peertube().setVideoFiles(this.video.files, videoViewUrl, this.video.duration) | ||
364 | } | 354 | } |
355 | } | ||
365 | 356 | ||
366 | this.setVideoDescriptionHTML() | 357 | this.videoPlayerLoaded = true |
367 | this.setVideoLikesBarTooltipText() | ||
368 | 358 | ||
369 | this.setOpenGraphTags() | 359 | const self = this |
370 | this.checkUserRating() | 360 | this.zone.runOutsideAngular(() => { |
371 | } | 361 | videojs(this.playerElement, videojsOptions, function () { |
372 | ) | 362 | self.player = this |
363 | this.on('customError', (event, data) => self.handleError(data.err)) | ||
364 | }) | ||
365 | }) | ||
366 | } else { | ||
367 | const videoViewUrl = this.videoService.getVideoViewUrl(this.video.uuid) | ||
368 | this.player.peertube().setVideoFiles(this.video.files, videoViewUrl, this.video.duration) | ||
369 | } | ||
370 | |||
371 | this.setVideoDescriptionHTML() | ||
372 | this.setVideoLikesBarTooltipText() | ||
373 | |||
374 | this.setOpenGraphTags() | ||
375 | this.checkUserRating() | ||
373 | } | 376 | } |
374 | 377 | ||
375 | private setRating (nextRating) { | 378 | private setRating (nextRating) { |
@@ -411,8 +414,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
411 | 414 | ||
412 | this.video.likes += likesToIncrement | 415 | this.video.likes += likesToIncrement |
413 | this.video.dislikes += dislikesToIncrement | 416 | this.video.dislikes += dislikesToIncrement |
414 | this.video.buildLikeAndDislikePercents() | ||
415 | 417 | ||
418 | this.video.buildLikeAndDislikePercents() | ||
416 | this.setVideoLikesBarTooltipText() | 419 | this.setVideoLikesBarTooltipText() |
417 | } | 420 | } |
418 | 421 | ||
@@ -450,4 +453,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy { | |||
450 | // Be sure the autoPlay is set to false | 453 | // Be sure the autoPlay is set to false |
451 | return this.user.autoPlayVideo !== false | 454 | return this.user.autoPlayVideo !== false |
452 | } | 455 | } |
456 | |||
457 | private hasAlreadyAcceptedPrivacyConcern () { | ||
458 | return localStorage.getItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY) === 'true' | ||
459 | } | ||
460 | |||
461 | private acceptedPrivacyConcern () { | ||
462 | localStorage.setItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY, 'true') | ||
463 | } | ||
453 | } | 464 | } |