client/src/app/videos/+video-watch/video-watch.component.ts

   1 import { catchError } from 'rxjs/operators'
   2 import { ChangeDetectorRef, Component, ElementRef, Inject, LOCALE_ID, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core'
   3 import { ActivatedRoute, Router } from '@angular/router'
   4 import { RedirectService } from '@app/core/routing/redirect.service'
   5 import { peertubeLocalStorage } from '@app/shared/misc/peertube-local-storage'
   6 import { VideoSupportComponent } from '@app/videos/+video-watch/modal/video-support.component'
   7 import { MetaService } from '@ngx-meta/core'
   8 import { Notifier, ServerService } from '@app/core'
   9 import { forkJoin, Observable, Subscription } from 'rxjs'
  10 import { Hotkey, HotkeysService } from 'angular2-hotkeys'
  11 import { UserVideoRateType, VideoCaption, VideoPrivacy, VideoState } from '../../../../../shared'
  12 import { AuthService, ConfirmService } from '../../core'
  13 import { RestExtractor, VideoBlacklistService } from '../../shared'
  14 import { VideoDetails } from '../../shared/video/video-details.model'
  15 import { VideoService } from '../../shared/video/video.service'
  16 import { VideoShareComponent } from './modal/video-share.component'
  17 import { SubscribeButtonComponent } from '@app/shared/user-subscription/subscribe-button.component'
  18 import { I18n } from '@ngx-translate/i18n-polyfill'
  19 import { environment } from '../../../environments/environment'
  20 import { VideoCaptionService } from '@app/shared/video-caption'
  21 import { MarkdownService } from '@app/shared/renderer'
  22 import {
  23   CustomizationOptions,
  24   P2PMediaLoaderOptions,
  25   PeertubePlayerManager,
  26   PeertubePlayerManagerOptions,
  27   PlayerMode
  28 } from '../../../assets/player/peertube-player-manager'
  29 import { VideoPlaylist } from '@app/shared/video-playlist/video-playlist.model'
  30 import { VideoPlaylistService } from '@app/shared/video-playlist/video-playlist.service'
  31 import { Video } from '@app/shared/video/video.model'
  32 import { isWebRTCDisabled, timeToInt } from '../../../assets/player/utils'
  33 import { VideoWatchPlaylistComponent } from '@app/videos/+video-watch/video-watch-playlist.component'
  34 import { getStoredTheater } from '../../../assets/player/peertube-player-local-storage'
  35 import { PluginService } from '@app/core/plugins/plugin.service'
  36 import { HooksService } from '@app/core/plugins/hooks.service'
  37 import { PlatformLocation } from '@angular/common'
  38
  39 @Component({
  40   selector: 'my-video-watch',
  41   templateUrl: './video-watch.component.html',
  42   styleUrls: [ './video-watch.component.scss' ]
  43 })
  44 export class VideoWatchComponent implements OnInit, OnDestroy {
  45   private static LOCAL_STORAGE_PRIVACY_CONCERN_KEY = 'video-watch-privacy-concern'
  46
  47   @ViewChild('videoWatchPlaylist', { static: true }) videoWatchPlaylist: VideoWatchPlaylistComponent
  48   @ViewChild('videoShareModal', { static: false }) videoShareModal: VideoShareComponent
  49   @ViewChild('videoSupportModal', { static: false }) videoSupportModal: VideoSupportComponent
  50   @ViewChild('subscribeButton', { static: false }) subscribeButton: SubscribeButtonComponent
  51
  52   player: any
  53   playerElement: HTMLVideoElement
  54   theaterEnabled = false
  55   userRating: UserVideoRateType = null
  56   descriptionLoading = false
  57
  58   video: VideoDetails = null
  59   videoCaptions: VideoCaption[] = []
  60
  61   playlist: VideoPlaylist = null
  62
  63   completeDescriptionShown = false
  64   completeVideoDescription: string
  65   shortVideoDescription: string
  66   videoHTMLDescription = ''
  67   likesBarTooltipText = ''
  68   hasAlreadyAcceptedPrivacyConcern = false
  69   remoteServerDown = false
  70   hotkeys: Hotkey[]
  71
  72   private currentTime: number
  73   private paramsSub: Subscription
  74   private queryParamsSub: Subscription
  75   private configSub: Subscription
  76
  77   constructor (
  78     private elementRef: ElementRef,
  79     private changeDetector: ChangeDetectorRef,
  80     private route: ActivatedRoute,
  81     private router: Router,
  82     private videoService: VideoService,
  83     private playlistService: VideoPlaylistService,
  84     private videoBlacklistService: VideoBlacklistService,
  85     private confirmService: ConfirmService,
  86     private metaService: MetaService,
  87     private authService: AuthService,
  88     private serverService: ServerService,
  89     private restExtractor: RestExtractor,
  90     private notifier: Notifier,
  91     private pluginService: PluginService,
  92     private markdownService: MarkdownService,
  93     private zone: NgZone,
  94     private redirectService: RedirectService,
  95     private videoCaptionService: VideoCaptionService,
  96     private i18n: I18n,
  97     private hotkeysService: HotkeysService,
  98     private hooks: HooksService,
  99     private location: PlatformLocation,
 100     @Inject(LOCALE_ID) private localeId: string
 101   ) {}
 102
 103   get user () {
 104     return this.authService.getUser()
 105   }
 106
 107   async ngOnInit () {
 108     this.configSub = this.serverService.configLoaded
 109         .subscribe(() => {
 110           if (
 111             isWebRTCDisabled() ||
 112             this.serverService.getConfig().tracker.enabled === false ||
 113             peertubeLocalStorage.getItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY) === 'true'
 114           ) {
 115             this.hasAlreadyAcceptedPrivacyConcern = true
 116           }
 117         })
 118
 119     this.paramsSub = this.route.params.subscribe(routeParams => {
 120       const videoId = routeParams[ 'videoId' ]
 121       if (videoId) this.loadVideo(videoId)
 122
 123       const playlistId = routeParams[ 'playlistId' ]
 124       if (playlistId) this.loadPlaylist(playlistId)
 125     })
 126
 127     this.queryParamsSub = this.route.queryParams.subscribe(queryParams => {
 128       const videoId = queryParams[ 'videoId' ]
 129       if (videoId) this.loadVideo(videoId)
 130     })
 131
 132     this.initHotkeys()
 133
 134     this.theaterEnabled = getStoredTheater()
 135
 136     this.hooks.runAction('action:video-watch.init', 'video-watch')
 137   }
 138
 139   ngOnDestroy () {
 140     this.flushPlayer()
 141
 142     // Unsubscribe subscriptions
 143     if (this.paramsSub) this.paramsSub.unsubscribe()
 144     if (this.queryParamsSub) this.queryParamsSub.unsubscribe()
 145
 146     // Unbind hotkeys
 147     if (this.isUserLoggedIn()) this.hotkeysService.remove(this.hotkeys)
 148   }
 149
 150   setLike () {
 151     if (this.isUserLoggedIn() === false) return
 152
 153     // Already liked this video
 154     if (this.userRating === 'like') this.setRating('none')
 155     else this.setRating('like')
 156   }
 157
 158   setDislike () {
 159     if (this.isUserLoggedIn() === false) return
 160
 161     // Already disliked this video
 162     if (this.userRating === 'dislike') this.setRating('none')
 163     else this.setRating('dislike')
 164   }
 165
 166   showMoreDescription () {
 167     if (this.completeVideoDescription === undefined) {
 168       return this.loadCompleteDescription()
 169     }
 170
 171     this.updateVideoDescription(this.completeVideoDescription)
 172     this.completeDescriptionShown = true
 173   }
 174
 175   showLessDescription () {
 176     this.updateVideoDescription(this.shortVideoDescription)
 177     this.completeDescriptionShown = false
 178   }
 179
 180   loadCompleteDescription () {
 181     this.descriptionLoading = true
 182
 183     this.videoService.loadCompleteDescription(this.video.descriptionPath)
 184         .subscribe(
 185           description => {
 186             this.completeDescriptionShown = true
 187             this.descriptionLoading = false
 188
 189             this.shortVideoDescription = this.video.description
 190             this.completeVideoDescription = description
 191
 192             this.updateVideoDescription(this.completeVideoDescription)
 193           },
 194
 195           error => {
 196             this.descriptionLoading = false
 197             this.notifier.error(error.message)
 198           }
 199         )
 200   }
 201
 202   showSupportModal () {
 203     this.videoSupportModal.show()
 204   }
 205
 206   showShareModal () {
 207     this.videoShareModal.show(this.currentTime)
 208   }
 209
 210   isUserLoggedIn () {
 211     return this.authService.isLoggedIn()
 212   }
 213
 214   getVideoTags () {
 215     if (!this.video || Array.isArray(this.video.tags) === false) return []
 216
 217     return this.video.tags
 218   }
 219
 220   onVideoRemoved () {
 221     this.redirectService.redirectToHomepage()
 222   }
 223
 224   acceptedPrivacyConcern () {
 225     peertubeLocalStorage.setItem(VideoWatchComponent.LOCAL_STORAGE_PRIVACY_CONCERN_KEY, 'true')
 226     this.hasAlreadyAcceptedPrivacyConcern = true
 227   }
 228
 229   isVideoToTranscode () {
 230     return this.video && this.video.state.id === VideoState.TO_TRANSCODE
 231   }
 232
 233   isVideoToImport () {
 234     return this.video && this.video.state.id === VideoState.TO_IMPORT
 235   }
 236
 237   hasVideoScheduledPublication () {
 238     return this.video && this.video.scheduledUpdate !== undefined
 239   }
 240
 241   isVideoBlur (video: Video) {
 242     return video.isVideoNSFWForUser(this.user, this.serverService.getConfig())
 243   }
 244
 245   private loadVideo (videoId: string) {
 246     // Video did not change
 247     if (this.video && this.video.uuid === videoId) return
 248
 249     if (this.player) this.player.pause()
 250
 251     const videoObs = this.hooks.wrapObsFun(
 252       this.videoService.getVideo.bind(this.videoService),
 253       { videoId },
 254       'video-watch',
 255       'filter:api.video-watch.video.get.params',
 256       'filter:api.video-watch.video.get.result'
 257     )
 258
 259     // Video did change
 260     forkJoin([
 261       videoObs,
 262       this.videoCaptionService.listCaptions(videoId)
 263     ])
 264       .pipe(
 265         // If 401, the video is private or blacklisted so redirect to 404
 266         catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 401, 403, 404 ]))
 267       )
 268       .subscribe(([ video, captionsResult ]) => {
 269         const queryParams = this.route.snapshot.queryParams
 270
 271         const urlOptions = {
 272           startTime: queryParams.start,
 273           stopTime: queryParams.stop,
 274
 275           muted: queryParams.muted,
 276           loop: queryParams.loop,
 277           subtitle: queryParams.subtitle,
 278
 279           playerMode: queryParams.mode,
 280           peertubeLink: false
 281         }
 282
 283         this.onVideoFetched(video, captionsResult.data, urlOptions)
 284             .catch(err => this.handleError(err))
 285       })
 286   }
 287
 288   private loadPlaylist (playlistId: string) {
 289     // Playlist did not change
 290     if (this.playlist && this.playlist.uuid === playlistId) return
 291
 292     this.playlistService.getVideoPlaylist(playlistId)
 293       .pipe(
 294         // If 401, the video is private or blacklisted so redirect to 404
 295         catchError(err => this.restExtractor.redirectTo404IfNotFound(err, [ 400, 401, 403, 404 ]))
 296       )
 297       .subscribe(playlist => {
 298         this.playlist = playlist
 299
 300         const videoId = this.route.snapshot.queryParams['videoId']
 301         this.videoWatchPlaylist.loadPlaylistElements(playlist, !videoId)
 302       })
 303   }
 304
 305   private updateVideoDescription (description: string) {
 306     this.video.description = description
 307     this.setVideoDescriptionHTML()
 308       .catch(err => console.error(err))
 309   }
 310
 311   private async setVideoDescriptionHTML () {
 312     this.videoHTMLDescription = await this.markdownService.textMarkdownToHTML(this.video.description)
 313   }
 314
 315   private setVideoLikesBarTooltipText () {
 316     this.likesBarTooltipText = this.i18n('{{likesNumber}} likes / {{dislikesNumber}} dislikes', {
 317       likesNumber: this.video.likes,
 318       dislikesNumber: this.video.dislikes
 319     })
 320   }
 321
 322   private handleError (err: any) {
 323     const errorMessage: string = typeof err === 'string' ? err : err.message
 324     if (!errorMessage) return
 325
 326     // Display a message in the video player instead of a notification
 327     if (errorMessage.indexOf('from xs param') !== -1) {
 328       this.flushPlayer()
 329       this.remoteServerDown = true
 330       this.changeDetector.detectChanges()
 331
 332       return
 333     }
 334
 335     this.notifier.error(errorMessage)
 336   }
 337
 338   private checkUserRating () {
 339     // Unlogged users do not have ratings
 340     if (this.isUserLoggedIn() === false) return
 341
 342     this.videoService.getUserVideoRating(this.video.id)
 343         .subscribe(
 344           ratingObject => {
 345             if (ratingObject) {
 346               this.userRating = ratingObject.rating
 347             }
 348           },
 349
 350           err => this.notifier.error(err.message)
 351         )
 352   }
 353
 354   private async onVideoFetched (
 355     video: VideoDetails,
 356     videoCaptions: VideoCaption[],
 357     urlOptions: CustomizationOptions & { playerMode: PlayerMode }
 358   ) {
 359     this.video = video
 360     this.videoCaptions = videoCaptions
 361
 362     // Re init attributes
 363     this.descriptionLoading = false
 364     this.completeDescriptionShown = false
 365     this.remoteServerDown = false
 366     this.currentTime = undefined
 367
 368     this.videoWatchPlaylist.updatePlaylistIndex(video)
 369
 370     let startTime = timeToInt(urlOptions.startTime) || (this.video.userHistory ? this.video.userHistory.currentTime : 0)
 371     // If we are at the end of the video, reset the timer
 372     if (this.video.duration - startTime <= 1) startTime = 0
 373
 374     if (this.isVideoBlur(this.video)) {
 375       const res = await this.confirmService.confirm(
 376         this.i18n('This video contains mature or explicit content. Are you sure you want to watch it?'),
 377         this.i18n('Mature or explicit content')
 378       )
 379       if (res === false) return this.location.back()
 380     }
 381
 382     // Flush old player if needed
 383     this.flushPlayer()
 384
 385     // Build video element, because videojs removes it on dispose
 386     const playerElementWrapper = this.elementRef.nativeElement.querySelector('#videojs-wrapper')
 387     this.playerElement = document.createElement('video')
 388     this.playerElement.className = 'video-js vjs-peertube-skin'
 389     this.playerElement.setAttribute('playsinline', 'true')
 390     playerElementWrapper.appendChild(this.playerElement)
 391
 392     const playerCaptions = videoCaptions.map(c => ({
 393       label: c.language.label,
 394       language: c.language.id,
 395       src: environment.apiUrl + c.captionPath
 396     }))
 397
 398     const options: PeertubePlayerManagerOptions = {
 399       common: {
 400         autoplay: this.isAutoplay(),
 401
 402         playerElement: this.playerElement,
 403         onPlayerElementChange: (element: HTMLVideoElement) => this.playerElement = element,
 404
 405         videoDuration: this.video.duration,
 406         enableHotkeys: true,
 407         inactivityTimeout: 2500,
 408         poster: this.video.previewUrl,
 409
 410         startTime,
 411         stopTime: urlOptions.stopTime,
 412         controls: urlOptions.controls,
 413         muted: urlOptions.muted,
 414         loop: urlOptions.loop,
 415         subtitle: urlOptions.subtitle,
 416
 417         peertubeLink: urlOptions.peertubeLink,
 418
 419         theaterMode: true,
 420         captions: videoCaptions.length !== 0,
 421
 422         videoViewUrl: this.video.privacy.id !== VideoPrivacy.PRIVATE
 423           ? this.videoService.getVideoViewUrl(this.video.uuid)
 424           : null,
 425         embedUrl: this.video.embedUrl,
 426
 427         language: this.localeId,
 428
 429         userWatching: this.user && this.user.videosHistoryEnabled === true ? {
 430           url: this.videoService.getUserWatchingVideoUrl(this.video.uuid),
 431           authorizationHeader: this.authService.getRequestHeaderValue()
 432         } : undefined,
 433
 434         serverUrl: environment.apiUrl,
 435
 436         videoCaptions: playerCaptions
 437       },
 438
 439       webtorrent: {
 440         videoFiles: this.video.files
 441       }
 442     }
 443
 444     let mode: PlayerMode
 445
 446     if (urlOptions.playerMode) {
 447       if (urlOptions.playerMode === 'p2p-media-loader') mode = 'p2p-media-loader'
 448       else mode = 'webtorrent'
 449     } else {
 450       if (this.video.hasHlsPlaylist()) mode = 'p2p-media-loader'
 451       else mode = 'webtorrent'
 452     }
 453
 454     if (mode === 'p2p-media-loader') {
 455       const hlsPlaylist = this.video.getHlsPlaylist()
 456
 457       const p2pMediaLoader = {
 458         playlistUrl: hlsPlaylist.playlistUrl,
 459         segmentsSha256Url: hlsPlaylist.segmentsSha256Url,
 460         redundancyBaseUrls: hlsPlaylist.redundancies.map(r => r.baseUrl),
 461         trackerAnnounce: this.video.trackerUrls,
 462         videoFiles: this.video.files
 463       } as P2PMediaLoaderOptions
 464
 465       Object.assign(options, { p2pMediaLoader })
 466     }
 467
 468     this.zone.runOutsideAngular(async () => {
 469       this.player = await PeertubePlayerManager.initialize(mode, options, player => this.player = player)
 470
 471       this.player.on('customError', ({ err }: { err: any }) => this.handleError(err))
 472
 473       this.player.on('timeupdate', () => {
 474         this.currentTime = Math.floor(this.player.currentTime())
 475       })
 476
 477       this.player.one('ended', () => {
 478         if (this.playlist) {
 479           this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo())
 480         }
 481       })
 482
 483       this.player.one('stopped', () => {
 484         if (this.playlist) {
 485           this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo())
 486         }
 487       })
 488
 489       this.player.on('theaterChange', (_: any, enabled: boolean) => {
 490         this.zone.run(() => this.theaterEnabled = enabled)
 491       })
 492     })
 493
 494     this.setVideoDescriptionHTML()
 495     this.setVideoLikesBarTooltipText()
 496
 497     this.setOpenGraphTags()
 498     this.checkUserRating()
 499
 500     this.hooks.runAction('action:video-watch.video.loaded', 'video-watch')
 501   }
 502
 503   private setRating (nextRating: UserVideoRateType) {
 504     const ratingMethods: { [id in UserVideoRateType]: (id: number) => Observable<any> } = {
 505       like: this.videoService.setVideoLike,
 506       dislike: this.videoService.setVideoDislike,
 507       none: this.videoService.unsetVideoLike
 508     }
 509
 510     ratingMethods[nextRating].call(this.videoService, this.video.id)
 511           .subscribe(
 512             () => {
 513               // Update the video like attribute
 514               this.updateVideoRating(this.userRating, nextRating)
 515               this.userRating = nextRating
 516             },
 517
 518             (err: { message: string }) => this.notifier.error(err.message)
 519           )
 520   }
 521
 522   private updateVideoRating (oldRating: UserVideoRateType, newRating: UserVideoRateType) {
 523     let likesToIncrement = 0
 524     let dislikesToIncrement = 0
 525
 526     if (oldRating) {
 527       if (oldRating === 'like') likesToIncrement--
 528       if (oldRating === 'dislike') dislikesToIncrement--
 529     }
 530
 531     if (newRating === 'like') likesToIncrement++
 532     if (newRating === 'dislike') dislikesToIncrement++
 533
 534     this.video.likes += likesToIncrement
 535     this.video.dislikes += dislikesToIncrement
 536
 537     this.video.buildLikeAndDislikePercents()
 538     this.setVideoLikesBarTooltipText()
 539   }
 540
 541   private setOpenGraphTags () {
 542     this.metaService.setTitle(this.video.name)
 543
 544     this.metaService.setTag('og:type', 'video')
 545
 546     this.metaService.setTag('og:title', this.video.name)
 547     this.metaService.setTag('name', this.video.name)
 548
 549     this.metaService.setTag('og:description', this.video.description)
 550     this.metaService.setTag('description', this.video.description)
 551
 552     this.metaService.setTag('og:image', this.video.previewPath)
 553
 554     this.metaService.setTag('og:duration', this.video.duration.toString())
 555
 556     this.metaService.setTag('og:site_name', 'PeerTube')
 557
 558     this.metaService.setTag('og:url', window.location.href)
 559     this.metaService.setTag('url', window.location.href)
 560   }
 561
 562   private isAutoplay () {
 563     // We'll jump to the thread id, so do not play the video
 564     if (this.route.snapshot.params['threadId']) return false
 565
 566     // Otherwise true by default
 567     if (!this.user) return true
 568
 569     // Be sure the autoPlay is set to false
 570     return this.user.autoPlayVideo !== false
 571   }
 572
 573   private flushPlayer () {
 574     // Remove player if it exists
 575     if (this.player) {
 576       try {
 577         this.player.dispose()
 578         this.player = undefined
 579       } catch (err) {
 580         console.error('Cannot dispose player.', err)
 581       }
 582     }
 583   }
 584
 585   private initHotkeys () {
 586     this.hotkeys = [
 587       new Hotkey('shift+l', () => {
 588         this.setLike()
 589         return false
 590       }, undefined, this.i18n('Like the video')),
 591
 592       new Hotkey('shift+d', () => {
 593         this.setDislike()
 594         return false
 595       }, undefined, this.i18n('Dislike the video')),
 596
 597       new Hotkey('shift+s', () => {
 598         this.subscribeButton.subscribed ? this.subscribeButton.unsubscribe() : this.subscribeButton.subscribe()
 599         return false
 600       }, undefined, this.i18n('Subscribe to the account'))
 601     ]
 602     if (this.isUserLoggedIn()) this.hotkeysService.add(this.hotkeys)
 603   }
 604 }