Fast forward on HLS decode error

1 files changed, 80 insertions, 522 deletions

diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts
index b9a289aa0..2ef42a961 100644
--- a/client/src/assets/player/peertube-player-manager.ts
+++ b/client/src/assets/player/peertube-player-manager.ts
@@ -24,28 +24,12 @@ import './mobile/peertube-mobile-plugin'
 import './mobile/peertube-mobile-buttons'
 import './hotkeys/peertube-hotkeys-plugin'
 import videojs from 'video.js'
-import { HlsJsEngineSettings } from '@peertube/p2p-media-loader-hlsjs'
 import { PluginsManager } from '@root-helpers/plugins-manager'
-import { buildVideoLink, decorateVideoLink } from '@shared/core-utils'
-import { isDefaultLocale } from '@shared/core-utils/i18n'
-import { VideoFile } from '@shared/models'
-import { copyToClipboard } from '../../root-helpers/utils'
-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'
-import { getAverageBandwidthInStore, saveAverageBandwidth } from './peertube-player-local-storage'
-import {
-  NextPreviousVideoButtonOptions,
-  P2PMediaLoaderPluginOptions,
-  PeerTubeLinkButtonOptions,
-  PlayerNetworkInfo,
-  PlaylistPluginOptions,
-  UserWatching,
-  VideoJSCaption,
-  VideoJSPluginOptions
-} from './peertube-videojs-typings'
+import { saveAverageBandwidth } from './peertube-player-local-storage'
+import { CommonOptions, PeertubePlayerManagerOptions, PeertubePlayerOptionsBuilder, PlayerMode } from './peertube-player-options-builder'
+import { PlayerNetworkInfo } from './peertube-videojs-typings'
 import { TranslationsManager } from './translations-manager'
-import { buildVideoOrPlaylistEmbed, getRtcConfig, isIOS, isMobile, isSafari } from './utils'
+import { isMobile } from './utils'
 
 // Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
 (videojs.getComponent('PlaybackRateMenuButton') as any).prototype.controlText_ = 'Speed'
@@ -56,112 +40,49 @@ CaptionsButton.prototype.controlText_ = 'Subtitles/CC'
 // We just want to display 'Off' instead of 'captions off', keep a space so the variable == true (hacky I know)
 CaptionsButton.prototype.label_ = ' '
 
