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

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