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 { MarkdownService } from '../shared'
  14 import { VideoDownloadComponent } from './video-download.component'
  15 import { VideoReportComponent } from './video-report.component'
  16 import { VideoShareComponent } from './video-share.component'
  17 import { VideoDetails } from '../../shared/video/video-details.model'
  18
  19 @Component({
  20   selector: 'my-video-watch',
  21   templateUrl: './video-watch.component.html',
  22   styleUrls: [ './video-watch.component.scss' ]
  23 })
  24 export class VideoWatchComponent implements OnInit, OnDestroy {
  25   @ViewChild('videoDownloadModal') videoDownloadModal: VideoDownloadComponent
  26   @ViewChild('videoShareModal') videoShareModal: VideoShareComponent
  27   @ViewChild('videoReportModal') videoReportModal: VideoReportComponent
  28
  29   error = false
  30   loading = false
  31   player: videojs.Player
  32   playerElement: HTMLMediaElement
  33   userRating: UserVideoRateType = null
  34   video: VideoDetails = null
  35   videoPlayerLoaded = false
  36   videoNotFound = false
  37   descriptionLoading = false
  38
  39   completeDescriptionShown = false
  40   completeVideoDescription: string
  41   shortVideoDescription: string
  42   videoHTMLDescription = ''
  43
  44   private paramsSub: Subscription
  45
  46   constructor (
  47     private elementRef: ElementRef,
  48     private route: ActivatedRoute,
  49     private router: Router,
  50     private videoService: VideoService,
  51     private videoBlacklistService: VideoBlacklistService,
  52     private confirmService: ConfirmService,
  53     private metaService: MetaService,
  54     private authService: AuthService,
  55     private notificationsService: NotificationsService,
  56     private markdownService: MarkdownService
  57   ) {}
  58
  59   ngOnInit () {
  60     this.paramsSub = this.route.params.subscribe(routeParams => {
  61       let uuid = routeParams['uuid']
  62       this.videoService.getVideo(uuid).subscribe(
  63         video => this.onVideoFetched(video),
  64
  65         error => {
  66           this.videoNotFound = true
  67           console.error(error)
  68         }
  69       )
  70     })
  71   }
  72
  73   ngOnDestroy () {
  74     // Remove player if it exists
  75     if (this.videoPlayerLoaded === true) {
  76       videojs(this.playerElement).dispose()
  77     }
  78
  79     // Unsubscribe subscriptions
  80     this.paramsSub.unsubscribe()
  81   }
  82
  83   setLike () {
  84     if (this.isUserLoggedIn() === false) return
  85     // Already liked this video
  86     if (this.userRating === 'like') return
  87
  88     this.videoService.setVideoLike(this.video.id)
  89                      .subscribe(
  90                       () => {
  91                         // Update the video like attribute
  92                         this.updateVideoRating(this.userRating, 'like')
  93                         this.userRating = 'like'
  94                       },
  95
  96                       err => this.notificationsService.error('Error', err.message)
  97                      )
  98   }
  99
 100   setDislike () {
 101     if (this.isUserLoggedIn() === false) return
 102     // Already disliked this video
 103     if (this.userRating === 'dislike') return
 104
 105     this.videoService.setVideoDislike(this.video.id)
 106                      .subscribe(
 107                       () => {
 108                         // Update the video dislike attribute
 109                         this.updateVideoRating(this.userRating, 'dislike')
 110                         this.userRating = 'dislike'
 111                       },
 112
 113                       err => this.notificationsService.error('Error', err.message)
 114                      )
 115   }
 116
 117   removeVideo (event: Event) {
 118     event.preventDefault()
 119
 120     this.confirmService.confirm('Do you really want to delete this video?', 'Delete').subscribe(
 121       res => {
 122         if (res === false) return
 123
 124         this.videoService.removeVideo(this.video.id)
 125                          .subscribe(
 126                            status => {
 127                              this.notificationsService.success('Success', `Video ${this.video.name} deleted.`)
 128                              // Go back to the video-list.
 129                              this.router.navigate(['/videos/list'])
 130                            },
 131
 132                            error => this.notificationsService.error('Error', error.text)
 133                           )
 134       }
 135     )
 136   }
 137
 138   blacklistVideo (event: Event) {
 139     event.preventDefault()
 140
 141     this.confirmService.confirm('Do you really want to blacklist this video ?', 'Blacklist').subscribe(
 142       res => {
 143         if (res === false) return
 144
 145         this.videoBlacklistService.blacklistVideo(this.video.id)
 146                                   .subscribe(
 147                                     status => {
 148                                       this.notificationsService.success('Success', `Video ${this.video.name} had been blacklisted.`)
 149                                       this.router.navigate(['/videos/list'])
 150                                     },
 151
 152                                     error => this.notificationsService.error('Error', error.text)
 153                                   )
 154       }
 155     )
 156   }
 157
 158   showMoreDescription () {
 159     if (this.completeVideoDescription === undefined) {
 160       return this.loadCompleteDescription()
 161     }
 162
 163     this.updateVideoDescription(this.completeVideoDescription)
 164     this.completeDescriptionShown = true
 165   }
 166
 167   showLessDescription () {
 168
 169     this.updateVideoDescription(this.shortVideoDescription)
 170     this.completeDescriptionShown = false
 171   }
 172
 173   loadCompleteDescription () {
 174     this.descriptionLoading = true
 175
 176     this.videoService.loadCompleteDescription(this.video.descriptionPath)
 177       .subscribe(
 178         description => {
 179           this.completeDescriptionShown = true
 180           this.descriptionLoading = false
 181
 182           this.shortVideoDescription = this.video.description
 183           this.completeVideoDescription = description
 184
 185           this.updateVideoDescription(this.completeVideoDescription)
 186         },
 187
 188         error => {
 189           this.descriptionLoading = false
 190           this.notificationsService.error('Error', error.text)
 191         }
 192       )
 193   }
 194
 195   showReportModal (event: Event) {
 196     event.preventDefault()
 197     this.videoReportModal.show()
 198   }
 199
 200   showShareModal () {
 201     this.videoShareModal.show()
 202   }
 203
 204   showDownloadModal (event: Event) {
 205     event.preventDefault()
 206     this.videoDownloadModal.show()
 207   }
 208
 209   isUserLoggedIn () {
 210     return this.authService.isLoggedIn()
 211   }
 212
 213   canUserUpdateVideo () {
 214     return this.video.isUpdatableBy(this.authService.getUser())
 215   }
 216
 217   isVideoRemovable () {
 218     return this.video.isRemovableBy(this.authService.getUser())
 219   }
 220
 221   isVideoBlacklistable () {
 222     return this.video.isBlackistableBy(this.authService.getUser())
 223   }
 224
 225   private updateVideoDescription (description: string) {
 226     this.video.description = description
 227     this.setVideoDescriptionHTML()
 228   }
 229
 230   private setVideoDescriptionHTML () {
 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         this.playerElement = this.elementRef.nativeElement.querySelector('#video-element')
 284
 285         const videojsOptions = {
 286           controls: true,
 287           autoplay: true,
 288           plugins: {
 289             peertube: {
 290               videoFiles: this.video.files,
 291               playerElement: this.playerElement,
 292               autoplay: true,
 293               peerTubeLink: false
 294             }
 295           }
 296         }
 297
 298         this.videoPlayerLoaded = true
 299
 300         const self = this
 301         videojs(this.playerElement, videojsOptions, function () {
 302           self.player = this
 303           this.on('customError', (event, data) => {
 304             self.handleError(data.err)
 305           })
 306         })
 307
 308         this.setVideoDescriptionHTML()
 309
 310         this.setOpenGraphTags()
 311         this.checkUserRating()
 312
 313         this.prepareViewAdd()
 314       }
 315     )
 316   }
 317
 318   private updateVideoRating (oldRating: UserVideoRateType, newRating: VideoRateType) {
 319     let likesToIncrement = 0
 320     let dislikesToIncrement = 0
 321
 322     if (oldRating) {
 323       if (oldRating === 'like') likesToIncrement--
 324       if (oldRating === 'dislike') dislikesToIncrement--
 325     }
 326
 327     if (newRating === 'like') likesToIncrement++
 328     if (newRating === 'dislike') dislikesToIncrement++
 329
 330     this.video.likes += likesToIncrement
 331     this.video.dislikes += dislikesToIncrement
 332   }
 333
 334   private setOpenGraphTags () {
 335     this.metaService.setTitle(this.video.name)
 336
 337     this.metaService.setTag('og:type', 'video')
 338
 339     this.metaService.setTag('og:title', this.video.name)
 340     this.metaService.setTag('name', this.video.name)
 341
 342     this.metaService.setTag('og:description', this.video.description)
 343     this.metaService.setTag('description', this.video.description)
 344
 345     this.metaService.setTag('og:image', this.video.previewPath)
 346
 347     this.metaService.setTag('og:duration', this.video.duration.toString())
 348
 349     this.metaService.setTag('og:site_name', 'PeerTube')
 350
 351     this.metaService.setTag('og:url', window.location.href)
 352     this.metaService.setTag('url', window.location.href)
 353   }
 354
 355   private prepareViewAdd () {
 356     // After 30 seconds (or 3/4 of the video), increment add a view
 357     let viewTimeoutSeconds = 30
 358     if (this.video.duration < viewTimeoutSeconds) viewTimeoutSeconds = (this.video.duration * 3) / 4
 359
 360     setTimeout(() => {
 361       this.videoService
 362         .viewVideo(this.video.uuid)
 363         .subscribe()
 364
 365     }, viewTimeoutSeconds * 1000)
 366   }
 367 }