client/src/assets/player/peertube-player-manager.ts

   1 import 'videojs-hotkeys/videojs.hotkeys'
   2 import 'videojs-dock'
   3 import 'videojs-contextmenu-ui'
   4 import 'videojs-contrib-quality-levels'
   5 import './upnext/end-card'
   6 import './upnext/upnext-plugin'
   7 import './bezels/bezels-plugin'
   8 import './peertube-plugin'
   9 import './videojs-components/next-video-button'
  10 import './videojs-components/p2p-info-button'
  11 import './videojs-components/peertube-link-button'
  12 import './videojs-components/peertube-load-progress-bar'
  13 import './videojs-components/resolution-menu-button'
  14 import './videojs-components/resolution-menu-item'
  15 import './videojs-components/settings-dialog'
  16 import './videojs-components/settings-menu-button'
  17 import './videojs-components/settings-menu-item'
  18 import './videojs-components/settings-panel'
  19 import './videojs-components/settings-panel-child'
  20 import './videojs-components/theater-button'
  21 import videojs from 'video.js'
  22 import { isDefaultLocale } from '../../../../shared/models/i18n/i18n'
  23 import { VideoFile } from '../../../../shared/models/videos'
  24 import { RedundancyUrlManager } from './p2p-media-loader/redundancy-url-manager'
  25 import { segmentUrlBuilderFactory } from './p2p-media-loader/segment-url-builder'
  26 import { segmentValidatorFactory } from './p2p-media-loader/segment-validator'
  27 import { getStoredP2PEnabled } from './peertube-player-local-storage'
  28 import { P2PMediaLoaderPluginOptions, UserWatching, VideoJSCaption, VideoJSPluginOptions } from './peertube-videojs-typings'
  29 import { TranslationsManager } from './translations-manager'
  30 import { buildVideoEmbed, buildVideoLink, copyToClipboard, getRtcConfig, isIOS, isSafari } from './utils'
  31
  32 // Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
  33 (videojs.getComponent('PlaybackRateMenuButton') as any).prototype.controlText_ = 'Speed'
  34
  35 const CaptionsButton = videojs.getComponent('CaptionsButton') as any
  36 // Change Captions to Subtitles/CC
  37 CaptionsButton.prototype.controlText_ = 'Subtitles/CC'
  38 // We just want to display 'Off' instead of 'captions off', keep a space so the variable == true (hacky I know)
  39 CaptionsButton.prototype.label_ = ' '
  40
  41 export type PlayerMode = 'webtorrent' | 'p2p-media-loader'
  42
  43 export type WebtorrentOptions = {
  44   videoFiles: VideoFile[]
  45 }
  46
  47 export type P2PMediaLoaderOptions = {
  48   playlistUrl: string
  49   segmentsSha256Url: string
  50   trackerAnnounce: string[]
  51   redundancyBaseUrls: string[]
  52   videoFiles: VideoFile[]
  53 }
  54
  55 export interface CustomizationOptions {
  56   startTime: number | string
  57   stopTime: number | string
  58
  59   controls?: boolean
  60   muted?: boolean
  61   loop?: boolean
  62   subtitle?: string
  63   resume?: string
  64
  65   peertubeLink: boolean
  66 }
  67
  68 export interface CommonOptions extends CustomizationOptions {
  69   playerElement: HTMLVideoElement
  70   onPlayerElementChange: (element: HTMLVideoElement) => void
  71
  72   autoplay: boolean
  73   nextVideo?: Function
  74   videoDuration: number
  75   enableHotkeys: boolean
  76   inactivityTimeout: number
  77   poster: string
  78
  79   theaterButton: boolean
  80   captions: boolean
  81
  82   videoViewUrl: string
  83   embedUrl: string
  84
  85   language?: string
  86
  87   videoCaptions: VideoJSCaption[]
  88
  89   userWatching?: UserWatching
  90
  91   serverUrl: string
  92 }
  93
  94 export type PeertubePlayerManagerOptions = {
  95   common: CommonOptions,
  96   webtorrent: WebtorrentOptions,
  97   p2pMediaLoader?: P2PMediaLoaderOptions
  98 }
  99
 100 export class PeertubePlayerManager {
 101   private static playerElementClassName: string
 102   private static onPlayerChange: (player: videojs.Player) => void
 103
 104   static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions, onPlayerChange: (player: videojs.Player) => void) {
 105     let p2pMediaLoader: any
 106
 107     this.onPlayerChange = onPlayerChange
 108     this.playerElementClassName = options.common.playerElement.className
 109
 110     if (mode === 'webtorrent') await import('./webtorrent/webtorrent-plugin')
 111     if (mode === 'p2p-media-loader') {
 112       [ p2pMediaLoader ] = await Promise.all([
 113         import('p2p-media-loader-hlsjs'),
 114         import('./p2p-media-loader/p2p-media-loader-plugin')
 115       ])
 116     }
 117
 118     const videojsOptions = this.getVideojsOptions(mode, options, p2pMediaLoader)
 119
 120     await TranslationsManager.loadLocaleInVideoJS(options.common.serverUrl, options.common.language, videojs)
 121
 122     const self = this
 123     return new Promise(res => {
 124       videojs(options.common.playerElement, videojsOptions, function (this: videojs.Player) {
 125         const player = this
 126
 127         let alreadyFallback = false
 128
 129         player.tech(true).one('error', () => {
 130           if (!alreadyFallback) self.maybeFallbackToWebTorrent(mode, player, options)
 131           alreadyFallback = true
 132         })
 133
 134         player.one('error', () => {
 135           if (!alreadyFallback) self.maybeFallbackToWebTorrent(mode, player, options)
 136           alreadyFallback = true
 137         })
 138
 139         self.addContextMenu(mode, player, options.common.embedUrl)
 140
 141         player.bezels()
 142
 143         return res(player)
 144       })
 145     })
 146   }
 147
 148   private static async maybeFallbackToWebTorrent (currentMode: PlayerMode, player: any, options: PeertubePlayerManagerOptions) {
 149     if (currentMode === 'webtorrent') return
 150
 151     console.log('Fallback to webtorrent.')
 152
 153     const newVideoElement = document.createElement('video')
 154     newVideoElement.className = this.playerElementClassName
 155
 156     // VideoJS wraps our video element inside a div
 157     let currentParentPlayerElement = options.common.playerElement.parentNode
 158     // Fix on IOS, don't ask me why
 159     if (!currentParentPlayerElement) currentParentPlayerElement = document.getElementById(options.common.playerElement.id).parentNode
 160
 161     currentParentPlayerElement.parentNode.insertBefore(newVideoElement, currentParentPlayerElement)
 162
 163     options.common.playerElement = newVideoElement
 164     options.common.onPlayerElementChange(newVideoElement)
 165
 166     player.dispose()
 167
 168     await import('./webtorrent/webtorrent-plugin')
 169
 170     const mode = 'webtorrent'
 171     const videojsOptions = this.getVideojsOptions(mode, options)
 172
 173     const self = this
 174     videojs(newVideoElement, videojsOptions, function (this: videojs.Player) {
 175       const player = this
 176
 177       self.addContextMenu(mode, player, options.common.embedUrl)
 178
 179       PeertubePlayerManager.onPlayerChange(player)
 180     })
 181   }
 182
 183   private static getVideojsOptions (
 184     mode: PlayerMode,
 185     options: PeertubePlayerManagerOptions,
 186     p2pMediaLoaderModule?: any
 187   ): videojs.PlayerOptions {
 188     const commonOptions = options.common
 189
 190     let autoplay = this.getAutoPlayValue(commonOptions.autoplay)
 191     let html5 = {}
 192
 193     const plugins: VideoJSPluginOptions = {
 194       peertube: {
 195         mode,
 196         autoplay, // Use peertube plugin autoplay because we get the file by webtorrent
 197         videoViewUrl: commonOptions.videoViewUrl,
 198         videoDuration: commonOptions.videoDuration,
 199         userWatching: commonOptions.userWatching,
 200         subtitle: commonOptions.subtitle,
 201         videoCaptions: commonOptions.videoCaptions,
 202         stopTime: commonOptions.stopTime
 203       }
 204     }
 205
 206     if (commonOptions.enableHotkeys === true) {
 207       PeertubePlayerManager.addHotkeysOptions(plugins)
 208     }
 209
 210     if (mode === 'p2p-media-loader') {
 211       const { hlsjs } = PeertubePlayerManager.addP2PMediaLoaderOptions(plugins, options, p2pMediaLoaderModule)
 212
 213       html5 = hlsjs.html5
 214     }
 215
 216     if (mode === 'webtorrent') {
 217       PeertubePlayerManager.addWebTorrentOptions(plugins, options)
 218
 219       // WebTorrent plugin handles autoplay, because we do some hackish stuff in there
 220       autoplay = false
 221     }
 222
 223     const videojsOptions = {
 224       html5,
 225
 226       // We don't use text track settings for now
 227       textTrackSettings: false as any, // FIXME: typings
 228       controls: commonOptions.controls !== undefined ? commonOptions.controls : true,
 229       loop: commonOptions.loop !== undefined ? commonOptions.loop : false,
 230
 231       muted: commonOptions.muted !== undefined
 232         ? commonOptions.muted
 233         : undefined, // Undefined so the player knows it has to check the local storage
 234
 235       autoplay: this.getAutoPlayValue(autoplay),
 236
 237       poster: commonOptions.poster,
 238       inactivityTimeout: commonOptions.inactivityTimeout,
 239       playbackRates: [ 0.5, 0.75, 1, 1.25, 1.5, 2 ],
 240
 241       plugins,
 242
 243       controlBar: {
 244         children: this.getControlBarChildren(mode, {
 245           captions: commonOptions.captions,
 246           peertubeLink: commonOptions.peertubeLink,
 247           theaterButton: commonOptions.theaterButton,
 248           nextVideo: commonOptions.nextVideo
 249         }) as any // FIXME: typings
 250       }
 251     }
 252
 253     if (commonOptions.language && !isDefaultLocale(commonOptions.language)) {
 254       Object.assign(videojsOptions, { language: commonOptions.language })
 255     }
 256
 257     return videojsOptions
 258   }
 259
 260   private static addP2PMediaLoaderOptions (
 261     plugins: VideoJSPluginOptions,
 262     options: PeertubePlayerManagerOptions,
 263     p2pMediaLoaderModule: any
 264   ) {
 265     const p2pMediaLoaderOptions = options.p2pMediaLoader
 266     const commonOptions = options.common
 267
 268     const trackerAnnounce = p2pMediaLoaderOptions.trackerAnnounce
 269                                                  .filter(t => t.startsWith('ws'))
 270
 271     const redundancyUrlManager = new RedundancyUrlManager(options.p2pMediaLoader.redundancyBaseUrls)
 272
 273     const p2pMediaLoader: P2PMediaLoaderPluginOptions = {
 274       redundancyUrlManager,
 275       type: 'application/x-mpegURL',
 276       startTime: commonOptions.startTime,
 277       src: p2pMediaLoaderOptions.playlistUrl
 278     }
 279
 280     let consumeOnly = false
 281     // FIXME: typings
 282     if (navigator && (navigator as any).connection && (navigator as any).connection.type === 'cellular') {
 283       console.log('We are on a cellular connection: disabling seeding.')
 284       consumeOnly = true
 285     }
 286
 287     const p2pMediaLoaderConfig = {
 288       loader: {
 289         trackerAnnounce,
 290         segmentValidator: segmentValidatorFactory(options.p2pMediaLoader.segmentsSha256Url),
 291         rtcConfig: getRtcConfig(),
 292         requiredSegmentsPriority: 5,
 293         segmentUrlBuilder: segmentUrlBuilderFactory(redundancyUrlManager),
 294         useP2P: getStoredP2PEnabled(),
 295         consumeOnly
 296       },
 297       segments: {
 298         swarmId: p2pMediaLoaderOptions.playlistUrl
 299       }
 300     }
 301     const hlsjs = {
 302       levelLabelHandler: (level: { height: number, width: number }) => {
 303         const file = p2pMediaLoaderOptions.videoFiles.find(f => f.resolution.id === level.height)
 304
 305         let label = file.resolution.label
 306         if (file.fps >= 50) label += file.fps
 307
 308         return label
 309       },
 310       html5: {
 311         hlsjsConfig: {
 312           capLevelToPlayerSize: true,
 313           autoStartLoad: false,
 314           liveSyncDurationCount: 7,
 315           loader: new p2pMediaLoaderModule.Engine(p2pMediaLoaderConfig).createLoaderClass()
 316         }
 317       }
 318     }
 319
 320     const toAssign = { p2pMediaLoader, hlsjs }
 321     Object.assign(plugins, toAssign)
 322
 323     return toAssign
 324   }
 325
 326   private static addWebTorrentOptions (plugins: VideoJSPluginOptions, options: PeertubePlayerManagerOptions) {
 327     const commonOptions = options.common
 328     const webtorrentOptions = options.webtorrent
 329
 330     const webtorrent = {
 331       autoplay: commonOptions.autoplay,
 332       videoDuration: commonOptions.videoDuration,
 333       playerElement: commonOptions.playerElement,
 334       videoFiles: webtorrentOptions.videoFiles,
 335       startTime: commonOptions.startTime
 336     }
 337
 338     Object.assign(plugins, { webtorrent })
 339   }
 340
 341   private static getControlBarChildren (mode: PlayerMode, options: {
 342     peertubeLink: boolean
 343     theaterButton: boolean,
 344     captions: boolean,
 345     nextVideo?: Function
 346   }) {
 347     const settingEntries = []
 348     const loadProgressBar = mode === 'webtorrent' ? 'peerTubeLoadProgressBar' : 'loadProgressBar'
 349
 350     // Keep an order
 351     settingEntries.push('playbackRateMenuButton')
 352     if (options.captions === true) settingEntries.push('captionsButton')
 353     settingEntries.push('resolutionMenuButton')
 354
 355     const children = {
 356       'playToggle': {}
 357     }
 358
 359     if (options.nextVideo) {
 360       Object.assign(children, {
 361         'nextVideoButton': {
 362           handler: options.nextVideo
 363         }
 364       })
 365     }
 366
 367     Object.assign(children, {
 368       'currentTimeDisplay': {},
 369       'timeDivider': {},
 370       'durationDisplay': {},
 371       'liveDisplay': {},
 372
 373       'flexibleWidthSpacer': {},
 374       'progressControl': {
 375         children: {
 376           'seekBar': {
 377             children: {
 378               [loadProgressBar]: {},
 379               'mouseTimeDisplay': {},
 380               'playProgressBar': {}
 381             }
 382           }
 383         }
 384       },
 385
 386       'p2PInfoButton': {},
 387
 388       'muteToggle': {},
 389       'volumeControl': {},
 390
 391       'settingsButton': {
 392         setup: {
 393           maxHeightOffset: 40
 394         },
 395         entries: settingEntries
 396       }
 397     })
 398
 399     if (options.peertubeLink === true) {
 400       Object.assign(children, {
 401         'peerTubeLinkButton': {}
 402       })
 403     }
 404
 405     if (options.theaterButton === true) {
 406       Object.assign(children, {
 407         'theaterButton': {}
 408       })
 409     }
 410
 411     Object.assign(children, {
 412       'fullscreenToggle': {}
 413     })
 414
 415     return children
 416   }
 417
 418   private static addContextMenu (mode: PlayerMode, player: videojs.Player, videoEmbedUrl: string) {
 419     const content = [
 420       {
 421         label: player.localize('Copy the video URL'),
 422         listener: function () {
 423           copyToClipboard(buildVideoLink())
 424         }
 425       },
 426       {
 427         label: player.localize('Copy the video URL at the current time'),
 428         listener: function (this: videojs.Player) {
 429           copyToClipboard(buildVideoLink({ startTime: this.currentTime() }))
 430         }
 431       },
 432       {
 433         label: player.localize('Copy embed code'),
 434         listener: () => {
 435           copyToClipboard(buildVideoEmbed(videoEmbedUrl))
 436         }
 437       }
 438     ]
 439
 440     if (mode === 'webtorrent') {
 441       content.push({
 442         label: player.localize('Copy magnet URI'),
 443         listener: function (this: videojs.Player) {
 444           copyToClipboard(this.webtorrent().getCurrentVideoFile().magnetUri)
 445         }
 446       })
 447     }
 448
 449     player.contextmenuUI({ content })
 450   }
 451
 452   private static addHotkeysOptions (plugins: VideoJSPluginOptions) {
 453     Object.assign(plugins, {
 454       hotkeys: {
 455         skipInitialFocus: true,
 456         enableInactiveFocus: false,
 457         captureDocumentHotkeys: true,
 458         documentHotkeysFocusElementFilter: (e: HTMLElement) => {
 459           return e.id === 'content' || e.tagName.toLowerCase() === 'body'
 460         },
 461
 462         enableVolumeScroll: false,
 463         enableModifiersForNumbers: false,
 464
 465         fullscreenKey: function (event: KeyboardEvent) {
 466           // fullscreen with the f key or Ctrl+Enter
 467           return event.key === 'f' || (event.ctrlKey && event.key === 'Enter')
 468         },
 469
 470         seekStep: function (event: KeyboardEvent) {
 471           // mimic VLC seek behavior, and default to 5 (original value is 5).
 472           if (event.ctrlKey && event.altKey) {
 473             return 5 * 60
 474           } else if (event.ctrlKey) {
 475             return 60
 476           } else if (event.altKey) {
 477             return 10
 478           } else {
 479             return 5
 480           }
 481         },
 482
 483         customKeys: {
 484           increasePlaybackRateKey: {
 485             key: function (event: KeyboardEvent) {
 486               return event.key === '>'
 487             },
 488             handler: function (player: videojs.Player) {
 489               const newValue = Math.min(player.playbackRate() + 0.1, 5)
 490               player.playbackRate(parseFloat(newValue.toFixed(2)))
 491             }
 492           },
 493           decreasePlaybackRateKey: {
 494             key: function (event: KeyboardEvent) {
 495               return event.key === '<'
 496             },
 497             handler: function (player: videojs.Player) {
 498               const newValue = Math.max(player.playbackRate() - 0.1, 0.10)
 499               player.playbackRate(parseFloat(newValue.toFixed(2)))
 500             }
 501           },
 502           frameByFrame: {
 503             key: function (event: KeyboardEvent) {
 504               return event.key === '.'
 505             },
 506             handler: function (player: videojs.Player) {
 507               player.pause()
 508               // Calculate movement distance (assuming 30 fps)
 509               const dist = 1 / 30
 510               player.currentTime(player.currentTime() + dist)
 511             }
 512           }
 513         }
 514       }
 515     })
 516   }
 517
 518   private static getAutoPlayValue (autoplay: any) {
 519     if (autoplay !== true) return autoplay
 520
 521     // Giving up with iOS
 522     if (isIOS()) return false
 523
 524     // We have issues with autoplay and Safari.
 525     // any that tries to play using auto mute seems to work
 526     if (isSafari()) return 'any'
 527
 528     return 'play'
 529   }
 530 }
 531
 532 // ############################################################################
 533
 534 export {
 535   videojs
 536 }