Reorganize videojs components

5 files changed, 305 insertions, 0 deletions

diff --git a/client/src/assets/player/control-bar/next-previous-video-button.ts b/client/src/assets/player/control-bar/next-previous-video-button.ts
new file mode 100644
index 000000000..fe17ce2ce
--- /dev/null
+++ b/client/src/assets/player/control-bar/next-previous-video-button.ts
@@ -0,0 +1,50 @@
+import videojs from 'video.js'
+import { NextPreviousVideoButtonOptions } from '../peertube-videojs-typings'
+
+const Button = videojs.getComponent('Button')
+
+class NextPreviousVideoButton extends Button {
+  private readonly nextPreviousVideoButtonOptions: NextPreviousVideoButtonOptions
+
+  constructor (player: videojs.Player, options?: NextPreviousVideoButtonOptions) {
+    super(player, options as any)
+
+    this.nextPreviousVideoButtonOptions = options
+
+    this.update()
+  }
+
+  createEl () {
+    const type = (this.options_ as NextPreviousVideoButtonOptions).type
+
+    const button = videojs.dom.createEl('button', {
+      className: 'vjs-' + type + '-video'
+    }) as HTMLButtonElement
+    const nextIcon = videojs.dom.createEl('span', {
+      className: 'icon icon-' + type
+    })
+    button.appendChild(nextIcon)
+
+    if (type === 'next') {
+      button.title = this.player_.localize('Next video')
+    } else {
+      button.title = this.player_.localize('Previous video')
+    }
+
+    return button
+  }
+
+  handleClick () {
+    this.nextPreviousVideoButtonOptions.handler()
+  }
+
+  update () {
+    const disabled = this.nextPreviousVideoButtonOptions.isDisabled()
+
+    if (disabled) this.addClass('vjs-disabled')
+    else this.removeClass('vjs-disabled')
+  }
+}
+
+videojs.registerComponent('NextVideoButton', NextPreviousVideoButton)
+videojs.registerComponent('PreviousVideoButton', NextPreviousVideoButton)
diff --git a/client/src/assets/player/control-bar/p2p-info-button.ts b/client/src/assets/player/control-bar/p2p-info-button.ts
new file mode 100644
index 000000000..081dee1d3
--- /dev/null
+++ b/client/src/assets/player/control-bar/p2p-info-button.ts
@@ -0,0 +1,124 @@
+import videojs from 'video.js'
+import { PeerTubeP2PInfoButtonOptions, PlayerNetworkInfo } from '../peertube-videojs-typings'
+import { bytes } from '../utils'
+
+const Button = videojs.getComponent('Button')
+class P2pInfoButton extends Button {
+
+  constructor (player: videojs.Player, options?: PeerTubeP2PInfoButtonOptions) {
+    super(player, options as any)
+  }
+
+  createEl () {
+    const div = videojs.dom.createEl('div', {
+      className: 'vjs-peertube'
+    })
+    const subDivWebtorrent = videojs.dom.createEl('div', {
+      className: 'vjs-peertube-hidden' // Hide the stats before we get the info
+    }) as HTMLDivElement
+    div.appendChild(subDivWebtorrent)
+
+    // 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'
+    })
+    subDivWebtorrent.appendChild(downloadIcon)
+
+    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)
+
+    const uploadIcon = videojs.dom.createEl('span', {
+      className: 'icon icon-upload'
+    })
+    subDivWebtorrent.appendChild(uploadIcon)
+
+    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)
+
+    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 subDivHttp = videojs.dom.createEl('div', {
+      className: 'vjs-peertube-hidden'
+    })
+    const subDivHttpText = videojs.dom.createEl('span', {
+      className: 'http-fallback',
+      textContent: 'HTTP'
+    })
+
+    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
+      }
+
+      const p2pStats = data.p2p
+      const httpStats = data.http
+
+      const downloadSpeed = bytes(p2pStats.downloadSpeed + httpStats.downloadSpeed)
+      const uploadSpeed = bytes(p2pStats.uploadSpeed + httpStats.uploadSpeed)
+      const totalDownloaded = bytes(p2pStats.downloaded + httpStats.downloaded)
+      const totalUploaded = bytes(p2pStats.uploaded + httpStats.uploaded)
+      const numPeers = p2pStats.numPeers
+
+      subDivWebtorrent.title = this.player().localize('Total downloaded: ') + totalDownloaded.join(' ') + '\n'
+
+      if (data.source === 'p2p-media-loader') {
+        const downloadedFromServer = bytes(httpStats.downloaded).join(' ')
+        const downloadedFromPeers = bytes(p2pStats.downloaded).join(' ')
+
+        subDivWebtorrent.title +=
+          ' * ' + this.player().localize('From servers: ') + downloadedFromServer + '\n' +
+          ' * ' + this.player().localize('From peers: ') + downloadedFromPeers + '\n'
+      }
+      subDivWebtorrent.title += this.player().localize('Total uploaded: ') + totalUploaded.join(' ')
+
+      downloadSpeedNumber.textContent = downloadSpeed[0]
+      downloadSpeedUnit.textContent = ' ' + downloadSpeed[1]
+
+      uploadSpeedNumber.textContent = uploadSpeed[0]
+      uploadSpeedUnit.textContent = ' ' + uploadSpeed[1]
+
+      peersNumber.textContent = numPeers.toString()
+      peersText.textContent = ' ' + (numPeers > 1 ? this.player().localize('peers') : this.player_.localize('peer'))
+
+      subDivHttp.className = 'vjs-peertube-hidden'
+      subDivWebtorrent.className = 'vjs-peertube-displayed'
+    })
+
+    return div as HTMLButtonElement
+  }
+}
+
+videojs.registerComponent('P2PInfoButton', P2pInfoButton)
diff --git a/client/src/assets/player/control-bar/peertube-link-button.ts b/client/src/assets/player/control-bar/peertube-link-button.ts
new file mode 100644
index 000000000..c49cee566
--- /dev/null
+++ b/client/src/assets/player/control-bar/peertube-link-button.ts
@@ -0,0 +1,45 @@
+import videojs from 'video.js'
+import { buildVideoLink, decorateVideoLink } from '@shared/core-utils'
+import { PeerTubeLinkButtonOptions } from '../peertube-videojs-typings'
+
+const Button = videojs.getComponent('Button')
+class PeerTubeLinkButton extends Button {
+
+  constructor (player: videojs.Player, options?: PeerTubeLinkButtonOptions) {
+    super(player, options as any)
+  }
+
+  createEl () {
+    return this.buildElement()
+  }
+
+  updateHref () {
+    this.el().setAttribute('href', this.buildLink())
+  }
+
+  handleClick () {
+    this.player().pause()
+  }
+
+  private buildElement () {
+    const el = videojs.dom.createEl('a', {
+      href: this.buildLink(),
+      innerHTML: 'PeerTube',
+      title: this.player().localize('Video page (new window)'),
+      className: 'vjs-peertube-link',
+      target: '_blank'
+    })
+
+    el.addEventListener('mouseenter', () => this.updateHref())
+
+    return el as HTMLButtonElement
+  }
+
+  private buildLink () {
+    const url = buildVideoLink({ shortUUID: (this.options_ as PeerTubeLinkButtonOptions).shortUUID })
+
+    return decorateVideoLink({ url, startTime: this.player().currentTime() })
+  }
+}
+
+videojs.registerComponent('PeerTubeLinkButton', PeerTubeLinkButton)
diff --git a/client/src/assets/player/control-bar/peertube-load-progress-bar.ts b/client/src/assets/player/control-bar/peertube-load-progress-bar.ts
new file mode 100644
index 000000000..623e70eb2
--- /dev/null
+++ b/client/src/assets/player/control-bar/peertube-load-progress-bar.ts
@@ -0,0 +1,33 @@
+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/control-bar/theater-button.ts b/client/src/assets/player/control-bar/theater-button.ts
new file mode 100644
index 000000000..f862ee224
--- /dev/null
+++ b/client/src/assets/player/control-bar/theater-button.ts
@@ -0,0 +1,53 @@
+import videojs from 'video.js'
+import { saveTheaterInStore, getStoredTheater } from '../peertube-player-local-storage'
+
+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) {
+    super(player, options)
+
+    const enabled = getStoredTheater()
+    if (enabled === true) {
+      this.player().addClass(TheaterButton.THEATER_MODE_CLASS)
+
+      this.handleTheaterChange()
+    }
+
+    this.controlText('Theater mode')
+
+    this.player().theaterEnabled = enabled
+  }
+
+  buildCSSClass () {
+    return `vjs-theater-control ${super.buildCSSClass()}`
+  }
+
+  handleTheaterChange () {
+    const theaterEnabled = this.isTheaterEnabled()
+
+    if (theaterEnabled) {
+      this.controlText('Normal mode')
+    } else {
+      this.controlText('Theater mode')
+    }
+
+    saveTheaterInStore(theaterEnabled)
+
+    this.player_.trigger('theaterChange', theaterEnabled)
+  }
+
+  handleClick () {
+    this.player_.toggleClass(TheaterButton.THEATER_MODE_CLASS)
+
+    this.handleTheaterChange()
+  }
+
+  private isTheaterEnabled () {
+    return this.player_.hasClass(TheaterButton.THEATER_MODE_CLASS)
+  }
+}
+
+videojs.registerComponent('TheaterButton', TheaterButton)