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