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