client/src/app/videos/+video-watch/video-watch.component.ts

   1 import { catchError } from 'rxjs/operators'
   2 import { ChangeDetectorRef, Component, ElementRef, Inject, LOCALE_ID, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core'
   3 import { ActivatedRoute, Router } from '@angular/router'
   4 import { RedirectService } from '@app/core/routing/redirect.service'
   5 import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage'
   6 import { VideoSupportComponent } from '@app/videos/+video-watch/modal/video-support.component'
   7 import { MetaService } from '@ngx-meta/core'
   8 import { NotificationsService } from 'angular2-notifications'
   9 import { forkJoin, Subscription } from 'rxjs'
  10 // FIXME: something weird with our path definition in tsconfig and typings
  11 // @ts-ignore
  12 import videojs from 'video.js'
  13 import 'videojs-hotkeys'
  14 import { Hotkey, HotkeysService } from 'angular2-hotkeys'
  15 import * as WebTorrent from 'webtorrent'
  16 import { UserVideoRateType, VideoCaption, VideoPrivacy, VideoRateType, VideoState } from '../../../../../shared'
  17 import '../../../assets/player/peertube-videojs-plugin'
  18 import { AuthService, ConfirmService } from '../../core'
  19 import { RestExtractor, VideoBlacklistService } from '../../shared'
  20 import { VideoDetails } from '../../shared/video/video-details.model'
  21 import { VideoService } from '../../shared/video/video.service'
  22 import { MarkdownService } from '../shared'
  23 import { VideoDownloadComponent } from './modal/video-download.component'
  24 import { VideoReportComponent } from './modal/video-report.component'
  25 import { VideoShareComponent } from './modal/video-share.component'
  26 import { VideoBlacklistComponent } from './modal/video-blacklist.component'
  27 import { SubscribeButtonComponent } from '@app/shared/user-subscription/subscribe-button.component'
  28 import { addContextMenu, getVideojsOptions, loadLocaleInVideoJS } from '../../../assets/player/peertube-player'
  29 import { ServerService } from '@app/core'
  30 import { I18n } from '@ngx-translate/i18n-polyfill'
  31 import { environment } from '../../../environments/environment'
  32 import { getDevLocale, isOnDevLocale } from '@app/shared/i18n/i18n-utils'
  33 import { VideoCaptionService } from '@app/shared/video-caption'
  34
  35 @Component({
  36   selector: 'my-video-watch',
  37   templateUrl: './video-watch.component.html',
  38   styleUrls: [ './video-watch.component.scss' ]
  39 })
  40 export class VideoWatchComponent implements OnInit, OnDestroy {
  41   private static LOCAL_STORAGE_PRIVACY_CONCERN_KEY = 'video-watch-privacy-concern'
  42
  43   @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent
  44   @ViewChild('videoShareModal') videoShareModal: VideoShareComponent
  45   @ViewChild('videoReportModal') videoReportModal: VideoReportComponent
  46   @ViewChild('videoSupportModal') videoSupportModal: VideoSupportComponent
  47   @ViewChild('videoBlacklistModal') videoBlacklistModal: VideoBlacklistComponent
  48   @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent
  49
  50   player: videojs.Player
  51   playerElement: HTMLVideoElement
  52   userRating: UserVideoRateType = null
  53   video: VideoDetails = null
  54   descriptionLoading = false
  55
  56   completeDescriptionShown = false
  57   completeVideoDescription: string
  58   shortVideoDescription: string
  59   videoHTMLDescription = ''
  60   likesBarTooltipText = ''
  61   hasAlreadyAcceptedPrivacyConcern = false
  62   remoteServerDown = false
  63   hotkeys: Hotkey[]
  64
  65   private videojsLocaleLoaded = false
  66   private paramsSub: Subscription
  67
  68   constructor (
  69     private elementRef: ElementRef,
  70     private changeDetector: ChangeDetectorRef,
  71     private route: ActivatedRoute,
  72     private router: Router,
  73     private videoService: VideoService,
  74     private videoBlacklistService: VideoBlacklistService,
  75     private confirmService: ConfirmService,
  76     private metaService: MetaService,
  77     private authService: AuthService,
  78     private serverService: ServerService,
  79     private restExtractor: RestExtractor,
  80     private notificationsService: NotificationsService,
  81     private markdownService: MarkdownService,
  82     private zone: NgZone,
  83     private redirectService: RedirectService,
  84     private videoCaptionService: VideoCaptionService,
  85     private i18n: I18n,
  86     private hotkeysService: HotkeysService,
  87     @Inject(LOCALE_ID) private localeId: string
  88   ) {}
  89
  90   get user () {
  91     return this.authService.getUser()
  92   }
  93
  94   ngOnInit () {
  95     if (
  96       WebTorrent.WEBRTC_SUPPORT === false ||
  97       peertubeLocalStorage.getItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY) === 'true'
  98     ) {
  99       this.hasAlreadyAcceptedPrivacyConcern = true
 100     }
 101
 102     this.paramsSub = this.route.params.subscribe(routeParams => {
 103       const uuid = routeParams[ 'uuid' ]
 104
 105       // Video did not change
 106       if (this.video && this.video.uuid === uuid) return
 107
 108       if (this.player) this.player.pause()
 109
 110       // Video did change
 111       forkJoin(
 112         this.videoService.getVideo(uuid),
 113         this.videoCaptionService.listCaptions(uuid)
 114       )
 115         .pipe(
 116           // If 401, the video is private or blacklisted so redirect to 404
 117           catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 401, 403, 404 ]))
 118         )
 119         .subscribe(([ video, captionsResult ]) => {
 120           const startTime = this.route.snapshot.queryParams.start
 121           this.onVideoFetched(video, captionsResult.data, startTime)
 122               .catch(err => this.handleError(err))
 123         })
 124     })
 125
 126     this.hotkeys = [
 127       new Hotkey('shift+l', (event: KeyboardEvent): boolean => {
 128         this.setLike()
 129         return false
 130       }, undefined, this.i18n('Like the video')),
 131       new Hotkey('shift+d', (event: KeyboardEvent): boolean => {
 132         this.setDislike()
 133         return false
 134       }, undefined, this.i18n('Dislike the video')),
 135       new Hotkey('shift+s', (event: KeyboardEvent): boolean => {
 136         this.subscribeButton.subscribed ?
 137           this.subscribeButton.unsubscribe() :
 138           this.subscribeButton.subscribe()
 139         return false
 140       }, undefined, this.i18n('Subscribe to the account'))
 141     ]
 142     if (this.isUserLoggedIn()) this.hotkeysService.add(this.hotkeys)
 143   }
 144
 145   ngOnDestroy () {
 146     this.flushPlayer()
 147
 148     // Unsubscribe subscriptions
 149     this.paramsSub.unsubscribe()
 150
 151     // Unbind hotkeys
 152     if (this.isUserLoggedIn()) this.hotkeysService.remove(this.hotkeys)
 153   }
 154
 155   setLike () {
 156     if (this.isUserLoggedIn() === false) return
 157     if (this.userRating === 'like') {
 158       // Already liked this video
 159       this.setRating('none')
 160     } else {
 161       this.setRating('like')
 162     }
 163   }
 164
 165   setDislike () {
 166     if (this.isUserLoggedIn() === false) return
 167     if (this.userRating === 'dislike') {
 168       // Already disliked this video
 169       this.setRating('none')
 170     } else {
 171       this.setRating('dislike')
 172     }
 173   }
 174
 175   showMoreDescription () {
 176     if (this.completeVideoDescription === undefined) {
 177       return this.loadCompleteDescription()
 178     }
 179
 180     this.updateVideoDescription(this.completeVideoDescription)
 181     this.completeDescriptionShown = true
 182   }
 183
 184   showLessDescription () {
 185     this.updateVideoDescription(this.shortVideoDescription)
 186     this.completeDescriptionShown = false
 187   }
 188
 189   loadCompleteDescription () {
 190     this.descriptionLoading = true
 191
 192     this.videoService.loadCompleteDescription(this.video.descriptionPath)
 193         .subscribe(
 194           description => {
 195             this.completeDescriptionShown = true
 196             this.descriptionLoading = false
 197
 198             this.shortVideoDescription = this.video.description
 199             this.completeVideoDescription = description
 200
 201             this.updateVideoDescription(this.completeVideoDescription)
 202           },
 203
 204           error => {
 205             this.descriptionLoading = false
 206             this.notificationsService.error(this.i18n('Error'), error.message)
 207           }
 208         )
 209   }
 210
 211   showReportModal (event: Event) {
 212     event.preventDefault()
 213     this.videoReportModal.show()
 214   }
 215
 216   showSupportModal () {
 217     this.videoSupportModal.show()
 218   }
 219
 220   showShareModal () {
 221     const currentTime = this.player ? this.player.currentTime() : undefined
 222
 223     this.videoShareModal.show(currentTime)
 224   }
 225
 226   showDownloadModal (event: Event) {
 227     event.preventDefault()
 228     this.videoDownloadModal.show()
 229   }
 230
 231   showBlacklistModal (event: Event) {
 232     event.preventDefault()
 233     this.videoBlacklistModal.show()
 234   }
 235
 236   async unblacklistVideo (event: Event) {
 237     event.preventDefault()
 238
 239     const confirmMessage = this.i18n(
 240       'Do you really want to remove this video from the blacklist? It will be available again in the videos list.'
 241     )
 242
 243     const res = await this.confirmService.confirm(confirmMessage, this.i18n('Unblacklist'))
 244     if (res === false) return
 245
 246     this.videoBlacklistService.removeVideoFromBlacklist(this.video.id).subscribe(
 247       () => {
 248         this.notificationsService.success(
 249           this.i18n('Success'),
 250           this.i18n('Video {{name}} removed from the blacklist.', { name: this.video.name })
 251         )
 252
 253         this.video.blacklisted = false
 254         this.video.blacklistedReason = null
 255       },
 256
 257       err => this.notificationsService.error(this.i18n('Error'), err.message)
 258     )
 259   }
 260
 261   isUserLoggedIn () {
 262     return this.authService.isLoggedIn()
 263   }
 264
 265   isVideoUpdatable () {
 266     return this.video.isUpdatableBy(this.authService.getUser())
 267   }
 268
 269   isVideoBlacklistable () {
 270     return this.video.isBlackistableBy(this.user)
 271   }
 272
 273   isVideoUnblacklistable () {
 274     return this.video.isUnblacklistableBy(this.user)
 275   }
 276
 277   getVideoTags () {
 278     if (!this.video || Array.isArray(this.video.tags) === false) return []
 279
 280     return this.video.tags
 281   }
 282
 283   isVideoRemovable () {
 284     return this.video.isRemovableBy(this.authService.getUser())
 285   }
 286
 287   async removeVideo (event: Event) {
 288     event.preventDefault()
 289
 290     const res = await this.confirmService.confirm(this.i18n('Do you really want to delete this video?'), this.i18n('Delete'))
 291     if (res === false) return
 292
 293     this.videoService.removeVideo(this.video.id)
 294         .subscribe(
 295           status => {
 296             this.notificationsService.success(
 297               this.i18n('Success'),
 298               this.i18n('Video {{videoName}} deleted.', { videoName: this.video.name })
 299             )
 300
 301             // Go back to the video-list.
 302             this.redirectService.redirectToHomepage()
 303           },
 304
 305           error => this.notificationsService.error(this.i18n('Error'), error.message)
 306         )
 307   }
 308
 309   acceptedPrivacyConcern () {
 310     peertubeLocalStorage.setItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY, 'true')
 311     this.hasAlreadyAcceptedPrivacyConcern = true
 312   }
 313
 314   isVideoToTranscode () {
 315     return this.video && this.video.state.id === VideoState.TO_TRANSCODE
 316   }
 317
 318   isVideoToImport () {
 319     return this.video && this.video.state.id === VideoState.TO_IMPORT
 320   }
 321
 322   hasVideoScheduledPublication () {
 323     return this.video && this.video.scheduledUpdate !== undefined
 324   }
 325
 326   private updateVideoDescription (description: string) {
 327     this.video.description = description
 328     this.setVideoDescriptionHTML()
 329   }
 330
 331   private setVideoDescriptionHTML () {
 332     this.videoHTMLDescription = this.markdownService.textMarkdownToHTML(this.video.description)
 333   }
 334
 335   private setVideoLikesBarTooltipText () {
 336     this.likesBarTooltipText = this.i18n('{{likesNumber}} likes / {{dislikesNumber}} dislikes', {
 337       likesNumber: this.video.likes,
 338       dislikesNumber: this.video.dislikes
 339     })
 340   }
 341
 342   private handleError (err: any) {
 343     const errorMessage: string = typeof err === 'string' ? err : err.message
 344     if (!errorMessage) return
 345
 346     // Display a message in the video player instead of a notification
 347     if (errorMessage.indexOf('from xs param') !== -1) {
 348       this.flushPlayer()
 349       this.remoteServerDown = true
 350       this.changeDetector.detectChanges()
 351
 352       return
 353     }
 354
 355     this.notificationsService.error(this.i18n('Error'), errorMessage)
 356   }
 357
 358   private checkUserRating () {
 359     // Unlogged users do not have ratings
 360     if (this.isUserLoggedIn() === false) return
 361
 362     this.videoService.getUserVideoRating(this.video.id)
 363         .subscribe(
 364           ratingObject => {
 365             if (ratingObject) {
 366               this.userRating = ratingObject.rating
 367             }
 368           },
 369
 370           err => this.notificationsService.error(this.i18n('Error'), err.message)
 371         )
 372   }
 373
 374   private async onVideoFetched (video: VideoDetails, videoCaptions: VideoCaption[], startTimeFromUrl: number) {
 375     this.video = video
 376
 377     // Re init attributes
 378     this.descriptionLoading = false
 379     this.completeDescriptionShown = false
 380     this.remoteServerDown = false
 381
 382     let startTime = startTimeFromUrl || (this.video.userHistory ? this.video.userHistory.currentTime : 0)
 383     // Don't start the video if we are at the end
 384     if (this.video.duration - startTime <= 1) startTime = 0
 385
 386     if (this.video.isVideoNSFWForUser(this.user, this.serverService.getConfig())) {
 387       const res = await this.confirmService.confirm(
 388         this.i18n('This video contains mature or explicit content. Are you sure you want to watch it?'),
 389         this.i18n('Mature or explicit content')
 390       )
 391       if (res === false) return this.redirectService.redirectToHomepage()
 392     }
 393
 394     // Flush old player if needed
 395     this.flushPlayer()
 396
 397     // Build video element, because videojs remove it on dispose
 398     const playerElementWrapper = this.elementRef.nativeElement.querySelector('#video-element-wrapper')
 399     this.playerElement = document.createElement('video')
 400     this.playerElement.className = 'video-js vjs-peertube-skin'
 401     this.playerElement.setAttribute('playsinline', 'true')
 402     playerElementWrapper.appendChild(this.playerElement)
 403
 404     const playerCaptions = videoCaptions.map(c => ({
 405       label: c.language.label,
 406       language: c.language.id,
 407       src: environment.apiUrl + c.captionPath
 408     }))
 409
 410     const videojsOptions = getVideojsOptions({
 411       autoplay: this.isAutoplay(),
 412       inactivityTimeout: 2500,
 413       videoFiles: this.video.files,
 414       videoCaptions: playerCaptions,
 415       playerElement: this.playerElement,
 416       videoViewUrl: this.video.privacy.id !== VideoPrivacy.PRIVATE ? this.videoService.getVideoViewUrl(this.video.uuid) : null,
 417       videoDuration: this.video.duration,
 418       enableHotkeys: true,
 419       peertubeLink: false,
 420       poster: this.video.previewUrl,
 421       startTime,
 422       theaterMode: true,
 423       language: this.localeId,
 424
 425       userWatching: this.user ? {
 426         url: this.videoService.getUserWatchingVideoUrl(this.video.uuid),
 427         authorizationHeader: this.authService.getRequestHeaderValue()
 428       } : undefined
 429     })
 430
 431     if (this.videojsLocaleLoaded === false) {
 432       await loadLocaleInVideoJS(environment.apiUrl, videojs, isOnDevLocale() ? getDevLocale() : this.localeId)
 433       this.videojsLocaleLoaded = true
 434     }
 435
 436     const self = this
 437     this.zone.runOutsideAngular(async () => {
 438       videojs(this.playerElement, videojsOptions, function (this: videojs.Player) {
 439         self.player = this
 440         this.on('customError', ({ err }: { err: any }) => self.handleError(err))
 441
 442         addContextMenu(self.player, self.video.embedUrl)
 443       })
 444     })
 445
 446     this.setVideoDescriptionHTML()
 447     this.setVideoLikesBarTooltipText()
 448
 449     this.setOpenGraphTags()
 450     this.checkUserRating()
 451   }
 452
 453   private setRating (nextRating: UserVideoRateType) {
 454     let method
 455     switch (nextRating) {
 456       case 'like':
 457         method = this.videoService.setVideoLike
 458         break
 459       case 'dislike':
 460         method = this.videoService.setVideoDislike
 461         break
 462       case 'none':
 463         method = this.videoService.unsetVideoLike
 464         break
 465     }
 466
 467     method.call(this.videoService, this.video.id)
 468           .subscribe(
 469             () => {
 470               // Update the video like attribute
 471               this.updateVideoRating(this.userRating, nextRating)
 472               this.userRating = nextRating
 473             },
 474
 475             (err: { message: string }) => this.notificationsService.error(this.i18n('Error'), err.message)
 476           )
 477   }
 478
 479   private updateVideoRating (oldRating: UserVideoRateType, newRating: UserVideoRateType) {
 480     let likesToIncrement = 0
 481     let dislikesToIncrement = 0
 482
 483     if (oldRating) {
 484       if (oldRating === 'like') likesToIncrement--
 485       if (oldRating === 'dislike') dislikesToIncrement--
 486     }
 487
 488     if (newRating === 'like') likesToIncrement++
 489     if (newRating === 'dislike') dislikesToIncrement++
 490
 491     this.video.likes += likesToIncrement
 492     this.video.dislikes += dislikesToIncrement
 493
 494     this.video.buildLikeAndDislikePercents()
 495     this.setVideoLikesBarTooltipText()
 496   }
 497
 498   private setOpenGraphTags () {
 499     this.metaService.setTitle(this.video.name)
 500
 501     this.metaService.setTag('og:type', 'video')
 502
 503     this.metaService.setTag('og:title', this.video.name)
 504     this.metaService.setTag('name', this.video.name)
 505
 506     this.metaService.setTag('og:description', this.video.description)
 507     this.metaService.setTag('description', this.video.description)
 508
 509     this.metaService.setTag('og:image', this.video.previewPath)
 510
 511     this.metaService.setTag('og:duration', this.video.duration.toString())
 512
 513     this.metaService.setTag('og:site_name', 'PeerTube')
 514
 515     this.metaService.setTag('og:url', window.location.href)
 516     this.metaService.setTag('url', window.location.href)
 517   }
 518
 519   private isAutoplay () {
 520     // We'll jump to the thread id, so do not play the video
 521     if (this.route.snapshot.params['threadId']) return false
 522
 523     // Otherwise true by default
 524     if (!this.user) return true
 525
 526     // Be sure the autoPlay is set to false
 527     return this.user.autoPlayVideo !== false
 528   }
 529
 530   private flushPlayer () {
 531     // Remove player if it exists
 532     if (this.player) {
 533       this.player.dispose()
 534       this.player = undefined
 535     }
 536   }
 537 }