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