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