Add hls support on server

9 files changed, 218 insertions, 51 deletions

diff --git a/client/src/assets/player/p2p-media-loader-plugin.ts b/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts
index a5b20219f..f9a2707fb 100644
--- a/client/src/assets/player/p2p-media-loader-plugin.ts
+++ b/client/src/assets/player/p2p-media-loader/p2p-media-loader-plugin.ts
@@ -1,21 +1,21 @@
 // FIXME: something weird with our path definition in tsconfig and typings
 // @ts-ignore
 import * as videojs from 'video.js'
-import { P2PMediaLoaderPluginOptions, PlayerNetworkInfo, VideoJSComponentInterface } from './peertube-videojs-typings'
+import { P2PMediaLoaderPluginOptions, PlayerNetworkInfo, VideoJSComponentInterface } from '../peertube-videojs-typings'
+import { Engine, initHlsJsPlayer, initVideoJsContribHlsJsPlayer } from 'p2p-media-loader-hlsjs'
+import { Events } from 'p2p-media-loader-core'
 
 // videojs-hlsjs-plugin needs videojs in window
 window['videojs'] = videojs
 require('@streamroot/videojs-hlsjs-plugin')
 
-import { Engine, initVideoJsContribHlsJsPlayer } from 'p2p-media-loader-hlsjs'
-import { Events } from 'p2p-media-loader-core'
-
 const Plugin: VideoJSComponentInterface = videojs.getPlugin('plugin')
 class P2pMediaLoaderPlugin extends Plugin {
 
   private readonly CONSTANTS = {
     INFO_SCHEDULER: 1000 // Don't change this
   }
+  private readonly options: P2PMediaLoaderPluginOptions
 
   private hlsjs: any // Don't type hlsjs to not bundle the module
   private p2pEngine: Engine
@@ -26,16 +26,22 @@ class P2pMediaLoaderPlugin extends Plugin {
     totalDownload: 0,
     totalUpload: 0
   }
+  private statsHTTPBytes = {
+    pendingDownload: [] as number[],
+    pendingUpload: [] as number[],
+    totalDownload: 0,
+    totalUpload: 0
+  }
 
   private networkInfoInterval: any
 
   constructor (player: videojs.Player, options: P2PMediaLoaderPluginOptions) {
     super(player, options)
 
+    this.options = options
+
     videojs.Html5Hlsjs.addHook('beforeinitialize', (videojsPlayer: any, hlsjs: any) => {
       this.hlsjs = hlsjs
-
-      this.initialize()
     })
 
     initVideoJsContribHlsJsPlayer(player)
@@ -44,6 +50,8 @@ class P2pMediaLoaderPlugin extends Plugin {
       type: options.type,
       src: options.src
     })
+
+    player.ready(() => this.initialize())
   }
 
   dispose () {
@@ -51,6 +59,8 @@ class P2pMediaLoaderPlugin extends Plugin {
   }
 
   private initialize () {
+    initHlsJsPlayer(this.hlsjs)
+
     this.p2pEngine = this.player.tech_.options_.hlsjsConfig.loader.getEngine()
 
     // Avoid using constants to not import hls.hs
@@ -59,38 +69,55 @@ class P2pMediaLoaderPlugin extends Plugin {
       this.trigger('resolutionChange', { auto: this.hlsjs.autoLevelEnabled, resolutionId: data.height })
     })
 
+    this.p2pEngine.on(Events.SegmentError, (segment, err) => {
+      console.error('Segment error.', segment, err)
+    })
+
+    this.statsP2PBytes.numPeers = 1 + this.options.redundancyBaseUrls.length
+
     this.runStats()
   }
 
   private runStats () {
     this.p2pEngine.on(Events.PieceBytesDownloaded, (method: string, size: number) => {
-      if (method === 'p2p') {
-        this.statsP2PBytes.pendingDownload.push(size)
-        this.statsP2PBytes.totalDownload += size
-      }
+      const elem = method === 'p2p' ? this.statsP2PBytes : this.statsHTTPBytes
+
+      elem.pendingDownload.push(size)
+      elem.totalDownload += size
     })
 
     this.p2pEngine.on(Events.PieceBytesUploaded, (method: string, size: number) => {
-      if (method === 'p2p') {
-        this.statsP2PBytes.pendingUpload.push(size)
-        this.statsP2PBytes.totalUpload += size
-      }
+      const elem = method === 'p2p' ? this.statsP2PBytes : this.statsHTTPBytes
+
+      elem.pendingUpload.push(size)
+      elem.totalUpload += size
     })
 
     this.p2pEngine.on(Events.PeerConnect, () => this.statsP2PBytes.numPeers++)
     this.p2pEngine.on(Events.PeerClose, () => this.statsP2PBytes.numPeers--)
 
     this.networkInfoInterval = setInterval(() => {
-      let downloadSpeed = this.statsP2PBytes.pendingDownload.reduce((a: number, b: number) => a + b, 0)
-      let uploadSpeed = this.statsP2PBytes.pendingUpload.reduce((a: number, b: number) => a + b, 0)
+      const p2pDownloadSpeed = this.arraySum(this.statsP2PBytes.pendingDownload)
+      const p2pUploadSpeed = this.arraySum(this.statsP2PBytes.pendingUpload)
+
+      const httpDownloadSpeed = this.arraySum(this.statsHTTPBytes.pendingDownload)
+      const httpUploadSpeed = this.arraySum(this.statsHTTPBytes.pendingUpload)
 
       this.statsP2PBytes.pendingDownload = []
       this.statsP2PBytes.pendingUpload = []
+      this.statsHTTPBytes.pendingDownload = []
+      this.statsHTTPBytes.pendingUpload = []
 
       return this.player.trigger('p2pInfo', {
+        http: {
+          downloadSpeed: httpDownloadSpeed,
+          uploadSpeed: httpUploadSpeed,
+          downloaded: this.statsHTTPBytes.totalDownload,
+          uploaded: this.statsHTTPBytes.totalUpload
+        },
         p2p: {
-          downloadSpeed,
-          uploadSpeed,
+          downloadSpeed: p2pDownloadSpeed,
+          uploadSpeed: p2pUploadSpeed,
           numPeers: this.statsP2PBytes.numPeers,
           downloaded: this.statsP2PBytes.totalDownload,
           uploaded: this.statsP2PBytes.totalUpload
@@ -98,6 +125,10 @@ class P2pMediaLoaderPlugin extends Plugin {
       } as PlayerNetworkInfo)
     }, this.CONSTANTS.INFO_SCHEDULER)
   }
+
+  private arraySum (data: number[]) {
+    return data.reduce((a: number, b: number) => a + b, 0)
+  }
 }
 
 videojs.registerPlugin('p2pMediaLoader', P2pMediaLoaderPlugin)
diff --git a/client/src/assets/player/p2p-media-loader/segment-url-builder.ts b/client/src/assets/player/p2p-media-loader/segment-url-builder.ts
new file mode 100644
index 000000000..32e7ce4f2
--- /dev/null
+++ b/client/src/assets/player/p2p-media-loader/segment-url-builder.ts
@@ -0,0 +1,28 @@
+import { basename } from 'path'
+import { Segment } from 'p2p-media-loader-core'
+
+function segmentUrlBuilderFactory (baseUrls: string[]) {
+  return function segmentBuilder (segment: Segment) {
+    const max = baseUrls.length + 1
+    const i = getRandomInt(max)
+
+    if (i === max - 1) return segment.url
+
+    let newBaseUrl = baseUrls[i]
+    let middlePart = newBaseUrl.endsWith('/') ? '' : '/'
+
+    return newBaseUrl + middlePart + basename(segment.url)
+  }
+}
+
+// ---------------------------------------------------------------------------
+
+export {
+  segmentUrlBuilderFactory
+}
+
+// ---------------------------------------------------------------------------
+
+function getRandomInt (max: number) {
+  return Math.floor(Math.random() * Math.floor(max))
+}
diff --git a/client/src/assets/player/p2p-media-loader/segment-validator.ts b/client/src/assets/player/p2p-media-loader/segment-validator.ts
new file mode 100644
index 000000000..8f4922daa
--- /dev/null
+++ b/client/src/assets/player/p2p-media-loader/segment-validator.ts
@@ -0,0 +1,56 @@
+import { Segment } from 'p2p-media-loader-core'
+import { basename } from 'path'
+
+function segmentValidatorFactory (segmentsSha256Url: string) {
+  const segmentsJSON = fetchSha256Segments(segmentsSha256Url)
+
+  return async function segmentValidator (segment: Segment) {
+    const segmentName = basename(segment.url)
+
+    const hashShouldBe = (await segmentsJSON)[segmentName]
+    if (hashShouldBe === undefined) {
+      throw new Error(`Unknown segment name ${segmentName} in segment validator`)
+    }
+
+    const calculatedSha = bufferToEx(await sha256(segment.data))
+    if (calculatedSha !== hashShouldBe) {
+      throw new Error(`Hashes does not correspond for segment ${segmentName} (expected: ${hashShouldBe} instead of ${calculatedSha})`)
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+
+export {
+  segmentValidatorFactory
+}
+
+// ---------------------------------------------------------------------------
+
+function fetchSha256Segments (url: string) {
+  return fetch(url)
+    .then(res => res.json())
+    .catch(err => {
+      console.error('Cannot get sha256 segments', err)
+      return {}
+    })
+}
+
+function sha256 (data?: ArrayBuffer) {
+  if (!data) return undefined
+
+  return window.crypto.subtle.digest('SHA-256', data)
+}
+
+// Thanks: https://stackoverflow.com/a/53307879
+function bufferToEx (buffer?: ArrayBuffer) {
+  if (!buffer) return ''
+
+  let s = ''
+  const h = '0123456789abcdef'
+  const o = new Uint8Array(buffer)
+
+  o.forEach((v: any) => s += h[ v >> 4 ] + h[ v & 15 ])
+
+  return s
+}
diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts
index 91ca6a2aa..3fdba6fdf 100644
--- a/client/src/assets/player/peertube-player-manager.ts
+++ b/client/src/assets/player/peertube-player-manager.ts
@@ -13,8 +13,10 @@ import './videojs-components/p2p-info-button'
 import './videojs-components/peertube-load-progress-bar'
 import './videojs-components/theater-button'
 import { P2PMediaLoaderPluginOptions, UserWatching, VideoJSCaption, VideoJSPluginOptions, videojsUntyped } from './peertube-videojs-typings'
-import { buildVideoEmbed, buildVideoLink, copyToClipboard } from './utils'
+import { buildVideoEmbed, buildVideoLink, copyToClipboard, getRtcConfig } from './utils'
 import { getCompleteLocale, getShortLocale, is18nLocale, isDefaultLocale } from '../../../../shared/models/i18n/i18n'
+import { segmentValidatorFactory } from './p2p-media-loader/segment-validator'
+import { segmentUrlBuilderFactory } from './p2p-media-loader/segment-url-builder'
 
 // Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
 videojsUntyped.getComponent('PlaybackRateMenuButton').prototype.controlText_ = 'Speed'
@@ -31,7 +33,10 @@ export type WebtorrentOptions = {
 
 export type P2PMediaLoaderOptions = {
   playlistUrl: string
+  segmentsSha256Url: string
   trackerAnnounce: string[]
+  redundancyBaseUrls: string[]
+  videoFiles: VideoFile[]
 }
 
 export type CommonOptions = {
@@ -90,11 +95,11 @@ export class PeertubePlayerManager {
   static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions) {
     let p2pMediaLoader: any
 
-    if (mode === 'webtorrent') await import('./webtorrent-plugin')
+    if (mode === 'webtorrent') await import('./webtorrent/webtorrent-plugin')
     if (mode === 'p2p-media-loader') {
       [ p2pMediaLoader ] = await Promise.all([
         import('p2p-media-loader-hlsjs'),
-        import('./p2p-media-loader-plugin')
+        import('./p2p-media-loader/p2p-media-loader-plugin')
       ])
     }
 
@@ -144,11 +149,14 @@ export class PeertubePlayerManager {
     const commonOptions = options.common
     const webtorrentOptions = options.webtorrent
     const p2pMediaLoaderOptions = options.p2pMediaLoader
+
+    let autoplay = options.common.autoplay
     let html5 = {}
 
     const plugins: VideoJSPluginOptions = {
       peertube: {
-        autoplay: commonOptions.autoplay, // Use peertube plugin autoplay because we get the file by webtorrent
+        mode,
+        autoplay, // Use peertube plugin autoplay because we get the file by webtorrent
         videoViewUrl: commonOptions.videoViewUrl,
         videoDuration: commonOptions.videoDuration,
         startTime: commonOptions.startTime,
@@ -160,19 +168,35 @@ export class PeertubePlayerManager {
 
     if (p2pMediaLoaderOptions) {
       const p2pMediaLoader: P2PMediaLoaderPluginOptions = {
+        redundancyBaseUrls: options.p2pMediaLoader.redundancyBaseUrls,
         type: 'application/x-mpegURL',
         src: p2pMediaLoaderOptions.playlistUrl
       }
 
+      const trackerAnnounce = p2pMediaLoaderOptions.trackerAnnounce
+        .filter(t => t.startsWith('ws'))
+
       const p2pMediaLoaderConfig = {
-        // loader: {
-        //   trackerAnnounce: p2pMediaLoaderOptions.trackerAnnounce
-        // },
+        loader: {
+          trackerAnnounce,
+          segmentValidator: segmentValidatorFactory(options.p2pMediaLoader.segmentsSha256Url),
+          rtcConfig: getRtcConfig(),
+          requiredSegmentsPriority: 5,
+          segmentUrlBuilder: segmentUrlBuilderFactory(options.p2pMediaLoader.redundancyBaseUrls)
+        },
         segments: {
           swarmId: p2pMediaLoaderOptions.playlistUrl
         }
       }
       const streamrootHls = {
+        levelLabelHandler: (level: { height: number, width: number }) => {
+          const file = p2pMediaLoaderOptions.videoFiles.find(f => f.resolution.id === level.height)
+
+          let label = file.resolution.label
+          if (file.fps >= 50) label += file.fps
+
+          return label
+        },
         html5: {
           hlsjsConfig: {
             liveSyncDurationCount: 7,
@@ -187,12 +211,15 @@ export class PeertubePlayerManager {
 
     if (webtorrentOptions) {
       const webtorrent = {
-        autoplay: commonOptions.autoplay,
+        autoplay,
         videoDuration: commonOptions.videoDuration,
         playerElement: commonOptions.playerElement,
         videoFiles: webtorrentOptions.videoFiles
       }
       Object.assign(plugins, { webtorrent })
+
+      // WebTorrent plugin handles autoplay, because we do some hackish stuff in there
+      autoplay = false
     }
 
     const videojsOptions = {
@@ -208,7 +235,7 @@ export class PeertubePlayerManager {
         : undefined, // Undefined so the player knows it has to check the local storage
 
       poster: commonOptions.poster,
-      autoplay: false,
+      autoplay,
       inactivityTimeout: commonOptions.inactivityTimeout,
       playbackRates: [ 0.5, 0.75, 1, 1.25, 1.5, 2 ],
       plugins,
diff --git a/client/src/assets/player/peertube-plugin.ts b/client/src/assets/player/peertube-plugin.ts
index f83d9094a..aacbf5f6e 100644
--- a/client/src/assets/player/peertube-plugin.ts
+++ b/client/src/assets/player/peertube-plugin.ts
@@ -52,12 +52,12 @@ class PeerTubePlugin extends Plugin {
     this.player.ready(() => {
       const playerOptions = this.player.options_
 
-      if (this.player.webtorrent) {
+      if (options.mode === 'webtorrent') {
         this.player.webtorrent().on('resolutionChange', (_: any, d: any) => this.handleResolutionChange(d))
         this.player.webtorrent().on('autoResolutionChange', (_: any, d: any) => this.trigger('autoResolutionChange', d))
       }
 
-      if (this.player.p2pMediaLoader) {
+      if (options.mode === 'p2p-media-loader') {
         this.player.p2pMediaLoader().on('resolutionChange', (_: any, d: any) => this.handleResolutionChange(d))
       }
 
diff --git a/client/src/assets/player/peertube-videojs-typings.ts b/client/src/assets/player/peertube-videojs-typings.ts
index fff992a6f..79a5a6c4d 100644
--- a/client/src/assets/player/peertube-videojs-typings.ts
+++ b/client/src/assets/player/peertube-videojs-typings.ts
@@ -4,12 +4,15 @@ import * as videojs from 'video.js'
 
 import { VideoFile } from '../../../../shared/models/videos/video.model'
 import { PeerTubePlugin } from './peertube-plugin'
-import { WebTorrentPlugin } from './webtorrent-plugin'
+import { WebTorrentPlugin } from './webtorrent/webtorrent-plugin'
+import { P2pMediaLoaderPlugin } from './p2p-media-loader/p2p-media-loader-plugin'
+import { PlayerMode } from './peertube-player-manager'
 
 declare namespace videojs {
   interface Player {
     peertube (): PeerTubePlugin
     webtorrent (): WebTorrentPlugin
+    p2pMediaLoader (): P2pMediaLoaderPlugin
   }
 }
 
@@ -33,6 +36,8 @@ type UserWatching = {
 }
 
 type PeerTubePluginOptions = {
+  mode: PlayerMode
+
   autoplay: boolean
   videoViewUrl: string
   videoDuration: number
@@ -54,6 +59,7 @@ type WebtorrentPluginOptions = {
 }
 
 type P2PMediaLoaderPluginOptions = {
+  redundancyBaseUrls: string[]
   type: string
   src: string
 }
@@ -91,6 +97,13 @@ type AutoResolutionUpdateData = {
 }
 
 type PlayerNetworkInfo = {
+  http: {
+    downloadSpeed: number
+    uploadSpeed: number
+    downloaded: number
+    uploaded: number
+  }
+
   p2p: {
     downloadSpeed: number
     uploadSpeed: number
diff --git a/client/src/assets/player/utils.ts b/client/src/assets/player/utils.ts
index 8b9f34b99..8d87567c2 100644
--- a/client/src/assets/player/utils.ts
+++ b/client/src/assets/player/utils.ts
@@ -112,9 +112,23 @@ function videoFileMinByResolution (files: VideoFile[]) {
   return min
 }
 
+function getRtcConfig () {
+  return {
+    iceServers: [
+      {
+        urls: 'stun:stun.stunprotocol.org'
+      },
+      {
+        urls: 'stun:stun.framasoft.org'
+      }
+    ]
+  }
+}
+
 // ---------------------------------------------------------------------------
 
 export {
+  getRtcConfig,
   toTitleCase,
   timeToInt,
   buildVideoLink,
diff --git a/client/src/assets/player/videojs-components/p2p-info-button.ts b/client/src/assets/player/videojs-components/p2p-info-button.ts
index 2fc4c4562..6424787b2 100644
--- a/client/src/assets/player/videojs-components/p2p-info-button.ts
+++ b/client/src/assets/player/videojs-components/p2p-info-button.ts
@@ -75,11 +75,12 @@ class P2pInfoButton extends Button {
       }
 
       const p2pStats = data.p2p
+      const httpStats = data.http
 
-      const downloadSpeed = bytes(p2pStats.downloadSpeed)
-      const uploadSpeed = bytes(p2pStats.uploadSpeed)
-      const totalDownloaded = bytes(p2pStats.downloaded)
-      const totalUploaded = bytes(p2pStats.uploaded)
+      const downloadSpeed = bytes(p2pStats.downloadSpeed + httpStats.downloadSpeed)
+      const uploadSpeed = bytes(p2pStats.uploadSpeed + httpStats.uploadSpeed)
+      const totalDownloaded = bytes(p2pStats.downloaded + httpStats.downloaded)
+      const totalUploaded = bytes(p2pStats.uploaded + httpStats.uploaded)
       const numPeers = p2pStats.numPeers
 
       subDivWebtorrent.title = this.player_.localize('Total downloaded: ') + totalDownloaded.join(' ') + '\n' +
@@ -92,7 +93,7 @@ class P2pInfoButton extends Button {
       uploadSpeedUnit.textContent = ' ' + uploadSpeed[ 1 ]
 
       peersNumber.textContent = numPeers
-      peersText.textContent = ' ' + this.player_.localize('peers')
+      peersText.textContent = ' ' + (numPeers > 1 ? this.player_.localize('peers') : this.player_.localize('peer'))
 
       subDivHttp.className = 'vjs-peertube-hidden'
       subDivWebtorrent.className = 'vjs-peertube-displayed'
diff --git a/client/src/assets/player/webtorrent-plugin.ts b/client/src/assets/player/webtorrent/webtorrent-plugin.ts
index 47f169e24..c69bf31fa 100644
--- a/client/src/assets/player/webtorrent-plugin.ts
+++ b/client/src/assets/player/webtorrent/webtorrent-plugin.ts
@@ -3,18 +3,18 @@
 import * as videojs from 'video.js'
 
 import * as WebTorrent from 'webtorrent'
-import { VideoFile } from '../../../../shared/models/videos/video.model'
-import { renderVideo } from './webtorrent/video-renderer'
-import { LoadedQualityData, PlayerNetworkInfo, VideoJSComponentInterface, WebtorrentPluginOptions } from './peertube-videojs-typings'
-import { videoFileMaxByResolution, videoFileMinByResolution } from './utils'
-import { PeertubeChunkStore } from './webtorrent/peertube-chunk-store'
+import { VideoFile } from '../../../../../shared/models/videos/video.model'
+import { renderVideo } from './video-renderer'
+import { LoadedQualityData, PlayerNetworkInfo, VideoJSComponentInterface, WebtorrentPluginOptions } from '../peertube-videojs-typings'
+import { getRtcConfig, videoFileMaxByResolution, videoFileMinByResolution } from '../utils'
+import { PeertubeChunkStore } from './peertube-chunk-store'
 import {
   getAverageBandwidthInStore,
   getStoredMute,
   getStoredVolume,
   getStoredWebTorrentEnabled,
   saveAverageBandwidth
-} from './peertube-player-local-storage'
+} from '../peertube-player-local-storage'
 
 const CacheChunkStore = require('cache-chunk-store')
 
@@ -44,16 +44,7 @@ class WebTorrentPlugin extends Plugin {
 
   private readonly webtorrent = new WebTorrent({
     tracker: {
-      rtcConfig: {
-        iceServers: [
-          {
-            urls: 'stun:stun.stunprotocol.org'
-          },
-          {
-            urls: 'stun:stun.framasoft.org'
-          }
-        ]
-      }
+      rtcConfig: getRtcConfig()
     },
     dht: false
   })
@@ -472,6 +463,12 @@ class WebTorrentPlugin extends Plugin {
       if (this.webtorrent.downloadSpeed !== 0) this.downloadSpeeds.push(this.webtorrent.downloadSpeed)
 
       return this.player.trigger('p2pInfo', {
+        http: {
+          downloadSpeed: 0,
+          uploadSpeed: 0,
+          downloaded: 0,
+          uploaded: 0
+        },
         p2p: {
           downloadSpeed: this.torrent.downloadSpeed,
           numPeers: this.torrent.numPeers,