Merge branch 'feature/remove-webtorrent' into develop

89 files changed, 2558 insertions, 3861 deletions

diff --git a/client/package.json b/client/package.json
index 564e56ae7..149322192 100644
--- a/client/package.json
+++ b/client/package.json
@@ -71,7 +71,6 @@
     "@types/sanitize-html": "2.6.2",
     "@types/sha.js": "^2.4.0",
     "@types/video.js": "^7.3.40",
-    "@types/webtorrent": "^0.109.0",
     "@typescript-eslint/eslint-plugin": "^5.43.0",
     "@typescript-eslint/parser": "^5.43.0",
     "@wdio/browserstack-service": "^8.10.5",
@@ -85,14 +84,12 @@
     "babel-loader": "^9.1.0",
     "bootstrap": "^5.1.3",
     "buffer": "^6.0.3",
-    "cache-chunk-store": "^3.0.0",
     "chart.js": "^4.3.0",
     "chartjs-plugin-zoom": "~2.0.1",
     "chromedriver": "^113.0.0",
     "core-js": "^3.22.8",
     "css-loader": "^6.2.0",
     "debug": "^4.3.1",
-    "dexie": "^3.2.2",
     "eslint": "^8.28.0",
     "eslint-plugin-import": "2.27.5",
     "eslint-plugin-jsdoc": "^44.2.4",
@@ -103,7 +100,6 @@
     "hls.js": "~1.3",
     "html-loader": "^4.1.0",
     "html-webpack-plugin": "^5.3.1",
-    "https-browserify": "^1.0.0",
     "intl-messageformat": "^10.1.0",
     "jschannel": "^1.0.2",
     "linkify-html": "^4.0.2",
@@ -115,9 +111,7 @@
     "path-browserify": "^1.0.0",
     "postcss": "^8.4.14",
     "primeng": "^16.0.0-rc.2",
-    "process": "^0.11.10",
     "purify-css": "^1.2.5",
-    "querystring": "^0.2.1",
     "raw-loader": "^4.0.2",
     "rxjs": "^7.3.0",
     "sanitize-html": "^2.1.2",
@@ -125,23 +119,17 @@
     "sass-loader": "^13.2.0",
     "sha.js": "^2.4.11",
     "socket.io-client": "^4.5.4",
-    "stream-browserify": "^3.0.0",
-    "stream-http": "^3.0.0",
     "stylelint": "^15.1.0",
     "stylelint-config-sass-guidelines": "^10.0.0",
     "ts-loader": "^9.3.0",
     "tslib": "^2.4.0",
     "typescript": "~4.9.5",
-    "url": "^0.11.0",
     "video.js": "^7.19.2",
-    "videostream": "~3.2.1",
     "wdio-chromedriver-service": "^8.1.1",
     "wdio-geckodriver-service": "^5.0.1",
     "webpack": "^5.73.0",
     "webpack-bundle-analyzer": "^4.4.2",
     "webpack-cli": "^5.0.1",
-    "webtorrent": "1.8.26",
-    "whatwg-fetch": "^3.0.0",
     "zone.js": "~0.13.0"
   },
   "dependencies": {}
diff --git a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts
index ec85db0ff..97d71a510 100644
--- a/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts
+++ b/client/src/app/+videos/+video-watch/shared/playlist/video-watch-playlist.component.ts
@@ -152,12 +152,24 @@ export class VideoWatchPlaylistComponent {
     this.onPlaylistVideosNearOfBottom(position)
   }
 
+  // ---------------------------------------------------------------------------
+
   hasPreviousVideo () {
-    return !!this.findPlaylistVideo(this.currentPlaylistPosition - 1, 'previous')
+    return !!this.getPreviousVideo()
+  }
+
+  getPreviousVideo () {
+    return this.findPlaylistVideo(this.currentPlaylistPosition - 1, 'previous')
   }
 
+  // ---------------------------------------------------------------------------
+
   hasNextVideo () {
-    return !!this.findPlaylistVideo(this.currentPlaylistPosition + 1, 'next')
+    return !!this.getNextVideo()
+  }
+
+  getNextVideo () {
+    return this.findPlaylistVideo(this.currentPlaylistPosition + 1, 'next')
   }
 
   navigateToPreviousPlaylistVideo () {
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.html b/client/src/app/+videos/+video-watch/video-watch.component.html
index 80fd6e40f..294ff4b3a 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.html
+++ b/client/src/app/+videos/+video-watch/video-watch.component.html
@@ -8,7 +8,7 @@
     </div>
 
     <div id="videojs-wrapper">
-      <img class="placeholder-image" *ngIf="playerPlaceholderImgSrc" [src]="playerPlaceholderImgSrc" alt="Placeholder image" i18n-alt>
+      <video #playerElement class="video-js vjs-peertube-skin" playsinline="true"></video>
     </div>
 
     <my-video-watch-playlist
@@ -51,7 +51,7 @@
               </div>
 
               <my-action-buttons
-                [video]="video" [videoPassword]="videoPassword" [isUserLoggedIn]="isUserLoggedIn()" [isUserOwner]="isUserOwner()" [videoCaptions]="videoCaptions" 
+                [video]="video" [videoPassword]="videoPassword" [isUserLoggedIn]="isUserLoggedIn()" [isUserOwner]="isUserOwner()" [videoCaptions]="videoCaptions"
                 [playlist]="playlist" [currentTime]="getCurrentTime()" [currentPlaylistPosition]="getCurrentPlaylistPosition()"
               ></my-action-buttons>
             </div>
diff --git a/client/src/app/+videos/+video-watch/video-watch.component.ts b/client/src/app/+videos/+video-watch/video-watch.component.ts
index 54e0649ba..aebec52fb 100644
--- a/client/src/app/+videos/+video-watch/video-watch.component.ts
+++ b/client/src/app/+videos/+video-watch/video-watch.component.ts
@@ -1,6 +1,5 @@
 import { Hotkey, HotkeysService } from 'angular2-hotkeys'
 import { forkJoin, map, Observable, of, Subscription, switchMap } from 'rxjs'
-import { VideoJsPlayer } from 'video.js'
 import { PlatformLocation } from '@angular/common'
 import { Component, ElementRef, Inject, LOCALE_ID, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core'
 import { ActivatedRoute, Router } from '@angular/router'
@@ -19,13 +18,13 @@ import {
   UserService
 } from '@app/core'
 import { HooksService } from '@app/core/plugins/hooks.service'
-import { isXPercentInViewport, scrollToTop } from '@app/helpers'
+import { isXPercentInViewport, scrollToTop, toBoolean } from '@app/helpers'
 import { Video, VideoCaptionService, VideoDetails, VideoFileTokenService, VideoService } from '@app/shared/shared-main'
 import { SubscribeButtonComponent } from '@app/shared/shared-user-subscription'
 import { LiveVideoService } from '@app/shared/shared-video-live'
 import { VideoPlaylist, VideoPlaylistService } from '@app/shared/shared-video-playlist'
 import { logger } from '@root-helpers/logger'
-import { isP2PEnabled, videoRequiresUserAuth, videoRequiresFileToken } from '@root-helpers/video'
+import { isP2PEnabled, videoRequiresFileToken, videoRequiresUserAuth } from '@root-helpers/video'
 import { timeToInt } from '@shared/core-utils'
 import {
   HTMLServerConfig,
@@ -39,10 +38,10 @@ import {
   VideoState
 } from '@shared/models'
 import {
-  CustomizationOptions,
-  P2PMediaLoaderOptions,
-  PeertubePlayerManager,
-  PeertubePlayerManagerOptions,
+  HLSOptions,
+  PeerTubePlayer,
+  PeerTubePlayerContructorOptions,
+  PeerTubePlayerLoadOptions,
   PlayerMode,
   videojs
 } from '../../../assets/player'
@@ -50,7 +49,24 @@ import { cleanupVideoWatch, getStoredTheater, getStoredVideoWatchHistory } from
 import { environment } from '../../../environments/environment'
 import { VideoWatchPlaylistComponent } from './shared'
 
-type URLOptions = CustomizationOptions & { playerMode: PlayerMode }
+type URLOptions = {
+  playerMode: PlayerMode
+
+  startTime: number | string
+  stopTime: number | string
+
+  controls?: boolean
+  controlBar?: boolean
+
+  muted?: boolean
+  loop?: boolean
+  subtitle?: string
+  resume?: string
+
+  peertubeLink: boolean
+
+  playbackRate?: number | string
+}
 
 @Component({
   selector: 'my-video-watch',
@@ -60,10 +76,9 @@ type URLOptions = CustomizationOptions & { playerMode: PlayerMode }
 export class VideoWatchComponent implements OnInit, OnDestroy {
   @ViewChild('videoWatchPlaylist', { static: true }) videoWatchPlaylist: VideoWatchPlaylistComponent
   @ViewChild('subscribeButton') subscribeButton: SubscribeButtonComponent
+  @ViewChild('playerElement') playerElement: ElementRef<HTMLVideoElement>
 
-  player: VideoJsPlayer
-  playerElement: HTMLVideoElement
-  playerPlaceholderImgSrc: string
+  peertubePlayer: PeerTubePlayer
   theaterEnabled = false
 
   video: VideoDetails = null
@@ -78,8 +93,8 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
   remoteServerDown = false
   noPlaylistVideoFound = false
 
-  private nextVideoUUID = ''
-  private nextVideoTitle = ''
+  private nextRecommendedVideoUUID = ''
+  private nextRecommendedVideoTitle = ''
 
   private videoFileToken: string
 
@@ -130,11 +145,9 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     return this.userService.getAnonymousUser()
   }
 
-  ngOnInit () {
+  async ngOnInit () {
     this.serverConfig = this.serverService.getHTMLConfig()
 
-    PeertubePlayerManager.initState()
-
     this.loadRouteParams()
     this.loadRouteQuery()
 
@@ -143,10 +156,20 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.hooks.runAction('action:video-watch.init', 'video-watch')
 
     setTimeout(cleanupVideoWatch, 1500) // Run in timeout to ensure we're not blocking the UI
+
+    const constructorOptions = await this.hooks.wrapFun(
+      this.buildPeerTubePlayerConstructorOptions.bind(this),
+      { urlOptions: this.getUrlOptions() },
+      'video-watch',
+      'filter:internal.video-watch.player.build-options.params',
+      'filter:internal.video-watch.player.build-options.result'
+    )
+
+    this.peertubePlayer = new PeerTubePlayer(constructorOptions)
   }
 
   ngOnDestroy () {
-    this.flushPlayer()
+    if (this.peertubePlayer) this.peertubePlayer.destroy()
 
     // Unsubscribe subscriptions
     if (this.paramsSub) this.paramsSub.unsubscribe()
@@ -171,14 +194,14 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
     // The recommended videos's first element should be the next video
     const video = videos[0]
-    this.nextVideoUUID = video.uuid
-    this.nextVideoTitle = video.name
+    this.nextRecommendedVideoUUID = video.uuid
+    this.nextRecommendedVideoTitle = video.name
   }
 
   handleTimestampClicked (timestamp: number) {
-    if (!this.player || this.video.isLive) return
+    if (!this.peertubePlayer || this.video.isLive) return
 
-    this.player.currentTime(timestamp)
+    this.peertubePlayer.getPlayer().currentTime(timestamp)
     scrollToTop()
   }
 
@@ -243,7 +266,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       this.videoWatchPlaylist.updatePlaylistIndex(this.playlistPosition)
 
       const start = queryParams['start']
-      if (this.player && start) this.player.currentTime(parseInt(start, 10))
+      if (this.peertubePlayer && start) this.peertubePlayer.getPlayer().currentTime(parseInt(start, 10))
     })
   }
 
@@ -256,8 +279,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
     if (this.isSameElement(this.video, videoId)) return
 
-    if (this.player) this.player.pause()
-
     this.video = undefined
 
     const videoObs = this.hooks.wrapObsFun(
@@ -291,23 +312,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       this.userService.getAnonymousOrLoggedUser()
     ]).subscribe({
       next: ([ { video, live, videoFileToken }, captionsResult, storyboards, loggedInOrAnonymousUser ]) => {
-        const queryParams = this.route.snapshot.queryParams
-
-        const urlOptions = {
-          resume: queryParams.resume,
-
-          startTime: queryParams.start,
-          stopTime: queryParams.stop,
-
-          muted: queryParams.muted,
-          loop: queryParams.loop,
-          subtitle: queryParams.subtitle,
-
-          playerMode: queryParams.mode,
-          playbackRate: queryParams.playbackRate,
-          peertubeLink: false
-        }
-
         this.onVideoFetched({
           video,
           live,
@@ -316,7 +320,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
           videoFileToken,
           videoPassword,
           loggedInOrAnonymousUser,
-          urlOptions,
           forceAutoplay
         }).catch(err => {
           this.handleGlobalError(err)
@@ -386,14 +389,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     const errorMessage: string = typeof err === 'string' ? err : err.message
     if (!errorMessage) return
 
-    // Display a message in the video player instead of a notification
-    if (errorMessage.includes('from xs param')) {
-      this.flushPlayer()
-      this.remoteServerDown = true
-
-      return
-    }
-
     this.notifier.error(errorMessage)
   }
 
@@ -422,7 +417,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     videoFileToken: string
     videoPassword: string
 
-    urlOptions: URLOptions
     loggedInOrAnonymousUser: User
     forceAutoplay: boolean
   }) {
@@ -431,7 +425,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       live,
       videoCaptions,
       storyboards,
-      urlOptions,
       videoFileToken,
       videoPassword,
       loggedInOrAnonymousUser,
@@ -448,7 +441,6 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.storyboards = storyboards
 
     // Re init attributes
-    this.playerPlaceholderImgSrc = undefined
     this.remoteServerDown = false
     this.currentTime = undefined
 
@@ -462,7 +454,7 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
 
     this.buildHotkeysHelp(video)
 
-    this.buildPlayer({ urlOptions, loggedInOrAnonymousUser, forceAutoplay })
+    this.loadPlayer({ loggedInOrAnonymousUser, forceAutoplay })
       .catch(err => logger.error('Cannot build the player', err))
 
     this.setOpenGraphTags()
@@ -475,28 +467,19 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.hooks.runAction('action:video-watch.video.loaded', 'video-watch', hookOptions)
   }
 
-  private async buildPlayer (options: {
-    urlOptions: URLOptions
+  private async loadPlayer (options: {
     loggedInOrAnonymousUser: User
     forceAutoplay: boolean
   }) {
-    const { urlOptions, loggedInOrAnonymousUser, forceAutoplay } = options
-
-    // Flush old player if needed
-    this.flushPlayer()
+    const { loggedInOrAnonymousUser, forceAutoplay } = options
 
     const videoState = this.video.state.id
     if (videoState === VideoState.LIVE_ENDED || videoState === VideoState.WAITING_FOR_LIVE) {
-      this.playerPlaceholderImgSrc = this.video.previewPath
+      this.updatePlayerOnNoLive()
       return
     }
 
-    // Build video element, because videojs removes it on dispose
-    const playerElementWrapper = this.elementRef.nativeElement.querySelector('#videojs-wrapper')
-    this.playerElement = document.createElement('video')
-    this.playerElement.className = 'video-js vjs-peertube-skin'
-    this.playerElement.setAttribute('playsinline', 'true')
-    playerElementWrapper.appendChild(this.playerElement)
+    this.peertubePlayer?.enable()
 
     const params = {
       video: this.video,
@@ -505,86 +488,49 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       liveVideo: this.liveVideo,
       videoFileToken: this.videoFileToken,
       videoPassword: this.videoPassword,
-      urlOptions,
+      urlOptions: this.getUrlOptions(),
       loggedInOrAnonymousUser,
       forceAutoplay,
       user: this.user
     }
-    const { playerMode, playerOptions } = await this.hooks.wrapFun(
-      this.buildPlayerManagerOptions.bind(this),
+
+    const loadOptions = await this.hooks.wrapFun(
+      this.buildPeerTubePlayerLoadOptions.bind(this),
       params,
       'video-watch',
-      'filter:internal.video-watch.player.build-options.params',
-      'filter:internal.video-watch.player.build-options.result'
+      'filter:internal.video-watch.player.load-options.params',
+      'filter:internal.video-watch.player.load-options.result'
     )
 
     this.zone.runOutsideAngular(async () => {
-      this.player = await PeertubePlayerManager.initialize(playerMode, playerOptions, player => this.player = player)
+      await this.peertubePlayer.load(loadOptions)
 
-      this.player.on('customError', (_e, data: any) => {
-        this.zone.run(() => this.handleGlobalError(data.err))
-      })
+      const player = this.peertubePlayer.getPlayer()
 
-      this.player.on('timeupdate', () => {
+      player.on('timeupdate', () => {
         // Don't need to trigger angular change for this variable, that is sent to children components on click
-        this.currentTime = Math.floor(this.player.currentTime())
+        this.currentTime = Math.floor(player.currentTime())
       })
 
-      /**
-       * condition: true to make the upnext functionality trigger, false to disable the upnext functionality
-       *            go to the next video in 'condition()' if you don't want of the timer.
-       * next: function triggered at the end of the timer.
-       * suspended: function used at each click of the timer checking if we need to reset progress
-       *            and wait until suspended becomes truthy again.
-       */
-      this.player.upnext({
-        timeout: 5000, // 5s
-
-        headText: $localize`Up Next`,
-        cancelText: $localize`Cancel`,
-        suspendedText: $localize`Autoplay is suspended`,
-
-        getTitle: () => this.nextVideoTitle,
+      if (this.video.isLive) {
+        player.one('ended', () => {
+          this.zone.run(() => {
+            // We changed the video, it's not a live anymore
+            if (!this.video.isLive) return
 
-        next: () => this.zone.run(() => this.playNextVideoInAngularZone()),
-        condition: () => {
-          if (!this.playlist) return this.isAutoPlayNext()
+            this.video.state.id = VideoState.LIVE_ENDED
 
-          // Don't wait timeout to play the next playlist video
-          if (this.isPlaylistAutoPlayNext()) {
-            this.playNextVideoInAngularZone()
-            return undefined
-          }
-
-          return false
-        },
-
-        suspended: () => {
-          return (
-            !isXPercentInViewport(this.player.el() as HTMLElement, 80) ||
-            !document.getElementById('content').contains(document.activeElement)
-          )
-        }
-      })
-
-      this.player.one('stopped', () => {
-        if (this.playlist && this.isPlaylistAutoPlayNext()) {
-          this.playNextVideoInAngularZone()
-        }
-      })
-
-      this.player.one('ended', () => {
-        if (this.video.isLive) {
-          this.zone.run(() => this.video.state.id = VideoState.LIVE_ENDED)
-        }
-      })
+            this.updatePlayerOnNoLive()
+          })
+        })
+      }
 
-      this.player.on('theaterChange', (_: any, enabled: boolean) => {
+      player.on('theater-change', (_: any, enabled: boolean) => {
         this.zone.run(() => this.theaterEnabled = enabled)
       })
 
       this.hooks.runAction('action:video-watch.player.loaded', 'video-watch', {
-        player: this.player,
+        player,
         playlist: this.playlist,
         playlistPosition: this.playlistPosition,
         videojs,
@@ -601,15 +547,25 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     return true
   }
 
-  private playNextVideoInAngularZone () {
+  private getNextVideoTitle () {
     if (this.playlist) {
-      this.zone.run(() => this.videoWatchPlaylist.navigateToNextPlaylistVideo())
-      return
+      return this.videoWatchPlaylist.getNextVideo()?.video?.name || ''
     }
 
-    if (this.nextVideoUUID) {
-      this.router.navigate([ '/w', this.nextVideoUUID ])
-    }
+    return this.nextRecommendedVideoTitle
+  }
+
+  private playNextVideoInAngularZone () {
+    this.zone.run(() => {
+      if (this.playlist) {
+        this.videoWatchPlaylist.navigateToNextPlaylistVideo()
+        return
+      }
+
+      if (this.nextRecommendedVideoUUID) {
+        this.router.navigate([ '/w', this.nextRecommendedVideoUUID ])
+      }
+    })
   }
 
   private isAutoplay () {
@@ -637,19 +593,45 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     )
   }
 
-  private flushPlayer () {
-    // Remove player if it exists
-    if (!this.player) return
+  private buildPeerTubePlayerConstructorOptions (options: {
+    urlOptions: URLOptions
+  }): PeerTubePlayerContructorOptions {
+    const { urlOptions } = options
+
+    return {
+      playerElement: () => this.playerElement.nativeElement,
+
+      enableHotkeys: true,
+      inactivityTimeout: 2500,
+
+      theaterButton: true,
+
+      controls: urlOptions.controls,
+      controlBar: urlOptions.controlBar,
+
+      muted: urlOptions.muted,
+      loop: urlOptions.loop,
+
+      playbackRate: urlOptions.playbackRate,
+
+      instanceName: this.serverConfig.instance.name,
+      language: this.localeId,
+      metricsUrl: environment.apiUrl + '/api/v1/metrics/playback',
+
+      videoViewIntervalMs: VideoWatchComponent.VIEW_VIDEO_INTERVAL_MS,
+      authorizationHeader: () => this.authService.getRequestHeaderValue(),
+
+      serverUrl: environment.originServerUrl || window.location.origin,
 
-    try {
-      this.player.dispose()
-      this.player = undefined
-    } catch (err) {
-      logger.error('Cannot dispose player.', err)
+      errorNotifier: (message: string) => this.notifier.error(message),
+
+      peertubeLink: () => false,
+
+      pluginsManager: this.pluginService.getPluginsManager()
     }
   }
 
-  private buildPlayerManagerOptions (params: {
+  private buildPeerTubePlayerLoadOptions (options: {
     video: VideoDetails
     liveVideo: LiveVideo
     videoCaptions: VideoCaption[]
@@ -658,12 +640,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     videoFileToken: string
     videoPassword: string
 
-    urlOptions: CustomizationOptions & { playerMode: PlayerMode }
+    urlOptions: URLOptions
 
     loggedInOrAnonymousUser: User
     forceAutoplay: boolean
     user?: AuthUser // Keep for plugins
-  }) {
+  }): PeerTubePlayerLoadOptions {
     const {
       video,
       liveVideo,
@@ -674,7 +656,30 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       urlOptions,
       loggedInOrAnonymousUser,
       forceAutoplay
-    } = params
+    } = options
+
+    let mode: PlayerMode
+
+    if (urlOptions.playerMode) {
+      if (urlOptions.playerMode === 'p2p-media-loader') mode = 'p2p-media-loader'
+      else mode = 'web-video'
+    } else {
+      if (video.hasHlsPlaylist()) mode = 'p2p-media-loader'
+      else mode = 'web-video'
+    }
+
+    let hlsOptions: HLSOptions
+    if (video.hasHlsPlaylist()) {
+      const hlsPlaylist = video.getHlsPlaylist()
+
+      hlsOptions = {
+        playlistUrl: hlsPlaylist.playlistUrl,
+        segmentsSha256Url: hlsPlaylist.segmentsSha256Url,
+        redundancyBaseUrls: hlsPlaylist.redundancies.map(r => r.baseUrl),
+        trackerAnnounce: video.trackerUrls,
+        videoFiles: hlsPlaylist.files
+      }
+    }
 
     const getStartTime = () => {
       const byUrl = urlOptions.startTime !== undefined
@@ -714,118 +719,80 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
       ? { latencyMode: liveVideo.latencyMode }
       : undefined
 
-    const options: PeertubePlayerManagerOptions = {
-      common: {
-        autoplay: this.isAutoplay(),
-        forceAutoplay,
-        p2pEnabled: isP2PEnabled(video, this.serverConfig, loggedInOrAnonymousUser.p2pEnabled),
-
-        hasNextVideo: () => this.hasNextVideo(),
-        nextVideo: () => this.playNextVideoInAngularZone(),
-
-        playerElement: this.playerElement,
-        onPlayerElementChange: (element: HTMLVideoElement) => this.playerElement = element,
+    return {
+      mode,
 
-        videoDuration: video.duration,
-        enableHotkeys: true,
-        inactivityTimeout: 2500,
-        poster: video.previewUrl,
-
-        startTime,
-        stopTime: urlOptions.stopTime,
-        controlBar: urlOptions.controlBar,
-        controls: urlOptions.controls,
-        muted: urlOptions.muted,
-        loop: urlOptions.loop,
-        subtitle: urlOptions.subtitle,
-        playbackRate: urlOptions.playbackRate,
-
-        peertubeLink: urlOptions.peertubeLink,
+      autoplay: this.isAutoplay(),
+      forceAutoplay,
 
-        theaterButton: true,
-        captions: videoCaptions.length !== 0,
+      duration: this.video.duration,
+      poster: video.previewUrl,
+      p2pEnabled: isP2PEnabled(video, this.serverConfig, loggedInOrAnonymousUser.p2pEnabled),
 
-        embedUrl: video.embedUrl,
-        embedTitle: video.name,
-        instanceName: this.serverConfig.instance.name,
+      startTime,
+      stopTime: urlOptions.stopTime,
 
-        isLive: video.isLive,
-        liveOptions,
+      embedUrl: video.embedUrl,
+      embedTitle: video.name,
 
-        language: this.localeId,
+      isLive: video.isLive,
+      liveOptions,
 
-        metricsUrl: environment.apiUrl + '/api/v1/metrics/playback',
+      videoViewUrl: video.privacy.id !== VideoPrivacy.PRIVATE
+        ? this.videoService.getVideoViewUrl(video.uuid)
+        : null,
 
-        videoViewUrl: video.privacy.id !== VideoPrivacy.PRIVATE
-          ? this.videoService.getVideoViewUrl(video.uuid)
-          : null,
-        videoViewIntervalMs: VideoWatchComponent.VIEW_VIDEO_INTERVAL_MS,
-        authorizationHeader: () => this.authService.getRequestHeaderValue(),
+      videoFileToken: () => videoFileToken,
+      requiresUserAuth: videoRequiresUserAuth(video, videoPassword),
+      requiresPassword: video.privacy.id === VideoPrivacy.PASSWORD_PROTECTED &&
+        !video.canAccessPasswordProtectedVideoWithoutPassword(this.user),
+      videoPassword: () => videoPassword,
 
-        serverUrl: environment.originServerUrl || window.location.origin,
+      videoCaptions: playerCaptions,
+      storyboard,
 
-        videoFileToken: () => videoFileToken,
-        requiresUserAuth: videoRequiresUserAuth(video, videoPassword),
-        requiresPassword: video.privacy.id === VideoPrivacy.PASSWORD_PROTECTED &&
-          !video.canAccessPasswordProtectedVideoWithoutPassword(this.user),
-        videoPassword: () => videoPassword,
+      videoShortUUID: video.shortUUID,
+      videoUUID: video.uuid,
 
-        videoCaptions: playerCaptions,
-        storyboard,
+      previousVideo: {
+        enabled: this.playlist && this.videoWatchPlaylist.hasPreviousVideo(),
 
-        videoShortUUID: video.shortUUID,
-        videoUUID: video.uuid,
+        handler: this.playlist
+          ? () => this.zone.run(() => this.videoWatchPlaylist.navigateToPreviousPlaylistVideo())
+          : undefined,
 
-        errorNotifier: (message: string) => this.notifier.error(message)
+        displayControlBarButton: !!this.playlist
       },
 
-      webtorrent: {
-        videoFiles: video.files
+      nextVideo: {
+        enabled: this.hasNextVideo(),
+        handler: () => this.playNextVideoInAngularZone(),
+        getVideoTitle: () => this.getNextVideoTitle(),
+        displayControlBarButton: this.hasNextVideo()
       },
 
-      pluginsManager: this.pluginService.getPluginsManager()
-    }
-
-    // Only set this if we're in a playlist
-    if (this.playlist) {
-      options.common.hasPreviousVideo = () => this.videoWatchPlaylist.hasPreviousVideo()
-
-      options.common.previousVideo = () => {
-        this.zone.run(() => this.videoWatchPlaylist.navigateToPreviousPlaylistVideo())
-      }
-    }
-
-    let mode: PlayerMode
+      upnext: {
+        isEnabled: () => {
+          if (this.playlist) return this.isPlaylistAutoPlayNext()
 
-    if (urlOptions.playerMode) {
-      if (urlOptions.playerMode === 'p2p-media-loader') mode = 'p2p-media-loader'
-      else mode = 'webtorrent'
-    } else {
-      if (video.hasHlsPlaylist()) mode = 'p2p-media-loader'
-      else mode = 'webtorrent'
-    }
+          return this.isAutoPlayNext()
+        },
 
-    // FIXME: remove, we don't support these old web browsers anymore
-    // p2p-media-loader needs TextEncoder, fallback on WebTorrent if not available
-    if (typeof TextEncoder === 'undefined') {
-      mode = 'webtorrent'
-    }
+        isSuspended: (player: videojs.Player) => {
+          return !isXPercentInViewport(player.el() as HTMLElement, 80)
+        },
 
-    if (mode === 'p2p-media-loader') {
-      const hlsPlaylist = video.getHlsPlaylist()
+        timeout: this.playlist
+          ? 0 // Don't wait to play next video in playlist
+          : 5000 // 5 seconds for a recommended video
+      },
 
-      const p2pMediaLoader = {
-        playlistUrl: hlsPlaylist.playlistUrl,
-        segmentsSha256Url: hlsPlaylist.segmentsSha256Url,
-        redundancyBaseUrls: hlsPlaylist.redundancies.map(r => r.baseUrl),
-        trackerAnnounce: video.trackerUrls,
-        videoFiles: hlsPlaylist.files
-      } as P2PMediaLoaderOptions
+      hls: hlsOptions,
 
-      Object.assign(options, { p2pMediaLoader })
+      webVideo: {
+        videoFiles: video.files
+      }
     }
-
-    return { playerMode: mode, playerOptions: options }
   }
 
   private async subscribeToLiveEventsIfNeeded (oldVideo: VideoDetails, newVideo: VideoDetails) {
@@ -873,6 +840,12 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.video.viewers = newViewers
   }
 
+  private updatePlayerOnNoLive () {
+    this.peertubePlayer.unload()
+    this.peertubePlayer.disable()
+    this.peertubePlayer.setPoster(this.video.previewPath)
+  }
+
   private buildHotkeysHelp (video: Video) {
     if (this.hotkeys.length !== 0) {
       this.hotkeysService.remove(this.hotkeys)
@@ -944,4 +917,26 @@ export class VideoWatchComponent implements OnInit, OnDestroy {
     this.metaService.setTag('og:url', window.location.href)
     this.metaService.setTag('url', window.location.href)
   }
+
+  private getUrlOptions (): URLOptions {
+    const queryParams = this.route.snapshot.queryParams
+
+    return {
+      resume: queryParams.resume,
+
+      startTime: queryParams.start,
+      stopTime: queryParams.stop,
+
+      muted: toBoolean(queryParams.muted),
+      loop: toBoolean(queryParams.loop),
+      subtitle: queryParams.subtitle,
+
+      playerMode: queryParams.mode,
+      playbackRate: queryParams.playbackRate,
+
+      controlBar: toBoolean(queryParams.controlBar),
+
+      peertubeLink: false
+    }
+  }
 }
diff --git a/client/src/app/helpers/utils/object.ts b/client/src/app/helpers/utils/object.ts
index 69b2b18c0..b69e31edf 100644
--- a/client/src/app/helpers/utils/object.ts
+++ b/client/src/app/helpers/utils/object.ts
@@ -34,6 +34,8 @@ function toBoolean (value: any) {
 
   if (value === 'true') return true
   if (value === 'false') return false
+  if (value === '1') return true
+  if (value === '0') return false
 
   return undefined
 }
diff --git a/client/src/app/shared/shared-video-miniature/videos-list.component.ts b/client/src/app/shared/shared-video-miniature/videos-list.component.ts
index 45df0be38..14a5abd7a 100644
--- a/client/src/app/shared/shared-video-miniature/videos-list.component.ts
+++ b/client/src/app/shared/shared-video-miniature/videos-list.component.ts
@@ -241,7 +241,6 @@ export class VideosListComponent implements OnInit, OnChanges, OnDestroy {
   }
 
   reloadVideos () {
-    console.log('reload')
     this.pagination.currentPage = 1
     this.loadMoreVideos(true)
   }
@@ -420,8 +419,9 @@ export class VideosListComponent implements OnInit, OnChanges, OnDestroy {
           this.lastQueryLength = data.length
 
           if (reset) this.videos = []
+
           this.videos = this.videos.concat(data)
-          console.log('subscribe')
+
           if (this.groupByDate) this.buildGroupedDateLabels()
 
           this.onDataSubject.next(data)
diff --git a/client/src/assets/player/index.ts b/client/src/assets/player/index.ts
index 9b87afc4a..d34188ea7 100644
--- a/client/src/assets/player/index.ts
+++ b/client/src/assets/player/index.ts
@@ -1,2 +1,2 @@
-export * from './peertube-player-manager'
+export * from './peertube-player'
 export * from './types'
diff --git a/client/src/assets/player/peertube-player-manager.ts b/client/src/assets/player/peertube-player-manager.ts
deleted file mode 100644
index 66d9c7298..000000000
--- a/client/src/assets/player/peertube-player-manager.ts
+++ /dev/null
@@ -1,277 +0,0 @@
-import '@peertube/videojs-contextmenu'
-import './shared/upnext/end-card'
-import './shared/upnext/upnext-plugin'
-import './shared/stats/stats-card'
-import './shared/stats/stats-plugin'
-import './shared/bezels/bezels-plugin'
-import './shared/peertube/peertube-plugin'
-import './shared/resolutions/peertube-resolutions-plugin'
-import './shared/control-bar/storyboard-plugin'
-import './shared/control-bar/next-previous-video-button'
-import './shared/control-bar/p2p-info-button'
-import './shared/control-bar/peertube-link-button'
-import './shared/control-bar/peertube-load-progress-bar'
-import './shared/control-bar/theater-button'
-import './shared/control-bar/peertube-live-display'
-import './shared/settings/resolution-menu-button'
-import './shared/settings/resolution-menu-item'
-import './shared/settings/settings-dialog'
-import './shared/settings/settings-menu-button'
-import './shared/settings/settings-menu-item'
-import './shared/settings/settings-panel'
-import './shared/settings/settings-panel-child'
-import './shared/playlist/playlist-plugin'
-import './shared/mobile/peertube-mobile-plugin'
-import './shared/mobile/peertube-mobile-buttons'
-import './shared/hotkeys/peertube-hotkeys-plugin'
-import './shared/metrics/metrics-plugin'
-import videojs from 'video.js'
-import { logger } from '@root-helpers/logger'
-import { PluginsManager } from '@root-helpers/plugins-manager'
-import { isMobile } from '@root-helpers/web-browser'
-import { saveAverageBandwidth } from './peertube-player-local-storage'
-import { ManagerOptionsBuilder } from './shared/manager-options'
-import { TranslationsManager } from './translations-manager'
-import { CommonOptions, PeertubePlayerManagerOptions, PlayerMode, PlayerNetworkInfo } from './types'
-
-// Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
-(videojs.getComponent('PlaybackRateMenuButton') as any).prototype.controlText_ = 'Speed'
-
-const CaptionsButton = videojs.getComponent('CaptionsButton') as any
-// Change Captions to Subtitles/CC
-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_ = ' '
-
-// TODO: remove when https://github.com/videojs/video.js/pull/7598 is merged
-const PlayProgressBar = videojs.getComponent('PlayProgressBar') as any
-if (PlayProgressBar.prototype.options_.children.includes('timeTooltip') !== true) {
-  PlayProgressBar.prototype.options_.children.push('timeTooltip')
-}
-
-export class PeertubePlayerManager {
-  private static playerElementClassName: string
-  private static playerElementAttributes: { name: string, value: 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 () {
-    this.alreadyPlayed = false
-  }
-
-  static async initialize (mode: PlayerMode, options: PeertubePlayerManagerOptions, onPlayerChange: (player: videojs.Player) => void) {
-    this.pluginsManager = options.pluginsManager
-
-    this.onPlayerChange = onPlayerChange
-
-    this.playerElementClassName = options.common.playerElement.className
-
-    for (const name of options.common.playerElement.getAttributeNames()) {
-      this.playerElementAttributes.push({ name, value: options.common.playerElement.getAttribute(name) })
-    }
-
-    if (mode === 'webtorrent') await import('./shared/webtorrent/webtorrent-plugin')
-    if (mode === 'p2p-media-loader') {
-      const [ p2pMediaLoaderModule ] = await Promise.all([
-        import('@peertube/p2p-media-loader-hlsjs'),
-        import('./shared/p2p-media-loader/p2p-media-loader-plugin')
-      ])
-
-      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 ManagerOptionsBuilder(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) {
-        const player = this
-
-        if (!isNaN(+options.common.playbackRate)) {
-          player.playbackRate(+options.common.playbackRate)
-        }
-
-        let alreadyFallback = false
-
-        const handleError = () => {
-          if (alreadyFallback) return
-          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', () => {
-          self.alreadyPlayed = true
-        })
-
-        self.addContextMenu(videojsOptionsBuilder, player, options.common)
-
-        if (isMobile()) player.peertubeMobile()
-        if (options.common.enableHotkeys === true) player.peerTubeHotkeysPlugin({ isLive: options.common.isLive })
-        if (options.common.controlBar === false) player.controlBar.addClass('control-bar-hidden')
-
-        player.bezels()
-
-        player.stats({
-          videoUUID: options.common.videoUUID,
-          videoIsLive: options.common.isLive,
-          mode,
-          p2pEnabled: options.common.p2pEnabled
-        })
-
-        if (options.common.storyboard) {
-          player.storyboard(options.common.storyboard)
-        }
-
-        player.on('p2pInfo', (_, data: PlayerNetworkInfo) => {
-          if (data.source !== 'p2p-media-loader' || isNaN(data.bandwidthEstimate)) return
-
-          saveAverageBandwidth(data.bandwidthEstimate)
-        })
-
-        const offlineNotificationElem = document.createElement('div')
-        offlineNotificationElem.classList.add('vjs-peertube-offline-notification')
-        offlineNotificationElem.innerText = player.localize('You seem to be offline and the video may not work')
-
-        let offlineNotificationElemAdded = false
-
-        const handleOnline = () => {
-          if (!offlineNotificationElemAdded) return
-
-          player.el().removeChild(offlineNotificationElem)
-          offlineNotificationElemAdded = false
-
-          logger.info('The browser is online')
-        }
-
-        const handleOffline = () => {
-          if (offlineNotificationElemAdded) return
-
-          player.el().appendChild(offlineNotificationElem)
-          offlineNotificationElemAdded = true
-
-          logger.info('The browser is offline')
-        }
-
-        window.addEventListener('online', handleOnline)
-        window.addEventListener('offline', handleOffline)
-
-        player.on('dispose', () => {
-          window.removeEventListener('online', handleOnline)
-          window.removeEventListener('offline', handleOffline)
-        })
-
-        return res(player)
-      })
-    })
-  }
-
-  private static async tryToRecoverHLSError (err: any, currentPlayer: videojs.Player, options: PeertubePlayerManagerOptions) {
-    if (err.code === MediaError.MEDIA_ERR_DECODE) {
-
-      // 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 (this.videojsDecodeErrors === 20) {
-        this.maybeFallbackToWebTorrent('p2p-media-loader', currentPlayer, options)
-        return
-      }
-
-      logger.info('Fast forwarding HLS to recover from an error.')
-
-      this.videojsDecodeErrors++
-
-      options.common.startTime = currentPlayer.currentTime() + 2
-      options.common.autoplay = true
-      this.rebuildAndUpdateVideoElement(currentPlayer, options.common)
-
-      const newPlayer = await this.buildPlayer('p2p-media-loader', options)
-      this.onPlayerChange(newPlayer)
-    } else {
-      this.maybeFallbackToWebTorrent('p2p-media-loader', currentPlayer, options)
-    }
-  }
-
-  private static async maybeFallbackToWebTorrent (
-    currentMode: PlayerMode,
-    currentPlayer: videojs.Player,
-    options: PeertubePlayerManagerOptions
-  ) {
-    if (options.webtorrent.videoFiles.length === 0 || currentMode === 'webtorrent') {
-      currentPlayer.peertube().displayFatalError()
-      return
-    }
-
-    logger.info('Fallback to webtorrent.')
-
-    this.rebuildAndUpdateVideoElement(currentPlayer, options.common)
-
-    await import('./shared/webtorrent/webtorrent-plugin')
-
-    const newPlayer = await this.buildPlayer('webtorrent', options)
-    this.onPlayerChange(newPlayer)
-  }
-
-  private static rebuildAndUpdateVideoElement (player: videojs.Player, commonOptions: CommonOptions) {
-    const newVideoElement = document.createElement('video')
-
-    // Reset class
-    newVideoElement.className = this.playerElementClassName
-
-    // Reapply attributes
-    for (const { name, value } of this.playerElementAttributes) {
-      newVideoElement.setAttribute(name, value)
-    }
-
-    // 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
-
-    currentParentPlayerElement.parentNode.insertBefore(newVideoElement, currentParentPlayerElement)
-
-    commonOptions.playerElement = newVideoElement
-    commonOptions.onPlayerElementChange(newVideoElement)
-
-    player.dispose()
-
-    return newVideoElement
-  }
-
-  private static addContextMenu (optionsBuilder: ManagerOptionsBuilder, player: videojs.Player, commonOptions: CommonOptions) {
-    const options = optionsBuilder.getContextMenuOptions(player, commonOptions)
-
-    player.contextmenuUI(options)
-  }
-}
-
-// ############################################################################
-
-export {
-  videojs
-}
diff --git a/client/src/assets/player/peertube-player.ts b/client/src/assets/player/peertube-player.ts
new file mode 100644
index 000000000..a7a2b4065
--- /dev/null
+++ b/client/src/assets/player/peertube-player.ts
@@ -0,0 +1,522 @@
+import '@peertube/videojs-contextmenu'
+import './shared/upnext/end-card'
+import './shared/upnext/upnext-plugin'
+import './shared/stats/stats-card'
+import './shared/stats/stats-plugin'
+import './shared/bezels/bezels-plugin'
+import './shared/peertube/peertube-plugin'
+import './shared/resolutions/peertube-resolutions-plugin'
+import './shared/control-bar/storyboard-plugin'
+import './shared/control-bar/next-previous-video-button'
+import './shared/control-bar/p2p-info-button'
+import './shared/control-bar/peertube-link-button'
+import './shared/control-bar/theater-button'
+import './shared/control-bar/peertube-live-display'
+import './shared/settings/resolution-menu-button'
+import './shared/settings/resolution-menu-item'
+import './shared/settings/settings-dialog'
+import './shared/settings/settings-menu-button'
+import './shared/settings/settings-menu-item'
+import './shared/settings/settings-panel'
+import './shared/settings/settings-panel-child'
+import './shared/playlist/playlist-plugin'
+import './shared/mobile/peertube-mobile-plugin'
+import './shared/mobile/peertube-mobile-buttons'
+import './shared/hotkeys/peertube-hotkeys-plugin'
+import './shared/metrics/metrics-plugin'
+import videojs, { VideoJsPlayer } from 'video.js'
+import { logger } from '@root-helpers/logger'
+import { PluginsManager } from '@root-helpers/plugins-manager'
+import { copyToClipboard } from '@root-helpers/utils'
+import { buildVideoOrPlaylistEmbed } from '@root-helpers/video'
+import { isMobile } from '@root-helpers/web-browser'
+import { buildVideoLink, decorateVideoLink, isDefaultLocale, pick } from '@shared/core-utils'
+import { saveAverageBandwidth } from './peertube-player-local-storage'
+import { ControlBarOptionsBuilder, HLSOptionsBuilder, WebVideoOptionsBuilder } from './shared/player-options-builder'
+import { TranslationsManager } from './translations-manager'
+import { PeerTubePlayerContructorOptions, PeerTubePlayerLoadOptions, PlayerNetworkInfo, VideoJSPluginOptions } from './types'
+
+// Change 'Playback Rate' to 'Speed' (smaller for our settings menu)
+(videojs.getComponent('PlaybackRateMenuButton') as any).prototype.controlText_ = 'Speed'
+
+const CaptionsButton = videojs.getComponent('CaptionsButton') as any
+// Change Captions to Subtitles/CC
+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_ = ' '
+
+// TODO: remove when https://github.com/videojs/video.js/pull/7598 is merged
+const PlayProgressBar = videojs.getComponent('PlayProgressBar') as any
+if (PlayProgressBar.prototype.options_.children.includes('timeTooltip') !== true) {
+  PlayProgressBar.prototype.options_.children.push('timeTooltip')
+}
+
+export class PeerTubePlayer {
+  private pluginsManager: PluginsManager
+
+  private videojsDecodeErrors = 0
+
+  private p2pMediaLoaderModule: any
+
+  private player: VideoJsPlayer
+
+  private currentLoadOptions: PeerTubePlayerLoadOptions
+
+  private moduleLoaded = {
+    webVideo: false,
+    p2pMediaLoader: false
+  }
+
+  constructor (private options: PeerTubePlayerContructorOptions) {
+    this.pluginsManager = options.pluginsManager
+  }
+
+  unload () {
+    if (!this.player) return
+
+    this.disposeDynamicPluginsIfNeeded()
+
+    this.player.reset()
+  }
+
+  async load (loadOptions: PeerTubePlayerLoadOptions) {
+    this.currentLoadOptions = loadOptions
+
+    this.setPoster('')
+
+    this.disposeDynamicPluginsIfNeeded()
+
+    await this.lazyLoadModulesIfNeeded()
+    await this.buildPlayerIfNeeded()
+
+    if (this.currentLoadOptions.mode === 'p2p-media-loader') {
+      await this.loadP2PMediaLoader()
+    } else {
+      this.loadWebVideo()
+    }
+
+    this.loadDynamicPlugins()
+
+    if (this.options.controlBar === false) this.player.controlBar.hide()
+    else this.player.controlBar.show()
+
+    this.player.autoplay(this.getAutoPlayValue(this.currentLoadOptions.autoplay))
+
+    this.player.trigger('video-change')
+  }
+
+  getPlayer () {
+    return this.player
+  }
+
+  destroy () {
+    if (this.player) this.player.dispose()
+  }
+
+  setPoster (url: string) {
+    this.player?.poster(url)
+    this.options.playerElement().poster = url
+  }
+
+  enable () {
+    if (!this.player) return
+
+    (this.player.el() as HTMLElement).style.pointerEvents = 'auto'
+  }
+
+  disable () {
+    if (!this.player) return
+
+    if (this.player.isFullscreen()) {
+      this.player.exitFullscreen()
+    }
+
+    // Disable player
+    this.player.hasStarted(false)
+    this.player.removeClass('vjs-has-autoplay')
+    this.player.bigPlayButton.hide();
+
+    (this.player.el() as HTMLElement).style.pointerEvents = 'none'
+  }
+
+  private async loadP2PMediaLoader () {
+    const hlsOptionsBuilder = new HLSOptionsBuilder({
+      ...pick(this.options, [ 'pluginsManager', 'serverUrl', 'authorizationHeader' ]),
+      ...pick(this.currentLoadOptions, [
+        'videoPassword',
+        'requiresUserAuth',
+        'videoFileToken',
+        'requiresPassword',
+        'isLive',
+        'p2pEnabled',
+        'liveOptions',
+        'hls'
+      ])
+    }, this.p2pMediaLoaderModule)
+
+    const { hlsjs, p2pMediaLoader } = await hlsOptionsBuilder.getPluginOptions()
+
+    this.player.hlsjs(hlsjs)
+    this.player.p2pMediaLoader(p2pMediaLoader)
+  }
+
+  private loadWebVideo () {
+    const webVideoOptionsBuilder = new WebVideoOptionsBuilder(pick(this.currentLoadOptions, [
+      'videoFileToken',
+      'webVideo',
+      'hls',
+      'startTime'
+    ]))
+
+    this.player.webVideo(webVideoOptionsBuilder.getPluginOptions())
+  }
+
+  private async buildPlayerIfNeeded () {
+    if (this.player) return
+
+    await TranslationsManager.loadLocaleInVideoJS(this.options.serverUrl, this.options.language, videojs)
+
+    const videojsOptions = await this.pluginsManager.runHook(
+      'filter:internal.player.videojs.options.result',
+      this.getVideojsOptions()
+    )
+
+    this.player = videojs(this.options.playerElement(), videojsOptions)
+
+    this.player.ready(() => {
+      if (!isNaN(+this.options.playbackRate)) {
+        this.player.playbackRate(+this.options.playbackRate)
+      }
+
+      let alreadyFallback = false
+
+      const handleError = () => {
+        if (alreadyFallback) return
+        alreadyFallback = true
+
+        if (this.currentLoadOptions.mode === 'p2p-media-loader') {
+          this.tryToRecoverHLSError(this.player.error())
+        } else {
+          this.maybeFallbackToWebVideo()
+        }
+      }
+
+      this.player.one('error', () => handleError())
+
+      this.player.on('p2p-info', (_, data: PlayerNetworkInfo) => {
+        if (data.source !== 'p2p-media-loader' || isNaN(data.bandwidthEstimate)) return
+
+        saveAverageBandwidth(data.bandwidthEstimate)
+      })
+
+      this.player.contextmenuUI(this.getContextMenuOptions())
+
+      this.displayNotificationWhenOffline()
+    })
+  }
+
+  private disposeDynamicPluginsIfNeeded () {
+    if (!this.player) return
+
+    if (this.player.usingPlugin('peertubeMobile')) this.player.peertubeMobile().dispose()
+    if (this.player.usingPlugin('peerTubeHotkeysPlugin')) this.player.peerTubeHotkeysPlugin().dispose()
+    if (this.player.usingPlugin('playlist')) this.player.playlist().dispose()
+    if (this.player.usingPlugin('bezels')) this.player.bezels().dispose()
+    if (this.player.usingPlugin('upnext')) this.player.upnext().dispose()
+    if (this.player.usingPlugin('stats')) this.player.stats().dispose()
+    if (this.player.usingPlugin('storyboard')) this.player.storyboard().dispose()
+
+    if (this.player.usingPlugin('peertubeDock')) this.player.peertubeDock().dispose()
+
+    if (this.player.usingPlugin('p2pMediaLoader')) this.player.p2pMediaLoader().dispose()
+    if (this.player.usingPlugin('hlsjs')) this.player.hlsjs().dispose()
+
+    if (this.player.usingPlugin('webVideo')) this.player.webVideo().dispose()
+  }
+
+  private loadDynamicPlugins () {
+    if (isMobile()) this.player.peertubeMobile()
+
+    this.player.bezels()
+
+    this.player.stats({
+      videoUUID: this.currentLoadOptions.videoUUID,
+      videoIsLive: this.currentLoadOptions.isLive,
+      mode: this.currentLoadOptions.mode,
+      p2pEnabled: this.currentLoadOptions.p2pEnabled
+    })
+
+    if (this.options.enableHotkeys === true) {
+      this.player.peerTubeHotkeysPlugin({ isLive: this.currentLoadOptions.isLive })
+    }
+
+    if (this.currentLoadOptions.playlist) {
+      this.player.playlist(this.currentLoadOptions.playlist)
+    }
+
+    if (this.currentLoadOptions.upnext) {
+      this.player.upnext({
+        timeout: this.currentLoadOptions.upnext.timeout,
+
+        getTitle: () => this.currentLoadOptions.nextVideo.getVideoTitle(),
+
+        next: () => this.currentLoadOptions.nextVideo.handler(),
+        isDisplayed: () => this.currentLoadOptions.nextVideo.enabled && this.currentLoadOptions.upnext.isEnabled(),
+
+        isSuspended: () => this.currentLoadOptions.upnext.isSuspended(this.player)
+      })
+    }
+
+    if (this.currentLoadOptions.storyboard) {
+      this.player.storyboard(this.currentLoadOptions.storyboard)
+    }
+
+    if (this.currentLoadOptions.dock) {
+      this.player.peertubeDock(this.currentLoadOptions.dock)
+    }
+  }
+
+  private async lazyLoadModulesIfNeeded () {
+    if (this.currentLoadOptions.mode === 'web-video' && this.moduleLoaded.webVideo !== true) {
+      await import('./shared/web-video/web-video-plugin')
+    }
+
+    if (this.currentLoadOptions.mode === 'p2p-media-loader' && this.moduleLoaded.p2pMediaLoader !== true) {
+      const [ p2pMediaLoaderModule ] = await Promise.all([
+        import('@peertube/p2p-media-loader-hlsjs'),
+        import('./shared/p2p-media-loader/hls-plugin'),
+        import('./shared/p2p-media-loader/p2p-media-loader-plugin')
+      ])
+
+      this.p2pMediaLoaderModule = p2pMediaLoaderModule
+    }
+  }
+
+  private async tryToRecoverHLSError (err: any) {
+    if (err.code === MediaError.MEDIA_ERR_DECODE) {
+
+      // Display a notification to user
+      if (this.videojsDecodeErrors === 0) {
+        this.options.errorNotifier(this.player.localize('The video failed to play, will try to fast forward.'))
+      }
+
+      if (this.videojsDecodeErrors === 20) {
+        this.maybeFallbackToWebVideo()
+        return
+      }
+
+      logger.info('Fast forwarding HLS to recover from an error.')
+
+      this.videojsDecodeErrors++
+
+      await this.load({
+        ...this.currentLoadOptions,
+
+        mode: 'p2p-media-loader',
+        startTime: this.player.currentTime() + 2,
+        autoplay: true
+      })
+    } else {
+      this.maybeFallbackToWebVideo()
+    }
+  }
+
+  private async maybeFallbackToWebVideo () {
+    if (this.currentLoadOptions.webVideo.videoFiles.length === 0 || this.currentLoadOptions.mode === 'web-video') {
+      this.player.peertube().displayFatalError()
+      return
+    }
+
+    logger.info('Fallback to web-video.')
+
+    await this.load({
+      ...this.currentLoadOptions,
+
+      mode: 'web-video',
+      startTime: this.player.currentTime(),
+      autoplay: true
+    })
+  }
+
+  getVideojsOptions (): videojs.PlayerOptions {
+    const html5 = {
+      preloadTextTracks: false
+    }
+
+    const plugins: VideoJSPluginOptions = {
+      peertube: {
+        hasAutoplay: () => this.getAutoPlayValue(this.currentLoadOptions.autoplay),
+
+        videoViewUrl: () => this.currentLoadOptions.videoViewUrl,
+        videoViewIntervalMs: this.options.videoViewIntervalMs,
+
+        authorizationHeader: this.options.authorizationHeader,
+
+        videoDuration: () => this.currentLoadOptions.duration,
+
+        startTime: () => this.currentLoadOptions.startTime,
+        stopTime: () => this.currentLoadOptions.stopTime,
+
+        videoCaptions: () => this.currentLoadOptions.videoCaptions,
+        isLive: () => this.currentLoadOptions.isLive,
+        videoUUID: () => this.currentLoadOptions.videoUUID,
+        subtitle: () => this.currentLoadOptions.subtitle
+      },
+      metrics: {
+        mode: () => this.currentLoadOptions.mode,
+
+        metricsUrl: () => this.options.metricsUrl,
+        videoUUID: () => this.currentLoadOptions.videoUUID
+      }
+    }
+
+    const controlBarOptionsBuilder = new ControlBarOptionsBuilder({
+      ...this.options,
+
+      videoShortUUID: () => this.currentLoadOptions.videoShortUUID,
+      p2pEnabled: () => this.currentLoadOptions.p2pEnabled,
+
+      nextVideo: () => this.currentLoadOptions.nextVideo,
+      previousVideo: () => this.currentLoadOptions.previousVideo
+    })
+
+    const videojsOptions = {
+      html5,
+
+      // We don't use text track settings for now
+      textTrackSettings: false as any, // FIXME: typings
+      controls: this.options.controls !== undefined ? this.options.controls : true,
+      loop: this.options.loop !== undefined ? this.options.loop : false,
+
+      muted: this.options.muted !== undefined
+        ? this.options.muted
+        : undefined, // Undefined so the player knows it has to check the local storage
+
+      autoplay: this.getAutoPlayValue(this.currentLoadOptions.autoplay),
+
+      poster: this.currentLoadOptions.poster,
+      inactivityTimeout: this.options.inactivityTimeout,
+      playbackRates: [ 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2 ],
+
+      plugins,
+
+      controlBar: {
+        children: controlBarOptionsBuilder.getChildrenOptions() as any // FIXME: typings
+      },
+
+      language: this.options.language && !isDefaultLocale(this.options.language)
+        ? this.options.language
+        : undefined
+    }
+
+    return videojsOptions
+  }
+
+  private getAutoPlayValue (autoplay: boolean): videojs.Autoplay {
+    if (autoplay !== true) return false
+
+    return this.currentLoadOptions.forceAutoplay
+      ? 'any'
+      : 'play'
+  }
+
+  private displayNotificationWhenOffline () {
+    const offlineNotificationElem = document.createElement('div')
+    offlineNotificationElem.classList.add('vjs-peertube-offline-notification')
+    offlineNotificationElem.innerText = this.player.localize('You seem to be offline and the video may not work')
+
+    let offlineNotificationElemAdded = false
+
+    const handleOnline = () => {
+      if (!offlineNotificationElemAdded) return
+
+      this.player.el().removeChild(offlineNotificationElem)
+      offlineNotificationElemAdded = false
+
+      logger.info('The browser is online')
+    }
+
+    const handleOffline = () => {
+      if (offlineNotificationElemAdded) return
+
+      this.player.el().appendChild(offlineNotificationElem)
+      offlineNotificationElemAdded = true
+
+      logger.info('The browser is offline')
+    }
+
+    window.addEventListener('online', handleOnline)
+    window.addEventListener('offline', handleOffline)
+
+    this.player.on('dispose', () => {
+      window.removeEventListener('online', handleOnline)
+      window.removeEventListener('offline', handleOffline)
+    })
+  }
+
+  private getContextMenuOptions () {
+
+    const content = () => {
+      const self = this
+      const player = this.player
+
+      const shortUUID = self.currentLoadOptions.videoShortUUID
+      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 }))
+          }
+        },
+        {
+          label: player.localize('Copy the video URL at the current time'),
+          listener: function () {
+            const url = buildVideoLink({ shortUUID })
+
+            copyToClipboard(decorateVideoLink({ url, startTime: player.currentTime() }))
+          }
+        },
+        {
+          icon: 'code',
+          label: player.localize('Copy embed code'),
+          listener: () => {
+            copyToClipboard(buildVideoOrPlaylistEmbed({
+              embedUrl: self.currentLoadOptions.embedUrl,
+              embedTitle: self.currentLoadOptions.embedTitle
+            }))
+          }
+        }
+      ]
+
+      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 }
+  }
+}
+
+// ############################################################################
+
+export {
+  videojs
+}
diff --git a/client/src/assets/player/shared/bezels/bezels-plugin.ts b/client/src/assets/player/shared/bezels/bezels-plugin.ts
index ca88bc1f9..6afb2c6a3 100644
--- a/client/src/assets/player/shared/bezels/bezels-plugin.ts
+++ b/client/src/assets/player/shared/bezels/bezels-plugin.ts
@@ -1,5 +1,5 @@
 import videojs from 'video.js'
-import './pause-bezel'
+import { PauseBezel } from './pause-bezel'
 
 const Plugin = videojs.getPlugin('plugin')
 
@@ -12,7 +12,7 @@ class BezelsPlugin extends Plugin {
       player.addClass('vjs-bezels')
     })
 
-    player.addChild('PauseBezel', options)
+    player.addChild(new PauseBezel(player, options))
   }
 }
 
diff --git a/client/src/assets/player/shared/bezels/pause-bezel.ts b/client/src/assets/player/shared/bezels/pause-bezel.ts
index e35c39a5f..d364ad0dd 100644
--- a/client/src/assets/player/shared/bezels/pause-bezel.ts
+++ b/client/src/assets/player/shared/bezels/pause-bezel.ts
@@ -32,26 +32,61 @@ function getPlayBezel () {
 }
 
 const Component = videojs.getComponent('Component')
-class PauseBezel extends Component {
+export class PauseBezel extends Component {
   container: HTMLDivElement
 
+  private firstPlayDone = false
+  private paused = false
+
+  private playerPauseHandler: () => void
+  private playerPlayHandler: () => void
+  private videoChangeHandler: () => void
+
   constructor (player: videojs.Player, options?: videojs.ComponentOptions) {
     super(player, options)
 
     // Hide bezels on mobile since we already have our mobile overlay
     if (isMobile()) return
 
-    player.on('pause', (_: any) => {
-      if (player.seeking() || player.ended()) return
+    this.playerPauseHandler = () => {
+      if (player.seeking()) return
+
+      this.paused = true
+
+      if (player.ended()) return
+
       this.container.innerHTML = getPauseBezel()
       this.showBezel()
-    })
+    }
+
+    this.playerPlayHandler = () => {
+      if (player.seeking() || !this.firstPlayDone || !this.paused) {
+        this.firstPlayDone = true
+        return
+      }
+
+      this.paused = false
+      this.firstPlayDone = true
 
-    player.on('play', (_: any) => {
-      if (player.seeking()) return
       this.container.innerHTML = getPlayBezel()
       this.showBezel()
-    })
+    }
+
+    this.videoChangeHandler = () => {
+      this.firstPlayDone = false
+    }
+
+    player.on('video-change', () => this.videoChangeHandler)
+    player.on('pause', this.playerPauseHandler)
+    player.on('play', this.playerPlayHandler)
+  }
+
+  dispose () {
+    if (this.playerPauseHandler) this.player().off('pause', this.playerPauseHandler)
+    if (this.playerPlayHandler) this.player().off('play', this.playerPlayHandler)
+    if (this.videoChangeHandler) this.player().off('video-change', this.videoChangeHandler)
+
+    super.dispose()
   }
 
   createEl () {
diff --git a/client/src/assets/player/shared/control-bar/index.ts b/client/src/assets/player/shared/control-bar/index.ts
index 24877c267..9307027f6 100644
--- a/client/src/assets/player/shared/control-bar/index.ts
+++ b/client/src/assets/player/shared/control-bar/index.ts
@@ -2,6 +2,5 @@ export * from './next-previous-video-button'
 export * from './p2p-info-button'
 export * from './peertube-link-button'
 export * from './peertube-live-display'
-export * from './peertube-load-progress-bar'
 export * from './storyboard-plugin'
 export * from './theater-button'
diff --git a/client/src/assets/player/shared/control-bar/next-previous-video-button.ts b/client/src/assets/player/shared/control-bar/next-previous-video-button.ts
index b7b986806..18a107f52 100644
--- a/client/src/assets/player/shared/control-bar/next-previous-video-button.ts
+++ b/client/src/assets/player/shared/control-bar/next-previous-video-button.ts
@@ -4,14 +4,18 @@ import { NextPreviousVideoButtonOptions } from '../../types'
 const Button = videojs.getComponent('Button')
 
 class NextPreviousVideoButton extends Button {
-  private readonly nextPreviousVideoButtonOptions: NextPreviousVideoButtonOptions
+  options_: NextPreviousVideoButtonOptions & videojs.ComponentOptions
 
-  constructor (player: videojs.Player, options?: NextPreviousVideoButtonOptions) {
-    super(player, options as any)
+  constructor (player: videojs.Player, options?: NextPreviousVideoButtonOptions & videojs.ComponentOptions) {
+    super(player, options)
 
-    this.nextPreviousVideoButtonOptions = options
+    this.player().on('video-change', () => {
+      this.updateDisabled()
+      this.updateShowing()
+    })
 
-    this.update()
+    this.updateDisabled()
+    this.updateShowing()
   }
 
   createEl () {
@@ -35,15 +39,20 @@ class NextPreviousVideoButton extends Button {
   }
 
   handleClick () {
-    this.nextPreviousVideoButtonOptions.handler()
+    this.options_.handler()
   }
 
-  update () {
-    const disabled = this.nextPreviousVideoButtonOptions.isDisabled()
+  updateDisabled () {
+    const disabled = this.options_.isDisabled()
 
     if (disabled) this.addClass('vjs-disabled')
     else this.removeClass('vjs-disabled')
   }
+
+  updateShowing () {
+    if (this.options_.isDisplayed()) this.show()
+    else this.hide()
+  }
 }
 
 videojs.registerComponent('NextVideoButton', NextPreviousVideoButton)
diff --git a/client/src/assets/player/shared/control-bar/p2p-info-button.ts b/client/src/assets/player/shared/control-bar/p2p-info-button.ts
index 1979654ad..4177b3280 100644
--- a/client/src/assets/player/shared/control-bar/p2p-info-button.ts
+++ b/client/src/assets/player/shared/control-bar/p2p-info-button.ts
@@ -1,71 +1,44 @@
 import videojs from 'video.js'
-import { PeerTubeP2PInfoButtonOptions, PlayerNetworkInfo } from '../../types'
+import { PlayerNetworkInfo } from '../../types'
 import { bytes } from '../common'
 
 const Button = videojs.getComponent('Button')
-class P2pInfoButton extends Button {
-
-  constructor (player: videojs.Player, options?: PeerTubeP2PInfoButtonOptions) {
-    super(player, options as any)
-  }
+class P2PInfoButton extends Button {
+  el_: HTMLElement
 
   createEl () {
-    const div = videojs.dom.createEl('div', {
-      className: 'vjs-peertube'
-    })
-    const subDivWebtorrent = videojs.dom.createEl('div', {
+    const div = videojs.dom.createEl('div', { className: 'vjs-peertube' })
+    const subDivP2P = videojs.dom.createEl('div', {
       className: 'vjs-peertube-hidden' // Hide the stats before we get the info
     }) as HTMLDivElement
-    div.appendChild(subDivWebtorrent)
+    div.appendChild(subDivP2P)
 
-    // Stop here if P2P is not enabled
-    const p2pEnabled = (this.options_ as PeerTubeP2PInfoButtonOptions).p2pEnabled
-    if (!p2pEnabled) return div as HTMLButtonElement
+    const downloadIcon = videojs.dom.createEl('span', { className: 'icon icon-download' })
+    subDivP2P.appendChild(downloadIcon)
 
-    const downloadIcon = videojs.dom.createEl('span', {
-      className: 'icon icon-download'
-    })
-    subDivWebtorrent.appendChild(downloadIcon)
-
-    const downloadSpeedText = videojs.dom.createEl('span', {
-      className: 'download-speed-text'
-    })
-    const downloadSpeedNumber = videojs.dom.createEl('span', {
-      className: 'download-speed-number'
-    })
+    const downloadSpeedText = videojs.dom.createEl('span', { className: 'download-speed-text' })
+    const downloadSpeedNumber = videojs.dom.createEl('span', { className: 'download-speed-number' })
     const downloadSpeedUnit = videojs.dom.createEl('span')
     downloadSpeedText.appendChild(downloadSpeedNumber)
     downloadSpeedText.appendChild(downloadSpeedUnit)
-    subDivWebtorrent.appendChild(downloadSpeedText)
+    subDivP2P.appendChild(downloadSpeedText)
 
-    const uploadIcon = videojs.dom.createEl('span', {
-      className: 'icon icon-upload'
-    })
-    subDivWebtorrent.appendChild(uploadIcon)
+    const uploadIcon = videojs.dom.createEl('span', { className: 'icon icon-upload' })
+    subDivP2P.appendChild(uploadIcon)
 
-    const uploadSpeedText = videojs.dom.createEl('span', {
-      className: 'upload-speed-text'
-    })
-    const uploadSpeedNumber = videojs.dom.createEl('span', {
-      className: 'upload-speed-number'
-    })
+    const uploadSpeedText = videojs.dom.createEl('span', { className: 'upload-speed-text' })
+    const uploadSpeedNumber = videojs.dom.createEl('span', { className: 'upload-speed-number' })
     const uploadSpeedUnit = videojs.dom.createEl('span')
     uploadSpeedText.appendChild(uploadSpeedNumber)
     uploadSpeedText.appendChild(uploadSpeedUnit)
-    subDivWebtorrent.appendChild(uploadSpeedText)
+    subDivP2P.appendChild(uploadSpeedText)
 
-    const peersText = videojs.dom.createEl('span', {
-      className: 'peers-text'
-    })
-    const peersNumber = videojs.dom.createEl('span', {
-      className: 'peers-number'
-    })
-    subDivWebtorrent.appendChild(peersNumber)
-    subDivWebtorrent.appendChild(peersText)
+    const peersText = videojs.dom.createEl('span', { className: 'peers-text' })
+    const peersNumber = videojs.dom.createEl('span', { className: 'peers-number' })
+    subDivP2P.appendChild(peersNumber)
+    subDivP2P.appendChild(peersText)
 
-    const subDivHttp = videojs.dom.createEl('div', {
-      className: 'vjs-peertube-hidden'
-    })
+    const subDivHttp = videojs.dom.createEl('div', { className: 'vjs-peertube-hidden' }) as HTMLElement
     const subDivHttpText = videojs.dom.createEl('span', {
       className: 'http-fallback',
       textContent: 'HTTP'
@@ -74,14 +47,9 @@ class P2pInfoButton extends Button {
     subDivHttp.appendChild(subDivHttpText)
     div.appendChild(subDivHttp)
 
-    this.player_.on('p2pInfo', (event: any, data: PlayerNetworkInfo) => {
-      // We are in HTTP fallback
-      if (!data) {
-        subDivHttp.className = 'vjs-peertube-displayed'
-        subDivWebtorrent.className = 'vjs-peertube-hidden'
-
-        return
-      }
+    this.player_.on('p2p-info', (_event: any, data: PlayerNetworkInfo) => {
+      subDivP2P.className = 'vjs-peertube-displayed'
+      subDivHttp.className = 'vjs-peertube-hidden'
 
       const p2pStats = data.p2p
       const httpStats = data.http
@@ -92,17 +60,17 @@ class P2pInfoButton extends Button {
       const totalUploaded = bytes(p2pStats.uploaded)
       const numPeers = p2pStats.numPeers
 
-      subDivWebtorrent.title = this.player().localize('Total downloaded: ') + totalDownloaded.join(' ') + '\n'
+      subDivP2P.title = this.player().localize('Total downloaded: ') + totalDownloaded.join(' ') + '\n'
 
       if (data.source === 'p2p-media-loader') {
         const downloadedFromServer = bytes(httpStats.downloaded).join(' ')
         const downloadedFromPeers = bytes(p2pStats.downloaded).join(' ')
 
-        subDivWebtorrent.title +=
+        subDivP2P.title +=
           ' * ' + this.player().localize('From servers: ') + downloadedFromServer + '\n' +
           ' * ' + this.player().localize('From peers: ') + downloadedFromPeers + '\n'
       }
-      subDivWebtorrent.title += this.player().localize('Total uploaded: ') + totalUploaded.join(' ')
+      subDivP2P.title += this.player().localize('Total uploaded: ') + totalUploaded.join(' ')
 
       downloadSpeedNumber.textContent = downloadSpeed[0]
       downloadSpeedUnit.textContent = ' ' + downloadSpeed[1]
@@ -114,11 +82,24 @@ class P2pInfoButton extends Button {
       peersText.textContent = ' ' + (numPeers > 1 ? this.player().localize('peers') : this.player_.localize('peer'))
 
       subDivHttp.className = 'vjs-peertube-hidden'
-      subDivWebtorrent.className = 'vjs-peertube-displayed'
+      subDivP2P.className = 'vjs-peertube-displayed'
+    })
+
+    this.player_.on('http-info', (_event, data: PlayerNetworkInfo) => {
+      // We are in HTTP fallback
+      subDivHttp.className = 'vjs-peertube-displayed'
+      subDivP2P.className = 'vjs-peertube-hidden'
+
+      subDivHttp.title = this.player().localize('Total downloaded: ') + bytes(data.http.downloaded).join(' ')
+    })
+
+    this.player_.on('video-change', () => {
+      subDivP2P.className = 'vjs-peertube-hidden'
+      subDivHttp.className = 'vjs-peertube-hidden'
     })
 
     return div as HTMLButtonElement
   }
 }
 
-videojs.registerComponent('P2PInfoButton', P2pInfoButton)
+videojs.registerComponent('P2PInfoButton', P2PInfoButton)
diff --git a/client/src/assets/player/shared/control-bar/peertube-link-button.ts b/client/src/assets/player/shared/control-bar/peertube-link-button.ts
index 45d7ac42f..8242b9cea 100644
--- a/client/src/assets/player/shared/control-bar/peertube-link-button.ts
+++ b/client/src/assets/player/shared/control-bar/peertube-link-button.ts
@@ -3,37 +3,58 @@ import { buildVideoLink, decorateVideoLink } from '@shared/core-utils'
 import { PeerTubeLinkButtonOptions } from '../../types'
 
 const Component = videojs.getComponent('Component')
+
 class PeerTubeLinkButton extends Component {
+  private mouseEnterHandler: () => void
+  private clickHandler: () => void
 
-  constructor (player: videojs.Player, options?: PeerTubeLinkButtonOptions) {
-    super(player, options as any)
-  }
+  options_: PeerTubeLinkButtonOptions & videojs.ComponentOptions
 
-  createEl () {
-    return this.buildElement()
+  constructor (player: videojs.Player, options?: PeerTubeLinkButtonOptions & videojs.ComponentOptions) {
+    super(player, options)
+
+    this.updateShowing()
+    this.player().on('video-change', () => this.updateShowing())
   }
 
-  updateHref () {
-    this.el().setAttribute('href', this.buildLink())
+  dispose () {
+    if (this.el()) return
+
+    this.el().removeEventListener('mouseenter', this.mouseEnterHandler)
+    this.el().removeEventListener('click', this.clickHandler)
+
+    super.dispose()
   }
 
-  private buildElement () {
+  createEl () {
     const el = videojs.dom.createEl('a', {
       href: this.buildLink(),
-      innerHTML: (this.options_ as PeerTubeLinkButtonOptions).instanceName,
+      innerHTML: this.options_.instanceName,
       title: this.player().localize('Video page (new window)'),
       className: 'vjs-peertube-link',
       target: '_blank'
     })
 
-    el.addEventListener('mouseenter', () => this.updateHref())
-    el.addEventListener('click', () => this.player().pause())
+    this.mouseEnterHandler = () => this.updateHref()
+    this.clickHandler = () => this.player().pause()
+
+    el.addEventListener('mouseenter', this.mouseEnterHandler)
+    el.addEventListener('click', this.clickHandler)
+
+    return el
+  }
+
+  updateShowing () {
+    if (this.options_.isDisplayed()) this.show()
+    else this.hide()
+  }
 
-    return el as HTMLButtonElement
+  updateHref () {
+    this.el().setAttribute('href', this.buildLink())
   }
 
   private buildLink () {
-    const url = buildVideoLink({ shortUUID: (this.options_ as PeerTubeLinkButtonOptions).shortUUID })
+    const url = buildVideoLink({ shortUUID: this.options_.shortUUID() })
 
     return decorateVideoLink({ url, startTime: this.player().currentTime() })
   }
diff --git a/client/src/assets/player/shared/control-bar/peertube-live-display.ts b/client/src/assets/player/shared/control-bar/peertube-live-display.ts
index 649eb0b00..f9f6bf12f 100644
--- a/client/src/assets/player/shared/control-bar/peertube-live-display.ts
+++ b/client/src/assets/player/shared/control-bar/peertube-live-display.ts
@@ -13,7 +13,6 @@ class PeerTubeLiveDisplay extends ClickableComponent {
 
     this.interval = this.setInterval(() => this.updateClass(), 1000)
 
-    this.show()
     this.updateSync(true)
   }
 
@@ -30,7 +29,7 @@ class PeerTubeLiveDisplay extends ClickableComponent {
 
   createEl () {
     const el = super.createEl('div', {
-      className: 'vjs-live-control vjs-control'
+      className: 'vjs-pt-live-control vjs-control'
     })
 
     this.contentEl_ = videojs.dom.createEl('div', {
@@ -83,10 +82,9 @@ class PeerTubeLiveDisplay extends ClickableComponent {
   }
 
   private getHLSJS () {
-    const p2pMediaLoader = this.player()?.p2pMediaLoader
-    if (!p2pMediaLoader) return undefined
+    if (!this.player()?.usingPlugin('p2pMediaLoader')) return
 
-    return p2pMediaLoader().getHLSJS()
+    return this.player().p2pMediaLoader().getHLSJS()
   }
 }
 
diff --git a/client/src/assets/player/shared/control-bar/peertube-load-progress-bar.ts b/client/src/assets/player/shared/control-bar/peertube-load-progress-bar.ts
deleted file mode 100644
index 623e70eb2..000000000
--- a/client/src/assets/player/shared/control-bar/peertube-load-progress-bar.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-import videojs from 'video.js'
-
-const Component = videojs.getComponent('Component')
-
-class PeerTubeLoadProgressBar extends Component {
-
-  constructor (player: videojs.Player, options?: videojs.ComponentOptions) {
-    super(player, options)
-
-    this.on(player, 'progress', this.update)
-  }
-
-  createEl () {
-    return super.createEl('div', {
-      className: 'vjs-load-progress',
-      innerHTML: `<span class="vjs-control-text"><span>${this.localize('Loaded')}</span>: 0%</span>`
-    })
-  }
-
-  dispose () {
-    super.dispose()
-  }
-
-  update () {
-    const torrent = this.player().webtorrent().getTorrent()
-    if (!torrent) return
-
-    (this.el() as HTMLElement).style.width = (torrent.progress * 100) + '%'
-  }
-
-}
-
-Component.registerComponent('PeerTubeLoadProgressBar', PeerTubeLoadProgressBar)
diff --git a/client/src/assets/player/shared/control-bar/storyboard-plugin.ts b/client/src/assets/player/shared/control-bar/storyboard-plugin.ts
index 81ab60842..80c69b5f2 100644
--- a/client/src/assets/player/shared/control-bar/storyboard-plugin.ts
+++ b/client/src/assets/player/shared/control-bar/storyboard-plugin.ts
@@ -24,6 +24,8 @@ class StoryboardPlugin extends Plugin {
 
   private readonly boundedHijackMouseTooltip: typeof StoryboardPlugin.prototype.hijackMouseTooltip
 
+  private onReadyOrLoadstartHandler: (event: { type: 'ready' }) => void
+
   constructor (player: videojs.Player, options: videojs.ComponentOptions & StoryboardOptions) {
     super(player, options)
 
@@ -54,7 +56,7 @@ class StoryboardPlugin extends Plugin {
     this.spritePlaceholder = videojs.dom.createEl('div', { className: 'vjs-storyboard-sprite-placeholder' }) as HTMLElement
     this.seekBar?.el()?.appendChild(this.spritePlaceholder)
 
-    this.player.on([ 'ready', 'loadstart' ], event => {
+    this.onReadyOrLoadstartHandler = event => {
       if (event.type !== 'ready') {
         const spriteSource = this.player.currentSources().find(source => {
           return Object.prototype.hasOwnProperty.call(source, 'storyboard')
@@ -72,7 +74,18 @@ class StoryboardPlugin extends Plugin {
       this.cached = !!this.sprites[this.url]
 
       this.load()
-    })
+    }
+
+    this.player.on([ 'ready', 'loadstart' ], this.onReadyOrLoadstartHandler)
+  }
+
+  dispose () {
+    if (this.onReadyOrLoadstartHandler) this.player.off([ 'ready', 'loadstart' ], this.onReadyOrLoadstartHandler)
+    if (this.progress) this.progress.off([ 'mousemove', 'touchmove' ], this.boundedHijackMouseTooltip)
+
+    this.seekBar?.el()?.removeChild(this.spritePlaceholder)
+
+    super.dispose()
   }
 
   private load () {
diff --git a/client/src/assets/player/shared/control-bar/theater-button.ts b/client/src/assets/player/shared/control-bar/theater-button.ts
index 56c349d6b..a5feb56ee 100644
--- a/client/src/assets/player/shared/control-bar/theater-button.ts
+++ b/client/src/assets/player/shared/control-bar/theater-button.ts
@@ -1,14 +1,19 @@
 import videojs from 'video.js'
 import { getStoredTheater, saveTheaterInStore } from '../../peertube-player-local-storage'
+import { TheaterButtonOptions } from '../../types'
 
 const Button = videojs.getComponent('Button')
 class TheaterButton extends Button {
 
   private static readonly THEATER_MODE_CLASS = 'vjs-theater-enabled'
 
-  constructor (player: videojs.Player, options: videojs.ComponentOptions) {
+  private theaterButtonOptions: TheaterButtonOptions
+
+  constructor (player: videojs.Player, options: TheaterButtonOptions & videojs.ComponentOptions) {
     super(player, options)
 
+    this.theaterButtonOptions = options
+
     const enabled = getStoredTheater()
     if (enabled === true) {
       this.player().addClass(TheaterButton.THEATER_MODE_CLASS)
@@ -19,6 +24,9 @@ class TheaterButton extends Button {
     this.controlText('Theater mode')
 
     this.player().theaterEnabled = enabled
+
+    this.updateShowing()
+    this.player().on('video-change', () => this.updateShowing())
   }
 
   buildCSSClass () {
@@ -36,7 +44,7 @@ class TheaterButton extends Button {
 
     saveTheaterInStore(theaterEnabled)
 
-    this.player_.trigger('theaterChange', theaterEnabled)
+    this.player_.trigger('theater-change', theaterEnabled)
   }
 
   handleClick () {
@@ -48,6 +56,11 @@ class TheaterButton extends Button {
   private isTheaterEnabled () {
     return this.player_.hasClass(TheaterButton.THEATER_MODE_CLASS)
   }
+
+  private updateShowing () {
+    if (this.theaterButtonOptions.isDisplayed()) this.show()
+    else this.hide()
+  }
 }
 
 videojs.registerComponent('TheaterButton', TheaterButton)
diff --git a/client/src/assets/player/shared/dock/peertube-dock-component.ts b/client/src/assets/player/shared/dock/peertube-dock-component.ts
index 183c7a00f..c13ca647b 100644
--- a/client/src/assets/player/shared/dock/peertube-dock-component.ts
+++ b/client/src/assets/player/shared/dock/peertube-dock-component.ts
@@ -10,17 +10,20 @@ export type PeerTubeDockComponentOptions = {
 
 class PeerTubeDockComponent extends Component {
 
-  createEl () {
-    const options = this.options_ as PeerTubeDockComponentOptions
+  options_: videojs.ComponentOptions & PeerTubeDockComponentOptions
 
-    const el = super.createEl('div', {
-      className: 'peertube-dock'
-    })
+  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
+  constructor (player: videojs.Player, options: videojs.ComponentOptions & PeerTubeDockComponentOptions) {
+    super(player, options)
+  }
+
+  createEl () {
+    const el = super.createEl('div', { className: 'peertube-dock' })
 
-    if (options.avatarUrl) {
+    if (this.options_.avatarUrl) {
       const avatar = videojs.dom.createEl('img', {
         className: 'peertube-dock-avatar',
-        src: options.avatarUrl
+        src: this.options_.avatarUrl
       })
 
       el.appendChild(avatar)
@@ -30,27 +33,27 @@ class PeerTubeDockComponent extends Component {
       className: 'peertube-dock-title-description'
     })
 
-    if (options.title) {
+    if (this.options_.title) {
       const title = videojs.dom.createEl('div', {
         className: 'peertube-dock-title',
-        title: options.title,
-        innerHTML: options.title
+        title: this.options_.title,
+        innerHTML: this.options_.title
       })
 
       elWrapperTitleDescription.appendChild(title)
     }
 
-    if (options.description) {
+    if (this.options_.description) {
       const description = videojs.dom.createEl('div', {
         className: 'peertube-dock-description',
-        title: options.description,
-        innerHTML: options.description
+        title: this.options_.description,
+        innerHTML: this.options_.description
       })
 
       elWrapperTitleDescription.appendChild(description)
     }
 
-    if (options.title || options.description) {
+    if (this.options_.title || this.options_.description) {
       el.appendChild(elWrapperTitleDescription)
     }
 
diff --git a/client/src/assets/player/shared/dock/peertube-dock-plugin.ts b/client/src/assets/player/shared/dock/peertube-dock-plugin.ts
index 245981692..fc71a8c4b 100644
--- a/client/src/assets/player/shared/dock/peertube-dock-plugin.ts
+++ b/client/src/assets/player/shared/dock/peertube-dock-plugin.ts
@@ -10,14 +10,25 @@ export type PeerTubeDockPluginOptions = {
 }
 
 class PeerTubeDockPlugin extends Plugin {
+  private dockComponent: PeerTubeDockComponent
+
   constructor (player: videojs.Player, options: videojs.PlayerOptions & PeerTubeDockPluginOptions) {
     super(player, options)
 
-    this.player.addClass('peertube-dock')
-
-    this.player.ready(() => {
-      this.player.addChild('PeerTubeDockComponent', options) as PeerTubeDockComponent
+    player.ready(() => {
+      player.addClass('peertube-dock')
     })
+
+    this.dockComponent = new PeerTubeDockComponent(player, options)
+    player.addChild(this.dockComponent)
+  }
+
+  dispose () {
+    this.dockComponent?.dispose()
+    this.player.removeChild(this.dockComponent)
+    this.player.removeClass('peertube-dock')
+
+    super.dispose()
   }
 }
 
diff --git a/client/src/assets/player/shared/hotkeys/peertube-hotkeys-plugin.ts b/client/src/assets/player/shared/hotkeys/peertube-hotkeys-plugin.ts
index 2742b21a1..e77b7dc6d 100644
--- a/client/src/assets/player/shared/hotkeys/peertube-hotkeys-plugin.ts
+++ b/client/src/assets/player/shared/hotkeys/peertube-hotkeys-plugin.ts
@@ -31,6 +31,8 @@ class PeerTubeHotkeysPlugin extends Plugin {
 
   dispose () {
     document.removeEventListener('keydown', this.handleKeyFunction)
+
+    super.dispose()
   }
 
   private onKeyDown (event: KeyboardEvent) {
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
deleted file mode 100644
index 26f923e92..000000000
--- a/client/src/assets/player/shared/manager-options/control-bar-options-builder.ts
+++ /dev/null
@@ -1,155 +0,0 @@
-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, {
-      ...this.getTimeControls(),
-
-      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,
-          instanceName: this.options.instanceName
-        } as PeerTubeLinkButtonOptions
-      })
-    }
-
-    if (this.options.theaterButton === true) {
-      Object.assign(children, {
-        theaterButton: {}
-      })
-    }
-
-    Object.assign(children, {
-      fullscreenToggle: {}
-    })
-
-    return children
-  }
-
-  private getSettingsButton () {
-    const settingEntries: string[] = []
-
-    if (!this.options.isLive) {
-      settingEntries.push('playbackRateMenuButton')
-    }
-
-    if (this.options.captions === true) settingEntries.push('captionsButton')
-
-    settingEntries.push('resolutionMenuButton')
-
-    return {
-      settingsButton: {
-        setup: {
-          maxHeightOffset: 40
-        },
-        entries: settingEntries
-      }
-    }
-  }
-
-  private getTimeControls () {
-    if (this.options.isLive) {
-      return {
-        peerTubeLiveDisplay: {}
-      }
-    }
-
-    return {
-      currentTimeDisplay: {},
-      timeDivider: {},
-      durationDisplay: {}
-    }
-  }
-
-  private getProgressControl () {
-    if (this.options.isLive) return {}
-
-    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/index.ts b/client/src/assets/player/shared/manager-options/index.ts
deleted file mode 100644
index 4934d8302..000000000
--- a/client/src/assets/player/shared/manager-options/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-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
deleted file mode 100644
index 5d3ee4c4a..000000000
--- a/client/src/assets/player/shared/manager-options/manager-options-builder.ts
+++ /dev/null
@@ -1,186 +0,0 @@
-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, pick } 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
-  ) {
-
-  }
-
-  async getVideojsOptions (alreadyPlayed: boolean): Promise<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
-
-        ...pick(commonOptions, [
-          'videoViewUrl',
-          'videoViewIntervalMs',
-          'authorizationHeader',
-          'startTime',
-          'videoDuration',
-          'subtitle',
-          'videoCaptions',
-          'stopTime',
-          'isLive',
-          'videoUUID'
-        ])
-      },
-      metrics: {
-        mode: this.mode,
-
-        ...pick(commonOptions, [
-          'metricsUrl',
-          'videoUUID'
-        ])
-      }
-    }
-
-    if (commonOptions.playlist) {
-      plugins.playlist = commonOptions.playlist
-    }
-
-    if (this.mode === 'p2p-media-loader') {
-      const hlsOptionsBuilder = new HLSOptionsBuilder(this.options, this.p2pMediaLoaderModule)
-      const options = await hlsOptionsBuilder.getPluginOptions()
-
-      Object.assign(plugins, pick(options, [ 'hlsjs', 'p2pMediaLoader' ]))
-      Object.assign(html5, options.html5)
-    } 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: videojs.Autoplay, 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 this.options.common.forceAutoplay
-      ? 'any'
-      : '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({ embedUrl: commonOptions.embedUrl, embedTitle: 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
deleted file mode 100644
index 80eec02cf..000000000
--- a/client/src/assets/player/shared/manager-options/webtorrent-options-builder.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { addQueryParams } from '../../../../../../shared/core-utils'
-import { PeertubePlayerManagerOptions, WebtorrentPluginOptions } 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: WebtorrentPluginOptions = {
-      autoplay,
-
-      playerRefusedP2P: commonOptions.p2pEnabled === false,
-      videoDuration: commonOptions.videoDuration,
-      playerElement: commonOptions.playerElement,
-
-      videoFileToken: commonOptions.videoFileToken,
-
-      requiresUserAuth: commonOptions.requiresUserAuth,
-
-      buildWebSeedUrls: file => {
-        if (!commonOptions.requiresUserAuth && !commonOptions.requiresPassword) return []
-
-        return [ addQueryParams(file.fileUrl, { videoFileToken: commonOptions.videoFileToken() }) ]
-      },
-
-      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 }
-  }
-}
diff --git a/client/src/assets/player/shared/metrics/metrics-plugin.ts b/client/src/assets/player/shared/metrics/metrics-plugin.ts
index 2aae3e90a..48363a724 100644
--- a/client/src/assets/player/shared/metrics/metrics-plugin.ts
+++ b/client/src/assets/player/shared/metrics/metrics-plugin.ts
@@ -1,14 +1,15 @@
+import debug from 'debug'
 import videojs from 'video.js'
-import { PlaybackMetricCreate } from '../../../../../../shared/models'
-import { MetricsPluginOptions, PlayerMode, PlayerNetworkInfo } from '../../types'
 import { logger } from '@root-helpers/logger'
+import { PlaybackMetricCreate } from '../../../../../../shared/models'
+import { MetricsPluginOptions, PlayerNetworkInfo } from '../../types'
+
+const debugLogger = debug('peertube:player:metrics')
 
 const Plugin = videojs.getPlugin('plugin')
 
 class MetricsPlugin extends Plugin {
-  private readonly metricsUrl: string
-  private readonly videoUUID: string
-  private readonly mode: PlayerMode
+  options_: MetricsPluginOptions
 
   private downloadedBytesP2P = 0
   private downloadedBytesHTTP = 0
@@ -28,29 +29,54 @@ class MetricsPlugin extends Plugin {
   constructor (player: videojs.Player, options: MetricsPluginOptions) {
     super(player)
 
-    this.metricsUrl = options.metricsUrl
-    this.videoUUID = options.videoUUID
-    this.mode = options.mode
+    this.options_ = options
 
-    this.player.one('play', () => {
-      this.runMetricsInterval()
+    this.trackBytes()
+    this.trackResolutionChange()
+    this.trackErrors()
 
-      this.trackBytes()
-      this.trackResolutionChange()
-      this.trackErrors()
+    this.one('play', () => {
+      this.player.on('video-change', () => {
+        this.runMetricsIntervalOnPlay()
+      })
     })
+
+    this.runMetricsIntervalOnPlay()
   }
 
   dispose () {
     if (this.metricsInterval) clearInterval(this.metricsInterval)
+
+    super.dispose()
+  }
+
+  private runMetricsIntervalOnPlay () {
+    this.downloadedBytesP2P = 0
+    this.downloadedBytesHTTP = 0
+    this.uploadedBytesP2P = 0
+
+    this.resolutionChanges = 0
+    this.errors = 0
+
+    this.lastPlayerNetworkInfo = undefined
+
+    debugLogger('Will track metrics on next play')
+
+    this.player.one('play', () => {
+      debugLogger('Tracking metrics')
+
+      this.runMetricsInterval()
+    })
   }
 
   private runMetricsInterval () {
+    if (this.metricsInterval) clearInterval(this.metricsInterval)
+
     this.metricsInterval = setInterval(() => {
       let resolution: number
       let fps: number
 
-      if (this.mode === 'p2p-media-loader') {
+      if (this.player.usingPlugin('p2pMediaLoader')) {
         const level = this.player.p2pMediaLoader().getCurrentLevel()
         if (!level) return
 
@@ -60,21 +86,23 @@ class MetricsPlugin extends Plugin {
         fps = framerate
           ? parseInt(framerate, 10)
           : undefined
-      } else { // webtorrent
-        const videoFile = this.player.webtorrent().getCurrentVideoFile()
+      } else if (this.player.usingPlugin('webVideo')) {
+        const videoFile = this.player.webVideo().getCurrentVideoFile()
         if (!videoFile) return
 
         resolution = videoFile.resolution.id
         fps = videoFile.fps && videoFile.fps !== -1
           ? videoFile.fps
           : undefined
+      } else {
+        return
       }
 
       const body: PlaybackMetricCreate = {
         resolution,
         fps,
 
-        playerMode: this.mode,
+        playerMode: this.options_.mode(),
 
         resolutionChanges: this.resolutionChanges,
 
@@ -85,7 +113,7 @@ class MetricsPlugin extends Plugin {
 
         uploadedBytesP2P: this.uploadedBytesP2P,
 
-        videoId: this.videoUUID
+        videoId: this.options_.videoUUID()
       }
 
       this.resolutionChanges = 0
@@ -99,15 +127,13 @@ class MetricsPlugin extends Plugin {
 
       const headers = new Headers({ 'Content-type': 'application/json; charset=UTF-8' })
 
-      return fetch(this.metricsUrl, { method: 'POST', body: JSON.stringify(body), headers })
+      return fetch(this.options_.metricsUrl(), { method: 'POST', body: JSON.stringify(body), headers })
         .catch(err => logger.error('Cannot send metrics to the server.', err))
     }, this.CONSTANTS.METRICS_INTERVAL)
   }
 
   private trackBytes () {
-    this.player.on('p2pInfo', (_event, data: PlayerNetworkInfo) => {
-      if (!data) return
-
+    this.player.on('p2p-info', (_event, data: PlayerNetworkInfo) => {
       this.downloadedBytesHTTP += data.http.downloaded - (this.lastPlayerNetworkInfo?.http.downloaded || 0)
       this.downloadedBytesP2P += data.p2p.downloaded - (this.lastPlayerNetworkInfo?.p2p.downloaded || 0)
 
@@ -115,10 +141,18 @@ class MetricsPlugin extends Plugin {
 
       this.lastPlayerNetworkInfo = data
     })
+
+    this.player.on('http-info', (_event, data: PlayerNetworkInfo) => {
+      this.downloadedBytesHTTP += data.http.downloaded - (this.lastPlayerNetworkInfo?.http.downloaded || 0)
+    })
   }
 
   private trackResolutionChange () {
-    this.player.on('engineResolutionChange', () => {
+    this.player.on('engine-resolution-change', () => {
+      this.resolutionChanges++
+    })
+
+    this.player.on('user-resolution-change', () => {
       this.resolutionChanges++
     })
   }
diff --git a/client/src/assets/player/shared/mobile/peertube-mobile-buttons.ts b/client/src/assets/player/shared/mobile/peertube-mobile-buttons.ts
index 09cb98f2e..1bc3ca38d 100644
--- a/client/src/assets/player/shared/mobile/peertube-mobile-buttons.ts
+++ b/client/src/assets/player/shared/mobile/peertube-mobile-buttons.ts
@@ -2,22 +2,20 @@ import videojs from 'video.js'
 
 const Component = videojs.getComponent('Component')
 class PeerTubeMobileButtons extends Component {
+  private mainButton: HTMLDivElement
 
   private rewind: Element
   private forward: Element
   private rewindText: Element
   private forwardText: Element
 
-  createEl () {
-    const container = super.createEl('div', {
-      className: 'vjs-mobile-buttons-overlay'
-    }) as HTMLDivElement
+  private touchStartHandler: (e: TouchEvent) => void
 
-    const mainButton = super.createEl('div', {
-      className: 'main-button'
-    }) as HTMLDivElement
+  createEl () {
+    const container = super.createEl('div', { className: 'vjs-mobile-buttons-overlay' }) as HTMLDivElement
+    this.mainButton = super.createEl('div', { className: 'main-button' }) as HTMLDivElement
 
-    mainButton.addEventListener('touchstart', e => {
+    this.touchStartHandler = e => {
       e.stopPropagation()
 
       if (this.player_.paused() || this.player_.ended()) {
@@ -26,7 +24,9 @@ class PeerTubeMobileButtons extends Component {
       }
 
       this.player_.pause()
-    })
+    }
+
+    this.mainButton.addEventListener('touchstart', this.touchStartHandler, { passive: true })
 
     this.rewind = super.createEl('div', { className: 'rewind-button vjs-hidden' })
     this.forward = super.createEl('div', { className: 'forward-button vjs-hidden' })
@@ -40,12 +40,18 @@ class PeerTubeMobileButtons extends Component {
     this.forwardText = this.forward.appendChild(super.createEl('div', { className: 'text' }))
 
     container.appendChild(this.rewind)
-    container.appendChild(mainButton)
+    container.appendChild(this.mainButton)
     container.appendChild(this.forward)
 
     return container
   }
 
+  dispose () {
+    if (this.touchStartHandler) this.mainButton.removeEventListener('touchstart', this.touchStartHandler)
+
+    super.dispose()
+  }
+
   displayFastSeek (amount: number) {
     if (amount === 0) {
       this.hideRewind()
diff --git a/client/src/assets/player/shared/mobile/peertube-mobile-plugin.ts b/client/src/assets/player/shared/mobile/peertube-mobile-plugin.ts
index 646e9f8c6..f31fa7ddb 100644
--- a/client/src/assets/player/shared/mobile/peertube-mobile-plugin.ts
+++ b/client/src/assets/player/shared/mobile/peertube-mobile-plugin.ts
@@ -21,6 +21,15 @@ class PeerTubeMobilePlugin extends Plugin {
 
   private setCurrentTimeTimeout: ReturnType<typeof setTimeout>
 
+  private onPlayHandler: () => void
+  private onFullScreenChangeHandler: () => void
+  private onTouchStartHandler: (event: TouchEvent) => void
+  private onMobileButtonTouchStartHandler: (event: TouchEvent) => void
+  private sliderActiveHandler: () => void
+  private sliderInactiveHandler: () => void
+
+  private seekBar: videojs.Component
+
   constructor (player: videojs.Player, options: videojs.PlayerOptions) {
     super(player, options)
 
@@ -36,18 +45,38 @@ class PeerTubeMobilePlugin extends Plugin {
     (this.player.options_.userActions as any).click = false
     this.player.options_.userActions.doubleClick = false
 
-    this.player.one('play', () => {
-      this.initTouchStartEvents()
-    })
+    this.onPlayHandler = () => this.initTouchStartEvents()
+    this.player.one('play', this.onPlayHandler)
+
+    this.seekBar = this.player.getDescendant([ 'controlBar', 'progressControl', 'seekBar' ])
+
+    this.sliderActiveHandler = () => this.player.addClass('vjs-mobile-sliding')
+    this.sliderInactiveHandler = () => this.player.removeClass('vjs-mobile-sliding')
+
+    this.seekBar.on('slideractive', this.sliderActiveHandler)
+    this.seekBar.on('sliderinactive', this.sliderInactiveHandler)
+  }
+
+  dispose () {
+    if (this.onPlayHandler) this.player.off('play', this.onPlayHandler)
+    if (this.onFullScreenChangeHandler) this.player.off('fullscreenchange', this.onFullScreenChangeHandler)
+    if (this.onTouchStartHandler) this.player.off('touchstart', this.onFullScreenChangeHandler)
+    if (this.onMobileButtonTouchStartHandler) {
+      this.peerTubeMobileButtons?.el().removeEventListener('touchstart', this.onMobileButtonTouchStartHandler)
+    }
+
+    super.dispose()
   }
 
   private handleFullscreenRotation () {
-    this.player.on('fullscreenchange', () => {
+    this.onFullScreenChangeHandler = () => {
       if (!this.player.isFullscreen() || this.isPortraitVideo()) return
 
       screen.orientation.lock('landscape')
         .catch(err => logger.error('Cannot lock screen to landscape.', err))
-    })
+    }
+
+    this.player.on('fullscreenchange', this.onFullScreenChangeHandler)
   }
 
   private isPortraitVideo () {
@@ -80,19 +109,22 @@ class PeerTubeMobilePlugin extends Plugin {
       this.lastTapEvent = event
     }
 
-    this.player.on('touchstart', (event: TouchEvent) => {
+    this.onTouchStartHandler = event => {
       // Only enable user active on player touch, we listen event on peertube mobile buttons to disable it
       if (this.player.userActive()) return
 
       handleTouchStart(event)
-    })
+    }
+    this.player.on('touchstart', this.onTouchStartHandler)
 
-    this.peerTubeMobileButtons.el().addEventListener('touchstart', (event: TouchEvent) => {
+    this.onMobileButtonTouchStartHandler = event => {
       // Prevent mousemove/click events firing on the player, that conflict with our user active logic
       event.preventDefault()
 
       handleTouchStart(event)
-    }, { passive: false })
+    }
+
+    this.peerTubeMobileButtons.el().addEventListener('touchstart', this.onMobileButtonTouchStartHandler, { passive: false })
   }
 
   private onDoubleTap (event: TouchEvent) {
diff --git a/client/src/assets/player/shared/p2p-media-loader/hls-plugin.ts b/client/src/assets/player/shared/p2p-media-loader/hls-plugin.ts
index d05d6193c..d83ec625a 100644
--- a/client/src/assets/player/shared/p2p-media-loader/hls-plugin.ts
+++ b/client/src/assets/player/shared/p2p-media-loader/hls-plugin.ts
@@ -14,6 +14,10 @@ type Metadata = {
   levels: Level[]
 }
 
+// ---------------------------------------------------------------------------
+// Source handler registration
+// ---------------------------------------------------------------------------
+
 type HookFn = (player: videojs.Player, hljs: Hlsjs) => void
 
 const registerSourceHandler = function (vjs: typeof videojs) {
@@ -25,10 +29,13 @@ const registerSourceHandler = function (vjs: typeof videojs) {
   const html5 = vjs.getTech('Html5')
 
   if (!html5) {
-    logger.error('No Hml5 tech found in videojs')
+    logger.error('No "Html5" tech found in videojs')
     return
   }
 
+  // Already registered
+  if ((html5 as any).canPlaySource({ type: 'application/x-mpegURL' })) return
+
   // FIXME: typings
   (html5 as any).registerSourceHandler({
     canHandleSource: function (source: videojs.Tech.SourceObject) {
@@ -56,32 +63,55 @@ const registerSourceHandler = function (vjs: typeof videojs) {
   (vjs as any).Html5Hlsjs = Html5Hlsjs
 }
 
-function hlsjsConfigHandler (this: videojs.Player, options: HlsjsConfigHandlerOptions) {
-  const player = this
+// ---------------------------------------------------------------------------
+// HLS options plugin
+// ---------------------------------------------------------------------------
 
-  if (!options) return
+const Plugin = videojs.getPlugin('plugin')
 
-  if (!player.srOptions_) {
-    player.srOptions_ = {}
-  }
+class HLSJSConfigHandler extends Plugin {
+
+  constructor (player: videojs.Player, options: HlsjsConfigHandlerOptions) {
+    super(player, options)
+
+    if (!options) return
+
+    if (!player.srOptions_) {
+      player.srOptions_ = {}
+    }
+
+    if (!player.srOptions_.hlsjsConfig) {
+      player.srOptions_.hlsjsConfig = options.hlsjsConfig
+    }
 
-  if (!player.srOptions_.hlsjsConfig) {
-    player.srOptions_.hlsjsConfig = options.hlsjsConfig
+    if (options.levelLabelHandler && !player.srOptions_.levelLabelHandler) {
+      player.srOptions_.levelLabelHandler = options.levelLabelHandler
+    }
+
+    registerSourceHandler(videojs)
   }
 
-  if (options.levelLabelHandler && !player.srOptions_.levelLabelHandler) {
-    player.srOptions_.levelLabelHandler = options.levelLabelHandler
+  dispose () {
+    this.player.srOptions_ = undefined
+
+    const tech = this.player.tech(true) as any
+    if (tech.hlsProvider) {
+      tech.hlsProvider.dispose()
+      tech.hlsProvider = undefined
+    }
+
+    super.dispose()
   }
 }
 
-const registerConfigPlugin = function (vjs: typeof videojs) {
-  // Used in Brightcove since we don't pass options directly there
-  const registerVjsPlugin = vjs.registerPlugin || vjs.plugin
-  registerVjsPlugin('hlsjs', hlsjsConfigHandler)
-}
+videojs.registerPlugin('hlsjs', HLSJSConfigHandler)
+
+// ---------------------------------------------------------------------------
+// HLS JS source handler
+// ---------------------------------------------------------------------------
 
-class Html5Hlsjs {
-  private static readonly hooks: { [id: string]: HookFn[] } = {}
+export class Html5Hlsjs {
+  private static hooks: { [id: string]: HookFn[] } = {}
 
   private readonly videoElement: HTMLVideoElement
   private readonly errorCounts: ErrorCounts = {}
@@ -101,8 +131,9 @@ class Html5Hlsjs {
   private dvrDuration: number = null
   private edgeMargin: number = null
 
-  private handlers: { [ id in 'play' ]: EventListener } = {
-    play: null
+  private handlers: { [ id in 'play' | 'error' ]: EventListener } = {
+    play: null,
+    error: null
   }
 
   constructor (vjs: typeof videojs, source: videojs.Tech.SourceObject, tech: videojs.Tech) {
@@ -115,7 +146,7 @@ class Html5Hlsjs {
     this.videoElement = tech.el() as HTMLVideoElement
     this.player = vjs((tech.options_ as any).playerId)
 
-    this.videoElement.addEventListener('error', event => {
+    this.handlers.error = event => {
       let errorTxt: string
       const mediaError = ((event.currentTarget || event.target) as HTMLVideoElement).error
 
@@ -143,7 +174,8 @@ class Html5Hlsjs {
       }
 
       logger.error(`MEDIA_ERROR: ${errorTxt}`)
-    })
+    }
+    this.videoElement.addEventListener('error', this.handlers.error)
 
     this.initialize()
   }
@@ -174,6 +206,7 @@ class Html5Hlsjs {
   // See comment for `initialize` method.
   dispose () {
     this.videoElement.removeEventListener('play', this.handlers.play)
+    this.videoElement.removeEventListener('error', this.handlers.error)
 
     // FIXME: https://github.com/video-dev/hls.js/issues/4092
     const untypedHLS = this.hls as any
@@ -200,6 +233,10 @@ class Html5Hlsjs {
     return true
   }
 
+  static removeAllHooks () {
+    Html5Hlsjs.hooks = {}
+  }
+
   private _executeHooksFor (type: string) {
     if (Html5Hlsjs.hooks[type] === undefined) {
       return
@@ -421,7 +458,7 @@ class Html5Hlsjs {
         ? data.level
         : -1
 
-      this.player.peertubeResolutions().select({ id: resolutionId, autoResolutionChosenId, byEngine: true })
+      this.player.peertubeResolutions().select({ id: resolutionId, autoResolutionChosenId, fireCallback: false })
     })
 
     this.hls.attachMedia(this.videoElement)
@@ -433,9 +470,3 @@ class Html5Hlsjs {
     this._initHlsjs()
   }
 }
-
-export {
-  Html5Hlsjs,
-  registerSourceHandler,
-  registerConfigPlugin
-}
diff --git a/client/src/assets/player/shared/p2p-media-loader/p2p-media-loader-plugin.ts b/client/src/assets/player/shared/p2p-media-loader/p2p-media-loader-plugin.ts
index e6f525fea..fe967a730 100644
--- a/client/src/assets/player/shared/p2p-media-loader/p2p-media-loader-plugin.ts
+++ b/client/src/assets/player/shared/p2p-media-loader/p2p-media-loader-plugin.ts
@@ -3,19 +3,12 @@ import videojs from 'video.js'
 import { Events, Segment } from '@peertube/p2p-media-loader-core'
 import { Engine, initHlsJsPlayer, initVideoJsContribHlsJsPlayer } from '@peertube/p2p-media-loader-hlsjs'
 import { logger } from '@root-helpers/logger'
-import { addQueryParams, timeToInt } from '@shared/core-utils'
+import { addQueryParams } from '@shared/core-utils'
 import { P2PMediaLoaderPluginOptions, PlayerNetworkInfo } from '../../types'
-import { registerConfigPlugin, registerSourceHandler } from './hls-plugin'
-
-registerConfigPlugin(videojs)
-registerSourceHandler(videojs)
+import { SettingsButton } from '../settings/settings-menu-button'
 
 const Plugin = videojs.getPlugin('plugin')
 class P2pMediaLoaderPlugin extends Plugin {
-
-  private readonly CONSTANTS = {
-    INFO_SCHEDULER: 1000 // Don't change this
-  }
   private readonly options: P2PMediaLoaderPluginOptions
 
   private hlsjs: Hlsjs
@@ -31,7 +24,6 @@ class P2pMediaLoaderPlugin extends Plugin {
     pendingDownload: [] as number[],
     totalDownload: 0
   }
-  private startTime: number
 
   private networkInfoInterval: any
 
@@ -39,7 +31,6 @@ class P2pMediaLoaderPlugin extends Plugin {
     super(player)
 
     this.options = options
-    this.startTime = timeToInt(options.startTime)
 
     // FIXME: typings https://github.com/Microsoft/TypeScript/issues/14080
     if (!(videojs as any).Html5Hlsjs) {
@@ -77,17 +68,22 @@ class P2pMediaLoaderPlugin extends Plugin {
     })
 
     player.ready(() => {
-      this.initializeCore()
-
       this.initializePlugin()
     })
   }
 
   dispose () {
-    if (this.hlsjs) this.hlsjs.destroy()
-    if (this.p2pEngine) this.p2pEngine.destroy()
+    this.p2pEngine?.removeAllListeners()
+    this.p2pEngine?.destroy()
+
+    this.hlsjs?.destroy()
+    this.options.segmentValidator?.destroy();
+
+    (videojs as any).Html5Hlsjs?.removeAllHooks()
 
     clearInterval(this.networkInfoInterval)
+
+    super.dispose()
   }
 
   getCurrentLevel () {
@@ -104,18 +100,6 @@ class P2pMediaLoaderPlugin extends Plugin {
     return this.hlsjs
   }
 
-  private initializeCore () {
-    this.player.one('play', () => {
-      this.player.addClass('vjs-has-big-play-button-clicked')
-    })
-
-    this.player.one('canplay', () => {
-      if (this.startTime) {
-        this.player.currentTime(this.startTime)
-      }
-    })
-  }
-
   private initializePlugin () {
     initHlsJsPlayer(this.hlsjs)
 
@@ -133,7 +117,7 @@ class P2pMediaLoaderPlugin extends Plugin {
 
     this.runStats()
 
-    this.hlsjs.on(Hlsjs.Events.LEVEL_SWITCHED, () => this.player.trigger('engineResolutionChange'))
+    this.hlsjs.on(Hlsjs.Events.LEVEL_SWITCHED, () => this.player.trigger('engine-resolution-change'))
   }
 
   private runStats () {
@@ -167,7 +151,7 @@ class P2pMediaLoaderPlugin extends Plugin {
       this.statsP2PBytes.pendingUpload = []
       this.statsHTTPBytes.pendingDownload = []
 
-      return this.player.trigger('p2pInfo', {
+      return this.player.trigger('p2p-info', {
         source: 'p2p-media-loader',
         http: {
           downloadSpeed: httpDownloadSpeed,
@@ -182,7 +166,7 @@ class P2pMediaLoaderPlugin extends Plugin {
         },
         bandwidthEstimate: (this.hlsjs as any).bandwidthEstimate / 8
       } as PlayerNetworkInfo)
-    }, this.CONSTANTS.INFO_SCHEDULER)
+    }, 1000)
   }
 
   private arraySum (data: number[]) {
@@ -190,10 +174,7 @@ class P2pMediaLoaderPlugin extends Plugin {
   }
 
   private fallbackToBuiltInIOS () {
-    logger.info('HLS.js does not seem to be supported. Fallback to built-in HLS.');
-
-    // Workaround to force video.js to not re create a video element
-    (this.player as any).playerElIngest_ = this.player.el().parentNode
+    logger.info('HLS.js does not seem to be supported. Fallback to built-in HLS.')
 
     this.player.src({
       type: this.options.type,
@@ -203,9 +184,14 @@ class P2pMediaLoaderPlugin extends Plugin {
       })
     })
 
-    this.player.ready(() => {
-      this.initializeCore()
-    })
+    // Resolution button is not supported in built-in HLS player
+    this.getResolutionButton().hide()
+  }
+
+  private getResolutionButton () {
+    const settingsButton = this.player.controlBar.getDescendant([ 'settingsButton' ]) as SettingsButton
+
+    return settingsButton.menu.getChild('resolutionMenuButton')
   }
 }
 
diff --git a/client/src/assets/player/shared/p2p-media-loader/segment-validator.ts b/client/src/assets/player/shared/p2p-media-loader/segment-validator.ts
index e86d3d159..a2f7e676d 100644
--- a/client/src/assets/player/shared/p2p-media-loader/segment-validator.ts
+++ b/client/src/assets/player/shared/p2p-media-loader/segment-validator.ts
@@ -9,30 +9,29 @@ type SegmentsJSON = { [filename: string]: string | { [byterange: string]: string
 
 const maxRetries = 10
 
-function segmentValidatorFactory (options: {
-  serverUrl: string
-  segmentsSha256Url: string
-  authorizationHeader: () => string
-  requiresUserAuth: boolean
-  requiresPassword: boolean
-  videoPassword: () => string
-}) {
-  const { serverUrl, segmentsSha256Url, authorizationHeader, requiresUserAuth, requiresPassword, videoPassword } = options
-
-  let segmentsJSON = fetchSha256Segments({
-    serverUrl,
-    segmentsSha256Url,
-    authorizationHeader,
-    requiresUserAuth,
-    requiresPassword,
-    videoPassword
-  })
-  const regex = /bytes=(\d+)-(\d+)/
-
-  return async function segmentValidator (segment: Segment, _method: string, _peerId: string, retry = 1) {
+export class SegmentValidator {
+
+  private readonly bytesRangeRegex = /bytes=(\d+)-(\d+)/
+
+  private destroyed = false
+
+  constructor (private readonly options: {
+    serverUrl: string
+    segmentsSha256Url: string
+    authorizationHeader: () => string
+    requiresUserAuth: boolean
+    requiresPassword: boolean
+    videoPassword: () => string
+  }) {
+
+  }
+
+  async validate (segment: Segment, _method: string, _peerId: string, retry = 1) {
+    if (this.destroyed) return
+
     const filename = basename(removeQueryParams(segment.url))
 
-    const segmentValue = (await segmentsJSON)[filename]
+    const segmentValue = (await this.fetchSha256Segments())[filename]
 
     if (!segmentValue && retry > maxRetries) {
       throw new Error(`Unknown segment name ${filename} in segment validator`)
@@ -43,15 +42,7 @@ function segmentValidatorFactory (options: {
 
       await wait(500)
 
-      segmentsJSON = fetchSha256Segments({
-        serverUrl,
-        segmentsSha256Url,
-        authorizationHeader,
-        requiresUserAuth,
-        requiresPassword,
-        videoPassword
-      })
-      await segmentValidator(segment, _method, _peerId, retry + 1)
+      await this.validate(segment, _method, _peerId, retry + 1)
 
       return
     }
@@ -62,7 +53,7 @@ function segmentValidatorFactory (options: {
     if (typeof segmentValue === 'string') {
       hashShouldBe = segmentValue
     } else {
-      const captured = regex.exec(segment.range)
+      const captured = this.bytesRangeRegex.exec(segment.range)
       range = captured[1] + '-' + captured[2]
 
       hashShouldBe = segmentValue[range]
@@ -72,7 +63,7 @@ function segmentValidatorFactory (options: {
       throw new Error(`Unknown segment name ${filename}/${range} in segment validator`)
     }
 
-    const calculatedSha = await sha256Hex(segment.data)
+    const calculatedSha = await this.sha256Hex(segment.data)
     if (calculatedSha !== hashShouldBe) {
       throw new Error(
         `Hashes does not correspond for segment ${filename}/${range}` +
@@ -80,65 +71,53 @@ function segmentValidatorFactory (options: {
       )
     }
   }
-}
 
-// ---------------------------------------------------------------------------
+  destroy () {
+    this.destroyed = true
+  }
 
-export {
-  segmentValidatorFactory
-}
+  private fetchSha256Segments (): Promise<SegmentsJSON> {
+    let headers: { [ id: string ]: string } = {}
 
-// ---------------------------------------------------------------------------
-
-function fetchSha256Segments (options: {
-  serverUrl: string
-  segmentsSha256Url: string
-  authorizationHeader: () => string
-  requiresUserAuth: boolean
-  requiresPassword: boolean
-  videoPassword: () => string
-}): Promise<SegmentsJSON> {
-  const { serverUrl, segmentsSha256Url, requiresUserAuth, authorizationHeader, requiresPassword, videoPassword } = options
-
-  let headers: { [ id: string ]: string } = {}
-  if (isSameOrigin(serverUrl, segmentsSha256Url)) {
-    if (requiresPassword) headers = { 'x-peertube-video-password': videoPassword() }
-    else if (requiresUserAuth) headers = { Authorization: authorizationHeader() }
+    if (isSameOrigin(this.options.serverUrl, this.options.segmentsSha256Url)) {
+      if (this.options.requiresPassword) headers = { 'x-peertube-video-password': this.options.videoPassword() }
+      else if (this.options.requiresUserAuth) headers = { Authorization: this.options.authorizationHeader() }
+    }
+
+    return fetch(this.options.segmentsSha256Url, { headers })
+      .then(res => res.json() as Promise<SegmentsJSON>)
+      .catch(err => {
+        logger.error('Cannot get sha256 segments', err)
+        return {}
+      })
   }
 
-  return fetch(segmentsSha256Url, { headers })
-    .then(res => res.json() as Promise<SegmentsJSON>)
-    .catch(err => {
-      logger.error('Cannot get sha256 segments', err)
-      return {}
-    })
-}
+  private async sha256Hex (data?: ArrayBuffer) {
+    if (!data) return undefined
 
-async function sha256Hex (data?: ArrayBuffer) {
-  if (!data) return undefined
+    if (window.crypto.subtle) {
+      return window.crypto.subtle.digest('SHA-256', data)
+        .then(data => this.bufferToHex(data))
+    }
 
-  if (window.crypto.subtle) {
-    return window.crypto.subtle.digest('SHA-256', data)
-      .then(data => bufferToHex(data))
+    // Fallback for non HTTPS context
+    const shaModule = (await import('sha.js') as any).default
+    // eslint-disable-next-line new-cap
+    return new shaModule.sha256().update(Buffer.from(data)).digest('hex')
   }
 
-  // Fallback for non HTTPS context
-  const shaModule = (await import('sha.js') as any).default
-  // eslint-disable-next-line new-cap
-  return new shaModule.sha256().update(Buffer.from(data)).digest('hex')
-}
-
-// Thanks: https://stackoverflow.com/a/53307879
-function bufferToHex (buffer?: ArrayBuffer) {
-  if (!buffer) return ''
+  // Thanks: https://stackoverflow.com/a/53307879
+  private bufferToHex (buffer?: ArrayBuffer) {
+    if (!buffer) return ''
 
-  let s = ''
-  const h = '0123456789abcdef'
-  const o = new Uint8Array(buffer)
+    let s = ''
+    const h = '0123456789abcdef'
+    const o = new Uint8Array(buffer)
 
-  o.forEach((v: any) => {
-    s += h[v >> 4] + h[v & 15]
-  })
+    o.forEach((v: any) => {
+      s += h[v >> 4] + h[v & 15]
+    })
 
-  return s
+    return s
+  }
 }
diff --git a/client/src/assets/player/shared/peertube/peertube-plugin.ts b/client/src/assets/player/shared/peertube/peertube-plugin.ts
index af2147749..f52ec75f4 100644
--- a/client/src/assets/player/shared/peertube/peertube-plugin.ts
+++ b/client/src/assets/player/shared/peertube/peertube-plugin.ts
@@ -1,7 +1,7 @@
 import debug from 'debug'
 import videojs from 'video.js'
 import { logger } from '@root-helpers/logger'
-import { isMobile } from '@root-helpers/web-browser'
+import { isIOS, isMobile } from '@root-helpers/web-browser'
 import { timeToInt } from '@shared/core-utils'
 import { VideoView, VideoViewEvent } from '@shared/models/videos'
 import {
@@ -13,7 +13,7 @@ import {
   saveVideoWatchHistory,
   saveVolumeInStore
 } from '../../peertube-player-local-storage'
-import { PeerTubePluginOptions, VideoJSCaption } from '../../types'
+import { PeerTubePluginOptions } from '../../types'
 import { SettingsButton } from '../settings/settings-menu-button'
 
 const debugLogger = debug('peertube:player:peertube')
@@ -21,43 +21,59 @@ const debugLogger = debug('peertube:player:peertube')
 const Plugin = videojs.getPlugin('plugin')
 
 class PeerTubePlugin extends Plugin {
-  private readonly videoViewUrl: string
+  private readonly videoViewUrl: () => string
   private readonly authorizationHeader: () => string
+  private readonly initialInactivityTimeout: number
 
-  private readonly videoUUID: string
-  private readonly startTime: number
-
-  private readonly videoViewIntervalMs: number
+  private readonly hasAutoplay: () => videojs.Autoplay
 
-  private videoCaptions: VideoJSCaption[]
-  private defaultSubtitle: string
+  private currentSubtitle: string
+  private currentPlaybackRate: number
 
   private videoViewInterval: any
 
   private menuOpened = false
   private mouseInControlBar = false
   private mouseInSettings = false
-  private readonly initialInactivityTimeout: number
 
-  constructor (player: videojs.Player, options?: PeerTubePluginOptions) {
+  private videoViewOnPlayHandler: (...args: any[]) => void
+  private videoViewOnSeekedHandler: (...args: any[]) => void
+  private videoViewOnEndedHandler: (...args: any[]) => void
+
+  private stopTimeHandler: (...args: any[]) => void
+
+  constructor (player: videojs.Player, private readonly options: PeerTubePluginOptions) {
     super(player)
 
     this.videoViewUrl = options.videoViewUrl
     this.authorizationHeader = options.authorizationHeader
-    this.videoUUID = options.videoUUID
-    this.startTime = timeToInt(options.startTime)
-    this.videoViewIntervalMs = options.videoViewIntervalMs
+    this.hasAutoplay = options.hasAutoplay
 
-    this.videoCaptions = options.videoCaptions
     this.initialInactivityTimeout = this.player.options_.inactivityTimeout
 
-    if (options.autoplay !== false) this.player.addClass('vjs-has-autoplay')
+    this.currentSubtitle = this.options.subtitle() || getStoredLastSubtitle()
+
+    this.initializePlayer()
+    this.initOnVideoChange()
+
+    this.deleteLegacyIndexedDB()
 
     this.player.on('autoplay-failure', () => {
+      debugLogger('Autoplay failed')
+
       this.player.removeClass('vjs-has-autoplay')
+
+      // Fix a bug on iOS where the big play button is not displayed when autoplay fails
+      if (isIOS()) this.player.hasStarted(false)
     })
 
-    this.player.ready(() => {
+    this.player.on('ratechange', () => {
+      this.currentPlaybackRate = this.player.playbackRate()
+
+      this.player.defaultPlaybackRate(this.currentPlaybackRate)
+    })
+
+    this.player.one('canplay', () => {
       const playerOptions = this.player.options_
 
       const volume = getStoredVolume()
@@ -65,28 +81,15 @@ class PeerTubePlugin extends Plugin {
 
       const muted = playerOptions.muted !== undefined ? playerOptions.muted : getStoredMute()
       if (muted !== undefined) this.player.muted(muted)
+    })
 
-      this.defaultSubtitle = options.subtitle || getStoredLastSubtitle()
+    this.player.ready(() => {
 
       this.player.on('volumechange', () => {
         saveVolumeInStore(this.player.volume())
         saveMuteInStore(this.player.muted())
       })
 
-      if (options.stopTime) {
-        const stopTime = timeToInt(options.stopTime)
-        const self = this
-
-        this.player.on('timeupdate', function onTimeUpdate () {
-          if (self.player.currentTime() > stopTime) {
-            self.player.pause()
-            self.player.trigger('stopped')
-
-            self.player.off('timeupdate', onTimeUpdate)
-          }
-        })
-      }
-
       this.player.textTracks().addEventListener('change', () => {
         const showing = this.player.textTracks().tracks_.find(t => {
           return t.kind === 'captions' && t.mode === 'showing'
@@ -94,23 +97,24 @@ class PeerTubePlugin extends Plugin {
 
         if (!showing) {
           saveLastSubtitle('off')
+          this.currentSubtitle = undefined
           return
         }
 
+        this.currentSubtitle = showing.language
         saveLastSubtitle(showing.language)
       })
 
-      this.player.on('sourcechange', () => this.initCaptions())
-
-      this.player.duration(options.videoDuration)
-
-      this.initializePlayer()
-      this.runUserViewing()
+      this.player.on('video-change', () => {
+        this.initOnVideoChange()
+      })
     })
   }
 
   dispose () {
     if (this.videoViewInterval) clearInterval(this.videoViewInterval)
+
+    super.dispose()
   }
 
   onMenuOpened () {
@@ -162,40 +166,70 @@ class PeerTubePlugin extends Plugin {
 
     this.initSmoothProgressBar()
 
-    this.initCaptions()
-
-    this.listenControlBarMouse()
+    this.player.ready(() => {
+      this.listenControlBarMouse()
+    })
 
     this.listenFullScreenChange()
   }
 
+  private initOnVideoChange () {
+    if (this.hasAutoplay() !== false) this.player.addClass('vjs-has-autoplay')
+    else this.player.removeClass('vjs-has-autoplay')
+
+    if (this.currentPlaybackRate && this.currentPlaybackRate !== 1) {
+      debugLogger('Setting playback rate to ' + this.currentPlaybackRate)
+
+      this.player.playbackRate(this.currentPlaybackRate)
+    }
+
+    this.player.ready(() => {
+      this.initCaptions()
+      this.updateControlBar()
+    })
+
+    this.handleStartStopTime()
+    this.runUserViewing()
+  }
+
   // ---------------------------------------------------------------------------
 
   private runUserViewing () {
-    let lastCurrentTime = this.startTime
+    const startTime = timeToInt(this.options.startTime())
+
+    let lastCurrentTime = startTime
     let lastViewEvent: VideoViewEvent
 
-    this.player.one('play', () => {
-      this.notifyUserIsWatching(this.startTime, lastViewEvent)
-    })
+    if (this.videoViewInterval) clearInterval(this.videoViewInterval)
+    if (this.videoViewOnPlayHandler) this.player.off('play', this.videoViewOnPlayHandler)
+    if (this.videoViewOnSeekedHandler) this.player.off('seeked', this.videoViewOnSeekedHandler)
+    if (this.videoViewOnEndedHandler) this.player.off('ended', this.videoViewOnEndedHandler)
 
-    this.player.on('seeked', () => {
+    this.videoViewOnPlayHandler = () => {
+      this.notifyUserIsWatching(startTime, lastViewEvent)
+    }
+
+    this.videoViewOnSeekedHandler = () => {
       const diff = Math.floor(this.player.currentTime()) - lastCurrentTime
 
       // Don't take into account small forwards
       if (diff > 0 && diff < 3) return
 
       lastViewEvent = 'seek'
-    })
+    }
 
-    this.player.one('ended', () => {
+    this.videoViewOnEndedHandler = () => {
       const currentTime = Math.floor(this.player.duration())
       lastCurrentTime = currentTime
 
       this.notifyUserIsWatching(currentTime, lastViewEvent)
 
       lastViewEvent = undefined
-    })
+    }
+
+    this.player.one('play', this.videoViewOnPlayHandler)
+    this.player.on('seeked', this.videoViewOnSeekedHandler)
+    this.player.one('ended', this.videoViewOnEndedHandler)
 
     this.videoViewInterval = setInterval(() => {
       const currentTime = Math.floor(this.player.currentTime())
@@ -209,13 +243,13 @@ class PeerTubePlugin extends Plugin {
         .catch(err => logger.error('Cannot notify user is watching.', err))
 
       lastViewEvent = undefined
-    }, this.videoViewIntervalMs)
+    }, this.options.videoViewIntervalMs)
   }
 
   private notifyUserIsWatching (currentTime: number, viewEvent: VideoViewEvent) {
     // Server won't save history, so save the video position in local storage
     if (!this.authorizationHeader()) {
-      saveVideoWatchHistory(this.videoUUID, currentTime)
+      saveVideoWatchHistory(this.options.videoUUID(), currentTime)
     }
 
     if (!this.videoViewUrl) return Promise.resolve(true)
@@ -225,7 +259,7 @@ class PeerTubePlugin extends Plugin {
     const headers = new Headers({ 'Content-type': 'application/json; charset=UTF-8' })
     if (this.authorizationHeader()) headers.set('Authorization', this.authorizationHeader())
 
-    return fetch(this.videoViewUrl, { method: 'POST', body: JSON.stringify(body), headers })
+    return fetch(this.videoViewUrl(), { method: 'POST', body: JSON.stringify(body), headers })
   }
 
   // ---------------------------------------------------------------------------
@@ -279,18 +313,89 @@ class PeerTubePlugin extends Plugin {
   }
 
   private initCaptions () {
-    for (const caption of this.videoCaptions) {
+    debugLogger('Init captions with current subtitle ' + this.currentSubtitle)
+
+    this.player.tech(true).clearTracks('text')
+
+    for (const caption of this.options.videoCaptions()) {
       this.player.addRemoteTextTrack({
         kind: 'captions',
         label: caption.label,
         language: caption.language,
         id: caption.language,
         src: caption.src,
-        default: this.defaultSubtitle === caption.language
-      }, false)
+        default: this.currentSubtitle === caption.language
+      }, true)
+    }
+
+    this.player.trigger('captions-changed')
+  }
+
+  private updateControlBar () {
+    debugLogger('Updating control bar')
+
+    if (this.options.isLive()) {
+      this.getPlaybackRateButton().hide()
+
+      this.player.controlBar.getChild('progressControl').hide()
+      this.player.controlBar.getChild('currentTimeDisplay').hide()
+      this.player.controlBar.getChild('timeDivider').hide()
+      this.player.controlBar.getChild('durationDisplay').hide()
+
+      this.player.controlBar.getChild('peerTubeLiveDisplay').show()
+    } else {
+      this.getPlaybackRateButton().show()
+
+      this.player.controlBar.getChild('progressControl').show()
+      this.player.controlBar.getChild('currentTimeDisplay').show()
+      this.player.controlBar.getChild('timeDivider').show()
+      this.player.controlBar.getChild('durationDisplay').show()
+
+      this.player.controlBar.getChild('peerTubeLiveDisplay').hide()
     }
 
-    this.player.trigger('captionsChanged')
+    if (this.options.videoCaptions().length === 0) {
+      this.getCaptionsButton().hide()
+    } else {
+      this.getCaptionsButton().show()
+    }
+  }
+
+  private handleStartStopTime () {
+    this.player.duration(this.options.videoDuration())
+
+    if (this.stopTimeHandler) {
+      this.player.off('timeupdate', this.stopTimeHandler)
+      this.stopTimeHandler = undefined
+    }
+
+    // Prefer canplaythrough instead of canplay because Chrome has issues with the second one
+    this.player.one('canplaythrough', () => {
+      if (this.options.startTime()) {
+        debugLogger('Start the video at ' + this.options.startTime())
+
+        this.player.currentTime(timeToInt(this.options.startTime()))
+      }
+
+      if (this.options.stopTime()) {
+        const stopTime = timeToInt(this.options.stopTime())
+
+        this.stopTimeHandler = () => {
+          if (this.player.currentTime() <= stopTime) return
+
+          debugLogger('Stopping the video at ' + this.options.stopTime())
+
+          // Time top stop
+          this.player.pause()
+          this.player.trigger('auto-stopped')
+
+          this.player.off('timeupdate', this.stopTimeHandler)
+          this.stopTimeHandler = undefined
+        }
+
+        this.player.on('timeupdate', this.stopTimeHandler)
+      }
+    })
   }
 
   // Thanks: https://github.com/videojs/video.js/issues/4460#issuecomment-312861657
@@ -314,6 +419,37 @@ class PeerTubePlugin extends Plugin {
       this.update()
     }
   }
+
+  private getCaptionsButton () {
+    const settingsButton = this.player.controlBar.getDescendant([ 'settingsButton' ]) as SettingsButton
+
+    return settingsButton.menu.getChild('captionsButton') as videojs.CaptionsButton
+  }
+
+  private getPlaybackRateButton () {
+    const settingsButton = this.player.controlBar.getDescendant([ 'settingsButton' ]) as SettingsButton
+
+    return settingsButton.menu.getChild('playbackRateMenuButton')
+  }
+
+  // We don't use webtorrent anymore, so we can safely remove old chunks from IndexedDB
+  private deleteLegacyIndexedDB () {
+    try {
+      if (typeof window.indexedDB === 'undefined') return
+      if (!window.indexedDB) return
+      if (typeof window.indexedDB.databases !== 'function') return
+
+      window.indexedDB.databases()
+        .then(databases => {
+          for (const db of databases) {
+            window.indexedDB.deleteDatabase(db.name)
+          }
+        })
+    } catch (err) {
+      debugLogger('Cannot delete legacy indexed DB', err)
+      // Nothing to do
+    }
+  }
 }
 
 videojs.registerPlugin('peertube', PeerTubePlugin)
diff --git a/client/src/assets/player/shared/player-options-builder/control-bar-options-builder.ts b/client/src/assets/player/shared/player-options-builder/control-bar-options-builder.ts
new file mode 100644
index 000000000..b467e3637
--- /dev/null
+++ b/client/src/assets/player/shared/player-options-builder/control-bar-options-builder.ts
@@ -0,0 +1,136 @@
+import {
+  NextPreviousVideoButtonOptions,
+  PeerTubeLinkButtonOptions,
+  PeerTubePlayerContructorOptions,
+  PeerTubePlayerLoadOptions,
+  TheaterButtonOptions
+} from '../../types'
+
+type ControlBarOptionsBuilderConstructorOptions =
+  Pick<PeerTubePlayerContructorOptions, 'peertubeLink' | 'instanceName' | 'theaterButton'> &
+  {
+    videoShortUUID: () => string
+    p2pEnabled: () => boolean
+
+    previousVideo: () => PeerTubePlayerLoadOptions['previousVideo']
+    nextVideo: () => PeerTubePlayerLoadOptions['nextVideo']
+  }
+
+export class ControlBarOptionsBuilder {
+
+  constructor (private options: ControlBarOptionsBuilderConstructorOptions) {
+  }
+
+  getChildrenOptions () {
+    const children = {
+      ...this.getPreviousVideo(),
+
+      playToggle: {},
+
+      ...this.getNextVideo(),
+
+      ...this.getTimeControls(),
+
+      ...this.getProgressControl(),
+
+      p2PInfoButton: {},
+      muteToggle: {},
+      volumeControl: {},
+
+      ...this.getSettingsButton(),
+
+      ...this.getPeerTubeLinkButton(),
+
+      ...this.getTheaterButton(),
+
+      fullscreenToggle: {}
+    }
+
+    return children
+  }
+
+  private getSettingsButton () {
+    const settingEntries: string[] = []
+
+    settingEntries.push('playbackRateMenuButton')
+    settingEntries.push('captionsButton')
+    settingEntries.push('resolutionMenuButton')
+
+    return {
+      settingsButton: {
+        setup: {
+          maxHeightOffset: 40
+        },
+        entries: settingEntries
+      }
+    }
+  }
+
+  private getTimeControls () {
+    return {
+      peerTubeLiveDisplay: {},
+
+      currentTimeDisplay: {},
+      timeDivider: {},
+      durationDisplay: {}
+    }
+  }
+
+  private getProgressControl () {
+    return {
+      progressControl: {
+        children: {
+          seekBar: {
+            children: {
+              loadProgressBar: {},
+              mouseTimeDisplay: {},
+              playProgressBar: {}
+            }
+          }
+        }
+      }
+    }
+  }
+
+  private getPreviousVideo () {
+    const buttonOptions: NextPreviousVideoButtonOptions = {
+      type: 'previous',
+      handler: () => this.options.previousVideo().handler(),
+      isDisabled: () => !this.options.previousVideo().enabled,
+      isDisplayed: () => this.options.previousVideo().displayControlBarButton
+    }
+
+    return { previousVideoButton: buttonOptions }
+  }
+
+  private getNextVideo () {
+    const buttonOptions: NextPreviousVideoButtonOptions = {
+      type: 'next',
+      handler: () => this.options.nextVideo().handler(),
+      isDisabled: () => !this.options.nextVideo().enabled,
+      isDisplayed: () => this.options.nextVideo().displayControlBarButton
+    }
+
+    return { nextVideoButton: buttonOptions }
+  }
+
+  private getPeerTubeLinkButton () {
+    const options: PeerTubeLinkButtonOptions = {
+      isDisplayed: this.options.peertubeLink,
+      shortUUID: this.options.videoShortUUID,
+      instanceName: this.options.instanceName
+    }
+
+    return { peerTubeLinkButton: options }
+  }
+
+  private getTheaterButton () {
+    const options: TheaterButtonOptions = {
+      isDisplayed: () => this.options.theaterButton
+    }
+
+    return {
+      theaterButton: options
+    }
+  }
+}
diff --git a/client/src/assets/player/shared/manager-options/hls-options-builder.ts b/client/src/assets/player/shared/player-options-builder/hls-options-builder.ts
index 8091110bc..10df2db5d 100644
--- a/client/src/assets/player/shared/manager-options/hls-options-builder.ts
+++ b/client/src/assets/player/shared/player-options-builder/hls-options-builder.ts
@@ -3,49 +3,61 @@ import { HlsJsEngineSettings } from '@peertube/p2p-media-loader-hlsjs'
 import { logger } from '@root-helpers/logger'
 import { LiveVideoLatencyMode } from '@shared/models'
 import { getAverageBandwidthInStore } from '../../peertube-player-local-storage'
-import { P2PMediaLoader, P2PMediaLoaderPluginOptions } from '../../types'
-import { PeertubePlayerManagerOptions } from '../../types/manager-options'
+import { P2PMediaLoader, P2PMediaLoaderPluginOptions, PeerTubePlayerContructorOptions, PeerTubePlayerLoadOptions } from '../../types'
 import { getRtcConfig, isSameOrigin } 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'
+import { SegmentValidator } from '../p2p-media-loader/segment-validator'
+
+type ConstructorOptions =
+  Pick<PeerTubePlayerContructorOptions, 'pluginsManager' | 'serverUrl' | 'authorizationHeader'> &
+  Pick<PeerTubePlayerLoadOptions, 'videoPassword' | 'requiresUserAuth' | 'videoFileToken' | 'requiresPassword' |
+  'isLive' | 'liveOptions' | 'p2pEnabled' | 'hls'>
 
 export class HLSOptionsBuilder {
 
   constructor (
-    private options: PeertubePlayerManagerOptions,
+    private options: ConstructorOptions,
     private p2pMediaLoaderModule?: any
   ) {
 
   }
 
   async getPluginOptions () {
-    const commonOptions = this.options.common
-
-    const redundancyUrlManager = new RedundancyUrlManager(this.options.p2pMediaLoader.redundancyBaseUrls)
+    const redundancyUrlManager = new RedundancyUrlManager(this.options.hls.redundancyBaseUrls)
+    const segmentValidator = new SegmentValidator({
+      segmentsSha256Url: this.options.hls.segmentsSha256Url,
+      authorizationHeader: this.options.authorizationHeader,
+      requiresUserAuth: this.options.requiresUserAuth,
+      serverUrl: this.options.serverUrl,
+      requiresPassword: this.options.requiresPassword,
+      videoPassword: this.options.videoPassword
+    })
 
     const p2pMediaLoaderConfig = await this.options.pluginsManager.runHook(
       'filter:internal.player.p2p-media-loader.options.result',
-      this.getP2PMediaLoaderOptions(redundancyUrlManager)
+      this.getP2PMediaLoaderOptions({ redundancyUrlManager, segmentValidator })
     )
     const loader = new this.p2pMediaLoaderModule.Engine(p2pMediaLoaderConfig).createLoaderClass() as P2PMediaLoader
 
     const p2pMediaLoader: P2PMediaLoaderPluginOptions = {
-      requiresUserAuth: commonOptions.requiresUserAuth,
-      videoFileToken: commonOptions.videoFileToken,
+      requiresUserAuth: this.options.requiresUserAuth,
+      videoFileToken: this.options.videoFileToken,
 
       redundancyUrlManager,
       type: 'application/x-mpegURL',
-      startTime: commonOptions.startTime,
-      src: this.options.p2pMediaLoader.playlistUrl,
+      src: this.options.hls.playlistUrl,
+      segmentValidator,
       loader
     }
 
     const hlsjs = {
+      hlsjsConfig: this.getHLSJSOptions(loader),
+
       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)
+        const file = this.options.hls.videoFiles.find(f => f.resolution.id === resolution)
         // We don't have files for live videos
         if (!file) return level.height
 
@@ -56,26 +68,27 @@ export class HLSOptionsBuilder {
       }
     }
 
-    const html5 = {
-      hlsjsConfig: this.getHLSJSOptions(loader)
-    }
-
-    return { p2pMediaLoader, hlsjs, html5 }
+    return { p2pMediaLoader, hlsjs }
   }
 
   // ---------------------------------------------------------------------------
 
-  private getP2PMediaLoaderOptions (redundancyUrlManager: RedundancyUrlManager): HlsJsEngineSettings {
+  private getP2PMediaLoaderOptions (options: {
+    redundancyUrlManager: RedundancyUrlManager
+    segmentValidator: SegmentValidator
+  }): HlsJsEngineSettings {
+    const { redundancyUrlManager, segmentValidator } = options
+
     let consumeOnly = false
     if ((navigator as any)?.connection?.type === 'cellular') {
       logger.info('We are on a cellular connection: disabling seeding.')
       consumeOnly = true
     }
 
-    const trackerAnnounce = this.options.p2pMediaLoader.trackerAnnounce
-                                                 .filter(t => t.startsWith('ws'))
+    const trackerAnnounce = this.options.hls.trackerAnnounce
+      .filter(t => t.startsWith('ws'))
 
-    const specificLiveOrVODOptions = this.options.common.isLive
+    const specificLiveOrVODOptions = this.options.isLive
       ? this.getP2PMediaLoaderLiveOptions()
       : this.getP2PMediaLoaderVODOptions()
 
@@ -88,35 +101,28 @@ export class HLSOptionsBuilder {
         httpFailedSegmentTimeout: 1000,
 
         xhrSetup: (xhr, url) => {
-          const { requiresUserAuth, requiresPassword } = this.options.common
+          const { requiresUserAuth, requiresPassword } = this.options
 
           if (!(requiresUserAuth || requiresPassword)) return
 
-          if (!isSameOrigin(this.options.common.serverUrl, url)) return
+          if (!isSameOrigin(this.options.serverUrl, url)) return
 
-          if (requiresPassword) xhr.setRequestHeader('x-peertube-video-password', this.options.common.videoPassword())
+          if (requiresPassword) xhr.setRequestHeader('x-peertube-video-password', this.options.videoPassword())
 
-          else xhr.setRequestHeader('Authorization', this.options.common.authorizationHeader())
+          else xhr.setRequestHeader('Authorization', this.options.authorizationHeader())
         },
 
-        segmentValidator: segmentValidatorFactory({
-          segmentsSha256Url: this.options.p2pMediaLoader.segmentsSha256Url,
-          authorizationHeader: this.options.common.authorizationHeader,
-          requiresUserAuth: this.options.common.requiresUserAuth,
-          serverUrl: this.options.common.serverUrl,
-          requiresPassword: this.options.common.requiresPassword,
-          videoPassword: this.options.common.videoPassword
-        }),
+        segmentValidator: segmentValidator.validate.bind(segmentValidator),
 
         segmentUrlBuilder: segmentUrlBuilderFactory(redundancyUrlManager),
 
-        useP2P: this.options.common.p2pEnabled,
+        useP2P: this.options.p2pEnabled,
         consumeOnly,
 
         ...specificLiveOrVODOptions
       },
       segments: {
-        swarmId: this.options.p2pMediaLoader.playlistUrl,
+        swarmId: this.options.hls.playlistUrl,
         forwardSegmentCount: specificLiveOrVODOptions.p2pDownloadMaxPriority ?? 20
       }
     }
@@ -127,7 +133,7 @@ export class HLSOptionsBuilder {
       requiredSegmentsPriority: 1
     }
 
-    const latencyMode = this.options.common.liveOptions.latencyMode
+    const latencyMode = this.options.liveOptions.latencyMode
 
     switch (latencyMode) {
       case LiveVideoLatencyMode.SMALL_LATENCY:
@@ -165,7 +171,7 @@ export class HLSOptionsBuilder {
   // ---------------------------------------------------------------------------
 
   private getHLSJSOptions (loader: P2PMediaLoader) {
-    const specificLiveOrVODOptions = this.options.common.isLive
+    const specificLiveOrVODOptions = this.options.isLive
       ? this.getHLSLiveOptions()
       : this.getHLSVODOptions()
 
@@ -193,7 +199,7 @@ export class HLSOptionsBuilder {
   }
 
   private getHLSLiveOptions () {
-    const latencyMode = this.options.common.liveOptions.latencyMode
+    const latencyMode = this.options.liveOptions.latencyMode
 
     switch (latencyMode) {
       case LiveVideoLatencyMode.SMALL_LATENCY:
diff --git a/client/src/assets/player/shared/player-options-builder/index.ts b/client/src/assets/player/shared/player-options-builder/index.ts
new file mode 100644
index 000000000..674754a94
--- /dev/null
+++ b/client/src/assets/player/shared/player-options-builder/index.ts
@@ -0,0 +1,3 @@
+export * from './control-bar-options-builder'
+export * from './hls-options-builder'
+export * from './web-video-options-builder'
diff --git a/client/src/assets/player/shared/player-options-builder/web-video-options-builder.ts b/client/src/assets/player/shared/player-options-builder/web-video-options-builder.ts
new file mode 100644
index 000000000..a3c3c3f27
--- /dev/null
+++ b/client/src/assets/player/shared/player-options-builder/web-video-options-builder.ts
@@ -0,0 +1,22 @@
+import { PeerTubePlayerLoadOptions, WebVideoPluginOptions } from '../../types'
+
+type ConstructorOptions = Pick<PeerTubePlayerLoadOptions, 'videoFileToken' | 'webVideo' | 'hls' | 'startTime'>
+
+export class WebVideoOptionsBuilder {
+
+  constructor (private options: ConstructorOptions) {
+
+  }
+
+  getPluginOptions (): WebVideoPluginOptions {
+    return {
+      videoFileToken: this.options.videoFileToken,
+
+      videoFiles: this.options.webVideo.videoFiles.length !== 0
+        ? this.options.webVideo.videoFiles
+        : this.options?.hls.videoFiles || [],
+
+      startTime: this.options.startTime
+    }
+  }
+}
diff --git a/client/src/assets/player/shared/playlist/playlist-button.ts b/client/src/assets/player/shared/playlist/playlist-button.ts
index 6cfaf4158..45cbb4899 100644
--- a/client/src/assets/player/shared/playlist/playlist-button.ts
+++ b/client/src/assets/player/shared/playlist/playlist-button.ts
@@ -8,8 +8,15 @@ class PlaylistButton extends ClickableComponent {
   private playlistInfoElement: HTMLElement
   private wrapper: HTMLElement
 
-  constructor (player: videojs.Player, options?: PlaylistPluginOptions & { playlistMenu: PlaylistMenu }) {
-    super(player, options as any)
+  options_: PlaylistPluginOptions & { playlistMenu: PlaylistMenu } & videojs.ClickableComponentOptions
+
+  // FIXME: eslint -> it's not a useless constructor, we need to extend constructor options typings
+  // eslint-disable-next-line @typescript-eslint/no-useless-constructor
+  constructor (
+    player: videojs.Player,
+    options?: PlaylistPluginOptions & { playlistMenu: PlaylistMenu } & videojs.ClickableComponentOptions
+  ) {
+    super(player, options)
   }
 
   createEl () {
@@ -40,20 +47,15 @@ class PlaylistButton extends ClickableComponent {
   }
 
   update () {
-    const options = this.options_ as PlaylistPluginOptions
+    this.playlistInfoElement.innerHTML = this.options_.getCurrentPosition() + '/' + this.options_.playlist.videosLength
 
-    this.playlistInfoElement.innerHTML = options.getCurrentPosition() + '/' + options.playlist.videosLength
-    this.wrapper.title = this.player().localize('Playlist: {1}', [ options.playlist.displayName ])
+    this.wrapper.title = this.player().localize('Playlist: {1}', [ this.options_.playlist.displayName ])
   }
 
   handleClick () {
-    const playlistMenu = this.getPlaylistMenu()
+    const playlistMenu = this.options_.playlistMenu
     playlistMenu.open()
   }
-
-  private getPlaylistMenu () {
-    return (this.options_ as any).playlistMenu as PlaylistMenu
-  }
 }
 
 videojs.registerComponent('PlaylistButton', PlaylistButton)
diff --git a/client/src/assets/player/shared/playlist/playlist-menu-item.ts b/client/src/assets/player/shared/playlist/playlist-menu-item.ts
index 81b5acf30..f9366332d 100644
--- a/client/src/assets/player/shared/playlist/playlist-menu-item.ts
+++ b/client/src/assets/player/shared/playlist/playlist-menu-item.ts
@@ -8,6 +8,11 @@ const Component = videojs.getComponent('Component')
 class PlaylistMenuItem extends Component {
   private element: VideoPlaylistElement
 
+  private clickHandler: () => void
+  private keyDownHandler: (event: KeyboardEvent) => void
+
+  options_: videojs.ComponentOptions & PlaylistItemOptions
+
   constructor (player: videojs.Player, options?: PlaylistItemOptions) {
     super(player, options as any)
 
@@ -15,19 +20,27 @@ class PlaylistMenuItem extends Component {
 
     this.element = options.element
 
-    this.on([ 'click', 'tap' ], () => this.switchPlaylistItem())
-    this.on('keydown', event => this.handleKeyDown(event))
+    this.clickHandler = () => this.switchPlaylistItem()
+    this.keyDownHandler = event => this.handleKeyDown(event)
+
+    this.on([ 'click', 'tap' ], this.clickHandler)
+    this.on('keydown', this.keyDownHandler)
   }
 
-  createEl () {
-    const options = this.options_ as PlaylistItemOptions
+  dispose () {
+    this.off([ 'click', 'tap' ], this.clickHandler)
+    this.off('keydown', this.keyDownHandler)
 
+    super.dispose()
+  }
+
+  createEl () {
     const li = super.createEl('li', {
       className: 'vjs-playlist-menu-item',
       innerHTML: ''
     }) as HTMLElement
 
-    if (!options.element.video) {
+    if (!this.options_.element.video) {
       li.classList.add('vjs-disabled')
     }
 
@@ -37,14 +50,14 @@ class PlaylistMenuItem extends Component {
 
     const position = super.createEl('div', {
       className: 'item-position',
-      innerHTML: options.element.position
+      innerHTML: this.options_.element.position
     })
 
     positionBlock.appendChild(position)
     li.appendChild(positionBlock)
 
-    if (options.element.video) {
-      this.buildAvailableVideo(li, positionBlock, options)
+    if (this.options_.element.video) {
+      this.buildAvailableVideo(li, positionBlock, this.options_)
     } else {
       this.buildUnavailableVideo(li)
     }
@@ -125,9 +138,7 @@ class PlaylistMenuItem extends Component {
   }
 
   private switchPlaylistItem () {
-    const options = this.options_ as PlaylistItemOptions
-
-    options.onClicked()
+    this.options_.onClicked()
   }
 }
 
diff --git a/client/src/assets/player/shared/playlist/playlist-menu.ts b/client/src/assets/player/shared/playlist/playlist-menu.ts
index 1ec9ac804..53a5a7274 100644
--- a/client/src/assets/player/shared/playlist/playlist-menu.ts
+++ b/client/src/assets/player/shared/playlist/playlist-menu.ts
@@ -6,26 +6,32 @@ import { PlaylistMenuItem } from './playlist-menu-item'
 const Component = videojs.getComponent('Component')
 
 class PlaylistMenu extends Component {
-  private menuItems: PlaylistMenuItem[]
+  private menuItems: PlaylistMenuItem[] = []
 
-  constructor (player: videojs.Player, options?: PlaylistPluginOptions) {
-    super(player, options as any)
+  private readonly userInactiveHandler: () => void
+  private readonly onMouseEnter: () => void
+  private readonly onMouseLeave: () => void
 
-    const self = this
+  private readonly onPlayerCick: (event: Event) => void
 
-    function userInactiveHandler () {
-      self.close()
+  options_: PlaylistPluginOptions & videojs.ComponentOptions
+
+  constructor (player: videojs.Player, options?: PlaylistPluginOptions & videojs.ComponentOptions) {
+    super(player, options)
+
+    this.userInactiveHandler = () => {
+      this.close()
     }
 
-    this.el().addEventListener('mouseenter', () => {
-      this.player().off('userinactive', userInactiveHandler)
-    })
+    this.onMouseEnter = () => {
+      this.player().off('userinactive', this.userInactiveHandler)
+    }
 
-    this.el().addEventListener('mouseleave', () => {
-      this.player().one('userinactive', userInactiveHandler)
-    })
+    this.onMouseLeave = () => {
+      this.player().one('userinactive', this.userInactiveHandler)
+    }
 
-    this.player().on('click', event => {
+    this.onPlayerCick = event => {
       let current = event.target as HTMLElement
 
       do {
@@ -40,14 +46,31 @@ class PlaylistMenu extends Component {
       } while (current)
 
       this.close()
-    })
+    }
+
+    this.el().addEventListener('mouseenter', this.onMouseEnter)
+    this.el().addEventListener('mouseleave', this.onMouseLeave)
+
+    this.player().on('click', this.onPlayerCick)
+  }
+
+  dispose () {
+    this.el().removeEventListener('mouseenter', this.onMouseEnter)
+    this.el().removeEventListener('mouseleave', this.onMouseLeave)
+
+    this.player().off('userinactive', this.userInactiveHandler)
+    this.player().off('click', this.onPlayerCick)
+
+    for (const item of this.menuItems) {
+      item.dispose()
+    }
+
+    super.dispose()
   }
 
   createEl () {
     this.menuItems = []
 
-    const options = this.getOptions()
-
     const menu = super.createEl('div', {
       className: 'vjs-playlist-menu',
       innerHTML: '',
@@ -61,11 +84,11 @@ class PlaylistMenu extends Component {
     const headerLeft = super.createEl('div')
 
     const leftTitle = super.createEl('div', {
-      innerHTML: options.playlist.displayName,
+      innerHTML: this.options_.playlist.displayName,
       className: 'title'
     })
 
-    const playlistChannel = options.playlist.videoChannel
+    const playlistChannel = this.options_.playlist.videoChannel
     const leftSubtitle = super.createEl('div', {
       innerHTML: playlistChannel
         ? this.player().localize('By {1}', [ playlistChannel.displayName ])
@@ -86,7 +109,7 @@ class PlaylistMenu extends Component {
 
     const list = super.createEl('ol')
 
-    for (const playlistElement of options.elements) {
+    for (const playlistElement of this.options_.elements) {
       const item = new PlaylistMenuItem(this.player(), {
         element: playlistElement,
         onClicked: () => this.onItemClicked(playlistElement)
@@ -100,13 +123,13 @@ class PlaylistMenu extends Component {
     menu.appendChild(header)
     menu.appendChild(list)
 
+    this.update()
+
     return menu
   }
 
   update () {
-    const options = this.getOptions()
-
-    this.updateSelected(options.getCurrentPosition())
+    this.updateSelected(this.options_.getCurrentPosition())
   }
 
   open () {
@@ -123,12 +146,8 @@ class PlaylistMenu extends Component {
     }
   }
 
-  private getOptions () {
-    return this.options_ as PlaylistPluginOptions
-  }
-
   private onItemClicked (element: VideoPlaylistElement) {
-    this.getOptions().onItemClicked(element)
+    this.options_.onItemClicked(element)
   }
 }
 
diff --git a/client/src/assets/player/shared/playlist/playlist-plugin.ts b/client/src/assets/player/shared/playlist/playlist-plugin.ts
index 44de0da5a..c00e45843 100644
--- a/client/src/assets/player/shared/playlist/playlist-plugin.ts
+++ b/client/src/assets/player/shared/playlist/playlist-plugin.ts
@@ -8,17 +8,10 @@ const Plugin = videojs.getPlugin('plugin')
 class PlaylistPlugin extends Plugin {
   private playlistMenu: PlaylistMenu
   private playlistButton: PlaylistButton
-  private options: PlaylistPluginOptions
 
   constructor (player: videojs.Player, options?: PlaylistPluginOptions) {
     super(player, options)
 
-    this.options = options
-
-    this.player.ready(() => {
-      player.addClass('vjs-playlist')
-    })
-
     this.playlistMenu = new PlaylistMenu(player, options)
     this.playlistButton = new PlaylistButton(player, { ...options, playlistMenu: this.playlistMenu })
 
@@ -26,8 +19,16 @@ class PlaylistPlugin extends Plugin {
     player.addChild(this.playlistButton, options)
   }
 
-  updateSelected () {
-    this.playlistMenu.updateSelected(this.options.getCurrentPosition())
+  dispose () {
+    this.player.removeClass('vjs-playlist')
+
+    this.playlistMenu.dispose()
+    this.playlistButton.dispose()
+
+    this.player.removeChild(this.playlistMenu)
+    this.player.removeChild(this.playlistButton)
+
+    super.dispose()
   }
 }
 
diff --git a/client/src/assets/player/shared/resolutions/peertube-resolutions-plugin.ts b/client/src/assets/player/shared/resolutions/peertube-resolutions-plugin.ts
index 4fafd27b1..4d6701003 100644
--- a/client/src/assets/player/shared/resolutions/peertube-resolutions-plugin.ts
+++ b/client/src/assets/player/shared/resolutions/peertube-resolutions-plugin.ts
@@ -8,7 +8,16 @@ class PeerTubeResolutionsPlugin extends Plugin {
   private resolutions: PeerTubeResolution[] = []
 
   private autoResolutionChosenId: number
-  private autoResolutionEnabled = true
+
+  constructor (player: videojs.Player) {
+    super(player)
+
+    player.on('video-change', () => {
+      this.resolutions = []
+
+      this.trigger('resolutions-removed')
+    })
+  }
 
   add (resolutions: PeerTubeResolution[]) {
     for (const r of resolutions) {
@@ -18,12 +27,12 @@ class PeerTubeResolutionsPlugin extends Plugin {
     this.currentSelection = this.getSelected()
 
     this.sort()
-    this.trigger('resolutionsAdded')
+    this.trigger('resolutions-added')
   }
 
   remove (resolutionIndex: number) {
     this.resolutions = this.resolutions.filter(r => r.id !== resolutionIndex)
-    this.trigger('resolutionRemoved')
+    this.trigger('resolutions-removed')
   }
 
   getResolutions () {
@@ -40,10 +49,10 @@ class PeerTubeResolutionsPlugin extends Plugin {
 
   select (options: {
     id: number
-    byEngine: boolean
+    fireCallback: boolean
     autoResolutionChosenId?: number
   }) {
-    const { id, autoResolutionChosenId, byEngine } = options
+    const { id, autoResolutionChosenId, fireCallback } = options
 
     if (this.currentSelection?.id === id && this.autoResolutionChosenId === autoResolutionChosenId) return
 
@@ -55,25 +64,11 @@ class PeerTubeResolutionsPlugin extends Plugin {
       if (r.selected) {
         this.currentSelection = r
 
-        if (!byEngine) r.selectCallback()
+        if (fireCallback) r.selectCallback()
       }
     }
 
-    this.trigger('resolutionChanged')
-  }
-
-  disableAutoResolution () {
-    this.autoResolutionEnabled = false
-    this.trigger('autoResolutionEnabledChanged')
-  }
-
-  enabledAutoResolution () {
-    this.autoResolutionEnabled = true
-    this.trigger('autoResolutionEnabledChanged')
-  }
-
-  isAutoResolutionEnabeld () {
-    return this.autoResolutionEnabled
+    this.trigger('resolutions-changed')
   }
 
   private sort () {
diff --git a/client/src/assets/player/shared/settings/resolution-menu-button.ts b/client/src/assets/player/shared/settings/resolution-menu-button.ts
index 672411c11..c39894284 100644
--- a/client/src/assets/player/shared/settings/resolution-menu-button.ts
+++ b/client/src/assets/player/shared/settings/resolution-menu-button.ts
@@ -11,12 +11,12 @@ class ResolutionMenuButton extends MenuButton {
 
     this.controlText('Quality')
 
-    player.peertubeResolutions().on('resolutionsAdded', () => this.buildQualities())
-    player.peertubeResolutions().on('resolutionRemoved', () => this.cleanupQualities())
+    player.peertubeResolutions().on('resolutions-added', () => this.update())
+    player.peertubeResolutions().on('resolutions-removed', () => this.update())
 
     // For parent
-    player.peertubeResolutions().on('resolutionChanged', () => {
-      setTimeout(() => this.trigger('labelUpdated'))
+    player.peertubeResolutions().on('resolutions-changed', () => {
+      setTimeout(() => this.trigger('label-updated'))
     })
   }
 
@@ -37,69 +37,42 @@ class ResolutionMenuButton extends MenuButton {
   }
 
   createMenu () {
-    return new Menu(this.player_)
-  }
-
-  buildCSSClass () {
-    return super.buildCSSClass() + ' vjs-resolution-button'
-  }
-
-  buildWrapperCSSClass () {
-    return 'vjs-resolution-control ' + super.buildWrapperCSSClass()
-  }
-
-  private addClickListener (component: any) {
-    component.on('click', () => {
-      const children = this.menu.children()
-
-      for (const child of children) {
-        if (component !== child) {
-          (child as videojs.MenuItem).selected(false)
-        }
-      }
-    })
-  }
+    const menu: videojs.Menu = new Menu(this.player_, { menuButton: this })
+    const resolutions = this.player().peertubeResolutions().getResolutions()
 
-  private buildQualities () {
-    for (const d of this.player().peertubeResolutions().getResolutions()) {
-      const label = d.label === '0p'
+    for (const r of resolutions) {
+      const label = r.label === '0p'
         ? this.player().localize('Audio-only')
-        : d.label
+        : r.label
 
-      this.menu.addChild(new ResolutionMenuItem(
+      const component = new ResolutionMenuItem(
         this.player_,
         {
-          id: d.id + '',
-          resolutionId: d.id,
+          id: r.id + '',
+          resolutionId: r.id,
           label,
-          selected: d.selected
-        })
+          selected: r.selected
+        }
       )
-    }
 
-    for (const m of this.menu.children()) {
-      this.addClickListener(m)
+      menu.addItem(component)
     }
 
-    this.trigger('menuChanged')
+    return menu
   }
 
-  private cleanupQualities () {
-    const resolutions = this.player().peertubeResolutions().getResolutions()
-
-    this.menu.children().forEach((children: ResolutionMenuItem) => {
-      if (children.resolutionId === undefined) {
-        return
-      }
+  update () {
+    super.update()
 
-      if (resolutions.find(r => r.id === children.resolutionId)) {
-        return
-      }
+    this.trigger('menu-changed')
+  }
 
-      this.menu.removeChild(children)
-    })
+  buildCSSClass () {
+    return super.buildCSSClass() + ' vjs-resolution-button'
+  }
 
-    this.trigger('menuChanged')
+  buildWrapperCSSClass () {
+    return 'vjs-resolution-control ' + super.buildWrapperCSSClass()
   }
 }
 
diff --git a/client/src/assets/player/shared/settings/resolution-menu-item.ts b/client/src/assets/player/shared/settings/resolution-menu-item.ts
index c59b8b891..86387f533 100644
--- a/client/src/assets/player/shared/settings/resolution-menu-item.ts
+++ b/client/src/assets/player/shared/settings/resolution-menu-item.ts
@@ -10,35 +10,32 @@ class ResolutionMenuItem extends MenuItem {
   readonly resolutionId: number
   private readonly label: string
 
-  private autoResolutionEnabled: boolean
   private autoResolutionChosen: string
 
-  constructor (player: videojs.Player, options?: ResolutionMenuItemOptions) {
-    options.selectable = true
+  private updateSelectionHandler: () => void
 
-    super(player, options)
+  constructor (player: videojs.Player, options?: ResolutionMenuItemOptions) {
+    super(player, { ...options, selectable: true })
 
-    this.autoResolutionEnabled = true
     this.autoResolutionChosen = ''
 
     this.resolutionId = options.resolutionId
     this.label = options.label
 
-    player.peertubeResolutions().on('resolutionChanged', () => this.updateSelection())
+    this.updateSelectionHandler = () => this.updateSelection()
+    player.peertubeResolutions().on('resolutions-changed', this.updateSelectionHandler)
+  }
+
+  dispose () {
+    this.player().peertubeResolutions().off('resolutions-changed', this.updateSelectionHandler)
 
-    // We only want to disable the "Auto" item
-    if (this.resolutionId === -1) {
-      player.peertubeResolutions().on('autoResolutionEnabledChanged', () => this.updateAutoResolution())
-    }
+    super.dispose()
   }
 
   handleClick (event: any) {
-    // Auto button disabled?
-    if (this.autoResolutionEnabled === false && this.resolutionId === -1) return
-
     super.handleClick(event)
 
-    this.player().peertubeResolutions().select({ id: this.resolutionId, byEngine: false })
+    this.player().peertubeResolutions().select({ id: this.resolutionId, fireCallback: true })
   }
 
   updateSelection () {
@@ -51,19 +48,6 @@ class ResolutionMenuItem extends MenuItem {
     this.selected(this.resolutionId === selectedResolution.id)
   }
 
-  updateAutoResolution () {
-    const enabled = this.player().peertubeResolutions().isAutoResolutionEnabeld()
-
-    // Check if the auto resolution is enabled or not
-    if (enabled === false) {
-      this.addClass('disabled')
-    } else {
-      this.removeClass('disabled')
-    }
-
-    this.autoResolutionEnabled = enabled
-  }
-
   getLabel () {
     if (this.resolutionId === -1) {
       return this.label + ' <small>' + this.autoResolutionChosen + '</small>'
diff --git a/client/src/assets/player/shared/settings/settings-dialog.ts b/client/src/assets/player/shared/settings/settings-dialog.ts
index f5fbbe7ad..ba39d0f45 100644
--- a/client/src/assets/player/shared/settings/settings-dialog.ts
+++ b/client/src/assets/player/shared/settings/settings-dialog.ts
@@ -28,6 +28,18 @@ class SettingsDialog extends Component {
       'aria-describedby': dialogDescriptionId
     })
   }
+
+  show () {
+    this.player().addClass('vjs-settings-dialog-opened')
+
+    super.show()
+  }
+
+  hide () {
+    this.player().removeClass('vjs-settings-dialog-opened')
+
+    super.hide()
+  }
 }
 
 Component.registerComponent('SettingsDialog', SettingsDialog)
diff --git a/client/src/assets/player/shared/settings/settings-menu-button.ts b/client/src/assets/player/shared/settings/settings-menu-button.ts
index 4cf29866b..9499a43eb 100644
--- a/client/src/assets/player/shared/settings/settings-menu-button.ts
+++ b/client/src/assets/player/shared/settings/settings-menu-button.ts
@@ -71,7 +71,7 @@ class SettingsButton extends Button {
     }
   }
 
-  onDisposeSettingsItem (event: any, name: string) {
+  onDisposeSettingsItem (_event: any, name: string) {
     if (name === undefined) {
       const children = this.menu.children()
 
@@ -103,6 +103,8 @@ class SettingsButton extends Button {
     if (this.isInIframe()) {
       window.removeEventListener('blur', this.documentClickHandler)
     }
+
+    super.dispose()
   }
 
   onAddSettingsItem (event: any, data: any) {
@@ -249,8 +251,8 @@ class SettingsButton extends Button {
   }
 
   resetChildren () {
-    for (const menuChild of this.menu.children()) {
-      (menuChild as SettingsMenuItem).reset()
+    for (const menuChild of this.menu.children() as SettingsMenuItem[]) {
+      menuChild.reset()
     }
   }
 
@@ -258,8 +260,8 @@ class SettingsButton extends Button {
    * Hide all the sub menus
    */
   hideChildren () {
-    for (const menuChild of this.menu.children()) {
-      (menuChild as SettingsMenuItem).hideSubMenu()
+    for (const menuChild of this.menu.children() as SettingsMenuItem[]) {
+      menuChild.hideSubMenu()
     }
   }
 
diff --git a/client/src/assets/player/shared/settings/settings-menu-item.ts b/client/src/assets/player/shared/settings/settings-menu-item.ts
index 288e3b233..9916ae27f 100644
--- a/client/src/assets/player/shared/settings/settings-menu-item.ts
+++ b/client/src/assets/player/shared/settings/settings-menu-item.ts
@@ -70,17 +70,22 @@ class SettingsMenuItem extends MenuItem {
         this.build()
 
         // Update on rate change
-        player.on('ratechange', this.submenuClickHandler)
+        if (subMenuName === 'PlaybackRateMenuButton') {
+          player.on('ratechange', this.submenuClickHandler)
+        }
 
         if (subMenuName === 'CaptionsButton') {
-          // Hack to regenerate captions on HTTP fallback
-          player.on('captionsChanged', () => {
+          player.on('captions-changed', () => {
+            // Wait menu component rebuild
             setTimeout(() => {
-              this.settingsSubMenuEl_.innerHTML = ''
-              this.settingsSubMenuEl_.appendChild(this.subMenu.menu.el())
-              this.update()
-              this.bindClickEvents()
-            }, 0)
+              this.rebuildAfterMenuChange()
+            }, 150)
+          })
+        }
+
+        if (subMenuName === 'ResolutionMenuButton') {
+          this.subMenu.on('menu-changed', () => {
+            this.rebuildAfterMenuChange()
           })
         }
 
@@ -89,6 +94,12 @@ class SettingsMenuItem extends MenuItem {
     })
   }
 
+  dispose () {
+    this.settingsSubMenuEl_.removeEventListener('transitionend', this.transitionEndHandler)
+
+    super.dispose()
+  }
+
   eventHandlers () {
     this.submenuClickHandler = this.onSubmenuClick.bind(this)
     this.transitionEndHandler = this.onTransitionEnd.bind(this)
@@ -190,27 +201,6 @@ class SettingsMenuItem extends MenuItem {
     (button.el() as HTMLElement).innerHTML = this.player().localize(this.subMenu.controlText())
   }
 
-  /**
-   * Add/remove prefixed event listener for CSS Transition
-   *
-   * @method PrefixedEvent
-   */
-  PrefixedEvent (element: any, type: any, callback: any, action = 'addEvent') {
-    const prefix = [ 'webkit', 'moz', 'MS', 'o', '' ]
-
-    for (let p = 0; p < prefix.length; p++) {
-      if (!prefix[p]) {
-        type = type.toLowerCase()
-      }
-
-      if (action === 'addEvent') {
-        element.addEventListener(prefix[p] + type, callback, false)
-      } else if (action === 'removeEvent') {
-        element.removeEventListener(prefix[p] + type, callback, false)
-      }
-    }
-  }
-
   onTransitionEnd (event: any) {
     if (event.propertyName !== 'margin-right') {
       return
@@ -254,12 +244,7 @@ class SettingsMenuItem extends MenuItem {
   }
 
   build () {
-    this.subMenu.on('labelUpdated', () => {
-      this.update()
-    })
-    this.subMenu.on('menuChanged', () => {
-      this.bindClickEvents()
-      this.setSize()
+    this.subMenu.on('label-updated', () => {
       this.update()
     })
 
@@ -272,25 +257,12 @@ class SettingsMenuItem extends MenuItem {
     this.setSize()
     this.bindClickEvents()
 
-    // prefixed event listeners for CSS TransitionEnd
-    this.PrefixedEvent(
-      this.settingsSubMenuEl_,
-      'TransitionEnd',
-      this.transitionEndHandler,
-      'addEvent'
-    )
+    this.settingsSubMenuEl_.addEventListener('transitionend', this.transitionEndHandler, false)
   }
 
   update (event?: any) {
-    let target: HTMLElement = null
     const subMenu = this.subMenu.name()
 
-    if (event && event.type === 'tap') {
-      target = event.target
-    } else if (event) {
-      target = event.currentTarget
-    }
-
     // Playback rate menu button doesn't get a vjs-selected class
     // or sets options_['selected'] on the selected playback rate.
     // Thus we get the submenu value based on the labelEl of playbackRateMenuButton
@@ -321,6 +293,13 @@ class SettingsMenuItem extends MenuItem {
       }
     }
 
+    let target: HTMLElement = null
+    if (event && event.type === 'tap') {
+      target = event.target
+    } else if (event) {
+      target = event.currentTarget
+    }
+
     if (target && !target.classList.contains('vjs-back-button')) {
       this.settingsButton.hideDialog()
     }
@@ -369,6 +348,15 @@ class SettingsMenuItem extends MenuItem {
     }
   }
 
+  private rebuildAfterMenuChange () {
+    this.settingsSubMenuEl_.innerHTML = ''
+    this.settingsSubMenuEl_.appendChild(this.subMenu.menu.el())
+    this.update()
+    this.createBackButton()
+    this.setSize()
+    this.bindClickEvents()
+  }
+
 }
 
 (SettingsMenuItem as any).prototype.contentElType = 'button'
diff --git a/client/src/assets/player/shared/stats/stats-card.ts b/client/src/assets/player/shared/stats/stats-card.ts
index 471a5e46c..fad68cec9 100644
--- a/client/src/assets/player/shared/stats/stats-card.ts
+++ b/client/src/assets/player/shared/stats/stats-card.ts
@@ -7,7 +7,7 @@ import { bytes } from '../common'
 interface StatsCardOptions extends videojs.ComponentOptions {
   videoUUID: string
   videoIsLive: boolean
-  mode: 'webtorrent' | 'p2p-media-loader'
+  mode: 'web-video' | 'p2p-media-loader'
   p2pEnabled: boolean
 }
 
@@ -34,7 +34,7 @@ class StatsCard extends Component {
 
   updateInterval: any
 
-  mode: 'webtorrent' | 'p2p-media-loader'
+  mode: 'web-video' | 'p2p-media-loader'
 
   metadataStore: any = {}
 
@@ -63,6 +63,9 @@ class StatsCard extends Component {
 
   private liveLatency: InfoElement
 
+  private onP2PInfoHandler: (_event: any, data: EventPlayerNetworkInfo) => void
+  private onHTTPInfoHandler: (_event: any, data: EventPlayerNetworkInfo) => void
+
   createEl () {
     this.containerEl = videojs.dom.createEl('div', {
       className: 'vjs-stats-content'
@@ -86,9 +89,7 @@ class StatsCard extends Component {
 
     this.populateInfoBlocks()
 
-    this.player_.on('p2pInfo', (event: any, data: EventPlayerNetworkInfo) => {
-      if (!data) return // HTTP fallback
-
+    this.onP2PInfoHandler = (_event, data) => {
       this.mode = data.source
 
       const p2pStats = data.p2p
@@ -105,11 +106,29 @@ class StatsCard extends Component {
         this.playerNetworkInfo.downloadedFromServer = bytes(httpStats.downloaded).join(' ')
         this.playerNetworkInfo.downloadedFromPeers = bytes(p2pStats.downloaded).join(' ')
       }
-    })
+    }
+
+    this.onHTTPInfoHandler = (_event, data) => {
+      this.mode = data.source
+
+      this.playerNetworkInfo.totalDownloaded = bytes(data.http.downloaded).join(' ')
+    }
+
+    this.player().on('p2p-info', this.onP2PInfoHandler)
+    this.player().on('http-info', this.onHTTPInfoHandler)
 
     return this.containerEl
   }
 
+  dispose () {
+    if (this.updateInterval) clearInterval(this.updateInterval)
+
+    this.player().off('p2p-info', this.onP2PInfoHandler)
+    this.player().off('http-info', this.onHTTPInfoHandler)
+
+    super.dispose()
+  }
+
   toggle () {
     if (this.updateInterval) this.hide()
     else this.show()
@@ -122,7 +141,7 @@ class StatsCard extends Component {
       try {
         const options = this.mode === 'p2p-media-loader'
           ? this.buildHLSOptions()
-          : await this.buildWebTorrentOptions() // Default
+          : await this.buildWebVideoOptions() // Default
 
         this.populateInfoValues(options)
       } catch (err) {
@@ -170,8 +189,8 @@ class StatsCard extends Component {
     }
   }
 
-  private async buildWebTorrentOptions () {
-    const videoFile = this.player_.webtorrent().getCurrentVideoFile()
+  private async buildWebVideoOptions () {
+    const videoFile = this.player_.webVideo().getCurrentVideoFile()
 
     if (!this.metadataStore[videoFile.fileUrl]) {
       this.metadataStore[videoFile.fileUrl] = await fetch(videoFile.metadataUrl).then(res => res.json())
@@ -194,7 +213,7 @@ class StatsCard extends Component {
 
     const resolution = videoFile?.resolution.label + videoFile?.fps
     const buffer = this.timeRangesToString(this.player_.buffered())
-    const progress = this.player_.webtorrent().getTorrent()?.progress
+    const progress = this.player_.bufferedPercent()
 
     return {
       playerNetworkInfo: this.playerNetworkInfo,
@@ -284,8 +303,10 @@ class StatsCard extends Component {
       ? `${(progress * 100).toFixed(1)}% (${(progress * duration).toFixed(1)}s)`
       : undefined
 
-    this.setInfoValue(this.playerMode, this.mode || 'HTTP')
-    this.setInfoValue(this.p2p, player.localize(this.options_.p2pEnabled ? 'enabled' : 'disabled'))
+    const p2pEnabled = this.options_.p2pEnabled && this.mode === 'p2p-media-loader'
+
+    this.setInfoValue(this.playerMode, this.mode)
+    this.setInfoValue(this.p2p, player.localize(p2pEnabled ? 'enabled' : 'disabled'))
     this.setInfoValue(this.uuid, this.options_.videoUUID)
 
     this.setInfoValue(this.viewport, frames)
diff --git a/client/src/assets/player/shared/stats/stats-plugin.ts b/client/src/assets/player/shared/stats/stats-plugin.ts
index 8aad80e8a..86684a78c 100644
--- a/client/src/assets/player/shared/stats/stats-plugin.ts
+++ b/client/src/assets/player/shared/stats/stats-plugin.ts
@@ -7,10 +7,6 @@ class StatsForNerdsPlugin extends Plugin {
   private statsCard: StatsCard
 
   constructor (player: videojs.Player, options: StatsCardOptions) {
-    const settings = {
-      ...options
-    }
-
     super(player)
 
     this.player.ready(() => {
@@ -19,7 +15,17 @@ class StatsForNerdsPlugin extends Plugin {
 
     this.statsCard = new StatsCard(player, options)
 
-    player.addChild(this.statsCard, settings)
+    // Copy options
+    player.addChild(this.statsCard)
+  }
+
+  dispose () {
+    if (this.statsCard) {
+      this.statsCard.dispose()
+      this.player.removeChild(this.statsCard)
+    }
+
+    super.dispose()
   }
 
   show () {
diff --git a/client/src/assets/player/shared/upnext/end-card.ts b/client/src/assets/player/shared/upnext/end-card.ts
index 61668e407..3589e1fd8 100644
--- a/client/src/assets/player/shared/upnext/end-card.ts
+++ b/client/src/assets/player/shared/upnext/end-card.ts
@@ -1,6 +1,7 @@
 import videojs from 'video.js'
+import { UpNextPluginOptions } from '../../types'
 
-function getMainTemplate (options: any) {
+function getMainTemplate (options: EndCardOptions) {
   return `
     <div class="vjs-upnext-top">
       <span class="vjs-upnext-headtext">${options.headText}</span>
@@ -23,15 +24,10 @@ function getMainTemplate (options: any) {
   `
 }
 
-export interface EndCardOptions extends videojs.ComponentOptions {
-  next: () => void
-  getTitle: () => string
-  timeout: number
+export interface EndCardOptions extends videojs.ComponentOptions, UpNextPluginOptions {
   cancelText: string
   headText: string
   suspendedText: string
-  condition: () => boolean
-  suspended: () => boolean
 }
 
 const Component = videojs.getComponent('Component')
@@ -52,27 +48,43 @@ class EndCard extends Component {
   suspendedMessage: HTMLElement
   nextButton: HTMLElement
 
+  private onEndedHandler: () => void
+  private onPlayingHandler: () => void
+
   constructor (player: videojs.Player, options: EndCardOptions) {
     super(player, options)
 
     this.totalTicks = this.options_.timeout / this.interval
 
-    player.on('ended', (_: any) => {
-      if (!this.options_.condition()) return
+    this.onEndedHandler = () => {
+      if (!this.options_.isDisplayed()) return
 
       player.addClass('vjs-upnext--showing')
-      this.showCard((canceled: boolean) => {
+
+      this.showCard(canceled => {
         player.removeClass('vjs-upnext--showing')
+
         this.container.style.display = 'none'
+
         if (!canceled) {
           this.options_.next()
         }
       })
-    })
+    }
 
-    player.on('playing', () => {
+    this.onPlayingHandler = () => {
       this.upNextEvents.trigger('playing')
-    })
+    }
+
+    player.on([ 'auto-stopped', 'ended' ], this.onEndedHandler)
+    player.on('playing', this.onPlayingHandler)
+  }
+
+  dispose () {
+    if (this.onEndedHandler) this.player().off([ 'auto-stopped', 'ended' ], this.onEndedHandler)
+    if (this.onPlayingHandler) this.player().off('playing', this.onPlayingHandler)
+
+    super.dispose()
   }
 
   createEl () {
@@ -101,7 +113,7 @@ class EndCard extends Component {
     return container
   }
 
-  showCard (cb: (value: boolean) => void) {
+  showCard (cb: (canceled: boolean) => void) {
     let timeout: any
 
     this.autoplayRing.setAttribute('stroke-dasharray', `${this.dashOffsetStart}`)
@@ -109,6 +121,10 @@ class EndCard extends Component {
 
     this.title.innerHTML = this.options_.getTitle()
 
+    if (this.totalTicks === 0) {
+      return cb(false)
+    }
+
     this.upNextEvents.one('cancel', () => {
       clearTimeout(timeout)
       cb(true)
@@ -134,7 +150,7 @@ class EndCard extends Component {
     }
 
     const update = () => {
-      if (this.options_.suspended()) {
+      if (this.options_.isSuspended()) {
         this.suspendedMessage.innerText = this.options_.suspendedText
         goToPercent(0)
         this.ticks = 0
diff --git a/client/src/assets/player/shared/upnext/upnext-plugin.ts b/client/src/assets/player/shared/upnext/upnext-plugin.ts
index e12e8c503..0badcd68c 100644
--- a/client/src/assets/player/shared/upnext/upnext-plugin.ts
+++ b/client/src/assets/player/shared/upnext/upnext-plugin.ts
@@ -1,27 +1,25 @@
 import videojs from 'video.js'
+import { UpNextPluginOptions } from '../../types'
 import { EndCardOptions } from './end-card'
 
 const Plugin = videojs.getPlugin('plugin')
 
 class UpNextPlugin extends Plugin {
 
-  constructor (player: videojs.Player, options: Partial<EndCardOptions> = {}) {
-    const settings = {
+  constructor (player: videojs.Player, options: UpNextPluginOptions) {
+    super(player)
+
+    const settings: EndCardOptions = {
       next: options.next,
       getTitle: options.getTitle,
-      timeout: options.timeout || 5000,
-      cancelText: options.cancelText || 'Cancel',
-      headText: options.headText || 'Up Next',
-      suspendedText: options.suspendedText || 'Autoplay is suspended',
-      condition: options.condition,
-      suspended: options.suspended
+      timeout: options.timeout,
+      cancelText: player.localize('Cancel'),
+      headText: player.localize('Up Next'),
+      suspendedText: player.localize('Autoplay is suspended'),
+      isDisplayed: options.isDisplayed,
+      isSuspended: options.isSuspended
     }
 
-    super(player)
-
-    // UpNext plugin can be called later, so ensure the player is not disposed
-    if (this.player.isDisposed()) return
-
     this.player.ready(() => {
       player.addClass('vjs-upnext')
     })
diff --git a/client/src/assets/player/shared/web-video/web-video-plugin.ts b/client/src/assets/player/shared/web-video/web-video-plugin.ts
new file mode 100644
index 000000000..80e56795b
--- /dev/null
+++ b/client/src/assets/player/shared/web-video/web-video-plugin.ts
@@ -0,0 +1,186 @@
+import debug from 'debug'
+import videojs from 'video.js'
+import { logger } from '@root-helpers/logger'
+import { addQueryParams } from '@shared/core-utils'
+import { VideoFile } from '@shared/models'
+import { PeerTubeResolution, PlayerNetworkInfo, WebVideoPluginOptions } from '../../types'
+
+const debugLogger = debug('peertube:player:web-video-plugin')
+
+const Plugin = videojs.getPlugin('plugin')
+
+class WebVideoPlugin extends Plugin {
+  private readonly videoFiles: VideoFile[]
+
+  private currentVideoFile: VideoFile
+  private videoFileToken: () => string
+
+  private networkInfoInterval: any
+
+  private onErrorHandler: () => void
+  private onPlayHandler: () => void
+
+  constructor (player: videojs.Player, options?: WebVideoPluginOptions) {
+    super(player, options)
+
+    this.videoFiles = options.videoFiles
+    this.videoFileToken = options.videoFileToken
+
+    this.updateVideoFile({ videoFile: this.pickAverageVideoFile(), isUserResolutionChange: false })
+
+    player.ready(() => {
+      this.buildQualities()
+
+      this.setupNetworkInfoInterval()
+
+      if (this.videoFiles.length === 0) {
+        this.player.addClass('disabled')
+        return
+      }
+    })
+  }
+
+  dispose () {
+    clearInterval(this.networkInfoInterval)
+
+    if (this.onErrorHandler) this.player.off('error', this.onErrorHandler)
+    if (this.onPlayHandler) this.player.off('canplay', this.onPlayHandler)
+
+    super.dispose()
+  }
+
+  getCurrentResolutionId () {
+    return this.currentVideoFile.resolution.id
+  }
+
+  updateVideoFile (options: {
+    videoFile: VideoFile
+    isUserResolutionChange: boolean
+  }) {
+    this.currentVideoFile = options.videoFile
+
+    debugLogger('Updating web video file to ' + this.currentVideoFile.fileUrl)
+
+    const paused = this.player.paused()
+    const playbackRate = this.player.playbackRate()
+    const currentTime = this.player.currentTime()
+
+    // Enable error display now this is our last fallback
+    this.onErrorHandler = () => this.player.peertube().displayFatalError()
+    this.player.one('error', this.onErrorHandler)
+
+    let httpUrl = this.currentVideoFile.fileUrl
+
+    if (this.videoFileToken()) {
+      httpUrl = addQueryParams(httpUrl, { videoFileToken: this.videoFileToken() })
+    }
+
+    const oldAutoplayValue = this.player.autoplay()
+    if (options.isUserResolutionChange) {
+      this.player.autoplay(false)
+      this.player.addClass('vjs-updating-resolution')
+    }
+
+    this.player.src(httpUrl)
+
+    this.onPlayHandler = () => {
+      this.player.playbackRate(playbackRate)
+      this.player.currentTime(currentTime)
+
+      this.adaptPosterForAudioOnly()
+
+      if (options.isUserResolutionChange) {
+        this.player.trigger('user-resolution-change')
+        this.player.trigger('web-video-source-change')
+
+        this.tryToPlay()
+          .then(() => {
+            if (paused) this.player.pause()
+
+            this.player.autoplay(oldAutoplayValue)
+          })
+      }
+    }
+
+    this.player.one('canplay', this.onPlayHandler)
+  }
+
+  getCurrentVideoFile () {
+    return this.currentVideoFile
+  }
+
+  private adaptPosterForAudioOnly () {
+    // Audio-only (resolutionId === 0) gets special treatment
+    if (this.currentVideoFile.resolution.id === 0) {
+      this.player.audioPosterMode(true)
+    } else {
+      this.player.audioPosterMode(false)
+    }
+  }
+
+  private tryToPlay () {
+    debugLogger('Try to play manually the video')
+
+    const playPromise = this.player.play()
+    if (playPromise === undefined) return
+
+    return playPromise
+      .catch((err: Error) => {
+        if (err.message.includes('The play() request was interrupted by a call to pause()')) {
+          return
+        }
+
+        logger.warn(err)
+        this.player.pause()
+        this.player.posterImage.show()
+        this.player.removeClass('vjs-has-autoplay')
+        this.player.removeClass('vjs-playing-audio-only-content')
+      })
+      .finally(() => {
+        this.player.removeClass('vjs-updating-resolution')
+      })
+  }
+
+  private pickAverageVideoFile () {
+    if (this.videoFiles.length === 1) return this.videoFiles[0]
+
+    const files = this.videoFiles.filter(f => f.resolution.id !== 0)
+    return files[Math.floor(files.length / 2)]
+  }
+
+  private buildQualities () {
+    const resolutions: PeerTubeResolution[] = this.videoFiles.map(videoFile => ({
+      id: videoFile.resolution.id,
+      label: this.buildQualityLabel(videoFile),
+      height: videoFile.resolution.id,
+      selected: videoFile.id === this.currentVideoFile.id,
+      selectCallback: () => this.updateVideoFile({ videoFile, isUserResolutionChange: true })
+    }))
+
+    this.player.peertubeResolutions().add(resolutions)
+  }
+
+  private buildQualityLabel (file: VideoFile) {
+    let label = file.resolution.label
+
+    if (file.fps && file.fps >= 50) {
+      label += file.fps
+    }
+
+    return label
+  }
+
+  private setupNetworkInfoInterval () {
+    this.networkInfoInterval = setInterval(() => {
+      return this.player.trigger('http-info', {
+        source: 'web-video',
+        http: {
+          downloaded: this.player.bufferedPercent() * this.currentVideoFile.size
+        }
+      } as PlayerNetworkInfo)
+    }, 1000)
+  }
+}
+
+videojs.registerPlugin('webVideo', WebVideoPlugin)
+export { WebVideoPlugin }
diff --git a/client/src/assets/player/shared/webtorrent/peertube-chunk-store.ts b/client/src/assets/player/shared/webtorrent/peertube-chunk-store.ts
deleted file mode 100644
index 74ae17704..000000000
--- a/client/src/assets/player/shared/webtorrent/peertube-chunk-store.ts
+++ /dev/null
@@ -1,234 +0,0 @@
-// From https://github.com/MinEduTDF/idb-chunk-store
-// We use temporary IndexDB (all data are removed on destroy) to avoid RAM issues
-// Thanks @santiagogil and @Feross
-
-import Dexie from 'dexie'
-import { EventEmitter } from 'events'
-import { logger } from '@root-helpers/logger'
-
-class ChunkDatabase extends Dexie {
-  chunks: Dexie.Table<{ id: number, buf: Buffer }, number>
-
-  constructor (dbname: string) {
-    super(dbname)
-
-    this.version(1).stores({
-      chunks: 'id'
-    })
-  }
-}
-
-class ExpirationDatabase extends Dexie {
-  databases: Dexie.Table<{ name: string, expiration: number }, number>
-
-  constructor () {
-    super('webtorrent-expiration')
-
-    this.version(1).stores({
-      databases: 'name,expiration'
-    })
-  }
-}
-
-export class PeertubeChunkStore extends EventEmitter {
-  private static readonly BUFFERING_PUT_MS = 1000
-  private static readonly CLEANER_INTERVAL_MS = 1000 * 60 // 1 minute
-  private static readonly CLEANER_EXPIRATION_MS = 1000 * 60 * 5 // 5 minutes
-
-  chunkLength: number
-
-  private pendingPut: { id: number, buf: Buffer, cb: (err?: Error) => void }[] = []
-  // If the store is full
-  private memoryChunks: { [ id: number ]: Buffer | true } = {}
-  private databaseName: string
-  private putBulkTimeout: any
-  private cleanerInterval: any
-  private db: ChunkDatabase
-  private expirationDB: ExpirationDatabase
-  private readonly length: number
-  private readonly lastChunkLength: number
-  private readonly lastChunkIndex: number
-
-  constructor (chunkLength: number, opts: any) {
-    super()
-
-    this.databaseName = 'webtorrent-chunks-'
-
-    if (!opts) opts = {}
-    if (opts.torrent?.infoHash) this.databaseName += opts.torrent.infoHash
-    else this.databaseName += '-default'
-
-    this.setMaxListeners(100)
-
-    this.chunkLength = Number(chunkLength)
-    if (!this.chunkLength) throw new Error('First argument must be a chunk length')
-
-    this.length = Number(opts.length) || Infinity
-
-    if (this.length !== Infinity) {
-      this.lastChunkLength = (this.length % this.chunkLength) || this.chunkLength
-      this.lastChunkIndex = Math.ceil(this.length / this.chunkLength) - 1
-    }
-
-    this.db = new ChunkDatabase(this.databaseName)
-    // Track databases that expired
-    this.expirationDB = new ExpirationDatabase()
-
-    this.runCleaner()
-  }
-
-  put (index: number, buf: Buffer, cb: (err?: Error) => void) {
-    const isLastChunk = (index === this.lastChunkIndex)
-    if (isLastChunk && buf.length !== this.lastChunkLength) {
-      return this.nextTick(cb, new Error('Last chunk length must be ' + this.lastChunkLength))
-    }
-    if (!isLastChunk && buf.length !== this.chunkLength) {
-      return this.nextTick(cb, new Error('Chunk length must be ' + this.chunkLength))
-    }
-
-    // Specify we have this chunk
-    this.memoryChunks[index] = true
-
-    // Add it to the pending put
-    this.pendingPut.push({ id: index, buf, cb })
-    // If it's already planned, return
-    if (this.putBulkTimeout) return
-
-    // Plan a future bulk insert
-    this.putBulkTimeout = setTimeout(async () => {
-      const processing = this.pendingPut
-      this.pendingPut = []
-      this.putBulkTimeout = undefined
-
-      try {
-        await this.db.transaction('rw', this.db.chunks, () => {
-          return this.db.chunks.bulkPut(processing.map(p => ({ id: p.id, buf: p.buf })))
-        })
-      } catch (err) {
-        logger.info('Cannot bulk insert chunks. Store them in memory.', err)
-
-        processing.forEach(p => {
-          this.memoryChunks[p.id] = p.buf
-        })
-      } finally {
-        processing.forEach(p => p.cb())
-      }
-    }, PeertubeChunkStore.BUFFERING_PUT_MS)
-  }
-
-  get (index: number, opts: any, cb: (err?: Error, buf?: Buffer) => void): void {
-    if (typeof opts === 'function') return this.get(index, null, opts)
-
-    // IndexDB could be slow, use our memory index first
-    const memoryChunk = this.memoryChunks[index]
-    if (memoryChunk === undefined) {
-      const err = new Error('Chunk not found') as any
-      err['notFound'] = true
-
-      return process.nextTick(() => cb(err))
-    }
-
-    // Chunk in memory
-    if (memoryChunk !== true) return cb(null, memoryChunk)
-
-    // Chunk in store
-    this.db.transaction('r', this.db.chunks, async () => {
-      const result = await this.db.chunks.get({ id: index })
-      if (result === undefined) return cb(null, Buffer.alloc(0))
-
-      const buf = result.buf
-      if (!opts) return this.nextTick(cb, null, buf)
-
-      const offset = opts.offset || 0
-      const len = opts.length || (buf.length - offset)
-      return cb(null, buf.slice(offset, len + offset))
-    })
-    .catch(err => {
-      logger.error(err)
-      return cb(err)
-    })
-  }
-
-  close (cb: (err?: Error) => void) {
-    return this.destroy(cb)
-  }
-
-  async destroy (cb: (err?: Error) => void) {
-    try {
-      if (this.pendingPut) {
-        clearTimeout(this.putBulkTimeout)
-        this.pendingPut = null
-      }
-      if (this.cleanerInterval) {
-        clearInterval(this.cleanerInterval)
-        this.cleanerInterval = null
-      }
-
-      if (this.db) {
-        this.db.close()
-
-        await this.dropDatabase(this.databaseName)
-      }
-
-      if (this.expirationDB) {
-        this.expirationDB.close()
-        this.expirationDB = null
-      }
-
-      return cb()
-    } catch (err) {
-      logger.error('Cannot destroy peertube chunk store.', err)
-      return cb(err)
-    }
-  }
-
-  private runCleaner () {
-    this.checkExpiration()
-
-    this.cleanerInterval = setInterval(() => {
-      this.checkExpiration()
-    }, PeertubeChunkStore.CLEANER_INTERVAL_MS)
-  }
-
-  private async checkExpiration () {
-    let databasesToDeleteInfo: { name: string }[] = []
-
-    try {
-      await this.expirationDB.transaction('rw', this.expirationDB.databases, async () => {
-        // Update our database expiration since we are alive
-        await this.expirationDB.databases.put({
-          name: this.databaseName,
-          expiration: new Date().getTime() + PeertubeChunkStore.CLEANER_EXPIRATION_MS
-        })
-
-        const now = new Date().getTime()
-        databasesToDeleteInfo = await this.expirationDB.databases.where('expiration').below(now).toArray()
-      })
-    } catch (err) {
-      logger.error('Cannot update expiration of fetch expired databases.', err)
-    }
-
-    for (const databaseToDeleteInfo of databasesToDeleteInfo) {
-      await this.dropDatabase(databaseToDeleteInfo.name)
-    }
-  }
-
-  private async dropDatabase (databaseName: string) {
-    const dbToDelete = new ChunkDatabase(databaseName)
-    logger.info(`Destroying IndexDB database ${databaseName}`)
-
-    try {
-      await dbToDelete.delete()
-
-      await this.expirationDB.transaction('rw', this.expirationDB.databases, () => {
-        return this.expirationDB.databases.where({ name: databaseName }).delete()
-      })
-    } catch (err) {
-      logger.error(`Cannot delete ${databaseName}.`, err)
-    }
-  }
-
-  private nextTick <T> (cb: (err?: Error, val?: T) => void, err: Error, val?: T) {
-    process.nextTick(() => cb(err, val), undefined)
-  }
-}
diff --git a/client/src/assets/player/shared/webtorrent/video-renderer.ts b/client/src/assets/player/shared/webtorrent/video-renderer.ts
deleted file mode 100644
index a85d7a838..000000000
--- a/client/src/assets/player/shared/webtorrent/video-renderer.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-// Thanks: https://github.com/feross/render-media
-
-const MediaElementWrapper = require('mediasource')
-import { logger } from '@root-helpers/logger'
-import { extname } from 'path'
-const Videostream = require('videostream')
-
-const VIDEOSTREAM_EXTS = [
-  '.m4a',
-  '.m4v',
-  '.mp4'
-]
-
-type RenderMediaOptions = {
-  controls: boolean
-  autoplay: boolean
-}
-
-function renderVideo (
-  file: any,
-  elem: HTMLVideoElement,
-  opts: RenderMediaOptions,
-  callback: (err: Error, renderer: any) => void
-) {
-  validateFile(file)
-
-  return renderMedia(file, elem, opts, callback)
-}
-
-function renderMedia (file: any, elem: HTMLVideoElement, opts: RenderMediaOptions, callback: (err: Error, renderer?: any) => void) {
-  const extension = extname(file.name).toLowerCase()
-  let preparedElem: any
-  let currentTime = 0
-  let renderer: any
-
-  try {
-    if (VIDEOSTREAM_EXTS.includes(extension)) {
-      renderer = useVideostream()
-    } else {
-      renderer = useMediaSource()
-    }
-  } catch (err) {
-    return callback(err)
-  }
-
-  function useVideostream () {
-    prepareElem()
-    preparedElem.addEventListener('error', function onError (err: Error) {
-      preparedElem.removeEventListener('error', onError)
-
-      return callback(err)
-    })
-    preparedElem.addEventListener('loadstart', onLoadStart)
-    return new Videostream(file, preparedElem)
-  }
-
-  function useMediaSource (useVP9 = false) {
-    const codecs = getCodec(file.name, useVP9)
-
-    prepareElem()
-    preparedElem.addEventListener('error', function onError (err: Error) {
-      preparedElem.removeEventListener('error', onError)
-
-      // Try with vp9 before returning an error
-      if (codecs.includes('vp8')) return fallbackToMediaSource(true)
-
-      return callback(err)
-    })
-    preparedElem.addEventListener('loadstart', onLoadStart)
-
-    const wrapper = new MediaElementWrapper(preparedElem)
-    const writable = wrapper.createWriteStream(codecs)
-    file.createReadStream().pipe(writable)
-
-    if (currentTime) preparedElem.currentTime = currentTime
-
-    return wrapper
-  }
-
-  function fallbackToMediaSource (useVP9 = false) {
-    if (useVP9 === true) logger.info('Falling back to media source with VP9 enabled.')
-    else logger.info('Falling back to media source..')
-
-    useMediaSource(useVP9)
-  }
-
-  function prepareElem () {
-    if (preparedElem === undefined) {
-      preparedElem = elem
-
-      preparedElem.addEventListener('progress', function () {
-        currentTime = elem.currentTime
-      })
-    }
-  }
-
-  function onLoadStart () {
-    preparedElem.removeEventListener('loadstart', onLoadStart)
-    if (opts.autoplay) preparedElem.play()
-
-    callback(null, renderer)
-  }
-}
-
-function validateFile (file: any) {
-  if (file == null) {
-    throw new Error('file cannot be null or undefined')
-  }
-  if (typeof file.name !== 'string') {
-    throw new Error('missing or invalid file.name property')
-  }
-  if (typeof file.createReadStream !== 'function') {
-    throw new Error('missing or invalid file.createReadStream property')
-  }
-}
-
-function getCodec (name: string, useVP9 = false) {
-  const ext = extname(name).toLowerCase()
-  if (ext === '.mp4') {
-    return 'video/mp4; codecs="avc1.640029, mp4a.40.5"'
-  }
-
-  if (ext === '.webm') {
-    if (useVP9 === true) return 'video/webm; codecs="vp9, opus"'
-
-    return 'video/webm; codecs="vp8, vorbis"'
-  }
-
-  return undefined
-}
-
-export {
-  renderVideo
-}
diff --git a/client/src/assets/player/shared/webtorrent/webtorrent-plugin.ts b/client/src/assets/player/shared/webtorrent/webtorrent-plugin.ts
deleted file mode 100644
index e2e220c03..000000000
--- a/client/src/assets/player/shared/webtorrent/webtorrent-plugin.ts
+++ /dev/null
@@ -1,663 +0,0 @@
-import videojs from 'video.js'
-import * as WebTorrent from 'webtorrent'
-import { logger } from '@root-helpers/logger'
-import { isIOS } from '@root-helpers/web-browser'
-import { addQueryParams, timeToInt } from '@shared/core-utils'
-import { VideoFile } from '@shared/models'
-import { getAverageBandwidthInStore, getStoredMute, getStoredVolume, saveAverageBandwidth } from '../../peertube-player-local-storage'
-import { PeerTubeResolution, PlayerNetworkInfo, WebtorrentPluginOptions } from '../../types'
-import { getRtcConfig, videoFileMaxByResolution, videoFileMinByResolution } from '../common'
-import { PeertubeChunkStore } from './peertube-chunk-store'
-import { renderVideo } from './video-renderer'
-
-const CacheChunkStore = require('cache-chunk-store')
-
-type PlayOptions = {
-  forcePlay?: boolean
-  seek?: number
-  delay?: number
-}
-
-const Plugin = videojs.getPlugin('plugin')
-
-class WebTorrentPlugin extends Plugin {
-  readonly videoFiles: VideoFile[]
-
-  private readonly playerElement: HTMLVideoElement
-
-  private readonly autoplay: boolean | string = false
-  private readonly startTime: number = 0
-  private readonly savePlayerSrcFunction: videojs.Player['src']
-  private readonly videoDuration: number
-  private readonly CONSTANTS = {
-    INFO_SCHEDULER: 1000, // Don't change this
-    AUTO_QUALITY_SCHEDULER: 3000, // Check quality every 3 seconds
-    AUTO_QUALITY_THRESHOLD_PERCENT: 30, // Bandwidth should be 30% more important than a resolution bitrate to change to it
-    AUTO_QUALITY_OBSERVATION_TIME: 10000, // Wait 10 seconds after having change the resolution before another check
-    AUTO_QUALITY_HIGHER_RESOLUTION_DELAY: 5000, // Buffering higher resolution during 5 seconds
-    BANDWIDTH_AVERAGE_NUMBER_OF_VALUES: 5 // Last 5 seconds to build average bandwidth
-  }
-
-  private readonly buildWebSeedUrls: (file: VideoFile) => string[]
-
-  private readonly webtorrent = new WebTorrent({
-    tracker: {
-      rtcConfig: getRtcConfig()
-    },
-    dht: false
-  })
-
-  private currentVideoFile: VideoFile
-  private torrent: WebTorrent.Torrent
-
-  private renderer: any
-  private fakeRenderer: any
-  private destroyingFakeRenderer = false
-
-  private autoResolution = true
-  private autoResolutionPossible = true
-  private isAutoResolutionObservation = false
-  private playerRefusedP2P = false
-
-  private requiresUserAuth: boolean
-  private videoFileToken: () => string
-
-  private torrentInfoInterval: any
-  private autoQualityInterval: any
-  private addTorrentDelay: any
-  private qualityObservationTimer: any
-  private runAutoQualitySchedulerTimer: any
-
-  private downloadSpeeds: number[] = []
-
-  constructor (player: videojs.Player, options?: WebtorrentPluginOptions) {
-    super(player)
-
-    this.startTime = timeToInt(options.startTime)
-
-    // Custom autoplay handled by webtorrent because we lazy play the video
-    this.autoplay = options.autoplay
-
-    this.playerRefusedP2P = options.playerRefusedP2P
-
-    this.videoFiles = options.videoFiles
-    this.videoDuration = options.videoDuration
-
-    this.savePlayerSrcFunction = this.player.src
-    this.playerElement = options.playerElement
-
-    this.requiresUserAuth = options.requiresUserAuth
-    this.videoFileToken = options.videoFileToken
-
-    this.buildWebSeedUrls = options.buildWebSeedUrls
-
-    this.player.ready(() => {
-      const playerOptions = this.player.options_
-
-      const volume = getStoredVolume()
-      if (volume !== undefined) this.player.volume(volume)
-
-      const muted = playerOptions.muted !== undefined ? playerOptions.muted : getStoredMute()
-      if (muted !== undefined) this.player.muted(muted)
-
-      this.player.duration(options.videoDuration)
-
-      this.initializePlayer()
-      this.runTorrentInfoScheduler()
-
-      this.player.one('play', () => {
-        // Don't run immediately scheduler, wait some seconds the TCP connections are made
-        this.runAutoQualitySchedulerTimer = setTimeout(() => this.runAutoQualityScheduler(), this.CONSTANTS.AUTO_QUALITY_SCHEDULER)
-      })
-    })
-  }
-
-  dispose () {
-    clearTimeout(this.addTorrentDelay)
-    clearTimeout(this.qualityObservationTimer)
-    clearTimeout(this.runAutoQualitySchedulerTimer)
-
-    clearInterval(this.torrentInfoInterval)
-    clearInterval(this.autoQualityInterval)
-
-    // Don't need to destroy renderer, video player will be destroyed
-    this.flushVideoFile(this.currentVideoFile, false)
-
-    this.destroyFakeRenderer()
-  }
-
-  getCurrentResolutionId () {
-    return this.currentVideoFile ? this.currentVideoFile.resolution.id : -1
-  }
-
-  updateVideoFile (
-    videoFile?: VideoFile,
-    options: {
-      forcePlay?: boolean
-      seek?: number
-      delay?: number
-    } = {},
-    done: () => void = () => { /* empty */ }
-  ) {
-    // Automatically choose the adapted video file
-    if (!videoFile) {
-      const savedAverageBandwidth = getAverageBandwidthInStore()
-      videoFile = savedAverageBandwidth
-        ? this.getAppropriateFile(savedAverageBandwidth)
-        : this.pickAverageVideoFile()
-    }
-
-    if (!videoFile) {
-      throw Error(`Can't update video file since videoFile is undefined.`)
-    }
-
-    // Don't add the same video file once again
-    if (this.currentVideoFile !== undefined && this.currentVideoFile.magnetUri === videoFile.magnetUri) {
-      return
-    }
-
-    // Do not display error to user because we will have multiple fallback
-    this.player.peertube().hideFatalError();
-
-    // Hack to "simulate" src link in video.js >= 6
-    // Without this, we can't play the video after pausing it
-    // https://github.com/videojs/video.js/blob/master/src/js/player.js#L1633
-    (this.player as any).src = () => true
-    const oldPlaybackRate = this.player.playbackRate()
-
-    const previousVideoFile = this.currentVideoFile
-    this.currentVideoFile = videoFile
-
-    // Don't try on iOS that does not support MediaSource
-    // Or don't use P2P if webtorrent is disabled
-    if (isIOS() || this.playerRefusedP2P) {
-      return this.fallbackToHttp(options, () => {
-        this.player.playbackRate(oldPlaybackRate)
-        return done()
-      })
-    }
-
-    this.addTorrent(this.currentVideoFile.magnetUri, previousVideoFile, options, () => {
-      this.player.playbackRate(oldPlaybackRate)
-      return done()
-    })
-
-    this.selectAppropriateResolution(true)
-  }
-
-  updateEngineResolution (resolutionId: number, delay = 0) {
-    // Remember player state
-    const currentTime = this.player.currentTime()
-    const isPaused = this.player.paused()
-
-    // Hide bigPlayButton
-    if (!isPaused) {
-      this.player.bigPlayButton.hide()
-    }
-
-    // Audio-only (resolutionId === 0) gets special treatment
-    if (resolutionId === 0) {
-      // Audio-only: show poster, do not auto-hide controls
-      this.player.addClass('vjs-playing-audio-only-content')
-      this.player.posterImage.show()
-    } else {
-      // Hide poster to have black background
-      this.player.removeClass('vjs-playing-audio-only-content')
-      this.player.posterImage.hide()
-    }
-
-    const newVideoFile = this.videoFiles.find(f => f.resolution.id === resolutionId)
-    const options = {
-      forcePlay: false,
-      delay,
-      seek: currentTime + (delay / 1000)
-    }
-
-    this.updateVideoFile(newVideoFile, options)
-
-    this.player.trigger('engineResolutionChange')
-  }
-
-  flushVideoFile (videoFile: VideoFile, destroyRenderer = true) {
-    if (videoFile !== undefined && this.webtorrent.get(videoFile.magnetUri)) {
-      if (destroyRenderer === true && this.renderer && this.renderer.destroy) this.renderer.destroy()
-
-      this.webtorrent.remove(videoFile.magnetUri)
-      logger.info(`Removed ${videoFile.magnetUri}`)
-    }
-  }
-
-  disableAutoResolution () {
-    this.autoResolution = false
-    this.autoResolutionPossible = false
-    this.player.peertubeResolutions().disableAutoResolution()
-  }
-
-  isAutoResolutionPossible () {
-    return this.autoResolutionPossible
-  }
-
-  getTorrent () {
-    return this.torrent
-  }
-
-  getCurrentVideoFile () {
-    return this.currentVideoFile
-  }
-
-  changeQuality (id: number) {
-    if (id === -1) {
-      if (this.autoResolutionPossible === true) {
-        this.autoResolution = true
-
-        this.selectAppropriateResolution(false)
-      }
-
-      return
-    }
-
-    this.autoResolution = false
-    this.updateEngineResolution(id)
-    this.selectAppropriateResolution(false)
-  }
-
-  private addTorrent (
-    magnetOrTorrentUrl: string,
-    previousVideoFile: VideoFile,
-    options: PlayOptions,
-    done: (err?: Error) => void
-  ) {
-    if (!magnetOrTorrentUrl) return this.fallbackToHttp(options, done)
-
-    logger.info(`Adding ${magnetOrTorrentUrl}.`)
-
-    const oldTorrent = this.torrent
-    const torrentOptions = {
-      // Don't use arrow function: it breaks webtorrent (that uses `new` keyword)
-      store: function (chunkLength: number, storeOpts: any) {
-        return new CacheChunkStore(new PeertubeChunkStore(chunkLength, storeOpts), {
-          max: 100
-        })
-      },
-      urlList: this.buildWebSeedUrls(this.currentVideoFile)
-    }
-
-    this.torrent = this.webtorrent.add(magnetOrTorrentUrl, torrentOptions, torrent => {
-      logger.info(`Added ${magnetOrTorrentUrl}.`)
-
-      if (oldTorrent) {
-        // Pause the old torrent
-        this.stopTorrent(oldTorrent)
-
-        // We use a fake renderer so we download correct pieces of the next file
-        if (options.delay) this.renderFileInFakeElement(torrent.files[0], options.delay)
-      }
-
-      // Render the video in a few seconds? (on resolution change for example, we wait some seconds of the new video resolution)
-      this.addTorrentDelay = setTimeout(() => {
-        // We don't need the fake renderer anymore
-        this.destroyFakeRenderer()
-
-        const paused = this.player.paused()
-
-        this.flushVideoFile(previousVideoFile)
-
-        // Update progress bar (just for the UI), do not wait rendering
-        if (options.seek) this.player.currentTime(options.seek)
-
-        const renderVideoOptions = { autoplay: false, controls: true }
-        renderVideo(torrent.files[0], this.playerElement, renderVideoOptions, (err, renderer) => {
-          this.renderer = renderer
-
-          if (err) return this.fallbackToHttp(options, done)
-
-          return this.tryToPlay(err => {
-            if (err) return done(err)
-
-            if (options.seek) this.seek(options.seek)
-            if (options.forcePlay === false && paused === true) this.player.pause()
-
-            return done()
-          })
-        })
-      }, options.delay || 0)
-    })
-
-    this.torrent.on('error', (err: any) => logger.error(err))
-
-    this.torrent.on('warning', (err: any) => {
-      // We don't support HTTP tracker but we don't care -> we use the web socket tracker
-      if (err.message.indexOf('Unsupported tracker protocol') !== -1) return
-
-      // Users don't care about issues with WebRTC, but developers do so log it in the console
-      if (err.message.indexOf('Ice connection failed') !== -1) {
-        logger.info(err)
-        return
-      }
-
-      // Magnet hash is not up to date with the torrent file, add directly the torrent file
-      if (err.message.indexOf('incorrect info hash') !== -1) {
-        logger.error('Incorrect info hash detected, falling back to torrent file.')
-        const newOptions = { forcePlay: true, seek: options.seek }
-        return this.addTorrent((this.torrent as any)['xs'], previousVideoFile, newOptions, done)
-      }
-
-      // Remote instance is down
-      if (err.message.indexOf('from xs param') !== -1) {
-        this.handleError(err)
-      }
-
-      logger.warn(err)
-    })
-  }
-
-  private tryToPlay (done?: (err?: Error) => void) {
-    if (!done) done = function () { /* empty */ }
-
-    const playPromise = this.player.play()
-    if (playPromise !== undefined) {
-      return playPromise.then(() => done())
-                        .catch((err: Error) => {
-                          if (err.message.includes('The play() request was interrupted by a call to pause()')) {
-                            return
-                          }
-
-                          logger.warn(err)
-                          this.player.pause()
-                          this.player.posterImage.show()
-                          this.player.removeClass('vjs-has-autoplay')
-                          this.player.removeClass('vjs-has-big-play-button-clicked')
-                          this.player.removeClass('vjs-playing-audio-only-content')
-
-                          return done()
-                        })
-    }
-
-    return done()
-  }
-
-  private seek (time: number) {
-    this.player.currentTime(time)
-    this.player.handleTechSeeked_()
-  }
-
-  private getAppropriateFile (averageDownloadSpeed?: number): VideoFile {
-    if (this.videoFiles === undefined) return undefined
-    if (this.videoFiles.length === 1) return this.videoFiles[0]
-
-    const files = this.videoFiles.filter(f => f.resolution.id !== 0)
-    if (files.length === 0) return undefined
-
-    // Don't change the torrent if the player ended
-    if (this.torrent && this.torrent.progress === 1 && this.player.ended()) return this.currentVideoFile
-
-    if (!averageDownloadSpeed) averageDownloadSpeed = this.getAndSaveActualDownloadSpeed()
-
-    // Limit resolution according to player height
-    const playerHeight = this.playerElement.offsetHeight
-
-    // We take the first resolution just above the player height
-    // Example: player height is 530px, we want the 720p file instead of 480p
-    let maxResolution = files[0].resolution.id
-    for (let i = files.length - 1; i >= 0; i--) {
-      const resolutionId = files[i].resolution.id
-      if (resolutionId !== 0 && resolutionId >= playerHeight) {
-        maxResolution = resolutionId
-        break
-      }
-    }
-
-    // Filter videos we can play according to our screen resolution and bandwidth
-    const filteredFiles = files.filter(f => f.resolution.id <= maxResolution)
-                               .filter(f => {
-                                 const fileBitrate = (f.size / this.videoDuration)
-                                 let threshold = fileBitrate
-
-                                 // If this is for a higher resolution or an initial load: add a margin
-                                 if (!this.currentVideoFile || f.resolution.id > this.currentVideoFile.resolution.id) {
-                                   threshold += ((fileBitrate * this.CONSTANTS.AUTO_QUALITY_THRESHOLD_PERCENT) / 100)
-                                 }
-
-                                 return averageDownloadSpeed > threshold
-                               })
-
-    // If the download speed is too bad, return the lowest resolution we have
-    if (filteredFiles.length === 0) return videoFileMinByResolution(files)
-
-    return videoFileMaxByResolution(filteredFiles)
-  }
-
-  private getAndSaveActualDownloadSpeed () {
-    const start = Math.max(this.downloadSpeeds.length - this.CONSTANTS.BANDWIDTH_AVERAGE_NUMBER_OF_VALUES, 0)
-    const lastDownloadSpeeds = this.downloadSpeeds.slice(start, this.downloadSpeeds.length)
-    if (lastDownloadSpeeds.length === 0) return -1
-
-    const sum = lastDownloadSpeeds.reduce((a, b) => a + b)
-    const averageBandwidth = Math.round(sum / lastDownloadSpeeds.length)
-
-    // Save the average bandwidth for future use
-    saveAverageBandwidth(averageBandwidth)
-
-    return averageBandwidth
-  }
-
-  private initializePlayer () {
-    this.buildQualities()
-
-    if (this.videoFiles.length === 0) {
-      this.player.addClass('disabled')
-      return
-    }
-
-    if (this.autoplay !== false) {
-      this.player.posterImage.hide()
-
-      return this.updateVideoFile(undefined, { forcePlay: true, seek: this.startTime })
-    }
-
-    // Proxy first play
-    const oldPlay = this.player.play.bind(this.player);
-    (this.player as any).play = () => {
-      this.player.addClass('vjs-has-big-play-button-clicked')
-      this.player.play = oldPlay
-
-      this.updateVideoFile(undefined, { forcePlay: true, seek: this.startTime })
-    }
-  }
-
-  private runAutoQualityScheduler () {
-    this.autoQualityInterval = setInterval(() => {
-
-      // Not initialized or in HTTP fallback
-      if (this.torrent === undefined || this.torrent === null) return
-      if (this.autoResolution === false) return
-      if (this.isAutoResolutionObservation === true) return
-
-      const file = this.getAppropriateFile()
-      let changeResolution = false
-      let changeResolutionDelay = 0
-
-      // Lower resolution
-      if (this.isPlayerWaiting() && file.resolution.id < this.currentVideoFile.resolution.id) {
-        logger.info(`Downgrading automatically the resolution to: ${file.resolution.label}`)
-        changeResolution = true
-      } else if (file.resolution.id > this.currentVideoFile.resolution.id) { // Higher resolution
-        logger.info(`Upgrading automatically the resolution to: ${file.resolution.label}`)
-        changeResolution = true
-        changeResolutionDelay = this.CONSTANTS.AUTO_QUALITY_HIGHER_RESOLUTION_DELAY
-      }
-
-      if (changeResolution === true) {
-        this.updateEngineResolution(file.resolution.id, changeResolutionDelay)
-
-        // Wait some seconds in observation of our new resolution
-        this.isAutoResolutionObservation = true
-
-        this.qualityObservationTimer = setTimeout(() => {
-          this.isAutoResolutionObservation = false
-        }, this.CONSTANTS.AUTO_QUALITY_OBSERVATION_TIME)
-      }
-    }, this.CONSTANTS.AUTO_QUALITY_SCHEDULER)
-  }
-
-  private isPlayerWaiting () {
-    return this.player?.hasClass('vjs-waiting')
-  }
-
-  private runTorrentInfoScheduler () {
-    this.torrentInfoInterval = setInterval(() => {
-      // Not initialized yet
-      if (this.torrent === undefined) return
-
-      // Http fallback
-      if (this.torrent === null) return this.player.trigger('p2pInfo', false)
-
-      // this.webtorrent.downloadSpeed because we need to take into account the potential old torrent too
-      if (this.webtorrent.downloadSpeed !== 0) this.downloadSpeeds.push(this.webtorrent.downloadSpeed)
-
-      return this.player.trigger('p2pInfo', {
-        source: 'webtorrent',
-        http: {
-          downloadSpeed: 0,
-          downloaded: 0
-        },
-        p2p: {
-          downloadSpeed: this.torrent.downloadSpeed,
-          numPeers: this.torrent.numPeers,
-          uploadSpeed: this.torrent.uploadSpeed,
-          downloaded: this.torrent.downloaded,
-          uploaded: this.torrent.uploaded
-        },
-        bandwidthEstimate: this.webtorrent.downloadSpeed
-      } as PlayerNetworkInfo)
-    }, this.CONSTANTS.INFO_SCHEDULER)
-  }
-
-  private fallbackToHttp (options: PlayOptions, done?: (err?: Error) => void) {
-    const paused = this.player.paused()
-
-    this.disableAutoResolution()
-
-    this.flushVideoFile(this.currentVideoFile, true)
-    this.torrent = null
-
-    // Enable error display now this is our last fallback
-    this.player.one('error', () => this.player.peertube().displayFatalError())
-
-    let httpUrl = this.currentVideoFile.fileUrl
-
-    if (this.videoFileToken) {
-      httpUrl = addQueryParams(httpUrl, { videoFileToken: this.videoFileToken() })
-    }
-
-    this.player.src = this.savePlayerSrcFunction
-    this.player.src(httpUrl)
-
-    this.selectAppropriateResolution(true)
-
-    // We changed the source, so reinit captions
-    this.player.trigger('sourcechange')
-
-    return this.tryToPlay(err => {
-      if (err && done) return done(err)
-
-      if (options.seek) this.seek(options.seek)
-      if (options.forcePlay === false && paused === true) this.player.pause()
-
-      if (done) return done()
-    })
-  }
-
-  private handleError (err: Error | string) {
-    return this.player.trigger('customError', { err })
-  }
-
-  private pickAverageVideoFile () {
-    if (this.videoFiles.length === 1) return this.videoFiles[0]
-
-    const files = this.videoFiles.filter(f => f.resolution.id !== 0)
-    return files[Math.floor(files.length / 2)]
-  }
-
-  private stopTorrent (torrent: WebTorrent.Torrent) {
-    torrent.pause()
-    // Pause does not remove actual peers (in particular the webseed peer)
-    torrent.removePeer((torrent as any)['ws'])
-  }
-
-  private renderFileInFakeElement (file: WebTorrent.TorrentFile, delay: number) {
-    this.destroyingFakeRenderer = false
-
-    const fakeVideoElem = document.createElement('video')
-    renderVideo(file, fakeVideoElem, { autoplay: false, controls: false }, (err, renderer) => {
-      this.fakeRenderer = renderer
-
-      // The renderer returns an error when we destroy it, so skip them
-      if (this.destroyingFakeRenderer === false && err) {
-        logger.error('Cannot render new torrent in fake video element.', err)
-      }
-
-      // Load the future file at the correct time (in delay MS - 2 seconds)
-      fakeVideoElem.currentTime = this.player.currentTime() + (delay - 2000)
-    })
-  }
-
-  private destroyFakeRenderer () {
-    if (this.fakeRenderer) {
-      this.destroyingFakeRenderer = true
-
-      if (this.fakeRenderer.destroy) {
-        try {
-          this.fakeRenderer.destroy()
-        } catch (err) {
-          logger.info('Cannot destroy correctly fake renderer.', err)
-        }
-      }
-      this.fakeRenderer = undefined
-    }
-  }
-
-  private buildQualities () {
-    const resolutions: PeerTubeResolution[] = this.videoFiles.map(file => ({
-      id: file.resolution.id,
-      label: this.buildQualityLabel(file),
-      height: file.resolution.id,
-      selected: false,
-      selectCallback: () => this.changeQuality(file.resolution.id)
-    }))
-
-    resolutions.push({
-      id: -1,
-      label: this.player.localize('Auto'),
-      selected: true,
-      selectCallback: () => this.changeQuality(-1)
-    })
-
-    this.player.peertubeResolutions().add(resolutions)
-  }
-
-  private buildQualityLabel (file: VideoFile) {
-    let label = file.resolution.label
-
-    if (file.fps && file.fps >= 50) {
-      label += file.fps
-    }
-
-    return label
-  }
-
-  private selectAppropriateResolution (byEngine: boolean) {
-    const resolution = this.autoResolution
-      ? -1
-      : this.getCurrentResolutionId()
-
-    const autoResolutionChosen = this.autoResolution
-      ? this.getCurrentResolutionId()
-      : undefined
-
-    this.player.peertubeResolutions().select({ id: resolution, autoResolutionChosenId: autoResolutionChosen, byEngine })
-  }
-}
-
-videojs.registerPlugin('webtorrent', WebTorrentPlugin)
-export { WebTorrentPlugin }
diff --git a/client/src/assets/player/types/index.ts b/client/src/assets/player/types/index.ts
index b73e0b3cb..4bf49f65c 100644
--- a/client/src/assets/player/types/index.ts
+++ b/client/src/assets/player/types/index.ts
@@ -1,2 +1,2 @@
-export * from './manager-options'
+export * from './peertube-player-options'
 export * from './peertube-videojs-typings'
diff --git a/client/src/assets/player/types/manager-options.ts b/client/src/assets/player/types/peertube-player-options.ts
index a73341b4c..e1b8c7fab 100644
--- a/client/src/assets/player/types/manager-options.ts
+++ b/client/src/assets/player/types/peertube-player-options.ts
@@ -1,101 +1,117 @@
 import { PluginsManager } from '@root-helpers/plugins-manager'
 import { LiveVideoLatencyMode, VideoFile } from '@shared/models'
+import { PeerTubeDockPluginOptions } from '../shared/dock/peertube-dock-plugin'
 import { PlaylistPluginOptions, VideoJSCaption, VideoJSStoryboard } from './peertube-videojs-typings'
 
-export type PlayerMode = 'webtorrent' | 'p2p-media-loader'
+export type PlayerMode = 'web-video' | 'p2p-media-loader'
 
-export type WebtorrentOptions = {
-  videoFiles: VideoFile[]
-}
+export type PeerTubePlayerContructorOptions = {
+  playerElement: () => HTMLVideoElement
 
-export type P2PMediaLoaderOptions = {
-  playlistUrl: string
-  segmentsSha256Url: string
-  trackerAnnounce: string[]
-  redundancyBaseUrls: string[]
-  videoFiles: VideoFile[]
-}
+  controls: boolean
+  controlBar: boolean
 
-export interface CustomizationOptions {
-  startTime: number | string
-  stopTime: number | string
+  muted: boolean
+  loop: boolean
 
-  controls?: boolean
-  controlBar?: boolean
+  peertubeLink: () => boolean
 
-  muted?: boolean
-  loop?: boolean
-  subtitle?: string
-  resume?: string
+  playbackRate?: number | string
 
-  peertubeLink: boolean
+  enableHotkeys: boolean
+  inactivityTimeout: number
 
-  playbackRate?: number | string
-}
+  videoViewIntervalMs: number
 
-export interface CommonOptions extends CustomizationOptions {
-  playerElement: HTMLVideoElement
-  onPlayerElementChange: (element: HTMLVideoElement) => void
+  instanceName: string
 
-  autoplay: boolean
-  forceAutoplay: boolean
+  theaterButton: boolean
 
-  p2pEnabled: boolean
+  authorizationHeader: () => string
 
-  nextVideo?: () => void
-  hasNextVideo?: () => boolean
+  metricsUrl: string
+  serverUrl: string
 
-  previousVideo?: () => void
-  hasPreviousVideo?: () => boolean
+  errorNotifier: (message: string) => void
 
-  playlist?: PlaylistPluginOptions
+  // Current web browser language
+  language: string
 
-  videoDuration: number
-  enableHotkeys: boolean
-  inactivityTimeout: number
-  poster: string
+  pluginsManager: PluginsManager
+}
 
-  videoViewIntervalMs: number
+export type PeerTubePlayerLoadOptions = {
+  mode: PlayerMode
 
-  instanceName: string
+  startTime?: number | string
+  stopTime?: number | string
 
-  theaterButton: boolean
-  captions: boolean
+  autoplay: boolean
+  forceAutoplay: boolean
 
+  poster: string
+  subtitle?: string
   videoViewUrl: string
-  authorizationHeader?: () => string
-
-  metricsUrl: string
 
   embedUrl: string
   embedTitle: string
 
   isLive: boolean
+
   liveOptions?: {
     latencyMode: LiveVideoLatencyMode
   }
 
-  language?: string
-
   videoCaptions: VideoJSCaption[]
   storyboard: VideoJSStoryboard
 
   videoUUID: string
   videoShortUUID: string
 
-  serverUrl: string
+  duration: number
+
   requiresUserAuth: boolean
   videoFileToken: () => string
   requiresPassword: boolean
   videoPassword: () => string
 
-  errorNotifier: (message: string) => void
+  nextVideo: {
+    enabled: boolean
+    getVideoTitle: () => string
+    handler?: () => void
+    displayControlBarButton: boolean
+  }
+
+  previousVideo: {
+    enabled: boolean
+    handler?: () => void
+    displayControlBarButton: boolean
+  }
+
+  upnext?: {
+    isEnabled: () => boolean
+    isSuspended: (player: videojs.VideoJsPlayer) => boolean
+    timeout: number
+  }
+
+  dock?: PeerTubeDockPluginOptions
+
+  playlist?: PlaylistPluginOptions
+
+  p2pEnabled: boolean
+
+  hls?: HLSOptions
+  webVideo?: WebVideoOptions
 }
 
-export type PeertubePlayerManagerOptions = {
-  common: CommonOptions
-  webtorrent: WebtorrentOptions
-  p2pMediaLoader?: P2PMediaLoaderOptions
+export type WebVideoOptions = {
+  videoFiles: VideoFile[]
+}
 
-  pluginsManager: PluginsManager
+export type HLSOptions = {
+  playlistUrl: string
+  segmentsSha256Url: string
+  trackerAnnounce: string[]
+  redundancyBaseUrls: string[]
+  videoFiles: VideoFile[]
 }
diff --git a/client/src/assets/player/types/peertube-videojs-typings.ts b/client/src/assets/player/types/peertube-videojs-typings.ts
index 30d2b287f..f10fc03a8 100644
--- a/client/src/assets/player/types/peertube-videojs-typings.ts
+++ b/client/src/assets/player/types/peertube-videojs-typings.ts
@@ -2,8 +2,11 @@ import { HlsConfig, Level } from 'hls.js'
 import videojs from 'video.js'
 import { Engine } from '@peertube/p2p-media-loader-hlsjs'
 import { VideoFile, VideoPlaylist, VideoPlaylistElement } from '@shared/models'
-import { PeerTubeDockPluginOptions } from '../shared/dock/peertube-dock-plugin'
-import { HotkeysOptions } from '../shared/hotkeys/peertube-hotkeys-plugin'
+import { BezelsPlugin } from '../shared/bezels/bezels-plugin'
+import { StoryboardPlugin } from '../shared/control-bar/storyboard-plugin'
+import { PeerTubeDockPlugin, PeerTubeDockPluginOptions } from '../shared/dock/peertube-dock-plugin'
+import { HotkeysOptions, PeerTubeHotkeysPlugin } from '../shared/hotkeys/peertube-hotkeys-plugin'
+import { PeerTubeMobilePlugin } from '../shared/mobile/peertube-mobile-plugin'
 import { Html5Hlsjs } from '../shared/p2p-media-loader/hls-plugin'
 import { P2pMediaLoaderPlugin } from '../shared/p2p-media-loader/p2p-media-loader-plugin'
 import { RedundancyUrlManager } from '../shared/p2p-media-loader/redundancy-url-manager'
@@ -12,9 +15,10 @@ import { PlaylistPlugin } from '../shared/playlist/playlist-plugin'
 import { PeerTubeResolutionsPlugin } from '../shared/resolutions/peertube-resolutions-plugin'
 import { StatsCardOptions } from '../shared/stats/stats-card'
 import { StatsForNerdsPlugin } from '../shared/stats/stats-plugin'
-import { EndCardOptions } from '../shared/upnext/end-card'
-import { WebTorrentPlugin } from '../shared/webtorrent/webtorrent-plugin'
-import { PlayerMode } from './manager-options'
+import { UpNextPlugin } from '../shared/upnext/upnext-plugin'
+import { WebVideoPlugin } from '../shared/web-video/web-video-plugin'
+import { PlayerMode } from './peertube-player-options'
+import { SegmentValidator } from '../shared/p2p-media-loader/segment-validator'
 
 declare module 'video.js' {
 
@@ -31,35 +35,36 @@ declare module 'video.js' {
 
     handleTechSeeked_ (): void
 
+    textTracks (): TextTrackList & {
+      tracks_: (TextTrack & { id: string, label: string, src: string })[]
+    }
+
     // Plugins
 
     peertube (): PeerTubePlugin
 
-    webtorrent (): WebTorrentPlugin
+    webVideo (options?: any): WebVideoPlugin
 
-    p2pMediaLoader (): P2pMediaLoaderPlugin
+    p2pMediaLoader (options?: any): P2pMediaLoaderPlugin
+    hlsjs (options?: any): any
 
     peertubeResolutions (): PeerTubeResolutionsPlugin
 
-    contextmenuUI (options: any): any
+    contextmenuUI (options?: any): any
 
-    bezels (): void
-    peertubeMobile (): void
-    peerTubeHotkeysPlugin (options?: HotkeysOptions): void
+    bezels (): BezelsPlugin
+    peertubeMobile (): PeerTubeMobilePlugin
+    peerTubeHotkeysPlugin (options?: HotkeysOptions): PeerTubeHotkeysPlugin
 
     stats (options?: StatsCardOptions): StatsForNerdsPlugin
 
-    storyboard (options: StoryboardOptions): void
-
-    textTracks (): TextTrackList & {
-      tracks_: (TextTrack & { id: string, label: string, src: string })[]
-    }
+    storyboard (options?: StoryboardOptions): StoryboardPlugin
 
-    peertubeDock (options: PeerTubeDockPluginOptions): void
+    peertubeDock (options?: PeerTubeDockPluginOptions): PeerTubeDockPlugin
 
-    upnext (options: Partial<EndCardOptions>): void
+    upnext (options?: UpNextPluginOptions): UpNextPlugin
 
-    playlist (): PlaylistPlugin
+    playlist (options?: PlaylistPluginOptions): PlaylistPlugin
   }
 }
 
@@ -99,32 +104,28 @@ type VideoJSStoryboard = {
 }
 
 type PeerTubePluginOptions = {
-  mode: PlayerMode
+  hasAutoplay: () => videojs.Autoplay
 
-  autoplay: videojs.Autoplay
-  videoDuration: number
+  videoViewUrl: () => string
+  videoViewIntervalMs: number
 
-  videoViewUrl: string
   authorizationHeader?: () => string
 
-  subtitle?: string
+  videoDuration: () => number
 
-  videoCaptions: VideoJSCaption[]
-
-  startTime: number | string
-  stopTime: number | string
+  startTime: () => number | string
+  stopTime: () => number | string
 
-  isLive: boolean
-
-  videoUUID: string
-
-  videoViewIntervalMs: number
+  videoCaptions: () => VideoJSCaption[]
+  isLive: () => boolean
+  videoUUID: () => string
+  subtitle: () => string
 }
 
 type MetricsPluginOptions = {
-  mode: PlayerMode
-  metricsUrl: string
-  videoUUID: string
+  mode: () => PlayerMode
+  metricsUrl: () => string
+  videoUUID: () => string
 }
 
 type StoryboardOptions = {
@@ -144,37 +145,36 @@ type PlaylistPluginOptions = {
   onItemClicked: (element: VideoPlaylistElement) => void
 }
 
+type UpNextPluginOptions = {
+  timeout: number
+
+  next: () => void
+  getTitle: () => string
+  isDisplayed: () => boolean
+  isSuspended: () => boolean
+}
+
 type NextPreviousVideoButtonOptions = {
   type: 'next' | 'previous'
-  handler: () => void
+  handler?: () => void
+  isDisplayed: () => boolean
   isDisabled: () => boolean
 }
 
 type PeerTubeLinkButtonOptions = {
-  shortUUID: string
+  isDisplayed: () => boolean
+  shortUUID: () => string
   instanceName: string
 }
 
-type PeerTubeP2PInfoButtonOptions = {
-  p2pEnabled: boolean
+type TheaterButtonOptions = {
+  isDisplayed: () => boolean
 }
 
-type WebtorrentPluginOptions = {
-  playerElement: HTMLVideoElement
-
-  autoplay: videojs.Autoplay
-  videoDuration: number
-
+type WebVideoPluginOptions = {
   videoFiles: VideoFile[]
-
   startTime: number | string
-
-  playerRefusedP2P: boolean
-
-  requiresUserAuth: boolean
   videoFileToken: () => string
-
-  buildWebSeedUrls: (file: VideoFile) => string[]
 }
 
 type P2PMediaLoaderPluginOptions = {
@@ -182,9 +182,8 @@ type P2PMediaLoaderPluginOptions = {
   type: string
   src: string
 
-  startTime: number | string
-
   loader: P2PMediaLoader
+  segmentValidator: SegmentValidator
 
   requiresUserAuth: boolean
   videoFileToken: () => string
@@ -192,6 +191,8 @@ type P2PMediaLoaderPluginOptions = {
 
 export type P2PMediaLoader = {
   getEngine(): Engine
+
+  destroy: () => void
 }
 
 type VideoJSPluginOptions = {
@@ -200,7 +201,7 @@ type VideoJSPluginOptions = {
   peertube: PeerTubePluginOptions
   metrics: MetricsPluginOptions
 
-  webtorrent?: WebtorrentPluginOptions
+  webVideo?: WebVideoPluginOptions
 
   p2pMediaLoader?: P2PMediaLoaderPluginOptions
 }
@@ -227,14 +228,14 @@ type AutoResolutionUpdateData = {
 }
 
 type PlayerNetworkInfo = {
-  source: 'webtorrent' | 'p2p-media-loader'
+  source: 'web-video' | 'p2p-media-loader'
 
   http: {
-    downloadSpeed: number
+    downloadSpeed?: number
     downloaded: number
   }
 
-  p2p: {
+  p2p?: {
     downloadSpeed: number
     uploadSpeed: number
     downloaded: number
@@ -243,7 +244,7 @@ type PlayerNetworkInfo = {
   }
 
   // In bytes
-  bandwidthEstimate: number
+  bandwidthEstimate?: number
 }
 
 type PlaylistItemOptions = {
@@ -254,6 +255,7 @@ type PlaylistItemOptions = {
 
 export {
   PlayerNetworkInfo,
+  TheaterButtonOptions,
   VideoJSStoryboard,
   PlaylistItemOptions,
   NextPreviousVideoButtonOptions,
@@ -263,12 +265,12 @@ export {
   MetricsPluginOptions,
   VideoJSCaption,
   PeerTubePluginOptions,
-  WebtorrentPluginOptions,
+  WebVideoPluginOptions,
   P2PMediaLoaderPluginOptions,
   PeerTubeResolution,
   VideoJSPluginOptions,
+  UpNextPluginOptions,
   LoadedQualityData,
   StoryboardOptions,
-  PeerTubeLinkButtonOptions,
-  PeerTubeP2PInfoButtonOptions
+  PeerTubeLinkButtonOptions
 }
diff --git a/client/src/sass/player/control-bar.scss b/client/src/sass/player/control-bar.scss
index 02d5fa169..09a75e2fd 100644
--- a/client/src/sass/player/control-bar.scss
+++ b/client/src/sass/player/control-bar.scss
@@ -3,20 +3,6 @@
 @use '_mixins' as *;
 @use './_player-variables' as *;
 
-// Like the time tooltip
-.video-js .vjs-progress-holder .vjs-storyboard-sprite-placeholder {
-  display: none;
-}
-
-.video-js .vjs-progress-control:hover .vjs-storyboard-sprite-placeholder,
-.video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-storyboard-sprite-placeholder {
-  display: block;
-
-  // Ensure that we maintain a font-size of ~10px.
-  font-size: 0.6em;
-  visibility: visible;
-}
-
 .video-js.vjs-peertube-skin .vjs-control-bar {
   z-index: 100;
 
@@ -26,11 +12,8 @@
   text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
   transition: visibility 0.3s, opacity 0.3s !important;
 
-  &.control-bar-hidden {
-    display: none !important;
-  }
-
-  > button:first-child {
+  > button:not(.vjs-hidden):first-child,
+  > button.vjs-hidden + button:not(.vjs-hidden) {
     @include margin-left($first-control-bar-element-margin-left);
   }
 
@@ -167,7 +150,7 @@
     }
   }
 
-  .vjs-live-control {
+  .vjs-pt-live-control {
     padding: 5px 7px;
     border-radius: 3px;
     height: fit-content;
@@ -245,6 +228,7 @@
   .vjs-next-video,
   .vjs-previous-video {
     width: $control-bar-button-width - 4px;
+    cursor: pointer;
 
     &.vjs-disabled {
       cursor: default;
diff --git a/client/src/sass/player/index.scss b/client/src/sass/player/index.scss
index 5d0307d95..4bfd67a26 100644
--- a/client/src/sass/player/index.scss
+++ b/client/src/sass/player/index.scss
@@ -10,3 +10,4 @@
 @use './playlist';
 @use './stats';
 @use './offline-notification';
+@use './storyboard.scss';
diff --git a/client/src/sass/player/mobile.scss b/client/src/sass/player/mobile.scss
index d150c54ee..b0019d2c9 100644
--- a/client/src/sass/player/mobile.scss
+++ b/client/src/sass/player/mobile.scss
@@ -170,7 +170,8 @@
     }
   }
 
-  &.vjs-scrubbing {
+  &.vjs-scrubbing,
+  &.vjs-mobile-sliding {
     .vjs-mobile-buttons-overlay {
       display: none;
     }
diff --git a/client/src/sass/player/peertube-skin.scss b/client/src/sass/player/peertube-skin.scss
index 4df8dbaf0..572ae7050 100644
--- a/client/src/sass/player/peertube-skin.scss
+++ b/client/src/sass/player/peertube-skin.scss
@@ -84,7 +84,9 @@ body {
   }
 
   // Do not display poster when video is starting
-  &.vjs-has-autoplay:not(.vjs-has-started) {
+  // Or if we change resolution manually
+  &.vjs-has-autoplay:not(.vjs-has-started),
+  &.vjs-updating-resolution {
     .vjs-poster {
       opacity: 0;
       visibility: hidden;
diff --git a/client/src/sass/player/settings-menu.scss b/client/src/sass/player/settings-menu.scss
index d2346c126..369c827f7 100644
--- a/client/src/sass/player/settings-menu.scss
+++ b/client/src/sass/player/settings-menu.scss
@@ -75,6 +75,7 @@ $setting-transition-easing: ease-out;
       > .vjs-menu {
         flex: 1;
         min-width: 200px;
+        padding: 5px 0;
       }
 
       > .vjs-menu,
@@ -90,14 +91,6 @@ $setting-transition-easing: ease-out;
             background-color: rgba(255, 255, 255, 0.2);
           }
 
-          &:first-child {
-            margin-top: 5px;
-          }
-
-          &:last-child {
-            margin-bottom: 5px;
-          }
-
           &.disabled {
             opacity: 0.5;
             cursor: default !important;
diff --git a/client/src/sass/player/storyboard.scss b/client/src/sass/player/storyboard.scss
new file mode 100644
index 000000000..c80d1b59d
--- /dev/null
+++ b/client/src/sass/player/storyboard.scss
@@ -0,0 +1,26 @@
+@use 'sass:math';
+@use '_variables' as *;
+@use '_mixins' as *;
+@use './_player-variables' as *;
+
+// Like the time tooltip
+.video-js .vjs-progress-holder .vjs-storyboard-sprite-placeholder {
+  display: none;
+}
+
+.video-js .vjs-progress-control:hover .vjs-storyboard-sprite-placeholder,
+.video-js .vjs-progress-control:hover .vjs-progress-holder:focus .vjs-storyboard-sprite-placeholder {
+  display: block;
+
+  // Ensure that we maintain a font-size of ~10px.
+  font-size: 0.6em;
+  visibility: visible;
+}
+
+.video-js.vjs-settings-dialog-opened {
+  .vjs-storyboard-sprite-placeholder,
+  .vjs-time-tooltip,
+  .vjs-mouse-display {
+    display: none !important;
+  }
+}
diff --git a/client/src/shims/http.ts b/client/src/shims/http.ts
deleted file mode 100644
index 1b1767aab..000000000
--- a/client/src/shims/http.ts
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('stream-http')
diff --git a/client/src/shims/https.ts b/client/src/shims/https.ts
deleted file mode 100644
index f5ef70430..000000000
--- a/client/src/shims/https.ts
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('https-browserify')
diff --git a/client/src/shims/stream.ts b/client/src/shims/stream.ts
deleted file mode 100644
index 977fd05a0..000000000
--- a/client/src/shims/stream.ts
+++ /dev/null
@@ -1 +0,0 @@
-module.exports = require('stream-browserify')
diff --git a/client/src/standalone/player/.npmignore b/client/src/standalone/embed-player-api/.npmignore
index 870b6315b..870b6315b 100644
--- a/client/src/standalone/player/.npmignore
+++ b/client/src/standalone/embed-player-api/.npmignore
diff --git a/client/src/standalone/player/README.md b/client/src/standalone/embed-player-api/README.md
index 7b47e8f02..7b47e8f02 100644
--- a/client/src/standalone/player/README.md
+++ b/client/src/standalone/embed-player-api/README.md
diff --git a/client/src/standalone/player/definitions.ts b/client/src/standalone/embed-player-api/definitions.ts
index 495f1a98c..495f1a98c 100644
--- a/client/src/standalone/player/definitions.ts
+++ b/client/src/standalone/embed-player-api/definitions.ts
diff --git a/client/src/standalone/player/events.ts b/client/src/standalone/embed-player-api/events.ts
index 77d21c78c..77d21c78c 100644
--- a/client/src/standalone/player/events.ts
+++ b/client/src/standalone/embed-player-api/events.ts
diff --git a/client/src/standalone/player/package.json b/client/src/standalone/embed-player-api/package.json
index b549fbf52..b549fbf52 100644
--- a/client/src/standalone/player/package.json
+++ b/client/src/standalone/embed-player-api/package.json
diff --git a/client/src/standalone/player/player.ts b/client/src/standalone/embed-player-api/player.ts
index 75487258b..75487258b 100644
--- a/client/src/standalone/player/player.ts
+++ b/client/src/standalone/embed-player-api/player.ts
diff --git a/client/src/standalone/player/tsconfig.json b/client/src/standalone/embed-player-api/tsconfig.json
index eecc63dfb..eecc63dfb 100644
--- a/client/src/standalone/player/tsconfig.json
+++ b/client/src/standalone/embed-player-api/tsconfig.json
diff --git a/client/src/standalone/player/webpack.config.js b/client/src/standalone/embed-player-api/webpack.config.js
index 48d350edf..48d350edf 100644
--- a/client/src/standalone/player/webpack.config.js
+++ b/client/src/standalone/embed-player-api/webpack.config.js
diff --git a/client/src/standalone/videos/embed-api.ts b/client/src/standalone/videos/embed-api.ts
index a99f1edae..6227c378e 100644
--- a/client/src/standalone/videos/embed-api.ts
+++ b/client/src/standalone/videos/embed-api.ts
@@ -1,7 +1,7 @@
 import './embed.scss'
 import * as Channel from 'jschannel'
 import { logger } from '../../root-helpers'
-import { PeerTubeResolution, PeerTubeTextTrack } from '../player/definitions'
+import { PeerTubeResolution, PeerTubeTextTrack } from '../embed-player-api/definitions'
 import { PeerTubeEmbed } from './embed'
 
 /**
@@ -72,15 +72,12 @@ export class PeerTubeEmbedApi {
   private setResolution (resolutionId: number) {
     logger.info(`Set resolution ${resolutionId}`)
 
-    if (this.isWebtorrent()) {
-      if (resolutionId === -1 && this.embed.player.webtorrent().isAutoResolutionPossible() === false) return
-
-      this.embed.player.webtorrent().changeQuality(resolutionId)
-
+    if (this.isWebVideo() && resolutionId === -1) {
+      logger.error('Auto resolution cannot be set in web video player mode')
       return
     }
 
-    this.embed.player.p2pMediaLoader().getHLSJS().currentLevel = resolutionId
+    this.embed.player.peertubeResolutions().select({ id: resolutionId, fireCallback: true })
   }
 
   private getCaptions (): PeerTubeTextTrack[] {
@@ -152,8 +149,8 @@ export class PeerTubeEmbedApi {
     // ---------------------------------------------------------------------------
 
     // PeerTube specific capabilities
-    this.embed.player.peertubeResolutions().on('resolutionsAdded', () => this.loadResolutions())
-    this.embed.player.peertubeResolutions().on('resolutionChanged', () => this.loadResolutions())
+    this.embed.player.peertubeResolutions().on('resolutions-added', () => this.loadResolutions())
+    this.embed.player.peertubeResolutions().on('resolutions-changed', () => this.loadResolutions())
 
     this.loadResolutions()
 
@@ -193,7 +190,7 @@ export class PeerTubeEmbedApi {
     })
   }
 
-  private isWebtorrent () {
-    return !!this.embed.player.webtorrent
+  private isWebVideo () {
+    return !!this.embed.player.webVideo
   }
 }
diff --git a/client/src/standalone/videos/embed.html b/client/src/standalone/videos/embed.html
index a74bb4cee..e2dc02b60 100644
--- a/client/src/standalone/videos/embed.html
+++ b/client/src/standalone/videos/embed.html
@@ -44,11 +44,11 @@
     <div id="video-password-block">
       <!-- eslint-disable-next-line @angular-eslint/template/elements-content -->
       <h1 id="video-password-title"></h1>
-      
+
       <div id="video-password-content"></div>
-      
+
       <form id="video-password-form">
-        <input type="password" id="video-password-input" name="video-password" required>
+        <input type="password" id="video-password-input" name="video-password" autocomplete="user-password" required>
         <button type="submit" id="video-password-submit"> </button>
       </form>
 
@@ -60,8 +60,6 @@
 
     <div id="video-wrapper"></div>
 
-    <div id="placeholder-preview"></div>
-
     <script type="text/javascript">
       // Can be called in embed.ts
       window.displayIncompatibleBrowser = function () {
diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts
index 6e37ce193..78b812ffd 100644
--- a/client/src/standalone/videos/embed.ts
+++ b/client/src/standalone/videos/embed.ts
@@ -3,7 +3,6 @@ import '../../assets/player/shared/dock/peertube-dock-component'
 import '../../assets/player/shared/dock/peertube-dock-plugin'
 import { PeerTubeServerError } from 'src/types'
 import videojs from 'video.js'
-import { peertubeTranslate } from '../../../../shared/core-utils/i18n'
 import {
   HTMLServerConfig,
   ResultList,
@@ -13,7 +12,7 @@ import {
   VideoPlaylistElement,
   VideoState
 } from '../../../../shared/models'
-import { PeertubePlayerManager } from '../../assets/player'
+import { PeerTubePlayer } from '../../assets/player/peertube-player'
 import { TranslationsManager } from '../../assets/player/translations-manager'
 import { getParamString, logger, videoRequiresFileToken } from '../../root-helpers'
 import { PeerTubeEmbedApi } from './embed-api'
@@ -21,7 +20,7 @@ import {
   AuthHTTP,
   LiveManager,
   PeerTubePlugin,
-  PlayerManagerOptions,
+  PlayerOptionsBuilder,
   PlaylistFetcher,
   PlaylistTracker,
   Translations,
@@ -36,17 +35,23 @@ export class PeerTubeEmbed {
   config: HTMLServerConfig
 
   private translationsPromise: Promise<{ [id: string]: string }>
-  private PeertubePlayerManagerModulePromise: Promise<any>
+  private PeerTubePlayerManagerModulePromise: Promise<any>
 
   private readonly http: AuthHTTP
   private readonly videoFetcher: VideoFetcher
   private readonly playlistFetcher: PlaylistFetcher
   private readonly peertubePlugin: PeerTubePlugin
   private readonly playerHTML: PlayerHTML
-  private readonly playerManagerOptions: PlayerManagerOptions
+  private readonly playerOptionsBuilder: PlayerOptionsBuilder
   private readonly liveManager: LiveManager
 
+  private peertubePlayer: PeerTubePlayer
+
   private playlistTracker: PlaylistTracker
+
+  private alreadyInitialized = false
+  private alreadyPlayed = false
+
   private videoPassword: string
   private requiresPassword: boolean
 
@@ -59,7 +64,7 @@ export class PeerTubeEmbed {
     this.playlistFetcher = new PlaylistFetcher(this.http)
     this.peertubePlugin = new PeerTubePlugin(this.http)
     this.playerHTML = new PlayerHTML(videoWrapperId)
-    this.playerManagerOptions = new PlayerManagerOptions(this.playerHTML, this.videoFetcher, this.peertubePlugin)
+    this.playerOptionsBuilder = new PlayerOptionsBuilder(this.playerHTML, this.videoFetcher, this.peertubePlugin)
     this.liveManager = new LiveManager(this.playerHTML)
     this.requiresPassword = false
 
@@ -81,14 +86,14 @@ export class PeerTubeEmbed {
   }
 
   getScope () {
-    return this.playerManagerOptions.getScope()
+    return this.playerOptionsBuilder.getScope()
   }
 
   // ---------------------------------------------------------------------------
 
   async init () {
     this.translationsPromise = TranslationsManager.getServerTranslations(window.location.origin, navigator.language)
-    this.PeertubePlayerManagerModulePromise = import('../../assets/player/peertube-player-manager')
+    this.PeerTubePlayerManagerModulePromise = import('../../assets/player/peertube-player')
 
     // Issue when we parsed config from HTML, fallback to API
     if (!this.config) {
@@ -102,7 +107,7 @@ export class PeerTubeEmbed {
 
     if (!videoId) return
 
-    return this.loadVideoAndBuildPlayer({ uuid: videoId, autoplayFromPreviousVideo: false, forceAutoplay: false })
+    return this.loadVideoAndBuildPlayer({ uuid: videoId, forceAutoplay: false })
   }
 
   private async initPlaylist () {
@@ -137,7 +142,7 @@ export class PeerTubeEmbed {
   }
 
   private initializeApi () {
-    if (this.playerManagerOptions.hasAPIEnabled()) {
+    if (this.playerOptionsBuilder.hasAPIEnabled()) {
       if (this.api) {
         this.api.reInit()
         return
@@ -159,7 +164,7 @@ export class PeerTubeEmbed {
 
     this.playlistTracker.setCurrentElement(next)
 
-    return this.loadVideoAndBuildPlayer({ uuid: next.video.uuid, autoplayFromPreviousVideo: true, forceAutoplay: false })
+    return this.loadVideoAndBuildPlayer({ uuid: next.video.uuid, forceAutoplay: false })
   }
 
   async playPreviousPlaylistVideo () {
@@ -171,7 +176,7 @@ export class PeerTubeEmbed {
 
     this.playlistTracker.setCurrentElement(previous)
 
-    await this.loadVideoAndBuildPlayer({ uuid: previous.video.uuid, autoplayFromPreviousVideo: true, forceAutoplay: false })
+    await this.loadVideoAndBuildPlayer({ uuid: previous.video.uuid, forceAutoplay: false })
   }
 
   getCurrentPlaylistPosition () {
@@ -182,10 +187,9 @@ export class PeerTubeEmbed {
 
   private async loadVideoAndBuildPlayer (options: {
     uuid: string
-    autoplayFromPreviousVideo: boolean
     forceAutoplay: boolean
   }) {
-    const { uuid, autoplayFromPreviousVideo, forceAutoplay } = options
+    const { uuid, forceAutoplay } = options
 
     try {
       const {
@@ -194,7 +198,7 @@ export class PeerTubeEmbed {
         storyboardsPromise
       } = await this.videoFetcher.loadVideo({ videoId: uuid, videoPassword: this.videoPassword })
 
-      return this.buildVideoPlayer({ videoResponse, captionsPromise, storyboardsPromise, autoplayFromPreviousVideo, forceAutoplay })
+      return this.buildVideoPlayer({ videoResponse, captionsPromise, storyboardsPromise, forceAutoplay })
     } catch (err) {
 
       if (await this.handlePasswordError(err)) this.loadVideoAndBuildPlayer({ ...options })
@@ -206,20 +210,14 @@ export class PeerTubeEmbed {
     videoResponse: Response
     storyboardsPromise: Promise<Response>
     captionsPromise: Promise<Response>
-    autoplayFromPreviousVideo: boolean
     forceAutoplay: boolean
   }) {
-    const { videoResponse, captionsPromise, storyboardsPromise, autoplayFromPreviousVideo, forceAutoplay } = options
-
-    this.resetPlayerElement()
+    const { videoResponse, captionsPromise, storyboardsPromise, forceAutoplay } = options
 
     const videoInfoPromise = videoResponse.json()
       .then(async (videoInfo: VideoDetails) => {
-        this.playerManagerOptions.loadParams(this.config, videoInfo)
+        this.playerOptionsBuilder.loadParams(this.config, videoInfo)
 
-        if (!autoplayFromPreviousVideo && !this.playerManagerOptions.hasAutoplay()) {
-          this.playerHTML.buildPlaceholder(videoInfo)
-        }
         const live = videoInfo.isLive
           ? await this.videoFetcher.loadLive(videoInfo)
           : undefined
@@ -235,89 +233,78 @@ export class PeerTubeEmbed {
       { video, live, videoFileToken },
       translations,
       captionsResponse,
-      storyboardsResponse,
-      PeertubePlayerManagerModule
+      storyboardsResponse
     ] = await Promise.all([
       videoInfoPromise,
       this.translationsPromise,
       captionsPromise,
       storyboardsPromise,
-      this.PeertubePlayerManagerModulePromise
+      this.buildPlayerIfNeeded()
     ])
 
-    await this.peertubePlugin.loadPlugins(this.config, translations)
+    // If already played, we are in a playlist so we don't want to display the poster between videos
+    if (!this.alreadyPlayed) {
+      this.peertubePlayer.setPoster(window.location.origin + video.previewPath)
+    }
 
-    const PlayerManager: typeof PeertubePlayerManager = PeertubePlayerManagerModule.PeertubePlayerManager
+    const playlist = this.playlistTracker
+      ? {
+        onVideoUpdate: (uuid: string) => this.loadVideoAndBuildPlayer({ uuid, forceAutoplay: false }),
 
-    const playerOptions = await this.playerManagerOptions.getPlayerOptions({
+        playlistTracker: this.playlistTracker,
+        playNext: () => this.playNextPlaylistVideo(),
+        playPrevious: () => this.playPreviousPlaylistVideo()
+      }
+      : undefined
+
+    const loadOptions = await this.playerOptionsBuilder.getPlayerLoadOptions({
       video,
       captionsResponse,
-      autoplayFromPreviousVideo,
       translations,
-      serverConfig: this.config,
 
       storyboardsResponse,
 
-      authorizationHeader: () => this.http.getHeaderTokenValue(),
       videoFileToken: () => videoFileToken,
       videoPassword: () => this.videoPassword,
       requiresPassword: this.requiresPassword,
 
-      onVideoUpdate: (uuid: string) => this.loadVideoAndBuildPlayer({ uuid, autoplayFromPreviousVideo: true, forceAutoplay: false }),
-
-      playlistTracker: this.playlistTracker,
-      playNextPlaylistVideo: () => this.playNextPlaylistVideo(),
-      playPreviousPlaylistVideo: () => this.playPreviousPlaylistVideo(),
+      playlist,
 
       live,
-      forceAutoplay
+      forceAutoplay,
+      alreadyPlayed: this.alreadyPlayed
     })
+    await this.peertubePlayer.load(loadOptions)
 
-    this.player = await PlayerManager.initialize(this.playerManagerOptions.getMode(), playerOptions, (player: videojs.Player) => {
-      this.player = player
-    })
+    if (!this.alreadyInitialized) {
+      this.player = this.peertubePlayer.getPlayer();
 
-    this.player.on('customError', (event: any, data: any) => {
-      const message = data?.err?.message || ''
-      if (!message.includes('from xs param')) return
+      (window as any)['videojsPlayer'] = this.player
 
-      this.player.dispose()
-      this.playerHTML.removePlayerElement()
-      this.playerHTML.displayError('This video is not available because the remote instance is not responding.', translations)
-    });
+      this.buildCSS()
+      this.initializeApi()
+    }
 
-    (window as any)['videojsPlayer'] = this.player
+    this.alreadyInitialized = true
 
-    this.buildCSS()
-    this.buildPlayerDock(video)
-    this.initializeApi()
+    this.player.one('play', () => {
+      this.alreadyPlayed = true
+    })
 
-    this.playerHTML.removePlaceholder()
     if (this.videoPassword) this.playerHTML.removeVideoPasswordBlock()
 
-    if (this.isPlaylistEmbed()) {
-      await this.buildPlayerPlaylistUpnext()
-
-      this.player.playlist().updateSelected()
-
-      this.player.on('stopped', () => {
-        this.playNextPlaylistVideo()
-      })
-    }
-
     if (video.isLive) {
       this.liveManager.listenForChanges({
         video,
         onPublishedVideo: () => {
           this.liveManager.stopListeningForChanges(video)
-          this.loadVideoAndBuildPlayer({ uuid: video.uuid, autoplayFromPreviousVideo: false, forceAutoplay: true })
+          this.loadVideoAndBuildPlayer({ uuid: video.uuid, forceAutoplay: true })
         }
       })
 
       if (video.state.id === VideoState.WAITING_FOR_LIVE || video.state.id === VideoState.LIVE_ENDED) {
         this.liveManager.displayInfo({ state: video.state.id, translations })
-
-        this.disablePlayer()
+        this.peertubePlayer.disable()
       } else {
         this.correctlyHandleLiveEnding(translations)
       }
@@ -326,74 +313,15 @@ export class PeerTubeEmbed {
     this.peertubePlugin.getPluginsManager().runHook('action:embed.player.loaded', undefined, { player: this.player, videojs, video })
   }
 
-  private resetPlayerElement () {
-    if (this.player) {
-      this.player.dispose()
-      this.player = undefined
-    }
-
-    const playerElement = document.createElement('video')
-    playerElement.className = 'video-js vjs-peertube-skin'
-    playerElement.setAttribute('playsinline', 'true')
-
-    this.playerHTML.setPlayerElement(playerElement)
-    this.playerHTML.addPlayerElementToDOM()
-  }
-
-  private async buildPlayerPlaylistUpnext () {
-    const translations = await this.translationsPromise
-
-    this.player.upnext({
-      timeout: 10000, // 10s
-      headText: peertubeTranslate('Up Next', translations),
-      cancelText: peertubeTranslate('Cancel', translations),
-      suspendedText: peertubeTranslate('Autoplay is suspended', translations),
-      getTitle: () => this.playlistTracker.nextVideoTitle(),
-      next: () => this.playNextPlaylistVideo(),
-      condition: () => !!this.playlistTracker.getNextPlaylistElement(),
-      suspended: () => false
-    })
-  }
-
-  private buildPlayerDock (videoInfo: VideoDetails) {
-    if (!this.playerManagerOptions.hasControls()) return
-
-    // On webtorrent fallback, player may have been disposed
-    if (!this.player.player_) return
-
-    const title = this.playerManagerOptions.hasTitle()
-      ? videoInfo.name
-      : undefined
-
-    const description = this.playerManagerOptions.hasWarningTitle() && this.playerManagerOptions.hasP2PEnabled()
-      ? '<span class="text">' + peertubeTranslate('Watching this video may reveal your IP address to others.') + '</span>'
-      : undefined
-
-    if (!title && !description) return
-
-    const availableAvatars = videoInfo.channel.avatars.filter(a => a.width < 50)
-    const avatar = availableAvatars.length !== 0
-      ? availableAvatars[0]
-      : undefined
-
-    this.player.peertubeDock({
-      title,
-      description,
-      avatarUrl: title && avatar
-        ? avatar.path
-        : undefined
-    })
-  }
-
   private buildCSS () {
     const body = document.getElementById('custom-css')
 
-    if (this.playerManagerOptions.hasBigPlayBackgroundColor()) {
-      body.style.setProperty('--embedBigPlayBackgroundColor', this.playerManagerOptions.getBigPlayBackgroundColor())
+    if (this.playerOptionsBuilder.hasBigPlayBackgroundColor()) {
+      body.style.setProperty('--embedBigPlayBackgroundColor', this.playerOptionsBuilder.getBigPlayBackgroundColor())
     }
 
-    if (this.playerManagerOptions.hasForegroundColor()) {
-      body.style.setProperty('--embedForegroundColor', this.playerManagerOptions.getForegroundColor())
+    if (this.playerOptionsBuilder.hasForegroundColor()) {
+      body.style.setProperty('--embedForegroundColor', this.playerOptionsBuilder.getForegroundColor())
     }
   }
 
@@ -415,23 +343,10 @@ export class PeerTubeEmbed {
       // Display the live ended information
       this.liveManager.displayInfo({ state: VideoState.LIVE_ENDED, translations })
 
-      this.disablePlayer()
+      this.peertubePlayer.disable()
     })
   }
 
-  private disablePlayer () {
-    if (this.player.isFullscreen()) {
-      this.player.exitFullscreen()
-    }
-
-    // Disable player
-    this.player.hasStarted(false)
-    this.player.removeClass('vjs-has-autoplay')
-    this.player.bigPlayButton.hide();
-
-    (this.player.el() as HTMLElement).style.pointerEvents = 'none'
-  }
-
   private async handlePasswordError (err: PeerTubeServerError) {
     let incorrectPassword: boolean = null
     if (err.serverCode === ServerErrorCode.VIDEO_REQUIRES_PASSWORD) incorrectPassword = false
@@ -447,6 +362,33 @@ export class PeerTubeEmbed {
     return true
   }
 
+  private async buildPlayerIfNeeded () {
+    if (this.peertubePlayer) {
+      this.peertubePlayer.enable()
+
+      return
+    }
+
+    const playerElement = document.createElement('video')
+    playerElement.className = 'video-js vjs-peertube-skin'
+    playerElement.setAttribute('playsinline', 'true')
+
+    this.playerHTML.setPlayerElement(playerElement)
+    this.playerHTML.addPlayerElementToDOM()
+
+    const [ { PeerTubePlayer } ] = await Promise.all([
+      this.PeerTubePlayerManagerModulePromise,
+      this.peertubePlugin.loadPlugins(this.config, await this.translationsPromise)
+    ])
+
+    const constructorOptions = this.playerOptionsBuilder.getPlayerConstructorOptions({
+      serverConfig: this.config,
+      authorizationHeader: () => this.http.getHeaderTokenValue()
+    })
+    this.peertubePlayer = new PeerTubePlayer(constructorOptions)
+
+    this.player = this.peertubePlayer.getPlayer()
+  }
 }
 
 PeerTubeEmbed.main()
diff --git a/client/src/standalone/videos/shared/index.ts b/client/src/standalone/videos/shared/index.ts
index 928b8e270..dcc522ac6 100644
--- a/client/src/standalone/videos/shared/index.ts
+++ b/client/src/standalone/videos/shared/index.ts
@@ -2,7 +2,7 @@ export * from './auth-http'
 export * from './peertube-plugin'
 export * from './live-manager'
 export * from './player-html'
-export * from './player-manager-options'
+export * from './player-options-builder'
 export * from './playlist-fetcher'
 export * from './playlist-tracker'
 export * from './translations'
diff --git a/client/src/standalone/videos/shared/player-html.ts b/client/src/standalone/videos/shared/player-html.ts
index a0846d9d7..0defa0d70 100644
--- a/client/src/standalone/videos/shared/player-html.ts
+++ b/client/src/standalone/videos/shared/player-html.ts
@@ -1,5 +1,4 @@
 import { peertubeTranslate } from '../../../../../shared/core-utils/i18n'
-import { VideoDetails } from '../../../../../shared/models'
 import { logger } from '../../../root-helpers'
 import { Translations } from './translations'
 
@@ -59,7 +58,6 @@ export class PlayerHTML {
     const { incorrectPassword, translations } = options
     return new Promise((resolve) => {
 
-      this.removePlaceholder()
       this.wrapperElement.style.display = 'none'
 
       const translatedTitle = peertubeTranslate('This video is password protected', translations)
@@ -107,19 +105,6 @@ export class PlayerHTML {
     this.wrapperElement.style.display = 'block'
   }
 
-  buildPlaceholder (video: VideoDetails) {
-    const placeholder = this.getPlaceholderElement()
-
-    const url = window.location.origin + video.previewPath
-    placeholder.style.backgroundImage = `url("${url}")`
-    placeholder.style.display = 'block'
-  }
-
-  removePlaceholder () {
-    const placeholder = this.getPlaceholderElement()
-    placeholder.style.display = 'none'
-  }
-
   displayInformation (text: string, translations: Translations) {
     if (this.informationElement) this.removeInformation()
 
@@ -137,10 +122,6 @@ export class PlayerHTML {
     this.informationElement = undefined
   }
 
-  private getPlaceholderElement () {
-    return document.getElementById('placeholder-preview')
-  }
-
   private removeElement (element: HTMLElement) {
     element.parentElement.removeChild(element)
   }
diff --git a/client/src/standalone/videos/shared/player-manager-options.ts b/client/src/standalone/videos/shared/player-options-builder.ts
index 3c7521bc2..8a4e32444 100644
--- a/client/src/standalone/videos/shared/player-manager-options.ts
+++ b/client/src/standalone/videos/shared/player-options-builder.ts
@@ -10,7 +10,7 @@ import {
   VideoState,
   VideoStreamingPlaylistType
 } from '../../../../../shared/models'
-import { P2PMediaLoaderOptions, PeertubePlayerManagerOptions, PlayerMode, VideoJSCaption } from '../../../assets/player'
+import { HLSOptions, PeerTubePlayerContructorOptions, PeerTubePlayerLoadOptions, PlayerMode, VideoJSCaption } from '../../../assets/player'
 import {
   getBoolOrDefault,
   getParamString,
@@ -27,7 +27,7 @@ import { PlaylistTracker } from './playlist-tracker'
 import { Translations } from './translations'
 import { VideoFetcher } from './video-fetcher'
 
-export class PlayerManagerOptions {
+export class PlayerOptionsBuilder {
   private autoplay: boolean
 
   private controls: boolean
@@ -141,10 +141,10 @@ export class PlayerManagerOptions {
 
       if (modeParam) {
         if (modeParam === 'p2p-media-loader') this.mode = 'p2p-media-loader'
-        else this.mode = 'webtorrent'
+        else this.mode = 'web-video'
       } else {
         if (Array.isArray(video.streamingPlaylists) && video.streamingPlaylists.length !== 0) this.mode = 'p2p-media-loader'
-        else this.mode = 'webtorrent'
+        else this.mode = 'web-video'
       }
     } catch (err) {
       logger.error('Cannot get params from URL.', err)
@@ -153,7 +153,47 @@ export class PlayerManagerOptions {
 
   // ---------------------------------------------------------------------------
 
-  async getPlayerOptions (options: {
+  getPlayerConstructorOptions (options: {
+    serverConfig: HTMLServerConfig
+    authorizationHeader: () => string
+  }): PeerTubePlayerContructorOptions {
+    const { serverConfig, authorizationHeader } = options
+
+    return {
+      controls: this.controls,
+      controlBar: this.controlBar,
+
+      muted: this.muted,
+      loop: this.loop,
+
+      playbackRate: this.playbackRate,
+
+      inactivityTimeout: 2500,
+      videoViewIntervalMs: 5000,
+      metricsUrl: window.location.origin + '/api/v1/metrics/playback',
+
+      authorizationHeader,
+
+      playerElement: () => this.playerHTML.getPlayerElement(),
+      enableHotkeys: true,
+
+      peertubeLink: () => this.peertubeLink,
+      instanceName: serverConfig.instance.name,
+
+      theaterButton: false,
+
+      serverUrl: window.location.origin,
+      language: navigator.language,
+
+      pluginsManager: this.peertubePlugin.getPluginsManager(),
+
+      errorNotifier: () => {
+        // Empty, we don't have a notifier in the embed
+      }
+    }
+  }
+
+  async getPlayerLoadOptions (options: {
     video: VideoDetails
     captionsResponse: Response
 
@@ -161,39 +201,35 @@ export class PlayerManagerOptions {
 
     live?: LiveVideo
 
+    alreadyPlayed: boolean
     forceAutoplay: boolean
 
-    authorizationHeader: () => string
     videoFileToken: () => string
 
     videoPassword: () => string
     requiresPassword: boolean
 
-    serverConfig: HTMLServerConfig
-
-    autoplayFromPreviousVideo: boolean
-
     translations: Translations
 
-    playlistTracker?: PlaylistTracker
-    playNextPlaylistVideo?: () => any
-    playPreviousPlaylistVideo?: () => any
-    onVideoUpdate?: (uuid: string) => any
-  }) {
+    playlist?: {
+      playlistTracker: PlaylistTracker
+      playNext: () => any
+      playPrevious: () => any
+      onVideoUpdate: (uuid: string) => any
+    }
+  }): Promise<PeerTubePlayerLoadOptions> {
     const {
       video,
       captionsResponse,
-      autoplayFromPreviousVideo,
       videoFileToken,
       videoPassword,
       requiresPassword,
       translations,
+      alreadyPlayed,
       forceAutoplay,
-      playlistTracker,
+      playlist,
       live,
-      storyboardsResponse,
-      authorizationHeader,
-      serverConfig
+      storyboardsResponse
     } = options
 
     const [ videoCaptions, storyboard ] = await Promise.all([
@@ -201,88 +237,56 @@ export class PlayerManagerOptions {
       this.buildStoryboard(storyboardsResponse)
     ])
 
-    const playerOptions: PeertubePlayerManagerOptions = {
-      common: {
-        // Autoplay in playlist mode
-        autoplay: autoplayFromPreviousVideo ? true : this.autoplay,
-        forceAutoplay,
-
-        controls: this.controls,
-        controlBar: this.controlBar,
-
-        muted: this.muted,
-        loop: this.loop,
-
-        p2pEnabled: this.p2pEnabled,
-
-        captions: videoCaptions.length !== 0,
-        subtitle: this.subtitle,
+    return {
+      mode: this.mode,
 
-        storyboard,
+      autoplay: forceAutoplay || alreadyPlayed || this.autoplay,
+      forceAutoplay,
 
-        startTime: playlistTracker
-          ? playlistTracker.getCurrentElement().startTimestamp
-          : this.startTime,
-        stopTime: playlistTracker
-          ? playlistTracker.getCurrentElement().stopTimestamp
-          : this.stopTime,
+      p2pEnabled: this.p2pEnabled,
 
-        playbackRate: this.playbackRate,
+      subtitle: this.subtitle,
 
-        videoCaptions,
-        inactivityTimeout: 2500,
-        videoViewUrl: this.videoFetcher.getVideoViewsUrl(video.uuid),
-        videoViewIntervalMs: 5000,
-        metricsUrl: window.location.origin + '/api/v1/metrics/playback',
+      storyboard,
 
-        videoShortUUID: video.shortUUID,
-        videoUUID: video.uuid,
+      startTime: playlist
+        ? playlist.playlistTracker.getCurrentElement().startTimestamp
+        : this.startTime,
+      stopTime: playlist
+        ? playlist.playlistTracker.getCurrentElement().stopTimestamp
+        : this.stopTime,
 
-        playerElement: this.playerHTML.getPlayerElement(),
-        onPlayerElementChange: (element: HTMLVideoElement) => {
-          this.playerHTML.setPlayerElement(element)
-        },
+      videoCaptions,
+      videoViewUrl: this.videoFetcher.getVideoViewsUrl(video.uuid),
 
-        videoDuration: video.duration,
-        enableHotkeys: true,
+      videoShortUUID: video.shortUUID,
+      videoUUID: video.uuid,
 
-        peertubeLink: this.peertubeLink,
-        instanceName: serverConfig.instance.name,
+      duration: video.duration,
 
-        poster: window.location.origin + video.previewPath,
-        theaterButton: false,
+      poster: window.location.origin + video.previewPath,
 
-        serverUrl: window.location.origin,
-        language: navigator.language,
-        embedUrl: window.location.origin + video.embedPath,
-        embedTitle: video.name,
+      embedUrl: window.location.origin + video.embedPath,
+      embedTitle: video.name,
 
-        requiresUserAuth: videoRequiresUserAuth(video),
-        authorizationHeader,
-        videoFileToken,
+      requiresUserAuth: videoRequiresUserAuth(video),
+      videoFileToken,
 
-        requiresPassword,
-        videoPassword,
+      requiresPassword,
+      videoPassword,
 
-        errorNotifier: () => {
-          // Empty, we don't have a notifier in the embed
-        },
+      ...this.buildLiveOptions(video, live),
 
-        ...this.buildLiveOptions(video, live),
+      ...this.buildPlaylistOptions(playlist),
 
-        ...this.buildPlaylistOptions(options)
-      },
+      dock: this.buildDockOptions(video),
 
-      webtorrent: {
+      webVideo: {
         videoFiles: video.files
       },
 
-      ...this.buildP2PMediaLoaderOptions(video),
-
-      pluginsManager: this.peertubePlugin.getPluginsManager()
+      hls: this.buildHLSOptions(video)
     }
-
-    return playerOptions
   }
 
   private buildLiveOptions (video: VideoDetails, live: LiveVideo) {
@@ -308,15 +312,27 @@ export class PlayerManagerOptions {
     }
   }
 
-  private buildPlaylistOptions (options: {
-    playlistTracker?: PlaylistTracker
-    playNextPlaylistVideo?: () => any
-    playPreviousPlaylistVideo?: () => any
-    onVideoUpdate?: (uuid: string) => any
+  private buildPlaylistOptions (options?: {
+    playlistTracker: PlaylistTracker
+    playNext: () => any
+    playPrevious: () => any
+    onVideoUpdate: (uuid: string) => any
   }) {
-    const { playlistTracker, playNextPlaylistVideo, playPreviousPlaylistVideo, onVideoUpdate } = options
+    if (!options) {
+      return {
+        nextVideo: {
+          enabled: false,
+          displayControlBarButton: false,
+          getVideoTitle: () => ''
+        },
+        previousVideo: {
+          enabled: false,
+          displayControlBarButton: false
+        }
+      }
+    }
 
-    if (!playlistTracker) return {}
+    const { playlistTracker, playNext, playPrevious, onVideoUpdate } = options
 
     return {
       playlist: {
@@ -332,27 +348,37 @@ export class PlayerManagerOptions {
         }
       },
 
-      nextVideo: () => playNextPlaylistVideo(),
-      hasNextVideo: () => playlistTracker.hasNextPlaylistElement(),
+      previousVideo: {
+        enabled: playlistTracker.hasPreviousPlaylistElement(),
+        handler: () => playPrevious(),
+        displayControlBarButton: true
+      },
+
+      nextVideo: {
+        enabled: playlistTracker.hasNextPlaylistElement(),
+        handler: () => playNext(),
+        getVideoTitle: () => playlistTracker.getNextPlaylistElement()?.video?.name,
+        displayControlBarButton: true
+      },
 
-      previousVideo: () => playPreviousPlaylistVideo(),
-      hasPreviousVideo: () => playlistTracker.hasPreviousPlaylistElement()
+      upnext: {
+        isEnabled: () => true,
+        isSuspended: () => false,
+        timeout: 0
+      }
     }
   }
 
-  private buildP2PMediaLoaderOptions (video: VideoDetails) {
-    if (this.mode !== 'p2p-media-loader') return {}
-
+  private buildHLSOptions (video: VideoDetails): HLSOptions {
     const hlsPlaylist = video.streamingPlaylists.find(p => p.type === VideoStreamingPlaylistType.HLS)
+    if (!hlsPlaylist) return undefined
 
     return {
-      p2pMediaLoader: {
-        playlistUrl: hlsPlaylist.playlistUrl,
-        segmentsSha256Url: hlsPlaylist.segmentsSha256Url,
-        redundancyBaseUrls: hlsPlaylist.redundancies.map(r => r.baseUrl),
-        trackerAnnounce: video.trackerUrls,
-        videoFiles: hlsPlaylist.files
-      } as P2PMediaLoaderOptions
+      playlistUrl: hlsPlaylist.playlistUrl,
+      segmentsSha256Url: hlsPlaylist.segmentsSha256Url,
+      redundancyBaseUrls: hlsPlaylist.redundancies.map(r => r.baseUrl),
+      trackerAnnounce: video.trackerUrls,
+      videoFiles: hlsPlaylist.files
     }
   }
 
@@ -374,6 +400,35 @@ export class PlayerManagerOptions {
 
   // ---------------------------------------------------------------------------
 
+  private buildDockOptions (videoInfo: VideoDetails) {
+    if (!this.hasControls()) return undefined
+
+    const title = this.hasTitle()
+      ? videoInfo.name
+      : undefined
+
+    const description = this.hasWarningTitle() && this.hasP2PEnabled()
+      ? '<span class="text">' + peertubeTranslate('Watching this video may reveal your IP address to others.') + '</span>'
+      : undefined
+
+    if (!title && !description) return
+
+    const availableAvatars = videoInfo.channel.avatars.filter(a => a.width < 50)
+    const avatar = availableAvatars.length !== 0
+      ? availableAvatars[0]
+      : undefined
+
+    return {
+      title,
+      description,
+      avatarUrl: title && avatar
+        ? avatar.path
+        : undefined
+    }
+  }
+
+  // ---------------------------------------------------------------------------
+
   private isP2PEnabled (config: HTMLServerConfig, video: Video) {
     const userP2PEnabled = getBoolOrDefault(
       peertubeLocalStorage.getItem(UserLocalStorageKeys.P2P_ENABLED),
diff --git a/client/src/standalone/videos/test-embed.ts b/client/src/standalone/videos/test-embed.ts
index b34df11ee..b7a283c4d 100644
--- a/client/src/standalone/videos/test-embed.ts
+++ b/client/src/standalone/videos/test-embed.ts
@@ -1,6 +1,6 @@
 import './test-embed.scss'
-import { PeerTubeResolution, PlayerEventType } from '../player/definitions'
-import { PeerTubePlayer } from '../player/player'
+import { PeerTubeResolution, PlayerEventType } from '../embed-player-api/definitions'
+import { PeerTubePlayer } from '../embed-player-api/player'
 import { logger } from '../../root-helpers'
 
 window.addEventListener('load', async () => {
diff --git a/client/tsconfig.json b/client/tsconfig.json
index f6409402a..5dee39362 100644
--- a/client/tsconfig.json
+++ b/client/tsconfig.json
@@ -61,18 +61,9 @@
       "fs": [
         "src/shims/noop.ts"
       ],
-      "http": [
-        "src/shims/http.ts"
-      ],
-      "https": [
-        "src/shims/https.ts"
-      ],
       "path": [
         "src/shims/path.ts"
       ],
-      "stream": [
-        "src/shims/stream.ts"
-      ],
       "crypto": [
         "src/shims/noop.ts"
       ]
diff --git a/client/webpack/webpack.video-embed.js b/client/webpack/webpack.video-embed.js
index e25677872..558481473 100644
--- a/client/webpack/webpack.video-embed.js
+++ b/client/webpack/webpack.video-embed.js
@@ -36,10 +36,7 @@ module.exports = function () {
 
       fallback: {
         fs: [ path.resolve('src/shims/noop.ts') ],
-        http: [ path.resolve('src/shims/http.ts') ],
-        https: [ path.resolve('src/shims/https.ts') ],
         path: [ path.resolve('src/shims/path.ts') ],
-        stream: [ path.resolve('src/shims/stream.ts') ],
         crypto: [ path.resolve('src/shims/noop.ts') ]
       }
     },
diff --git a/client/yarn.lock b/client/yarn.lock
index 282c851ec..5c9f4bf42 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -2217,13 +2217,6 @@
     "@tufjs/canonical-json" "1.0.0"
     minimatch "^9.0.0"
 
-"@types/bittorrent-protocol@*":
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/@types/bittorrent-protocol/-/bittorrent-protocol-3.1.2.tgz#884cf1589fa8b1f7a6cc39bd516922a96ce08221"
-  integrity sha512-7k9nivNeG7Sc8wVuBs+XjBp2u7pH8tqW3BB93/SAg3xht/cZEK+Rqkj79xSyJqyj86eA0F6n85EKkkyGki8afg==
-  dependencies:
-    "@types/node" "*"
-
 "@types/body-parser@*":
   version "1.19.2"
   resolved "https://registry.yarnpkg.com/@types/body-parser/-/body-parser-1.19.2.tgz#aea2059e28b7658639081347ac4fab3de166e6f0"
@@ -2394,13 +2387,6 @@
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.194.tgz#b71eb6f7a0ff11bff59fc987134a093029258a76"
   integrity sha512-r22s9tAS7imvBt2lyHC9B8AGwWnXaYb1tY09oyLkXDs4vArpYJzw09nj8MLx5VfciBPGIb+ZwG0ssYnEPJxn/g==
 
-"@types/magnet-uri@*":
-  version "5.1.3"
-  resolved "https://registry.yarnpkg.com/@types/magnet-uri/-/magnet-uri-5.1.3.tgz#cdf974721012bd758c0f559cabcad7bab87f9008"
-  integrity sha512-FvJN1yYdLhvU6zWJ2YnWQ2GnpFLsA8bt+85WY0tLh6ehzGNrvBorjlcc53/zY43r/IKn+ctFs1nt7andwGnQCQ==
-  dependencies:
-    "@types/node" "*"
-
 "@types/markdown-it@^12.0.1":
   version "12.2.3"
   resolved "https://registry.yarnpkg.com/@types/markdown-it/-/markdown-it-12.2.3.tgz#0d6f6e5e413f8daaa26522904597be3d6cd93b51"
@@ -2459,22 +2445,6 @@
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz#d3357479a0fdfdd5907fe67e17e0a85c906e1301"
   integrity sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==
 
-"@types/parse-torrent-file@*":
-  version "4.0.3"
-  resolved "https://registry.yarnpkg.com/@types/parse-torrent-file/-/parse-torrent-file-4.0.3.tgz#045b023426d168e0253c932cb782b231b1ee2d62"
-  integrity sha512-dFkPnJPKiFWiGX+HXmyTVt2js3k0d9dThmUxX8nfGC22hbyZ5BTmetsEl45sQhHLcFo43njVrIKMXM3F1ahXRw==
-  dependencies:
-    "@types/node" "*"
-
-"@types/parse-torrent@*":
-  version "5.8.4"
-  resolved "https://registry.yarnpkg.com/@types/parse-torrent/-/parse-torrent-5.8.4.tgz#c095834a9a815507c59014a79517ad403e4329d0"
-  integrity sha512-FdKs5yN5iYO5Cu9gVz1Zl30CbZe6HTsqloWmCf+LfbImgSzlsUkov2+npQWCQSQ3zi/a2G5C824K0UpZ2sRufA==
-  dependencies:
-    "@types/magnet-uri" "*"
-    "@types/node" "*"
-    "@types/parse-torrent-file" "*"
-
 "@types/prop-types@*":
   version "15.7.5"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
@@ -2558,13 +2528,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/simple-peer@*":
-  version "9.11.5"
-  resolved "https://registry.yarnpkg.com/@types/simple-peer/-/simple-peer-9.11.5.tgz#6baa00edbbd0f632f8561e8fb03b4d21d62f076e"
-  integrity sha512-haXgWcAa3Y3Sn+T8lzkE4ErQUpYzhW6Cz2lh00RhQTyWt+xZ3s87wJPztUxlqSdFRqGhe2MQIBd0XsyHP3No4w==
-  dependencies:
-    "@types/node" "*"
-
 "@types/sockjs@^0.3.33":
   version "0.3.33"
   resolved "https://registry.yarnpkg.com/@types/sockjs/-/sockjs-0.3.33.tgz#570d3a0b99ac995360e3136fd6045113b1bd236f"
@@ -2582,16 +2545,6 @@
   resolved "https://registry.yarnpkg.com/@types/video.js/-/video.js-7.3.51.tgz#ce69e02681ed6ed8abe61bb3802dd032a74d63e8"
   integrity sha512-xLlt/ZfCuWYBvG2MRn018RvaEplcK6dI63aOiVUeeAWFyjx3Br1hL749ndFgbrvNdY4m9FoHG1FQ/PB6IpfSAQ==
 
-"@types/webtorrent@^0.109.0":
-  version "0.109.3"
-  resolved "https://registry.yarnpkg.com/@types/webtorrent/-/webtorrent-0.109.3.tgz#95df708d98bcea235b37f49a9a348b11f3511670"
-  integrity sha512-EJLsxMEcEjPXHcBqL6TRAbUwIpxAul5ULrXHJ0zwig7Oe70FS6dAzCWLq4MBafX3QrQG1DzGAS0fS8iJEOjD0g==
-  dependencies:
-    "@types/bittorrent-protocol" "*"
-    "@types/node" "*"
-    "@types/parse-torrent" "*"
-    "@types/simple-peer" "*"
-
 "@types/which@^2.0.1":
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/@types/which/-/which-2.0.2.tgz#54541d02d6b1daee5ec01ac0d1b37cecf37db1ae"
@@ -3124,14 +3077,6 @@
   resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-2.0.4.tgz#3982ee6f8b42845437fc4d391e93ac5d9da52f0f"
   integrity sha512-0xRgjgDLdz6G7+vvDLlaRpFatJaJ69uTalZLRSMX5B3VUrDmXcrVA3+6fXXQgmYz7bY9AAgs348XQdmtLsK41A==
 
-"@webtorrent/http-node@^1.3.0":
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/@webtorrent/http-node/-/http-node-1.3.0.tgz#bd8aacf13f08bb19ee25b5f5364e8d261eaa5c3c"
-  integrity sha512-GWZQKroPES4z91Ijx6zsOsb7+USOxjy66s8AoTWg0HiBBdfnbtf9aeh3Uav0MgYn4BL8Q7tVSUpd0gGpngKGEQ==
-  dependencies:
-    freelist "^1.0.3"
-    http-parser-js "^0.4.3"
-
 "@xmldom/xmldom@^0.8.3", "@xmldom/xmldom@^0.8.7":
   version "0.8.7"
   resolved "https://registry.yarnpkg.com/@xmldom/xmldom/-/xmldom-0.8.7.tgz#8b1e39c547013941974d83ad5e9cf5042071a9a0"
@@ -3205,7 +3150,7 @@ acorn@^8.0.4, acorn@^8.5.0, acorn@^8.7.1, acorn@^8.8.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.2.tgz#1b2f25db02af965399b9776b0c2c391276d37c4a"
   integrity sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==
 
-addr-to-ip-port@^1.0.1, addr-to-ip-port@^1.5.4:
+addr-to-ip-port@^1.0.1:
   version "1.5.4"
   resolved "https://registry.yarnpkg.com/addr-to-ip-port/-/addr-to-ip-port-1.5.4.tgz#9542b1c6219fdb8c9ce6cc72c14ee880ab7ddd88"
   integrity sha512-ByxmJgv8vjmDcl3IDToxL2yrWFrRtFpZAToY0f46XFXl8zS081t7El5MXIodwm7RC6DhHBRoOSMLFSPKCtHukg==
@@ -3583,11 +3528,6 @@ axobject-query@3.1.1:
   dependencies:
     deep-equal "^2.0.5"
 
-b4a@^1.3.1:
-  version "1.6.4"
-  resolved "https://registry.yarnpkg.com/b4a/-/b4a-1.6.4.tgz#ef1c1422cae5ce6535ec191baeed7567443f36c9"
-  integrity sha512-fpWrvyVHEKyeEvbKZTVOeZF3VSKKWtJxFIxX/jaVPf+cLbGUSitjb49pHLqPV2BUNNZ0LcoeEGfE/YCpyDYHIw==
-
 babel-loader@9.1.2, babel-loader@^9.1.0:
   version "9.1.2"
   resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-9.1.2.tgz#a16a080de52d08854ee14570469905a5fc00d39c"
@@ -3656,16 +3596,11 @@ batch@0.6.1:
   resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
   integrity sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==
 
-bencode@^2.0.0, bencode@^2.0.1, bencode@^2.0.2, bencode@^2.0.3:
+bencode@^2.0.1:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/bencode/-/bencode-2.0.3.tgz#89b9c80ea1b8573554915a7d0c15f62b0aa7fc52"
   integrity sha512-D/vrAD4dLVX23NalHwb8dSvsUsxeRPO8Y7ToKA015JQYq69MLDOMkC0uGZYA/MPpltLO8rt8eqFC2j8DxjTZ/w==
 
-bep53-range@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/bep53-range/-/bep53-range-1.1.1.tgz#20fd125b00a413254a77d42f63a43750ca7e64ac"
-  integrity sha512-ct6s33iiwRCUPp9KXnJ4QMWDgHIgaw36caK/5XEQ9L8dCzSQlJt1Vk6VmHh1VD4AlGCAI4C2zmtfItifBBPrhQ==
-
 big-integer@^1.6.17:
   version "1.6.51"
   resolved "https://registry.yarnpkg.com/big-integer/-/big-integer-1.6.51.tgz#0df92a5d9880560d3ff2d5fd20245c889d130686"
@@ -3681,11 +3616,6 @@ binary-extensions@^2.0.0:
   resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
   integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
 
-binary-search@^1.3.4:
-  version "1.3.6"
-  resolved "https://registry.yarnpkg.com/binary-search/-/binary-search-1.3.6.tgz#e32426016a0c5092f0f3598836a1c7da3560565c"
-  integrity sha512-nbE1WxOTTrUWIfsfZ4aHGYu5DOuNkbxGokjV6Z2kxfJK3uaAb8zNK1muzOeipoLHZjInT4Br88BHpzevc681xA==
-
 binary@~0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/binary/-/binary-0.3.0.tgz#9f60553bc5ce8c3386f3b553cff47462adecaa79"
@@ -3694,54 +3624,11 @@ binary@~0.3.0:
     buffers "~0.1.1"
     chainsaw "~0.1.0"
 
-bitfield@^4.0.0, bitfield@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/bitfield/-/bitfield-4.1.0.tgz#77f3ef4e915e58adaf758b23cbff156959e0fd8e"
-  integrity sha512-6cEDG3K+PK9f+B7WyhWYjp09bqSa+uaAaecVA7Y5giFixyVe1s6HKGnvOqYNR4Mi4fBMjfDPLBpHkKvzzgP7kg==
-
-bittorrent-dht@^10.0.4, bittorrent-dht@^10.0.7:
-  version "10.0.7"
-  resolved "https://registry.yarnpkg.com/bittorrent-dht/-/bittorrent-dht-10.0.7.tgz#fbe0f56349e7aab951d6d8625e0f78495ad74684"
-  integrity sha512-o6elCANGteECXz82LFqG1Ov2fG4uNzfUU7pBMx9ixxKUh99ZXNrhbiNLRNN2F2vBnqKSN7SHlUW4LJ5Z2u1eKw==
-  dependencies:
-    bencode "^2.0.3"
-    debug "^4.3.4"
-    k-bucket "^5.1.0"
-    k-rpc "^5.1.0"
-    last-one-wins "^1.0.4"
-    lru "^3.1.0"
-    randombytes "^2.1.0"
-    record-cache "^1.2.0"
-    simple-sha1 "^3.1.0"
-
-bittorrent-lsd@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/bittorrent-lsd/-/bittorrent-lsd-1.1.1.tgz#427044bfcc05d0c2f286b6d1db70a91c04daa0c9"
-  integrity sha512-dWxU2Mr2lU6jzIKgZrTsXgeXDCIcYpR1b6f2n89fn7juwPAYbNU04OgWjcQPLiNliY0filsX5CQAWntVErpk+Q==
-  dependencies:
-    chrome-dgram "^3.0.6"
-    debug "^4.2.0"
-
 bittorrent-peerid@^1.3.3:
   version "1.3.6"
   resolved "https://registry.yarnpkg.com/bittorrent-peerid/-/bittorrent-peerid-1.3.6.tgz#3688705a64937a8176ac2ded1178fc7bd91b61db"
   integrity sha512-VyLcUjVMEOdSpHaCG/7odvCdLbAB1y3l9A2V6WIje24uV7FkJPrQrH/RrlFmKxP89pFVDEnE+YlHaFujlFIZsg==
 
-bittorrent-protocol@^3.5.5:
-  version "3.5.5"
-  resolved "https://registry.yarnpkg.com/bittorrent-protocol/-/bittorrent-protocol-3.5.5.tgz#d89233da11996d8978146f8b80ed91fec9e0e9b8"
-  integrity sha512-cfzO//WtJGNLHXS58a4exJCSq1U0dkP2DZCQxgADInYFPdOfV1EmtpEN9toLOluVCXJRYAdwW5H6Li/hrn697A==
-  dependencies:
-    bencode "^2.0.2"
-    bitfield "^4.0.0"
-    debug "^4.3.4"
-    randombytes "^2.1.0"
-    rc4 "^0.1.5"
-    readable-stream "^3.6.0"
-    simple-sha1 "^3.1.0"
-    speedometer "^1.1.0"
-    unordered-array-remove "^1.0.2"
-
 bittorrent-tracker@^9.19.0:
   version "9.19.0"
   resolved "https://registry.yarnpkg.com/bittorrent-tracker/-/bittorrent-tracker-9.19.0.tgz#2266bfa8a45a57b09f8d8b184710ba531712d8ef"
@@ -3783,23 +3670,6 @@ bl@^4.0.3, bl@^4.1.0:
     inherits "^2.0.4"
     readable-stream "^3.4.0"
 
-blob-to-buffer@^1.2.9:
-  version "1.2.9"
-  resolved "https://registry.yarnpkg.com/blob-to-buffer/-/blob-to-buffer-1.2.9.tgz#a17fd6c1c564011408f8971e451544245daaa84a"
-  integrity sha512-BF033y5fN6OCofD3vgHmNtwZWRcq9NLyyxyILx9hfMy1sXYy4ojFl765hJ2lP0YaN2fuxPaLO2Vzzoxy0FLFFA==
-
-block-iterator@^1.0.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/block-iterator/-/block-iterator-1.1.1.tgz#3c8a94e083febf8da59d8baad1006ffee1a74694"
-  integrity sha512-DrjdVWZemVO4iBf4tiOXjUrY5cNesjzy0t7sIiu2rdl8cOCHRxAgKjSJFc3vBZYYMMmshUAxajl8QQh/uxXTKQ==
-
-block-stream2@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/block-stream2/-/block-stream2-2.1.0.tgz#ac0c5ef4298b3857796e05be8ebed72196fa054b"
-  integrity sha512-suhjmLI57Ewpmq00qaygS8UgEq2ly2PCItenIyhMqVjo4t4pGzqMvfgJuX8iWTeSDdfSSqS6j38fL4ToNL7Pfg==
-  dependencies:
-    readable-stream "^3.4.0"
-
 bluebird@~3.4.1:
   version "3.4.7"
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.4.7.tgz#f72d760be09b7f76d08ed8fae98b289a8d05fab3"
@@ -3875,11 +3745,6 @@ browser-stdout@1.3.1:
   resolved "https://registry.yarnpkg.com/browser-stdout/-/browser-stdout-1.3.1.tgz#baa559ee14ced73452229bad7326467c61fabd60"
   integrity sha512-qhAVI1+Av2X7qelOfAIYwXONood6XlZE/fXaBSmW/T5SzLAmCgzi+eiWE7fUvbHaeNBQH13UftjpXxsfLkMpgw==
 
-browserify-package-json@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/browserify-package-json/-/browserify-package-json-1.0.1.tgz#98dde8aa5c561fd6d3fe49bbaa102b74b396fdea"
-  integrity sha512-CikZxJGNyNOBERbeALo0NUUeJgHs5NyEvuYChX/PcsBV91TAvEq4hYDaWSenSieT8XwAutNnS3FGvyzIMOughQ==
-
 browserslist@4.21.5, browserslist@^4.14.5, browserslist@^4.21.3, browserslist@^4.21.5:
   version "4.21.5"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.21.5.tgz#75c5dae60063ee641f977e00edd3cfb2fb7af6a7"
@@ -3901,29 +3766,11 @@ browserstack-local@^1.5.1:
     ps-tree "=1.2.0"
     temp-fs "^0.9.9"
 
-buffer-alloc-unsafe@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz#bd7dc26ae2972d0eda253be061dba992349c19f0"
-  integrity sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg==
-
-buffer-alloc@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/buffer-alloc/-/buffer-alloc-1.2.0.tgz#890dd90d923a873e08e10e5fd51a57e5b7cce0ec"
-  integrity sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==
-  dependencies:
-    buffer-alloc-unsafe "^1.1.0"
-    buffer-fill "^1.0.0"
-
 buffer-crc32@^0.2.1, buffer-crc32@^0.2.13, buffer-crc32@~0.2.3:
   version "0.2.13"
   resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
   integrity sha512-VO9Ht/+p3SN7SKWqcrgEzjGbRSJYTx+Q1pTQC0wrWqHx0vpJraQ6GtHx8tvcg1rlK1byhU5gccxgOgj7B0TDkQ==
 
-buffer-fill@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/buffer-fill/-/buffer-fill-1.0.0.tgz#f8f78b76789888ef39f205cd637f68e702122b2c"
-  integrity sha512-T7zexNBwiiaCOGDg9xNX9PBmjrubblRkENuptryuI64URkXDFum9il/JGL8Lm8wYfAXpredVXXZz7eMHilimiQ==
-
 buffer-from@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
@@ -3962,11 +3809,6 @@ bufferutil@^4.0.3:
   dependencies:
     node-gyp-build "^4.3.0"
 
-builtin-status-codes@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
-  integrity sha512-HpGFw18DgFWlncDfjTa2rcQ4W88O1mC8e8yZ2AvQY5KDaktSTwo+KRf6nHK6FRI5FyRyb/5T6+TSxfP7QyGsmQ==
-
 builtins@^5.0.0:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/builtins/-/builtins-5.0.1.tgz#87f6db9ab0458be728564fa81d876d8d74552fa9"
@@ -4058,14 +3900,6 @@ cacache@^17.0.0:
     tar "^6.1.11"
     unique-filename "^3.0.0"
 
-cache-chunk-store@^3.0.0, cache-chunk-store@^3.2.2:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/cache-chunk-store/-/cache-chunk-store-3.2.2.tgz#19bb55d61252cd2174da4686548d52bc2dd44120"
-  integrity sha512-2lJdWbgHFFxcSth9s2wpId3CR3v1YC63KjP4T9WhpW7LWlY7Hiiei3QwwqzkWqlJTfR8lSy9F5kRQECeyj+yQA==
-  dependencies:
-    lru "^3.1.0"
-    queue-microtask "^1.2.3"
-
 cacheable-lookup@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/cacheable-lookup/-/cacheable-lookup-7.0.0.tgz#3476a8215d046e5a3202a9209dd13fec1f933a27"
@@ -4231,7 +4065,7 @@ chownr@^2.0.0:
   resolved "https://registry.yarnpkg.com/chownr/-/chownr-2.0.0.tgz#15bfbe53d2eab4cf70f18a8cd68ebe5b3cb1dece"
   integrity sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==
 
-chrome-dgram@^3.0.2, chrome-dgram@^3.0.6:
+chrome-dgram@^3.0.6:
   version "3.0.6"
   resolved "https://registry.yarnpkg.com/chrome-dgram/-/chrome-dgram-3.0.6.tgz#2288b5c7471f66f073691206d36319dda713cf55"
   integrity sha512-bqBsUuaOiXiqxXt/zA/jukNJJ4oaOtc7ciwqJpZVEaaXwwxqgI2/ZdG02vXYWUhHGziDlvGMQWk0qObgJwVYKA==
@@ -4239,13 +4073,6 @@ chrome-dgram@^3.0.2, chrome-dgram@^3.0.6:
     inherits "^2.0.4"
     run-series "^1.1.9"
 
-chrome-dns@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/chrome-dns/-/chrome-dns-1.0.1.tgz#6870af680a40d2c4b2efc2154a378793f5a4ce4b"
-  integrity sha512-HqsYJgIc8ljJJOqOzLphjAs79EUuWSX3nzZi2LNkzlw3GIzAeZbaSektC8iT/tKvLqZq8yl1GJu5o6doA4TRbg==
-  dependencies:
-    chrome-net "^3.3.2"
-
 chrome-launcher@^0.15.0:
   version "0.15.2"
   resolved "https://registry.yarnpkg.com/chrome-launcher/-/chrome-launcher-0.15.2.tgz#4e6404e32200095fdce7f6a1e1004f9bd36fa5da"
@@ -4256,13 +4083,6 @@ chrome-launcher@^0.15.0:
     is-wsl "^2.2.0"
     lighthouse-logger "^1.0.0"
 
-chrome-net@^3.3.2, chrome-net@^3.3.4:
-  version "3.3.4"
-  resolved "https://registry.yarnpkg.com/chrome-net/-/chrome-net-3.3.4.tgz#0e604a31d226ebfb8d2d1c381cab47d35309825d"
-  integrity sha512-Jzy2EnzmE+ligqIZUsmWnck9RBXLuUy6CaKyuNMtowFG3ZvLt8d+WBJCTPEludV0DHpIKjAOlwjFmTaEdfdWCw==
-  dependencies:
-    inherits "^2.0.1"
-
 chrome-trace-event@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.3.tgz#1015eced4741e15d06664a957dbbf50d041e26ac"
@@ -4288,14 +4108,6 @@ chromium-bidi@0.4.9:
   dependencies:
     mitt "3.0.0"
 
-chunk-store-stream@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/chunk-store-stream/-/chunk-store-stream-4.3.0.tgz#3de5f4dfe19729366c29bb7ed52d139f9af29f0e"
-  integrity sha512-qby+/RXoiMoTVtPiylWZt7KFF1jy6M829TzMi2hxZtBIH9ptV19wxcft6zGiXLokJgCbuZPGNGab6DWHqiSEKw==
-  dependencies:
-    block-stream2 "^2.0.0"
-    readable-stream "^3.6.0"
-
 ci-info@^3.2.0:
   version "3.8.0"
   resolved "https://registry.yarnpkg.com/ci-info/-/ci-info-3.8.0.tgz#81408265a5380c929f0bc665d62256628ce9ef91"
@@ -4628,11 +4440,6 @@ cosmiconfig@^8.1.3:
     parse-json "^5.0.0"
     path-type "^4.0.0"
 
-cpus@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/cpus/-/cpus-1.0.3.tgz#4ef6deea461968d6329d07dd01205685df2934a2"
-  integrity sha512-PXHBvGLuL69u55IkLa5e5838fLhIMHxmkV4ge42a8alGyn7BtawYgI0hQ849EedvtHIOLNNH3i6eQU1BiE9SUA==
-
 crc-32@^1.2.0:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/crc-32/-/crc-32-1.2.2.tgz#3cad35a934b8bf71f25ca524b6da51fb7eace2ff"
@@ -4646,23 +4453,6 @@ crc32-stream@^4.0.2:
     crc-32 "^1.2.0"
     readable-stream "^3.4.0"
 
-create-torrent@^5.0.4:
-  version "5.0.9"
-  resolved "https://registry.yarnpkg.com/create-torrent/-/create-torrent-5.0.9.tgz#850f198f7568e3d0e1e73b6858d43d44659a69d0"
-  integrity sha512-WQ/bMe+aCBSa5EonIkgw7CTM/1JnJDQuLJhA78omSWvuEbXDwaUy0rG3a+IYt+EiO+rdTLxdsBwrsn/wfWOMQA==
-  dependencies:
-    bencode "^2.0.3"
-    block-iterator "^1.0.1"
-    fast-readable-async-iterator "^1.1.1"
-    is-file "^1.0.0"
-    join-async-iterator "^1.1.1"
-    junk "^3.1.0"
-    minimist "^1.2.7"
-    piece-length "^2.0.1"
-    queue-microtask "^1.2.3"
-    run-parallel "^1.2.0"
-    simple-sha1 "^3.1.0"
-
 critters@0.0.16:
   version "0.0.16"
   resolved "https://registry.yarnpkg.com/critters/-/critters-0.0.16.tgz#ffa2c5561a65b43c53b940036237ce72dcebfe93"
@@ -4812,7 +4602,7 @@ debug@2.6.9, debug@^2.6.9:
   dependencies:
     ms "2.0.0"
 
-debug@4, debug@4.3.4, debug@^4.1.0, debug@^4.1.1, debug@^4.2.0, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4, debug@~4.3.1, debug@~4.3.2:
+debug@4, debug@4.3.4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4, debug@~4.3.1, debug@~4.3.2:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
@@ -4999,11 +4789,6 @@ devtools@8.10.5:
     uuid "^9.0.0"
     which "^3.0.0"
 
-dexie@^3.2.2:
-  version "3.2.3"
-  resolved "https://registry.yarnpkg.com/dexie/-/dexie-3.2.3.tgz#f35c91ca797599df8e771b998e9ae9669c877f8c"
-  integrity sha512-iHayBd4UYryDCVUNa3PMsJMEnd8yjyh5p7a+RFeC8i8n476BC9wMhVvqiImq5zJZJf5Tuer+s4SSj+AA3x+ZbQ==
-
 diff-sequences@^29.4.3:
   version "29.4.3"
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-29.4.3.tgz#9314bc1fabe09267ffeca9cbafc457d8499a13f2"
@@ -5220,7 +5005,7 @@ encoding@^0.1.13:
   dependencies:
     iconv-lite "^0.6.2"
 
-end-of-stream@^1.1.0, end-of-stream@^1.4.1, end-of-stream@^1.4.4:
+end-of-stream@^1.1.0, end-of-stream@^1.4.1:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
   integrity sha512-+uw1inIHVPQoaVuHzRyXd21icM+cnt4CzD5rW+NC1wjOUSTOs+Te7FOv7AhN7vS9x/oIyhLP5PR1H+phQAHu5Q==
@@ -5458,7 +5243,7 @@ escalade@^3.1.1:
   resolved "https://registry.yarnpkg.com/escalade/-/escalade-3.1.1.tgz#d8cfdc7000965c5a0174b4a82eaa5c0552742e40"
   integrity sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw==
 
-escape-html@^1.0.3, escape-html@~1.0.3:
+escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
   integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==
@@ -5818,11 +5603,6 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
-fast-fifo@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/fast-fifo/-/fast-fifo-1.2.0.tgz#2ee038da2468e8623066dee96958b0c1763aa55a"
-  integrity sha512-NcvQXt7Cky1cNau15FWy64IjuO8X0JijhTBBrJj1YlxlDfRkJXNaK9RFUjwpfDPzMdv7wB38jr53l9tkNLxnWg==
-
 fast-glob@3.2.7:
   version "3.2.7"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.2.7.tgz#fd6cb7a2d7e9aa7a7846111e85a196d6b2f766a1"
@@ -5855,11 +5635,6 @@ fast-levenshtein@^2.0.6:
   resolved "https://registry.yarnpkg.com/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
   integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
 
-fast-readable-async-iterator@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/fast-readable-async-iterator/-/fast-readable-async-iterator-1.1.1.tgz#77dfbb5262b278bb123c4d8d3219b1bb881b857c"
-  integrity sha512-xEHkLUEmStETI+15zhglJLO9TjXxNkkp2ldEfYVZdcqxFhM172EfGl1irI6mVlTxXspYKH1/kjevnt/XSsPeFA==
-
 fastest-levenshtein@^1.0.12, fastest-levenshtein@^1.0.16:
   version "1.0.16"
   resolved "https://registry.yarnpkg.com/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz#210e61b6ff181de91ea9b3d1b84fdedd47e034e5"
@@ -6065,11 +5840,6 @@ fraction.js@^4.2.0:
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.2.0.tgz#448e5109a313a3527f5a3ab2119ec4cf0e0e2950"
   integrity sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==
 
-freelist@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/freelist/-/freelist-1.0.3.tgz#006775509f3935701784d3ed2fc9f12c9df1bab2"
-  integrity sha512-Ji7fEnMdZDGbS5oXElpRJsn9jPvBR8h/037D3bzreNmS8809cISq/2D9//JbA/TaZmkkN8cmecXwmQHmM+NHhg==
-
 fresh@0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
@@ -6080,18 +5850,6 @@ from@~0:
   resolved "https://registry.yarnpkg.com/from/-/from-0.1.7.tgz#83c60afc58b9c56997007ed1a768b3ab303a44fe"
   integrity sha512-twe20eF1OxVxp/ML/kq2p1uc6KvFK/+vs8WjEbeKmV2He22MKm7YF2ANIt+EOqhJ5L3K/SuuPhk0hWQDjOM23g==
 
-fs-chunk-store@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/fs-chunk-store/-/fs-chunk-store-2.0.5.tgz#1dd4bdbb371239ac6f7234af6cd4386c72315059"
-  integrity sha512-z3c2BmyaHdQTtIVXJDQOvwZVWN2gNU//0IYKK2LuPr+cZyGoIrgDwI4iDASaTUyQbOBtyg/k6GuDZepB6jQIPw==
-  dependencies:
-    queue-microtask "^1.2.2"
-    random-access-file "^2.0.1"
-    randombytes "^2.0.3"
-    rimraf "^3.0.0"
-    run-parallel "^1.1.2"
-    thunky "^1.0.1"
-
 fs-constants@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
@@ -6240,11 +5998,6 @@ get-port@^6.1.2:
   resolved "https://registry.yarnpkg.com/get-port/-/get-port-6.1.2.tgz#c1228abb67ba0e17fb346da33b15187833b9c08a"
   integrity sha512-BrGGraKm2uPqurfGVj/z97/zv8dPleC6x9JBNRTrDNtCkkRF4rPwrQXFgL7+I+q8QSdU4ntLQX2D7KIxSy8nGw==
 
-get-stdin@^8.0.0:
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-8.0.0.tgz#cbad6a73feb75f6eeb22ba9e01f89aa28aa97a53"
-  integrity sha512-sY22aA6xchAzprjyqmSEQv4UbAAzRN0L2dQB0NlN5acTTK9Don6nhoc3eAbUnpZiCANAMfd/+40kVdKfFygohg==
-
 get-stream@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/get-stream/-/get-stream-3.0.0.tgz#8e943d1358dc37555054ecbe2edb05aa174ede14"
@@ -6734,11 +6487,6 @@ http-parser-js@>=0.5.1:
   resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.5.8.tgz#af23090d9ac4e24573de6f6aecc9d84a48bf20e3"
   integrity sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q==
 
-http-parser-js@^0.4.3:
-  version "0.4.13"
-  resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.4.13.tgz#3bd6d6fde6e3172c9334c3b33b6c193d80fe1137"
-  integrity sha512-u8u5ZaG0Tr/VvHlucK2ufMuOp4/5bvwgneXle+y228K5rMbJOlVjThONcaAw3ikAy8b2OO9RfEucdMHFz3UWMA==
-
 http-proxy-agent@5.0.0, http-proxy-agent@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/http-proxy-agent/-/http-proxy-agent-5.0.0.tgz#5129800203520d434f142bc78ff3c170800f2b43"
@@ -6784,11 +6532,6 @@ http2-wrapper@^2.1.10:
     quick-lru "^5.1.1"
     resolve-alpn "^1.2.0"
 
-https-browserify@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
-  integrity sha512-J+FkSdyD+0mA0N+81tMotaRMfSL9SGi+xpD3T6YApKsc3bGSXJlfXri3VyFOeYkfLRQisDk1W+jIFFKBeUBbBg==
-
 https-proxy-agent@5.0.1, https-proxy-agent@^5.0.0, https-proxy-agent@^5.0.1:
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz#c59ef224a04fe8b754f3db0063a25ea30d0005d6"
@@ -6863,13 +6606,6 @@ image-size@~0.5.0:
   resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
   integrity sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==
 
-immediate-chunk-store@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/immediate-chunk-store/-/immediate-chunk-store-2.2.0.tgz#f56d30ecc7171f6cfcf632b0eb8395a89f92c03c"
-  integrity sha512-1bHBna0hCa6arRXicu91IiL9RvvkbNYLVq+mzWdaLGZC3hXvX4doh8e1dLhMKez5siu63CYgO5NrGJbRX5lbPA==
-  dependencies:
-    queue-microtask "^1.2.3"
-
 immutable@^4.0.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.3.0.tgz#eb1738f14ffb39fd068b1dbe1296117484dd34be"
@@ -6934,7 +6670,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.0, inherits@~2.0.3, inherits@~2.0.4:
+inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.0, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -7030,13 +6766,6 @@ ip-regex@^4.1.0:
   resolved "https://registry.yarnpkg.com/ip-regex/-/ip-regex-4.3.0.tgz#687275ab0f57fa76978ff8f4dddc8a23d5990db5"
   integrity sha512-B9ZWJxHHOHUhUjCPrMpLD4xEq35bUTClHM1S6CBU5ixQnkZmwipwgc96vAd7AAGM9TGHvJR+Uss+/Ak6UphK+Q==
 
-ip-set@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/ip-set/-/ip-set-2.1.0.tgz#9a47b9f5d220c38bc7fe5db8efc4baa45b0a0a35"
-  integrity sha512-JdHz4tSMx1IeFj8yEcQU0i58qiSkOlmZXkZ8+HJ0ROV5KcgLRDO9F703oJ1GeZCvqggrcCbmagD/V7hghY62wA==
-  dependencies:
-    ip "^1.1.5"
-
 ip@^1.1.5:
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.8.tgz#ae05948f6b075435ed3307acce04629da8cdbf48"
@@ -7084,11 +6813,6 @@ is-arrayish@^0.2.1:
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==
 
-is-ascii@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-ascii/-/is-ascii-1.0.0.tgz#f02ad0259a0921cd199ff21ce1b09e0f6b4e3929"
-  integrity sha512-CXMaB/+EWCSGlLPs7ZlXRBpaPRRSRnrOfq0N3+RGeCZfqQaHQtiDLlkPCn63+LCkRUc1iRE0AXiI+sm2/Hi3qQ==
-
 is-bigint@^1.0.1:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-bigint/-/is-bigint-1.0.4.tgz#08147a1875bc2b32005d41ccd8291dffc6691df3"
@@ -7140,11 +6864,6 @@ is-extglob@^2.1.1:
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
   integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
 
-is-file@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-file/-/is-file-1.0.0.tgz#28a44cfbd9d3db193045f22b65fce8edf9620596"
-  integrity sha512-ZGMuc+xA8mRnrXtmtf2l/EkIW2zaD2LSBWlaOVEF6yH4RTndHob65V4SwWWdtGKVthQfXPVKsXqw4TDUjbVxVQ==
-
 is-fullwidth-code-point@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz#ef9e31386f031a7f0d643af82fde50c457ef00cb"
@@ -7485,11 +7204,6 @@ jest-worker@^27.4.5:
     merge-stream "^2.0.0"
     supports-color "^8.0.0"
 
-join-async-iterator@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/join-async-iterator/-/join-async-iterator-1.1.1.tgz#7d2857d7f4066267861888d264769e842110d07e"
-  integrity sha512-ATse+nuNeKZ9K1y27LKdvPe/GCe9R/u9dw9vI248e+vILeRK3IcJP4JUPAlSmKRCDK0cKhEwfmiw4Skqx7UnGQ==
-
 js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -7591,37 +7305,6 @@ jsonparse@^1.3.1:
   resolved "https://registry.yarnpkg.com/jsonparse/-/jsonparse-1.3.1.tgz#3f4dae4a91fac315f71062f8521cc239f1366280"
   integrity sha512-POQXvpdL69+CluYsillJ7SUhKvytYjW9vG/GKpnf+xP8UWgYEM/RaMzHHofbALDiKbbP1W8UEYmgGl39WkPZsg==
 
-junk@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/junk/-/junk-3.1.0.tgz#31499098d902b7e98c5d9b9c80f43457a88abfa1"
-  integrity sha512-pBxcB3LFc8QVgdggvZWyeys+hnrNWg4OcZIU/1X59k5jQdLBlCsYGRQaz234SqoRLTCgMH00fY0xRJH+F9METQ==
-
-k-bucket@^5.0.0, k-bucket@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/k-bucket/-/k-bucket-5.1.0.tgz#db2c9e72bd168b432e3f3e8fc092e2ccb61bff89"
-  integrity sha512-Fac7iINEovXIWU20GPnOMLUbjctiS+cnmyjC4zAUgvs3XPf1vo9akfCHkigftSic/jiKqKl+KA3a/vFcJbHyCg==
-  dependencies:
-    randombytes "^2.1.0"
-
-k-rpc-socket@^1.7.2:
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/k-rpc-socket/-/k-rpc-socket-1.11.1.tgz#f14b4b240a716c6cad7b6434b21716dbd7c7b0e8"
-  integrity sha512-8xtA8oqbZ6v1Niryp2/g4GxW16EQh5MvrUylQoOG+zcrDff5CKttON2XUXvMwlIHq4/2zfPVFiinAccJ+WhxoA==
-  dependencies:
-    bencode "^2.0.0"
-    chrome-dgram "^3.0.2"
-    chrome-dns "^1.0.0"
-    chrome-net "^3.3.2"
-
-k-rpc@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/k-rpc/-/k-rpc-5.1.0.tgz#af2052de2e84994d55da3032175da5dad8640174"
-  integrity sha512-FGc+n70Hcjoa/X2JTwP+jMIOpBz+pkRffHnSl9yrYiwUxg3FIgD50+u1ePfJUOnRCnx6pbjmVk5aAeB1wIijuQ==
-  dependencies:
-    k-bucket "^5.0.0"
-    k-rpc-socket "^1.7.2"
-    randombytes "^2.0.5"
-
 karma-source-map-support@1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/karma-source-map-support/-/karma-source-map-support-1.4.0.tgz#58526ceccf7e8730e56effd97a4de8d712ac0d6b"
@@ -7661,11 +7344,6 @@ ky@^0.33.0:
   resolved "https://registry.yarnpkg.com/ky/-/ky-0.33.3.tgz#bf1ad322a3f2c3428c13cfa4b3af95e6c4a2f543"
   integrity sha512-CasD9OCEQSFIam2U8efFK81Yeg8vNMTBUqtMOHlrcWQHqUX3HeCl9Dr31u4toV7emlH8Mymk5+9p0lL6mKb/Xw==
 
-last-one-wins@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/last-one-wins/-/last-one-wins-1.0.4.tgz#c1bfd0cbcb46790ec9156b8d1aee8fcb86cda22a"
-  integrity sha512-t+KLJFkHPQk8lfN6WBOiGkiUXoub+gnb2XTYI2P3aiISL+94xgZ1vgz1SXN/N4hthuOoLXarXfBZPUruyjQtfA==
-
 launch-editor@^2.6.0:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/launch-editor/-/launch-editor-2.6.0.tgz#4c0c1a6ac126c572bd9ff9a30da1d2cae66defd7"
@@ -7735,11 +7413,6 @@ lighthouse-logger@^1.0.0:
     debug "^2.6.9"
     marky "^1.2.2"
 
-limiter@^1.1.5:
-  version "1.1.5"
-  resolved "https://registry.yarnpkg.com/limiter/-/limiter-1.1.5.tgz#8f92a25b3b16c6131293a0cc834b4a838a2aa7c2"
-  integrity sha512-FWWMIEOxz3GwUI4Ts/IvgVy6LPvoMPgjMdQ185nN6psJyBJ4yOpzqm695/h5umdLJg2vW3GR5iG11MAkR2AzJA==
-
 lines-and-columns@^1.1.6:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.2.4.tgz#eca284f75d2965079309dc0ad9255abb2ebc1632"
@@ -7772,17 +7445,6 @@ listenercount@~1.0.1:
   resolved "https://registry.yarnpkg.com/listenercount/-/listenercount-1.0.1.tgz#84c8a72ab59c4725321480c975e6508342e70937"
   integrity sha512-3mk/Zag0+IJxeDrxSgaDPy4zZ3w05PRZeJNnlWhzFz5OkX49J4krc+A8X2d2M69vGMBEX0uyl8M+W+8gH+kBqQ==
 
-load-ip-set@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/load-ip-set/-/load-ip-set-2.2.1.tgz#9496ab8aa14ebf81aeb7c8bb38e7abdf50af3563"
-  integrity sha512-G3hQXehU2LTOp52e+lPffpK4EvidfjwbvHaGqmFcp4ptiZagR4xFdL+D08kMX906dxeqZyWhfonEjdUxrWcldg==
-  dependencies:
-    ip-set "^2.1.0"
-    netmask "^2.0.1"
-    once "^1.4.0"
-    simple-get "^4.0.0"
-    split "^1.0.1"
-
 load-json-file@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/load-json-file/-/load-json-file-1.1.0.tgz#956905708d58b4bab4c2261b04f59f31c99374c0"
@@ -7991,14 +7653,6 @@ lru@^3.1.0:
   dependencies:
     inherits "^2.0.1"
 
-lt_donthave@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/lt_donthave/-/lt_donthave-1.0.1.tgz#a160e08bdf15b9e092172063688855a6c031d8b3"
-  integrity sha512-PfOXfDN9GnUjlNHjjxKQuMxPC8s12iSrnmg+Ff1BU1uLn7S1BFAKzpZCu6Gwg3WsCUvTZrZoDSHvy6B/j+N4/Q==
-  dependencies:
-    debug "^4.2.0"
-    unordered-array-remove "^1.0.2"
-
 m3u8-parser@4.8.0, m3u8-parser@^4.7.1:
   version "4.8.0"
   resolved "https://registry.yarnpkg.com/m3u8-parser/-/m3u8-parser-4.8.0.tgz#4a2d591fdf6f2579d12a327081198df8af83083d"
@@ -8015,14 +7669,6 @@ magic-string@0.30.0:
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.4.13"
 
-magnet-uri@^6.2.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/magnet-uri/-/magnet-uri-6.2.0.tgz#10f7be050bf23452df210838239b118463c3eeff"
-  integrity sha512-O9AgdDwT771fnUj0giPYu/rACpz8173y8UXCSOdLITjOVfBenZ9H9q3FqQmveK+ORUMuD+BkKNSZP8C3+IMAKQ==
-  dependencies:
-    bep53-range "^1.1.0"
-    thirty-two "^1.0.2"
-
 mailparser-mit@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/mailparser-mit/-/mailparser-mit-1.0.0.tgz#19df8436c2a02e1d34a03ec518a2eb065e0a94a4"
@@ -8149,15 +7795,6 @@ media-typer@0.3.0:
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
   integrity sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==
 
-mediasource@^2.2.2, mediasource@^2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/mediasource/-/mediasource-2.4.0.tgz#7b03378054c41400374e9bade50aa0d7a758c39b"
-  integrity sha512-SKUMrbFMHgiCUZFOWZcL0aiF/KgHx9SPIKzxrl6+7nMUMDK/ZnOmJdY/9wKzYeM0g3mybt3ueg+W+/mrYfmeFQ==
-  dependencies:
-    inherits "^2.0.4"
-    readable-stream "^3.6.0"
-    to-arraybuffer "^1.0.1"
-
 mem@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/mem/-/mem-1.1.0.tgz#5edd52b485ca1d900fe64895505399a0dfa45f76"
@@ -8172,13 +7809,6 @@ memfs@^3.4.12, memfs@^3.4.3:
   dependencies:
     fs-monkey "^1.0.3"
 
-memory-chunk-store@^1.3.5:
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/memory-chunk-store/-/memory-chunk-store-1.3.5.tgz#700f712415895600bc5466007333efa19f1de07c"
-  integrity sha512-E1Xc1U4ifk/FkC2ZsWhCaW1xg9HbE/OBmQTLe2Tr9c27YPSLbW7kw1cnb3kQWD1rDtErFJHa7mB9EVrs7aTx9g==
-  dependencies:
-    queue-microtask "^1.2.3"
-
 meow@^9.0.0:
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/meow/-/meow-9.0.0.tgz#cd9510bc5cac9dee7d03c73ee1f9ad959f4ea364"
@@ -8242,11 +7872,6 @@ mime@1.6.0, mime@^1.4.1, mime@^1.6.0:
   resolved "https://registry.yarnpkg.com/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
 
-mime@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-3.0.0.tgz#b374550dca3a0c18443b0c950a6a58f1931cf7a7"
-  integrity sha512-jSCU7/VB1loIWBZe14aEYHU/+1UMEHoaO7qxCOVJOw9GgH72VAWppxNcjU+x9a2k3GSIBXNKxXQFqRvvZ7vr3A==
-
 mimic-fn@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/mimic-fn/-/mimic-fn-1.2.0.tgz#820c86a39334640e99516928bd03fca88057d022"
@@ -8354,7 +7979,7 @@ minimist-options@4.1.0:
     is-plain-obj "^1.1.0"
     kind-of "^6.0.3"
 
-minimist@^1.2.0, minimist@^1.2.5, minimist@^1.2.6, minimist@^1.2.7:
+minimist@^1.2.0, minimist@^1.2.5, minimist@^1.2.6:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.8.tgz#c1a464e7693302e082a075cee0c057741ac4772c"
   integrity sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==
@@ -8501,23 +8126,6 @@ mousetrap@^1.6.5:
   resolved "https://registry.yarnpkg.com/mousetrap/-/mousetrap-1.6.5.tgz#8a766d8c272b08393d5f56074e0b5ec183485bf9"
   integrity sha512-QNo4kEepaIBwiT8CDhP98umTetp+JNfQYBWvC1pc6/OAibuXtRcxZ58Qz8skvEHYvURne/7R8T5VoOI7rDsEUA==
 
-mp4-box-encoding@^1.3.0:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/mp4-box-encoding/-/mp4-box-encoding-1.4.1.tgz#19b31804c896bc1adf1c21b497bcf951aa3b9098"
-  integrity sha512-2/PRtGGiqPc/VEhbm7xAQ+gbb7yzHjjMAv6MpAifr5pCpbh3fQUdj93uNgwPiTppAGu8HFKe3PeU+OdRyAxStA==
-  dependencies:
-    uint64be "^2.0.2"
-
-mp4-stream@^3.0.0:
-  version "3.1.3"
-  resolved "https://registry.yarnpkg.com/mp4-stream/-/mp4-stream-3.1.3.tgz#79b8a19900337203a9bd607a02eccc64419a379c"
-  integrity sha512-DUT8f0x2jHbZjNMdqe9h6lZdt6RENWTTdGn8z3TXa4uEsoltuNY9lCCij84mdm0q7xcV0E2W25WRxlKBMo4hSw==
-  dependencies:
-    mp4-box-encoding "^1.3.0"
-    next-event "^1.0.0"
-    queue-microtask "^1.2.2"
-    readable-stream "^3.0.6"
-
 mpd-parser@0.22.1, mpd-parser@^0.22.1:
   version "0.22.1"
   resolved "https://registry.yarnpkg.com/mpd-parser/-/mpd-parser-0.22.1.tgz#bc2bf7d3e56368e4b0121035b055675401871521"
@@ -8556,14 +8164,6 @@ multicast-dns@^7.2.5:
     dns-packet "^5.2.2"
     thunky "^1.0.2"
 
-multistream@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/multistream/-/multistream-4.1.0.tgz#7bf00dfd119556fbc153cff3de4c6d477909f5a8"
-  integrity sha512-J1XDiAmmNpRCBfIWJv+n0ymC4ABcf/Pl+5YvC5B/D2f/2+8PtHvCNxMPKiQcZyi922Hq69J2YOpb1pTywfifyw==
-  dependencies:
-    once "^1.4.0"
-    readable-stream "^3.6.0"
-
 mute-stream@0.0.8:
   version "0.0.8"
   resolved "https://registry.yarnpkg.com/mute-stream/-/mute-stream-0.0.8.tgz#1630c42b2251ff81e2a283de96a5497ea92e5e0d"
@@ -8592,11 +8192,6 @@ nanoid@^3.3.6:
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
   integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
 
-napi-macros@^2.0.0:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/napi-macros/-/napi-macros-2.2.2.tgz#817fef20c3e0e40a963fbf7b37d1600bd0201044"
-  integrity sha512-hmEVtAGYzVQpCKdbQea4skABsdXW4RUh5t5mJ2zzqowJS2OyXZTU1KhDVFhx+NlWZ4ap9mqR9TcDO3LTTttd+g==
-
 natural-compare-lite@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz#17b09581988979fddafe0201e931ba933c96cbb4"
@@ -8626,16 +8221,6 @@ neo-async@^2.6.2:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
-netmask@^2.0.1:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/netmask/-/netmask-2.0.2.tgz#8b01a07644065d536383835823bc52004ebac5e7"
-  integrity sha512-dBpDMdxv9Irdq66304OLfEmQ9tbNRFnFTuZiLo+bD+r332bBmMJ8GBLXklIXXgxd3+v9+KUnZaUR5PJMa75Gsg==
-
-next-event@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/next-event/-/next-event-1.0.0.tgz#e7778acde2e55802e0ad1879c39cf6f75eda61d8"
-  integrity sha512-IXGPhl/yAiUU597gz+k5OYxYZkmLSWTcPPcpQjWABud9OK6m/ZNLrVdcEu4e7NgmOObFIhgZVg1jecPYT/6AoA==
-
 ngx-uploadx@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/ngx-uploadx/-/ngx-uploadx-6.1.0.tgz#40f00c352ba5a1af5b4bbe78a6a7572518314f8c"
@@ -8690,7 +8275,7 @@ node-forge@^1:
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-1.3.1.tgz#be8da2af243b2417d5f646a770663a92b7e9ded3"
   integrity sha512-dPEtOeMvF9VMcYV/1Wb8CPoVAXtp6MKMlcbAt4ddqmGqUJ6fQZFXkNZNkNlfevtNkGtaSoXf/vNNNSvgrdXwtA==
 
-node-gyp-build@^4.2.0, node-gyp-build@^4.2.2, node-gyp-build@^4.3.0:
+node-gyp-build@^4.2.2, node-gyp-build@^4.3.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/node-gyp-build/-/node-gyp-build-4.6.0.tgz#0c52e4cbf54bbd28b709820ef7b6a3c2d6209055"
   integrity sha512-NTZVKn9IylLwUzaKjkas1e4u2DLNcV4rdYagA4PWdPwW87Bi7z+BznyKSRwS/761tV/lzCGXplWsiaMjLqP2zQ==
@@ -9151,13 +8736,6 @@ p-try@^2.0.0:
   resolved "https://registry.yarnpkg.com/p-try/-/p-try-2.2.0.tgz#cb2868540e313d61de58fafbe35ce9004d5540e6"
   integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
 
-package-json-versionify@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/package-json-versionify/-/package-json-versionify-1.0.4.tgz#5860587a944873a6b7e6d26e8e51ffb22315bf17"
-  integrity sha512-mtKKtCeSZMtWcc5hHJS6OlEGP7J9g7WN6vWCCZi2hCXFag/Zmjokh6WFFTQb9TuMnBcZpRjhhMQyOyglPCAahw==
-  dependencies:
-    browserify-package-json "^1.0.0"
-
 pacote@15.1.3:
   version "15.1.3"
   resolved "https://registry.yarnpkg.com/pacote/-/pacote-15.1.3.tgz#4c0e7fb5e7ab3b27fb3f86514b451ad4c4f64e9d"
@@ -9234,19 +8812,6 @@ parse-srcset@^1.0.2:
   resolved "https://registry.yarnpkg.com/parse-srcset/-/parse-srcset-1.0.2.tgz#f2bd221f6cc970a938d88556abc589caaaa2bde1"
   integrity sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==
 
-parse-torrent@^9.1.5:
-  version "9.1.5"
-  resolved "https://registry.yarnpkg.com/parse-torrent/-/parse-torrent-9.1.5.tgz#fcae5f360d9baf617d9a2de68e74d5de4c8099fd"
-  integrity sha512-K8FXRwTOaZMI0/xuv0dpng1MVHZRtMJ0jRWBJ3qZWVNTrC1MzWUxm9QwaXDz/2qPhV2XC4UIHI92IGHwseAwaA==
-  dependencies:
-    bencode "^2.0.2"
-    blob-to-buffer "^1.2.9"
-    get-stdin "^8.0.0"
-    magnet-uri "^6.2.0"
-    queue-microtask "^1.2.3"
-    simple-get "^4.0.1"
-    simple-sha1 "^3.1.0"
-
 parse5-html-rewriting-stream@7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/parse5-html-rewriting-stream/-/parse5-html-rewriting-stream-7.0.0.tgz#e376d3e762d2950ccbb6bb59823fc1d7e9fdac36"
@@ -9403,11 +8968,6 @@ picomatch@2.3.1, picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3, picomatch
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
-piece-length@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/piece-length/-/piece-length-2.0.1.tgz#dbed4e78976955f34466d0a65304d0cb21914ac9"
-  integrity sha512-dBILiDmm43y0JPISWEmVGKBETQjwJe6mSU9GND+P9KW0SJGUwoU/odyH1nbalOP9i8WSYuqf1lQnaj92Bhw+Ug==
-
 pify@^2.0.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -9660,11 +9220,6 @@ pump@^3.0.0:
     end-of-stream "^1.1.0"
     once "^1.3.1"
 
-punycode@1.3.2:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.3.2.tgz#9653a036fb7c1ee42342f2325cceefea3926c48d"
-  integrity sha512-RofWgt/7fL5wP1Y7fxE7/EmTLzQVnB0ycyibJ0OOHIlJqTNzglYFxVwETOcIoJqJmpDXJ9xImDv+Fq34F/d4Dw==
-
 punycode@^2.1.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.0.tgz#f67fa67c94da8f4d0cfff981aee4118064199b8f"
@@ -9715,26 +9270,11 @@ query-selector-shadow-dom@^1.0.0:
   resolved "https://registry.yarnpkg.com/query-selector-shadow-dom/-/query-selector-shadow-dom-1.0.1.tgz#1c7b0058eff4881ac44f45d8f84ede32e9a2f349"
   integrity sha512-lT5yCqEBgfoMYpf3F2xQRK7zEr1rhIIZuceDK6+xRkJQ4NMbHTwXqk4NkwDwQMNqXgG9r9fyHnzwNVs6zV5KRw==
 
-querystring@0.2.0:
-  version "0.2.0"
-  resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
-  integrity sha512-X/xY82scca2tau62i9mDyU9K+I+djTMUsvwf7xnUX5GLvVzgJybOJf4Y6o9Zx3oJK/LSXg5tTZBjwzqVPaPO2g==
-
-querystring@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.1.tgz#40d77615bb09d16902a85c3e38aa8b5ed761c2dd"
-  integrity sha512-wkvS7mL/JMugcup3/rMitHmd9ecIGd2lhFhK9N3UUQ450h66d1r3Y9nvXzQAW1Lq+wyx61k/1pfKS5KuKiyEbg==
-
 queue-microtask@^1.2.2, queue-microtask@^1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
-queue-tick@^1.0.0, queue-tick@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/queue-tick/-/queue-tick-1.0.1.tgz#f6f07ac82c1fd60f82e098b417a80e52f1f4c142"
-  integrity sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag==
-
 quick-lru@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f"
@@ -9745,29 +9285,12 @@ quick-lru@^5.1.1:
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-5.1.1.tgz#366493e6b3e42a3a6885e2e99d18f80fb7a8c932"
   integrity sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==
 
-random-access-file@^2.0.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/random-access-file/-/random-access-file-2.2.1.tgz#071d086d8a92cc65abbd32b42aeba6d1d845d68d"
-  integrity sha512-RGU0xmDqdOyEiynob1KYSeh8+9c9Td1MJ74GT1viMEYAn8SJ9oBtWCXLsYZukCF46yududHOdM449uRYbzBrZQ==
-  dependencies:
-    mkdirp-classic "^0.5.2"
-    random-access-storage "^1.1.1"
-
-random-access-storage@^1.1.1:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/random-access-storage/-/random-access-storage-1.4.3.tgz#277d07005107562dfea84798eb9a6acd47d64b7f"
-  integrity sha512-D5e2iIC5dNENWyBxsjhEnNOMCwZZ64TARK6dyMN+3g4OTC4MJxyjh9hKLjTGoNhDOPrgjI+YlFEHFnrp/cSnzQ==
-  dependencies:
-    events "^3.3.0"
-    inherits "^2.0.3"
-    queue-tick "^1.0.0"
-
 random-iterate@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/random-iterate/-/random-iterate-1.0.1.tgz#f7d97d92dee6665ec5f6da08c7f963cad4b2ac99"
   integrity sha512-Jdsdnezu913Ot8qgKgSgs63XkAjEsnMcS1z+cC6D6TNXsUXsMxy0RpclF2pzGZTEiTXL9BiArdGTEexcv4nqcA==
 
-randombytes@^2.0.3, randombytes@^2.0.5, randombytes@^2.1.0:
+randombytes@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
   integrity sha512-vYl3iOX+4CKUWuxGi9Ukhie6fsqXqS9FE2Zaic4tNFD2N2QQaXOMFbuKK4QmDHC0JO6B1Zp41J0LpT0oR68amQ==
@@ -9779,13 +9302,6 @@ range-parser@^1.2.1, range-parser@~1.2.1:
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
   integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
 
-range-slice-stream@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/range-slice-stream/-/range-slice-stream-2.0.0.tgz#1f25fc7a2cacf9ccd140c46f9cf670a1a7fe3ce6"
-  integrity sha512-PPYLwZ63lXi6Tv2EZ8w3M4FzC0rVqvxivaOVS8pXSp5FMIHFnvi4MWHL3UdFLhwSy50aNtJsgjY0mBC6oFL26Q==
-  dependencies:
-    readable-stream "^3.0.2"
-
 raw-body@2.5.1:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.5.1.tgz#fe1b1628b181b700215e5fd42389f98b71392857"
@@ -9804,11 +9320,6 @@ raw-loader@^4.0.2:
     loader-utils "^2.0.0"
     schema-utils "^3.0.0"
 
-rc4@^0.1.5:
-  version "0.1.5"
-  resolved "https://registry.yarnpkg.com/rc4/-/rc4-0.1.5.tgz#08c6e04a0168f6eb621c22ab6cb1151bd9f4a64d"
-  integrity sha512-xdDTNV90z5x5u25Oc871Xnvu7yAr4tV7Eluh0VSvrhUkry39q1k+zkz7xroqHbRq+8PiazySHJPArqifUvz9VA==
-
 react-is@^18.0.0:
   version "18.2.0"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
@@ -9917,7 +9428,7 @@ readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable
     string_decoder "~1.1.1"
     util-deprecate "~1.0.1"
 
-readable-stream@^3.0.2, readable-stream@^3.0.6, readable-stream@^3.1.1, readable-stream@^3.4.0, readable-stream@^3.5.0, readable-stream@^3.6.0:
+readable-stream@^3.0.6, readable-stream@^3.1.1, readable-stream@^3.4.0, readable-stream@^3.6.0:
   version "3.6.2"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
   integrity sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==
@@ -9947,13 +9458,6 @@ rechoir@^0.8.0:
   dependencies:
     resolve "^1.20.0"
 
-record-cache@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/record-cache/-/record-cache-1.2.0.tgz#e601bc4f164d58330cc00055e27aa4682291c882"
-  integrity sha512-kyy3HWCez2WrotaL3O4fTn0rsIdfRKOdQQcEJ9KpvmKmbffKVvwsloX063EgRUlpJIXHiDQFhJcTbZequ2uTZw==
-  dependencies:
-    b4a "^1.3.1"
-
 recursive-readdir@^2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.3.tgz#e726f328c0d69153bcabd5c322d3195252379372"
@@ -10036,17 +9540,6 @@ relateurl@^0.2.7:
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
   integrity sha512-G08Dxvm4iDN3MLM0EsP62EDV9IuhXPR6blNz6Utcp7zyV3tr4HVNINt6MpaRWbxoOHT3Q7YN2P+jaHX8vUbgog==
 
-render-media@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/render-media/-/render-media-4.1.0.tgz#9188376822653d7e56c2d789d157c81e74fee0cb"
-  integrity sha512-F5BMWDmgATEoyPCtKjmGNTGN1ghoZlfRQ3MJh8dS/MrvIUIxupiof/Y9uahChipXcqQ57twVbgMmyQmuO1vokw==
-  dependencies:
-    debug "^4.2.0"
-    is-ascii "^1.0.0"
-    mediasource "^2.4.0"
-    stream-to-blob-url "^3.0.2"
-    videostream "^3.2.2"
-
 renderkid@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-3.0.0.tgz#5fd823e4d6951d37358ecc9a58b1f06836b6268a"
@@ -10218,14 +9711,7 @@ run-async@^3.0.0:
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-3.0.0.tgz#42a432f6d76c689522058984384df28be379daad"
   integrity sha512-540WwVDOMxA6dN6We19EcT9sc3hkXPw5mzRNGM3FkdN/vtE9NFvj5lFAPNwUDmJjXidm3v7TC1cTE7t17Ulm1Q==
 
-run-parallel-limit@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/run-parallel-limit/-/run-parallel-limit-1.1.0.tgz#be80e936f5768623a38a963262d6bef8ff11e7ba"
-  integrity sha512-jJA7irRNM91jaKc3Hcl1npHsFLOXOoTkPCUL1JEa1R82O2miplXXRaGdjW/KM/98YQWDhJLiSs793CnXfblJUw==
-  dependencies:
-    queue-microtask "^1.2.2"
-
-run-parallel@^1.1.2, run-parallel@^1.1.9, run-parallel@^1.2.0:
+run-parallel@^1.1.9, run-parallel@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
   integrity sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==
@@ -10237,11 +9723,6 @@ run-series@^1.1.9:
   resolved "https://registry.yarnpkg.com/run-series/-/run-series-1.1.9.tgz#15ba9cb90e6a6c054e67c98e1dc063df0ecc113a"
   integrity sha512-Arc4hUN896vjkqCYrUXquBFtRZdv1PfLbTYP71efP6butxyQ0kWpiNJyAgsxscmQg1cqvHY32/UCBzXedTpU2g==
 
-rusha@^0.8.13:
-  version "0.8.14"
-  resolved "https://registry.yarnpkg.com/rusha/-/rusha-0.8.14.tgz#a977d0de9428406138b7bb90d3de5dcd024e2f68"
-  integrity sha512-cLgakCUf6PedEu15t8kbsjnwIFFR2D4RfL+W3iWFJ4iac7z4B0ZI8fxy4R3J956kAI68HclCFGL8MPoUVC3qVA==
-
 rust-result@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/rust-result/-/rust-result-1.0.0.tgz#34c75b2e6dc39fe5875e5bdec85b5e0f91536f72"
@@ -10546,12 +10027,12 @@ sigstore@^1.3.0:
     make-fetch-happen "^11.0.1"
     tuf-js "^1.1.3"
 
-simple-concat@^1.0.0, simple-concat@^1.0.1:
+simple-concat@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/simple-concat/-/simple-concat-1.0.1.tgz#f46976082ba35c2263f1c8ab5edfe26c41c9552f"
   integrity sha512-cSFtAPtRhljv69IK0hTVZQ+OfE9nePi/rtJmw5UjHeVyVroEqJXP1sFztKUy1qU+xvz3u/sfYJLa947b7nAN2Q==
 
-simple-get@^4.0.0, simple-get@^4.0.1:
+simple-get@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/simple-get/-/simple-get-4.0.1.tgz#4a39db549287c979d352112fa03fd99fd6bc3543"
   integrity sha512-brv7p5WgH0jmQJr1ZDDfKDOSeWWg+OVypG99A/5vYGPqJ6pxiaHLy8nxtFjBA7oMa01ebA9gfh1uMCFqOuXxvA==
@@ -10573,14 +10054,6 @@ simple-peer@^9.11.0, simple-peer@^9.11.1:
     randombytes "^2.1.0"
     readable-stream "^3.6.0"
 
-simple-sha1@^3.0.1, simple-sha1@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/simple-sha1/-/simple-sha1-3.1.0.tgz#40cac8436dfaf9924332fc46a5c7bca45f656131"
-  integrity sha512-ArTptMRC1v08H8ihPD6l0wesKvMfF9e8XL5rIHPanI7kGOsSsbY514MwVu6X1PITHCTB2F08zB7cyEbfc4wQjg==
-  dependencies:
-    queue-microtask "^1.2.2"
-    rusha "^0.8.13"
-
 simple-websocket@^9.1.0:
   version "9.1.0"
   resolved "https://registry.yarnpkg.com/simple-websocket/-/simple-websocket-9.1.0.tgz#91cbb39eafefbe7e66979da6c639109352786a7f"
@@ -10775,19 +10248,6 @@ spdy@^4.0.2:
     select-hose "^2.0.0"
     spdy-transport "^3.0.0"
 
-speed-limiter@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/speed-limiter/-/speed-limiter-1.0.2.tgz#e4632f476a1d25d32557aad7bd089b3a0d948116"
-  integrity sha512-Ax+TbUOho84bWUc3AKqWtkIvAIVws7d6QI4oJkgH4yQ5Yil+lR3vjd/7qd51dHKGzS5bFxg0++QwyNRN7s6rZA==
-  dependencies:
-    limiter "^1.1.5"
-    streamx "^2.10.3"
-
-speedometer@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/speedometer/-/speedometer-1.1.0.tgz#a30b13abda45687a1a76977012c060f2ac8a7934"
-  integrity sha512-z/wAiTESw2XVPssY2XRcme4niTc4S5FkkJ4gknudtVoc33Zil8TdTxHy5torRcgqMqksJV2Yz8HQcvtbsnw0mQ==
-
 split2@^4.1.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/split2/-/split2-4.2.0.tgz#c9c5920904d148bab0b9f67145f245a86aadbfa4"
@@ -10800,13 +10260,6 @@ split@0.3:
   dependencies:
     through "2"
 
-split@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/split/-/split-1.0.1.tgz#605bd9be303aa59fb35f9229fbea0ddec9ea07d9"
-  integrity sha512-mTyOoPbrivtXnwnIxZRFYRrPNtEFKlpB2fvjSnCQUiAA6qAZzqwna5envK4uk6OIeP17CsdF3rSBGYVBsU0Tkg==
-  dependencies:
-    through "2"
-
 sprintf-js@~1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c"
@@ -10850,14 +10303,6 @@ stop-iteration-iterator@^1.0.0:
   dependencies:
     internal-slot "^1.0.4"
 
-stream-browserify@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-3.0.0.tgz#22b0a2850cdf6503e73085da1fc7b7d0c2122f2f"
-  integrity sha512-H73RAHsVBapbim0tU2JwwOiXUj+fikfiaoYAKHF3VJfA0pe2BCzkhAHBlLG6REzE+2WNZcxOXjK7lkso+9euLA==
-  dependencies:
-    inherits "~2.0.4"
-    readable-stream "^3.5.0"
-
 stream-buffers@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/stream-buffers/-/stream-buffers-3.0.2.tgz#5249005a8d5c2d00b3a32e6e0a6ea209dc4f3521"
@@ -10870,43 +10315,6 @@ stream-combiner@~0.0.4:
   dependencies:
     duplexer "~0.1.1"
 
-stream-http@^3.0.0:
-  version "3.2.0"
-  resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-3.2.0.tgz#1872dfcf24cb15752677e40e5c3f9cc1926028b5"
-  integrity sha512-Oq1bLqisTyK3TSCXpPbT4sdeYNdmyZJv1LxpEm2vu1ZhK89kSE5YXwZc3cWk0MagGaKriBh9mCFbVGtO+vY29A==
-  dependencies:
-    builtin-status-codes "^3.0.0"
-    inherits "^2.0.4"
-    readable-stream "^3.6.0"
-    xtend "^4.0.2"
-
-stream-to-blob-url@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/stream-to-blob-url/-/stream-to-blob-url-3.0.2.tgz#5574d139e2a6d1435945476f0a9469947f2da4fb"
-  integrity sha512-PS6wT2ZyyR38Cy+lE6PBEI1ZmO2HdzZoLeDGG0zZbYikCZd0dh8FUoSeFzgWLItpBYw1WJmPVRLpykRV+lAWLQ==
-  dependencies:
-    stream-to-blob "^2.0.0"
-
-stream-to-blob@^2.0.0, stream-to-blob@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/stream-to-blob/-/stream-to-blob-2.0.1.tgz#59ab71d7a7f0bfb899570e886e44d39f4ac4381a"
-  integrity sha512-GXlqXt3svqwIVWoICenix5Poxi4KbCF0BdXXUbpU1X4vq1V8wmjiEIU3aFJzCGNFpKxfbnG0uoowS3nKUgSPYg==
-
-stream-with-known-length-to-buffer@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/stream-with-known-length-to-buffer/-/stream-with-known-length-to-buffer-1.0.4.tgz#6a8aec53f27b8f481f962337c951aa3916fb60d1"
-  integrity sha512-ztP79ug6S+I7td0Nd2GBeIKCm+vA54c+e60FY87metz5n/l6ydPELd2lxsljz8OpIhsRM9HkIiAwz85+S5G5/A==
-  dependencies:
-    once "^1.4.0"
-
-streamx@^2.10.3:
-  version "2.13.2"
-  resolved "https://registry.yarnpkg.com/streamx/-/streamx-2.13.2.tgz#9de43569a1cd54980d128673b3c1429b79afff1c"
-  integrity sha512-+TWqixPhGDXEG9L/XczSbhfkmwAtGs3BJX5QNU6cvno+pOLKeszByWcnaTu6dg8efsTYqR8ZZuXWHhZfgrxMvA==
-  dependencies:
-    fast-fifo "^1.1.0"
-    queue-tick "^1.0.1"
-
 "string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
@@ -10969,7 +10377,7 @@ string.prototype.trimstart@^1.0.6:
     define-properties "^1.1.4"
     es-abstract "^1.20.4"
 
-string2compact@^1.3.0, string2compact@^1.3.2:
+string2compact@^1.3.0:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/string2compact/-/string2compact-1.3.2.tgz#c9d11a13f368404b8025425cc53f9916de1d0b8b"
   integrity sha512-3XUxUgwhj7Eqh2djae35QHZZT4mN3fsO7kagZhSGmhhlrQagVvWSFuuFIWnpxFS0CdTB2PlQcaL16RDi14I8uw==
@@ -11306,31 +10714,16 @@ text-table@0.2.0, text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
 
-thirty-two@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/thirty-two/-/thirty-two-1.0.2.tgz#4ca2fffc02a51290d2744b9e3f557693ca6b627a"
-  integrity sha512-OEI0IWCe+Dw46019YLl6V10Us5bi574EvlJEOcAkB29IzQ/mYD1A6RyNHLjZPiHCmuodxvgF6U+vZO1L15lxVA==
-
 through@2, through@^2.3.4, through@^2.3.6, through@^2.3.8, through@~2.3, through@~2.3.1:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
   integrity sha512-w89qg7PI8wAdvX60bMDP+bFoD5Dvhm9oLheFp5O4a2QF0cSBGsBX4qZmadPMvVqlLJBBci+WqGGOAPvcDeNSVg==
 
-throughput@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/throughput/-/throughput-1.0.1.tgz#f8474cfc8f2f0eb740410bc23fa920b0bdba6d53"
-  integrity sha512-4Mvv5P4xyVz6RM07wS3tGyZ/kPAiKtLeqznq3hK4pxDiTUSyQ5xeFlBiWxflCWexvSnxo2aAfedzKajJqihz4Q==
-
-thunky@^1.0.1, thunky@^1.0.2:
+thunky@^1.0.2:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"
   integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==
 
-timeout-refresh@^1.0.0:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/timeout-refresh/-/timeout-refresh-1.0.3.tgz#7024a8ce0a09a57acc2ea86002048e6c0bff7375"
-  integrity sha512-Mz0CX4vBGM5lj8ttbIFt7o4ZMxk/9rgudJRh76EvB7xXZMur7T/cjRiH2w4Fmkq0zxf2QpM8IFvOSRn8FEu3gA==
-
 tmp@0.2.1, tmp@~0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"
@@ -11345,11 +10738,6 @@ tmp@^0.0.33:
   dependencies:
     os-tmpdir "~1.0.2"
 
-to-arraybuffer@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
-  integrity sha512-okFlQcoGTi4LQBG/PgSYblw9VOyptsz2KJZqc6qtgGdes8VktzUQkj4BI2blit072iS8VODNcMA+tvnS9dnuMA==
-
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
@@ -11372,22 +10760,6 @@ tokenizr@^1.6.4:
   resolved "https://registry.yarnpkg.com/tokenizr/-/tokenizr-1.6.9.tgz#67e7fc575fb73ae1145afe166e5e21a27d725b0d"
   integrity sha512-JeEey5bD1S0hsUEANaEKqqa4HDRfZRy8I1Enx+Rpb7wD1nDMqN53g6I9nhAOejPCfG5m0gOE73H4jT3NuK29Cw==
 
-torrent-discovery@^9.4.13:
-  version "9.4.15"
-  resolved "https://registry.yarnpkg.com/torrent-discovery/-/torrent-discovery-9.4.15.tgz#95f983543d3e5259857116532cecca4aa979e494"
-  integrity sha512-71nx+TpLaF27mbsSj/tZTr588Dfk7XVzx+Rf1+nrxfXqe8qn5dIlRhgA+yY4cg8Ib69vWwkKFhAzbRqg8z42aw==
-  dependencies:
-    bittorrent-dht "^10.0.7"
-    bittorrent-lsd "^1.1.1"
-    bittorrent-tracker "^9.19.0"
-    debug "^4.3.4"
-    run-parallel "^1.2.0"
-
-torrent-piece@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/torrent-piece/-/torrent-piece-2.0.1.tgz#a1a50fffa589d9bf9560e38837230708bc3afdc6"
-  integrity sha512-JLSOyvQVLI6JTWqioY4vFL0JkEUKQcaHQsU3loxkCvPTSttw8ePs2tFwsP4XIjw99Fz8EdOzt/4faykcbnPbCQ==
-
 totalist@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/totalist/-/totalist-1.1.0.tgz#a4d65a3e546517701e3e5c37a47a70ac97fe56df"
@@ -11559,13 +10931,6 @@ uglify-js@^3.0.6:
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.17.4.tgz#61678cf5fa3f5b7eb789bb345df29afb8257c22c"
   integrity sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==
 
-uint64be@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/uint64be/-/uint64be-2.0.2.tgz#ef4a179752fe8f9ddaa29544ecfc13490031e8e5"
-  integrity sha512-9QqdvpGQTXgxthP+lY4e/gIBy+RuqcBaC6JVwT5I3bDLgT/btL6twZMR0pI3/Fgah9G/pdwzIprE5gL6v9UvyQ==
-  dependencies:
-    buffer-alloc "^1.1.0"
-
 unbox-primitive@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"
@@ -11645,11 +11010,6 @@ unordered-array-remove@^1.0.2:
   resolved "https://registry.yarnpkg.com/unordered-array-remove/-/unordered-array-remove-1.0.2.tgz#c546e8f88e317a0cf2644c97ecb57dba66d250ef"
   integrity sha512-45YsfD6svkgaCBNyvD+dFHm4qFX9g3wRSIVgWVPtm2OCnphvPxzJoe20ATsiNpNJrmzHifnxm+BN5F7gFT/4gw==
 
-unordered-set@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/unordered-set/-/unordered-set-2.0.1.tgz#4cd0fe27b8814bcf5d6073e5f0966ec7a50841e6"
-  integrity sha512-eUmNTPzdx+q/WvOHW0bgGYLWvWHNT3PTKEQLg0MAQhc0AHASHVHoP/9YytYd4RBVariqno/mEUhVZN98CmD7bg==
-
 unpipe@1.0.0, unpipe@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
@@ -11696,33 +11056,6 @@ url-toolkit@^2.2.1:
   resolved "https://registry.yarnpkg.com/url-toolkit/-/url-toolkit-2.2.5.tgz#58406b18e12c58803e14624df5e374f638b0f607"
   integrity sha512-mtN6xk+Nac+oyJ/PrI7tzfmomRVNFIWKUbG8jdYFt52hxbiReFAXIjYskvu64/dvuW71IcB7lV8l0HvZMac6Jg==
 
-url@^0.11.0:
-  version "0.11.0"
-  resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
-  integrity sha512-kbailJa29QrtXnxgq+DdCEGlbTeYM2eJUxsz6vjZavrCYPMIFHMKQmSKYAIuUK2i7hgPm28a8piX5NTUtM/LKQ==
-  dependencies:
-    punycode "1.3.2"
-    querystring "0.2.0"
-
-ut_metadata@^3.5.2:
-  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/ut_metadata/-/ut_metadata-3.5.2.tgz#2351c9348759e929978fa6a08d56ef6f584749e7"
-  integrity sha512-3XZZuJSeoIUyMYSuDbTbVtP4KAVGHPfU8nmHFkr8LJc+THCaUXwnu/2AV+LCSLarET/hL9IlbNfYTGrt6fOVuQ==
-  dependencies:
-    bencode "^2.0.1"
-    bitfield "^4.0.0"
-    debug "^4.2.0"
-    simple-sha1 "^3.0.1"
-
-ut_pex@^3.0.2:
-  version "3.0.2"
-  resolved "https://registry.yarnpkg.com/ut_pex/-/ut_pex-3.0.2.tgz#cd794d4fe02ebfa82704d41854c76c8d8187eea0"
-  integrity sha512-3xM88t+AVU5GR0sIY3tmRMLUS+YKiwStc7U7+ZFQ+UHQpX7BjVJOomhmtm0Bs+8R2n812Dt2ymXm01EqDrOOpQ==
-  dependencies:
-    bencode "^2.0.2"
-    compact2string "^1.4.1"
-    string2compact "^1.3.2"
-
 utf-8-validate@^5.0.5:
   version "5.0.10"
   resolved "https://registry.yarnpkg.com/utf-8-validate/-/utf-8-validate-5.0.10.tgz#d7d10ea39318171ca982718b6b96a8d2442571a2"
@@ -11745,17 +11078,6 @@ utils-merge@1.0.1:
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
   integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
 
-utp-native@^2.5.3:
-  version "2.5.3"
-  resolved "https://registry.yarnpkg.com/utp-native/-/utp-native-2.5.3.tgz#7c04c2a8c2858716555a77d10adb9819e3119b25"
-  integrity sha512-sWTrWYXPhhWJh+cS2baPzhaZc89zwlWCfwSthUjGhLkZztyPhcQllo+XVVCbNGi7dhyRlxkWxN4NKU6FbA9Y8w==
-  dependencies:
-    napi-macros "^2.0.0"
-    node-gyp-build "^4.2.0"
-    readable-stream "^3.0.2"
-    timeout-refresh "^1.0.0"
-    unordered-set "^2.0.1"
-
 uue@^3.1.0:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/uue/-/uue-3.1.2.tgz#e99368414e87200012eb37de4dbaebaa1c742ad2"
@@ -11830,18 +11152,6 @@ videojs-vtt.js@^0.15.4:
   dependencies:
     global "^4.3.1"
 
-videostream@^3.2.2, videostream@~3.2.1:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/videostream/-/videostream-3.2.2.tgz#e3e8d44f5159892f8f31ad35cbf9302d7a6e6afc"
-  integrity sha512-4tz23yGGeATmbzj/ZnUm6wgQ4E1lzmMXu2mUA/c0G6adtWKxm1Di5YejdZdRsK6SdkLjKjhplFFYT7r+UUDKvA==
-  dependencies:
-    binary-search "^1.3.4"
-    mediasource "^2.2.2"
-    mp4-box-encoding "^1.3.0"
-    mp4-stream "^3.0.0"
-    pump "^3.0.0"
-    range-slice-stream "^2.0.0"
-
 vite@4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/vite/-/vite-4.3.1.tgz#9badb1377f995632cdcf05f32103414db6fbb95a"
@@ -12158,63 +11468,6 @@ websocket-extensions@>=0.1.1:
   resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.4.tgz#7f8473bc839dfd87608adb95d7eb075211578a42"
   integrity sha512-OqedPIGOfsDlo31UNwYbCFMSaO9m9G/0faIHj5/dZFDMFqPTcx6UwqyOy3COEaEOg/9VsGIpdqn62W5KhoKSpg==
 
-webtorrent@1.8.26:
-  version "1.8.26"
-  resolved "https://registry.yarnpkg.com/webtorrent/-/webtorrent-1.8.26.tgz#c40313f3329d2bdfe8ae23365c17dd77825a829d"
-  integrity sha512-1bbCIDtbk4OA7xXmT87t6jDhnng6RNC9d7HNpRyvxF0GQTrIz1fB3oDnNcbOim9Upjy1GDqxAOe0Mejmc86TUg==
-  dependencies:
-    "@webtorrent/http-node" "^1.3.0"
-    addr-to-ip-port "^1.5.4"
-    bitfield "^4.1.0"
-    bittorrent-dht "^10.0.4"
-    bittorrent-protocol "^3.5.5"
-    cache-chunk-store "^3.2.2"
-    chrome-net "^3.3.4"
-    chunk-store-stream "^4.3.0"
-    cpus "^1.0.3"
-    create-torrent "^5.0.4"
-    debug "^4.3.4"
-    end-of-stream "^1.4.4"
-    escape-html "^1.0.3"
-    fs-chunk-store "^2.0.5"
-    immediate-chunk-store "^2.2.0"
-    load-ip-set "^2.2.1"
-    lt_donthave "^1.0.1"
-    memory-chunk-store "^1.3.5"
-    mime "^3.0.0"
-    multistream "^4.1.0"
-    package-json-versionify "^1.0.4"
-    parse-torrent "^9.1.5"
-    pump "^3.0.0"
-    queue-microtask "^1.2.3"
-    random-iterate "^1.0.1"
-    randombytes "^2.1.0"
-    range-parser "^1.2.1"
-    render-media "^4.1.0"
-    run-parallel "^1.2.0"
-    run-parallel-limit "^1.1.0"
-    simple-concat "^1.0.1"
-    simple-get "^4.0.1"
-    simple-peer "^9.11.1"
-    simple-sha1 "^3.1.0"
-    speed-limiter "^1.0.2"
-    stream-to-blob "^2.0.1"
-    stream-to-blob-url "^3.0.2"
-    stream-with-known-length-to-buffer "^1.0.4"
-    throughput "^1.0.1"
-    torrent-discovery "^9.4.13"
-    torrent-piece "^2.0.1"
-    unordered-array-remove "^1.0.2"
-    ut_metadata "^3.5.2"
-    ut_pex "^3.0.2"
-  optionalDependencies:
-    utp-native "^2.5.3"
-
-whatwg-fetch@^3.0.0:
-  version "3.6.2"
-  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.6.2.tgz#dced24f37f2624ed0281725d51d0e2e3fe677f8c"
-  integrity sha512-bJlen0FcuU/0EMLrdbJ7zOnW6ITZLrZMIarMUVmdKtsGvZna8vxKYaexICWPfZ8qwf9fzNq+UEIZrnSaApt6RA==
-
 whatwg-url@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-5.0.0.tgz#966454e8765462e37644d3626f6742ce8b70965d"
@@ -12377,11 +11630,6 @@ xmlhttprequest-ssl@~2.0.0:
   resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-2.0.0.tgz#91360c86b914e67f44dce769180027c0da618c67"
   integrity sha512-QKxVRxiRACQcVuQEYFsI1hhkrMlrXHPegbbd1yn9UHOmRxY+si12nQYzri3vbzt8VdTTRviqcKxcyllFas5z2A==
 
-xtend@^4.0.2:
-  version "4.0.2"
-  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
-  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
-
 y18n@^3.2.1:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.2.tgz#85c901bd6470ce71fc4bb723ad209b70f7f28696"
diff --git a/scripts/i18n/create-custom-files.ts b/scripts/i18n/create-custom-files.ts
index d03d0fe83..696a097b1 100755
--- a/scripts/i18n/create-custom-files.ts
+++ b/scripts/i18n/create-custom-files.ts
@@ -72,7 +72,10 @@ const playerKeys = {
   'Next video': 'Next video',
   'This video is password protected': 'This video is password protected',
   'You need a password to watch this video.': 'You need a password to watch this video.',
-  'Incorrect password, please enter a correct password': 'Incorrect password, please enter a correct password'
+  'Incorrect password, please enter a correct password': 'Incorrect password, please enter a correct password',
+  'Cancel': 'Cancel',
+  'Up Next': 'Up Next',
+  'Autoplay is suspended': 'Autoplay is suspended'
 }
 Object.assign(playerKeys, videojs)
 
diff --git a/server/tests/api/check-params/video-storyboards.ts b/server/tests/api/check-params/video-storyboards.ts
index a43d8fc48..c038e7370 100644
--- a/server/tests/api/check-params/video-storyboards.ts
+++ b/server/tests/api/check-params/video-storyboards.ts
@@ -12,7 +12,7 @@ describe('Test video storyboards API validator', function () {
   // ---------------------------------------------------------------
 
   before(async function () {
-    this.timeout(30000)
+    this.timeout(120000)
 
     server = await createSingleServer(1)
     await setAccessTokensToServers([ server ])
diff --git a/shared/models/metrics/playback-metric-create.model.ts b/shared/models/metrics/playback-metric-create.model.ts
index d669ab690..3a8f328c8 100644
--- a/shared/models/metrics/playback-metric-create.model.ts
+++ b/shared/models/metrics/playback-metric-create.model.ts
@@ -1,7 +1,7 @@
 import { VideoResolution } from '../videos'
 
 export interface PlaybackMetricCreate {
-  playerMode: 'p2p-media-loader' | 'webtorrent'
+  playerMode: 'p2p-media-loader' | 'webtorrent' | 'web-video' // FIXME: remove webtorrent player mode not used anymore in PeerTube v6
 
   resolution?: VideoResolution
   fps?: number
diff --git a/shared/models/plugins/client/client-hook.model.ts b/shared/models/plugins/client/client-hook.model.ts
index bc3f5dd9f..4a0818c99 100644
--- a/shared/models/plugins/client/client-hook.model.ts
+++ b/shared/models/plugins/client/client-hook.model.ts
@@ -59,6 +59,10 @@ export const clientFilterHookObject = {
   'filter:internal.video-watch.player.build-options.params': true,
   'filter:internal.video-watch.player.build-options.result': true,
 
+  // Filter the options to load a new video in our player
+  'filter:internal.video-watch.player.load-options.params': true,
+  'filter:internal.video-watch.player.load-options.result': true,
+
   // Filter our SVG icons content
   'filter:internal.common.svg-icons.get-content.params': true,
   'filter:internal.common.svg-icons.get-content.result': true,