5 files changed, 535 insertions, 0 deletions

diff --git a/client/src/assets/player/shared/manager-options/control-bar-options-builder.ts b/client/src/assets/player/shared/manager-options/control-bar-options-builder.ts
new file mode 100644
index 000000000..72a10eb26
--- /dev/null
+++ b/client/src/assets/player/shared/manager-options/control-bar-options-builder.ts
@@ -0,0 +1,137 @@
+import {
+  CommonOptions,
+  NextPreviousVideoButtonOptions,
+  PeerTubeLinkButtonOptions,
+  PeertubePlayerManagerOptions,
+  PlayerMode
+} from '../../types'
+
+export class ControlBarOptionsBuilder {
+  private options: CommonOptions
+
+  constructor (
+    globalOptions: PeertubePlayerManagerOptions,
+    private mode: PlayerMode
+  ) {
+    this.options = globalOptions.common
+  }
+
+  getChildrenOptions () {
+    const children = {}
+
+    if (this.options.previousVideo) {
+      Object.assign(children, this.getPreviousVideo())
+    }
+
+    Object.assign(children, { playToggle: {} })
+
+    if (this.options.nextVideo) {
+      Object.assign(children, this.getNextVideo())
+    }
+
+    Object.assign(children, {
+      currentTimeDisplay: {},
+      timeDivider: {},
+      durationDisplay: {},
+      liveDisplay: {},
+
+      flexibleWidthSpacer: {},
+
+      ...this.getProgressControl(),
+
+      p2PInfoButton: {
+        p2pEnabled: this.options.p2pEnabled
+      },
+
+      muteToggle: {},
+      volumeControl: {},
+
+      ...this.getSettingsButton()
+    })
+
+    if (this.options.peertubeLink === true) {
+      Object.assign(children, {
+        peerTubeLinkButton: { shortUUID: this.options.videoShortUUID } as PeerTubeLinkButtonOptions
+      })
+    }
+
+    if (this.options.theaterButton === true) {
+      Object.assign(children, {
+        theaterButton: {}
+      })
+    }
+
+    Object.assign(children, {
+      fullscreenToggle: {}
+    })
+
+    return children
+  }
+
+  private getSettingsButton () {
+    const settingEntries: string[] = []
+
+    settingEntries.push('playbackRateMenuButton')
+
+    if (this.options.captions === true) settingEntries.push('captionsButton')
+
+    settingEntries.push('resolutionMenuButton')
+
+    return {
+      settingsButton: {
+        setup: {
+          maxHeightOffset: 40
+        },
+        entries: settingEntries
+      }
+    }
+  }
+
+  private getProgressControl () {
+    const loadProgressBar = this.mode === 'webtorrent'
+      ? 'peerTubeLoadProgressBar'
+      : 'loadProgressBar'
+
+    return {
+      progressControl: {
+        children: {
+          seekBar: {
+            children: {
+              [loadProgressBar]: {},
+              mouseTimeDisplay: {},
+              playProgressBar: {}
+            }
+          }
+        }
+      }
+    }
+  }
+
+  private getPreviousVideo () {
+    const buttonOptions: NextPreviousVideoButtonOptions = {
+      type: 'previous',
+      handler: this.options.previousVideo,
+      isDisabled: () => {
+        if (!this.options.hasPreviousVideo) return false
+
+        return !this.options.hasPreviousVideo()
+      }
+    }
+
+    return { previousVideoButton: buttonOptions }
+  }
+
+  private getNextVideo () {
+    const buttonOptions: NextPreviousVideoButtonOptions = {
+      type: 'next',
+      handler: this.options.nextVideo,
+      isDisabled: () => {
+        if (!this.options.hasNextVideo) return false
+
+        return !this.options.hasNextVideo()
+      }
+    }
+
+    return { nextVideoButton: buttonOptions }
+  }
+}
diff --git a/client/src/assets/player/shared/manager-options/hls-options-builder.ts b/client/src/assets/player/shared/manager-options/hls-options-builder.ts
new file mode 100644
index 000000000..e7f664fd4
--- /dev/null
+++ b/client/src/assets/player/shared/manager-options/hls-options-builder.ts
@@ -0,0 +1,192 @@
+import { HybridLoaderSettings } from '@peertube/p2p-media-loader-core'
+import { HlsJsEngineSettings } from '@peertube/p2p-media-loader-hlsjs'
+import { LiveVideoLatencyMode } from '@shared/models'
+import { getAverageBandwidthInStore } from '../../peertube-player-local-storage'
+import { P2PMediaLoader, P2PMediaLoaderPluginOptions } from '../../types'
+import { PeertubePlayerManagerOptions } from '../../types/manager-options'
+import { getRtcConfig } from '../common'
+import { RedundancyUrlManager } from '../p2p-media-loader/redundancy-url-manager'
+import { segmentUrlBuilderFactory } from '../p2p-media-loader/segment-url-builder'
+import { segmentValidatorFactory } from '../p2p-media-loader/segment-validator'
+
+export class HLSOptionsBuilder {
+
+  constructor (
+    private options: PeertubePlayerManagerOptions,
+    private p2pMediaLoaderModule?: any
+  ) {
+
+  }
+
+  getPluginOptions () {
+    const commonOptions = this.options.common
+
+    const redundancyUrlManager = new RedundancyUrlManager(this.options.p2pMediaLoader.redundancyBaseUrls)
+
+    const p2pMediaLoaderConfig = this.getP2PMediaLoaderOptions(redundancyUrlManager)
+    const loader = new this.p2pMediaLoaderModule.Engine(p2pMediaLoaderConfig).createLoaderClass() as P2PMediaLoader
+
+    const p2pMediaLoader: P2PMediaLoaderPluginOptions = {
+      redundancyUrlManager,
+      type: 'application/x-mpegURL',
+      startTime: commonOptions.startTime,
+      src: this.options.p2pMediaLoader.playlistUrl,
+      loader
+    }
+
+    const hlsjs = {
+      levelLabelHandler: (level: { height: number, width: number }) => {
+        const resolution = Math.min(level.height || 0, level.width || 0)
+
+        const file = this.options.p2pMediaLoader.videoFiles.find(f => f.resolution.id === resolution)
+        // We don't have files for live videos
+        if (!file) return level.height
+
+        let label = file.resolution.label
+        if (file.fps >= 50) label += file.fps
+
+        return label
+      },
+      html5: {
+        hlsjsConfig: this.getHLSJSOptions(loader)
+      }
+    }
+
+    return { p2pMediaLoader, hlsjs }
+  }
+
+  // ---------------------------------------------------------------------------
+
+  private getP2PMediaLoaderOptions (redundancyUrlManager: RedundancyUrlManager): HlsJsEngineSettings {
+    let consumeOnly = false
+    if ((navigator as any)?.connection?.type === 'cellular') {
+      console.log('We are on a cellular connection: disabling seeding.')
+      consumeOnly = true
+    }
+
+    const trackerAnnounce = this.options.p2pMediaLoader.trackerAnnounce
+                                                 .filter(t => t.startsWith('ws'))
+
+    const specificLiveOrVODOptions = this.options.common.isLive
+      ? this.getP2PMediaLoaderLiveOptions()
+      : this.getP2PMediaLoaderVODOptions()
+
+    return {
+      loader: {
+
+        trackerAnnounce,
+        rtcConfig: getRtcConfig(),
+
+        simultaneousHttpDownloads: 1,
+        httpFailedSegmentTimeout: 1000,
+
+        segmentValidator: segmentValidatorFactory(this.options.p2pMediaLoader.segmentsSha256Url, this.options.common.isLive),
+        segmentUrlBuilder: segmentUrlBuilderFactory(redundancyUrlManager, 1),
+
+        useP2P: this.options.common.p2pEnabled,
+        consumeOnly,
+
+        ...specificLiveOrVODOptions
+      },
+      segments: {
+        swarmId: this.options.p2pMediaLoader.playlistUrl,
+        forwardSegmentCount: specificLiveOrVODOptions.p2pDownloadMaxPriority
+      }
+    }
+  }
+
+  private getP2PMediaLoaderLiveOptions (): Partial<HybridLoaderSettings> {
+    const base = {
+      requiredSegmentsPriority: 1
+    }
+
+    const latencyMode = this.options.common.liveOptions.latencyMode
+
+    switch (latencyMode) {
+      case LiveVideoLatencyMode.SMALL_LATENCY:
+        return {
+          ...base,
+
+          useP2P: false,
+          httpDownloadProbability: 1
+        }
+
+      case LiveVideoLatencyMode.HIGH_LATENCY:
+        return base
+
+      default:
+        return base
+    }
+  }
+
+  private getP2PMediaLoaderVODOptions (): Partial<HybridLoaderSettings> {
+    return {
+      requiredSegmentsPriority: 3,
+
+      cachedSegmentExpiration: 86400000,
+      cachedSegmentsCount: 100,
+
+      httpDownloadMaxPriority: 9,
+      httpDownloadProbability: 0.06,
+      httpDownloadProbabilitySkipIfNoPeers: true,
+
+      p2pDownloadMaxPriority: 50
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+
+  private getHLSJSOptions (loader: P2PMediaLoader) {
+    const specificLiveOrVODOptions = this.options.common.isLive
+      ? this.getHLSLiveOptions()
+      : this.getHLSVODOptions()
+
+    const base = {
+      capLevelToPlayerSize: true,
+      autoStartLoad: false,
+
+      loader,
+
+      ...specificLiveOrVODOptions
+    }
+
+    const averageBandwidth = getAverageBandwidthInStore()
+    if (!averageBandwidth) return base
+
+    return {
+      ...base,
+
+      abrEwmaDefaultEstimate: averageBandwidth * 8, // We want bit/s
+      startLevel: -1,
+      testBandwidth: false,
+      debug: false
+    }
+  }
+
+  private getHLSLiveOptions () {
+    const latencyMode = this.options.common.liveOptions.latencyMode
+
+    switch (latencyMode) {
+      case LiveVideoLatencyMode.SMALL_LATENCY:
+        return {
+          liveSyncDurationCount: 2
+        }
+
+      case LiveVideoLatencyMode.HIGH_LATENCY:
+        return {
+          liveSyncDurationCount: 10
+        }
+
+      default:
+        return {
+          liveSyncDurationCount: 5
+        }
+    }
+  }
+
+  private getHLSVODOptions () {
+    return {
+      liveSyncDurationCount: 5
+    }
+  }
+}
diff --git a/client/src/assets/player/shared/manager-options/index.ts b/client/src/assets/player/shared/manager-options/index.ts
new file mode 100644
index 000000000..4934d8302
--- /dev/null
+++ b/client/src/assets/player/shared/manager-options/index.ts
@@ -0,0 +1 @@
+export * from './manager-options-builder'
diff --git a/client/src/assets/player/shared/manager-options/manager-options-builder.ts b/client/src/assets/player/shared/manager-options/manager-options-builder.ts
new file mode 100644
index 000000000..5dab1f7a9
--- /dev/null
+++ b/client/src/assets/player/shared/manager-options/manager-options-builder.ts
@@ -0,0 +1,169 @@
+import videojs from 'video.js'
+import { copyToClipboard } from '@root-helpers/utils'
+import { buildVideoOrPlaylistEmbed } from '@root-helpers/video'
+import { isIOS, isSafari } from '@root-helpers/web-browser'
+import { buildVideoLink, decorateVideoLink } from '@shared/core-utils'
+import { isDefaultLocale } from '@shared/core-utils/i18n'
+import { VideoJSPluginOptions } from '../../types'
+import { CommonOptions, PeertubePlayerManagerOptions, PlayerMode } from '../../types/manager-options'
+import { ControlBarOptionsBuilder } from './control-bar-options-builder'
+import { HLSOptionsBuilder } from './hls-options-builder'
+import { WebTorrentOptionsBuilder } from './webtorrent-options-builder'
+
+export class ManagerOptionsBuilder {
+
+  constructor (
+    private mode: PlayerMode,
+    private options: PeertubePlayerManagerOptions,
+    private p2pMediaLoaderModule?: any
+  ) {
+
+  }
+
+  getVideojsOptions (alreadyPlayed: boolean): videojs.PlayerOptions {
+    const commonOptions = this.options.common
+
+    let autoplay = this.getAutoPlayValue(commonOptions.autoplay, alreadyPlayed)
+    const html5 = {
+      preloadTextTracks: false
+    }
+
+    const plugins: VideoJSPluginOptions = {
+      peertube: {
+        mode: this.mode,
+        autoplay, // Use peertube plugin autoplay because we could get the file by webtorrent
+        videoViewUrl: commonOptions.videoViewUrl,
+        videoDuration: commonOptions.videoDuration,
+        userWatching: commonOptions.userWatching,
+        subtitle: commonOptions.subtitle,
+        videoCaptions: commonOptions.videoCaptions,
+        stopTime: commonOptions.stopTime,
+        isLive: commonOptions.isLive,
+        videoUUID: commonOptions.videoUUID
+      }
+    }
+
+    if (commonOptions.playlist) {
+      plugins.playlist = commonOptions.playlist
+    }
+
+    if (this.mode === 'p2p-media-loader') {
+      const hlsOptionsBuilder = new HLSOptionsBuilder(this.options, this.p2pMediaLoaderModule)
+
+      Object.assign(plugins, hlsOptionsBuilder.getPluginOptions())
+    } else if (this.mode === 'webtorrent') {
+      const webtorrentOptionsBuilder = new WebTorrentOptionsBuilder(this.options, this.getAutoPlayValue(autoplay, alreadyPlayed))
+
+      Object.assign(plugins, webtorrentOptionsBuilder.getPluginOptions())
+
+      // WebTorrent plugin handles autoplay, because we do some hackish stuff in there
+      autoplay = false
+    }
+
+    const controlBarOptionsBuilder = new ControlBarOptionsBuilder(this.options, this.mode)
+
+    const videojsOptions = {
+      html5,
+
+      // We don't use text track settings for now
+      textTrackSettings: false as any, // FIXME: typings
+      controls: commonOptions.controls !== undefined ? commonOptions.controls : true,
+      loop: commonOptions.loop !== undefined ? commonOptions.loop : false,
+
+      muted: commonOptions.muted !== undefined
+        ? commonOptions.muted
+        : undefined, // Undefined so the player knows it has to check the local storage
+
+      autoplay: this.getAutoPlayValue(autoplay, alreadyPlayed),
+
+      poster: commonOptions.poster,
+      inactivityTimeout: commonOptions.inactivityTimeout,
+      playbackRates: [ 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2 ],
+
+      plugins,
+
+      controlBar: {
+        children: controlBarOptionsBuilder.getChildrenOptions() as any // FIXME: typings
+      }
+    }
+
+    if (commonOptions.language && !isDefaultLocale(commonOptions.language)) {
+      Object.assign(videojsOptions, { language: commonOptions.language })
+    }
+
+    return videojsOptions
+  }
+
+  private getAutoPlayValue (autoplay: any, alreadyPlayed: boolean) {
+    if (autoplay !== true) return autoplay
+
+    // On first play, disable autoplay to avoid issues
+    // But if the player already played videos, we can safely autoplay next ones
+    if (isIOS() || isSafari()) {
+      return alreadyPlayed ? 'play' : false
+    }
+
+    return 'play'
+  }
+
+  getContextMenuOptions (player: videojs.Player, commonOptions: CommonOptions) {
+    const content = () => {
+      const isLoopEnabled = player.options_['loop']
+
+      const items = [
+        {
+          icon: 'repeat',
+          label: player.localize('Play in loop') + (isLoopEnabled ? '<span class="vjs-icon-tick-white"></span>' : ''),
+          listener: function () {
+            player.options_['loop'] = !isLoopEnabled
+          }
+        },
+        {
+          label: player.localize('Copy the video URL'),
+          listener: function () {
+            copyToClipboard(buildVideoLink({ shortUUID: commonOptions.videoShortUUID }))
+          }
+        },
+        {
+          label: player.localize('Copy the video URL at the current time'),
+          listener: function (this: videojs.Player) {
+            const url = buildVideoLink({ shortUUID: commonOptions.videoShortUUID })
+
+            copyToClipboard(decorateVideoLink({ url, startTime: this.currentTime() }))
+          }
+        },
+        {
+          icon: 'code',
+          label: player.localize('Copy embed code'),
+          listener: () => {
+            copyToClipboard(buildVideoOrPlaylistEmbed(commonOptions.embedUrl, commonOptions.embedTitle))
+          }
+        }
+      ]
+
+      if (this.mode === 'webtorrent') {
+        items.push({
+          label: player.localize('Copy magnet URI'),
+          listener: function (this: videojs.Player) {
+            copyToClipboard(this.webtorrent().getCurrentVideoFile().magnetUri)
+          }
+        })
+      }
+
+      items.push({
+        icon: 'info',
+        label: player.localize('Stats for nerds'),
+        listener: () => {
+          player.stats().show()
+        }
+      })
+
+      return items.map(i => ({
+        ...i,
+        label: `<span class="vjs-icon-${i.icon || 'link-2'}"></span>` + i.label
+      }))
+    }
+
+    return { content }
+  }
+}
diff --git a/client/src/assets/player/shared/manager-options/webtorrent-options-builder.ts b/client/src/assets/player/shared/manager-options/webtorrent-options-builder.ts
new file mode 100644
index 000000000..257cf1e05
--- /dev/null
+++ b/client/src/assets/player/shared/manager-options/webtorrent-options-builder.ts
@@ -0,0 +1,36 @@
+import { PeertubePlayerManagerOptions } from '../../types'
+
+export class WebTorrentOptionsBuilder {
+
+  constructor (
+    private options: PeertubePlayerManagerOptions,
+    private autoPlayValue: any
+  ) {
+
+  }
+
+  getPluginOptions () {
+    const commonOptions = this.options.common
+    const webtorrentOptions = this.options.webtorrent
+    const p2pMediaLoaderOptions = this.options.p2pMediaLoader
+
+    const autoplay = this.autoPlayValue === 'play'
+
+    const webtorrent = {
+      autoplay,
+
+      playerRefusedP2P: commonOptions.p2pEnabled === false,
+      videoDuration: commonOptions.videoDuration,
+      playerElement: commonOptions.playerElement,
+
+      videoFiles: webtorrentOptions.videoFiles.length !== 0
+        ? webtorrentOptions.videoFiles
+        // The WebTorrent plugin won't be able to play these files, but it will fallback to HTTP mode
+        : p2pMediaLoaderOptions?.videoFiles || [],
+
+      startTime: commonOptions.startTime
+    }
+
+    return { webtorrent }
+  }
+}