Correctly implement p2p-media-loader

4 files changed, 53 insertions, 24 deletions

diff --git a/client/src/assets/player/videojs-components/p2p-info-button.ts b/client/src/assets/player/videojs-components/p2p-info-button.ts
index 03a5d29f0..2fc4c4562 100644
--- a/client/src/assets/player/videojs-components/p2p-info-button.ts
+++ b/client/src/assets/player/videojs-components/p2p-info-button.ts
@@ -1,4 +1,4 @@
-import { VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
+import { PlayerNetworkInfo, VideoJSComponentInterface, videojsUntyped } from '../peertube-videojs-typings'
 import { bytes } from '../utils'
 
 const Button: VideoJSComponentInterface = videojsUntyped.getComponent('Button')
@@ -65,7 +65,7 @@ class P2pInfoButton extends Button {
     subDivHttp.appendChild(subDivHttpText)
     div.appendChild(subDivHttp)
 
-    this.player_.on('p2pInfo', (event: any, data: any) => {
+    this.player_.on('p2pInfo', (event: any, data: PlayerNetworkInfo) => {
       // We are in HTTP fallback
       if (!data) {
         subDivHttp.className = 'vjs-peertube-displayed'
@@ -74,11 +74,13 @@ class P2pInfoButton extends Button {
         return
       }
 
-      const downloadSpeed = bytes(data.downloadSpeed)
-      const uploadSpeed = bytes(data.uploadSpeed)
-      const totalDownloaded = bytes(data.downloaded)
-      const totalUploaded = bytes(data.uploaded)
-      const numPeers = data.numPeers
+      const p2pStats = data.p2p
+
+      const downloadSpeed = bytes(p2pStats.downloadSpeed)
+      const uploadSpeed = bytes(p2pStats.uploadSpeed)
+      const totalDownloaded = bytes(p2pStats.downloaded)
+      const totalUploaded = bytes(p2pStats.uploaded)
+      const numPeers = p2pStats.numPeers
 
       subDivWebtorrent.title = this.player_.localize('Total downloaded: ') + totalDownloaded.join(' ') + '\n' +
         this.player_.localize('Total uploaded: ' + totalUploaded.join(' '))
diff --git a/client/src/assets/player/videojs-components/resolution-menu-button.ts b/client/src/assets/player/videojs-components/resolution-menu-button.ts
index 2847de470..abcc16411 100644
--- a/client/src/assets/player/videojs-components/resolution-menu-button.ts
+++ b/client/src/assets/player/videojs-components/resolution-menu-button.ts
@@ -14,11 +14,9 @@ class ResolutionMenuButton extends MenuButton {
     super(player, options)
     this.player = player
 
-    player.on('loadedqualitydata', (e: any, data: any) => this.buildQualities(data))
+    player.tech_.on('loadedqualitydata', (e: any, data: any) => this.buildQualities(data))
 
-    if (player.webtorrent) {
-      player.webtorrent().on('videoFileUpdate', () => setTimeout(() => this.trigger('updateLabel'), 0))
-    }
+    player.peertube().on('resolutionChange', () => setTimeout(() => this.trigger('updateLabel'), 0))
   }
 
   createEl () {
@@ -49,11 +47,32 @@ class ResolutionMenuButton extends MenuButton {
     return 'vjs-resolution-control ' + super.buildWrapperCSSClass()
   }
 
+  private addClickListener (component: any) {
+    component.on('click', () => {
+      let children = this.menu.children()
+
+      for (const child of children) {
+        if (component !== child) {
+          child.selected(false)
+        }
+      }
+    })
+  }
+
   private buildQualities (data: LoadedQualityData) {
     // The automatic resolution item will need other labels
     const labels: { [ id: number ]: string } = {}
 
+    data.qualityData.video.sort((a, b) => {
+      if (a.id > b.id) return -1
+      if (a.id === b.id) return 0
+      return 1
+    })
+
     for (const d of data.qualityData.video) {
+      // Skip auto resolution, we'll add it ourselves
+      if (d.id === -1) continue
+
       this.menu.addChild(new ResolutionMenuItem(
         this.player_,
         {
@@ -77,6 +96,12 @@ class ResolutionMenuButton extends MenuButton {
         selected: true // By default, in auto mode
       }
     ))
+
+    for (const m of this.menu.children()) {
+      this.addClickListener(m)
+    }
+
+    this.trigger('menuChanged')
   }
 }
 ResolutionMenuButton.prototype.controlText_ = 'Quality'
diff --git a/client/src/assets/player/videojs-components/resolution-menu-item.ts b/client/src/assets/player/videojs-components/resolution-menu-item.ts
index cc1c79739..6c42fefd2 100644
--- a/client/src/assets/player/videojs-components/resolution-menu-item.ts
+++ b/client/src/assets/player/videojs-components/resolution-menu-item.ts
@@ -28,16 +28,12 @@ class ResolutionMenuItem extends MenuItem {
     this.id = options.id
     this.callback = options.callback
 
-    if (player.webtorrent) {
-      player.webtorrent().on('videoFileUpdate', (_: any, data: ResolutionUpdateData) => this.updateSelection(data))
+    player.peertube().on('resolutionChange', (_: any, data: ResolutionUpdateData) => this.updateSelection(data))
 
-      // We only want to disable the "Auto" item
-      if (this.id === -1) {
-        player.webtorrent().on('autoResolutionUpdate', (_: any, data: AutoResolutionUpdateData) => this.updateAutoResolution(data))
-      }
+    // We only want to disable the "Auto" item
+    if (this.id === -1) {
+      player.peertube().on('autoResolutionChange', (_: any, data: AutoResolutionUpdateData) => this.updateAutoResolution(data))
     }
-
-    // TODO: update on HLS change
   }
 
   handleClick (event: any) {
@@ -46,12 +42,12 @@ class ResolutionMenuItem extends MenuItem {
 
     super.handleClick(event)
 
-    this.callback(this.id)
+    this.callback(this.id, 'video')
   }
 
   updateSelection (data: ResolutionUpdateData) {
     if (this.id === -1) {
-      this.currentResolutionLabel = this.labels[data.resolutionId]
+      this.currentResolutionLabel = this.labels[data.id]
     }
 
     // Automatic resolution only
@@ -60,7 +56,7 @@ class ResolutionMenuItem extends MenuItem {
       return
     }
 
-    this.selected(this.id === data.resolutionId)
+    this.selected(this.id === data.id)
   }
 
   updateAutoResolution (data: AutoResolutionUpdateData) {
diff --git a/client/src/assets/player/videojs-components/settings-menu-item.ts b/client/src/assets/player/videojs-components/settings-menu-item.ts
index b9a430290..f14959f9c 100644
--- a/client/src/assets/player/videojs-components/settings-menu-item.ts
+++ b/client/src/assets/player/videojs-components/settings-menu-item.ts
@@ -223,6 +223,11 @@ class SettingsMenuItem extends MenuItem {
     this.subMenu.on('updateLabel', () => {
       this.update()
     })
+    this.subMenu.on('menuChanged', () => {
+      this.bindClickEvents()
+      this.setSize()
+      this.update()
+    })
 
     this.settingsSubMenuTitleEl_.innerHTML = this.player_.localize(this.subMenu.controlText_)
     this.settingsSubMenuEl_.appendChild(this.subMenu.menu.el_)
@@ -230,7 +235,7 @@ class SettingsMenuItem extends MenuItem {
     this.update()
 
     this.createBackButton()
-    this.getSize()
+    this.setSize()
     this.bindClickEvents()
 
     // prefixed event listeners for CSS TransitionEnd
@@ -292,8 +297,9 @@ class SettingsMenuItem extends MenuItem {
 
   // save size of submenus on first init
   // if number of submenu items change dynamically more logic will be needed
-  getSize () {
+  setSize () {
     this.dialog.removeClass('vjs-hidden')
+    videojsUntyped.dom.removeClass(this.settingsSubMenuEl_, 'vjs-hidden')
     this.size = this.settingsButton.getComponentSize(this.settingsSubMenuEl_)
     this.setMargin()
     this.dialog.addClass('vjs-hidden')