-export type PlayerMode = 'webtorrent' | 'p2p-media-loader'
-
-export type WebtorrentOptions = {
-  videoFiles: VideoFile[]
-}
-
-export type P2PMediaLoaderOptions = {
-  playlistUrl: string
-  segmentsSha256Url: string
-  trackerAnnounce: string[]
-  redundancyBaseUrls: string[]
-  videoFiles: VideoFile[]
-}
-
-export interface CustomizationOptions {
-  startTime: number | string
-  stopTime: number | string
-
-  controls?: boolean
-  muted?: boolean
-  loop?: boolean
-  subtitle?: string
-  resume?: string
-
-  peertubeLink: boolean
-}
-
-export interface CommonOptions extends CustomizationOptions {
-  playerElement: HTMLVideoElement
-  onPlayerElementChange: (element: HTMLVideoElement) => void
-
-  autoplay: boolean
-  p2pEnabled: boolean
-
-  nextVideo?: () => void
-  hasNextVideo?: () => boolean
-
-  previousVideo?: () => void
-  hasPreviousVideo?: () => boolean
-
-  playlist?: PlaylistPluginOptions
-
-  videoDuration: number
-  enableHotkeys: boolean
-  inactivityTimeout: number
-  poster: string
-
-  theaterButton: boolean
-  captions: boolean
-
-  videoViewUrl: string
-  embedUrl: string
-  embedTitle: string
-
-  isLive: boolean
-
-  language?: string
-
-  videoCaptions: VideoJSCaption[]
-
-  videoUUID: string
-  videoShortUUID: string
-
-  userWatching?: UserWatching
-
-  serverUrl: string
-}
-
-export type PeertubePlayerManagerOptions = {
-  common: CommonOptions
-  webtorrent: WebtorrentOptions
-  p2pMediaLoader?: P2PMediaLoaderOptions
-
-  pluginsManager: PluginsManager
-}
-
 export class PeertubePlayerManager {
   private static playerElementClassName: string
   private static onPlayerChange: (player: videojs.Player) => void
   private static alreadyPlayed = false
   private static pluginsManager: PluginsManager
 
+  private static videojsDecodeErrors = 0
+
+  private static p2pMediaLoaderModule: any
+
   static initState () {
-    PeertubePlayerManager.alreadyPlayed = false
+    this.alreadyPlayed = false
   }
 
   static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions, onPlayerChange: (player: videojs.Player) => void) {
     this.pluginsManager = options.pluginsManager
 
-    let p2pMediaLoader: any
-
     this.onPlayerChange = onPlayerChange
     this.playerElementClassName = options.common.playerElement.className
 
     if (mode === 'webtorrent') await import('./webtorrent/webtorrent-plugin')
     if (mode === 'p2p-media-loader') {
-      [ p2pMediaLoader ] = await Promise.all([
+      const [ p2pMediaLoaderModule ] = await Promise.all([
         import('@peertube/p2p-media-loader-hlsjs'),
         import('./p2p-media-loader/p2p-media-loader-plugin')
       ])
-    }
 
-    const videojsOptions = await this.getVideojsOptions(mode, options, p2pMediaLoader)
+      this.p2pMediaLoaderModule = p2pMediaLoaderModule
+    }
 
     await TranslationsManager.loadLocaleInVideoJS(options.common.serverUrl, options.common.language, videojs)
 
+    return this.buildPlayer(mode, options)
+  }
+
+  private static async buildPlayer (mode: PlayerMode, options: PeertubePlayerManagerOptions): Promise<videojs.Player> {
+    const videojsOptionsBuilder = new PeertubePlayerOptionsBuilder(mode, options, this.p2pMediaLoaderModule)
+
+    const videojsOptions = await this.pluginsManager.runHook(
+      'filter:internal.player.videojs.options.result',
+      videojsOptionsBuilder.getVideojsOptions(this.alreadyPlayed)
+    )
+
     const self = this
     return new Promise(res => {
       videojs(options.common.playerElement, videojsOptions, function (this: videojs.Player) {
@@ -169,27 +90,24 @@ export class PeertubePlayerManager {
 
         let alreadyFallback = false
 
-        player.tech(true).one('error', () => {
-          if (!alreadyFallback) self.maybeFallbackToWebTorrent(mode, player, options)
+        const handleError = () => {
+          if (alreadyFallback) return
           alreadyFallback = true
-        })
 
-        player.one('error', () => {
-          if (!alreadyFallback) self.maybeFallbackToWebTorrent(mode, player, options)
-          alreadyFallback = true
-        })
+          if (mode === 'p2p-media-loader') {
+            self.tryToRecoverHLSError(player.error(), player, options)
+          } else {
+            self.maybeFallbackToWebTorrent(mode, player, options)
+          }
+        }
+
+        player.one('error', () => handleError())
 
         player.one('play', () => {
-          PeertubePlayerManager.alreadyPlayed = true
+          self.alreadyPlayed = true
         })
 
-        self.addContextMenu({
-          mode,
-          player,
-          videoShortUUID: options.common.videoShortUUID,
-          videoEmbedUrl: options.common.embedUrl,
-          videoEmbedTitle: options.common.embedTitle
-        })
+        self.addContextMenu(videojsOptionsBuilder, player, options.common)
 
         if (isMobile()) player.peertubeMobile()
         if (options.common.enableHotkeys === true) player.peerTubeHotkeysPlugin()
@@ -214,437 +132,77 @@ export class PeertubePlayerManager {
     })
   }
 
-  private static async maybeFallbackToWebTorrent (currentMode: PlayerMode, player: any, options: PeertubePlayerManagerOptions) {
-    if (currentMode === 'webtorrent') return
-
-    console.log('Fallback to webtorrent.')
-
-    const newVideoElement = document.createElement('video')
-    newVideoElement.className = this.playerElementClassName
-
-    // VideoJS wraps our video element inside a div
-    let currentParentPlayerElement = options.common.playerElement.parentNode
-    // Fix on IOS, don't ask me why
-    if (!currentParentPlayerElement) currentParentPlayerElement = document.getElementById(options.common.playerElement.id).parentNode
-
-    currentParentPlayerElement.parentNode.insertBefore(newVideoElement, currentParentPlayerElement)
-
-    options.common.playerElement = newVideoElement
-    options.common.onPlayerElementChange(newVideoElement)
-
-    player.dispose()
-
-    await import('./webtorrent/webtorrent-plugin')
-
-    const mode = 'webtorrent'
-    const videojsOptions = await this.getVideojsOptions(mode, options)
+  private static async tryToRecoverHLSError (err: any, currentPlayer: videojs.Player, options: PeertubePlayerManagerOptions) {
+    if (err.code === 3) { // Decode error
 
-    const self = this
-    videojs(newVideoElement, videojsOptions, function (this: videojs.Player) {
-      const player = this
-
-      self.addContextMenu({
-        mode,
-        player,
-        videoShortUUID: options.common.videoShortUUID,
-        videoEmbedUrl: options.common.embedUrl,
-        videoEmbedTitle: options.common.embedTitle
-      })
-
-      PeertubePlayerManager.onPlayerChange(player)
-    })
-  }
-
-  private static async getVideojsOptions (
-    mode: PlayerMode,
-    options: PeertubePlayerManagerOptions,
-    p2pMediaLoaderModule?: any
-  ): Promise<videojs.PlayerOptions> {
-    const commonOptions = options.common
-    const isHLS = mode === 'p2p-media-loader'
-
-    let autoplay = this.getAutoPlayValue(commonOptions.autoplay)
-    const html5 = {
-      preloadTextTracks: false
-    }
-
-    const plugins: VideoJSPluginOptions = {
-      peertube: {
-        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
+      // Display a notification to user
+      if (this.videojsDecodeErrors === 0) {
+        options.common.errorNotifier(currentPlayer.localize('The video failed to play, will try to fast forward.'))
       }
-    }
-
-    if (commonOptions.playlist) {
-      plugins.playlist = commonOptions.playlist
-    }
-
-    if (isHLS) {
-      const { hlsjs } = PeertubePlayerManager.addP2PMediaLoaderOptions(plugins, options, p2pMediaLoaderModule)
-
-      Object.assign(html5, hlsjs.html5)
-    }
-
-    if (mode === 'webtorrent') {
-      PeertubePlayerManager.addWebTorrentOptions(plugins, options)
-
-      // WebTorrent plugin handles autoplay, because we do some hackish stuff in there
-      autoplay = false
-    }
-
-    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),
-
-      poster: commonOptions.poster,
-      inactivityTimeout: commonOptions.inactivityTimeout,
-      playbackRates: [ 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2 ],
-
-      plugins,
-
-      controlBar: {
-        children: this.getControlBarChildren(mode, {
-          videoShortUUID: commonOptions.videoShortUUID,
-          p2pEnabled: commonOptions.p2pEnabled,
-
-          captions: commonOptions.captions,
-          peertubeLink: commonOptions.peertubeLink,
-          theaterButton: commonOptions.theaterButton,
-
-          nextVideo: commonOptions.nextVideo,
-          hasNextVideo: commonOptions.hasNextVideo,
 
-          previousVideo: commonOptions.previousVideo,
-          hasPreviousVideo: commonOptions.hasPreviousVideo
-        }) as any // FIXME: typings
+      if (this.videojsDecodeErrors === 20) {
+        this.maybeFallbackToWebTorrent('p2p-media-loader', currentPlayer, options)
+        return
       }
-    }
-
-    if (commonOptions.language && !isDefaultLocale(commonOptions.language)) {
-      Object.assign(videojsOptions, { language: commonOptions.language })
-    }
-
-    return this.pluginsManager.runHook('filter:internal.player.videojs.options.result', videojsOptions)
-  }
-
-  private static addP2PMediaLoaderOptions (
-    plugins: VideoJSPluginOptions,
-    options: PeertubePlayerManagerOptions,
-    p2pMediaLoaderModule: any
-  ) {
-    const p2pMediaLoaderOptions = options.p2pMediaLoader
-    const commonOptions = options.common
-
-    const trackerAnnounce = p2pMediaLoaderOptions.trackerAnnounce
-                                                 .filter(t => t.startsWith('ws'))
-
-    const redundancyUrlManager = new RedundancyUrlManager(options.p2pMediaLoader.redundancyBaseUrls)
-
-    const p2pMediaLoader: P2PMediaLoaderPluginOptions = {
-      redundancyUrlManager,
-      type: 'application/x-mpegURL',
-      startTime: commonOptions.startTime,
-      src: p2pMediaLoaderOptions.playlistUrl
-    }
 
-    let consumeOnly = false
-    if ((navigator as any)?.connection?.type === 'cellular') {
-      console.log('We are on a cellular connection: disabling seeding.')
-      consumeOnly = true
-    }
-
-    const p2pMediaLoaderConfig: HlsJsEngineSettings = {
-      loader: {
-        trackerAnnounce,
-        segmentValidator: segmentValidatorFactory(options.p2pMediaLoader.segmentsSha256Url, options.common.isLive),
-        rtcConfig: getRtcConfig(),
-        requiredSegmentsPriority: 1,
-        simultaneousHttpDownloads: 1,
-        segmentUrlBuilder: segmentUrlBuilderFactory(redundancyUrlManager, 1),
-        useP2P: commonOptions.p2pEnabled,
-        consumeOnly
-      },
-      segments: {
-        swarmId: p2pMediaLoaderOptions.playlistUrl
-      }
-    }
-
-    const hlsjs = {
-      levelLabelHandler: (level: { height: number, width: number }) => {
-        const resolution = Math.min(level.height || 0, level.width || 0)
+      console.log('Fast forwarding HLS to recover from an error.')
 
-        const file = p2pMediaLoaderOptions.videoFiles.find(f => f.resolution.id === resolution)
-        // We don't have files for live videos
-        if (!file) return level.height
+      this.videojsDecodeErrors++
 
-        let label = file.resolution.label
-        if (file.fps >= 50) label += file.fps
+      options.common.startTime = currentPlayer.currentTime() + 2
+      options.common.autoplay = true
+      this.rebuildAndUpdateVideoElement(currentPlayer, options.common)
 
-        return label
-      },
-      html5: {
-        hlsjsConfig: this.getHLSOptions(p2pMediaLoaderModule, p2pMediaLoaderConfig)
-      }
+      const newPlayer = await this.buildPlayer('p2p-media-loader', options)
+      this.onPlayerChange(newPlayer)
+    } else {
+      this.maybeFallbackToWebTorrent('p2p-media-loader', currentPlayer, options)
     }
-
-    const toAssign = { p2pMediaLoader, hlsjs }
-    Object.assign(plugins, toAssign)
-
-    return toAssign
   }
 
-  private static getHLSOptions (p2pMediaLoaderModule: any, p2pMediaLoaderConfig: HlsJsEngineSettings) {
-    const base = {
-      capLevelToPlayerSize: true,
-      autoStartLoad: false,
-      liveSyncDurationCount: 5,
-
-      loader: new p2pMediaLoaderModule.Engine(p2pMediaLoaderConfig).createLoaderClass()
-    }
-
-    const averageBandwidth = getAverageBandwidthInStore()
-    if (!averageBandwidth) return base
-
-    return {
-      ...base,
-
-      abrEwmaDefaultEstimate: averageBandwidth * 8, // We want bit/s
-      startLevel: -1,
-      testBandwidth: false,
-      debug: false
-    }
-  }
-
-  private static addWebTorrentOptions (plugins: VideoJSPluginOptions, options: PeertubePlayerManagerOptions) {
-    const commonOptions = options.common
-    const webtorrentOptions = options.webtorrent
-    const p2pMediaLoaderOptions = options.p2pMediaLoader
-
-    const autoplay = this.getAutoPlayValue(commonOptions.autoplay) === '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
-    }
-
-    Object.assign(plugins, { webtorrent })
-  }
-
-  private static getControlBarChildren (mode: PlayerMode, options: {
-    p2pEnabled: boolean
-    videoShortUUID: string
-
-    peertubeLink: boolean
-    theaterButton: boolean
-    captions: boolean
-
-    nextVideo?: () => void
-    hasNextVideo?: () => boolean
-
-    previousVideo?: () => void
-    hasPreviousVideo?: () => boolean
-  }) {
-    const settingEntries = []
-    const loadProgressBar = mode === 'webtorrent' ? 'peerTubeLoadProgressBar' : 'loadProgressBar'
-
-    // Keep an order
-    settingEntries.push('playbackRateMenuButton')
-    if (options.captions === true) settingEntries.push('captionsButton')
-    settingEntries.push('resolutionMenuButton')
-
-    const children = {}
-
-    if (options.previousVideo) {
-      const buttonOptions: NextPreviousVideoButtonOptions = {
-        type: 'previous',
-        handler: options.previousVideo,
-        isDisabled: () => {
-          if (!options.hasPreviousVideo) return false
-
-          return !options.hasPreviousVideo()
-        }
-      }
-
-      Object.assign(children, {
-        previousVideoButton: buttonOptions
-      })
-    }
-
-    Object.assign(children, { playToggle: {} })
-
-    if (options.nextVideo) {
-      const buttonOptions: NextPreviousVideoButtonOptions = {
-        type: 'next',
-        handler: options.nextVideo,
-        isDisabled: () => {
-          if (!options.hasNextVideo) return false
-
-          return !options.hasNextVideo()
-        }
-      }
-
-      Object.assign(children, {
-        nextVideoButton: buttonOptions
-      })
+  private static async maybeFallbackToWebTorrent (
+    currentMode: PlayerMode,
+    currentPlayer: videojs.Player,
+    options: PeertubePlayerManagerOptions
+  ) {
+    if (options.webtorrent.videoFiles.length === 0 || currentMode === 'webtorrent') {
+      currentPlayer.peertube().displayFatalError()
+      return
     }
 
-    Object.assign(children, {
-      currentTimeDisplay: {},
-      timeDivider: {},
-      durationDisplay: {},
-      liveDisplay: {},
-
-      flexibleWidthSpacer: {},
-      progressControl: {
-        children: {
-          seekBar: {
-            children: {
-              [loadProgressBar]: {},
-              mouseTimeDisplay: {},
-              playProgressBar: {}
-            }
-          }
-        }
-      },
-
-      p2PInfoButton: {
-        p2pEnabled: options.p2pEnabled
-      },
-
-      muteToggle: {},
-      volumeControl: {},
-
-      settingsButton: {
-        setup: {
-          maxHeightOffset: 40
-        },
-        entries: settingEntries
-      }
-    })
-
-    if (options.peertubeLink === true) {
-      Object.assign(children, {
-        peerTubeLinkButton: { shortUUID: options.videoShortUUID } as PeerTubeLinkButtonOptions
-      })
-    }
+    console.log('Fallback to webtorrent.')
 
-    if (options.theaterButton === true) {
-      Object.assign(children, {
-        theaterButton: {}
-      })
-    }
+    this.rebuildAndUpdateVideoElement(currentPlayer, options.common)
 
-    Object.assign(children, {
-      fullscreenToggle: {}
-    })
+    await import('./webtorrent/webtorrent-plugin')
 
-    return children
+    const newPlayer = await this.buildPlayer('webtorrent', options)
+    this.onPlayerChange(newPlayer)
   }
 
-  private static addContextMenu (options: {
-    mode: PlayerMode
-    player: videojs.Player
-    videoShortUUID: string
-    videoEmbedUrl: string
-    videoEmbedTitle: string
-  }) {
-    const { mode, player, videoEmbedTitle, videoEmbedUrl, videoShortUUID } = options
-
-    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: videoShortUUID }))
-          }
-        },
-        {
-          label: player.localize('Copy the video URL at the current time'),
-          listener: function (this: videojs.Player) {
-            const url = buildVideoLink({ shortUUID: videoShortUUID })
+  private static rebuildAndUpdateVideoElement (player: videojs.Player, commonOptions: CommonOptions) {
+    const newVideoElement = document.createElement('video')
+    newVideoElement.className = this.playerElementClassName
 
-            copyToClipboard(decorateVideoLink({ url, startTime: this.currentTime() }))
-          }
-        },
-        {
-          icon: 'code',
-          label: player.localize('Copy embed code'),
-          listener: () => {
-            copyToClipboard(buildVideoOrPlaylistEmbed(videoEmbedUrl, videoEmbedTitle))
-          }
-        }
-      ]
+    // VideoJS wraps our video element inside a div
+    let currentParentPlayerElement = commonOptions.playerElement.parentNode
+    // Fix on IOS, don't ask me why
+    if (!currentParentPlayerElement) currentParentPlayerElement = document.getElementById(commonOptions.playerElement.id).parentNode
 
-      if (mode === 'webtorrent') {
-        items.push({
-          label: player.localize('Copy magnet URI'),
-          listener: function (this: videojs.Player) {
-            copyToClipboard(this.webtorrent().getCurrentVideoFile().magnetUri)
-          }
-        })
-      }
+    currentParentPlayerElement.parentNode.insertBefore(newVideoElement, currentParentPlayerElement)
 
-      items.push({
-        icon: 'info',
-        label: player.localize('Stats for nerds'),
-        listener: () => {
-          player.stats().show()
-        }
-      })
+    commonOptions.playerElement = newVideoElement
+    commonOptions.onPlayerElementChange(newVideoElement)
 
-      return items.map(i => ({
-        ...i,
-        label: `<span class="vjs-icon-${i.icon || 'link-2'}"></span>` + i.label
-      }))
-    }
+    player.dispose()
 
-    // adding the menu
-    player.contextmenuUI({ content })
+    return newVideoElement
   }
 
-  private static getAutoPlayValue (autoplay: any) {
-    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 PeertubePlayerManager.alreadyPlayed ? 'play' : false
-    }
+  private static addContextMenu (optionsBuilder: PeertubePlayerOptionsBuilder, player: videojs.Player, commonOptions: CommonOptions) {
+    const options = optionsBuilder.getContextMenuOptions(player, commonOptions)
 
-    return 'play'
+    player.contextmenuUI(options)
   }
 }