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