8 files changed, 126 insertions, 125 deletions

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)