client/src/assets/player/peertube-player-options-builder.ts

   1 import videojs from 'video.js'
   2 import { HlsJsEngineSettings } from '@peertube/p2p-media-loader-hlsjs'
   3 import { PluginsManager } from '@root-helpers/plugins-manager'
   4 import { buildVideoLink, decorateVideoLink } from '@shared/core-utils'
   5 import { isDefaultLocale } from '@shared/core-utils/i18n'
   6 import { VideoFile } from '@shared/models'
   7 import { copyToClipboard } from '../../root-helpers/utils'
   8 import { RedundancyUrlManager } from './p2p-media-loader/redundancy-url-manager'
   9 import { segmentUrlBuilderFactory } from './p2p-media-loader/segment-url-builder'
  10 import { segmentValidatorFactory } from './p2p-media-loader/segment-validator'
  11 import { getAverageBandwidthInStore } from './peertube-player-local-storage'
  12 import {
  13   NextPreviousVideoButtonOptions,
  14   P2PMediaLoaderPluginOptions,
  15   PeerTubeLinkButtonOptions,
  16   PlaylistPluginOptions,
  17   UserWatching,
  18   VideoJSCaption,
  19   VideoJSPluginOptions
  20 } from './peertube-videojs-typings'
  21 import { buildVideoOrPlaylistEmbed, getRtcConfig, isIOS, isSafari } from './utils'
  22 import { HybridLoaderSettings } from '@peertube/p2p-media-loader-core'
  23
  24 export type PlayerMode = 'webtorrent' | 'p2p-media-loader'
  25
  26 export type WebtorrentOptions = {
  27   videoFiles: VideoFile[]
  28 }
  29
  30 export type P2PMediaLoaderOptions = {
  31   playlistUrl: string
  32   segmentsSha256Url: string
  33   trackerAnnounce: string[]
  34   redundancyBaseUrls: string[]
  35   videoFiles: VideoFile[]
  36 }
  37
  38 export interface CustomizationOptions {
  39   startTime: number | string
  40   stopTime: number | string
  41
  42   controls?: boolean
  43   muted?: boolean
  44   loop?: boolean
  45   subtitle?: string
  46   resume?: string
  47
  48   peertubeLink: boolean
  49 }
  50
  51 export interface CommonOptions extends CustomizationOptions {
  52   playerElement: HTMLVideoElement
  53   onPlayerElementChange: (element: HTMLVideoElement) => void
  54
  55   autoplay: boolean
  56   p2pEnabled: boolean
  57
  58   nextVideo?: () => void
  59   hasNextVideo?: () => boolean
  60
  61   previousVideo?: () => void
  62   hasPreviousVideo?: () => boolean
  63
  64   playlist?: PlaylistPluginOptions
  65
  66   videoDuration: number
  67   enableHotkeys: boolean
  68   inactivityTimeout: number
  69   poster: string
  70
  71   theaterButton: boolean
  72   captions: boolean
  73
  74   videoViewUrl: string
  75   embedUrl: string
  76   embedTitle: string
  77
  78   isLive: boolean
  79
  80   language?: string
  81
  82   videoCaptions: VideoJSCaption[]
  83
  84   videoUUID: string
  85   videoShortUUID: string
  86
  87   userWatching?: UserWatching
  88
  89   serverUrl: string
  90
  91   errorNotifier: (message: string) => void
  92 }
  93
  94 export type PeertubePlayerManagerOptions = {
  95   common: CommonOptions
  96   webtorrent: WebtorrentOptions
  97   p2pMediaLoader?: P2PMediaLoaderOptions
  98
  99   pluginsManager: PluginsManager
 100 }
 101
 102 export class PeertubePlayerOptionsBuilder {
 103
 104   constructor (
 105     private mode: PlayerMode,
 106     private options: PeertubePlayerManagerOptions,
 107     private p2pMediaLoaderModule?: any
 108   ) {
 109
 110   }
 111
 112   getVideojsOptions (alreadyPlayed: boolean): videojs.PlayerOptions {
 113     const commonOptions = this.options.common
 114     const isHLS = this.mode === 'p2p-media-loader'
 115
 116     let autoplay = this.getAutoPlayValue(commonOptions.autoplay, alreadyPlayed)
 117     const html5 = {
 118       preloadTextTracks: false
 119     }
 120
 121     const plugins: VideoJSPluginOptions = {
 122       peertube: {
 123         mode: this.mode,
 124         autoplay, // Use peertube plugin autoplay because we could get the file by webtorrent
 125         videoViewUrl: commonOptions.videoViewUrl,
 126         videoDuration: commonOptions.videoDuration,
 127         userWatching: commonOptions.userWatching,
 128         subtitle: commonOptions.subtitle,
 129         videoCaptions: commonOptions.videoCaptions,
 130         stopTime: commonOptions.stopTime,
 131         isLive: commonOptions.isLive,
 132         videoUUID: commonOptions.videoUUID
 133       }
 134     }
 135
 136     if (commonOptions.playlist) {
 137       plugins.playlist = commonOptions.playlist
 138     }
 139
 140     if (isHLS) {
 141       const { hlsjs } = this.addP2PMediaLoaderOptions(plugins)
 142
 143       Object.assign(html5, hlsjs.html5)
 144     }
 145
 146     if (this.mode === 'webtorrent') {
 147       this.addWebTorrentOptions(plugins, alreadyPlayed)
 148
 149       // WebTorrent plugin handles autoplay, because we do some hackish stuff in there
 150       autoplay = false
 151     }
 152
 153     const videojsOptions = {
 154       html5,
 155
 156       // We don't use text track settings for now
 157       textTrackSettings: false as any, // FIXME: typings
 158       controls: commonOptions.controls !== undefined ? commonOptions.controls : true,
 159       loop: commonOptions.loop !== undefined ? commonOptions.loop : false,
 160
 161       muted: commonOptions.muted !== undefined
 162         ? commonOptions.muted
 163         : undefined, // Undefined so the player knows it has to check the local storage
 164
 165       autoplay: this.getAutoPlayValue(autoplay, alreadyPlayed),
 166
 167       poster: commonOptions.poster,
 168       inactivityTimeout: commonOptions.inactivityTimeout,
 169       playbackRates: [ 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2 ],
 170
 171       plugins,
 172
 173       controlBar: {
 174         children: this.getControlBarChildren(this.mode, {
 175           videoShortUUID: commonOptions.videoShortUUID,
 176           p2pEnabled: commonOptions.p2pEnabled,
 177
 178           captions: commonOptions.captions,
 179           peertubeLink: commonOptions.peertubeLink,
 180           theaterButton: commonOptions.theaterButton,
 181
 182           nextVideo: commonOptions.nextVideo,
 183           hasNextVideo: commonOptions.hasNextVideo,
 184
 185           previousVideo: commonOptions.previousVideo,
 186           hasPreviousVideo: commonOptions.hasPreviousVideo
 187         }) as any // FIXME: typings
 188       }
 189     }
 190
 191     if (commonOptions.language && !isDefaultLocale(commonOptions.language)) {
 192       Object.assign(videojsOptions, { language: commonOptions.language })
 193     }
 194
 195     return videojsOptions
 196   }
 197
 198   private addP2PMediaLoaderOptions (plugins: VideoJSPluginOptions) {
 199     const p2pMediaLoaderOptions = this.options.p2pMediaLoader
 200     const commonOptions = this.options.common
 201
 202     const redundancyUrlManager = new RedundancyUrlManager(this.options.p2pMediaLoader.redundancyBaseUrls)
 203
 204     const p2pMediaLoader: P2PMediaLoaderPluginOptions = {
 205       redundancyUrlManager,
 206       type: 'application/x-mpegURL',
 207       startTime: commonOptions.startTime,
 208       src: p2pMediaLoaderOptions.playlistUrl
 209     }
 210
 211     const p2pMediaLoaderConfig: HlsJsEngineSettings = {
 212       loader: this.getP2PMediaLoaderOptions(redundancyUrlManager),
 213       segments: {
 214         swarmId: p2pMediaLoaderOptions.playlistUrl
 215       }
 216     }
 217
 218     const hlsjs = {
 219       levelLabelHandler: (level: { height: number, width: number }) => {
 220         const resolution = Math.min(level.height || 0, level.width || 0)
 221
 222         const file = p2pMediaLoaderOptions.videoFiles.find(f => f.resolution.id === resolution)
 223         // We don't have files for live videos
 224         if (!file) return level.height
 225
 226         let label = file.resolution.label
 227         if (file.fps >= 50) label += file.fps
 228
 229         return label
 230       },
 231       html5: {
 232         hlsjsConfig: this.getHLSOptions(p2pMediaLoaderConfig)
 233       }
 234     }
 235
 236     const toAssign = { p2pMediaLoader, hlsjs }
 237     Object.assign(plugins, toAssign)
 238
 239     return toAssign
 240   }
 241
 242   private getP2PMediaLoaderOptions (redundancyUrlManager: RedundancyUrlManager): Partial<HybridLoaderSettings> {
 243     let consumeOnly = false
 244     if ((navigator as any)?.connection?.type === 'cellular') {
 245       console.log('We are on a cellular connection: disabling seeding.')
 246       consumeOnly = true
 247     }
 248
 249     const trackerAnnounce = this.options.p2pMediaLoader.trackerAnnounce
 250                                                  .filter(t => t.startsWith('ws'))
 251
 252     const specificLiveOrVODOptions = this.options.common.isLive
 253       ? { // Live
 254         requiredSegmentsPriority: 1
 255       }
 256       : { // VOD
 257         requiredSegmentsPriority: 3,
 258
 259         cachedSegmentExpiration: 86400000,
 260         cachedSegmentsCount: 100,
 261
 262         httpDownloadMaxPriority: 9,
 263         httpDownloadProbability: 0.06,
 264         httpDownloadProbabilitySkipIfNoPeers: true,
 265
 266         p2pDownloadMaxPriority: 50
 267       }
 268
 269     return {
 270       trackerAnnounce,
 271       segmentValidator: segmentValidatorFactory(this.options.p2pMediaLoader.segmentsSha256Url, this.options.common.isLive),
 272       rtcConfig: getRtcConfig(),
 273       simultaneousHttpDownloads: 1,
 274       segmentUrlBuilder: segmentUrlBuilderFactory(redundancyUrlManager, 1),
 275       useP2P: this.options.common.p2pEnabled,
 276       consumeOnly,
 277
 278       ...specificLiveOrVODOptions
 279     }
 280   }
 281
 282   private getHLSOptions (p2pMediaLoaderConfig: HlsJsEngineSettings) {
 283     const base = {
 284       capLevelToPlayerSize: true,
 285       autoStartLoad: false,
 286       liveSyncDurationCount: 5,
 287
 288       loader: new this.p2pMediaLoaderModule.Engine(p2pMediaLoaderConfig).createLoaderClass()
 289     }
 290
 291     const averageBandwidth = getAverageBandwidthInStore()
 292     if (!averageBandwidth) return base
 293
 294     return {
 295       ...base,
 296
 297       abrEwmaDefaultEstimate: averageBandwidth * 8, // We want bit/s
 298       startLevel: -1,
 299       testBandwidth: false,
 300       debug: false
 301     }
 302   }
 303
 304   private addWebTorrentOptions (plugins: VideoJSPluginOptions, alreadyPlayed: boolean) {
 305     const commonOptions = this.options.common
 306     const webtorrentOptions = this.options.webtorrent
 307     const p2pMediaLoaderOptions = this.options.p2pMediaLoader
 308
 309     const autoplay = this.getAutoPlayValue(commonOptions.autoplay, alreadyPlayed) === 'play'
 310
 311     const webtorrent = {
 312       autoplay,
 313
 314       playerRefusedP2P: commonOptions.p2pEnabled === false,
 315       videoDuration: commonOptions.videoDuration,
 316       playerElement: commonOptions.playerElement,
 317
 318       videoFiles: webtorrentOptions.videoFiles.length !== 0
 319         ? webtorrentOptions.videoFiles
 320         // The WebTorrent plugin won't be able to play these files, but it will fallback to HTTP mode
 321         : p2pMediaLoaderOptions?.videoFiles || [],
 322
 323       startTime: commonOptions.startTime
 324     }
 325
 326     Object.assign(plugins, { webtorrent })
 327   }
 328
 329   private getControlBarChildren (mode: PlayerMode, options: {
 330     p2pEnabled: boolean
 331     videoShortUUID: string
 332
 333     peertubeLink: boolean
 334     theaterButton: boolean
 335     captions: boolean
 336
 337     nextVideo?: () => void
 338     hasNextVideo?: () => boolean
 339
 340     previousVideo?: () => void
 341     hasPreviousVideo?: () => boolean
 342   }) {
 343     const settingEntries = []
 344     const loadProgressBar = mode === 'webtorrent' ? 'peerTubeLoadProgressBar' : 'loadProgressBar'
 345
 346     // Keep an order
 347     settingEntries.push('playbackRateMenuButton')
 348     if (options.captions === true) settingEntries.push('captionsButton')
 349     settingEntries.push('resolutionMenuButton')
 350
 351     const children = {}
 352
 353     if (options.previousVideo) {
 354       const buttonOptions: NextPreviousVideoButtonOptions = {
 355         type: 'previous',
 356         handler: options.previousVideo,
 357         isDisabled: () => {
 358           if (!options.hasPreviousVideo) return false
 359
 360           return !options.hasPreviousVideo()
 361         }
 362       }
 363
 364       Object.assign(children, {
 365         previousVideoButton: buttonOptions
 366       })
 367     }
 368
 369     Object.assign(children, { playToggle: {} })
 370
 371     if (options.nextVideo) {
 372       const buttonOptions: NextPreviousVideoButtonOptions = {
 373         type: 'next',
 374         handler: options.nextVideo,
 375         isDisabled: () => {
 376           if (!options.hasNextVideo) return false
 377
 378           return !options.hasNextVideo()
 379         }
 380       }
 381
 382       Object.assign(children, {
 383         nextVideoButton: buttonOptions
 384       })
 385     }
 386
 387     Object.assign(children, {
 388       currentTimeDisplay: {},
 389       timeDivider: {},
 390       durationDisplay: {},
 391       liveDisplay: {},
 392
 393       flexibleWidthSpacer: {},
 394       progressControl: {
 395         children: {
 396           seekBar: {
 397             children: {
 398               [loadProgressBar]: {},
 399               mouseTimeDisplay: {},
 400               playProgressBar: {}
 401             }
 402           }
 403         }
 404       },
 405
 406       p2PInfoButton: {
 407         p2pEnabled: options.p2pEnabled
 408       },
 409
 410       muteToggle: {},
 411       volumeControl: {},
 412
 413       settingsButton: {
 414         setup: {
 415           maxHeightOffset: 40
 416         },
 417         entries: settingEntries
 418       }
 419     })
 420
 421     if (options.peertubeLink === true) {
 422       Object.assign(children, {
 423         peerTubeLinkButton: { shortUUID: options.videoShortUUID } as PeerTubeLinkButtonOptions
 424       })
 425     }
 426
 427     if (options.theaterButton === true) {
 428       Object.assign(children, {
 429         theaterButton: {}
 430       })
 431     }
 432
 433     Object.assign(children, {
 434       fullscreenToggle: {}
 435     })
 436
 437     return children
 438   }
 439
 440   private getAutoPlayValue (autoplay: any, alreadyPlayed: boolean) {
 441     if (autoplay !== true) return autoplay
 442
 443     // On first play, disable autoplay to avoid issues
 444     // But if the player already played videos, we can safely autoplay next ones
 445     if (isIOS() || isSafari()) {
 446       return alreadyPlayed ? 'play' : false
 447     }
 448
 449     return 'play'
 450   }
 451
 452   getContextMenuOptions (player: videojs.Player, commonOptions: CommonOptions) {
 453     const content = () => {
 454       const isLoopEnabled = player.options_['loop']
 455
 456       const items = [
 457         {
 458           icon: 'repeat',
 459           label: player.localize('Play in loop') + (isLoopEnabled ? '<span class="vjs-icon-tick-white"></span>' : ''),
 460           listener: function () {
 461             player.options_['loop'] = !isLoopEnabled
 462           }
 463         },
 464         {
 465           label: player.localize('Copy the video URL'),
 466           listener: function () {
 467             copyToClipboard(buildVideoLink({ shortUUID: commonOptions.videoShortUUID }))
 468           }
 469         },
 470         {
 471           label: player.localize('Copy the video URL at the current time'),
 472           listener: function (this: videojs.Player) {
 473             const url = buildVideoLink({ shortUUID: commonOptions.videoShortUUID })
 474
 475             copyToClipboard(decorateVideoLink({ url, startTime: this.currentTime() }))
 476           }
 477         },
 478         {
 479           icon: 'code',
 480           label: player.localize('Copy embed code'),
 481           listener: () => {
 482             copyToClipboard(buildVideoOrPlaylistEmbed(commonOptions.embedUrl, commonOptions.embedTitle))
 483           }
 484         }
 485       ]
 486
 487       if (this.mode === 'webtorrent') {
 488         items.push({
 489           label: player.localize('Copy magnet URI'),
 490           listener: function (this: videojs.Player) {
 491             copyToClipboard(this.webtorrent().getCurrentVideoFile().magnetUri)
 492           }
 493         })
 494       }
 495
 496       items.push({
 497         icon: 'info',
 498         label: player.localize('Stats for nerds'),
 499         listener: () => {
 500           player.stats().show()
 501         }
 502       })
 503
 504       return items.map(i => ({
 505         ...i,
 506         label: `<span class="vjs-icon-${i.icon || 'link-2'}"></span>` + i.label
 507       }))
 508     }
 509
 510     return { content }
 511   }
 512 }