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

   1 import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core'
   2 import { ActivatedRoute, Router } from '@angular/router'
   3 import { Observable } from 'rxjs/Observable'
   4 import { Subscription } from 'rxjs/Subscription'
   5
   6 import videojs from 'video.js'
   7 import '../../../assets/player/peertube-videojs-plugin'
   8
   9 import { MetaService } from '@ngx-meta/core'
  10 import { NotificationsService } from 'angular2-notifications'
  11
  12 import { AuthService, ConfirmService } from '../../core'
  13 import { VideoDownloadComponent } from './video-download.component'
  14 import { VideoShareComponent } from './video-share.component'
  15 import { VideoReportComponent } from './video-report.component'
  16 import { VideoDetails, VideoService, MarkdownService } from '../shared'
  17 import { VideoBlacklistService } from '../../shared'
  18 import { UserVideoRateType, VideoRateType } from '../../../../../shared'
  19 import { BehaviorSubject } from 'rxjs/BehaviorSubject'
  20
  21 @Component({
  22   selector: 'my-video-watch',
  23   templateUrl: './video-watch.component.html',
  24   styleUrls: [ './video-watch.component.scss' ]
  25 })
  26 export class VideoWatchComponent implements OnInit, OnDestroy {
  27   @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent
  28   @ViewChild('videoShareModal') videoShareModal: VideoShareComponent
  29   @ViewChild('videoReportModal') videoReportModal: VideoReportComponent
  30
  31   downloadSpeed: number
  32   error = false
  33   loading = false
  34   numPeers: number
  35   player: videojs.Player
  36   playerElement: HTMLMediaElement
  37   uploadSpeed: number
  38   userRating: UserVideoRateType = null
  39   video: VideoDetails = null
  40   videoPlayerLoaded = false
  41   videoNotFound = false
  42   descriptionLoading = false
  43
  44   completeDescriptionShown = false
  45   completeVideoDescription: string
  46   shortVideoDescription: string
  47   videoHTMLDescription = ''
  48
  49   private paramsSub: Subscription
  50
  51   constructor (
  52     private elementRef: ElementRef,
  53     private route: ActivatedRoute,
  54     private router: Router,
  55     private videoService: VideoService,
  56     private videoBlacklistService: VideoBlacklistService,
  57     private confirmService: ConfirmService,
  58     private metaService: MetaService,
  59     private authService: AuthService,
  60     private notificationsService: NotificationsService,
  61     private markdownService: MarkdownService
  62   ) {}
  63
  64   ngOnInit () {
  65     this.paramsSub = this.route.params.subscribe(routeParams => {
  66       let uuid = routeParams['uuid']
  67       this.videoService.getVideo(uuid).subscribe(
  68         video => this.onVideoFetched(video),
  69
  70         error => {
  71           this.videoNotFound = true
  72           console.error(error)
  73         }
  74       )
  75     })
  76   }
  77
  78   ngOnDestroy () {
  79     // Remove player if it exists
  80     if (this.videoPlayerLoaded === true) {
  81       videojs(this.playerElement).dispose()
  82     }
  83
  84     // Unsubscribe subscriptions
  85     this.paramsSub.unsubscribe()
  86   }
  87
  88   setLike () {
  89     if (this.isUserLoggedIn() === false) return
  90     // Already liked this video
  91     if (this.userRating === 'like') return
  92
  93     this.videoService.setVideoLike(this.video.id)
  94                      .subscribe(
  95                       () => {
  96                         // Update the video like attribute
  97                         this.updateVideoRating(this.userRating, 'like')
  98                         this.userRating = 'like'
  99                       },
 100
 101                       err => this.notificationsService.error('Error', err.message)
 102                      )
 103   }
 104
 105   setDislike () {
 106     if (this.isUserLoggedIn() === false) return
 107     // Already disliked this video
 108     if (this.userRating === 'dislike') return
 109
 110     this.videoService.setVideoDislike(this.video.id)
 111                      .subscribe(
 112                       () => {
 113                         // Update the video dislike attribute
 114                         this.updateVideoRating(this.userRating, 'dislike')
 115                         this.userRating = 'dislike'
 116                       },
 117
 118                       err => this.notificationsService.error('Error', err.message)
 119                      )
 120   }
 121
 122   removeVideo (event: Event) {
 123     event.preventDefault()
 124
 125     this.confirmService.confirm('Do you really want to delete this video?', 'Delete').subscribe(
 126       res => {
 127         if (res === false) return
 128
 129         this.videoService.removeVideo(this.video.id)
 130                          .subscribe(
 131                            status => {
 132                              this.notificationsService.success('Success', `Video ${this.video.name} deleted.`)
 133                              // Go back to the video-list.
 134                              this.router.navigate(['/videos/list'])
 135                            },
 136
 137                            error => this.notificationsService.error('Error', error.text)
 138                           )
 139       }
 140     )
 141   }
 142
 143   blacklistVideo (event: Event) {
 144     event.preventDefault()
 145
 146     this.confirmService.confirm('Do you really want to blacklist this video ?', 'Blacklist').subscribe(
 147       res => {
 148         if (res === false) return
 149
 150         this.videoBlacklistService.blacklistVideo(this.video.id)
 151                                   .subscribe(
 152                                     status => {
 153                                       this.notificationsService.success('Success', `Video ${this.video.name} had been blacklisted.`)
 154                                       this.router.navigate(['/videos/list'])
 155                                     },
 156
 157                                     error => this.notificationsService.error('Error', error.text)
 158                                   )
 159       }
 160     )
 161   }
 162
 163   showMoreDescription () {
 164     if (this.completeVideoDescription === undefined) {
 165       return this.loadCompleteDescription()
 166     }
 167
 168     this.updateVideoDescription(this.completeVideoDescription)
 169     this.completeDescriptionShown = true
 170   }
 171
 172   showLessDescription () {
 173
 174     this.updateVideoDescription(this.shortVideoDescription)
 175     this.completeDescriptionShown = false
 176   }
 177
 178   loadCompleteDescription () {
 179     this.descriptionLoading = true
 180
 181     this.videoService.loadCompleteDescription(this.video.descriptionPath)
 182       .subscribe(
 183         description => {
 184           this.completeDescriptionShown = true
 185           this.descriptionLoading = false
 186
 187           this.shortVideoDescription = this.video.description
 188           this.completeVideoDescription = description
 189
 190           this.updateVideoDescription(this.completeVideoDescription)
 191         },
 192
 193         error => {
 194           this.descriptionLoading = false
 195           this.notificationsService.error('Error', error.text)
 196         }
 197       )
 198   }
 199
 200   showReportModal (event: Event) {
 201     event.preventDefault()
 202     this.videoReportModal.show()
 203   }
 204
 205   showShareModal () {
 206     this.videoShareModal.show()
 207   }
 208
 209   showDownloadModal (event: Event) {
 210     event.preventDefault()
 211     this.videoDownloadModal.show()
 212   }
 213
 214   isUserLoggedIn () {
 215     return this.authService.isLoggedIn()
 216   }
 217
 218   canUserUpdateVideo () {
 219     return this.video.isUpdatableBy(this.authService.getUser())
 220   }
 221
 222   isVideoRemovable () {
 223     return this.video.isRemovableBy(this.authService.getUser())
 224   }
 225
 226   isVideoBlacklistable () {
 227     return this.video.isBlackistableBy(this.authService.getUser())
 228   }
 229
 230   private updateVideoDescription (description: string) {
 231     this.video.description = description
 232     this.setVideoDescriptionHTML()
 233   }
 234
 235   private setVideoDescriptionHTML () {
 236     this.videoHTMLDescription = this.markdownService.markdownToHTML(this.video.description)
 237   }
 238
 239   private handleError (err: any) {
 240     const errorMessage: string = typeof err === 'string' ? err : err.message
 241     let message = ''
 242
 243     if (errorMessage.indexOf('http error') !== -1) {
 244       message = 'Cannot fetch video from server, maybe down.'
 245     } else {
 246       message = errorMessage
 247     }
 248
 249     this.notificationsService.error('Error', message)
 250   }
 251
 252   private checkUserRating () {
 253     // Unlogged users do not have ratings
 254     if (this.isUserLoggedIn() === false) return
 255
 256     this.videoService.getUserVideoRating(this.video.id)
 257                      .subscribe(
 258                        ratingObject => {
 259                          if (ratingObject) {
 260                            this.userRating = ratingObject.rating
 261                          }
 262                        },
 263
 264                        err => this.notificationsService.error('Error', err.message)
 265                       )
 266   }
 267
 268   private onVideoFetched (video: VideoDetails) {
 269     this.video = video
 270
 271     let observable
 272     if (this.video.isVideoNSFWForUser(this.authService.getUser())) {
 273       observable = this.confirmService.confirm(
 274         'This video contains mature or explicit content. Are you sure you want to watch it?',
 275         'Mature or explicit content'
 276       )
 277     } else {
 278       observable = Observable.of(true)
 279     }
 280
 281     observable.subscribe(
 282       res => {
 283         if (res === false) {
 284
 285           return this.router.navigate([ '/videos/list' ])
 286         }
 287
 288         this.playerElement = this.elementRef.nativeElement.querySelector('#video-container')
 289
 290         const videojsOptions = {
 291           controls: true,
 292           autoplay: true,
 293           plugins: {
 294             peertube: {
 295               videoFiles: this.video.files,
 296               playerElement: this.playerElement,
 297               autoplay: true,
 298               peerTubeLink: false
 299             }
 300           }
 301         }
 302
 303         this.videoPlayerLoaded = true
 304
 305         const self = this
 306         videojs(this.playerElement, videojsOptions, function () {
 307           self.player = this
 308           this.on('customError', (event, data) => {
 309             self.handleError(data.err)
 310           })
 311
 312           this.on('torrentInfo', (event, data) => {
 313             self.downloadSpeed = data.downloadSpeed
 314             self.numPeers = data.numPeers
 315             self.uploadSpeed = data.uploadSpeed
 316           })
 317         })
 318
 319         this.setVideoDescriptionHTML()
 320
 321         this.setOpenGraphTags()
 322         this.checkUserRating()
 323       }
 324     )
 325   }
 326
 327   private updateVideoRating (oldRating: UserVideoRateType, newRating: VideoRateType) {
 328     let likesToIncrement = 0
 329     let dislikesToIncrement = 0
 330
 331     if (oldRating) {
 332       if (oldRating === 'like') likesToIncrement--
 333       if (oldRating === 'dislike') dislikesToIncrement--
 334     }
 335
 336     if (newRating === 'like') likesToIncrement++
 337     if (newRating === 'dislike') dislikesToIncrement++
 338
 339     this.video.likes += likesToIncrement
 340     this.video.dislikes += dislikesToIncrement
 341   }
 342
 343   private setOpenGraphTags () {
 344     this.metaService.setTitle(this.video.name)
 345
 346     this.metaService.setTag('og:type', 'video')
 347
 348     this.metaService.setTag('og:title', this.video.name)
 349     this.metaService.setTag('name', this.video.name)
 350
 351     this.metaService.setTag('og:description', this.video.description)
 352     this.metaService.setTag('description', this.video.description)
 353
 354     this.metaService.setTag('og:image', this.video.previewPath)
 355
 356     this.metaService.setTag('og:duration', this.video.duration.toString())
 357
 358     this.metaService.setTag('og:site_name', 'PeerTube')
 359
 360     this.metaService.setTag('og:url', window.location.href)
 361     this.metaService.setTag('url', window.location.href)
 362   }
 363 }