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

   1 import { Hotkey, HotkeysService } from 'angular2-hotkeys'
   2 import { forkJoin, map, Observable, of, Subscription, switchMap } from 'rxjs'
   3 import { VideoJsPlayer } from 'video.js'
   4 import { PlatformLocation } from '@angular/common'
   5 import { Component, ElementRef, Inject, LOCALE_ID, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core'
   6 import { ActivatedRoute, Router } from '@angular/router'
   7 import {
   8   AuthService,
   9   AuthUser,
  10   ConfirmService,
  11   MetaService,
  12   Notifier,
  13   PeerTubeSocket,
  14   PluginService,
  15   RestExtractor,
  16   ScreenService,
  17   ServerService,
  18   User,
  19   UserService
  20 } from '@app/core'
  21 import { HooksService } from '@app/core/plugins/hooks.service'
  22 import { isXPercentInViewport, scrollToTop } from '@app/helpers'
  23 import { Video, VideoCaptionService, VideoDetails, VideoService } from '@app/shared/shared-main'
  24 import { SubscribeButtonComponent } from '@app/shared/shared-user-subscription'
  25 import { LiveVideoService } from '@app/shared/shared-video-live'
  26 import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist'
  27 import { isP2PEnabled } from '@root-helpers/video'
  28 import { timeToInt } from '@shared/core-utils'
  29 import {
  30   HTMLServerConfig,
  31   HttpStatusCode,
  32   LiveVideo,
  33   PeerTubeProblemDocument,
  34   ServerErrorCode,
  35   VideoCaption,
  36   VideoPrivacy,
  37   VideoState
  38 } from '@shared/models'
  39 import {
  40   CustomizationOptions,
  41   P2PMediaLoaderOptions,
  42   PeertubePlayerManager,
  43   PeertubePlayerManagerOptions,
  44   PlayerMode,
  45   videojs
  46 } from '../../../assets/player'
  47 import { cleanupVideoWatch, getStoredTheater, getStoredVideoWatchHistory } from '../../../assets/player/peertube-player-local-storage'
  48 import { environment } from '../../../environments/environment'
  49 import { VideoWatchPlaylistComponent } from './shared'
  50
  51 type URLOptions = CustomizationOptions & { playerMode: PlayerMode }
  52
  53 @Component({
  54   selector: 'my-video-watch',
  55   templateUrl: './video-watch.component.html',
  56   styleUrls: [ './video-watch.component.scss' ]
  57 })
  58 export class VideoWatchComponent implements OnInit, OnDestroy {
  59   @ViewChild('videoWatchPlaylist', { static: true }) videoWatchPlaylist: VideoWatchPlaylistComponent
  60   @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent
  61
  62   player: VideoJsPlayer
  63   playerElement: HTMLVideoElement
  64   playerPlaceholderImgSrc: string
  65   theaterEnabled = false
  66
  67   video: VideoDetails = null
  68   videoCaptions: VideoCaption[] = []
  69   liveVideo: LiveVideo
  70
  71   playlistPosition: number
  72   playlist: VideoPlaylist = null
  73
  74   remoteServerDown = false
  75
  76   private nextVideoUUID = ''
  77   private nextVideoTitle = ''
  78
  79   private currentTime: number
  80
  81   private paramsSub: Subscription
  82   private queryParamsSub: Subscription
  83   private configSub: Subscription
  84   private liveVideosSub: Subscription
  85
  86   private serverConfig: HTMLServerConfig
  87
  88   private hotkeys: Hotkey[] = []
  89
  90   constructor (
  91     private elementRef: ElementRef,
  92     private route: ActivatedRoute,
  93     private router: Router,
  94     private videoService: VideoService,
  95     private playlistService: VideoPlaylistService,
  96     private liveVideoService: LiveVideoService,
  97     private confirmService: ConfirmService,
  98     private metaService: MetaService,
  99     private authService: AuthService,
 100     private userService: UserService,
 101     private serverService: ServerService,
 102     private restExtractor: RestExtractor,
 103     private notifier: Notifier,
 104     private zone: NgZone,
 105     private videoCaptionService: VideoCaptionService,
 106     private hotkeysService: HotkeysService,
 107     private hooks: HooksService,
 108     private pluginService: PluginService,
 109     private peertubeSocket: PeerTubeSocket,
 110     private screenService: ScreenService,
 111     private location: PlatformLocation,
 112     @Inject(LOCALE_ID) private localeId: string
 113   ) { }
 114
 115   get user () {
 116     return this.authService.getUser()
 117   }
 118
 119   get anonymousUser () {
 120     return this.userService.getAnonymousUser()
 121   }
 122
 123   ngOnInit () {
 124     this.serverConfig = this.serverService.getHTMLConfig()
 125
 126     PeertubePlayerManager.initState()
 127
 128     this.loadRouteParams()
 129     this.loadRouteQuery()
 130
 131     this.initHotkeys()
 132
 133     this.theaterEnabled = getStoredTheater()
 134
 135     this.hooks.runAction('action:video-watch.init', 'video-watch')
 136
 137     setTimeout(cleanupVideoWatch, 1500) // Run in timeout to ensure we're not blocking the UI
 138   }
 139
 140   ngOnDestroy () {
 141     this.flushPlayer()
 142
 143     // Unsubscribe subscriptions
 144     if (this.paramsSub) this.paramsSub.unsubscribe()
 145     if (this.queryParamsSub) this.queryParamsSub.unsubscribe()
 146     if (this.configSub) this.configSub.unsubscribe()
 147     if (this.liveVideosSub) this.liveVideosSub.unsubscribe()
 148
 149     // Unbind hotkeys
 150     this.hotkeysService.remove(this.hotkeys)
 151   }
 152
 153   getCurrentTime () {
 154     return this.currentTime
 155   }
 156
 157   getCurrentPlaylistPosition () {
 158     return this.videoWatchPlaylist.currentPlaylistPosition
 159   }
 160
 161   onRecommendations (videos: Video[]) {
 162     if (videos.length === 0) return
 163
 164     // The recommended videos's first element should be the next video
 165     const video = videos[0]
 166     this.nextVideoUUID = video.uuid
 167     this.nextVideoTitle = video.name
 168   }
 169
 170   handleTimestampClicked (timestamp: number) {
 171     if (!this.player || this.video.isLive) return
 172
 173     this.player.currentTime(timestamp)
 174     scrollToTop()
 175   }
 176
 177   onPlaylistVideoFound (videoId: string) {
 178     this.loadVideo(videoId)
 179   }
 180
 181   isUserLoggedIn () {
 182     return this.authService.isLoggedIn()
 183   }
 184
 185   isVideoBlur (video: Video) {
 186     return video.isVideoNSFWForUser(this.user, this.serverConfig)
 187   }
 188
 189   isChannelDisplayNameGeneric () {
 190     const genericChannelDisplayName = [
 191       `Main ${this.video.channel.ownerAccount.name} channel`,
 192       `Default ${this.video.channel.ownerAccount.name} channel`
 193     ]
 194
 195     return genericChannelDisplayName.includes(this.video.channel.displayName)
 196   }
 197
 198   displayOtherVideosAsRow () {
 199     // Use the same value as in the SASS file
 200     return this.screenService.getWindowInnerWidth() <= 1100
 201   }
 202
 203   private loadRouteParams () {
 204     this.paramsSub = this.route.params.subscribe(routeParams => {
 205       const videoId = routeParams['videoId']
 206       if (videoId) return this.loadVideo(videoId)
 207
 208       const playlistId = routeParams['playlistId']
 209       if (playlistId) return this.loadPlaylist(playlistId)
 210     })
 211   }
 212
 213   private loadRouteQuery () {
 214     this.queryParamsSub = this.route.queryParams.subscribe(queryParams => {
 215       // Handle the ?playlistPosition
 216       const positionParam = queryParams['playlistPosition'] ?? 1
 217
 218       this.playlistPosition = positionParam === 'last'
 219         ? -1 // Handle the "last" index
 220         : parseInt(positionParam + '', 10)
 221
 222       if (isNaN(this.playlistPosition)) {
 223         console.error(`playlistPosition query param '${positionParam}' was parsed as NaN, defaulting to 1.`)
 224         this.playlistPosition = 1
 225       }
 226
 227       this.videoWatchPlaylist.updatePlaylistIndex(this.playlistPosition)
 228
 229       const start = queryParams['start']
 230       if (this.player && start) this.player.currentTime(parseInt(start, 10))
 231     })
 232   }
 233
 234   private loadVideo (videoId: string) {
 235     if (this.isSameElement(this.video, videoId)) return
 236
 237     if (this.player) this.player.pause()
 238
 239     const videoObs = this.hooks.wrapObsFun(
 240       this.videoService.getVideo.bind(this.videoService),
 241       { videoId },
 242       'video-watch',
 243       'filter:api.video-watch.video.get.params',
 244       'filter:api.video-watch.video.get.result'
 245     )
 246
 247     const videoAndLiveObs: Observable<{ video: VideoDetails, live?: LiveVideo }> = videoObs.pipe(
 248       switchMap(video => {
 249         if (!video.isLive) return of({ video })
 250
 251         return this.liveVideoService.getVideoLive(video.uuid)
 252           .pipe(map(live => ({ live, video })))
 253       })
 254     )
 255
 256     forkJoin([
 257       videoAndLiveObs,
 258       this.videoCaptionService.listCaptions(videoId),
 259       this.userService.getAnonymousOrLoggedUser()
 260     ]).subscribe({
 261       next: ([ { video, live }, captionsResult, loggedInOrAnonymousUser ]) => {
 262         const queryParams = this.route.snapshot.queryParams
 263
 264         const urlOptions = {
 265           resume: queryParams.resume,
 266
 267           startTime: queryParams.start,
 268           stopTime: queryParams.stop,
 269
 270           muted: queryParams.muted,
 271           loop: queryParams.loop,
 272           subtitle: queryParams.subtitle,
 273
 274           playerMode: queryParams.mode,
 275           peertubeLink: false
 276         }
 277
 278         this.onVideoFetched({ video, live, videoCaptions: captionsResult.data, loggedInOrAnonymousUser, urlOptions })
 279             .catch(err => this.handleGlobalError(err))
 280       },
 281
 282       error: err => this.handleRequestError(err)
 283     })
 284   }
 285
 286   private loadPlaylist (playlistId: string) {
 287     if (this.isSameElement(this.playlist, playlistId)) return
 288
 289     this.playlistService.getVideoPlaylist(playlistId)
 290       .subscribe({
 291         next: playlist => {
 292           this.playlist = playlist
 293
 294           this.videoWatchPlaylist.loadPlaylistElements(playlist, !this.playlistPosition, this.playlistPosition)
 295         },
 296
 297         error: err => this.handleRequestError(err)
 298       })
 299   }
 300
 301   private isSameElement (element: VideoDetails | VideoPlaylist, newId: string) {
 302     if (!element) return false
 303
 304     return (element.id + '') === newId || element.uuid === newId || element.shortUUID === newId
 305   }
 306
 307   private async handleRequestError (err: any) {
 308     const errorBody = err.body as PeerTubeProblemDocument
 309
 310     if (errorBody?.code === ServerErrorCode.DOES_NOT_RESPECT_FOLLOW_CONSTRAINTS && errorBody.originUrl) {
 311       const originUrl = errorBody.originUrl + (window.location.search ?? '')
 312
 313       const res = await this.confirmService.confirm(
 314         // eslint-disable-next-line max-len
 315         $localize`This video is not available on this instance. Do you want to be redirected on the origin instance: <a href="${originUrl}">${originUrl}</a>?`,
 316         $localize`Redirection`
 317       )
 318
 319       if (res === true) return window.location.href = originUrl
 320     }
 321
 322     // If 400, 403 or 404, the video is private or blocked so redirect to 404
 323     return this.restExtractor.redirectTo404IfNotFound(err, 'video', [
 324       HttpStatusCode.BAD_REQUEST_400,
 325       HttpStatusCode.FORBIDDEN_403,
 326       HttpStatusCode.NOT_FOUND_404
 327     ])
 328   }
 329
 330   private handleGlobalError (err: any) {
 331     const errorMessage: string = typeof err === 'string' ? err : err.message
 332     if (!errorMessage) return
 333
 334     // Display a message in the video player instead of a notification
 335     if (errorMessage.includes('from xs param')) {
 336       this.flushPlayer()
 337       this.remoteServerDown = true
 338
 339       return
 340     }
 341
 342     this.notifier.error(errorMessage)
 343   }
 344
 345   private async onVideoFetched (options: {
 346     video: VideoDetails
 347     live: LiveVideo
 348     videoCaptions: VideoCaption[]
 349     urlOptions: URLOptions
 350     loggedInOrAnonymousUser: User
 351   }) {
 352     const { video, live, videoCaptions, urlOptions, loggedInOrAnonymousUser } = options
 353
 354     this.subscribeToLiveEventsIfNeeded(this.video, video)
 355
 356     this.video = video
 357     this.videoCaptions = videoCaptions
 358     this.liveVideo = live
 359
 360     // Re init attributes
 361     this.playerPlaceholderImgSrc = undefined
 362     this.remoteServerDown = false
 363     this.currentTime = undefined
 364
 365     if (this.isVideoBlur(this.video)) {
 366       const res = await this.confirmService.confirm(
 367         $localize`This video contains mature or explicit content. Are you sure you want to watch it?`,
 368         $localize`Mature or explicit content`
 369       )
 370       if (res === false) return this.location.back()
 371     }
 372
 373     this.buildPlayer(urlOptions, loggedInOrAnonymousUser)
 374       .catch(err => console.error('Cannot build the player', err))
 375
 376     this.setOpenGraphTags()
 377
 378     const hookOptions = {
 379       videojs,
 380       video: this.video,
 381       playlist: this.playlist
 382     }
 383     this.hooks.runAction('action:video-watch.video.loaded', 'video-watch', hookOptions)
 384   }
 385
 386   private async buildPlayer (urlOptions: URLOptions, loggedInOrAnonymousUser: User) {
 387     // Flush old player if needed
 388     this.flushPlayer()
 389
 390     const videoState = this.video.state.id
 391     if (videoState === VideoState.LIVE_ENDED || videoState === VideoState.WAITING_FOR_LIVE) {
 392       this.playerPlaceholderImgSrc = this.video.previewPath
 393       return
 394     }
 395
 396     // Build video element, because videojs removes it on dispose
 397     const playerElementWrapper = this.elementRef.nativeElement.querySelector('#videojs-wrapper')
 398     this.playerElement = document.createElement('video')
 399     this.playerElement.className = 'video-js vjs-peertube-skin'
 400     this.playerElement.setAttribute('playsinline', 'true')
 401     playerElementWrapper.appendChild(this.playerElement)
 402
 403     const params = {
 404       video: this.video,
 405       videoCaptions: this.videoCaptions,
 406       liveVideo: this.liveVideo,
 407       urlOptions,
 408       loggedInOrAnonymousUser,
 409       user: this.user
 410     }
 411     const { playerMode, playerOptions } = await this.hooks.wrapFun(
 412       this.buildPlayerManagerOptions.bind(this),
 413       params,
 414       'video-watch',
 415       'filter:internal.video-watch.player.build-options.params',
 416       'filter:internal.video-watch.player.build-options.result'
 417     )
 418
 419     this.zone.runOutsideAngular(async () => {
 420       this.player = await PeertubePlayerManager.initialize(playerMode, playerOptions, player => this.player = player)
 421
 422       this.player.on('customError', (_e, data: any) => {
 423         this.zone.run(() => this.handleGlobalError(data.err))
 424       })
 425
 426       this.player.on('timeupdate', () => {
 427         // Don't need to trigger angular change for this variable, that is sent to children components on click
 428         this.currentTime = Math.floor(this.player.currentTime())
 429       })
 430
 431       /**
 432        * condition: true to make the upnext functionality trigger, false to disable the upnext functionality
 433        *            go to the next video in 'condition()' if you don't want of the timer.
 434        * next: function triggered at the end of the timer.
 435        * suspended: function used at each click of the timer checking if we need to reset progress
 436        *            and wait until suspended becomes truthy again.
 437        */
 438       this.player.upnext({
 439         timeout: 5000, // 5s
 440
 441         headText: $localize`Up Next`,
 442         cancelText: $localize`Cancel`,
 443         suspendedText: $localize`Autoplay is suspended`,
 444
 445         getTitle: () => this.nextVideoTitle,
 446
 447         next: () => this.zone.run(() => this.playNextVideoInAngularZone()),
 448         condition: () => {
 449           if (!this.playlist) return this.isAutoPlayNext()
 450
 451           // Don't wait timeout to play the next playlist video
 452           if (this.isPlaylistAutoPlayNext()) {
 453             this.playNextVideoInAngularZone()
 454             return undefined
 455           }
 456
 457           return false
 458         },
 459
 460         suspended: () => {
 461           return (
 462             !isXPercentInViewport(this.player.el() as HTMLElement, 80) ||
 463             !document.getElementById('content').contains(document.activeElement)
 464           )
 465         }
 466       })
 467
 468       this.player.one('stopped', () => {
 469         if (this.playlist && this.isPlaylistAutoPlayNext()) {
 470           this.playNextVideoInAngularZone()
 471         }
 472       })
 473
 474       this.player.one('ended', () => {
 475         if (this.video.isLive) {
 476           this.zone.run(() => this.video.state.id = VideoState.LIVE_ENDED)
 477         }
 478       })
 479
 480       this.player.on('theaterChange', (_: any, enabled: boolean) => {
 481         this.zone.run(() => this.theaterEnabled = enabled)
 482       })
 483
 484       this.hooks.runAction('action:video-watch.player.loaded', 'video-watch', {
 485         player: this.player,
 486         playlist: this.playlist,
 487         playlistPosition: this.playlistPosition,
 488         videojs,
 489         video: this.video
 490       })
 491     })
 492   }
 493
 494   private hasNextVideo () {
 495     if (this.playlist) {
 496       return this.videoWatchPlaylist.hasNextVideo()
 497     }
 498
 499     return true
 500   }
 501
 502   private playNextVideoInAngularZone () {
 503     if (this.playlist) {
 504       this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo())
 505       return
 506     }
 507
 508     if (this.nextVideoUUID) {
 509       this.router.navigate([ '/w', this.nextVideoUUID ])
 510     }
 511   }
 512
 513   private isAutoplay () {
 514     // We'll jump to the thread id, so do not play the video
 515     if (this.route.snapshot.params['threadId']) return false
 516
 517     // Otherwise true by default
 518     if (!this.user) return true
 519
 520     // Be sure the autoPlay is set to false
 521     return this.user.autoPlayVideo !== false
 522   }
 523
 524   private isAutoPlayNext () {
 525     return (
 526       (this.user?.autoPlayNextVideo) ||
 527       this.anonymousUser.autoPlayNextVideo
 528     )
 529   }
 530
 531   private isPlaylistAutoPlayNext () {
 532     return (
 533       (this.user?.autoPlayNextVideoPlaylist) ||
 534       this.anonymousUser.autoPlayNextVideoPlaylist
 535     )
 536   }
 537
 538   private flushPlayer () {
 539     // Remove player if it exists
 540     if (!this.player) return
 541
 542     try {
 543       this.player.dispose()
 544       this.player = undefined
 545     } catch (err) {
 546       console.error('Cannot dispose player.', err)
 547     }
 548   }
 549
 550   private buildPlayerManagerOptions (params: {
 551     video: VideoDetails
 552     liveVideo: LiveVideo
 553     videoCaptions: VideoCaption[]
 554     urlOptions: CustomizationOptions & { playerMode: PlayerMode }
 555     loggedInOrAnonymousUser: User
 556     user?: AuthUser
 557   }) {
 558     const { video, liveVideo, videoCaptions, urlOptions, loggedInOrAnonymousUser, user } = params
 559
 560     const getStartTime = () => {
 561       const byUrl = urlOptions.startTime !== undefined
 562       const byHistory = video.userHistory && (!this.playlist || urlOptions.resume !== undefined)
 563       const byLocalStorage = getStoredVideoWatchHistory(video.uuid)
 564
 565       if (byUrl) return timeToInt(urlOptions.startTime)
 566       if (byHistory) return video.userHistory.currentTime
 567       if (byLocalStorage) return byLocalStorage.duration
 568
 569       return 0
 570     }
 571
 572     let startTime = getStartTime()
 573
 574     // If we are at the end of the video, reset the timer
 575     if (video.duration - startTime <= 1) startTime = 0
 576
 577     const playerCaptions = videoCaptions.map(c => ({
 578       label: c.language.label,
 579       language: c.language.id,
 580       src: environment.apiUrl + c.captionPath
 581     }))
 582
 583     const liveOptions = video.isLive
 584       ? { latencyMode: liveVideo.latencyMode }
 585       : undefined
 586
 587     const options: PeertubePlayerManagerOptions = {
 588       common: {
 589         autoplay: this.isAutoplay(),
 590         p2pEnabled: isP2PEnabled(video, this.serverConfig, loggedInOrAnonymousUser.p2pEnabled),
 591
 592         hasNextVideo: () => this.hasNextVideo(),
 593         nextVideo: () => this.playNextVideoInAngularZone(),
 594
 595         playerElement: this.playerElement,
 596         onPlayerElementChange: (element: HTMLVideoElement) => this.playerElement = element,
 597
 598         videoDuration: video.duration,
 599         enableHotkeys: true,
 600         inactivityTimeout: 2500,
 601         poster: video.previewUrl,
 602
 603         startTime,
 604         stopTime: urlOptions.stopTime,
 605         controls: urlOptions.controls,
 606         muted: urlOptions.muted,
 607         loop: urlOptions.loop,
 608         subtitle: urlOptions.subtitle,
 609
 610         peertubeLink: urlOptions.peertubeLink,
 611
 612         theaterButton: true,
 613         captions: videoCaptions.length !== 0,
 614
 615         videoViewUrl: video.privacy.id !== VideoPrivacy.PRIVATE
 616           ? this.videoService.getVideoViewUrl(video.uuid)
 617           : null,
 618         embedUrl: video.embedUrl,
 619         embedTitle: video.name,
 620
 621         isLive: video.isLive,
 622         liveOptions,
 623
 624         language: this.localeId,
 625
 626         userWatching: user && user.videosHistoryEnabled === true
 627           ? {
 628             url: this.videoService.getUserWatchingVideoUrl(video.uuid),
 629             authorizationHeader: this.authService.getRequestHeaderValue()
 630           }
 631           : undefined,
 632
 633         serverUrl: environment.apiUrl,
 634
 635         videoCaptions: playerCaptions,
 636
 637         videoShortUUID: video.shortUUID,
 638         videoUUID: video.uuid,
 639
 640         errorNotifier: (message: string) => this.notifier.error(message)
 641       },
 642
 643       webtorrent: {
 644         videoFiles: video.files
 645       },
 646
 647       pluginsManager: this.pluginService.getPluginsManager()
 648     }
 649
 650     // Only set this if we're in a playlist
 651     if (this.playlist) {
 652       options.common.hasPreviousVideo = () => this.videoWatchPlaylist.hasPreviousVideo()
 653
 654       options.common.previousVideo = () => {
 655         this.zone.run(() => this.videoWatchPlaylist.navigateToPreviousPlaylistVideo())
 656       }
 657     }
 658
 659     let mode: PlayerMode
 660
 661     if (urlOptions.playerMode) {
 662       if (urlOptions.playerMode === 'p2p-media-loader') mode = 'p2p-media-loader'
 663       else mode = 'webtorrent'
 664     } else {
 665       if (video.hasHlsPlaylist()) mode = 'p2p-media-loader'
 666       else mode = 'webtorrent'
 667     }
 668
 669     // p2p-media-loader needs TextEncoder, fallback on WebTorrent if not available
 670     if (typeof TextEncoder === 'undefined') {
 671       mode = 'webtorrent'
 672     }
 673
 674     if (mode === 'p2p-media-loader') {
 675       const hlsPlaylist = video.getHlsPlaylist()
 676
 677       const p2pMediaLoader = {
 678         playlistUrl: hlsPlaylist.playlistUrl,
 679         segmentsSha256Url: hlsPlaylist.segmentsSha256Url,
 680         redundancyBaseUrls: hlsPlaylist.redundancies.map(r => r.baseUrl),
 681         trackerAnnounce: video.trackerUrls,
 682         videoFiles: hlsPlaylist.files
 683       } as P2PMediaLoaderOptions
 684
 685       Object.assign(options, { p2pMediaLoader })
 686     }
 687
 688     return { playerMode: mode, playerOptions: options }
 689   }
 690
 691   private async subscribeToLiveEventsIfNeeded (oldVideo: VideoDetails, newVideo: VideoDetails) {
 692     if (!this.liveVideosSub) {
 693       this.liveVideosSub = this.buildLiveEventsSubscription()
 694     }
 695
 696     if (oldVideo && oldVideo.id !== newVideo.id) {
 697       this.peertubeSocket.unsubscribeLiveVideos(oldVideo.id)
 698     }
 699
 700     if (!newVideo.isLive) return
 701
 702     await this.peertubeSocket.subscribeToLiveVideosSocket(newVideo.id)
 703   }
 704
 705   private buildLiveEventsSubscription () {
 706     return this.peertubeSocket.getLiveVideosObservable()
 707       .subscribe(({ type, payload }) => {
 708         if (type === 'state-change') return this.handleLiveStateChange(payload.state)
 709         if (type === 'views-change') return this.handleLiveViewsChange(payload.viewers)
 710       })
 711   }
 712
 713   private handleLiveStateChange (newState: VideoState) {
 714     if (newState !== VideoState.PUBLISHED) return
 715
 716     console.log('Loading video after live update.')
 717
 718     const videoUUID = this.video.uuid
 719
 720     // Reset to force refresh the video
 721     this.video = undefined
 722     this.loadVideo(videoUUID)
 723   }
 724
 725   private handleLiveViewsChange (newViewers: number) {
 726     if (!this.video) {
 727       console.error('Cannot update video live views because video is no defined.')
 728       return
 729     }
 730
 731     console.log('Updating live views.')
 732
 733     this.video.viewers = newViewers
 734   }
 735
 736   private initHotkeys () {
 737     this.hotkeys = [
 738       // These hotkeys are managed by the player
 739       new Hotkey('f', e => e, undefined, $localize`Enter/exit fullscreen`),
 740       new Hotkey('space', e => e, undefined, $localize`Play/Pause the video`),
 741       new Hotkey('m', e => e, undefined, $localize`Mute/unmute the video`),
 742
 743       new Hotkey('0-9', e => e, undefined, $localize`Skip to a percentage of the video: 0 is 0% and 9 is 90%`),
 744
 745       new Hotkey('up', e => e, undefined, $localize`Increase the volume`),
 746       new Hotkey('down', e => e, undefined, $localize`Decrease the volume`),
 747
 748       new Hotkey('right', e => e, undefined, $localize`Seek the video forward`),
 749       new Hotkey('left', e => e, undefined, $localize`Seek the video backward`),
 750
 751       new Hotkey('>', e => e, undefined, $localize`Increase playback rate`),
 752       new Hotkey('<', e => e, undefined, $localize`Decrease playback rate`),
 753
 754       new Hotkey(',', e => e, undefined, $localize`Navigate in the video to the previous frame`),
 755       new Hotkey('.', e => e, undefined, $localize`Navigate in the video to the next frame`),
 756
 757       new Hotkey('t', e => {
 758         this.theaterEnabled = !this.theaterEnabled
 759         return false
 760       }, undefined, $localize`Toggle theater mode`)
 761     ]
 762
 763     if (this.isUserLoggedIn()) {
 764       this.hotkeys = this.hotkeys.concat([
 765         new Hotkey('shift+s', () => {
 766           if (this.subscribeButton.isSubscribedToAll()) this.subscribeButton.unsubscribe()
 767           else this.subscribeButton.subscribe()
 768
 769           return false
 770         }, undefined, $localize`Subscribe to the account`)
 771       ])
 772     }
 773
 774     this.hotkeysService.add(this.hotkeys)
 775   }
 776
 777   private setOpenGraphTags () {
 778     this.metaService.setTitle(this.video.name)
 779
 780     this.metaService.setTag('og:type', 'video')
 781
 782     this.metaService.setTag('og:title', this.video.name)
 783     this.metaService.setTag('name', this.video.name)
 784
 785     this.metaService.setTag('og:description', this.video.description)
 786     this.metaService.setTag('description', this.video.description)
 787
 788     this.metaService.setTag('og:image', this.video.previewPath)
 789
 790     this.metaService.setTag('og:duration', this.video.duration.toString())
 791
 792     this.metaService.setTag('og:site_name', 'PeerTube')
 793
 794     this.metaService.setTag('og:url', window.location.href)
 795     this.metaService.setTag('url', window.location.href)
 796   }
 797 }